/* ============================================================
   QAD Calidad — Tokens de diseño
   Ú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.
   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 */

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

  /* Estados funcionales — SOLO severidad/estado, nunca decorativo */
  --color-danger: #B23A3A;
  --color-danger-bg: #F8E8E8;
  --color-danger-text: #8C2E2E;
  --color-warning: #B8860B;
  --color-warning-bg: #FBF1DC;
  --color-warning-text: #8A6508;
  --color-success: #2F7D5B;
  --color-success-bg: #E4F2EA;
  --color-success-text: #1F5A3F;
  --color-info-bg: #E9F1F8;
  --color-info-text: #1F4E73;

  /* ─── 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);

  /* ─── 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;
}