/* ============================================================
   QAD Calidad — Tokens de diseño (TEMA BASE: institucional)
   Única fuente de verdad para color, tipografía, radio, borde,
   sombra, layout y z-index. Ningún otro archivo CSS declara un
   valor de color/radio "a mano" si existe un token equivalente
   aquí — si falta un matiz, se añade aquí, no en el componente.

   Este archivo ES el tema base sobreescribible: un tema adicional
   redeclara los tokens que cambia en `themes/<slug>/tokens.css`
   (cargado inmediatamente después de este archivo) y aporta reglas
   decorativas en `themes/<slug>/decor.css` (cargado al final de la
   cascada). Ver `static/css/README.md`.
   Fuente: guía de marca "Sistema de Gestión de Calidad" (QAD
   Consulting) — dirección "Institucional clásico", acento cobre.
   ============================================================ */

:root {
  /* ─── Paleta de marca ────────────────────────────────────── */
  --color-navy: #12233F;         /* dominante: header, textos clave */
  --color-navy-border: #2E5C8A;  /* borde del isotipo, acentos de navegación */
  --color-accent: #2E5C8A;       /* azul acento: íconos, estados activos, foco */
  --color-copper: #A8763C;       /* distintivo: subrayado activo, progreso, acentos */
  --color-copper-soft-bg: #FBF3E8;
  --color-copper-soft-border: #EBD9BC;

  --color-bg: #F4F6F8;           /* fondo neutro de la app */
  --color-surface: #FFFFFF;      /* tarjetas, paneles, inputs */
  --color-surface-alt: #FAFBFC;  /* cabeceras de tarjeta, dropzone */

  /* Texto */
  --color-text: #12233F;         /* texto principal / encabezados */
  --color-text-body: #3A4A5C;    /* cuerpo, etiquetas de campo */
  --color-text-muted: #5C7086;   /* encabezados de tabla, texto secundario */
  --color-text-faint: #9FB3CC;   /* nav inactiva sobre fondo azul marino, subtítulos */
  --color-text-on-dark: #FFFFFF; /* texto sobre fondo oscuro (botones, badges) */
  --color-text-legal: #666666;   /* color secundario para legal/términos */

  /* Bordes */
  --color-border: #DCE3EA;       /* inputs, tarjetas, separadores fuertes */
  --color-border-subtle: #E4E9EE; /* separación de secciones sutil */
  --color-border-row: #EEF1F4;   /* filas de tabla */

  /* Overlays y transparencias */
  --overlay-modal: rgba(18,35,63,0.5);
  --overlay-modal-alt: rgba(18,35,63,0.45);
  --overlay-sidebar-mobile: rgba(18,35,63,0.5);
  --overlay-chat-thinking: rgba(18,35,63,0.35);
  --overlay-evidence-lightbox: rgba(0,0,0,0.88);
  --overlay-map-modal: rgba(18,35,63,0.45);
  --overlay-white-soft: rgba(255,255,255,0.06);
  --overlay-white-medium: rgba(255,255,255,0.18);
  --overlay-white-border: rgba(255,255,255,0.3);
  --overlay-white-strong: rgba(255,255,255,0.35);
  --overlay-process-overlay-bg: rgba(255,255,255,0.18);

  /* Colores específicos de componentes/páginas */
  --color-navy-hover: #0C1B30;   /* hover de botón primario */
  --color-copper-hover: #8F6531; /* hover de botón AI */
  --color-sidebar-dropdown-bg: #1A3155;
  --color-sidebar-divider: rgba(159,179,204,0.18);
  --color-sidebar-border-soft: rgba(159,179,204,0.2);
  --color-process-lane: #C7DCEC;
  --color-process-overlay-bg: rgba(255,255,255,0.18);
  --color-process-overlay-border: rgba(255,255,255,0.35);
  --color-pdf-viewer-bg: #525659;
  --color-pdf-viewer-text: #E2E8F0;
  --color-pdf-viewer-error: #F0B8B8;
  --color-compliance-select-bg: #334155;
  --color-compliance-select-border: #475569;
  --color-compliance-select-text: #F1F5F9;
  --color-stat-purple: #7C3AED;

  /* Riesgo (risk management) */
  --color-risk-high: #C2540A;
  --color-risk-high-bg: #FBE9DD;
  --color-risk-high-text: #8A3B08;

  /* Estados funcionales — SOLO severidad/estado, nunca decorativo */
  --color-danger: #B23A3A;
  --color-danger-bg: #F8E8E8;
  --color-danger-text: #8C2E2E;
  --color-danger-border: #E9C3C3;
  --color-danger-hover: #E8A9A9;
  --color-danger-hover-bg: rgba(178,58,58,0.18);
  --color-warning: #B8860B;
  --color-warning-bg: #FBF1DC;
  --color-warning-text: #8A6508;
  --color-warning-border: #EFD9A0;
  --color-warning-text-alt: #78350F;
  --color-success: #2F7D5B;
  --color-success-bg: #E4F2EA;
  --color-success-text: #1F5A3F;
  --color-success-border: #BEE0CD;
  --color-info-bg: #E9F1F8;
  --color-info-text: #1F4E73;
  --color-info-border: #C7DCEC;
  --color-info-hover-bg: #DCEAF5;

  /* ─── Tipografía ─────────────────────────────────────────── */
  --font-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ─── Radios ─────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 9999px;

  /* ─── Sombra — solo para el contenedor principal y overlays ── */
  --shadow-soft: 0 1px 3px rgba(18,35,63,0.07), 0 1px 2px rgba(18,35,63,0.05);
  --shadow-overlay: 0 10px 15px -3px rgba(18,35,63,0.12), 0 4px 6px -4px rgba(18,35,63,0.08);
  --shadow-overlay-lg: 0 20px 40px rgba(18,35,63,0.18);
  --shadow-focus-input: 0 0 0 3px rgba(46,92,138,0.12);
  --shadow-focus-textarea: 0 0 0 3px rgba(46,92,138,0.15);
  --shadow-focus-topbar: 0 0 0 3px rgba(46,92,138,0.08);
  --shadow-focus-sidebar: 0 0 0 3px rgba(46,92,138,0.15);
  --shadow-focus-chat: 0 0 0 3px rgba(46,92,138,0.15);
  --shadow-focus-compliance: 0 0 0 2px rgba(46,92,138,0.2);
  --shadow-process-card: 0 1px 4px rgba(18,35,63,0.09);
  --shadow-hover-risk-card-total: 0 4px 16px rgba(18,35,63,0.10);
  --shadow-hover-risk-card-critical: 0 4px 16px rgba(178,58,58,0.15);
  --shadow-hover-risk-card-high: 0 4px 16px rgba(194,84,10,0.15);
  --shadow-hover-risk-card-medium: 0 4px 16px rgba(184,134,11,0.15);
  --shadow-hover-risk-card-low: 0 4px 16px rgba(47,125,91,0.15);
  --shadow-copper-glow: 0 2px 12px rgba(168,118,60,0.25);

  /* ─── Layout ─────────────────────────────────────────────── */
  --sidebar-width: 15rem;
  --sidebar-collapsed: 4rem;
  --topbar-height: 3.5rem;

  /* ─── Z-index ────────────────────────────────────────────── */
  --z-sidebar: 20;
  --z-backdrop: 40;
  --z-sidebar-mobile: 41;
  --z-topbar: 10;
  --z-dropdown: 50;
  --z-modal: 100;

  /* ─── Tratamiento visual (tema) ──────────────────────────────
     Tokens que un tema decorativo puede redeclarar. En el tema base
     (institucional) tienen valores neutros: una regla que los consuma
     se ve institucional mientras el tema activo no los sobreescriba. */
  --gradient-brand: none;                    /* fondo de KPI/botón primario; none = plano institucional */
  --surface-glass: var(--color-surface);     /* superficie de tarjeta/modal; opaca institucional */
  --surface-glass-border: var(--color-border);
  --glow-focus: none;                        /* halo de foco; none = sin glow institucional */
  --backdrop-blur: 0;                        /* blur de vidrio; 0 = sin blur institucional */
}