/* ═══════════════════════════════════════════════════════════════════
   PSIORA-THEME-V1 — /lib/psiora-theme.css
   Fuente única de verdad para los tokens de diseño de Psiora.

   CONTRATO DE ESTE ARCHIVO (no romperlo):
   1. SOLO define variables CSS en :root. Cero selectores, cero
      estilos base. Así, enlazarlo en cualquier página tiene impacto
      visual CERO garantizado: los :root locales (valores idénticos)
      simplemente lo re-declaran.
   2. Los valores core son los que TODAS las páginas ya comparten hoy
      (auditado 2026-08-04). No inventan nada nuevo.
   3. Los tokens semánticos son el canon de aquí en adelante: páginas
      nuevas los usan; páginas viejas migran su cola de colores legacy
      a estos tokens de forma oportunista (regla del boy scout).
   4. Cache: vive en /lib/ → regla de 4h de Cloudflare. Purgar tras
      cada cambio.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── Núcleo de marca (idéntico en las 12 páginas) ── */
  --brand:      #3C918F;
  --brand-d:    #2F7573;
  --brand-dark: #2F7573;              /* alias: index.html usa este nombre */
  --brand-bg:   rgba(60,145,143,.08);

  /* ── Superficies y texto (estilo Apple, ya en uso) ── */
  --surface:    #F5F5F7;
  --white:      #FFFFFF;
  --t1:         #1D1D1F;
  --t2:         #6E6E73;
  --t3:         #86868B;
  --border:     #E8E8ED;

  /* ── Semánticos: el canon de estados (destilados del uso real) ──
     Éxito / Alerta / Peligro / Información. Cada uno: color fuerte,
     texto sobre fondo claro, y fondo suave. */
  --ok:         #059669;
  --ok-text:    #065F46;
  --ok-bg:      #D1FAE5;

  --warn:       #F59E0B;
  --warn-text:  #92400E;
  --warn-bg:    #FEF3C7;

  --danger:      #E11D48;
  --danger-text: #B91C1C;
  --danger-bg:   #FFF1F2;
  --danger-border:#FFE4E6;

  --info:       #1D4ED8;
  --info-bg:    #DBEAFE;

  /* ── Forma ── */
  --r-card: 16px;      /* tarjetas y modales */
  --r-ctl:  11px;      /* inputs, selects, botones */
  --r-chip: 999px;     /* píldoras y chips */

  /* ── Elevación (valores ya usados en las páginas nuevas) ── */
  --sh-sm: 0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --sh-md: 0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);

  /* ── Interacción ── */
  --focus-ring: 0 0 0 3px rgba(60,145,143,.10);
  --tr-fast: .12s;
  --tr-med:  .3s cubic-bezier(.4,0,.2,1);
}

/* ── Mapa de extinción (referencia para la Fase 1, no es código) ──
   Colores legacy → token que los sustituye al tocar cada página:
     #E2E8F0, #CBD5E1              → var(--border)
     #1E293B                      → var(--t1)
     #64748B, #94A3B8             → var(--t2) / var(--t3)
     #F1F5F9, #F8FAFC             → var(--surface)
     #EF4444, #FF3B30, #DC2626    → var(--danger)
     #FECACA, #FEE2E2             → var(--danger-bg) / var(--danger-border)
     #F59E0B, #FDE68A, #FEF3C7    → var(--warn) / var(--warn-bg)
     #34C759, #00897B, #D1FAE5    → var(--ok) / var(--ok-bg)
     #0066CC, #4784C5, #1E40AF    → var(--info)
     #DBEAFE                      → var(--info-bg)
   ─────────────────────────────────────────────────────────────── */

/* ── MODO OSCURO — PSIORA-DARK-V1 (Fase 1: activo por página dark-ready) ──
   Selector html[data-theme="dark"] (0,1,1) para GANARLE a los :root locales
   (0,1,0) que cada página aún declara después de este archivo. El atributo
   lo pone psiora-shell.js solo en páginas de la lista DARK_READY. */
html[data-theme="dark"]{
  color-scheme: dark;                     /* inputs/date/select nativos oscuros */
  --surface: #0F0F10;                     /* fondo de la app */
  --white:   #1C1C1E;                     /* tarjetas y paneles */
  --t1:      #F5F5F7;
  --t2:      #A6A6AB;
  --t3:      #7C7C80;
  --border:  #2C2C2E;
  --brand-bg: rgba(60,145,143,.20);
  --sh-sm: 0 1px 4px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 4px 16px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.4);
  /* semánticos sobre fondo oscuro */
  --ok-bg: rgba(52,199,89,.16);   --ok-text: #7CE0A3;
  --warn-bg: rgba(245,158,11,.16); --warn-text: #F5C26B;
  --danger-bg: rgba(225,29,72,.15); --danger-border: rgba(225,29,72,.32); --danger-text: #F08A9B;
  --info-bg: rgba(29,78,216,.20);
}