/* ============================================================
   PLATAFORMA CGI — Tokens (identidad "cartográfica")
   Autoridad técnica · oficio · herencia.
   Tipografía: Fraunces (display) · IBM Plex Sans (UI) · IBM Plex Mono (datos)
   ============================================================ */

:root {
  /* ---- Superficies (pergamino cálido, no blanco) ---- */
  --paper-base: #F4F1EC;     /* fondo de la app */
  --paper-raise: #FBFAF7;    /* superficies/cards elevadas */
  --paper-surface: #FFFFFF;  /* inputs, superficies puras */
  --paper-dark: #EAE5DC;     /* fondos secundarios, hovers suaves */
  --paper-line: #DED7CB;     /* líneas/bordes sobre pergamino */

  /* ---- Tinta (texto) ---- */
  --ink-primary: #211E1A;    /* casi negro cálido */
  --ink-secondary: #5C564E;  /* labels, subtítulos */
  --ink-tertiary: #8C8579;   /* hints, meta */
  --ink-faint: #B3ABA0;      /* placeholders, deshabilitado */

  /* ---- Acento: terracota / clay ---- */
  --clay: #9E5E2E;           /* terracota principal */
  --clay-deep: #7F4A22;      /* hover/pressed */
  --clay-soft: #C98A5A;      /* claro */
  --clay-bg: #F1E7DC;        /* tinte de fondo (nav activo, chips) */
  --clay-line: #E0CBB4;      /* borde tinte clay */

  /* ---- Confianza: navy (CTA principal) ---- */
  --trust: #1E466E;
  --trust-deep: #15324F;
  --trust-soft: #3E6B98;
  --trust-bg: #E7EDF3;

  /* ---- Estados / semáforo ---- */
  --ok: #2F8F57;        --ok-bg: #E8F2EC;
  --proximo: #C98A28;   --proximo-bg: #F6EDD8;
  --critico: #C75A2A;   --critico-bg: #F6E5DA;
  --vencido: #C0392B;   --vencido-bg: #F6E0DC;

  /* ---- Acentos por módulo (launcher) ---- */
  --mod-tareas: #2C6FB0;
  --mod-flota: #B26A2E;
  --mod-levant: #9E5E2E;
  --mod-reportes: #2F8F57;
  --mod-rh: #7B5AA6;
  --mod-docs: #5B6B7A;
  --mod-seyses: #C0962E;

  /* ---- Tipografía ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Escala (px) — densidad cuando ayuda, aire cuando descansa */
  --t-hint: 11px;
  --t-label: 12.5px;
  --t-body: 14.5px;
  --t-section: 17px;
  --t-h3: 22px;
  --t-h2: 30px;
  --t-h1: 42px;
  --t-display: 60px;

  /* ---- Radios ---- */
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 13px;
  --r-xl: 18px;

  /* ---- Sombras (suaves, papel) ---- */
  --sh-1: 0 1px 2px rgba(33, 30, 26, 0.05), 0 1px 1px rgba(33, 30, 26, 0.04);
  --sh-2: 0 2px 4px rgba(33, 30, 26, 0.05), 0 6px 16px -8px rgba(33, 30, 26, 0.14);
  --sh-3: 0 8px 24px -10px rgba(33, 30, 26, 0.22), 0 2px 6px rgba(33, 30, 26, 0.06);
  --sh-clay: 0 8px 22px -10px rgba(158, 94, 46, 0.45);
  --sh-trust: 0 1px 2px rgba(30, 70, 110, 0.18), 0 12px 24px -12px rgba(30, 70, 110, 0.55);

  /* ---- Otros ---- */
  --gutter: 24px;
  --ring: 0 0 0 3px rgba(158, 94, 46, 0.22); /* focus clay */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --z-topbar: 50;
  --z-sidebar: 40;
  --z-overlay: 80;
}

/* ============================================================
   Reset moderno
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink-primary);
  background-color: var(--paper-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" on, "cv05" on;
  min-height: 100dvh;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--ink-primary);
}

/* Datos técnicos: mono con cifras tabulares */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

::selection { background: var(--clay-bg); color: var(--clay-deep); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--paper-line); border-radius: 99px; border: 3px solid var(--paper-base); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}