/*! =============================================================================
 *  © 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       : evolution.css
 *  Descripción   : Gráfico de evolución del conteo (Keiko vs Sánchez).
 *                  Tarjeta con leyenda propia + canvas de Chart.js. Tema claro,
 *                  consistente con el resto del sitio.
 *  Autor         : Renzo Núñez · RonBStudio
 *  Versión       : 0.1.15.39
 * ===========================================================================*/

.evolution-section {
  max-width: var(--container-max, 1100px);
  margin: 0 auto;
  padding: var(--sp-3, 0.75rem) var(--container-padding, 1rem) var(--sp-5, 1.5rem);
}

.evo {
  max-width: 980px;
  margin: 0 auto;
  /* v0.1.15.43: mismo fondo en degradé (foco radial indigo top-left) que el
     card del mapa y el panel de detalle, para verse igual de profesional. */
  background:
    radial-gradient(
      ellipse at top left,
      var(--c-mv-mapa-radial-from) 0%,
      var(--c-mv-mapa-radial-mid)  60%,
      transparent 100%
    ),
    var(--c-mv-bg-card, #ffffff);
  border: 1px solid var(--c-mv-card-border, #e2e8f0);
  border-radius: var(--c-card-radius, 16px);
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: var(--c-card-shadow, 0 1px 3px rgba(15, 23, 42, 0.06));
}

.evo__head { text-align: center; margin-bottom: 1rem; }

.evo__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--c-mv-card-title, #2c5599);
  margin: 0 0 0.25rem;
}

.evo__sub {
  font-size: 0.85rem;
  color: var(--c-mv-ink-muted, #64748b);
  margin: 0;
}

/* --- Leyenda propia --- */
.evo__legend {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.evo__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-mv-ink, #1e293b);
}
.evo__legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
}
/* v0.1.16: swatch de la línea "peso 900K" — un guion (barra corta) en vez de
   punto, para señalar que es una línea punteada de eje secundario. */
.evo__legend-dot--dash {
  width: 16px;
  height: 3px;
  border-radius: 1px;
}

/* --- Canvas --- */
.evo__canvas-wrap {
  position: relative;
  width: 100%;
  height: 340px;
}
.evo__canvas { width: 100%; height: 100%; }

/* --- Nota al pie --- */
.evo__note {
  text-align: center;
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  color: var(--c-mv-ink-muted, #64748b);
  min-height: 1.2em;
}
.evo__note--preview { font-style: italic; }
.evo__note--error { color: var(--c-party-ap, #c8302a); }

/* --- Badge "logro desbloqueado": Keiko Ganadora (dentro del gráfico) --- */
.evo__achv {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
}
.evo__achv-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.9rem 0.4rem 0.62rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 1.5px solid #f59e0b;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.28), 0 0 0 3px rgba(245, 158, 11, 0.12);
  overflow: hidden;
}
.evo__achv-photo {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f59e0b;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.evo__achv-txt { display: flex; flex-direction: column; line-height: 1.12; text-align: left; }
.evo__achv-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fbbf24;
}
.evo__achv-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.92rem; font-weight: 800; color: #ffffff; letter-spacing: 0.01em;
}
/* brillo que cruza al desbloquear */
.evo__achv-shine {
  position: absolute; top: 0; left: -45%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: skewX(-18deg);
  opacity: 0;
}
/* aparición tipo "logro desbloqueado" */
.evo__achv.is-unlocked { animation: evoAchvPop 0.6s cubic-bezier(0.22, 1.2, 0.36, 1) both; }
.evo__achv.is-unlocked .evo__achv-card { animation: evoAchvGlow 2.4s ease-in-out 0.7s infinite; }
.evo__achv.is-unlocked .evo__achv-shine { animation: evoAchvShine 0.9s ease 0.28s 1; }
.evo__achv.is-unlocked .evo__achv-photo { animation: evoAchvPhoto 0.7s ease 0.2s 1; }
@keyframes evoAchvPop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-9px) scale(0.78); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.07); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes evoAchvShine {
  0%   { left: -45%; opacity: 0; }
  20%  { opacity: 1; }
  100% { left: 125%; opacity: 0; }
}
@keyframes evoAchvPhoto {
  0%   { transform: scale(0.55); opacity: 0; }
  60%  { transform: scale(1.14); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes evoAchvGlow {
  0%, 100% { box-shadow: 0 6px 20px rgba(15, 23, 42, 0.28), 0 0 0 3px rgba(245, 158, 11, 0.12); }
  50%      { box-shadow: 0 6px 24px rgba(15, 23, 42, 0.32), 0 0 0 4px rgba(245, 158, 11, 0.24); }
}

/* --- Responsive --- */
@media (max-width: 560px) {
  .evo { padding: 1.5rem 1rem 1.25rem; }
  .evo__title { font-size: 1.15rem; }
  .evo__canvas-wrap { height: 280px; }
  .evo__legend { gap: 1rem; }
  .evo__achv { top: 6px; }
  .evo__achv-card { padding: 0.3rem 0.6rem 0.3rem 0.4rem; gap: 0.45rem; }
  .evo__achv-photo { width: 28px; height: 28px; }
  .evo__achv-title { font-size: 0.8rem; }
  .evo__achv-eyebrow { font-size: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .evo__canvas { /* Chart.js animation disabled via JS options when needed */ }
  .evo__achv.is-unlocked,
  .evo__achv.is-unlocked .evo__achv-card,
  .evo__achv.is-unlocked .evo__achv-shine,
  .evo__achv.is-unlocked .evo__achv-photo { animation: none; }
}