/* ═══════════════════════════════════════════════════════════════════════════
   SAMS · Login — MODO OSCURO
   ───────────────────────────────────────────────────────────────────────────
   style.css define toda su paleta en un bloque :root, así que el modo oscuro
   es sobre todo redefinir esas variables bajo `html.log-dark`. Lo que no salga
   de una variable se corrige aquí abajo, en la sección de retoques.

   LOS NEUTROS SON LOS DEL ADMIN
   No se inventa una gama nueva: se usan los mismos neutros desaturados que el
   resto del sistema en oscuro (public/assets/css/admin/dark.css), que es la
   paleta de referencia. Así el salto del login al módulo no cambia de tono:

     página #0c1110 · superficie #161e1c · superficie-2 #1a221f
     borde  #2a3431 · texto #e8efed / #b9c6c2 / #93a39e

   EL VERDE INSTITUCIONAL NO CAMBIA
   #009c86 es color de marca y se mantiene en ambos temas, igual que en los
   módulos. Sólo se aclara donde hace de TEXTO sobre fondo oscuro, porque a
   ese tamaño el verde de marca se queda corto de contraste.
   ═══════════════════════════════════════════════════════════════════════════ */

html.log-dark {
    /* Marca — el verde no se toca; sólo el tinte claro pasa a oscuro */
    --brand-light:    #163029;
    --brand-glow:     rgba(0,156,134,.22);

    /* Panel derecho: ya era verde oscuro; se hunde un poco más para no
       destacar sobre el resto de la pantalla */
    --panel-top:      #004a41;
    --panel-mid:      #002a25;
    --panel-bot:      #001a16;

    /* Fondo y superficies — neutros del admin */
    --bg:             #0c1110;
    --surface:        #161e1c;
    --surface-2:      #1a221f;
    --border:         #2a3431;
    --border-focus:   #009c86;

    /* Texto */
    --text-1:         #e8efed;
    --text-2:         #b9c6c2;
    --text-3:         #93a39e;
    --text-label:     #b9c6c2;

    /* Semánticos: los fondos claros pasan a los oscuros del admin y el texto
       a los tonos legibles sobre ellos */
    --error-lt:       #3b1717;
    --error-bdr:      #7f1d1d;
    --warn-lt:        #332408;
    --warn-bdr:       #6b4313;
    --warn-dk:        #fcd34d;
    --info-lt:        #0c2333;
    --info-bdr:       #1e4070;
    --info-dk:        #93c5fd;

    --log-danger-dk:  #fca5a5;
    --log-primary-lt: #163029;
    --log-primary-bdr: rgba(0,156,134,.35);
    --log-primary-dk: #6ee7b7;

    /* La sombra grande se apaga: sobre fondo oscuro sólo ensucia */
    --shadow-lg:      0 20px 60px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.35);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RETOQUES — lo que style.css fija sin pasar por una variable
   ═══════════════════════════════════════════════════════════════════════════ */

/* El logotipo SAMS es tinta oscura sobre fondo transparente: sobre la tarjeta
   oscura casi desaparece. Se aclara conservando su silueta, el mismo recurso
   que usa el navbar de los módulos con el logo de la universidad. */
html.log-dark .form-logo img,
html.log-dark .mob-sams-iso { filter: brightness(0) invert(1); opacity: .92; }

/* Campos de texto */
html.log-dark input[type="text"],
html.log-dark input[type="password"],
html.log-dark .username__input,
html.log-dark .log-captcha-input,
html.log-dark .mob-input-wrap input {
    background: var(--surface-2);
    color: var(--text-1);
    border-color: var(--border);
}
html.log-dark input::placeholder,
html.log-dark .mob-input-wrap input::placeholder { color: var(--text-3); }

/* Autorrelleno de Chrome: pinta su propio amarillo y se salta background.
   El truco del inset shadow es la única forma de taparlo. */
html.log-dark input:-webkit-autofill,
html.log-dark input:-webkit-autofill:hover,
html.log-dark input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #1a221f inset !important;
    -webkit-text-fill-color: #e8efed !important;
    caret-color: #e8efed;
}

/* Tarjeta del formulario y su marco */
html.log-dark .form-wrapper,
html.log-dark .form-side,
html.log-dark .mob-login { background: var(--surface); }

