/** * ═══════════════════════════════════════════════════════════════════ * PERÚ ELIGE 2026 · Tokens de diseño (v4) * ─────────────────────────────────────────────────────────────────── * Autor : Renzo Núñez Berdejo * Versión : v4.0.0-beta.6 * Última mod. : 2026-04-18 * Descripción : Variables CSS compartidas por todo el v4. * Cambiar algo acá impacta de forma coherente. * Regla de oro : NINGÚN color, rgba, gradiente o sombra debe vivir * fuera de este archivo. Si falta, se agrega acá. * * IMPORTANTE : Las variables están scoped dentro de `.v4-scope` * en vez de `:root`. Así convivimos en el mismo DOM * con la v3 estable (que también usa --bg-card, * --border, --tx1, etc. pero con valores distintos). * Solo el contenido envuelto en .v4-scope hereda * estos valores; el resto del sitio ve los del v3. * ═══════════════════════════════════════════════════════════════════ */ .v4-scope { /* ─── Paleta base ──────────────────────────────────────────── */ --bg-0: #0B0D12; /* Fondo absoluto de la app */ --bg-1: #11141B; /* Fondo secundario / hero */ --bg-card: #161A23; /* Superficies de tarjetas */ --bg-card-hi: #1C2130; /* Superficies elevadas (hover) */ --border: #232836; /* Bordes sutiles */ --border-hi: #2E3548; /* Bordes con más contraste */ --tx1: #F2F5FA; /* Texto principal */ --tx2: #BEC3D1; /* Texto secundario */ --tx3: #7C8294; /* Texto terciario / metadata */ --tx-dim: #4A4F5E; /* Texto deshabilitado */ /* ─── Acento y estados ─────────────────────────────────────── */ --accent: #4A90D9; /* Azul principal */ --accent-hi: #6AA7E6; /* Hover del acento */ --success: #3BD48C; /* Verde de confirmación */ --warning: #E8943A; /* Naranja de advertencia */ --danger: #E04848; /* Rojo de error */ /* ─── Overlays y efectos (alpha variants) ──────────────────── */ /* Se nombran por intención, no por color crudo. Si cambia el color base, las variantes se actualizan en un solo lugar. */ /* Brillos y hairlines blancos */ --hairline-white: rgba(255, 255, 255, 0.08); /* Borde sutil blanco */ --hover-bg-subtle: rgba(255, 255, 255, 0.02); /* Hover muy tenue */ /* Acento (azul) con diversos niveles de opacidad */ --accent-wash: rgba(74, 144, 217, 0.06); /* Sweep / overlay */ --accent-pulse: rgba(74, 144, 217, 0.15); /* Halo de foco */ --accent-glow: rgba(74, 144, 217, 0.25); /* Sombra luminosa */ --accent-shine: rgba(74, 144, 217, 0.50); /* Borde glow fuerte */ /* Estados BETA — mezcla naranja + rojo */ --beta-bg-from: rgba(232, 148, 58, 0.18); /* Gradiente inicio */ --beta-bg-to: rgba(224, 72, 72, 0.18); /* Gradiente fin */ --beta-border: rgba(232, 148, 58, 0.40); /* Borde del badge */ --beta-notice-wash: rgba(232, 148, 58, 0.08); /* Banner BETA */ --beta-notice-border: rgba(232, 148, 58, 0.25); /* Borde del banner */ /* ─── Bandera peruana ──────────────────────────────────────── */ --peru-red: #D91023; --peru-white: #FFFFFF; /* ─── Interacción de bancada (Fase 3b.5) ───────────────────── */ /* Cuando el usuario selecciona una bancada en el hemiciclo: - El resto de bancadas se atenúan a esta opacidad. - Los estados de valla dentro del panel de detalle usan variantes suaves/fuertes del verde y el naranja. */ --bancada-atenuada-opacity: 0.22; --bancada-panel-highlight-width: 3px; /* Badge "pasa valla" (tokens semánticos, mismo patrón que beta-*) */ --valla-pasa-wash: rgba( 59, 212, 140, 0.12); --valla-pasa-border: rgba( 59, 212, 140, 0.30); /* Badge "no pasa valla" */ --valla-nopasa-wash: rgba(232, 148, 58, 0.12); --valla-nopasa-border: rgba(232, 148, 58, 0.30); /* ─── Paleta de partidos políticos ─────────────────────────── */ /* Solo los que pasan valla. Cada uno con color principal + versión tenue para fondos (ej: filas de tabla, legends). */ --party-k: #F28C28; /* Fuerza Popular */ --party-k-soft: rgba(242, 140, 40, 0.15); --party-jp: #3BD48C; /* Juntos por el Perú */ --party-jp-soft: rgba( 59, 212, 140, 0.15); --party-rp: #2B6CB0; /* Renovación Popular */ --party-rp-soft: rgba( 43, 108, 176, 0.15); --party-bg: #E8C43A; /* Buen Gobierno */ --party-bg-soft: rgba(232, 196, 58, 0.15); --party-obr: #2F7D32; /* Obras */ --party-obr-soft: rgba( 47, 125, 50, 0.15); --party-an: #9B59B6; /* Ahora Nación */ --party-an-soft: rgba(155, 89, 182, 0.15); --party-other: #7C8294; /* Otros / no pasan */ --party-other-soft: rgba(124, 130, 148, 0.15); /* ─── Tipografía ───────────────────────────────────────────── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'DM Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace; /* ─── Espaciado (escala 4 px) ──────────────────────────────── */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ─── Radios ───────────────────────────────────────────────── */ --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* ─── Sombras ──────────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 24px var(--accent-glow); /* ─── Transiciones ─────────────────────────────────────────── */ --t-fast: 120ms ease; --t-base: 200ms ease; --t-slow: 400ms ease; /* ─── Layout ───────────────────────────────────────────────── */ --max-w: 1280px; --header-h: 72px; --tabs-h: 56px; /* ─── Z-index ──────────────────────────────────────────────── */ --z-header: 100; --z-overlay: 500; --z-modal: 900; --z-toast: 1000; } /* ─── Reducir movimiento si el usuario lo prefiere ─────────── */ @media (prefers-reduced-motion: reduce) { .v4-scope { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; } } /* ═══════════════════════════════════════════════════════════════ FASE 3b.7 · PALETA ADICIONAL PARA STAT-BOXES + TITULARES ─────────────────────────────────────────────────────────────── Variantes de acento para las 4 métricas que rodean al hemiciclo. Cada métrica toma un color distinto → el ojo las lee como unidades independientes y no como una grilla monótona. También un púrpura adicional porque la paleta base no lo tenía. ═══════════════════════════════════════════════════════════════ */ .v4-scope { /* Púrpura para la cuarta métrica (Iteraciones / Votos) */ --metric-purple: #9B6DD9; --metric-purple-wash: rgba(155, 109, 217, 0.12); --metric-purple-glow: rgba(155, 109, 217, 0.35); /* Tokens semánticos por tipo de métrica. Las stat-boxes leen estos via selector: box1 → --metric-accent: var(--accent) (azul) box2 → --metric-accent: var(--success) (verde) box3 → --metric-accent: var(--warning) (naranja) box4 → --metric-accent: var(--metric-purple) */ --title-underline-from: var(--accent); --title-underline-to: var(--accent-hi); /* Superficie de las stat-boxes con gradiente sutil en profundidad */ --stat-box-bg: linear-gradient( 160deg, var(--bg-card-hi) 0%, var(--bg-card) 60%, var(--bg-0) 100% ); /* ═════════════════════════════════════════════════════════ IDEOLOGÍA (v3.12.27) — Colores para la barra de poder del congreso (izquierda rojo · centro verde · derecha azul). Tonos oscurecidos/desaturados a propósito: deben verse como "bloques ideológicos", no competir visualmente con los colores de los partidos individuales (FP naranja, JP rojo, RP azul, etc.). Se acompañan de versiones con glow y background translúcido. ═══════════════════════════════════════════════════════════ */ --c-ideo-izq: #CF3A3A; /* Rojo oscuro, distinto del JP */ --c-ideo-izq-bg: rgba(207, 58, 58, 0.18); --c-ideo-izq-glow: rgba(207, 58, 58, 0.45); /* v4.0.6 — Centro izquierda, fucsia vibrante. Bien distinguible del rojo (izq) y del carmesí del AN (#C9184A). */ --c-ideo-centro-izq: #D63384; --c-ideo-centro-izq-bg: rgba(214, 51, 132, 0.18); --c-ideo-centro-izq-glow: rgba(214, 51, 132, 0.45); --c-ideo-centro: #2E9E6E; /* Verde azulado, distinto del PBG */ --c-ideo-centro-bg: rgba(46, 158, 110, 0.18); --c-ideo-centro-glow:rgba(46, 158, 110, 0.45); --c-ideo-der: #2B6FC4; /* Azul oscuro, distinto del RP */ --c-ideo-der-bg: rgba(43, 111, 196, 0.18); --c-ideo-der-glow: rgba(43, 111, 196, 0.45); }