[hidden]{display:none!important}
:root{
  color-scheme:dark;
  --accent:#3BEC97; --accent-deep:#2fd47f;
  --bg:#0e120f; --card:rgba(19,25,21,.78); --line:#39443c; --line-glow:rgba(59,236,151,.4);
  --txt:#f2f6f2; --dim:#a8b3aa; --field:rgba(14,18,15,.72);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font:400 15px/1.5 Poppins,system-ui,sans-serif; color:var(--txt);
  background:
    radial-gradient(ellipse 620px 560px at 22% 52%, rgba(59,236,151,.05), transparent 70%),
    linear-gradient(90deg,rgba(11,14,12,.86) 0%,rgba(11,14,12,.76) 30%,rgba(11,14,12,.45) 55%,rgba(11,14,12,0) 76%),
    linear-gradient(0deg,rgba(14,18,15,.4) 0%,rgba(14,18,15,0) 20%),
    url(../imagenes/nuevaweb/fondo-portal.jpg) right center/auto 100% no-repeat fixed,
    var(--bg);
  min-height:100vh;
}
.topbar{
  position:fixed; inset:0 0 auto 0; height:62px; z-index:10;
  display:flex; align-items:center; padding:0 26px;
  background:rgba(10,13,11,.72); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(59,236,151,.14);
}
.topbar img{height:32px}
.scene{min-height:100vh; display:flex; align-items:center; padding:92px 6vw 40px;}
.portal-card{
  width:400px; max-width:100%;
  background:var(--card); backdrop-filter:blur(16px) brightness(1.06);
  border:1px solid var(--line-glow); border-radius:16px;
  box-shadow:0 0 46px rgba(59,236,151,.09), 0 26px 70px rgba(0,0,0,.65);
  padding:34px 32px 26px;
  animation:glow 5s ease-in-out infinite;
}
@keyframes glow{
  0%,100%{box-shadow:0 0 46px rgba(59,236,151,.09),0 26px 70px rgba(0,0,0,.65)}
  50%{box-shadow:0 0 64px rgba(59,236,151,.16),0 26px 70px rgba(0,0,0,.65)}
}
@media (prefers-reduced-motion:reduce){.portal-card{animation:none}}
.card-logo{display:block; margin:0 auto 14px; height:46px}
.card-title{
  text-align:center; color:var(--accent); font-size:19px; font-weight:600;
  letter-spacing:.2px; margin-bottom:22px; text-wrap:balance;
}
.card-lead{text-align:center; color:var(--dim); font-size:13px; line-height:1.5; margin:-10px 0 22px}
.form-row{margin-bottom:16px}
label{display:block; font-size:13px; color:#cfd6d0; margin-bottom:7px; font-weight:500}
.field{position:relative}
.field svg.icon{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; stroke:#6d7a70; fill:none; stroke-width:1.8; pointer-events:none;
}
.field input{
  width:100%; font:inherit; font-size:14px; color:var(--txt);
  background:var(--field); border:1px solid var(--line); border-radius:11px;
  padding:12px 42px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.field input::placeholder{color:#5f6a62}
.field input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(59,236,151,.14)}
.field input:disabled{opacity:.5; cursor:not-allowed}
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
  -webkit-box-shadow:inset 0 0 0 100px #0e120f;
  -webkit-text-fill-color:var(--txt);
  caret-color:var(--txt);
  transition:background-color 9999s ease-out;
}
.hint{display:block; margin-top:6px; font-size:12px; color:var(--dim)}
.pw-reqs{list-style:none; margin-top:8px; display:grid; gap:4px; font-size:12.5px; color:var(--dim)}
.pw-reqs li{position:relative; padding-left:18px}
.pw-reqs li::before{content:'○'; position:absolute; left:0; top:0; font-size:10px; color:#6d7a70}
.pw-reqs li.ok{color:var(--accent)}
.pw-reqs li.ok::before{content:'✓'; color:var(--accent)}
.pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:#6d7a70; cursor:pointer; padding:6px 8px; font-size:15px;
  display:inline-flex; align-items:center; line-height:0;
}
.pw-toggle:hover{color:var(--accent)}
.pw-toggle svg{width:20px; height:20px;}
.btn-entrar{
  width:100%; margin-top:6px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:9px;
  font:600 15px Poppins,sans-serif; color:#0c2417;
  background:linear-gradient(180deg,#4ff2a4,var(--accent-deep));
  border:0; border-radius:11px; padding:13px;
  transition:filter .15s, box-shadow .15s;
}
.btn-entrar:hover{filter:brightness(1.07); box-shadow:0 0 26px rgba(59,236,151,.35)}
.btn-entrar:focus-visible{outline:2px solid #fff; outline-offset:2px}
.btn-entrar svg{width:17px;height:17px;stroke:#0c2417;fill:none;stroke-width:2}
.links{margin-top:16px; text-align:center; display:grid; gap:8px}
.links a{color:var(--accent); font-size:13px; text-decoration:none}
.links a:hover{text-decoration:underline}
.links a.sec{color:var(--dim)}
.links a.sec:hover{color:var(--txt)}
.divider{
  display:flex; align-items:center; gap:12px; margin:20px 0 14px;
  color:transparent;
}
.divider::before,.divider::after{content:''; flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(59,236,151,.3),transparent)}
.divider img{height:17px; opacity:.85}
.card-foot{
  display:flex; align-items:center; justify-content:center; gap:7px;
  color:#8b958e; font-size:12.5px;
}
.card-foot svg{width:13px;height:13px;stroke:#8b958e;fill:none;stroke-width:2}
.aviso{
  margin-top:14px; padding:10px 14px; border-radius:10px; font-size:13px;
  background:rgba(236,91,91,.12); border:1px solid rgba(236,91,91,.4); color:#f2b8b8;
}
.aviso[hidden]{display:none}
.aviso.show{background:rgba(59,236,151,.1); border-color:rgba(59,236,151,.4); color:#bfeeD6;}
@media (max-width:760px){
  body{background:
    linear-gradient(0deg,rgba(14,18,15,.6),rgba(14,18,15,.6)),
    url(../imagenes/nuevaweb/fondo-portal.jpg) center/cover no-repeat, var(--bg);}
  .scene{padding:86px 18px 30px; justify-content:center}
}