/*! =============================================================================
 *  © 2026 Renzo Núñez · RonBStudio — "Perú Elige 2026 · Segunda Vuelta".
 *  Todos los derechos reservados. Código propietario: queda prohibida su copia,
 *  redistribución, ingeniería inversa o uso no autorizado, total o parcial.
 *  https://www.ronbstudio.com
 * ============================================================================= */
/* =============================================================================
 *  Proyecto      : Perú Elige 2026 — Segunda Vuelta
 *  Archivo       : tokens.css
 *  Descripción   : Tokens de diseño globales del proyecto.
 *
 *                  Esta versión introduce el sistema visual definitivo
 *                  (paleta "Manto Vivo" + tokens de candidatos). La paleta
 *                  editorial provisoria de v0.1.x se mantiene como capa
 *                  heredada para no romper el placeholder existente.
 *
 *                  Convenciones:
 *                    · Prefijo --c-mv-*    : paleta Manto Vivo
 *                    · Prefijo --c-party-* : colores oficiales de partido
 *                    · Prefijo --cand-*    : tokens por candidato (foto,
 *                                            scale, framing, glow)
 *
 *  Autor         : Renzo Núñez · RonBStudio
 *  Versión       : 0.1.13.16
 * ===========================================================================*/

:root {

  /* =====================================================================
   *  PALETA MANTO VIVO (sistema visual definitivo)
   * ==================================================================== */

  /* Superficies (paleta cold v0.1.9.9 — el calor lo aportan los candidatos) */
  --c-mv-bg              : #f5f7fa;          /* Body: blanco azulado claro    */
  --c-mv-bg-warm         : #eef2f7;          /* Legacy "warm" reconvertido    */
  --c-mv-bg-card         : #ffffff;          /* Tarjetas y paneles: blanco    */
  --c-mv-bg-overlay      : rgba(15, 23, 42, 0.04);
  --c-mv-bg-overlay-strong : rgba(15, 23, 42, 0.10);  /* hover sobre zona atenuada */

  /* Tarjetas con depth (v0.1.9.9). Gradiente blanco → slate-50 + sombra
     multi-capa para sensación de "papel sobre página" elevada. */
  --c-mv-bg-tint-blue    : rgba(70, 110, 180, 0.08);  /* tarjeta destacada no-partidaria */
  --c-mv-bg-card-inset   : #ffffff;                    /* sub-tarjeta interior */
  --c-mv-card-grad-top   : #ffffff;
  --c-mv-card-grad-bot   : #f1f5f9;                    /* slate-100 */
  --c-mv-card-border     : rgba(15, 23, 42, 0.07);
  --c-mv-card-ring       : rgba(15, 23, 42, 0.02);
  --c-mv-card-shadow-1   : rgba(15, 23, 42, 0.06);
  --c-mv-card-shadow-2   : rgba(15, 23, 42, 0.05);
  --c-mv-card-shadow-3   : rgba(15, 23, 42, 0.04);

  /* Tinta editorial premium: sin café-negros, slate cold (v0.1.9.9) */
  --c-mv-ink             : #1e293b;          /* slate-800 (era #1a1612)        */
  --c-mv-ink-muted       : #475569;          /* slate-600 (era #5a4a35)        */
  --c-mv-ink-soft        : #64748b;          /* slate-500 (era #8a6f3d)        */
  --c-mv-ink-on-accent   : #ffffff;          /* texto sobre acentos oscuros    */

  /* Bordes slate (v0.1.9.9): se reemplazan los cálidos por bordes fríos. */
  --c-mv-border          : #cbd5e1;          /* slate-300 (era #c4b89e)        */
  --c-mv-border-soft     : #e2e8f0;          /* slate-200 (era #d8cfb8)        */

  /* Acentos textiles (de tintes naturales: cochinilla, índigo, mostaza, chilca) */
  --c-mv-cochineal       : #b03a2e;          /* Rojo cochinilla               */
  --c-mv-cochineal-dark  : #3a1410;
  --c-mv-indigo          : #1f3a5f;          /* Azul índigo                   */
  --c-mv-indigo-dark     : #0d1d33;
  --c-mv-mostaza         : #d49a1f;          /* Amarillo mostaza              */
  --c-mv-mostaza-dark    : #8a6312;
  --c-mv-chilca          : #4a7a3a;          /* Verde chilca                  */
  --c-mv-chilca-dark     : #2d4d24;


  /* =====================================================================
   *  COLORES OFICIALES DE PARTIDO
   *  Usados en marcos, halos y micro-acentos. Nunca sobre piel humana.
   * ==================================================================== */

  /* Fuerza Popular (naranja) */
  --c-party-fp           : #f37021;          /* Naranja FP oficial            */
  --c-party-fp-dark      : #c75826;
  --c-party-fp-tint      : #ffd0a8;          /* Para texto sobre overlay neg.  */
  --c-party-fp-glow      : rgba(243, 112, 33, 0.45);
  --c-party-fp-tint-soft : rgba(243, 112, 33, 0.10);  /* fondo de tarjeta cuando lidera Keiko */

  /* Gradient stops + ring + shadow para la card del margen (v0.1.9.9). */
  --c-party-fp-tint-top    : rgba(243, 112, 33, 0.06);
  --c-party-fp-tint-bot    : rgba(243, 112, 33, 0.13);
  --c-party-fp-tint-ring   : rgba(243, 112, 33, 0.14);
  --c-party-fp-tint-shadow : rgba(243, 112, 33, 0.10);

  /* Juntos por el Perú (rojo). El slug 'ap' es legado interno (antes "Avanza
     País"); el rojo corresponde a JPP. Renombrar a 'jpp' queda post-elección. */
  --c-party-ap           : #c8302a;          /* Rojo JPP                      */
  --c-party-ap-dark      : #a8302a;
  --c-party-ap-tint      : #ffb8b3;
  --c-party-ap-glow      : rgba(200, 48, 42, 0.45);
  --c-party-ap-tint-soft : rgba(200, 48, 42, 0.10);   /* fondo de tarjeta cuando lidera Roberto */

  /* Gradient stops + ring + shadow para la card del margen (v0.1.9.9). */
  --c-party-ap-tint-top    : rgba(200, 48, 42, 0.06);
  --c-party-ap-tint-bot    : rgba(200, 48, 42, 0.13);
  --c-party-ap-tint-ring   : rgba(200, 48, 42, 0.14);
  --c-party-ap-tint-shadow : rgba(200, 48, 42, 0.10);


  /* =====================================================================
   *  TOKENS DE COMPONENTES PREMIUM (v0.1.9.9)
   *  Agrupados por componente para facilitar ajustes futuros sin tocar
   *  los archivos CSS específicos.
   * ==================================================================== */

  /* --- Tarjeta destacada azul (Participación electoral en panel detalle) --- */
  --c-mv-tint-blue-top     : rgba(70, 110, 180, 0.05);
  --c-mv-tint-blue-bot     : rgba(70, 110, 180, 0.11);
  --c-mv-tint-blue-border  : rgba(70, 110, 180, 0.20);
  --c-mv-tint-blue-ring    : rgba(70, 110, 180, 0.04);
  --c-mv-tint-blue-shadow  : rgba(70, 110, 180, 0.08);

  /* v0.1.16.43: azul para los TÍTULOS de los cuadros (más vida sin romper el
     indigo editorial). Armónico con el azul de marca rgb(70,110,180). */
  --c-mv-card-title        : #2c5599;

  /* --- Botón primario indigo (Refrescar resultados, v0.1.10.0).
         Bajado de blue-500/600 eléctrico a indigo editorial para encajar
         con la paleta Manto Vivo cold. El indigo base es el mismo que el
         token --c-mv-indigo. */
  --c-btn-primary-top         : #2d4f7d;     /* indigo medio (top del gradient) */
  --c-btn-primary-bot         : #1f3a5f;     /* indigo base (--c-mv-indigo)     */
  --c-btn-primary-top-hover   : #3a5f95;     /* indigo claro hover              */
  --c-btn-primary-bot-hover   : #2d4f7d;     /* indigo medio hover              */
  --c-btn-primary-ring        : rgba(31, 58, 95, 0.18);
  --c-btn-primary-ring-hover  : rgba(31, 58, 95, 0.25);
  --c-btn-primary-shadow      : rgba(31, 58, 95, 0.22);
  --c-btn-primary-shadow-soft : rgba(31, 58, 95, 0.16);
  --c-btn-primary-inset       : rgba(255, 255, 255, 0.15);
  --c-btn-primary-inset-hover : rgba(255, 255, 255, 0.20);

  /* --- Indicador LIVE (brecha en tiempo real) --- */
  --c-live-red          : #ef4444;
  --c-live-red-pulse-on : rgba(239, 68, 68, 0.55);
  --c-live-red-pulse-off: rgba(239, 68, 68, 0.00);

  /* --- Globo Exterior overlay del mapa --- */
  /* v0.1.10.0: bajado de blue-600 (#2563eb) a indigo (#1f3a5f). */
  --c-globe-fill        : #1f3a5f;
  --c-globe-stroke      : rgba(255, 255, 255, 0.40);
  --c-globe-icon-stroke : rgba(255, 255, 255, 0.85);
  --c-globe-shadow-1    : rgba(31, 58, 95, 0.30);
  --c-globe-shadow-2    : rgba(15, 23, 42, 0.20);

  /* --- Foco radial atmosférico de cards mapa y detalle (v0.1.10.3, unif. v0.1.11.0) ---
     Mismo gradient indigo institucional para AMBOS cards (mapa y detalle),
     creando coherencia cromática. Aplicado al .nav-map (mapa) y al
     .nav-detail (detalle) como capa de fondo sobre blanco. Color: indigo,
     dialogan con el globo Exterior y los acentos institucionales. */
  --c-mv-mapa-radial-from : rgba(31, 58, 95, 0.18);
  --c-mv-mapa-radial-mid  : rgba(31, 58, 95, 0.05);

  /* --- Cards mapa y detalle: bordes y sombra premium (v0.1.11.0) ---
     border-radius unificado en ambos cards (antes era --radius-md 8px,
     ahora 14px). Sombra más expresiva para que el card flote, no luzca
     pegado al background. */
  --c-card-radius : 14px;
  --c-card-shadow :
    0 4px 16px rgba(15, 23, 42, 0.08),
    0 1px 3px rgba(15, 23, 42, 0.06);

  /* --- Tabla editorial del panel detalle (v0.1.11.0) ---
     Reemplaza las cards 2x2 semánticas (chilca/mostaza/cochinilla/indigo)
     que generaban demasiados hues. Ahora la tabla usa indigo institucional
     en hero y números, con UN solo acento partidario (gradient FP→AP)
     descartado a favor de un sistema más legible:
       · Padrón electoral → indigo (universo total, neutro)
       · Votos válidos    → verde institucional (positivo, voto efectivo)
       · Blancos          → indigo desaturado (neutro, no alimenta candidato)
       · Nulos            → rojo terroso (negativo, voto descartado)
     Los dots marker son universalmente legibles (verde=válido, rojo=nulo). */
  --c-tabla-padron        : #1f3a5f;
  --c-tabla-validos       : #15722d;          /* v0.1.11.8: verde botella institucional, un poco más oscuro que el #1f8b3a previo para mejor peso visual y contraste contra el card crema */
  --c-tabla-blancos       : rgba(31, 58, 95, 0.30);
  --c-tabla-blancos-texto : rgba(31, 58, 95, 0.65);
  --c-tabla-nulos         : #a13228;          /* Rojo terroso (no confundible con AP) */

  /* --- Header tricolor bandera Perú (v0.1.11.0) ---
     El header del site evolucionó de:
       v0.1.10.3: fondo rojo cochinilla bandera (rompía la paleta indigo)
       v0.1.11.0: fondo indigo institucional sutil + ribete inferior tricolor
                  rojo-blanco-rojo (33% cada banda) de 3px. La bandera
                  Perú queda evocada como remate, no como fondo. */
  --c-header-tricolor-rojo   : #d91023;          /* Rojo cochinilla Pantone 485-like */
  --c-header-tricolor-blanco : #ffffff;          /* Franja blanca central del ribete */


  /* =====================================================================
   *  PALETA MAP-HEAT — choropleth divergente
   *  v0.1.9.3: paleta editorial inicial.
   *  v0.1.11.0: paleta resaturada para dialogar con los colores partidarios
   *    principales del race-header (FP #f37021 / AP #c8302a). Antes los
   *    naranjas/rojos del mapa eran versiones desaturadas (beige rosado,
   *    borgoña apagado) que no parecían familia de la barra divergente
   *    superior. Ahora todos los niveles son saturados pero institucionales
   *    (no chillones). Transición naranja → naranja-claro → rojo SIN
   *    amarillo intermedio. Usada por nav-map.css y por el panel de detalle
   *    para colorear el bucket del margen. Único lugar a tocar la sensación
   *    cromática del coroplético.
   * ==================================================================== */

  --c-map-heat-a-alto    : #c8470e;          /* Naranja profundo saturado · Keiko ≥ +20    */
  --c-map-heat-a-medio   : #f5751f;          /* Naranja medio vivo        · Keiko +5..+20  */
  --c-map-heat-empate    : #fa9a55;          /* Naranja claro saturado    · ±5 (ya no beige) */
  --c-map-heat-b-medio   : #d12e28;          /* Rojo medio vivo           · Pedro +5..+20  */
  --c-map-heat-b-alto    : #861a16;          /* Rojo profundo saturado    · Pedro ≥ +20    */


  /* =====================================================================
   *  TOKENS POR CANDIDATO
   *  Cada candidato tiene su propio set de tokens (foto, framing, color).
   *  Estos valores los consume cualquier componente que muestre al
   *  candidato (race header, retrato individual, card de victoria).
   * ==================================================================== */

  /* Keiko Fujimori (Fuerza Popular) */
  --cand-keiko-name              : "Keiko Fujimori";
  --cand-keiko-party             : "Fuerza Popular";
  --cand-keiko-photo             : url("../img/candidates/keiko-presidente.jpg");
  --cand-keiko-photo-2x          : url("../img/candidates/keiko-presidente@2x.jpg");
  --cand-keiko-color             : var(--c-party-fp);
  --cand-keiko-color-dark        : var(--c-party-fp-dark);
  --cand-keiko-color-tint        : var(--c-party-fp-tint);
  --cand-keiko-glow              : var(--c-party-fp-glow);

  /* Framing calculado matemáticamente (cara detectada con OpenCV).
     scale > 100% = zoom in. object-x/y posicionan la cara en el frame. */
  --cand-keiko-photo-scale       : 109.64%;
  --cand-keiko-photo-x           : 60.3%;
  --cand-keiko-photo-y           : 58.8%;

  /* Roberto Sánchez (Juntos por el Perú) */
  --cand-pedro-name              : "Roberto Sánchez";
  --cand-pedro-party             : "Juntos por el Perú";
  --cand-pedro-photo             : url("../img/candidates/pedro-sanchez.jpg");
  --cand-pedro-photo-2x          : url("../img/candidates/pedro-sanchez@2x.jpg");
  --cand-pedro-color             : var(--c-party-ap);
  --cand-pedro-color-dark        : var(--c-party-ap-dark);
  --cand-pedro-color-tint        : var(--c-party-ap-tint);
  --cand-pedro-glow              : var(--c-party-ap-glow);

  --cand-pedro-photo-scale       : 100%;
  --cand-pedro-photo-x           : 52.4%;
  --cand-pedro-photo-y           : 50.0%;


  /* =====================================================================
   *  PALETA EDITORIAL HEREDADA (v0.1.0 placeholder)
   *  Mantenida para no romper el placeholder existente.
   *  En el rediseño definitivo del placeholder, estos tokens se mapean
   *  uno a uno a los Manto Vivo y se eliminan.
   * ==================================================================== */

  /* Superficies (heredado) */
  --c-bg-page          : var(--c-mv-bg);
  --c-bg-card          : #ffffff;
  --c-bg-card-soft     : var(--c-mv-bg-card);
  --c-bg-overlay       : var(--c-mv-bg-overlay);

  /* Texto (heredado) */
  --c-text-strong      : var(--c-mv-ink);
  --c-text-default     : #2a2620;
  --c-text-muted       : var(--c-mv-ink-muted);
  --c-text-soft        : var(--c-mv-ink-soft);
  --c-text-on-accent   : var(--c-mv-ink-on-accent);

  /* Bordes (heredado) */
  --c-border-soft      : var(--c-mv-border-soft);
  --c-border-default   : var(--c-mv-border);
  --c-border-strong    : #b8af9d;

  /* Estados (heredado) */
  --c-status-ok        : var(--c-mv-chilca);
  --c-status-warn      : var(--c-mv-mostaza);
  --c-status-error     : var(--c-mv-cochineal);
  --c-status-info      : var(--c-mv-indigo);

  /* Candidatos legacy (heredado, mapea a partidos reales) */
  --c-cand-a           : var(--c-party-fp);
  --c-cand-a-soft      : var(--c-party-fp-tint);
  --c-cand-a-strong    : var(--c-party-fp-dark);
  --c-cand-b           : var(--c-party-ap);
  --c-cand-b-soft      : var(--c-party-ap-tint);
  --c-cand-b-strong    : var(--c-party-ap-dark);


  /* =====================================================================
   *  TIPOGRAFÍA, ESPACIADO Y LAYOUT (sin cambios respecto a v0.1.2)
   * ==================================================================== */

  --font-serif         : "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans          : "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono          : "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-numeric       : "Inter", system-ui, sans-serif;

  --fs-xs              : 0.75rem;
  --fs-sm              : 0.875rem;
  --fs-base            : 1rem;
  --fs-md              : 1.125rem;
  --fs-lg              : 1.5rem;
  --fs-xl              : 2rem;
  --fs-2xl             : 3rem;
  --fs-3xl             : 4.5rem;

  --fw-regular         : 400;
  --fw-medium          : 500;
  --fw-semibold        : 600;
  --fw-bold            : 700;

  --sp-1               : 0.25rem;
  --sp-2               : 0.5rem;
  --sp-3               : 0.75rem;
  --sp-4               : 1rem;
  --sp-5               : 1.5rem;
  --sp-6               : 2rem;
  --sp-7               : 3rem;
  --sp-8               : 4rem;

  --radius-sm          : 4px;
  --radius-md          : 8px;
  --radius-lg          : 12px;
  --radius-pill        : 999px;

  --shadow-sm          : 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md          : 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-lg          : 0 8px 24px rgba(15, 23, 42, 0.10);

  --container-max      : 1200px;
  --container-padding  : 1.5rem;

  --easing-standard    : cubic-bezier(0.4, 0.0, 0.2, 1);
  --duration-fast      : 150ms;
  --duration-default   : 300ms;
  --duration-slow      : 600ms;
}