/* Banner de la mascota */
html.log-dark .mascot-banner,
html.log-dark .mob-mascot {
    background: var(--brand-light);
    border-color: rgba(0,156,134,.28);
}
html.log-dark .mascot-banner-text strong,
html.log-dark .mob-mascot-text strong { color: #6ee7b7; }
html.log-dark .mascot-banner-text span,
html.log-dark .mob-mascot-text span   { color: var(--text-2); }

/* Etiquetas e iconos de campo */
html.log-dark label,
html.log-dark .mob-field label { color: var(--text-label); }
html.log-dark .field-icon,
html.log-dark .mob-icon,
html.log-dark .toggle-password,
html.log-dark .mob-toggle-pwd { color: var(--text-3); }

/* Enlaces del pie del formulario */
html.log-dark .my-form__actions a,
html.log-dark .mob-form a { color: #6ee7b7; }

/* Captcha */
html.log-dark .log-captcha {
    background: var(--surface-2);
    border-color: var(--border);
}
html.log-dark .log-captcha-label { color: var(--text-2); }
/* La imagen del captcha se genera con fondo claro en el servidor; invertirla
   la haría ilegible, así que se deja tal cual sobre un marco claro propio. */
html.log-dark .log-captcha-img {
    background: #fff;
    border-radius: var(--log-rad-sm);
}

/* Aviso de Bloq Mayús */
html.log-dark .caps-hint,
html.log-dark .mob-caps-hint { color: #fcd34d; }

/* Separadores */
html.log-dark hr,
html.log-dark .form-heading { border-color: var(--border); }

/* ═══════════════════════════════════════════════════════════════════════════
   BOTÓN DE CAMBIO DE TEMA
   Vive en las dos maquetas (escritorio y móvil). En claro se dibuja sobre la
   tarjeta blanca; en oscuro, sobre la superficie oscura.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Vive dentro de .info-side —el panel verde, que ya es position:relative—, así
   que su esquina superior derecha coincide con la de la tarjeta entera. En
   .form-side quedaba contra el borde interior, o sea a media pantalla.

   El panel verde es verde en los dos temas, de modo que el botón se dibuja en
   blanco translúcido y NO cuelga de las variables de tema: si tomara --surface
   se volvería una pastilla clara sobre el degradado. */
.info-side .log-theme-toggle {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;                 /* por encima de los círculos decorativos ::before/::after */
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: rgba(255, 255, 255, .92);
    cursor: pointer;
    transition: var(--trans);
}
.info-side .log-theme-toggle:hover {
    background: rgba(255, 255, 255, .24);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
    transform: rotate(-12deg);
}
.info-side .log-theme-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.log-theme-toggle svg { width: 18px; height: 18px; display: block; }

/* En móvil el botón va junto a los logotipos, en el flujo y no flotando.
   Ahí el fondo sí es el de la superficie, así que usa las variables de tema. */
.mob-login .log-theme-toggle {
    position: static;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-2);
    cursor: pointer;
    transition: var(--trans);
}
.mob-login .log-theme-toggle:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.mob-login .log-theme-toggle:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* En pantallas medianas la tarjeta se estrecha; el botón se arrima al borde */
@media (max-width: 1023px) {
    .info-side .log-theme-toggle { top: 12px; right: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAS OTRAS TRES PANTALLAS DE ACCESO
   ───────────────────────────────────────────────────────────────────────────
   Recuperar contraseña, restablecerla desde el enlace del correo y cambiar la
   temporal en el primer acceso comparten style.css y la misma tarjeta de dos
   paneles, así que heredan casi todo el tema. Lo que sigue son las piezas que
   esas vistas pintan con colores fijos, pensados para fondo claro.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Aviso de contraseña temporal (change_password · style.css) ──────────────
   Ámbar sobre crema: sobre la tarjeta oscura era un rectángulo luminoso que se
   comía la atención. Pasa a los tonos ámbar oscuros del sistema. */
html.log-dark .pwd-notice {
    background: var(--warn-lt);
    border-color: var(--warn-bdr);
    border-left-color: #f59e0b;
    color: var(--warn-dk);
}
html.log-dark .pwd-notice i,
html.log-dark .pwd-notice strong { color: var(--warn-dk); }

/* ── Botón de envío deshabilitado ────────────────────────────────────────────
   En claro es una pastilla gris (#bfcecc); sobre la tarjeta oscura quedaba como
   un bloque luminoso justo donde está la acción principal. Se apaga contra la
   superficie. Sigue leyéndose, sólo que apagado: es un control inhabilitado, y
   ahí el contraste mínimo no aplica.
   La regla original lleva !important, así que ésta también — y gana por
   especificidad, no por orden. */
html.log-dark .my-form__button:disabled {
    background: var(--surface-2) !important;
    color: var(--text-3) !important;
}
/* El botón de la maqueta móvil ya se apagaba con blancos translúcidos sobre su
   propio fondo oscuro, así que no necesita nada. */

/* ── Medidor de fuerza de la contraseña (reset_password) ─────────────────────
   Los colores de la barra (rojo→verde) son señal semántica y se leen bien
   sobre oscuro: sólo se corrigen el carril y la etiqueta. */
html.log-dark .pwd-strength-bar-wrap { background: var(--surface-2); }
html.log-dark .pwd-strength-label    { color: var(--text-3); }
html.log-dark .str-label-0           { color: var(--text-3); }

/* ── Bloque "por qué no funciona el enlace" (reset_password) ─────────────── */
html.log-dark .reset-reasons {
    background: var(--surface-2);
    border-color: var(--border);
}
html.log-dark .reset-reasons-title,
html.log-dark .reset-reasons li i { color: #6ee7b7; }
html.log-dark .reset-reasons li   { color: var(--text-2); }
html.log-dark .reset-hint         { color: var(--text-3); }

/* ── Aviso informativo azul (forgot_password) ────────────────────────────────
   Esa vista lo declara en un <style> propio con azules claros. Estas reglas
   son más específicas, así que ganan sin necesidad de !important. */
html.log-dark .log-toast--info {
    background: var(--info-lt);
    border-color: var(--info-bdr);
}
html.log-dark .log-toast--info .log-toast-icon {
    background: rgba(147, 197, 253, .14);
    color: var(--info-dk);
}
html.log-dark .log-toast--info .log-toast-title,
html.log-dark .log-toast--info .log-toast-body { color: var(--info-dk); }