/* ════════════════════════════════════════════════════════════════
   TerraNava — tokens.css · v1.0
   Sistema de diseño: instrumento premium · carbon · bone · sepia
   El IVH es sagrado y no se repurpa para decoración.
   ════════════════════════════════════════════════════════════════ */

:root {

  /* ─── 1 · SUPERFICIES — carbon (oscuro) ────────────────────── */
  --tn-void:         #050810;   /* espacio profundo · hero oscuro · scrim base */
  --tn-carbon:       #0a0e14;   /* fondo tool oscuro */
  --tn-graphite:     #141821;   /* superficie 1 oscuro · cards */
  --tn-slate:        #1f2530;   /* superficie 2 oscuro · modal · sidebar */
  --tn-iron:         #2a313e;   /* borde oscuro default */
  --tn-iron-strong:  #3a4250;   /* borde oscuro fuerte */
  --tn-ash:          #4a5160;   /* texto muted en oscuro */
  --tn-fog:          #8b94a3;   /* texto secundario en oscuro */
  --tn-mist:         #c8cdd5;   /* texto terciario · hairline en oscuro */

  /* ─── 2 · SUPERFICIES — bone (claro) ───────────────────────── */
  --tn-bone:         #f4f0e8;   /* fondo papel principal */
  --tn-paper:        #fbf9f4;   /* papel alternativo */
  --tn-cream:        #ede8dc;   /* card tinted en light */
  --tn-ink:          #0a0e14;   /* texto primario en light */
  --tn-ink-muted:    #4a5160;   /* texto muted en light */
  --tn-ink-soft:     #6e7686;   /* texto suave en light */
  --tn-ruled:        #d8d0bf;   /* hairline borde en light */
  --tn-ruled-soft:   #e8e1d0;   /* divisor suave en light */

  /* ─── 3 · MARCA — sepia (latón de instrumento) ─────────────── */
  --tn-sepia:        #c9a96e;   /* acento principal · CTA · brand */
  --tn-sepia-deep:   #a88a51;   /* hover / pressed */
  --tn-sepia-bright: #d7b97c;   /* highlight más vivo · uso medido */
  --tn-sepia-soft:   #e8d9b3;   /* tinted bg badge */
  --tn-sepia-faint:  #f0e6cc;   /* whisper bg */
  --tn-sepia-glow:   rgba(201, 169, 110, 0.18);
  --tn-sepia-shadow: rgba(201, 169, 110, 0.32);

  /* ─── 4 · IVH (SAGRADO — no repurposar) ────────────────────── */
  --ivh-critico:        #e74c3c;
  --ivh-alto:           #e67e22;
  --ivh-medio:          #f39c12;
  --ivh-bajo:           #27ae60;
  --ivh-sin-dato:       #95a5a6;
  /* Soft tints para badges sobre superficies light */
  --ivh-critico-soft:   #fdecea;
  --ivh-alto-soft:      #fef3e2;
  --ivh-medio-soft:     #fefbe6;
  --ivh-bajo-soft:      #eafaf1;
  /* Brillados para legibilidad sobre superficies dark */
  --ivh-critico-on-dark:#ff6b5a;
  --ivh-alto-on-dark:   #ff9a4d;
  --ivh-medio-on-dark:  #ffc02e;
  --ivh-bajo-on-dark:   #5dd987;
  /* Inks legibles sobre soft */
  --ivh-critico-ink:    #c0392b;
  --ivh-alto-ink:       #b35418;
  --ivh-medio-ink:      #8a6a08;
  --ivh-bajo-ink:       #1e8449;

  /* ─── 5 · DATA AZUL (mapa y charts solamente) ──────────────── */
  --data-blue:       #4a9cd6;
  --data-blue-deep:  #2c6896;
  --data-blue-night: #1a3a5c;

  /* ─── 6 · ACENTOS POR ÁREA (SevenDoors) ────────────────────── */
  --area-alerta-bg:           #5a1818;
  --area-alerta-accent:       #ff8b6b;
  --area-municipios-bg:       #e8e3d8;
  --area-municipios-accent:   #c9a96e;
  --area-pronostico-bg:       #0d1a2e;
  --area-pronostico-accent:   #7dd3fc;
  --area-calidad-bg:          #0d4d4a;
  --area-calidad-accent:      #5eead4;
  --area-observatorio-bg:     #f4efe6;
  --area-observatorio-accent: #0a0e14;
  --area-servicios-bg:        #1f1f1f;
  --area-servicios-accent:    #c9a96e;
  --area-dd-bg:               #1d3a2a;
  --area-dd-accent:           #86efac;

  /* ─── 7 · TIPOGRAFÍA ───────────────────────────────────────── */
  --font-display: "Source Serif Pro", "Source Serif 4", Georgia, serif;
  --font-sans:    -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Berkeley Mono", "SF Mono", "JetBrains Mono",
                  Menlo, Monaco, Consolas, monospace;

  /* Escala — fluida con clamp donde corresponde */
  --fs-display:    clamp(56px, 8vw, 112px);  /* hero serif gigante */
  --fs-section:    clamp(40px, 5.5vw, 72px); /* h2 de capítulo */
  --fs-headline:   clamp(28px, 3.2vw, 44px); /* h3 mayor */
  --fs-subhead:    clamp(19px, 2vw, 26px);   /* serif subhead */
  --fs-h3:         22px;                     /* h4 dentro de tools */
  --fs-h4:         17px;                     /* card title */
  --fs-body-lg:    17px;
  --fs-body:       15px;
  --fs-body-sm:    13.5px;
  --fs-caption:    12.5px;
  --fs-overline:   11px;
  --fs-mono:       12.5px;
  --fs-mono-sm:    11px;

  --lh-tight:    1.05;
  --lh-snug:     1.25;
  --lh-base:     1.55;
  --lh-relaxed:  1.7;

  --ls-display:    -0.025em;
  --ls-headline:   -0.015em;
  --ls-body:        0;
  --ls-wide:        0.06em;
  --ls-overline:    0.22em;
  --ls-mono:        0.02em;

  /* ─── 8 · ESPACIADO ────────────────────────────────────────── */
  --sp-0:    0;
  --sp-1:    4px;
  --sp-2:    8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10: 128px;

  /* ─── 9 · RADIO — instrument sharp ─────────────────────────── */
  --r-sharp: 0;
  --r-1:     2px;   /* hairline radius — sub-pixel optical */
  --r-2:     4px;   /* default · inputs · botones · cards */
  --r-3:     6px;   /* secondary */
  --r-4:     8px;   /* large cards · modals */
  --r-5:    12px;   /* contenedores grandes */
  --r-pill: 999px;  /* badges · pills */

  /* ─── 10 · SOMBRAS ─────────────────────────────────────────── */
  --sh-hairline:    inset 0 0 0 1px var(--tn-ruled);
  --sh-hairline-d:  inset 0 0 0 1px var(--tn-iron);
  --sh-1:           0 1px 2px rgba(10, 14, 20, 0.06);
  --sh-2:           0 4px 12px rgba(10, 14, 20, 0.08);
  --sh-3:           0 12px 32px rgba(10, 14, 20, 0.16);
  --sh-4:           0 24px 56px rgba(10, 14, 20, 0.32);
  --sh-glow-sepia:  0 0 0 1px rgba(201, 169, 110, 0.32), 0 12px 32px rgba(201, 169, 110, 0.18);
  --sh-d-1:         0 1px 0 rgba(255, 255, 255, 0.03);
  --sh-d-2:         0 4px 16px rgba(0, 0, 0, 0.5);
  --sh-d-3:         0 16px 48px rgba(0, 0, 0, 0.7);

  /* ─── 11 · MOTION ──────────────────────────────────────────── */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:       120ms;
  --dur-base:       240ms;
  --dur-slow:       420ms;
  --dur-deliberate: 700ms;

  /* ─── 12 · Z-INDEX ─────────────────────────────────────────── */
  --z-base:        0;
  --z-sticky:     40;
  --z-nav:        50;
  --z-side-panel: 80;
  --z-modal:     100;
  --z-toast:     120;
  --z-tooltip:   140;
}