/* Reducción de motion respetada para usuarios con prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast            : 0ms;
    --duration-default         : 0ms;
    --duration-slow            : 0ms;
  }
}

/* ===========================================================================
 *  v0.1.12.0+ — Overrides mobile (Fase 1: cimentación responsive).
 *
 *  POLÍTICA: PC (≥769px) no se toca nunca. Las reglas globales arriba
 *  definen el comportamiento desktop, que ya está validado. Estas
 *  media queries SOLO bajan el padding del container y la altura
 *  mínima del mapa cuando el viewport entra en mobile / tablet portrait.
 *
 *  v0.1.12.2: --mapa-stage-min-height extendido a ≤768 (antes solo
 *  ≤480). Renzo reportó "espacio blanco grande abajo" del mapa en
 *  viewports 481-768 — el min-height de 600px seguía vigente ahí. Ahora
 *  baja a 360px en todo mobile/tablet portrait.
 * ===========================================================================*/

@media (max-width: 768px) {
  :root {
    /* 600px → 360px en todo viewport mobile/tablet portrait.
       Combinado con aspect-ratio del .mapa-stage, el contenedor se
       ajusta al SVG sin dejar tanto espacio blanco vertical. */
    --mapa-stage-min-height  : 360px;
  }
}

@media (max-width: 480px) {
  :root {
    /* 24px → 16px: gana espacio horizontal en mobile chico para que el
       contenido no quede pegado a los bordes y respira mejor. */
    --container-padding      : 1rem;
  }
}

/* Reservado: paleta dark mode (Fase 5+, no implementado todavía). */
@media (prefers-color-scheme: dark) {
  /* TODO: paleta Manto Vivo dark variant. */
}