/* =============================================================================
   design-system.css — FUENTE ÚNICA DE LA VERDAD (tokens del rediseño 2026).
   -----------------------------------------------------------------------------
   Estos tokens se derivan del patrón canónico que ya existía en
   ui-consistency.css (slate/blue + IBM Plex). NINGÚN otro archivo debe
   hardcodear color/tamaño/espaciado: todo consume estas custom properties.
   Contrato documentado en DESIGN_SYSTEM.md.

   Orden de carga (links.ejs): se carga ANTES de ui-consistency.css para que la
   capa de componentes consuma estos tokens.

   Modo oscuro: la estructura está lista (ver bloque comentado al final) pero NO
   se activa hasta terminar de migrar el CSS de página a tokens (Fase 3), para no
   romper estilos que aún hardcodean colores claros.
   ============================================================================= */

:root {
  /* ---------- Color: roles semánticos ---------- */
  --color-bg: #f5f7fb;              /* fondo de página */
  --color-surface: #ffffff;        /* cards, modales, inputs */
  --color-surface-2: #fafbfd;      /* panel-head / footer / zebra */
  --color-surface-3: #eef2f8;      /* superficie elevada / hover de fila / head de drawer */

  --color-text: #0f172a;           /* texto principal / headings */
  --color-text-body: #334155;      /* cuerpo */
  --color-text-muted: #64748b;     /* secundario */
  --color-text-dim: #94a3b8;       /* terciario / placeholder */
  --color-text-on-primary: #ffffff;

  --color-border: rgba(15, 23, 42, 0.06);        /* divisores / hairlines */
  --color-border-strong: rgba(15, 23, 42, 0.10); /* bordes de input */

  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-strong: #0f2748; /* navy institucional (headings de marca; reemplaza el legacy #172b4c) */
  --color-primary-soft: rgba(37, 99, 235, 0.10); /* tint de fondo (pill/hover) */

  --color-success: #16a34a;   --color-success-hover: #15803d;
  --color-warning: #d97706;   --color-warning-hover: #b45309;
  --color-danger: #dc2626;    --color-danger-hover: #b91c1c;
  --color-violet: #7c3aed;
  --color-info: #0ea5e9;      /* estado informativo (sky) */
  --color-teal: #14b8a6;      /* acento teal */
  --color-star: #b8860b;      /* estrella de rating (gold) */

  /* ---------- Severidad (ordenada, colorblind-safe: color + etiqueta + forma) ----------
     Se usa como chip (.sev-*) y como dot de estado junto al registro. NO depende solo
     del color: siempre acompaña etiqueta. */
  --sev-critical: #b91c1c;
  --sev-high: #ea580c;
  --sev-medium: #ca8a04;
  --sev-low: #0891b2;
  --sev-info: #2563eb;

  /* ---------- Estado operativo (ciclo de vida; distinto de severidad) ----------
     activo/pendiente/resuelto tienen dot pulsante; fuera-de-linea queda fijo (hueco). */
  --state-active: #2563eb;
  --state-pending: #d97706;
  --state-resolved: #16a34a;
  --state-offline: #64748b;

  --color-success-soft: rgba(22, 163, 74, 0.12);
  --color-warning-soft: rgba(217, 119, 6, 0.12);
  --color-danger-soft: rgba(220, 38, 38, 0.12);
  --color-violet-soft: rgba(124, 58, 237, 0.12);

  /* bordes/tints soft de estado (valores solidos, no rgba) */
  --color-primary-border: #bfdbfe;
  --color-danger-border: #fecaca;
  --color-warning-border: #fde68a;

  --color-focus: rgba(37, 99, 235, 0.30);        /* color del anillo de foco */

  /* ---------- Tipografía ---------- */
  --font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;

  --fs-xs: 11px;      /* caption / label / pill */
  --fs-sm: 12px;      /* body / control / tabla */
  --fs-base: 13px;    /* body-emphasis / tab (default de la app) */
  --fs-md: 14px;      /* título de sección */
  --fs-lg: 16px;      /* título de card / stat / modal */
  --fs-xl: 21px;      /* h1 / page-header */
  --fs-2xl: 26px;     /* stat value */
  --fs-3xl: 36px;     /* display de impresión (aislado en print) */

  --fw-regular: 400;
  --fw-medium: 500;   /* default UI */
  --fw-semibold: 600; /* énfasis / headings */
  --fw-bold: 700;     /* reserva (print) */

  --lh-none: 1;       /* iconos / botones */
  --lh-tight: 1.25;   /* headings */
  --lh-snug: 1.4;     /* controles */
  --lh-base: 1.5;     /* cuerpo */

  --ls-display: -0.01em;
  --ls-body: normal;
  --ls-caps: 0.03em;  /* labels en mayúsculas */

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

  /* ---------- Radios ---------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 999px;
  --radius-circle: 50%;

  /* ---------- Sombras / elevación ---------- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px -4px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.14);
  --focus-ring: 0 0 0 3px var(--color-focus);

  /* ---------- Bordes (atajos) ---------- */
  --border: 1px solid var(--color-border);
  --border-strong: 1px solid var(--color-border-strong);

  /* ---------- Motion ---------- */
  --dur-fast: 0.12s;
  --dur: 0.15s;
  --ease: ease;

  /* ---------- Z-index (escala ordenada) ---------- */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-topbar: 1030;
  --z-backdrop: 1040;
  --z-modal: 1050;
  --z-toast: 1080;

  /* ---------- Layout ---------- */
  --sidebar-w: 244px;
  --sidebar-w-collapsed: 60px;
  --topbar-h: 48px;
}

/* Breakpoints canónicos (Bootstrap-aligned, convención min-width):
   sm 576 · md 768 · lg 992 · xl 1200. Documentado en DESIGN_SYSTEM.md.
   (CSS custom properties no funcionan dentro de @media(min-width), por eso los
   breakpoints se documentan y se usan como literales acordados, no como token.) */

/* ---------- Utilidad de accesibilidad: foco visible uniforme ----------
   Cualquier elemento interactivo que no tenga foco propio hereda este anillo. */
:where(a, button, input, select, textarea, [tabindex], .btn, .nav-link):focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
  border-color: var(--color-primary);
}

/* ---------- Targets tactiles comodos en superficies de accion no-densas ----------
   44px (WCAG 2.5.5 AAA) en footers de modal, donde hay espacio y es el contexto de
   accion primaria; 24px (2.5.8) en el boton de cierre. Las tablas densas NO se tocan
   a proposito (density-first; cumplen 2.5.8 AA via padding). min-* solo crece:
   uniforma la altura de los botones del footer sin desplazar contenido existente. */
.modal-footer .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-close {
  min-width: 24px;
  min-height: 24px;
}

/* =============================================================================
   MODO OSCURO — estructura lista, DESACTIVADA hasta terminar Fase 3.
   Para activar: quitar el comentario. Requiere que el CSS de página ya no
   hardcodee colores claros (si no, se verá mixto).
   -----------------------------------------------------------------------------
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0b1220;
    --color-surface: #131c2e;
    --color-surface-2: #1a2436;
    --color-text: #f1f5f9;
    --color-text-body: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-text-dim: #64748b;
    --color-border: rgba(148, 163, 184, 0.12);
    --color-border-strong: rgba(148, 163, 184, 0.22);
    --color-primary: #3b82f6;
    --color-primary-hover: #60a5fa;
  }
}
:root[data-theme="dark"] {
  ...igual que el bloque de arriba...
}
============================================================================= */