/* ════════════════════════════════════════════════════════════════
   TEMAS — light (editorial · home upper · institucional)
                 dark (tool · instrument · home lower)
   Aplicar con  data-theme="light"  o  data-theme="dark"  en <body> o sección.
   ════════════════════════════════════════════════════════════════ */

:root,
[data-theme="light"] {
  --surface-page:    var(--tn-bone);
  --surface-card:    var(--tn-paper);
  --surface-raised:  #ffffff;
  --surface-tinted:  var(--tn-cream);
  --border-default:  var(--tn-ruled);
  --border-strong:   #b8ad97;
  --border-soft:     var(--tn-ruled-soft);
  --fg-default:      var(--tn-ink);
  --fg-muted:        var(--tn-ink-muted);
  --fg-soft:         var(--tn-ink-soft);
  --fg-inverse:      var(--tn-bone);
  --fg-on-sepia:     var(--tn-carbon);
  /* IVH efectivos */
  --ivh-c-effective: var(--ivh-critico);
  --ivh-a-effective: var(--ivh-alto);
  --ivh-m-effective: var(--ivh-medio);
  --ivh-b-effective: var(--ivh-bajo);
}

[data-theme="dark"] {
  --surface-page:    var(--tn-carbon);
  --surface-card:    var(--tn-graphite);
  --surface-raised:  var(--tn-slate);
  --surface-tinted:  #1a2030;
  --border-default:  var(--tn-iron);
  --border-strong:   var(--tn-iron-strong);
  --border-soft:     #1a2030;
  --fg-default:      var(--tn-bone);
  --fg-muted:        var(--tn-fog);
  --fg-soft:         var(--tn-ash);
  --fg-inverse:      var(--tn-carbon);
  --fg-on-sepia:     var(--tn-carbon);
  /* IVH brillados sobre dark */
  --ivh-c-effective: var(--ivh-critico-on-dark);
  --ivh-a-effective: var(--ivh-alto-on-dark);
  --ivh-m-effective: var(--ivh-medio-on-dark);
  --ivh-b-effective: var(--ivh-bajo-on-dark);
}

