/* ==========================================================================
   Guadalupe Electoral — Design Tokens
   Colors, type, spacing, elevation. Mirror the live HTML report 1:1.
   Source: reporte/estrategia_guadalupe_2027.html (IEEPCNL 2024 report)
   ========================================================================== */

/* --- Fonts (Google Fonts CDN, same as original report) ------------------- */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1');

:root {
  /* ── BRAND ────────────────────────────────────────────────────────────── */
  /* Naranja Movimiento Ciudadano — color eje de todo el sistema */
  --ora:        #FF6B00;
  --ora-hover:  #E65100;  /* press / hover state */
  --ora-05:     rgba(255,107,0,.05);
  --ora-08:     rgba(255,107,0,.08);
  --ora-10:     rgba(255,107,0,.10);
  --ora-12:     rgba(255,107,0,.12);
  --ora-15:     rgba(255,107,0,.15);
  --ora-30:     rgba(255,107,0,.30);

  /* ── NEUTROS (fondo claro — el reporte es light theme) ───────────────── */
  --bg:         #FFFFFF;   /* canvas */
  --bg-alt:     #FAFAFA;   /* hero / portada background */
  --bg-soft:    #F5F5F5;   /* tabs strip, thead */
  --card:       #F7F7F8;   /* deprecated alias, still referenced */
  --surface:    #FFFFFF;   /* card surface */
  --bdr:        #E0E0E0;   /* 1px border */
  --bdr-soft:   #EEEEEE;   /* table row divider */
  --dark:       #FFFFFF;   /* historical name — kept for compatibility */

  /* ── TEXTO ───────────────────────────────────────────────────────────── */
  --txt:        #1A1A1A;   /* body */
  --sub:        #666666;   /* secondary */
  --muted:      #999999;   /* tertiary / disabled */

  /* ── SEMÁNTICOS (resultado electoral) ────────────────────────────────── */
  --green:      #00C853;   /* MC ganó / victoria segura */
  --green-d:    #00897B;   /* consolidar con riesgo */
  --red:        #E53935;   /* perdida */
  --red-alt:    #FF1744;   /* perdida >150 votos */
  --yel:        #F9A825;   /* recuperar / advertencia */
  --yel-soft:   #FFD600;   /* perdida ≤50 votos (oportunidad) */
  --blue:       #1565C0;   /* informativo / distritos */
  --ora-deep:   #FF5722;   /* trabajo urgente */
  --purple:     #9C27B0;   /* simpatizantes (nivel 6 pirámide) */

  /* ── TIPOGRAFÍA — Familias ───────────────────────────────────────────── */
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'IBM Plex Mono', monospace;

  /* ── TIPOGRAFÍA — Escala semántica ───────────────────────────────────── */
  --t-portada:    clamp(52px, 7vw, 100px);  /* portada hero */
  --t-hero:       clamp(44px, 5.5vw, 82px); /* tab hero */
  --t-h1:         34px;   /* kpi value */
  --t-h2:         30px;   /* section title */
  --t-h3:         24px;   /* roadmap phase title */
  --t-h4:         18px;   /* candidate name */
  --t-body:       14px;   /* body copy */
  --t-sm:         12px;   /* secondary body / tables */
  --t-xs:         11px;   /* mono labels, pills */
  --t-micro:      10px;   /* badges, legend */
  --t-nano:       9px;    /* timeline tags */

  /* Tracking (el reporte usa letter-spacing agresivo en mayúsculas) */
  --tr-tight:     -0.01em;
  --tr-wide:      1px;
  --tr-wider:     1.5px;
  --tr-widest:    2px;
  --tr-eyebrow:   3px;   /* '· PLAN ESTRATEGICO ·' */

  /* Line-height */
  --lh-tight:     1;
  --lh-snug:      1.2;
  --lh-body:      1.6;

  /* ── ESPACIADO ───────────────────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 10px;
  --sp-5: 12px;
  --sp-6: 14px;
  --sp-7: 16px;
  --sp-8: 20px;
  --sp-9: 24px;
  --sp-10: 28px;
  --sp-11: 32px;
  --sp-12: 36px;
  --sp-13: 44px;
  --sp-14: 56px;  /* padding horizontal de secciones */

  /* ── RADIO ───────────────────────────────────────────────────────────── */
  --r-xs:  3px;   /* badges cuadradas, col-tag */
  --r-sm:  4px;   /* badge */
  --r-md:  6px;   /* button, search field */
  --r-lg:  8px;   /* kpi card, note block */
  --r-xl:  10px;  /* cand card, ins card */
  --r-2xl: 12px;  /* portada container */
  --r-pill: 20px; /* pill, fbtn */
  --r-full: 999px;

  /* ── SOMBRAS ─────────────────────────────────────────────────────────── */
  --sh-card:    0 1px 3px rgba(0,0,0,.04);             /* kpi, cand, ins */
  --sh-pop:     0 2px 8px rgba(0,0,0,.06);             /* map-wrap */
  --sh-btn:     0 4px 12px rgba(255,107,0,.30);        /* portada-enter hover */
  --sh-tooltip: 0 4px 12px rgba(0,0,0,.50);            /* leaflet tooltip (dark) */
  --sh-focus:   0 0 0 1px rgba(0,200,83,.2);           /* cand.w (ganador) */

  /* ── TRANSITIONS ─────────────────────────────────────────────────────── */
  --trans-fast:   .12s;
  --trans-base:   .2s;
  --trans-slow:   .4s;
  --ease:         ease;  /* el original usa default ease */
}

/* ==========================================================================
   TYPOGRAPHY — Semantic classes
   Mirror the patterns used throughout the report.
   ========================================================================== */
body, .type-body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--txt);
  background: var(--bg);
}

.type-portada {
  font-family: var(--font-display);
  font-size: var(--t-portada);
  line-height: .95;
  color: var(--txt);
  letter-spacing: var(--tr-tight);
}

.type-hero {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  color: var(--txt);
}

.type-h1, .type-kpi-value {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  color: var(--ora);
}

.type-h2, .type-section-title {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  letter-spacing: .5px;
  color: var(--txt);
}

.type-h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  letter-spacing: .5px;
  color: var(--txt);
}

.type-h4 {
  font-family: var(--font-body);
  font-size: var(--t-h4);
  font-weight: 700;
  color: var(--txt);
}

.type-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-eyebrow);
  color: var(--ora);
  text-transform: uppercase;
}

.type-label {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--sub);
  font-weight: 600;
}

.type-tab {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}

.type-mono {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--sub);
}

.type-body-sm {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--sub);
  line-height: var(--lh-body);
}

.type-micro {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  color: var(--muted);
}

.type-table-head {
  font-family: var(--font-body);
  font-size: var(--t-nano);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--sub);
  font-weight: 600;
}

/* Accent rule: en titulares, envolver la última palabra en <span>
   para aplicar color naranja. Ej:  <h2>Auditoría y <span>Control</span></h2> */
.type-section-title span,
.type-hero span,
.type-h3 span {
  color: var(--ora);
}