/* =================================================================================================
   TisTime · Modo oscuro de las páginas de cuenta (login, recuperar/restablecer contraseña, bloqueo,
   confirmaciones). Estas páginas son Razor server-side del Host, cada una con su <style> inline y el
   MISMO "chrome" duplicado. En vez de tocar los 7 bloques de estilo (alto riesgo de regresión en claro
   y de choque con otra sesión), esta hoja COMPARTIDA añade encima la capa de tema:

     1) Define tokens NUEVOS con sus valores de tema CLARO idénticos a los actuales (cero regresión).
     2) Mapea esos tokens (y algunos ya existentes) sobre los selectores del chrome, SIN condición de
        tema: en claro toman el valor claro (que ya sobreescriben por orden de carga, al ir el <link>
        DESPUÉS del <style> inline); en oscuro toman el del bloque (3).
     3) Redefine los tokens en OSCURO por preferencia del sistema y por conmutador manual.
     4) Estiliza el conmutador sol/luna que inyecta account-theme.js.

   Los tokens que YA existen en el <style> de cada página (--ink, --muted, --line, --field, --green-d)
   solo se redefinen aquí en oscuro; su valor claro sigue viniendo del inline.
   ================================================================================================= */

/* 1) TOKENS NUEVOS — valores de tema CLARO (coinciden EXACTAMENTE con los colores actuales). */
:root {
    --card-bg: #fff;
    --card-shadow: 0 30px 70px -24px rgba(5, 20, 40, .6), 0 4px 14px -6px rgba(5, 20, 40, .3);
    --pop-bg: #fff;
    --pop-shadow: 0 16px 38px -10px rgba(5, 20, 40, .45);
    --label: #3a4550;
    --placeholder: #a9b3ad;
    --icon: #9aa6a0;
    --focus-bg: #fff;
    --err-bg: #fdecec;
    --err-border: #f5c2c2;
    --err-text: #9b1c1c;
    --ok-bg: #eafaf0;
    --ok-border: #b7e6c6;
    --ok-text: #1b6b3a;
    --link: #16539e;
    --warn-fg: #c2410c;
}

/* 2) MAPEO tokens → componentes del chrome. Reglas sin condición de tema (el token decide el color).
      Al cargarse esta hoja DESPUÉS del <style> inline, estas reglas ganan por orden de fuente y en claro
      reproducen el aspecto actual (mismos valores). */
.card { background: var(--card-bg); box-shadow: var(--card-shadow); }
.lang-menu { background: var(--pop-bg); box-shadow: var(--pop-shadow); }
label, .check { color: var(--label); }
.inp input::placeholder { color: var(--placeholder); }
.inp svg.lead, .toggle svg { stroke: var(--icon); }
.inp input:focus { background: var(--focus-bg); }
.alert-err { background: var(--err-bg); border-color: var(--err-border); color: var(--err-text); }
.alert-ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); }
.ready { color: var(--ok-text); }
.link { color: var(--link); }
.lock-ic { color: var(--warn-fg); }
.lock-ic svg { stroke: var(--warn-fg); }

/* 3) TOKENS OSCUROS.
      (a) Por preferencia del SISTEMA, salvo que el usuario haya forzado claro con el conmutador.
      (b) Forzado MANUAL a oscuro (gana aunque el sistema esté en claro).
      IMPORTANTE: ambos bloques deben mantener los MISMOS valores. */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --ink: #e7ecf2;
        --muted: #98a3b1;
        --line: #2c3745;
        --field: #0f1826;
        --green-d: #8ed165;
        --card-bg: #16202e;
        --card-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 26px 60px -24px rgba(0, 0, 0, .7);
        --pop-bg: #1b2634;
        --pop-shadow: 0 16px 38px -10px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
        --label: #c2ccd7;
        --placeholder: #7c8794;
        --icon: #7f8b98;
        --focus-bg: #131d2b;
        --err-bg: #3a1e20;
        --err-border: #5c2e31;
        --err-text: #f2b8b8;
        --ok-bg: #16301f;
        --ok-border: #2f5e3f;
        --ok-text: #93ddab;
        --link: #6fa8f0;
        --warn-fg: #f0a878;
    }
}

html[data-theme="dark"] {
    --ink: #e7ecf2;
    --muted: #98a3b1;
    --line: #2c3745;
    --field: #0f1826;
    --green-d: #8ed165;
    --card-bg: #16202e;
    --card-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 26px 60px -24px rgba(0, 0, 0, .7);
    --pop-bg: #1b2634;
    --pop-shadow: 0 16px 38px -10px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
    --label: #c2ccd7;
    --placeholder: #7c8794;
    --icon: #7f8b98;
    --focus-bg: #131d2b;
    --err-bg: #3a1e20;
    --err-border: #5c2e31;
    --err-text: #f2b8b8;
    --ok-bg: #16301f;
    --ok-border: #2f5e3f;
    --ok-text: #93ddab;
    --link: #6fa8f0;
    --warn-fg: #f0a878;
}

/* Logo TisTime de la tarjeta: en oscuro se cambia a la variante de wordmark BLANCO
   (TisTime_dark.png) — el de texto negro desaparece sobre la tarjeta oscura. Mismo doble
   selector que los tokens (sistema + manual), a mantener en sincronía como los bloques de arriba. */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .brand-logo { content: url("/login-assets/TisTime_dark.png"); }
}
html[data-theme="dark"] .brand-logo { content: url("/login-assets/TisTime_dark.png"); }
html[data-theme="light"] .brand-logo { content: url("/login-assets/TisTime_light.png"); }

/* 4) CONMUTADOR sol/luna. account-theme.js lo inyecta dentro de la cabecera .top (junto al selector de
      idioma) o, si no hubiera cabecera, fijo arriba a la derecha del viewport. Vive sobre el fondo OSCURO
      del body (igual en ambos temas), así que su estilo es constante: solo cambia el icono visible. */
.top-actions { display: flex; align-items: center; gap: 12px; }

.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; border-radius: 999px; cursor: pointer;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    transition: background .15s, transform .15s;
}
.theme-toggle:hover { background: rgba(255, 255, 255, .2); }
.theme-toggle:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .ic-sun, .theme-toggle .ic-moon { display: inline-flex; }
.theme-toggle.fixed { position: fixed; top: 20px; right: 20px; z-index: 30; }

/* Icono según el tema EFECTIVO: en claro se ofrece pasar a oscuro (luna); en oscuro, pasar a claro (sol). */
.theme-toggle .ic-sun { display: none; }
html[data-theme="dark"] .theme-toggle .ic-sun { display: inline-flex; }
html[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .theme-toggle .ic-sun { display: inline-flex; }
    html:not([data-theme="light"]) .theme-toggle .ic-moon { display: none; }
}