/**
* ═══════════════════════════════════════════════════════════════════
* PERÚ ELIGE 2026 · Cámaras CSS (v4)
* ───────────────────────────────────────────────────────────────────
* Autor : Renzo Núñez Berdejo
* Versión : v4.0.0-beta.6
* Última mod. : 2026-04-18
* Descripción : Estilos de la vista Cámaras. Tres secciones
* (Senado, Diputados, Parlamento Andino), cada una
* con un hemiciclo SVG, caja de stats y tabla de
* tracker de valla (las dos cámaras principales).
*
* TODO el color/espaciado/tipografía proviene de
* tokens.css — este archivo solo orquesta layout.
*
* Dependencias : tokens.css, base.css.
* ═══════════════════════════════════════════════════════════════════
*/
/* ═══════════════════════════════════════════════════════════════
WRAPPER Y STATUS BAR
═══════════════════════════════════════════════════════════════ */
.v4-camaras-wrapper {
max-width: var(--max-w);
margin: 0 auto;
padding: var(--sp-6) var(--sp-5);
}
.v4-camaras-intro {
text-align: center;
margin-bottom: var(--sp-8);
}
.v4-camaras-intro__kicker {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent);
font-family: var(--font-mono);
margin-bottom: var(--sp-3);
}
.v4-camaras-intro__title {
font-size: 32px;
letter-spacing: -0.8px;
margin: 0 0 var(--sp-3);
color: var(--tx1);
}
.v4-camaras-intro__subtitle {
font-size: 14px;
color: var(--tx3);
max-width: 680px;
margin: 0 auto;
line-height: 1.6;
}
/* ─── Status bar (mensaje de carga / hora / error) ────────── */
.v4-status {
font-family: var(--font-mono);
font-size: 12px;
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
gap: var(--sp-2);
margin: 0 auto var(--sp-6);
background: var(--bg-card);
border: 1px solid var(--border);
color: var(--tx2);
text-align: center;
transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}
.v4-status-wrap {
display: flex;
justify-content: center;
margin-bottom: var(--sp-6);
}
.v4-status-info { color: var(--tx2); }
.v4-status-loading {
color: var(--accent);
border-color: var(--accent-pulse);
background: linear-gradient(90deg, var(--bg-card), var(--accent-wash), var(--bg-card));
background-size: 200% 100%;
animation: v4StatusShimmer 1.8s ease-in-out infinite;
}
.v4-status-ok {
color: var(--success);
border-color: rgba(59, 212, 140, 0.30);
}
.v4-status-err {
color: var(--danger);
border-color: rgba(224, 72, 72, 0.40);
background: rgba(224, 72, 72, 0.06);
}
@keyframes v4StatusShimmer {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
/* ═══════════════════════════════════════════════════════════════
SECCIONES (Senado, Diputados, Andino)
═══════════════════════════════════════════════════════════════ */
.v4-camaras-seccion {
background: linear-gradient(
180deg,
var(--bg-card) 0%,
var(--bg-card-hi) 100%
);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--sp-6) var(--sp-5);
margin-bottom: var(--sp-6);
position: relative;
overflow: hidden;
box-shadow: var(--shadow);
transition: border-color var(--t-base), transform var(--t-base);
}
.v4-camaras-seccion:hover {
border-color: var(--border-hi);
}
/* Acento superior de cada sección: gradiente horizontal con el azul
de marca. Sirve de "indicador" visual del inicio de la tarjeta. */
.v4-camaras-seccion::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background: linear-gradient(
90deg,
transparent 0%,
var(--accent) 20%,
var(--accent-hi) 50%,
var(--accent) 80%,
transparent 100%
);
opacity: 0.7;
z-index: 2;
}
/* Fondo radial sutil centrado arriba: da profundidad al hemiciclo
simulando una iluminación cenital, sin distraer del contenido.
Muy baja opacidad (~6%) para no competir con los datos. */
.v4-camaras-seccion::after {
content: '';
position: absolute;
top: -40%;
left: 50%;
transform: translateX(-50%);
width: 90%;
height: 180%;
background: radial-gradient(
ellipse at center top,
rgba(96, 139, 224, 0.07) 0%,
rgba(96, 139, 224, 0.03) 35%,
transparent 65%
);
pointer-events: none;
z-index: 0;
}
/* Todos los hijos directos quedan ENCIMA del fondo radial */
.v4-camaras-seccion > * {
position: relative;
z-index: 1;
}
.v4-camaras-titulo-seccion {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-4);
margin-bottom: var(--sp-5);
flex-wrap: wrap;
/* Línea decorativa debajo del header — gradient que tira del color
de la cámara (Senado azul, Diputados verde, Andino púrpura vía
modifiers .v4-camaras-seccion--X). */
padding-bottom: var(--sp-3);
border-bottom: 1px solid var(--border);
position: relative;
}
.v4-camaras-titulo-seccion::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 80px;
height: 2px;
background: linear-gradient(
90deg,
var(--title-accent, var(--accent)) 0%,
transparent 100%
);
border-radius: 2px;
}
.v4-camaras-seccion--senado { --title-accent: var(--accent); }
.v4-camaras-seccion--diputados { --title-accent: var(--success); }
.v4-camaras-seccion--andino { --title-accent: var(--metric-purple); }
.v4-camaras-titulo-seccion__main {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.4px;
color: var(--tx1);
margin: 0;
/* El número de escaños se destaca con gradiente de color. Como el
número va DENTRO del mezclado con el texto, usamos un span
que el HTML agregaría (si no está, se queda liso).
Para evitar tocar markup, aplicamos un color acento al '·' separador
usando ::first-line no sirve porque flex. Mejor: aplicar el acento
como subtle underline al título completo vía box-shadow. */
text-shadow: 0 0 24px var(--title-accent, transparent);
}
.v4-camaras-titulo-seccion__sub {
font-size: 12px;
color: var(--tx2);
font-family: var(--font-mono);
padding: 4px 10px;
background: var(--bg-0);
border: 1px solid var(--border);
border-radius: var(--radius-full);
letter-spacing: 0.3px;
}
/* ═════════════ v4.0.12 · BANNER DE HINT INTERACTIVO ═════════════
Banner sutil debajo del header de la card, antes del hemiciclo.
Le dice al user que las bancadas y el espectro político son
clicables. Diseño:
· Borde sutil + background tenue (no compite con el hemiciclo)
· SVG de mano/dedo (NO emoji) para consistencia cross-platform
· Animación de "tap" cada 2.4 s con ondas concéntricas
· Fade-in al cargar para que no golpee al user
· Mobile: se compacta, mantiene icon + texto alineados
──────────────────────────────────────────────────────────────── */
.v4-explore-hint {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: var(--sp-4) auto var(--sp-2);
padding: 10px 18px;
max-width: fit-content;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.03),
rgba(255, 255, 255, 0.06),
rgba(255, 255, 255, 0.03)
);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-full, 999px);
font-size: 13px;
color: var(--tx2);
line-height: 1.4;
animation: v4HintFadeIn 600ms ease-out 400ms backwards;
}
.v4-explore-hint strong {
color: var(--tx1);
font-weight: 600;
}
.v4-explore-hint__icon {
flex-shrink: 0;
width: 22px;
height: 22px;
fill: none;
stroke: var(--accent, #66b5ff);
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
/* Animación del tap: un pequeño "tap down" pulsante */
transform-origin: 50% 75%;
animation: v4HintTap 2400ms ease-in-out infinite;
}
/* Keyframe del tap: simula la mano presionando y volviendo */
@keyframes v4HintTap {
0%, 60%, 100% { transform: translateY(0) scale(1); }
20% { transform: translateY(2px) scale(0.94); }
30% { transform: translateY(-1px) scale(1.02); }
40% { transform: translateY(0) scale(1); }
}
/* Ondas de "ripple" que acompañan el tap — pequeñas líneas que
aparecen y se desvanecen sincronizadas con el tap down */
.v4-explore-hint__ripple {
opacity: 0;
stroke: var(--accent, #66b5ff);
stroke-width: 1.4;
animation: v4HintRipple 2400ms ease-in-out infinite;
}
.v4-explore-hint__ripple--1 { animation-delay: 0ms; }
.v4-explore-hint__ripple--2 { animation-delay: 80ms; }
.v4-explore-hint__ripple--3 { animation-delay: 160ms; }
@keyframes v4HintRipple {
0%, 15% { opacity: 0; }
20% { opacity: 0.9; }
45%, 100% { opacity: 0; }
}
@keyframes v4HintFadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.v4-explore-hint,
.v4-explore-hint__icon,
.v4-explore-hint__ripple {
animation: none !important;
}
.v4-explore-hint__ripple { opacity: 0.6; }
}
@media (max-width: 640px) {
.v4-explore-hint {
margin: var(--sp-3) auto var(--sp-1);
padding: 8px 14px;
font-size: 12px;
gap: 8px;
/* Que el hint se ajuste bien si el texto es largo */
max-width: calc(100% - var(--sp-4));
text-align: center;
}
.v4-explore-hint__icon {
width: 18px;
height: 18px;
}
}
/* ─── Grid del hemiciclo + stats laterales ──────────────────── */
.v4-camaras-layout {
display: grid;
grid-template-columns: 1fr 200px;
gap: var(--sp-5);
align-items: center;
}
@media (max-width: 720px) {
.v4-camaras-layout {
grid-template-columns: 1fr;
}
}
/* Contenedor del SVG del hemiciclo */
.v4-hemiciclo-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
.v4-hemiciclo-svg {
display: block;
width: 100%;
height: auto;
max-height: 340px;
}
/* ─── Asientos tipo teatro + Baseline ─────────────────────── */
/*
Estructura del DOM:
// drop-shadow compartido
// gradiente 3D por color
// fade-out en los extremos
// piso decorativo del hemiciclo
// reflejo superior (3D)
*/
.v4-asiento__respaldo,
.v4-asiento__cojin {
transition: fill var(--t-base);
}
/* Hairline blanco del cojín para despegar colores oscuros del fondo */
.v4-asiento__cojin {
stroke: rgba(255, 255, 255, 0.08);
stroke-width: 0.4;
}
/* Brillo superior del cojín: no reacciona a eventos (es decorativo) */
.v4-asiento__brillo {
pointer-events: none;
}
/* Baseline del hemiciclo (piso): ya lleva gradient inline vía ,
acá solo opacity y animación de entrada. */
.v4-hemiciclo-baseline {
opacity: 1;
}
/* Al activar la animación dominó, la baseline aparece gradualmente
desde la mitad (cuando ya cayeron los primeros asientos centrales). */
.v4-hemiciclo-svg--animar .v4-hemiciclo-baseline {
animation: v4BaselineFadeIn 600ms ease-out 200ms backwards;
}
@keyframes v4BaselineFadeIn {
0% { opacity: 0; transform: scaleX(0); }
100% { opacity: 1; transform: scaleX(1); }
}
.v4-hemiciclo-baseline { transform-origin: center; transform-box: fill-box; }
/* ─── Animación "slam" por bancada en el primer render (v4.0.1) ─────
Reemplaza al dominó por-asiento. Cada cae
entero desde arriba con scale asimétrico (stretch al caer, squish
al impactar) y un leve rebote. Efecto más dramático y orgánico. */
.v4-hemiciclo-partido {
transform-origin: center;
transform-box: fill-box;
}
.v4-hemiciclo-svg--animar .v4-hemiciclo-partido {
animation: v4BancadaSlam 700ms cubic-bezier(0.25, 0.7, 0.35, 1.2) both;
/* --v4-party-order lo inyecta camaras.js (asignarOrdenBancadas) */
animation-delay: calc(var(--v4-party-order, 0) * 220ms);
}
/* Asientos individuales ya NO se animan en la entrada.
Se mantiene transform-box/origin para el heartbeat futuro. */
.v4-asiento-wrap {
transform-origin: center;
transform-box: fill-box;
}
@keyframes v4BancadaSlam {
0% {
opacity: 0;
transform: translateY(-120px) scale(1, 1.08);
filter: blur(1.5px);
}
45% {
opacity: 1;
transform: translateY(-6px) scale(1, 1.04);
filter: blur(0);
}
60% {
/* Impacto con squish horizontal */
opacity: 1;
transform: translateY(3px) scale(1.08, 0.88);
}
78% {
/* Rebote corto */
transform: translateY(-2px) scale(0.98, 1.03);
}
100% {
opacity: 1;
transform: translateY(0) scale(1, 1);
}
}
@media (prefers-reduced-motion: reduce) {
.v4-hemiciclo-svg--animar .v4-hemiciclo-partido,
.v4-hemiciclo-svg--animar .v4-hemiciclo-baseline {
animation: none;
}
}
/* ═══════════════ v4.0.10 · MODO BLOQUE (ALTO RELIEVE) ═══════════════
Cuando el usuario hace click en un segmento de la barra de poder,
el SVG del hemiciclo recibe:
· clase `v4-hemiciclo-svg--bloque-activo`
· atributo `data-bloque-activo=""`
Efecto:
· Todas las bancadas se atenúan (opacity + saturation).
· Las bancadas que matchean con el bloque activo (via data-bloque
en cada ) se "elevan" con translateY +
drop-shadow fuerte → sensación de alto relieve.
· Transiciones suaves (400 ms cubic-bezier) para que el cambio
se sienta orgánico.
El heartbeat se pausa mientras el modo está activo (controlado
desde JS) para no competir con el relieve.
───────────────────────────────────────────────────────────────── */
/* Todas las bancadas cuando hay bloque activo: atenuadas */
.v4-hemiciclo-svg--bloque-activo .v4-hemiciclo-partido {
transition:
transform 400ms cubic-bezier(0.25, 0.8, 0.35, 1.1),
filter 400ms ease,
opacity 400ms ease;
opacity: 0.32;
filter: saturate(0.45) brightness(0.78);
}
/* Bancada cuyo bloque coincide con el activo: salta con bounce y
queda en alto relieve. v4.0.11 — ahora es animación one-shot con
bounce (antes era transform estático). La keyframe termina con
translateY(-8px) + scale(1.02) y animation-fill-mode: forwards
deja la bancada "posada" en ese estado hasta que el modo se
desactive. */
.v4-hemiciclo-svg--bloque-activo[data-bloque-activo="izq"] .v4-hemiciclo-partido[data-bloque="izq"],
.v4-hemiciclo-svg--bloque-activo[data-bloque-activo="centro-izq"] .v4-hemiciclo-partido[data-bloque="centro-izq"],
.v4-hemiciclo-svg--bloque-activo[data-bloque-activo="centro"] .v4-hemiciclo-partido[data-bloque="centro"],
.v4-hemiciclo-svg--bloque-activo[data-bloque-activo="der"] .v4-hemiciclo-partido[data-bloque="der"] {
opacity: 1;
filter: saturate(1.2) brightness(1.12)
drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55))
drop-shadow(0 3px 6px rgba(255, 255, 255, 0.1));
animation: v4BancadaSalto 650ms cubic-bezier(0.2, 1.2, 0.35, 1) forwards;
transform-origin: center;
transform-box: fill-box;
/* Sin transition en transform porque la animation lo maneja; transition
se queda para filter/opacity, que sí se benefician de suavizado. */
transition:
filter 400ms ease,
opacity 400ms ease;
}
/* Keyframe del salto: sube fuerte al principio, baja al estado de
reposo con un pequeño rebote. Después se queda elevado gracias a
animation-fill-mode: forwards. */
@keyframes v4BancadaSalto {
0% { transform: translateY(0) scale(1, 1); }
28% { transform: translateY(-18px) scale(1.05, 1.05); } /* pico del salto */
50% { transform: translateY(-3px) scale(0.98, 1.02); } /* aterrizaje con leve aplastamiento */
70% { transform: translateY(-11px) scale(1.02, 1.01); } /* rebote corto */
100% { transform: translateY(-8px) scale(1.02, 1.02); } /* reposo final (alto relieve) */
}
@media (prefers-reduced-motion: reduce) {
.v4-hemiciclo-svg--bloque-activo .v4-hemiciclo-partido {
transition: none;
animation: none !important;
transform: none !important;
}
}
/* ─── Hover sobre bancada: glow, sin opacar las demás ──────── */
/*
En lugar de atenuar el resto (confuso), RESALTAMOS la bancada
bajo el cursor con un leve levantado + glow que usa la variable
--v4-party-color si está disponible. El resto queda igual.
*/
.v4-hemiciclo-partido {
cursor: pointer;
transition: transform var(--t-base), filter var(--t-base), opacity var(--t-base);
transform-origin: center;
transform-box: fill-box;
}
@media (hover: hover) {
.v4-hemiciclo-partido:hover {
/* Leve levantado + sombra sutil. Sin tocar opacidad de otras. */
filter: drop-shadow(0 3px 8px rgba(255, 255, 255, 0.15));
}
.v4-hemiciclo-partido:hover .v4-asiento {
transition: transform var(--t-fast);
}
}
/* Foco visible por teclado (accesibilidad). El outline real queda en
los cojines del asiento, así es siempre visible sobre el fondo. */
.v4-hemiciclo-partido:focus { outline: none; }
.v4-hemiciclo-partido:focus-visible .v4-asiento__cojin {
stroke: var(--accent);
stroke-width: 1.2;
}
/* ─── Fase 3b.5: Selección de bancada (atenuación del resto) ──
Cuando el SVG lleva la clase `--con-seleccion`, todas las
bancadas bajan a opacidad reducida excepto la seleccionada
(`--seleccionada`), que queda a 1 y con un drop-shadow suave. */
.v4-hemiciclo-svg--con-seleccion .v4-hemiciclo-partido {
opacity: var(--bancada-atenuada-opacity);
}
.v4-hemiciclo-svg--con-seleccion .v4-hemiciclo-partido--seleccionada {
opacity: 1;
filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.18));
}
/* ═══════════════════════════════════════════════════════════════
FASE 3b.5 · PANEL DE DETALLE DE BANCADA
Se muestra debajo del hemiciclo al hacer click sobre una bancada.
Estructura del DOM (lo pinta camaras.js):
Partido X
...
✕
4 ×
═══════════════════════════════════════════════════════════════ */
.v4-bancada-detalle {
/* Visibilidad controlada por data-activo (JS la alterna) */
display: none;
margin-top: var(--sp-5);
padding: var(--sp-3) var(--sp-4);
background: linear-gradient(
180deg,
var(--bg-card-hi) 0%,
var(--bg-card) 100%
);
border: 1px solid var(--border);
/* Borde izquierdo con el color del partido seleccionado.
camaras.js inyecta --v4-party-color vía style.setProperty. */
border-left: var(--bancada-panel-highlight-width) solid
var(--v4-party-color, var(--accent));
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.v4-bancada-detalle[data-activo="true"] {
display: block;
animation: v4BancadaSlideDown 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes v4BancadaSlideDown {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.v4-bancada-detalle[data-activo="true"] { animation: none; }
}
/* Header: swatch + nombre + badge de valla + cerrar */
.v4-bancada-detalle__header {
display: flex;
align-items: center;
gap: var(--sp-3);
margin-bottom: var(--sp-2);
flex-wrap: wrap;
}
.v4-bancada-detalle__swatch {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--v4-party-color, var(--tx-dim));
box-shadow: 0 0 0 1px var(--hairline-white);
flex-shrink: 0;
}
.v4-bancada-detalle__nombre {
font-size: 18px;
font-weight: 700;
color: var(--tx1);
letter-spacing: -0.2px;
margin: 0;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.v4-bancada-detalle__cerrar {
background: transparent;
border: 1px solid var(--border);
color: var(--tx3);
font-size: 14px;
width: 32px;
height: 32px;
border-radius: var(--radius-full);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--t-fast),
color var(--t-fast),
border-color var(--t-fast);
font-family: inherit;
flex-shrink: 0;
}
.v4-bancada-detalle__cerrar:hover,
.v4-bancada-detalle__cerrar:focus-visible {
color: var(--tx1);
background: var(--hover-bg-subtle);
border-color: var(--border-hi);
outline: none;
}
/* Badge: ¿pasa / no pasa la valla? */
.v4-bancada-valla-badge {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: 2px var(--sp-3);
border-radius: var(--radius-full);
font-size: 11px;
font-weight: 600;
font-family: var(--font-mono);
letter-spacing: 0.3px;
border: 1px solid transparent;
}
.v4-bancada-valla-badge[data-estado="pasa"] {
color: var(--success);
background: var(--valla-pasa-wash);
border-color: var(--valla-pasa-border);
}
.v4-bancada-valla-badge[data-estado="no-pasa"] {
color: var(--warning);
background: var(--valla-nopasa-wash);
border-color: var(--valla-nopasa-border);
}
/* v4.0.31 — Badge "En el límite": el partido pasó ambos gates pero por
el mínimo EXACTO de escaños. Se distingue del verde cómodo de "pasa"
y del gris/naranja de "no-pasa" con un amarillo más saturado para
que el usuario perciba "cuidado: borderline". */
.v4-bancada-valla-badge[data-estado="limite"] {
color: var(--warning);
background: var(--valla-nopasa-wash);
border-color: var(--warning);
cursor: help;
}
/* Parlamento Andino no aplica valla bicameral → ocultamos el badge */
.v4-bancada-detalle--andino .v4-bancada-valla-badge {
display: none;
}
/* 4 métricas en grilla (2 columnas en mobile) */
/* v4.0.38 — Métricas en barra estilo power-bar: fondo, borde,
padding horizontal. Single-line (no wrap). Compacta. */
.v4-bancada-detalle__metricas {
display: flex;
flex-wrap: nowrap;
align-items: baseline;
gap: 0;
padding: 6px var(--sp-3);
background: var(--bg-0);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
-ms-overflow-style: none;
scrollbar-width: none;
}
.v4-bancada-detalle__metricas::-webkit-scrollbar { display: none; }
@media (max-width: 600px) {
.v4-bancada-detalle__metricas {
padding: 5px var(--sp-2);
}
}
.v4-bancada-metrica {
position: relative;
overflow: visible;
padding: 0;
background: none;
border: none;
border-left: none;
border-radius: 0;
text-align: left;
transition: none;
display: inline-flex;
align-items: baseline;
gap: 4px;
flex-shrink: 0;
}
/* Eliminar halos radiales */
.v4-bancada-metrica::before,
.v4-bancada-metrica::after {
display: none;
}
/* Separador · entre items (excepto el primero) */
.v4-bancada-metrica + .v4-bancada-metrica::marker { content: ''; }
.v4-bancada-metrica:not(:first-child)::before {
content: '·';
display: inline;
position: static;
color: var(--tx3);
font-size: 14px;
font-weight: 700;
margin: 0 8px;
background: none;
border-radius: 0;
inset: auto;
pointer-events: none;
opacity: 1;
z-index: auto;
}
.v4-bancada-metrica:hover {
border-color: transparent;
transform: none;
box-shadow: none;
background: none;
}
.v4-bancada-metrica:hover::after { opacity: 0; }
/* Variantes por posición — mantienen colores pero solo en texto */
.v4-bancada-detalle__metricas .v4-bancada-metrica:nth-child(1) {
--metric-accent: var(--accent);
}
.v4-bancada-detalle__metricas .v4-bancada-metrica:nth-child(2) {
--metric-accent: var(--success);
}
.v4-bancada-detalle__metricas .v4-bancada-metrica:nth-child(3) {
--metric-accent: var(--warning);
}
.v4-bancada-detalle__metricas .v4-bancada-metrica:nth-child(4) {
--metric-accent: var(--metric-purple);
}
.v4-bancada-metrica__valor {
font-size: 10px;
font-weight: 700;
/* Color sólido, sin gradiente */
background: none;
-webkit-background-clip: unset;
background-clip: unset;
-webkit-text-fill-color: unset;
color: var(--metric-accent, var(--accent));
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
letter-spacing: -0.3px;
line-height: 1;
}
.v4-bancada-metrica__label {
font-size: 9px;
color: var(--tx3);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
margin-top: 0;
opacity: 0.85;
}
/* ─── Stats laterales al hemiciclo ─────────────────────────── */
.v4-camaras-stats {
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
@media (max-width: 720px) {
.v4-camaras-stats {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
}
.v4-stat-box {
/* Fondo con gradiente de profundidad en lugar de color plano */
background: var(--stat-box-bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-4) var(--sp-4);
text-align: center;
min-width: 120px;
transition: border-color var(--t-base),
transform var(--t-base),
box-shadow var(--t-base);
position: relative;
overflow: hidden;
/* Barra lateral izquierda con el color de acento — da identidad
visual a cada box. El color se override en cada :nth-child. */
border-left: 3px solid var(--metric-accent, var(--accent));
}
/* Halo de color de fondo, debajo del contenido. Muy sutil (~10 % alpha)
— pinta la box con su color sin exagerar. */
.v4-stat-box::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at 20% 0%,
var(--metric-wash, var(--accent-wash)) 0%,
transparent 55%
);
pointer-events: none;
z-index: 0;
}
/* Halo de reflejo inferior (el que ya tenía el diseño original) */
.v4-stat-box::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
circle at 50% 120%,
var(--metric-glow, var(--accent-wash)) 0%,
transparent 60%
);
opacity: 0;
transition: opacity var(--t-base);
pointer-events: none;
z-index: 0;
}
.v4-stat-box > * { position: relative; z-index: 1; }
.v4-stat-box:hover {
border-color: var(--border-hi);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35),
0 0 0 1px var(--metric-accent, var(--accent)) inset;
}
.v4-stat-box:hover::after { opacity: 0.7; }
/* ── Variantes por posición ──
La primera stat-box (Escaños) queda con el default azul.
Las siguientes toman verde, naranja, púrpura. */
.v4-camaras-stats .v4-stat-box:nth-child(1) {
--metric-accent: var(--accent);
--metric-wash: rgba(74, 144, 217, 0.10);
--metric-glow: var(--accent-glow);
}
.v4-camaras-stats .v4-stat-box:nth-child(2) {
--metric-accent: var(--success);
--metric-wash: rgba(59, 212, 140, 0.10);
--metric-glow: rgba(59, 212, 140, 0.35);
}
.v4-camaras-stats .v4-stat-box:nth-child(3) {
--metric-accent: var(--warning);
--metric-wash: rgba(232, 148, 58, 0.10);
--metric-glow: rgba(232, 148, 58, 0.35);
}
.v4-camaras-stats .v4-stat-box:nth-child(4) {
--metric-accent: var(--metric-purple);
--metric-wash: var(--metric-purple-wash);
--metric-glow: var(--metric-purple-glow);
}
.v4-stat-num {
font-size: 28px;
font-weight: 700;
/* Número con gradiente del color de acento hacia blanco */
background: linear-gradient(
135deg,
var(--metric-accent, var(--accent)) 0%,
var(--tx1) 85%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-variant-numeric: tabular-nums;
font-family: var(--font-mono);
letter-spacing: -0.5px;
line-height: 1;
}
.v4-stat-lbl {
font-size: 10px;
color: var(--metric-accent, var(--tx3));
text-transform: uppercase;
letter-spacing: 1.4px;
font-weight: 700;
margin-top: var(--sp-2);
opacity: 0.85;
}
/* ═══════════════════════════════════════════════════════════════
TABLA DE TRACKER DE VALLA
═══════════════════════════════════════════════════════════════ */
.v4-tracker-wrap {
margin-top: var(--sp-5);
padding-top: var(--sp-5);
border-top: 1px solid var(--border);
}
.v4-tracker-titulo {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--tx3);
margin-bottom: var(--sp-3);
font-family: var(--font-mono);
}
.v4-tracker-tabla {
width: 100%;
border-collapse: collapse;
font-size: 13px;
/* Layout fijo para que la columna Partido tome el espacio máximo
disponible y las columnas numéricas se ajusten a su contenido. */
table-layout: fixed;
}
/* Columna Partido: flexible / expande */
.v4-tracker-tabla th:nth-child(1),
.v4-tracker-tabla td:nth-child(1) {
width: auto;
min-width: 0;
}
/* Columnas numéricas: ancho fijo, alineadas a la derecha.
v3.12.32 — columna 3 (# escaños) reducida de 80 → 36 px. El
encabezado ahora es "#" y los valores raramente superan 2 dígitos,
así que el ancho mínimo sobra. El espacio liberado se va a la
columna 1 (Partido). */
.v4-tracker-tabla th:nth-child(2),
.v4-tracker-tabla td:nth-child(2) { width: 72px; }
.v4-tracker-tabla th:nth-child(3),
.v4-tracker-tabla td:nth-child(3) { width: 36px; text-align: center; }
.v4-tracker-tabla th:nth-child(4),
.v4-tracker-tabla td:nth-child(4) { width: 88px; }
.v4-tracker-tabla th {
text-align: left;
padding: var(--sp-2) var(--sp-3);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
color: var(--tx3);
border-bottom: 1px solid var(--border);
}
.v4-tracker-tabla th:nth-child(2),
.v4-tracker-tabla th:nth-child(3),
.v4-tracker-tabla th:nth-child(4) {
text-align: right;
}
.v4-tracker-tabla td {
padding: var(--sp-3);
border-bottom: 1px solid var(--border);
font-variant-numeric: tabular-nums;
color: var(--tx2);
}
.v4-tracker-tabla td:nth-child(2),
.v4-tracker-tabla td:nth-child(3),
.v4-tracker-tabla td:nth-child(4) {
text-align: right;
font-family: var(--font-mono);
}
.v4-tracker-tabla tr:last-child td {
border-bottom: none;
}
.v4-tracker-tabla tr:hover td {
background: var(--hover-bg-subtle);
}
/* Columna de partido: swatch de color + nombre completo */
.v4-tracker-partido {
display: flex;
align-items: center;
gap: var(--sp-3);
min-width: 0; /* permite a ellipsis funcionar en hijos */
}
.v4-tracker-swatch {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 0 1px var(--hairline-white);
/* El color se inyecta desde camaras.js como CSS var --v4-swatch-color */
background: var(--v4-swatch-color, var(--tx-dim));
}
.v4-tracker-nombre {
font-weight: 500;
font-size: 13px;
color: var(--tx1);
letter-spacing: 0.1px;
/* Permitir que textos largos se trunquen con elipsis si no caben */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
max-width: 100%;
}
/* ─── Estados de filas según valla ──────────────────────────── */
/* Pasa valla: fondo verdoso sutil + número en verde */
.v4-tracker-tabla tr[data-estado="pasa"] .v4-tracker-estado {
color: var(--success);
font-weight: 600;
}
/* No alcanza mínimo de escaños: advertencia naranja */
.v4-tracker-tabla tr[data-estado="valla-min"] .v4-tracker-estado {
color: var(--warning);
font-size: 11px;
}
.v4-tracker-tabla tr[data-estado="valla-min"] td {
color: var(--tx3);
}
.v4-tracker-tabla tr[data-estado="valla-min"] .v4-tracker-nombre {
color: var(--tx2);
}
/* No pasa el 5%: gris + estado rojo */
.v4-tracker-tabla tr[data-estado="valla-pct"] .v4-tracker-estado {
color: var(--danger);
font-size: 11px;
}
.v4-tracker-tabla tr[data-estado="valla-pct"] td {
color: var(--tx-dim);
}
.v4-tracker-tabla tr[data-estado="valla-pct"] .v4-tracker-nombre {
color: var(--tx3);
}
/* v4.0.31 — Estado "En el límite":
Partidos que pasaron la valla PERO obtuvieron exactamente el mínimo
de escaños requerido (ej. 7/7 en Diputados). Se pintan en el mismo
tono de "precaución" que la valla-min pero más saturado, para
comunicar "pasaron con lo justo, ojo al cómputo final". Mantienen
la visibilidad del partido (color normal del texto), solo la celda
de estado cambia. */
.v4-tracker-tabla tr[data-estado="pasa-limite"] .v4-tracker-estado {
color: var(--warning);
font-weight: 600;
font-size: 11px;
font-variant-numeric: tabular-nums;
}
.v4-tracker-tabla td.v4-tracker-estado[data-pasa="limite"] {
cursor: help;
}
/* v4.0.31 — Pie de metodología bajo la tabla del tracker.
Solo aparece cuando hay partidos "en el límite". Texto pequeño,
color atenuado, sin interrumpir la jerarquía visual de la tabla. */
.v4-tracker-metodologia {
margin: var(--sp-3) 0 0;
padding: var(--sp-3);
font-size: 10px;
line-height: 1.45;
color: var(--tx3);
background: var(--bg-elevated, rgba(0, 0, 0, 0.03));
border-left: 2px solid var(--warning);
border-radius: var(--radius-sm);
}
/* ═══════════════════════════════════════════════════════════
v4.0.31 — LISTA DE CANDIDATOS ELECTOS
Se renderiza dentro del panel de detalle de una bancada, debajo
de las 4 métricas. Agrupa los electos por circunscripción para
que el lector pueda leerlos por región. Sin navegación compleja:
es una lectura vertical densa.
═══════════════════════════════════════════════════════════ */
.v4-electos-wrap {
margin-top: var(--sp-2);
padding-top: var(--sp-2);
border-top: 1px solid var(--border-soft, rgba(0,0,0,0.08));
}
.v4-electos-titulo {
margin: 0 0 var(--sp-2);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--tx2);
}
/* v4.0.33 — Subtítulo de sección (Senado Nacional / Regional) */
.v4-electos-subtitulo {
margin: var(--sp-3) 0 var(--sp-2);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3px;
color: var(--tx2);
opacity: 0.8;
}
.v4-electos-subtitulo:first-child {
margin-top: 0;
}
.v4-electos-loading {
padding: var(--sp-3) 0;
font-size: 12px;
color: var(--tx3);
font-style: italic;
}
.v4-electos-loading--err {
color: var(--danger);
font-style: normal;
}
.v4-electos-vacio {
margin: 0;
padding: var(--sp-2) 0;
font-size: 12px;
color: var(--tx3);
}
.v4-electos-lista {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.v4-electos-grupo {
display: block;
}
.v4-electos-circ {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2px;
color: var(--v4-party-color, var(--tx2));
margin-bottom: var(--sp-2);
padding-bottom: 2px;
border-bottom: 1px dashed var(--border-soft, rgba(0,0,0,0.10));
}
.v4-electos-personas {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.v4-electo-item {
display: grid;
grid-template-columns: 22px 1fr auto;
gap: var(--sp-2);
align-items: baseline;
padding: 4px 0;
font-size: 12px;
line-height: 1.35;
}
.v4-electo-rank {
color: var(--tx3);
font-variant-numeric: tabular-nums;
text-align: right;
font-weight: 500;
}
.v4-electo-nombre {
color: var(--tx1);
font-weight: 500;
overflow-wrap: anywhere;
}
.v4-electo-votos {
color: var(--tx3);
font-size: 10px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
@media (max-width: 480px) {
.v4-electo-item {
grid-template-columns: 18px 1fr;
grid-template-rows: auto auto;
}
.v4-electo-votos {
grid-column: 2;
grid-row: 2;
}
}
/* ═══════════════════════════════════════════════════════════════
VARIANTE ESPECIAL: Parlamento Andino (compacta, sin tracker)
═══════════════════════════════════════════════════════════════ */
.v4-camaras-seccion--andino .v4-hemiciclo-container {
min-height: 140px;
}
.v4-camaras-seccion--andino .v4-hemiciclo-svg {
max-height: 180px;
}
.v4-camaras-seccion--andino .v4-tracker-wrap {
display: none;
}
/* ═══════════════════════════════════════════════════════════════
NOTA DE LA RESOLUCIÓN (crédito JNE)
═══════════════════════════════════════════════════════════════ */
.v4-camaras-footer-note {
text-align: center;
font-size: 11.5px;
color: var(--tx2);
margin-top: var(--sp-6);
padding: var(--sp-4) var(--sp-5);
font-family: var(--font-mono);
line-height: 1.7;
background: linear-gradient(
180deg,
var(--bg-0) 0%,
var(--bg-card) 100%
);
border: 1px solid var(--border);
border-left: 2px solid var(--accent);
border-right: 2px solid var(--accent);
border-radius: var(--radius);
letter-spacing: 0.2px;
position: relative;
}
.v4-camaras-footer-note::before {
content: "i";
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-right: var(--sp-2);
border-radius: 50%;
background: var(--accent);
color: var(--bg-0);
font-family: serif;
font-weight: 700;
font-size: 12px;
font-style: italic;
vertical-align: middle;
}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE: MOBILE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
.v4-camaras-wrapper {
padding: var(--sp-3) var(--sp-2);
}
.v4-camaras-intro__title { font-size: 24px; }
.v4-camaras-intro__subtitle { font-size: 13px; }
.v4-camaras-seccion {
padding: var(--sp-4) var(--sp-2);
}
.v4-camaras-titulo-seccion__main {
font-size: 17px;
}
/* HEMICICLO — v3.12.9: darle TODO el ancho de la pantalla ignorando
el padding de la sección y del wrapper. Se hace con margin-left/right
negativos equivalentes al padding total acumulado (sp-2 + sp-2 = ~16px
por lado), y width calculado para compensar. Así el hemiciclo llega
casi hasta el borde físico del viewport. */
.v4-hemiciclo-container {
min-height: 260px;
margin-left: calc(-1 * var(--sp-2) - var(--sp-2));
margin-right: calc(-1 * var(--sp-2) - var(--sp-2));
width: calc(100% + 2 * var(--sp-2) + 2 * var(--sp-2));
}
.v4-hemiciclo-svg {
max-height: none;
width: 100%;
}
/* Stat-boxes laterales — compactas y en 2x2 */
.v4-camaras-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-2);
}
.v4-stat-box {
min-width: 0;
padding: var(--sp-2) var(--sp-2);
}
.v4-stat-num { font-size: 17px; }
.v4-stat-lbl { font-size: 8.5px; letter-spacing: 1px; margin-top: 2px; }
/* Métricas del panel detalle — inline compacto */
.v4-bancada-metrica {
padding: 0;
}
.v4-bancada-metrica__valor { font-size: 10px; }
.v4-bancada-metrica__label { font-size: 8px; letter-spacing: 0.4px; margin-top: 0; }
/* Flecha del tracker de valla — círculo chico, más discreta */
.v4-tracker-toggle {
padding: var(--sp-3) var(--sp-3);
gap: var(--sp-2);
}
.v4-tracker-toggle__icon {
width: 36px;
height: 36px;
}
.v4-tracker-toggle__icon svg {
width: 18px;
height: 18px;
}
.v4-tracker-toggle__hint {
font-size: 10.5px;
letter-spacing: 0.25px;
}
.v4-tracker-collapsible[data-abierto="true"] .v4-tracker-toggle__hint::before {
font-size: 10.5px;
}
.v4-tracker-tabla th:nth-child(3),
.v4-tracker-tabla td:nth-child(3) {
/* v3.12.13 — antes se ocultaba la columna Escaños en mobile para
ahorrar espacio. Ahora se muestra (el usuario la pidió), con
font-size reducido para caber. */
font-size: 11px;
font-weight: 700;
}
}
/* Mobile chico (< 380 px) — máxima compactación */
@media (max-width: 380px) {
.v4-camaras-wrapper {
padding: var(--sp-3) 4px;
}
.v4-camaras-seccion {
padding: var(--sp-4) 6px;
}
.v4-hemiciclo-container {
margin-left: -10px;
margin-right: -10px;
width: calc(100% + 20px);
}
.v4-stat-num { font-size: 15px; }
.v4-bancada-metrica__valor { font-size: 9px; }
.v4-stat-lbl { font-size: 8px; }
.v4-bancada-metrica__label { font-size: 7px; }
.v4-tracker-toggle__icon {
width: 32px;
height: 32px;
}
.v4-tracker-toggle__icon svg {
width: 16px;
height: 16px;
}
}
/* ═══════════════════════════════════════════════════════════════
FASE 3b.6 · TRACKER DE VALLA COLAPSABLE + HEARTBEAT BANCADAS
Dos features nuevas en v3.12:
1. El tracker de valla (Senado/Diputados) arranca colapsado con un
botón grande y obvio que invita a expandir.
2. Al terminar la animación "dominó" de entrada, cada bancada
late secuencialmente de derecha a izquierda para sugerir su
clickabilidad. Ese heartbeat se apaga al primer click o después
de un ciclo completo.
═══════════════════════════════════════════════════════════════ */
/* ─── Tracker colapsable ──────────────────────────────────────
Estructura (v3.12.4 — simplificada):
▼ (56px, centrada)
Toca para ver detalle...
...
Cambios vs v3.12.3:
· Se removió `__label` ("Tracker de valla · Senado/Diputados").
· `__icon` ahora es de 56 px con gradiente radial (era 28 px plano).
· Layout vertical centrado (flex-direction: column).
─────────────────────────────────────────────────────────── */
.v4-tracker-collapsible {
margin-top: var(--sp-4);
padding-top: 0;
border-top: none;
}
.v4-tracker-toggle {
/* Botón que ocupa todo el ancho — ES la "puerta" al detalle.
Fase 3b.8: layout vertical centrado (flecha grande al medio,
mensaje debajo). Antes iba con label + hint en fila. */
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-3);
padding: var(--sp-5) var(--sp-4);
/* Gradiente MULTI-STOP animado que da sensación de "líquido fluyendo".
El background-size:300% 100% + keyframes que mueven background-position
crea el efecto de corriente. */
background:
linear-gradient(
90deg,
rgba(74, 144, 217, 0.06) 0%,
rgba(74, 144, 217, 0.18) 25%,
rgba(106, 167, 230, 0.12) 50%,
rgba(74, 144, 217, 0.22) 75%,
rgba(74, 144, 217, 0.06) 100%
);
background-size: 300% 100%;
background-position: 0% 50%;
animation: v4TrackerLiquid 7s linear infinite;
border: 1px solid var(--accent-pulse);
border-radius: var(--radius);
color: var(--tx1);
font-family: inherit;
cursor: pointer;
text-align: center;
transition: border-color var(--t-base), transform var(--t-base);
position: relative;
overflow: hidden;
}
/* Capa superior — "onda" secundaria con dirección opuesta, genera la
sensación de que el líquido se mueve en varias capas. */
.v4-tracker-toggle::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
-90deg,
transparent 0%,
rgba(255, 255, 255, 0.04) 40%,
rgba(255, 255, 255, 0.08) 50%,
rgba(255, 255, 255, 0.04) 60%,
transparent 100%
);
background-size: 200% 100%;
animation: v4TrackerShimmer 5s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
/* Todo el contenido del botón queda por encima de las capas líquidas */
.v4-tracker-toggle > * { position: relative; z-index: 1; }
@keyframes v4TrackerLiquid {
0% { background-position: 0% 50%; }
100% { background-position: 300% 50%; }
}
@keyframes v4TrackerShimmer {
0%, 100% { background-position: -100% 50%; }
50% { background-position: 100% 50%; }
}
.v4-tracker-toggle:hover {
animation-duration: 3.5s;
border-color: var(--accent-shine);
}
.v4-tracker-toggle:active { transform: scale(0.995); }
.v4-tracker-toggle:focus-visible {
outline: 2px solid var(--accent-hi);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.v4-tracker-toggle,
.v4-tracker-toggle::before { animation: none; }
}
/* ─── Flecha grande centrada (Fase 3b.8) ──────────────────────
Es el elemento dominante del botón — debe leerse como "toca
para desplegar" a la primera. Tamaño grande, círculo lleno
con acento y una sombra de profundidad. Al expandir, rota 180°
vía .v4-tracker-collapsible[data-abierto="true"]. */
.v4-tracker-toggle__icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: var(--radius-full);
background: radial-gradient(
circle at 50% 30%,
var(--accent-hi) 0%,
var(--accent) 75%
);
color: #ffffff;
box-shadow:
0 6px 18px var(--accent-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.30);
transition: transform var(--t-base), box-shadow var(--t-base);
/* Micro-rebote para sugerir "clickeable" — se apaga al abrir */
animation: v4TrackerChevronBob 2.4s ease-in-out infinite;
}
.v4-tracker-toggle__icon svg {
width: 30px;
height: 30px;
}
/* Al abrir, la flecha rota 180° y el rebote se apaga */
.v4-tracker-collapsible[data-abierto="true"] .v4-tracker-toggle__icon {
transform: rotate(180deg);
animation: none;
box-shadow:
0 3px 10px var(--accent-pulse),
inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
/* Micro-rebote: 3 px de desplazamiento vertical, suave, bucle largo */
@keyframes v4TrackerChevronBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(3px); }
}
/* Al hover del botón entero, la flecha crece un poco */
.v4-tracker-toggle:hover .v4-tracker-toggle__icon {
transform: scale(1.08);
box-shadow:
0 10px 24px var(--accent-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
animation-duration: 1.2s;
}
.v4-tracker-collapsible[data-abierto="true"] .v4-tracker-toggle:hover .v4-tracker-toggle__icon {
transform: rotate(180deg) scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
.v4-tracker-toggle__icon { animation: none; }
}
.v4-tracker-toggle__text {
/* Sin label principal: solo el hint. Queda más limpio. */
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
min-width: 0;
max-width: 100%;
}
.v4-tracker-toggle__hint {
font-size: 12.5px;
color: var(--accent-hi);
font-family: var(--font-mono);
letter-spacing: 0.4px;
font-weight: 600;
text-transform: uppercase;
}
/* Cuando está abierto, el mensaje cambia a "Toca para ocultar" */
.v4-tracker-collapsible[data-abierto="true"] .v4-tracker-toggle__hint {
font-size: 0; /* oculta el texto original "Toca para ver..." */
}
.v4-tracker-collapsible[data-abierto="true"] .v4-tracker-toggle__hint::before {
content: "Toca para ocultar";
font-size: 12.5px;
color: var(--accent-hi);
}
/* Body del tracker: colapsado por default */
.v4-tracker-body {
display: none;
margin-top: var(--sp-3);
animation: v4TrackerExpand 260ms ease-out;
}
.v4-tracker-collapsible[data-abierto="true"] .v4-tracker-body {
display: block;
}
@keyframes v4TrackerExpand {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.v4-tracker-body { animation: none; }
}
/* ─── Heartbeat secuencial de bancadas ────────────────────────
Tras la animación dominó, cada bancada "late" (scale pulse) en
orden derecha→izquierda, una vez, para comunicar "yo soy clickeable".
Duración total: ~N bancadas × 180ms + 500ms duración del pulso.
Implementación:
· Class .v4-hemiciclo-svg--heartbeat activa el heartbeat.
· Variable --v4-party-order en cada .v4-hemiciclo-partido
(inyectada por camaras.js) determina el timing de cada bancada.
· La animación es no-bloqueante: el click sigue funcionando.
─────────────────────────────────────────────────────────── */
.v4-hemiciclo-svg--heartbeat .v4-hemiciclo-partido {
animation: v4PartidoHeartbeat 600ms cubic-bezier(0.34, 1.2, 0.64, 1) backwards;
animation-delay: calc(var(--v4-party-order, 0) * 160ms);
transform-origin: center;
transform-box: fill-box;
/* CRÍTICO: pointer-events no se bloquea — el click sigue funcionando
aunque la animación esté corriendo. */
pointer-events: auto;
}
@keyframes v4PartidoHeartbeat {
0%, 100% {
transform: scale(1);
filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
}
45% {
transform: scale(1.06);
filter: drop-shadow(0 3px 10px rgba(255, 255, 255, 0.25));
}
}
@media (prefers-reduced-motion: reduce) {
.v4-hemiciclo-svg--heartbeat .v4-hemiciclo-partido { animation: none; }
}
/* ─── Hitbox invisible detrás de cada asiento ─────────────────
Fase 3b.6 — amplía el área clickeable por asiento ~45%, así el
usuario puede clickear en los gaps entre asientos y el click se
registra correctamente al padre. Como el
fill es transparent, no afecta la imagen. */
.v4-asiento__hitbox {
fill: transparent;
stroke: none;
/* El elemento vive SOLO para capturar clicks */
pointer-events: all;
}
/* Durante el heartbeat, asegurarnos de que el hitbox también participa
del transform (escala y sombra). Como ya hereda del
que es hijo del wrap, la animación en las keyframes lo afecta por
cascada — no hace falta declarar nada extra. Se deja esta regla
explícita como "documentación viva" del patrón. */
.v4-hemiciclo-svg--heartbeat .v4-asiento__hitbox {
/* no-op — se mantiene por claridad; el transform viene del ancestro */
pointer-events: all;
}
/* ═══════════════════════════════════════════════════════════════
FASE 3b.10 · v3.12.10
───────────────────────────────────────────────────────────────
1. Stats fusionadas en UNA sola card con grid interno (.v4-stat-card).
2. Leyenda de partidos con escaños debajo del hemiciclo (.v4-leyenda).
3. Color verde al número de escaños en tracker cuando pasa valla.
═══════════════════════════════════════════════════════════════ */
/* ─── UNA card contenedora para las 4 stats ────────────────────
Antes: 4 cards sueltas. Ahora: 1 card grande con grid interno.
Usa el mismo fondo/bordes que .v4-stat-box pero sin el border-left
de color (los border-left ahora viven en cada __item adentro). */
/* v4.0.36 — Stats como barra plana inline, sin cards.
Una sola línea: "13 escaños · 15.15% votos · 1/6 posición · ≥ 3 valla"
!important para pisar cualquier regla previa o de stat-box. */
.v4-stat-card {
background: none !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.v4-stat-card::before,
.v4-stat-card::after { display: none !important; }
.v4-stat-combo {
display: flex !important;
flex-wrap: wrap;
align-items: baseline;
gap: 0;
}
.v4-stat-combo--3 { /* sin override */ }
.v4-stat-combo__item {
position: relative;
padding: 0 !important;
text-align: center;
border-left: none !important;
border: none !important;
background: none !important;
border-radius: 0 !important;
display: inline-flex;
align-items: baseline;
gap: 3px;
}
.v4-stat-combo__item::before {
content: '·';
color: var(--tx3);
font-size: 14px;
font-weight: 700;
margin: 0 6px;
}
.v4-stat-combo__item:first-child::before { display: none; }
.v4-stat-combo__item::after { display: none !important; }
.v4-stat-combo__item:hover { background: none !important; }
.v4-stat-combo .v4-stat-combo__item:nth-child(1) { --item-accent: var(--accent); }
.v4-stat-combo .v4-stat-combo__item:nth-child(2) { --item-accent: var(--success); }
.v4-stat-combo .v4-stat-combo__item:nth-child(3) { --item-accent: var(--warning); }
.v4-stat-combo .v4-stat-combo__item:nth-child(4) { --item-accent: var(--metric-purple); }
.v4-stat-combo__item .v4-stat-num {
background: none !important;
-webkit-background-clip: unset !important;
background-clip: unset !important;
-webkit-text-fill-color: unset !important;
color: var(--item-accent, var(--accent)) !important;
font-variant-numeric: tabular-nums;
font-family: var(--font-mono);
letter-spacing: -0.3px;
line-height: 1;
font-size: 13px !important;
font-weight: 700;
}
.v4-stat-combo__item .v4-stat-lbl {
color: var(--tx3);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
font-size: 8px !important;
margin-top: 0;
opacity: 0.85;
}
/* ═════════════════════════════════════════════════════════════
BARRA DE PODER IDEOLÓGICA (v3.12.27)
Visible debajo del hemiciclo y encima de la leyenda. Resume la
composición del hemiciclo en 3 bloques: izquierda (rojo),
centro (verde), derecha (azul). Cada segmento tiene ancho
proporcional a la cantidad de escaños del bloque.
Estructura esperada (generada por renderPowerBar en camaras.js):
═════════════════════════════════════════════════════════════════ */
.v4-power-bar {
margin-top: var(--sp-5);
padding: var(--sp-3) var(--sp-4);
background: var(--bg-0);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.v4-power-bar:empty {
/* Si aún no hay datos, colapsamos el div para no dejar caja vacía */
display: none;
}
.v4-power-bar__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--sp-2);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--tx2);
}
.v4-power-bar__label {
display: inline-flex;
align-items: center;
gap: 6px;
}
.v4-power-bar__label::before {
content: '';
width: 10px; height: 10px;
border-radius: 50%;
background: currentColor;
}
.v4-power-bar__label.--izq { color: var(--c-ideo-izq); }
.v4-power-bar__label.--centro-izq { color: var(--c-ideo-centro-izq); }
.v4-power-bar__label.--centro { color: var(--c-ideo-centro); }
.v4-power-bar__label.--der { color: var(--c-ideo-der); }
.v4-power-bar__track {
display: flex;
width: 100%;
height: 28px;
border-radius: 8px;
overflow: hidden;
background: var(--bg-0);
box-shadow: inset 0 0 0 1px var(--border);
}
.v4-power-bar__seg {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
color: #fff;
font-weight: 700;
font-size: 13px;
font-feature-settings: "tnum";
letter-spacing: 0.3px;
transition: width 420ms cubic-bezier(0.25, 0.8, 0.35, 1);
overflow: hidden;
white-space: nowrap;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* Si el segmento es demasiado chico para mostrar el texto, lo ocultamos.
El label del header sigue mostrando el número completo. */
.v4-power-bar__seg[data-hide-label="1"] > span {
opacity: 0;
}
.v4-power-bar__seg.--izq {
background: linear-gradient(90deg,
var(--c-ideo-izq) 0%,
color-mix(in oklab, var(--c-ideo-izq) 82%, #000) 100%);
box-shadow: 0 0 12px -3px var(--c-ideo-izq-glow);
}
.v4-power-bar__seg.--centro-izq {
background: linear-gradient(90deg,
var(--c-ideo-centro-izq) 0%,
color-mix(in oklab, var(--c-ideo-centro-izq) 82%, #000) 100%);
box-shadow: 0 0 12px -3px var(--c-ideo-centro-izq-glow);
}
.v4-power-bar__seg.--centro {
background: linear-gradient(90deg,
var(--c-ideo-centro) 0%,
color-mix(in oklab, var(--c-ideo-centro) 82%, #000) 100%);
box-shadow: 0 0 12px -3px var(--c-ideo-centro-glow);
}
.v4-power-bar__seg.--der {
background: linear-gradient(90deg,
var(--c-ideo-der) 0%,
color-mix(in oklab, var(--c-ideo-der) 82%, #000) 100%);
box-shadow: 0 0 12px -3px var(--c-ideo-der-glow);
}
.v4-power-bar__seg.--empty {
/* Bloque sin escaños — lo dejamos invisible (width: 0 lo oculta) */
background: transparent;
}
/* v4.0.12 — Bajada descriptiva debajo del track: "Espectro político".
Tipografía chica, gris sutil, letter-spacing para que se lea como
"etiqueta" académica, no como otro título. */
.v4-power-bar__subtitle {
margin-top: 8px;
font-size: 11px;
font-weight: 500;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--tx3, rgba(255, 255, 255, 0.42));
text-align: center;
font-family: var(--font-mono, monospace);
}
@media (max-width: 640px) {
.v4-power-bar__subtitle {
font-size: 10px;
letter-spacing: 1px;
margin-top: 6px;
}
}
/* ═════════════════ v4.0.8 · INTERACCIÓN CON BANCADA ═════════════════
Cuando el usuario selecciona una bancada, el JS agrega al root de
la barra el atributo data-bloque-activo="".
Efecto visual:
· Todos los segmentos se atenúan (opacidad 0.3 + saturation reducida).
· El segmento del bloque activo vuelve a plena intensidad y se le
suma un glow más fuerte + un leve "abombamiento" interno (transform
scaleY suave).
· Los labels del header siguen la misma lógica.
· Transición de 300 ms para que el cambio se sienta "vivo" y no
brusco.
El atributo desaparece al cerrar el detalle → todo vuelve al estado
normal.
─────────────────────────────────────────────────────────────────── */
/* Transiciones suaves para todos los segmentos y labels */
.v4-power-bar__seg,
.v4-power-bar__label {
transition:
opacity 300ms ease,
filter 300ms ease,
transform 300ms cubic-bezier(0.25, 0.8, 0.35, 1),
box-shadow 300ms ease;
}
/* Cualquier segmento cuando hay un bloque activo: atenuado por default */
.v4-power-bar[data-bloque-activo] .v4-power-bar__seg {
opacity: 0.28;
filter: saturate(0.5) brightness(0.82);
}
/* Cualquier label del header cuando hay un bloque activo: atenuado */
.v4-power-bar[data-bloque-activo] .v4-power-bar__label {
opacity: 0.42;
filter: saturate(0.5);
}
/* El segmento del bloque activo: plena intensidad + glow amplificado
+ leve elevación via box-shadow más grueso. El `z-index: 2` le deja
el glow por encima de los vecinos. */
.v4-power-bar[data-bloque-activo="izq"] .v4-power-bar__seg.--izq,
.v4-power-bar[data-bloque-activo="centro-izq"] .v4-power-bar__seg.--centro-izq,
.v4-power-bar[data-bloque-activo="centro"] .v4-power-bar__seg.--centro,
.v4-power-bar[data-bloque-activo="der"] .v4-power-bar__seg.--der {
opacity: 1;
filter: saturate(1.15) brightness(1.08);
position: relative;
z-index: 2;
}
.v4-power-bar[data-bloque-activo="izq"] .v4-power-bar__seg.--izq {
box-shadow: 0 0 22px -2px var(--c-ideo-izq-glow), inset 0 0 0 2px rgba(255,255,255,0.25);
}
.v4-power-bar[data-bloque-activo="centro-izq"] .v4-power-bar__seg.--centro-izq {
box-shadow: 0 0 22px -2px var(--c-ideo-centro-izq-glow), inset 0 0 0 2px rgba(255,255,255,0.25);
}
.v4-power-bar[data-bloque-activo="centro"] .v4-power-bar__seg.--centro {
box-shadow: 0 0 22px -2px var(--c-ideo-centro-glow), inset 0 0 0 2px rgba(255,255,255,0.25);
}
.v4-power-bar[data-bloque-activo="der"] .v4-power-bar__seg.--der {
box-shadow: 0 0 22px -2px var(--c-ideo-der-glow), inset 0 0 0 2px rgba(255,255,255,0.25);
}
/* Label correspondiente al bloque activo: opacity 1 + peso más fuerte */
.v4-power-bar[data-bloque-activo="izq"] .v4-power-bar__label.--izq,
.v4-power-bar[data-bloque-activo="centro-izq"] .v4-power-bar__label.--centro-izq,
.v4-power-bar[data-bloque-activo="centro"] .v4-power-bar__label.--centro,
.v4-power-bar[data-bloque-activo="der"] .v4-power-bar__label.--der {
opacity: 1;
filter: saturate(1.15);
font-weight: 700;
}
/* Mobile: texto del segmento más chico, header en 2 líneas si hace falta */
@media (max-width: 640px) {
.v4-power-bar {
margin-top: var(--sp-4);
padding: var(--sp-2) var(--sp-3);
}
.v4-power-bar__header {
flex-wrap: wrap;
gap: 4px 10px;
font-size: 10px;
}
.v4-power-bar__track { height: 22px; }
.v4-power-bar__seg { font-size: 12px; }
}
/* ─── Leyenda de partidos con escaños (debajo del hemiciclo) ───
Grid auto-fit con min 140px por item. En desktop típico salen 3–4
columnas; en mobile, 2. Cada item: dot de color + nombre + nº. */
.v4-leyenda {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--sp-2) var(--sp-4);
margin-top: var(--sp-4);
padding: var(--sp-3) var(--sp-4);
background: var(--bg-0);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.v4-leyenda:empty {
display: none; /* Evita que se vea el contenedor vacío */
}
.v4-leyenda-item {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: 12.5px;
color: var(--tx2);
min-width: 0; /* Permite que el nombre se trunque si es muy largo */
}
.v4-leyenda-dot {
flex-shrink: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--v4-leyenda-color, var(--accent));
box-shadow: 0 0 8px var(--v4-leyenda-color, var(--accent));
}
.v4-leyenda-nombre {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--tx2);
}
.v4-leyenda-num {
flex-shrink: 0;
font-weight: 700;
color: var(--tx1);
font-variant-numeric: tabular-nums;
font-family: var(--font-mono);
font-size: 13px;
padding: 1px 6px;
background: var(--bg-card-hi);
border-radius: 4px;
min-width: 28px;
text-align: center;
}
/* ═════════ v4.0.11 · LEYENDA EN MODO BLOQUE ═════════
Cuando la leyenda tiene data-bloque-activo, los items cuyo
data-bloque coincide saltan con bounce y quedan elevados; los
otros se atenúan. Simetría con el hemiciclo. */
/* Transición base para todos los items (usada al salir del modo) */
.v4-leyenda-item {
transition:
opacity 300ms ease,
filter 300ms ease,
transform 300ms ease;
transform-origin: center;
}
/* Items atenuados cuando hay bloque activo (todos por default) */
.v4-leyenda[data-bloque-activo] .v4-leyenda-item {
opacity: 0.32;
filter: saturate(0.4) brightness(0.85);
}
/* Items que matchean el bloque activo: saltan + quedan elevados */
.v4-leyenda[data-bloque-activo="izq"] .v4-leyenda-item[data-bloque="izq"],
.v4-leyenda[data-bloque-activo="centro-izq"] .v4-leyenda-item[data-bloque="centro-izq"],
.v4-leyenda[data-bloque-activo="centro"] .v4-leyenda-item[data-bloque="centro"],
.v4-leyenda[data-bloque-activo="der"] .v4-leyenda-item[data-bloque="der"] {
opacity: 1;
filter: saturate(1.15) brightness(1.08);
animation: v4LeyendaSalto 650ms cubic-bezier(0.2, 1.2, 0.35, 1) forwards;
}
/* Salto de la leyenda: más sutil que el de bancadas (son solo labels
con un dot). Sube ~12 px, rebota, queda en -5 px. */
@keyframes v4LeyendaSalto {
0% { transform: translateY(0) scale(1); }
28% { transform: translateY(-12px) scale(1.08); }
50% { transform: translateY(-2px) scale(1.0); }
70% { transform: translateY(-7px) scale(1.04); }
100% { transform: translateY(-5px) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
.v4-leyenda[data-bloque-activo] .v4-leyenda-item {
transition: none;
animation: none !important;
transform: none !important;
}
}
/* ─── Tracker: número de escaños en verde cuando pasa valla ────
Cuando tdV tiene data-pasa="true" es porque el partido pasó la valla
y el texto ahora es el nº de escaños (no ✓). Lo destacamos en verde. */
.v4-tracker-tabla td.v4-tracker-estado[data-pasa="true"] {
color: var(--success);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* ─── Overrides para mobile de los nuevos componentes ──────────
Las stat-card internas ya tienen tamaños ajustados. La leyenda
se compacta: dots más chicos, items más densos. */
@media (max-width: 640px) {
.v4-stat-card { padding: 0; }
.v4-stat-combo__item .v4-stat-num { font-size: 12px; }
.v4-stat-combo__item .v4-stat-lbl { font-size: 8px; letter-spacing: 0.4px; }
.v4-stat-combo__item::before { margin: 0 5px; font-size: 12px; }
.v4-leyenda {
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
padding: var(--sp-2) var(--sp-3);
gap: var(--sp-1, 4px) var(--sp-3);
}
.v4-leyenda-item { font-size: 11.5px; }
.v4-leyenda-num { font-size: 12px; padding: 1px 5px; min-width: 24px; }
.v4-leyenda-dot { width: 9px; height: 9px; }
}
@media (max-width: 380px) {
.v4-leyenda { grid-template-columns: repeat(2, 1fr); }
.v4-stat-combo__item .v4-stat-num { font-size: 11px; }
}
/* ═══════════════════════════════════════════════════════════════
FASE 3b.11 · v3.12.11 · OVERRIDES MOBILE AGRESIVOS
───────────────────────────────────────────────────────────────
Overrides con mayor especificidad y !important para garantizar que
pisan cualquier regla previa aunque el browser tenga algo cacheado.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
/* Stats inline — sin cards */
.v4-scope .v4-stat-card {
padding: 0 !important;
}
.v4-scope .v4-stat-combo__item {
padding: 0 !important;
}
.v4-scope .v4-stat-combo__item .v4-stat-num {
font-size: 11px !important;
}
.v4-scope .v4-stat-combo__item .v4-stat-lbl {
font-size: 7px !important;
letter-spacing: 0.4px !important;
margin-top: 0 !important;
}
/* Flecha del toggle — definitivamente chica en mobile */
.v4-scope .v4-tracker-toggle {
padding: 12px !important;
gap: 8px !important;
}
.v4-scope .v4-tracker-toggle__icon {
width: 34px !important;
height: 34px !important;
}
.v4-scope .v4-tracker-toggle__icon svg {
width: 17px !important;
height: 17px !important;
}
.v4-scope .v4-tracker-toggle__hint {
font-size: 10px !important;
letter-spacing: 0.2px !important;
}
/* Hemiciclo edge-to-edge agresivo */
.v4-scope .v4-camaras-seccion {
padding: 12px 4px !important;
}
.v4-scope .v4-camaras-wrapper {
padding: 8px 2px !important;
}
.v4-scope .v4-hemiciclo-container {
margin-left: -8px !important;
margin-right: -8px !important;
min-height: 220px !important;
}
.v4-scope .v4-hemiciclo-svg {
max-height: none !important;
width: 100% !important;
}
/* Métricas del panel detalle — inline plano, sin padding */
.v4-scope .v4-bancada-metrica {
padding: 0 !important;
}
.v4-scope .v4-bancada-metrica__valor {
font-size: 10px !important;
}
.v4-scope .v4-bancada-metrica__label {
font-size: 7px !important;
letter-spacing: 0.4px !important;
}
/* Leyenda — compacta de verdad */
.v4-scope .v4-leyenda {
grid-template-columns: repeat(3, 1fr) !important;
gap: 6px 10px !important;
padding: 10px 12px !important;
}
}
@media (max-width: 420px) {
.v4-scope .v4-leyenda {
grid-template-columns: repeat(2, 1fr) !important;
}
}