/* Modo Dark */
[data-mode="dark"] {
    --color-bg: #0f1419;
    --color-surface: #1a1f26;
    --color-surface-2: #232a33;
    --color-surface-elevated: #2a3340;
    /* RAISED: ver la nota de light.css. En oscuro «despegarse» es ACLARAR: un
       escalon arriba de --color-surface-2 (el hover de la tabla) y uno abajo de
       --color-surface-elevated, para que la fila propia se note sobre la
       tarjeta y el hover siga viendose. */
    --color-surface-raised: #252d38;
    --color-border: #2d3742;
    --color-border-strong: #404a57;

    --color-fg: #e5e7eb;
    --color-fg-muted: #9ca3af;
    --color-fg-subtle: #6b7280;
    --color-fg-inverse: #0f1419;

    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-strong);

    /* Ver la nota de light.css: --color-<x> es el RELLENO y --color-<x>-fg el
       TEXTO sobre --color-<x>-bg. En oscuro tres de los cuatro ya pasaban AA
       (success 8,40 · warning 8,45 · info 5,61), asi que su -fg es el mismo
       color y no cambia nada. El unico que no llegaba era danger: #ef4444 sobre
       su propio fondo translucido daba 3,92. Se le sube un escalon de la misma
       rampa roja (#f87171) SOLO para el texto -> 5,34. El relleno #ef4444 no se
       toca, asi que el boton de peligro y el globito rojo de la campanita
       quedan exactamente igual. */
    --color-success: #22c55e;
    --color-success-fg: #22c55e;
    --color-success-bg: rgba(34, 197, 94, 0.12);
    --color-success-subtle: rgba(34, 197, 94, 0.08);
    --color-success-muted: rgba(34, 197, 94, 0.14);
    --color-warning: #f59e0b;
    --color-warning-fg: #f59e0b;
    --color-warning-bg: rgba(245, 158, 11, 0.12);
    --color-warning-subtle: rgba(245, 158, 11, 0.08);
    --color-warning-muted: rgba(245, 158, 11, 0.14);
    --color-danger: #ef4444;
    --color-danger-fg: #f87171;
    --color-danger-bg: rgba(239, 68, 68, 0.12);
    --color-danger-subtle: rgba(239, 68, 68, 0.10);
    --color-danger-muted: rgba(239, 68, 68, 0.16);
    --color-info: #06b6d4;
    --color-info-fg: #06b6d4;
    --color-info-bg: rgba(6, 182, 212, 0.12);
    --color-info-subtle: rgba(6, 182, 212, 0.08);
    --color-info-muted: rgba(6, 182, 212, 0.14);

    /* Alias */
    --color-surface-alt: var(--color-surface-2);
    --color-text: var(--color-fg);
    --color-text-muted: var(--color-fg-muted);
    --color-text-subtle: var(--color-fg-subtle);
    --color-fg-on-danger: var(--color-danger-fg);
    --color-fg-on-success: var(--color-success-fg);
    --color-fg-on-warning: var(--color-warning-fg);

    --color-sidebar-bg: #0a0e13;
    --color-sidebar-fg: #9ca3af;
    --color-sidebar-fg-active: #ffffff;
    --color-sidebar-bg-active: rgba(255, 255, 255, 0.06);

    --color-topbar-bg: #1a1f26;
    --color-topbar-fg: #e5e7eb;
    --color-topbar-border: #2d3742;

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   MODO AUTO — sigue al sistema operativo o al navegador.

   El bloque de abajo NO va dentro de una media query a propósito: es el
   respaldo. Si la preferencia no se puede determinar (navegador viejo, un
   visor que no la expone), el sistema queda OSCURO, que es lo que pidió el
   dueño. La media query de `light` lo pisa solo cuando el sistema dice claro.

   Antes esto vivía en dos bloques a mano que eran SUBCONJUNTOS de los temas
   reales: le faltaban 27 y 35 variables. El efecto era que, hasta que corría
   el JavaScript que reescribe `data-mode`, los chips de estado quedaban con
   fondo transparente sobre texto gris — un parpadeo, y algo peor si el JS
   tardaba o fallaba. `apps/core/test_temas.py` falla si vuelven a divergir.
   --------------------------------------------------------------------------- */
