/* Estilos de las pantallas de acceso: login, crear y restablecer contraseña. */
/* La misma letra de toda la plataforma (ADR-032). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
html, body { margin:0; padding:0; background:#0b0b0c; }
/* Las pantallas esconden y muestran partes con el atributo hidden. Reglas
   como "form { display:flex }" le ganan al navegador y lo dejaban sin
   efecto: se veían los dos formularios a la vez. */
[hidden] { display:none !important; }
* { box-sizing:border-box; }
input::placeholder { color:#6b7076; }
a { color:#6c8cff; text-decoration:none; }
a:hover { color:#96adff; }
@keyframes spin { to { transform:rotate(360deg); } }
.wrap { position:relative; min-height:100vh; width:100%; background:#131416;
        font-family:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif; color:#f2f4f6; }
.bg { position:absolute; inset:0; background-image:url("img/fondo4.png"); background-size:cover; background-position:30% center; }
.brand { position:absolute; left:40px; bottom:40px; width:min(19.1vw,204px); height:auto; z-index:1; }
.panel { position:absolute; top:0; right:0; bottom:0; width:45%;
         background:rgba(19,20,22,.4); backdrop-filter:blur(44px); -webkit-backdrop-filter:blur(44px);
         display:flex; align-items:center; justify-content:center; }
.panel-inner { width:100%; max-width:480px; display:flex; align-items:center; justify-content:center;
               padding:clamp(22px,4.8vw,58px) clamp(16px,4.8vw,51px); }
form { width:100%; max-width:448px; display:flex; flex-direction:column; gap:0; }
h1 { margin:0 0 8px; font-size:clamp(27px,4vw,42px); line-height:1.06; font-weight:700; letter-spacing:-.02em; }
.sub { margin:0 0 clamp(22px,3.2vw,35px); font-size:clamp(13px,1.3vw,16px); color:#a6acb4; line-height:1.4; }
label.fld { font-size:12px; font-weight:500; color:#e7eaee; margin-bottom:8px; }
.field { position:relative; display:flex; align-items:center; }
.field svg.ico { position:absolute; left:13px; width:16px; height:16px; pointer-events:none; }
.field input { width:100%; padding:13px 13px 13px 38px; border-radius:8px; border:1px solid #2c2f34;
               background:#1b1d20; color:#f2f4f6; font-size:13px; font-family:inherit; outline:none; }
.field input#password { padding-right:42px; }
.field input:focus { border-color:#4a63c8; background:#1e2126; }
/* Foco visible con el teclado: el borde solo cambiaba de tono (los campos
   tienen outline:none), y los botones y enlaces no tenían anillo propio. */
.field input:focus-visible { box-shadow:0 0 0 3px rgba(108,140,255,.45); }
button:focus-visible, a:focus-visible, .row input[type=checkbox]:focus-visible { outline:2px solid #96adff; outline-offset:2px; }
.err { min-height:18px; padding-top:5px; font-size:10px; color:#ff8a8a; }
.eye { position:absolute; right:6px; display:flex; align-items:center; justify-content:center; width:32px; height:32px;
       border:0; background:transparent; color:#8b9198; cursor:pointer; border-radius:6px; }
.eye:hover { color:#e7eaee; background:#25282d; }
.row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin:-8px 0 21px; }
.row label { display:flex; align-items:center; gap:8px; font-size:12px; color:#d5d9de; cursor:pointer; min-height:35px; }
.row input[type=checkbox] { width:14px; height:14px; accent-color:#4a63c8; cursor:pointer; }
button[type=submit] { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:46px;
                      border-radius:8px; border:1px solid #4a63c8; background:#3a4f9e; color:#fff; font-size:14px;
                      font-weight:600; font-family:inherit; cursor:pointer; transition:background .15s; }
button[type=submit]:hover { background:#465ebb; }
button[type=submit]:active { background:#33468c; }
button[type=submit]:disabled { opacity:.75; cursor:default; }
.spin { display:none; width:14px; height:14px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
        border-radius:50%; animation:spin .7s linear infinite; }
.status { min-height:21px; padding-top:10px; font-size:11px; text-align:center; color:#ffb27f; }
.status.ok { color:#7fe0a8; }
.foot { margin:21px 0 0; font-size:12px; color:#8b9198; text-align:center; }
@media (max-width:900px) {
  .panel { position:relative; width:100%; min-height:100vh; }
  .brand { display:none; }
}

/* ---- compartido por las pantallas de acceso ---- */
.field input.sin-ico { padding-left:13px; }
.field input.con-ojo { padding-right:42px; }
.enlace { background:none; border:0; padding:8px 0; font:inherit; font-size:12px; color:#6c8cff; cursor:pointer; }
.enlace:hover { color:#96adff; }
.volver { display:block; text-align:center; margin-top:14px; font-size:12px; }
.reglas { list-style:none; margin:2px 0 16px; padding:0; display:flex; flex-direction:column; gap:6px; }
.reglas li { display:flex; align-items:center; gap:8px; font-size:12px; color:#8b9198; }
.reglas li::before { content:''; width:7px; height:7px; border-radius:50%; background:#3a3e45; flex:none; transition:background .15s; }
.reglas li.ok { color:#bfe9cf; }
.reglas li.ok::before { background:#3fbf75; }
.aviso { border-radius:10px; padding:13px 14px; font-size:13px; line-height:1.5; margin:0 0 18px;
         background:rgba(74,99,200,.14); border:1px solid rgba(108,140,255,.28); color:#d8def8; }
.aviso.error { background:rgba(255,120,120,.1); border-color:rgba(255,138,138,.3); color:#ffc9c9; }
.aviso.exito { background:rgba(63,191,117,.12); border-color:rgba(63,191,117,.32); color:#c9f0d8; }

/* ---- código de verificación (segundo paso) ---- */
.field input.codigo { font-size:22px; letter-spacing:.42em; text-align:center; padding:12px 13px;
                      font-variant-numeric:tabular-nums; font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; }
.field input.codigo::placeholder { color:#3a3e45; }
.enlace:disabled { color:#5a5f66; cursor:default; }