/* ============================================================
   El Vigía — tokens institucionales
   ------------------------------------------------------------
   Copia fiel de la identidad del tema `vigia-pro`
   (themes/vigia-pro/assets/css/tokens.css): un solo acento rojo
   de prensa sobre una escala de grises fríos, tipografía del
   sistema para la interfaz y Georgia para la lectura, esquinas
   casi rectas (máx. 8px).

   Dos capas:
     1) --np-* / --f-* / --t-* / --sp-* / --r-*  → los tokens
        institucionales, idénticos a los del sitio del diario.
     2) --bg, --surface, --ink, --accent, ...    → los nombres
        semánticos que ya usaban las vistas de este panel,
        remapeados sobre la capa 1. Así ninguna vista existente
        tuvo que reescribirse.

   Los alias de la capa 2 se resuelven en el momento de uso, así
   que basta redefinir los --np-* para que todo el panel cambie
   de modo.
   ============================================================ */

:root {
    color-scheme: light;

    /* ── Acento institucional ───────────────────────────────── */
    --np-accent:        #c8102e;
    --np-accent-dk:     #9c0c23;
    --np-accent-lt:     #fdeef0;

    /* ── Superficies ────────────────────────────────────────── */
    --np-bg:            #ffffff;
    --np-surface:       #ffffff;
    --np-surface-alt:   #f5f6f7;
    --np-surface-dim:   #eceef0;
    --np-border:        #e3e6ea;
    --np-border-str:    #c6cbd2;

    /* ── Texto ──────────────────────────────────────────────── */
    --np-text:          #16181c;
    --np-text-sec:      #4a4f57;
    --np-text-muted:    #878e98;
    --np-text-inv:      #ffffff;

    /* ── Cabecera y pie ─────────────────────────────────────── */
    --np-hdr-bg:        #ffffff;
    --np-hdr-text:      #16181c;
    --np-hdr-border:    #e3e6ea;
    --np-footer-bg:     #16181c;
    --np-footer-border: #2b2f36;

    /* ── Tipografías ────────────────────────────────────────── */
    --f-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --f-serif: Georgia, 'Times New Roman', serif;
    --f-mono:  ui-monospace, 'SFMono-Regular', Menlo, 'Courier New', monospace;

    /* ── Escala tipográfica ─────────────────────────────────── */
    --t-xs: 11px;   --t-sm: 13px;   --t-base: 15px; --t-md: 17px;
    --t-lg: 20px;   --t-xl: 25px;   --t-2xl: 32px;  --t-3xl: 42px;  --t-4xl: 56px;
    --t-read: 18px; --lh-read: 1.8;

    /* ── Espaciado (base 4) ─────────────────────────────────── */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

    /* ── Esquinas: nada de cápsulas, el gesto es el del papel ── */
    --r-sm: 2px; --r-md: 4px; --r-lg: 8px;

    /* ── Sombras ────────────────────────────────────────────── */
    --sh-sm: 0 1px 2px rgba(16, 18, 22, .06);
    --sh-md: 0 4px 14px rgba(16, 18, 22, .08);
    --sh-lg: 0 8px 28px rgba(16, 18, 22, .12);
    --sh-xl: 0 16px 48px rgba(16, 18, 22, .16);

    /* ── Medidas de página ──────────────────────────────────── */
    --site-max:    1300px;
    --content-max: 700px;

    /* ════════════════════════════════════════════════════════
       Capa semántica del panel (modo claro)
       ════════════════════════════════════════════════════════ */

    /* Superficies. En claro el fondo de página es el gris alt y
       las tarjetas van en blanco: con --np-bg y --np-surface
       ambos en #ffffff las tarjetas desaparecerían. */
    --bg:            var(--np-surface-alt);
    --surface:       var(--np-surface);
    --surface-2:     var(--np-surface-dim);
    --border:        var(--np-border);
    --border-strong: var(--np-border-str);
    --nav-bg:        var(--np-hdr-bg);
    --row-hover:     #eef0f2;
    --overlay:       rgba(22, 24, 28, .5);

    /* Texto */
    --ink:       var(--np-text);
    --ink-soft:  var(--np-text-sec);
    --ink-faint: var(--np-text-muted);
    --ink-inv:   var(--np-text-inv);

    /* Acento */
    --accent:     var(--np-accent);
    --accent-dk:  var(--np-accent-dk);
    --accent-ink: var(--np-accent);
    --accent-bg:  var(--np-accent-lt);

    /* Estados. El sistema institucional sólo fija el rojo, pero
       un panel de altas/bajas necesita distinguir "activo" de
       "vencido" de un vistazo, así que se añaden tres matices
       apagados que conviven con la escala fría sin competir con
       el acento. */
    --ok:        #0f7a3d;
    --ok-bg:     #e8f4ec;
    --warn:      #8a5b00;
    --warn-bg:   #fbf1dc;
    --info:      #1d5fa8;
    --info-bg:   #e8f1fb;
    --danger:    #b3261e;
    --danger-bg: #fdecea;

    /* Compatibilidad con las vistas ya escritas */
    --radius:    var(--r-md);
    --radius-lg: var(--r-lg);
    --sidebar-w: 220px;
}

