/* ── Sistema de diseño Gobierno Central — TOKENS ─────────────────────
   Variables CSS canónicas que TODA pantalla nueva debe usar. La
   referencia visual es /inicio (estilo Notion: fondo blanco, texto
   oscuro, badges discretos, espaciado generoso, sin gradientes ni
   sombras pesadas, iconos monocromáticos).

   Carga ANTES de cualquier otro CSS para que los overrides de
   `--bs-*` apliquen — Bootstrap 5.3+ lee `var(--bs-primary)` en
   tiempo de cómputo. Ver `app/templates/base.html`.

   No modificar tokens sin revisar `DESIGN_SYSTEM.md` en la raíz.
   No agregar colores fuera de esta paleta — extiende, no reemplaza.
*/

:root {
    /* ─────────────────────── COLORES NEUTROS ─────────────────────── */
    /* Fondo de la app y de las cards. */
    --color-bg:           #ffffff;       /* fondo principal */
    --color-bg-subtle:    #fafafa;       /* fondos secundarios (header de card, alt rows) */
    --color-bg-soft:      #f7f6f3;       /* hover de cards (matiz Notion) */

    /* Bordes — sutiles, jamás coloreados de marca. */
    --color-border:       #e5e7eb;       /* borde estándar de cards/inputs */
    --color-border-strong:#cbd5e1;       /* divisores fuertes / bordes 2px */

    /* Texto — escalera de jerarquía. */
    --color-text:         #37352f;       /* el "negro Notion", body principal */
    --color-text-strong:  #111827;       /* títulos, números KPI */
    --color-text-muted:   #6b7280;       /* meta, fechas, descripciones cortas */
    --color-text-faint:   #9ca3af;       /* placeholders, iconos monocromáticos */

    /* ─────────────────────── COLOR DE MARCA ──────────────────────── */
    /* Acento azul — solo se usa en una acción primaria por sección
       lógica. Nunca como decoración masiva. */
    --color-primary:      #2383e2;       /* Notion blue */
    --color-primary-hover:#1a6ec0;
    --color-primary-soft: #eff6ff;       /* fondos sutiles relacionados */
    --color-primary-text: #1e40af;       /* texto sobre fondos suaves */

    /* ─────────────────────── ESTADOS SEMÁNTICOS ──────────────────── */
    /* Cada estado tiene 4 valores: solid (fondo lleno), text (texto solo),
       soft (fondo desaturado para badges) y border (borde discreto). */
    --color-success:       #16a34a;
    --color-success-text:  #065f46;
    --color-success-soft:  #ecfdf5;
    --color-success-border:#d1fae5;

    --color-warning:       #d97706;
    --color-warning-text:  #92400e;
    --color-warning-soft:  #fffbeb;
    --color-warning-border:#fde68a;

    --color-danger:        #dc2626;
    --color-danger-text:   #991b1b;
    --color-danger-soft:   #fee2e2;
    --color-danger-border: #fecaca;

    --color-info:          #0284c7;      /* celeste oscuro de la paleta calendario */
    --color-info-text:     #0c4a6e;
    --color-info-soft:     #e0f2fe;
    --color-info-border:   #bae6fd;

    /* ─────────────────────── CATEGORÍAS DE ACTIVIDAD ─────────────── */
    /* Sincronizadas con `EQUIPOS` en app/services/actividades_service.py.
       Solo se usan como acentos semánticos (chips de área, dots de
       calendario), NUNCA como fondo masivo. */
    --color-cat-produccion:    #1f6feb;
    --color-cat-calidad:       #0284c7;  /* sky-600, no #38bdf8 que daba mal contraste */
    --color-cat-microbiologia: #9333ea;
    --color-cat-logistica:     #166534;
    --color-cat-abastecimiento:#ca8a04;
    --color-cat-bioproduccion: #ea580c;
    --color-cat-desarrollo:    #7c3aed;
    --color-cat-comercial:     #0ea5e9;
    --color-cat-finanzas:      #16a34a;
    --color-cat-rrhh:          #db2777;
    --color-cat-mantencion:    #7c2d12;

    /* ─────────────────────── TIPOGRAFÍA ──────────────────────────── */
    --font-family: -apple-system, BlinkMacSystemFont, 'Inter',
                   'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', Menlo, Consolas, monospace;

    /* Escalera de tamaños — sigue el clásico modular minor-third */
    --text-xs:    0.72rem;     /* labels, meta, dates */
    --text-sm:    0.82rem;     /* body secundario, badges, botones sm */
    --text-base:  0.92rem;     /* body principal */
    --text-md:    1.00rem;     /* títulos de sección, h3 */
    --text-lg:    1.20rem;     /* h2 */
    --text-xl:    1.50rem;     /* page-title, h1 */
    --text-2xl:   1.80rem;     /* KPI value */
    --text-3xl:   2.20rem;     /* KPI principal */
    --text-4xl:   2.80rem;     /* hero (uso muy restringido) */

    /* Pesos — solo 4 niveles. */
    --font-regular:  400;
    --font-medium:   500;
    --font-semibold: 600;
    --font-bold:     700;

    /* Line-height para body. Títulos heredan 1.2 implícito. */
    --leading: 1.5;

    /* ─────────────────────── ESPACIADO (sistema 4pt) ─────────────── */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ─────────────────────── RADIO DE BORDE ──────────────────────── */
    --radius-sm:  4px;       /* dots, badges chicos */
    --radius:     6px;       /* inputs, badges, list items */
    --radius-md:  8px;       /* botones, cards pequeñas */
    --radius-lg: 12px;       /* cards principales */
    --radius-xl: 16px;       /* heros, contenedores grandes */
    --radius-full: 999px;    /* pills, avatares */

    /* ─────────────────────── SOMBRAS (uso restringido) ───────────── */
    /* Sombra "card en reposo" — apenas perceptible. */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.04);
    /* Card en hover. */
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
    /* Modales / dropdowns que flotan sobre el contenido. */
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
    /* Sombra de botón primario coloreada (sutil). */
    --shadow-primary: 0 2px 6px rgba(35, 131, 226, 0.30);

    /* ─────────────────────── TRANSICIONES ────────────────────────── */
    --transition-fast: 0.12s ease;
    --transition: 0.18s ease;

    /* ─────────────────────── OVERRIDES BOOTSTRAP ─────────────────── */
    /* Bootstrap 5.3 lee estas variables — al sobreescribirlas acá,
       sus utility classes (.text-primary, .border-primary, etc.)
       toman nuestra paleta automáticamente. */
    --bs-primary:           var(--color-primary);
    --bs-primary-rgb:       35, 131, 226;
    --bs-success:           var(--color-success);
    --bs-success-rgb:       22, 163, 74;
    --bs-danger:            var(--color-danger);
    --bs-danger-rgb:        220, 38, 38;
    --bs-warning:           var(--color-warning);
    --bs-warning-rgb:       217, 119, 6;
    --bs-info:              var(--color-info);
    --bs-info-rgb:          2, 132, 199;
    --bs-body-color:        var(--color-text);
    --bs-body-bg:           var(--color-bg);
    --bs-border-color:      var(--color-border);
    --bs-border-radius:     var(--radius-md);
    --bs-border-radius-sm:  var(--radius);
    --bs-border-radius-lg:  var(--radius-lg);
    --bs-link-color:        var(--color-primary);
    --bs-link-hover-color:  var(--color-primary-hover);
    --bs-secondary-bg:      var(--color-bg-subtle);
    --bs-tertiary-bg:       var(--color-bg-soft);
}