/**
 * P-00 · Tokens — biblioteca visual SCM / ÉXODO
 * Versión visual 1.0 aprobada en docs/ui/COMPONENTS.md.
 *
 * Regla del patrón: solo declaraciones de variables. Cero selectores de
 * componente. Portados sobre .scm-ui, nunca sobre :root — el scope no debe
 * filtrar valores al tema de WordPress ni al resto de la página.
 *
 * Los valores de este archivo no se modifican sin aprobación explícita y una
 * actualización versionada de COMPONENTS.md.
 */

.scm-ui {
  /* ── Rampa de marca ─────────────────────────────────────────────── */
  --scm-ui-blue-300: #4DA6FF;
  --scm-ui-blue-400: #2A90FF;
  --scm-ui-blue-500: #007BEE;
  --scm-ui-blue-600: #0065C9;
  --scm-ui-blue-700: #0052A6;
  --scm-ui-blue-100: #CFE4FC;
  --scm-ui-blue-50:  #E9F3FE;

  /* ── Neutros ────────────────────────────────────────────────────── */
  --scm-ui-page:        #EFF1F5;
  --scm-ui-surface:     #FFFFFF;
  --scm-ui-surface-2:   #F8FAFC;
  --scm-ui-line:        #E3E8F0;
  --scm-ui-line-2:      #EEF2F7;
  --scm-ui-line-strong: #C6D0DE;
  --scm-ui-text:        #0A1A2E;
  --scm-ui-text-2:      #5A6C84;
  --scm-ui-text-3:      #94A3B5;

  /* ── Semánticos ─────────────────────────────────────────────────── */
  --scm-ui-ok-bg:        #E6F6EF;
  --scm-ui-ok-fg:        #078055;
  --scm-ui-ok-line:      #C7EBDB;
  --scm-ui-warn-bg:      #FDF4E3;
  --scm-ui-warn-fg:      #B4750A;
  --scm-ui-warn-line:    #F7E3BE;
  --scm-ui-danger-bg:    #FDEFF2;
  --scm-ui-danger-fg:    #C81E3A;
  --scm-ui-danger-line:  #F7D3DB;
  --scm-ui-info-bg:      var(--scm-ui-blue-50);
  --scm-ui-info-fg:      var(--scm-ui-blue-600);
  --scm-ui-info-line:    var(--scm-ui-blue-100);
  --scm-ui-neutral-bg:   #F0F3F7;
  --scm-ui-neutral-fg:   #94A3B5;
  --scm-ui-neutral-line: var(--scm-ui-line);

  /* ── Degradados ─────────────────────────────────────────────────────
     180° en piezas anchas y bajas (botones, barras).
     145° en piezas cuadradas (avatares, chips de función).            */
  --scm-ui-grad-control:        linear-gradient(180deg, #2A90FF 0%, #0065C9 100%);
  --scm-ui-grad-control-hover:  linear-gradient(180deg, #4DA6FF 0%, #007BEE 100%);
  --scm-ui-grad-control-active: linear-gradient(180deg, #0065C9 0%, #0052A6 100%);
  --scm-ui-grad-danger:         linear-gradient(180deg, #F2596E 0%, #C81E3A 100%);
  --scm-ui-grad-success:        linear-gradient(180deg, #23BE86 0%, #078055 100%);
  --scm-ui-grad-disabled:       linear-gradient(180deg, #BACEE3 0%, #A2B9D1 100%);

  /* ── Deshabilitado ──────────────────────────────────────────────────
     El degradado de arriba está pensado sobre página clara. El resto del
     estado (texto y chip) vivía como literal dentro de p05-buttons.css, así
     que no podía cambiar con el tema: en oscuro el botón deshabilitado
     acababa más claro que el habilitado y se leía como la acción principal.
     Al pasar a token, el bloque oscuro puede reasignarlo sin que ningún
     archivo de componente mencione el tema.                             */
  --scm-ui-disabled-fg:         #FFFFFF;
  --scm-ui-disabled-chip-bg:    rgba(255,255,255,.20);
  --scm-ui-disabled-chip-line:  rgba(255,255,255,.26);

  /* ── Radios — tres, y ninguno más ───────────────────────────────── */
  --scm-ui-r-sm: 8px;
  --scm-ui-r-md: 12px;
  --scm-ui-r-lg: 16px;

  /* ── Espaciado — base 4 ─────────────────────────────────────────── */
  --scm-ui-sp-1:  4px;
  --scm-ui-sp-2:  8px;
  --scm-ui-sp-3:  12px;
  --scm-ui-sp-4:  16px;
  --scm-ui-sp-5:  20px;
  --scm-ui-sp-6:  24px;
  --scm-ui-sp-8:  32px;
  --scm-ui-sp-10: 40px;
  --scm-ui-sp-12: 48px;

  /* ── Alturas de control ─────────────────────────────────────────── */
  --scm-ui-h-control:    40px;
  --scm-ui-h-control-sm: 32px;
  --scm-ui-h-control-lg: 48px;

  /* ── Sombras ────────────────────────────────────────────────────── */
  --scm-ui-sh-card: 0 1px 2px rgba(10,26,46,.04), 0 4px 16px rgba(10,26,46,.05);
  --scm-ui-sh-lift: 0 1px 0 rgba(255,255,255,.22) inset, 0 1px 2px rgba(10,26,46,.10), 0 3px 10px -2px rgba(0,101,201,.34);
  --scm-ui-sh-lift-hover: 0 1px 0 rgba(255,255,255,.28) inset, 0 2px 4px rgba(10,26,46,.10), 0 8px 18px -4px rgba(0,101,201,.42);
  --scm-ui-sh-focus: 0 0 0 3px rgba(0,123,238,.10);

  /* ── Tipografía ─────────────────────────────────────────────────────
     Familia única: Plus Jakarta Sans. Pesos 500, 600, 700, 800.
     Se retiran del sistema Sora, DM Sans, Manrope e Inter.            */
  --scm-ui-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --scm-ui-fs-title:   24px;  /* Título de página   · 800 · -0.03em  */
  --scm-ui-fs-section: 16px;  /* Título de sección  · 700 · -0.02em  */
  --scm-ui-fs-row:     15px;  /* Nombre de fila     · 700 · -0.015em */
  --scm-ui-fs-body:    14px;  /* Cuerpo, botones, pestañas · 600-700 */
  --scm-ui-fs-meta:    13.5px;/* Texto secundario   · 500            */
  --scm-ui-fs-badge:   12px;  /* Badge · mínimo del sistema          */

  --scm-ui-lsp-title:   -0.03em;
  --scm-ui-lsp-section: -0.02em;
  --scm-ui-lsp-row:     -0.015em;
  --scm-ui-lh-name:     1.25;   /* Interlineado del rol Nombre de persona */
  --scm-ui-lsp-body:    -0.008em;

  --scm-ui-fw-title:  800;
  --scm-ui-fw-strong: 700;
  --scm-ui-fw-med:    600;
  --scm-ui-fw-soft:   500;
  /* Peso propio del rol "Nombre de persona". No reutiliza --scm-ui-fw-strong
     porque ese lo consumen otras diez reglas —títulos, badges, cabecera de
     tabla, avatar, pestañas— y bajarlo a 600 las arrastraría a todas. */
  --scm-ui-fw-person-name: 600;

  /* Separación entre ícono y texto (G-07) */
  --scm-ui-icon-gap: 8px;

  /* Superficies de componente que no salen de la rampa neutra */
  --scm-ui-chip-ghost:   #EDF1F6;  /* chip del botón --ghost (P-05)      */
  --scm-ui-row-inactive: #FCFDFE;  /* fila inactiva (P-09)               */
  --scm-ui-toggle-off:   #D3DBE5;  /* carril apagado del interruptor (P-10) */

  /* ══ Acción compacta con ícono (P-02) ══════════════════════════════
     Valores literales aprobados en docs/ui/ICONS 1.1. Viven aquí y no
     dentro del patrón porque el §7.4 exige que las equivalencias oscuras
     sean tokens globales del componente: "Ningún módulo puede inventar sus
     propias equivalencias". El bloque oscuro de más abajo los reasigna, y
     así el archivo del patrón no menciona el tema (G-17).             */

  /* Tratamiento neutro — el predeterminado (§7.1). La caja es blanca, el
     borde gris suave y la etiqueta gris oscura SIEMPRE; el color de acento
     solo llega al glifo.                                              */
  --scm-ui-act-bg:           #FFFFFF;
  --scm-ui-act-line:         rgba(24,61,101,.18);
  --scm-ui-act-fg:           #4D5A6D;
  --scm-ui-act-bg-hover:     #F7FAFF;
  --scm-ui-act-line-hover:   rgba(37,99,235,.46);
  --scm-ui-act-scroll-thumb: rgba(24,61,101,.24);

  /* Acentos del glifo dentro de un botón neutro (§7.1). Pintan el ícono y
     nada más: ni fondo, ni borde, ni etiqueta.                        */
  --scm-ui-act-accent-gray:   #4D5A6D;
  --scm-ui-act-accent-blue:   #2563EB;
  --scm-ui-act-accent-green:  #0F9D6E;
  --scm-ui-act-accent-red:    #DC3545;
  --scm-ui-act-accent-orange: #F5A623;
  --scm-ui-act-accent-violet: #6B5DD3;

  /* Variante semántica pintada (§7.2). Fondo tenue, nunca sólido. Solo se
     usa cuando la acción o el estado comunica un significado —confirmado,
     ubicado, rechazado, advertencia, error— y está indicada expresamente.
     Que un ícono tenga color no activa esto.                          */
  --scm-ui-act-blue-bg:       rgba(37,99,235,.10);
  --scm-ui-act-blue-border:   rgba(37,99,235,.38);
  --scm-ui-act-blue-icon:     #2563EB;
  --scm-ui-act-blue-label:    #1D4FD8;
  --scm-ui-act-green-bg:      rgba(15,157,110,.10);
  --scm-ui-act-green-border:  rgba(15,157,110,.40);
  --scm-ui-act-green-icon:    #0F9D6E;
  --scm-ui-act-green-label:   #0F7D58;
  --scm-ui-act-red-bg:        rgba(220,53,69,.09);
  --scm-ui-act-red-border:    rgba(220,53,69,.38);
  --scm-ui-act-red-icon:      #DC3545;
  --scm-ui-act-red-label:     #B0263C;
  --scm-ui-act-orange-bg:     rgba(245,166,35,.11);
  --scm-ui-act-orange-border: rgba(245,166,35,.42);
  --scm-ui-act-orange-icon:   #F5A623;
  --scm-ui-act-orange-label:  #9A6200;
  --scm-ui-act-violet-bg:     rgba(107,93,211,.10);
  --scm-ui-act-violet-border: rgba(107,93,211,.38);
  --scm-ui-act-violet-icon:   #6B5DD3;
  --scm-ui-act-violet-label:  #5748B5;

  /* ══ Paginación (P-13) ═════════════════════════════════════════════
     Valores tomados tal cual del pager del Panel de Control, que es la
     referencia aprobada: fondo --pc-card, borde --pc-border-2, número
     --pc-text-2, indicador --pc-text-3 y relleno activo --blue. No se
     reasignan a los neutros del sistema —que son parecidos pero no
     iguales— para no cambiar de color un componente que se pidió
     reutilizar, no rediseñar.                                        */
  --scm-ui-pager-bg:       #FFFFFF;
  --scm-ui-pager-line:     rgba(24,61,101,.16);
  --scm-ui-pager-fg:       #5E6B7D;
  --scm-ui-pager-info:     #8B97A7;
  --scm-ui-pager-cur-bg:   #2563EB;
  --scm-ui-pager-cur-fg:   #FFFFFF;
  --scm-ui-pager-cur-line: #2563EB;

  /* ── Anchos ─────────────────────────────────────────────────────── */
  --scm-ui-w-max:     1240px;
  --scm-ui-sidebar-w: 248px;
}

/* Breakpoints como literales: @media no puede leer custom properties (R-09).
   Los cinco estándar del sistema son 480 · 640 · 768 · 769 · 1024.        */
@media (max-width: 768px) {
  .scm-ui {
    --scm-ui-h-control:    44px;
    --scm-ui-h-control-sm: 34px;
    --scm-ui-h-control-lg: 48px;
    --scm-ui-fs-title:     22px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   MODO OSCURO — contrato único del sistema (G-17)
   Paleta aprobada en julio 2026. Sustituye a los cinco bloques de variables
   que vivían en scm-layout.css, scm-panel-control.css, scm-kids.css,
   scm-person-row.css y scm-call-guide.css.

   No cambia ni la lógica ni el comportamiento de .scm-dark: el JavaScript
   sigue poniendo y quitando esa clase en .scm-layout-wrap exactamente igual.
   Aquí solo viven los valores.

   Estructura, y por qué es así:
   · Los valores crudos se declaran UNA vez sobre .scm-dark. Los consumen
     tanto los tokens del sistema como el puente hacia los nombres legacy.
   · Los tokens --scm-ui-* se reescriben sobre `.scm-dark .scm-ui` y no sobre
     `.scm-dark` a secas: el bloque claro los declara sobre el propio .scm-ui,
     y un valor puesto en el elemento gana siempre al heredado del ancestro.
   · Los tres bloques con selector de módulo (panel de control, kids, guía de
     llamada) conservan su selector porque sus variables también se declaran
     sobre el elemento del módulo. Es el precio de que el oscuro se resuelva
     en un solo archivo; ningún archivo de componente vuelve a mencionarlo.
   ══════════════════════════════════════════════════════════════════════ */

.scm-dark {
  /* ── Paleta aprobada — valores crudos, una sola vez ─────────────── */
  --scm-ui-dark-page:        #0F172A;
  --scm-ui-dark-surface:     #16233A;
  --scm-ui-dark-surface-2:   #1C2C47;
  --scm-ui-dark-line:        #2A3B57;
  --scm-ui-dark-line-2:      #22314B;
  --scm-ui-dark-line-strong: #3A4E6E;
  --scm-ui-dark-text:        #EAF0F7;
  --scm-ui-dark-text-2:      #A9B8CC;
  --scm-ui-dark-text-3:      #7C8CA3;

  /* Semánticos: fondo translúcido del tono + texto claro del mismo tono.
     Los tonos salen de los degradados ya aprobados en P-00. */
  --scm-ui-dark-ok-bg:        rgba(35,190,134,.16);
  --scm-ui-dark-ok-fg:        #4FD9A6;
  --scm-ui-dark-ok-line:      rgba(35,190,134,.32);
  --scm-ui-dark-warn-bg:      rgba(245,182,72,.16);
  --scm-ui-dark-warn-fg:      #F5C168;
  --scm-ui-dark-warn-line:    rgba(245,182,72,.32);
  --scm-ui-dark-danger-bg:    rgba(242,89,110,.16);
  --scm-ui-dark-danger-fg:    #FF8E9E;
  --scm-ui-dark-danger-line:  rgba(242,89,110,.32);
  --scm-ui-dark-info-bg:      rgba(42,144,255,.16);
  --scm-ui-dark-info-fg:      #7CBBFF;
  --scm-ui-dark-info-line:    rgba(42,144,255,.32);
  --scm-ui-dark-neutral-bg:   rgba(169,184,204,.12);
  --scm-ui-dark-neutral-fg:   #A9B8CC;
  --scm-ui-dark-neutral-line: rgba(169,184,204,.22);

  /* ── Puente legacy: shell (--scm-*) ──────────────────────────────
     Lo leen todos los módulos que aún no consumen la biblioteca.     */
  --scm-bg:             var(--scm-ui-dark-page);
  --scm-surface:        var(--scm-ui-dark-surface);
  --scm-border:         var(--scm-ui-dark-line);
  --scm-text-primary:   var(--scm-ui-dark-text);
  --scm-text-secondary: var(--scm-ui-dark-text-2);
  --scm-text-muted:     var(--scm-ui-dark-text-3);
  --scm-accent:         #2A90FF;
  --scm-accent-light:   var(--scm-ui-dark-info-bg);
  --scm-green:          var(--scm-ui-dark-ok-fg);
  --scm-green-light:    var(--scm-ui-dark-ok-bg);
  --scm-red:            var(--scm-ui-dark-danger-fg);
  --scm-red-light:      var(--scm-ui-dark-danger-bg);
  --scm-amber:          var(--scm-ui-dark-warn-fg);
  --scm-amber-light:    var(--scm-ui-dark-warn-bg);
  --scm-cyan:           #22D3EE;
  --scm-cyan-light:     #083344;
  --scm-purple:         #A78BFA;
  --scm-purple-light:   #2E1065;
  --scm-shadow-sm:      0 1px 3px rgba(0,0,0,.3);
  --scm-shadow-md:      0 4px 16px rgba(0,0,0,.4);
  --scm-shadow-lg:      0 10px 40px rgba(0,0,0,.5);
  --scm-sidebar-hover:  var(--scm-ui-dark-surface-2);
  --scm-sidebar-active: var(--scm-ui-dark-info-bg);

  /* ── Puente legacy: fila de persona (--scm-pa-*) ─────────────────
     En claro se declaran en :root, así que basta con ganarles aquí.  */
  --scm-pa-txt:       var(--scm-ui-dark-text);
  --scm-pa-txt-2:     var(--scm-ui-dark-text-2);
  --scm-pa-bd:        rgba(255,255,255,.16);
  --scm-pa-bd-hover:  rgba(255,255,255,.30);
  --scm-pa-hover:     rgba(255,255,255,.06);
  --scm-pa-surface:   var(--scm-ui-dark-surface);
  --scm-pa-blue:      #2A90FF;
  --scm-pa-blue-sf:   var(--scm-ui-dark-info-bg);
  --scm-pa-blue-bd:   rgba(42,144,255,.46);
  --scm-pa-blue-tx:   var(--scm-ui-dark-info-fg);
  --scm-pa-green:     #23BE86;
  --scm-pa-green-sf:  var(--scm-ui-dark-ok-bg);
  --scm-pa-green-bd:  rgba(35,190,134,.48);
  --scm-pa-green-tx:  var(--scm-ui-dark-ok-fg);
  --scm-pa-red:       #F2596E;
  --scm-pa-red-sf:    var(--scm-ui-dark-danger-bg);
  --scm-pa-red-bd:    rgba(242,89,110,.48);
  --scm-pa-red-tx:    var(--scm-ui-dark-danger-fg);
  --scm-pa-amber:     #F5B648;
  --scm-pa-amber-sf:  var(--scm-ui-dark-warn-bg);
  --scm-pa-amber-bd:  rgba(245,182,72,.46);
  --scm-pa-amber-tx:  var(--scm-ui-dark-warn-fg);
  --scm-pa-purple:    #8B7CE8;
  --scm-pa-purple-sf: rgba(139,124,232,.16);
  --scm-pa-purple-bd: rgba(139,124,232,.46);
  --scm-pa-gray-sf:   var(--scm-ui-dark-neutral-bg);
  --scm-pa-gray-tx:   var(--scm-ui-dark-neutral-fg);
  --scm-pa-cyan-sf:   rgba(63,207,227,.16);
  --scm-pa-cyan-bd:   rgba(63,207,227,.46);
  --scm-pa-scrollbar: rgba(255,255,255,.26);
}

/* ── Tokens del sistema ────────────────────────────────────────────── */
.scm-dark .scm-ui,
.scm-ui.scm-dark {
  --scm-ui-page:        var(--scm-ui-dark-page);
  --scm-ui-surface:     var(--scm-ui-dark-surface);
  --scm-ui-surface-2:   var(--scm-ui-dark-surface-2);
  --scm-ui-line:        var(--scm-ui-dark-line);
  --scm-ui-line-2:      var(--scm-ui-dark-line-2);
  --scm-ui-line-strong: var(--scm-ui-dark-line-strong);
  --scm-ui-text:        var(--scm-ui-dark-text);
  --scm-ui-text-2:      var(--scm-ui-dark-text-2);
  --scm-ui-text-3:      var(--scm-ui-dark-text-3);

  --scm-ui-ok-bg:        var(--scm-ui-dark-ok-bg);
  --scm-ui-ok-fg:        var(--scm-ui-dark-ok-fg);
  --scm-ui-ok-line:      var(--scm-ui-dark-ok-line);
  --scm-ui-warn-bg:      var(--scm-ui-dark-warn-bg);
  --scm-ui-warn-fg:      var(--scm-ui-dark-warn-fg);
  --scm-ui-warn-line:    var(--scm-ui-dark-warn-line);
  --scm-ui-danger-bg:    var(--scm-ui-dark-danger-bg);
  --scm-ui-danger-fg:    var(--scm-ui-dark-danger-fg);
  --scm-ui-danger-line:  var(--scm-ui-dark-danger-line);
  --scm-ui-neutral-bg:   var(--scm-ui-dark-neutral-bg);
  --scm-ui-neutral-fg:   var(--scm-ui-dark-neutral-fg);
  --scm-ui-neutral-line: var(--scm-ui-dark-neutral-line);

  /* La marca y los degradados de botón no cambian: ya funcionan sobre
     fondo oscuro. Sí cambian los dos azules que se usan como superficie
     suave (chip del botón secundario, pestaña activa, chip del estado
     vacío) y el azul que hace de texto sobre ellos. */
  --scm-ui-blue-50:  var(--scm-ui-dark-info-bg);
  --scm-ui-blue-100: var(--scm-ui-dark-info-line);
  --scm-ui-blue-600: var(--scm-ui-dark-info-fg);

  --scm-ui-chip-ghost:   rgba(255,255,255,.08);
  --scm-ui-row-inactive: #131F34;
  --scm-ui-toggle-off:   var(--scm-ui-dark-line-strong);

  /* Deshabilitado. El degradado claro (#BACEE3 → #A2B9D1) está calculado
     sobre página blanca; sobre un panel oscuro quedaba más claro que el
     botón habilitado y se leía como la acción principal, justo al revés de
     lo que debe comunicar. Se resuelve con dos tonos de la propia paleta
     oscura, no con colores nuevos, y el texto baja al gris de meta. */
  --scm-ui-grad-disabled: linear-gradient(180deg, var(--scm-ui-dark-line-strong) 0%, var(--scm-ui-dark-line) 100%);
  --scm-ui-disabled-fg:         var(--scm-ui-dark-text-3);
  --scm-ui-disabled-chip-bg:    rgba(255,255,255,.06);
  --scm-ui-disabled-chip-line:  rgba(255,255,255,.10);

  /* ══ Acción compacta con ícono — equivalencias oscuras ═════════════
     Las cuatro del tratamiento neutro son literales de docs/ui/ICONS §7.4
     y coinciden con la paleta oscura del sistema: #16233A = dark-surface,
     #3A4E6E = dark-line-strong, #A9B8CC = dark-text-2. Se escriben con el
     token para que sigan a la paleta si esta se ajusta.               */
  --scm-ui-act-bg:           var(--scm-ui-dark-surface);
  --scm-ui-act-line:         var(--scm-ui-dark-line-strong);
  --scm-ui-act-fg:           var(--scm-ui-dark-text-2);
  /* El §7.4 no especifica hover oscuro: se mantiene el mapeo del sistema
     —superficie 2 y el azul de info al mismo 46% de alpha del claro—. */
  --scm-ui-act-bg-hover:     var(--scm-ui-dark-surface-2);
  --scm-ui-act-line-hover:   rgba(124,187,255,.46);
  --scm-ui-act-scroll-thumb: rgba(255,255,255,.24);

  /* Acentos del glifo. Los cinco de color son los mismos tonos que el §7.4
     aprueba para "Ícono y etiqueta" de la variante pintada oscura: un mismo
     acento no puede tener dos versiones oscuras distintas. */
  --scm-ui-act-accent-gray:   var(--scm-ui-dark-text-2);
  --scm-ui-act-accent-blue:   #7DB1FF;
  --scm-ui-act-accent-green:  #55D6AA;
  --scm-ui-act-accent-red:    #FF8391;
  --scm-ui-act-accent-orange: #FFD078;
  --scm-ui-act-accent-violet: #B6AAF5;

  /* Variante pintada. En oscuro el §7.4 da un solo tono para ícono y
     etiqueta, así que los dos tokens reciben el mismo valor. */
  --scm-ui-act-blue-bg:       rgba(125,177,255,.14);
  --scm-ui-act-blue-border:   rgba(125,177,255,.44);
  --scm-ui-act-blue-icon:     #7DB1FF;
  --scm-ui-act-blue-label:    #7DB1FF;
  --scm-ui-act-green-bg:      rgba(85,214,170,.14);
  --scm-ui-act-green-border:  rgba(85,214,170,.44);
  --scm-ui-act-green-icon:    #55D6AA;
  --scm-ui-act-green-label:   #55D6AA;
  --scm-ui-act-red-bg:        rgba(255,131,145,.14);
  --scm-ui-act-red-border:    rgba(255,131,145,.44);
  --scm-ui-act-red-icon:      #FF8391;
  --scm-ui-act-red-label:     #FF8391;
  --scm-ui-act-orange-bg:     rgba(255,208,120,.14);
  --scm-ui-act-orange-border: rgba(255,208,120,.44);
  --scm-ui-act-orange-icon:   #FFD078;
  --scm-ui-act-orange-label:  #FFD078;
  --scm-ui-act-violet-bg:     rgba(182,170,245,.14);
  --scm-ui-act-violet-border: rgba(182,170,245,.44);
  --scm-ui-act-violet-icon:   #B6AAF5;
  --scm-ui-act-violet-label:  #B6AAF5;

  /* ══ Paginación ════════════════════════════════════════════════════
     La referencia del Panel de Control no tiene versión oscura; la caja
     y el texto se mapean a la paleta oscura del sistema. El relleno azul
     de la página activa NO cambia: es la misma decisión que ya está
     tomada más arriba para la marca —"la marca y los degradados de botón
     no cambian: ya funcionan sobre fondo oscuro"— y además el blanco
     sobre #2563EB conserva más contraste que sobre el azul claro.    */
  --scm-ui-pager-bg:   var(--scm-ui-dark-surface);
  --scm-ui-pager-line: var(--scm-ui-dark-line-strong);
  --scm-ui-pager-fg:   var(--scm-ui-dark-text-2);
  --scm-ui-pager-info: var(--scm-ui-dark-text-3);
}

/* ── Puente legacy: Panel de Control (--pc-*) ─────────────────────── */
.scm-dark .scm-wrap.scm-pc-wrap {
  --pc-bg:       var(--scm-ui-dark-page);
  --pc-card:     var(--scm-ui-dark-surface);
  --pc-text:     var(--scm-ui-dark-text);
  --pc-text-2:   var(--scm-ui-dark-text-2);
  --pc-text-3:   var(--scm-ui-dark-text-3);
  --pc-border:   var(--scm-ui-dark-line);
  --pc-border-2: var(--scm-ui-dark-line-strong);
  --pc-thead:    var(--scm-ui-dark-surface-2);
  --blue-50:     var(--scm-ui-dark-info-bg);
  --green-soft:  var(--scm-ui-dark-ok-bg);
  --amber-soft:  var(--scm-ui-dark-warn-bg);
  --amber-ink:   var(--scm-ui-dark-warn-fg);
  --red-soft:    var(--scm-ui-dark-danger-bg);
  --purple-soft: rgba(107,93,211,.16);
  --pink-soft:   rgba(224,82,138,.14);
  --teal-soft:   rgba(13,148,136,.16);
}

/* ── Puente legacy: Calendario de Servicios (--cal-*) ─────────────────
   Las vistas Lista y Mes del calendario escribían sus colores a mano, así
   que nunca reaccionaron al tema: sobre página oscura la rejilla, las
   celdas y las tarjetas seguían siendo blancas y el título del mes —color
   #0f172a— quedaba invisible. Los valores claros se declaran en
   `scm-srv.css` con los literales que ya tenían; aquí solo viven los
   oscuros, que es el contrato del sistema.

   No se reasignan: el gradiente del encabezado, los cuatro colores de
   turno de chips y puntos, ni el badge "es mío". Son gradiente de marca y
   rellenos sólidos de categoría, y P-00 ya declara que esos no cambian con
   el tema porque funcionan sobre fondo oscuro.                          */
.scm-dark .scm-srv-wrap {
  --cal-surface:      var(--scm-ui-dark-surface);
  --cal-surface-2:    var(--scm-ui-dark-surface-2);
  --cal-line:         var(--scm-ui-dark-line);
  --cal-text:         var(--scm-ui-dark-text);
  --cal-text-2:       var(--scm-ui-dark-text-2);
  --cal-text-3:       var(--scm-ui-dark-text-3);
  --cal-text-4:       var(--scm-ui-dark-text-3);
  /* La rejilla del mes es el plano de fondo sobre el que flotan las
     celdas: en claro es más oscura que ellas, así que en oscuro tiene que
     ser más oscura también. De ahí page y no surface. */
  --cal-grid-bg:      var(--scm-ui-dark-page);
  --cal-tabs-bg:      var(--scm-ui-dark-surface-2);
  /* El azul de acción sube al de la paleta oscura: #2563EB como borde o
     como texto sobre un panel #16233A se pierde. */
  --cal-accent:       #2A90FF;
  --cal-accent-fg:    var(--scm-ui-dark-info-fg);
  --cal-accent-soft:  var(--scm-ui-dark-info-bg);
  --cal-accent-line:  var(--scm-ui-dark-info-line);
  --cal-self-bg:      var(--scm-ui-dark-info-bg);
  --cal-obs-bg:       var(--scm-ui-dark-warn-bg);
  --cal-obs-fg:       var(--scm-ui-dark-warn-fg);
  --cal-obs-ic:       var(--scm-ui-dark-warn-fg);
  --cal-shadow-sm:    rgba(0,0,0,.35);
  --cal-shadow-xs:    rgba(0,0,0,.30);

  /* Bloque de tareas. Mismo caso que el calendario: escribía sus nueve
     colores a mano y por eso nunca reaccionó al tema — sobre página oscura
     era una losa blanca dentro de la tarjeta. Los valores claros están en
     `scm-srv.css` con los literales que ya tenían.

     La superficie sube a `surface` y el hover a `surface-2`: en claro el
     hover es más oscuro que el bloque, así que en oscuro tiene que ser más
     claro. El verde sí se reasigna, al contrario que los cuatro tonos de
     turno: aquí no es una categoría sino el estado "hecho", y el #16a34a
     claro sobre un carril oscuro no se distingue del fondo. */
  --tar-surface:   var(--scm-ui-dark-surface);
  --tar-surface-2: var(--scm-ui-dark-surface-2);
  --tar-line:      var(--scm-ui-dark-line);
  --tar-line-2:    var(--scm-ui-dark-line-2);
  --tar-text:      var(--scm-ui-dark-text);
  --tar-text-2:    var(--scm-ui-dark-text-2);
  --tar-text-3:    var(--scm-ui-dark-text-3);
  --tar-done-bg:   var(--scm-ui-dark-ok-bg);
  --tar-green:     var(--scm-ui-dark-ok-fg);
}

/* ── Puente legacy: Calendario de Eventos Iglesia (--cal-*) ───────────
   El calendario de Eventos es el mismo componente que el de Servicios y
   consume la misma familia de variables, declarada con los mismos valores
   claros sobre `.scm-evt-wrap` (scm-eventos.css). Se le da su propio
   bloque y no se añade su selector al de arriba porque esta vista no usa
   ni el bloque de tareas ni los tres tonos que solo existen allí
   —observación, "es mío"—, y sí tiene uno que allí no existe: el chip de
   la hora.                                                            */
.scm-dark .scm-evt-wrap {
  --cal-surface:      var(--scm-ui-dark-surface);
  --cal-surface-2:    var(--scm-ui-dark-surface-2);
  --cal-line:         var(--scm-ui-dark-line);
  --cal-text:         var(--scm-ui-dark-text);
  --cal-text-2:       var(--scm-ui-dark-text-2);
  --cal-text-3:       var(--scm-ui-dark-text-3);
  --cal-text-4:       var(--scm-ui-dark-text-3);
  /* La rejilla del mes es el plano de fondo sobre el que flotan las
     celdas: en claro es más oscura que ellas, así que en oscuro tiene que
     ser más oscura también. De ahí page y no surface. */
  --cal-grid-bg:      var(--scm-ui-dark-page);
  --cal-tabs-bg:      var(--scm-ui-dark-surface-2);
  --cal-accent:       #2A90FF;
  --cal-accent-fg:    var(--scm-ui-dark-info-fg);
  --cal-accent-soft:  var(--scm-ui-dark-info-bg);
  --cal-accent-line:  var(--scm-ui-dark-info-line);
  --cal-shadow-sm:    rgba(0,0,0,.35);
  --cal-shadow-xs:    rgba(0,0,0,.30);

  /* Ya no hay `--cal-feat-*` ni `--cal-fav-*` que reasignar: el evento
     destacado dejó de tener color propio y toma el automático de su mes,
     que llega en el `style` de cada tarjeta y se resuelve en
     scm-eventos.css —una variable inline no la alcanza un puente que
     reasigna sobre el contenedor—.

     El chip de la hora sí se reasigna: es una superficie, y una
     superficie clara sobre una tarjeta oscura es una losa blanca. */
  --cal-chip-bg:      var(--scm-ui-dark-surface-2);
  --cal-chip-fg:      var(--scm-ui-dark-text-2);
  --cal-chip-line:    var(--scm-ui-dark-line);
}

/* ── Puente legacy: Kids ──────────────────────────────────────────────
   Los tonos propios de la marca de Kids (azul, morado, rosa) se conservan
   tal cual: la paleta aprobada define neutros y semánticos, no marcas de
   módulo.                                                              */
.scm-dark .scm-kids {
  --bg:          var(--scm-ui-dark-page);
  --card:        var(--scm-ui-dark-surface);
  --text:        var(--scm-ui-dark-text);
  --text-2:      var(--scm-ui-dark-text-2);
  --text-3:      var(--scm-ui-dark-text-3);
  --border:      var(--scm-ui-dark-line);
  --border-2:    var(--scm-ui-dark-line-strong);
  --green:       var(--scm-ui-dark-ok-fg);
  --green-soft:  var(--scm-ui-dark-ok-bg);
  --red:         var(--scm-ui-dark-danger-fg);
  --red-soft:    var(--scm-ui-dark-danger-bg);
  --amber:       var(--scm-ui-dark-warn-fg);
  --amber-soft:  var(--scm-ui-dark-warn-bg);
  --blue:        #3a9bff;
  --blue-dark:   #9cc6f2;
  --blue-50:     rgba(58,155,255,.14);
  --blue-100:    rgba(58,155,255,.22);
  --purple:      #9b8dff;
  --purple-soft: rgba(107,93,211,.18);
  --pink:        #ff7faa;
  --pink-soft:   rgba(232,90,138,.16);
  --shadow:      0 8px 30px rgba(0,0,0,.45);
}

/* ── Puente legacy: guía de llamada (--g-*) ───────────────────────────
   Su modal vive fuera de .scm-layout-wrap y recibe .scm-dark en sí mismo. */
.scm-guide-modal.scm-dark .scm-guide-modal-content {
  --g-bg:          var(--scm-ui-dark-page);
  --g-card:        var(--scm-ui-dark-surface);
  --g-text:        var(--scm-ui-dark-text);
  --g-text-2:      var(--scm-ui-dark-text-2);
  --g-text-3:      var(--scm-ui-dark-text-3);
  --g-border:      var(--scm-ui-dark-line);
  --g-blue:        #2A90FF;
  --g-blue-50:     var(--scm-ui-dark-info-bg);
  --g-green:       #23BE86;
  --g-green-soft:  var(--scm-ui-dark-ok-bg);
  --g-red-soft:    var(--scm-ui-dark-danger-bg);
  --g-red-text:    var(--scm-ui-dark-danger-fg);
  --g-amber-soft:  var(--scm-ui-dark-warn-bg);
  --g-amber-text:  var(--scm-ui-dark-warn-fg);
  --g-purple-soft: rgba(139,124,232,.16);
  --g-purple-text: #C0B5F5;
  --g-pink-soft:   rgba(232,90,138,.16);
  --g-pink-text:   #F5A0C4;
}