/* ════════════════════════════════════════════════════════════════════════
   Design tokens — LINEAMIENTOS_DISENO.md §2 (color), §3 (tipografía), §13.
   Fondo claro, navy como voz principal, un solo acento teal→menta.
   Los alias --c-* mantienen compatibilidad con components.css (se migran
   a los nombres canónicos en la fase de componentes).
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Paleta núcleo (§2.1 / §13) ─────────────────────────────────────── */
  --navy:      #0E2A47;
  --navy-2:    #27466B;
  --teal:      #0E8C7F;
  --mint:      #9BE3D2;
  --teal-soft: #E7F3F1;
  --teal-soft-2: #DCEEEA;   /* variante dashboard */
  --ink:       #1C2B3A;
  --slate:     #5B6B82;
  --muted:     #8A97A8;
  --line:      #E4E9F0;
  --bg:        #F6F8FA;
  --card:      #FFFFFF;
  --coral:     #C0614F;
  --coral-soft: rgba(192, 97, 79, 0.12);
  --grad: linear-gradient(90deg, #0E8C7F 0%, #9BE3D2 100%);

  /* Grises de gráficos (§2.3) */
  --chart-context: #C9D2DD;
  --chart-axis:    #D7DEE8;
  --chart-grid:    #EDF1F6;

  /* ── Alias de compatibilidad (componentes existentes) ───────────────── */
  --c-bg:           var(--bg);
  --c-surface:      var(--card);
  --c-surface-2:    #FBFCFD;
  --c-border:       var(--line);
  --c-border-strong:#D0D9E3;
  --c-text:         var(--ink);
  --c-text-muted:   var(--slate);
  --c-text-faint:   var(--muted);
  --c-accent:       var(--teal);
  --c-accent-weak:  var(--teal-soft);
  --c-accent-ink:   var(--navy);

  --c-positive:    var(--teal);
  --c-positive-bg: var(--teal-soft);
  --c-warning:     #8A6D3B;
  --c-warning-bg:  #F7F1E3;
  --c-danger:      var(--coral);
  --c-danger-bg:   var(--coral-soft);

  /* ── Chips de zona: un acento por vista (§11) ────────────────────────
     Mercado = el hallazgo (teal); outliers = negativo (coral, cuentagotas);
     el resto, neutros slate. */
  --c-zone-outlier-neg-bg: var(--coral-soft); --c-zone-outlier-neg-fg: var(--coral);
  --c-zone-ingreso-bg:     #F1F4F8;           --c-zone-ingreso-fg:     var(--slate);
  --c-zone-crecimiento-bg: #F1F4F8;           --c-zone-crecimiento-fg: var(--slate);
  --c-zone-mercado-bg:     var(--teal-soft);  --c-zone-mercado-fg:     var(--teal);
  --c-zone-madurez-bg:     #F1F4F8;           --c-zone-madurez-fg:     var(--slate);
  --c-zone-promocion-bg:   #F1F4F8;           --c-zone-promocion-fg:   var(--slate);
  --c-zone-outlier-pos-bg: var(--coral-soft); --c-zone-outlier-pos-fg: var(--coral);

  /* ── Tipografía (§3) ─────────────────────────────────────────────────── */
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs: 11px;       /* etiquetas KPI, eyebrow */
  --fs-sm: 12px;       /* descripciones de gráfico, pies */
  --fs-base: 15px;     /* cuerpo (§3) */
  --fs-md: 15.5px;     /* título de tarjeta-gráfico */
  --fs-lg: 22px;       /* H1 de app */
  --fs-xl: 27px;       /* valor de KPI */
  --fs-2xl: 34px;

  --lh-tight: 1.2;
  --lh-normal: 1.55;   /* §3 apps */

  /* ── Espaciado / radios (§4) ─────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  --r-sm: 7px;     /* botones */
  --r-md: 10px;    /* tarjetas (apps) */
  --r-lg: 12px;
  --r-pill: 99px;

  /* ── Sombras: siempre teñidas navy, nunca negras (§2.5) ──────────────── */
  --shadow-xs: 0 1px 2px rgba(14, 42, 71, 0.05);
  --shadow-sm: 0 2px 8px rgba(14, 42, 71, 0.06);
  --shadow-md: 0 14px 34px rgba(14, 42, 71, 0.08);   /* hover de tarjetas */

  --t-fast: 120ms ease;
  --t-med: 180ms ease;

  /* Altura del header sticky (la usa el rail) */
  --header-h: 86px;
}

*, *::before, *::after { box-sizing: border-box; }

/* El atributo hidden SIEMPRE gana (los .card definen display:flex) */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol { margin: 0; }

button { font-family: inherit; }

/* Focus — anillo visible solo con teclado */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* Números tabulares en toda cifra comparable verticalmente (§3) */
.num, .kpi-card__value, .table td { font-variant-numeric: tabular-nums; }

/* Eyebrow (§3): MAYÚSCULAS pequeñas con tracking positivo, color teal */
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}