/* ── Modo oscuro por preferencia del sistema ─────────────────
   El :not() deja que una elección explícita de modo claro gane
   sobre la preferencia del sistema, sin recurrir a !important. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --np-accent:      #f0324f;
        --np-accent-dk:   #c8102e;
        --np-accent-lt:   rgba(240, 50, 79, .14);

        --np-bg:          #121417;
        --np-surface:     #191c20;
        --np-surface-alt: #1f2327;
        --np-surface-dim: #262b31;
        --np-border:      #2b2f36;
        --np-border-str:  #3d434c;

        --np-text:        #eceef0;
        --np-text-sec:    #aab0b9;
        --np-text-muted:  #6d747e;

        --np-hdr-bg:      #16181c;
        --np-hdr-text:    #f0f1f3;
        --np-hdr-border:  #2b2f36;

        --bg:        var(--np-bg);
        --surface-2: var(--np-surface-alt);
        --row-hover: rgba(255, 255, 255, .035);
        --overlay:   rgba(0, 0, 0, .6);

        --ok:        #4cc47f;
        --ok-bg:     rgba(76, 196, 127, .14);
        --warn:      #e0b064;
        --warn-bg:   rgba(224, 176, 100, .14);
        --info:      #8fb4d9;
        --info-bg:   rgba(143, 180, 217, .14);
        --danger:    #f08a80;
        --danger-bg: rgba(240, 138, 128, .14);
    }
}

/* ── Modo oscuro elegido a mano ──────────────────────────────
   Mismo bloque que el de arriba; duplicado a propósito, porque
   una media query no puede compartir cuerpo con un selector. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --np-accent:      #f0324f;
    --np-accent-dk:   #c8102e;
    --np-accent-lt:   rgba(240, 50, 79, .14);

    --np-bg:          #121417;
    --np-surface:     #191c20;
    --np-surface-alt: #1f2327;
    --np-surface-dim: #262b31;
    --np-border:      #2b2f36;
    --np-border-str:  #3d434c;

    --np-text:        #eceef0;
    --np-text-sec:    #aab0b9;
    --np-text-muted:  #6d747e;

    --np-hdr-bg:      #16181c;
    --np-hdr-text:    #f0f1f3;
    --np-hdr-border:  #2b2f36;

    --bg:        var(--np-bg);
    --surface-2: var(--np-surface-alt);
    --row-hover: rgba(255, 255, 255, .035);
    --overlay:   rgba(0, 0, 0, .6);

    --ok:        #4cc47f;
    --ok-bg:     rgba(76, 196, 127, .14);
    --warn:      #e0b064;
    --warn-bg:   rgba(224, 176, 100, .14);
    --info:      #8fb4d9;
    --info-bg:   rgba(143, 180, 217, .14);
    --danger:    #f08a80;
    --danger-bg: rgba(240, 138, 128, .14);
}

/* ── Modo claro elegido a mano ───────────────────────────────
   Los valores del :root ya son los claros; sólo hace falta
   reponer color-scheme por si el sistema pide oscuro. */
:root[data-theme="light"] {
    color-scheme: light;
}

/* ============================================================
   Base compartida por los dos layouts
   ============================================================ */

* { box-sizing: border-box; }

body {
    font-family: var(--f-sans);
    font-size: var(--t-base);
    background: var(--bg);
    color: var(--ink);
    margin: 0;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* El logotipo del diario está dibujado en plata sobre fondo
   oscuro; invertirlo lo vuelve tinta oscura para el modo claro
   sin necesidad de un segundo archivo. */
.brand-logo, .brand img { filter: invert(1); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand-logo,
    :root:not([data-theme="light"]) .brand img { filter: none; }
}
:root[data-theme="dark"] .brand-logo,
:root[data-theme="dark"] .brand img { filter: none; }

/* ── Conmutador de modo ──────────────────────────────────────
   Cicla Automático → Claro → Oscuro. El estado vive en
   localStorage y lo aplica un script en el <head> antes del
   primer pintado. */
.theme-toggle {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    background: none; border: 1px solid var(--border); border-radius: var(--r-md);
    color: var(--ink-soft); font: inherit; font-size: var(--t-sm);
    padding: 6px 10px; cursor: pointer; width: 100%;
    transition: border-color 120ms ease, color 120ms ease;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { width: 15px; height: 15px; flex-shrink: 0; }
.theme-toggle .theme-toggle__icon { display: none; }
:root[data-theme-mode="auto"]  .theme-toggle__icon--auto,
:root[data-theme-mode="light"] .theme-toggle__icon--light,
:root[data-theme-mode="dark"]  .theme-toggle__icon--dark { display: block; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}