[data-mode="auto"] {
    --color-bg: #0f1419;
    --color-surface: #1a1f26;
    --color-surface-2: #232a33;
    --color-surface-elevated: #2a3340;
    /* RAISED: ver la nota de light.css. En oscuro «despegarse» es ACLARAR: un
       escalon arriba de --color-surface-2 (el hover de la tabla) y uno abajo de
       --color-surface-elevated, para que la fila propia se note sobre la
       tarjeta y el hover siga viendose. */
    --color-surface-raised: #252d38;
    --color-border: #2d3742;
    --color-border-strong: #404a57;

    --color-fg: #e5e7eb;
    --color-fg-muted: #9ca3af;
    --color-fg-subtle: #6b7280;
    --color-fg-inverse: #0f1419;

    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-strong);

    /* Ver la nota de light.css: --color-<x> es el RELLENO y --color-<x>-fg el
    TEXTO sobre --color-<x>-bg. En oscuro tres de los cuatro ya pasaban AA
    (success 8,40 · warning 8,45 · info 5,61), asi que su -fg es el mismo
    color y no cambia nada. El unico que no llegaba era danger: #ef4444 sobre
    su propio fondo translucido daba 3,92. Se le sube un escalon de la misma
    rampa roja (#f87171) SOLO para el texto -> 5,34. El relleno #ef4444 no se
    toca, asi que el boton de peligro y el globito rojo de la campanita
    quedan exactamente igual. */
    --color-success: #22c55e;
    --color-success-fg: #22c55e;
    --color-success-bg: rgba(34, 197, 94, 0.12);
    --color-success-subtle: rgba(34, 197, 94, 0.08);
    --color-success-muted: rgba(34, 197, 94, 0.14);
    --color-warning: #f59e0b;
    --color-warning-fg: #f59e0b;
    --color-warning-bg: rgba(245, 158, 11, 0.12);
    --color-warning-subtle: rgba(245, 158, 11, 0.08);
    --color-warning-muted: rgba(245, 158, 11, 0.14);
    --color-danger: #ef4444;
    --color-danger-fg: #f87171;
    --color-danger-bg: rgba(239, 68, 68, 0.12);
    --color-danger-subtle: rgba(239, 68, 68, 0.10);
    --color-danger-muted: rgba(239, 68, 68, 0.16);
    --color-info: #06b6d4;
    --color-info-fg: #06b6d4;
    --color-info-bg: rgba(6, 182, 212, 0.12);
    --color-info-subtle: rgba(6, 182, 212, 0.08);
    --color-info-muted: rgba(6, 182, 212, 0.14);

    /* Alias */
    --color-surface-alt: var(--color-surface-2);
    --color-text: var(--color-fg);
    --color-text-muted: var(--color-fg-muted);
    --color-text-subtle: var(--color-fg-subtle);
    --color-fg-on-danger: var(--color-danger-fg);
    --color-fg-on-success: var(--color-success-fg);
    --color-fg-on-warning: var(--color-warning-fg);

    --color-sidebar-bg: #0a0e13;
    --color-sidebar-fg: #9ca3af;
    --color-sidebar-fg-active: #ffffff;
    --color-sidebar-bg-active: rgba(255, 255, 255, 0.06);

    --color-topbar-bg: #1a1f26;
    --color-topbar-fg: #e5e7eb;
    --color-topbar-border: #2d3742;

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
}

@media (prefers-color-scheme: light) {
    [data-mode="auto"] {
        --color-bg: #f5f6f8;
        --color-surface: #ffffff;
        --color-surface-2: #f9fafb;
        --color-surface-elevated: #ffffff;
        /* RAISED: ver la nota de light.css (este bloque es el tema claro de «auto»). */
        --color-surface-raised: #f1f3f5;
        --color-border: #e5e7eb;
        --color-border-strong: #d1d5db;

        --color-fg: #1f2937;
        --color-fg-muted: #6b7280;
        --color-fg-subtle: #9ca3af;
        --color-fg-inverse: #ffffff;

        --color-link: var(--color-primary);
        --color-link-hover: var(--color-primary-strong);

        /* SEMANTICOS. Dos tokens por color, a proposito:
        --color-<x>      el RELLENO (fondo de .btn--<x>, bordes, iconos). NO se
        toca: es la identidad visual elegida.
        --color-<x>-fg   el TEXTO cuando va encima de --color-<x>-bg (el fondo
        palido de .badge--<x> y .alert--<x>).
        Por que existe el segundo. Medido en el recorrido visual: con el mismo
        token para las dos cosas, los badges claros quedaban por DEBAJO de AA
        (4,5:1) — warning 2,86 · success 3,00 · info 3,29 · danger 3,95. Un chip
        de estado es texto chico y en un taller a la intemperie eso no se lee.
        El -fg es el MISMO color, misma tonalidad y misma saturacion, con la
        luminosidad HSL bajada lo justo para llegar a 4,5 (se busco el minimo, no
        un color nuevo):
        success #16a34a -> #11813a   3,00 -> 4,53
        warning #d97706 -> #a75c05   2,86 -> 4,52
        danger  #dc2626 -> #cc2121   3,95 -> 4,52
        info    #0891b2 -> #077894   3,29 -> 4,55
        Como el relleno queda intacto, ningun boton, borde ni icono cambia de
        color: cambia SOLO el texto que no se leia. */
        --color-success: #16a34a;
        --color-success-fg: #11813a;
        --color-success-bg: #dcfce7;
        --color-success-subtle: #f0fdf4;
        --color-success-muted: #dcfce7;
        --color-warning: #d97706;
        --color-warning-fg: #a75c05;
        --color-warning-bg: #fef3c7;
        --color-warning-subtle: #fffbeb;
        --color-warning-muted: #fef3c7;
        --color-danger: #dc2626;
        --color-danger-fg: #cc2121;
        --color-danger-bg: #fee2e2;
        --color-danger-subtle: #fef2f2;
        --color-danger-muted: #fee2e2;
        --color-info: #0891b2;
        --color-info-fg: #077894;
        --color-info-bg: #cffafe;
        --color-info-subtle: #ecfeff;
        --color-info-muted: #cffafe;

        /* Alias para nomenclaturas alternativas usadas en templates */
        --color-surface-alt: var(--color-surface-2);
        --color-text: var(--color-fg);
        --color-text-muted: var(--color-fg-muted);
        --color-text-subtle: var(--color-fg-subtle);
        /* Alias historicos (hoy sin uso en el repo): apuntan al token de TEXTO, que
        es lo que su nombre dice — "fg on danger" = el color de la letra encima
        de un fondo de peligro. */
        --color-fg-on-danger: var(--color-danger-fg);
        --color-fg-on-success: var(--color-success-fg);
        --color-fg-on-warning: var(--color-warning-fg);
        --radius: var(--radius-md);

        --color-sidebar-bg: #ffffff;
        --color-sidebar-fg: #374151;
        --color-sidebar-fg-active: #111827;
        --color-sidebar-bg-active: rgba(0, 0, 0, 0.06);

        --color-topbar-bg: #ffffff;
        --color-topbar-fg: #1f2937;
        --color-topbar-border: #e5e7eb;

        --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
}