/* ════════════════════════════════════════════════════════════════
   RESET ÚTIL + base
   ════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-default);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
}
::selection { background: var(--tn-sepia); color: var(--tn-carbon); }

/* ════════════════════════════════════════════════════════════════
   CLASES UTILITARIAS DE TIPOGRAFÍA
   ════════════════════════════════════════════════════════════════ */

.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.t-section {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-headline);
}
.t-headline {
  font-family: var(--font-display);
  font-size: var(--fs-headline);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-headline);
}
.t-subhead {
  font-family: var(--font-display);
  font-size: var(--fs-subhead);
  font-weight: 400;
  line-height: var(--lh-snug);
}
.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
}
.t-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
}
.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-base); }
.t-body    { font-size: var(--fs-body);    line-height: var(--lh-base); }
.t-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-base); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-snug); color: var(--fg-muted); }

.t-overline {
  font-size: var(--fs-overline);
  font-weight: 700;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--tn-sepia);
}
.t-overline.is-muted { color: var(--fg-muted); }

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  font-feature-settings: "tnum" on, "zero" on;
}
.t-mono-sm {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono);
}

/* ════════════════════════════════════════════════════════════════
   BOTONES
   ════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 12px 20px;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:focus-visible {
  outline: 2px solid var(--tn-sepia);
  outline-offset: 2px;
}

/* Primary — sepia fill, ink text */
.btn-primary {
  background: var(--tn-sepia);
  color: var(--tn-carbon);
  border-color: var(--tn-sepia);
}
.btn-primary:hover {
  background: var(--tn-sepia-deep);
  border-color: var(--tn-sepia-deep);
}

/* Outline — la firma del instrumento */
.btn-outline {
  background: transparent;
  color: var(--fg-default);
  border-color: var(--border-strong);
}
.btn-outline:hover {
  background: var(--fg-default);
  color: var(--surface-page);
}
[data-theme="dark"] .btn-outline {
  border-color: rgba(255,255,255,0.25);
}
[data-theme="dark"] .btn-outline:hover {
  background: var(--tn-bone);
  color: var(--tn-carbon);
  border-color: var(--tn-bone);
}

/* Ghost — sin borde, solo texto */
.btn-ghost {
  background: transparent;
  color: var(--fg-default);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--surface-tinted);
}

/* Sepia outline — para uso institucional secundario */
.btn-sepia-outline {
  background: transparent;
  color: var(--tn-sepia);
  border-color: var(--tn-sepia);
}
.btn-sepia-outline:hover {
  background: var(--tn-sepia);
  color: var(--tn-carbon);
}

.btn-sm { padding: 8px 14px; font-size: var(--fs-mono); }
.btn-lg { padding: 16px 28px; font-size: var(--fs-body); }

/* ════════════════════════════════════════════════════════════════
   BADGES — IVH y genéricos
   ════════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-overline);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.4;
}

/* IVH — solid sobre surface (light theme) */
.badge-ivh-critico { background: var(--ivh-critico-soft); color: var(--ivh-critico-ink); }
.badge-ivh-alto    { background: var(--ivh-alto-soft);    color: var(--ivh-alto-ink); }
.badge-ivh-medio   { background: var(--ivh-medio-soft);   color: var(--ivh-medio-ink); }
.badge-ivh-bajo    { background: var(--ivh-bajo-soft);    color: var(--ivh-bajo-ink); }
.badge-ivh-sin     { background: var(--tn-cream);         color: var(--fg-muted); }

/* IVH — strong sobre dark theme */
[data-theme="dark"] .badge-ivh-critico,
.badge-ivh-critico.is-strong { background: var(--ivh-critico); color: white; }
[data-theme="dark"] .badge-ivh-alto,
.badge-ivh-alto.is-strong    { background: var(--ivh-alto);    color: white; }
[data-theme="dark"] .badge-ivh-medio,
.badge-ivh-medio.is-strong   { background: var(--ivh-medio);   color: var(--tn-carbon); }
[data-theme="dark"] .badge-ivh-bajo,
.badge-ivh-bajo.is-strong    { background: var(--ivh-bajo);    color: white; }

/* Genéricos */
.badge-sepia   { background: var(--tn-sepia-soft); color: var(--tn-sepia-deep); }
.badge-mono    { background: var(--surface-tinted); color: var(--fg-default);
                 font-family: var(--font-mono); letter-spacing: var(--ls-mono);
                 text-transform: none; }
.badge-outline { background: transparent; border-color: var(--border-default); color: var(--fg-muted); }

/* ════════════════════════════════════════════════════════════════
   CARDS · PANELS · TABLES
   ════════════════════════════════════════════════════════════════ */

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-4);
  padding: var(--sp-5);
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.card-hairline {
  background: var(--surface-card);
  border: none;
  box-shadow: var(--sh-hairline);
  border-radius: var(--r-4);
  padding: var(--sp-5);
}
[data-theme="dark"] .card-hairline { box-shadow: var(--sh-hairline-d); }

.card-interactive:hover {
  border-color: var(--tn-sepia);
  transform: translateY(-2px);
}

.tn-rule {
  height: 1px;
  background: var(--border-default);
  border: 0;
  margin: var(--sp-5) 0;
}
.tn-rule-strong { background: var(--fg-default); height: 1px; }
.tn-rule-sepia  { background: var(--tn-sepia);   height: 1px; }

/* Tabla data-dense */
.tn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
  font-variant-numeric: tabular-nums;
}
.tn-table th {
  text-align: left;
  font-weight: 600;
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-default);
}
.tn-table td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--fg-default);
}
.tn-table tbody tr:hover {
  background: var(--surface-tinted);
}

/* Inputs */
.input {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  padding: 10px 14px;
  background: var(--surface-card);
  color: var(--fg-default);
  border: 1px solid var(--border-default);
  border-radius: var(--r-2);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out);
  width: 100%;
}
.input:focus { border-color: var(--tn-sepia); }
.input::placeholder { color: var(--fg-soft); }

/* ════════════════════════════════════════════════════════════════
   OVERLINE PATTERN  ─── el "memo institucional" signal
   ════════════════════════════════════════════════════════════════ */

.tn-overline-line {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-overline);
  font-weight: 700;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--tn-sepia);
}
.tn-overline-line::before {
  content: "";
  display: inline-block;
  width: 32px; height: 1px;
  background: currentColor;
}

/* ════════════════════════════════════════════════════════════════
   VIEW TRANSITIONS — fallback graceful en navegadores modernos
   ════════════════════════════════════════════════════════════════ */

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 260ms;
  animation-timing-function: var(--ease-cinematic);
}