/*! =============================================================================
 *  © 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       : progreso-onpe.css
 *  Descripción   : Indicador del % de avance del conteo oficial ONPE.
 *
 *                  v0.1.6.11 — Cambios:
 *
 *                  (A) Gradiente FIJO POSICIONAL.
 *                      Cada X% del bar tiene color fijo de la paleta de
 *                      llama. La barra es como un termómetro:
 *                        base = tenue, medio = amarillo, punta = rojo.
 *                      No cambia de color globalmente con el avance.
 *
 *                      Truco técnico: el background del fill es un
 *                      linear-gradient con `background-size` igual al
 *                      ANCHO TOTAL del bar (no del fill). Como el fill
 *                      empieza en left:0 del bar y tiene background-position
 *                      en 0 0, su contenido visible es la porción
 *                      izquierda del gradiente equivalente a su width.
 *                      Cuando el fill mide 60%, se ven los primeros 60%
 *                      del gradiente. Cuando llega a 100%, se ve completo.
 *
 *                  (B) PULSE en cada refresh.
 *                      El delta típico de un refresh es +0.5..+4.5%, en
 *                      una barra de 140px eso son 0.7..6.3px de crecimiento.
 *                      Demasiado sutil para ser "evidente". Por eso ahora
 *                      cada setPct posterior al boot dispara la clase
 *                      is-pulsing temporalmente, que aplica:
 *                        · Latido (scale 1 → 1.18 → 1) sobre el %
 *                        · Flash de glow extendido sobre el fill
 *                      Esto comunica "se actualizó" sin importar el delta.
 *
 *  Convenciones BEM. Cero hex (la paleta vive en custom properties locales
 *  con prefijo --flame-stop-*). Cero magic numbers fuera de constantes.
 *
 *  Autor         : Renzo Núñez · RonBStudio
 *  Versión       : 0.1.6.11
 * ===========================================================================*/

/* ===========================================================================
 *  Constantes locales del componente
 * =========================================================================*/

.progreso-onpe {
  --po-bar-width:    140px;
  --po-bar-height:   8px;
  --po-head-size:    14px;

  /* Stops de la paleta de llama. Posiciones FIJAS a lo largo del ancho
     total del bar — el fill solo revela su porción izquierda mientras
     crece. Importante: el stop al 38% (blanco azulado) es el puente
     entre el azul (20%) y el amarillo (55%) — sin él, la interpolación
     RGB pasaría por verde-grisáceo, que es feo. */
  --flame-stop-0:   rgb( 60,  60,  70);   /* tenue */
  --flame-stop-20:  rgb( 60, 130, 240);   /* azul */
  --flame-stop-38:  rgb(200, 220, 255);   /* blanco azulado (puente) */
  --flame-stop-55:  rgb(255, 220,  80);   /* amarillo */
  --flame-stop-75:  rgb(255, 140,  50);   /* naranja */
  --flame-stop-100: rgb(225,  60,  35);   /* rojo */

  /* Color del frente actual (cabeza brillante + glow del fill durante la
     animación). El JS lo calcula interpolando entre los stops según el
     % actual, así coincide exactamente con el color del gradiente del
     fill en ese punto. */
  --flame-color:        var(--flame-stop-0);
  --flame-color-bright: rgb(146, 146, 153);

  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-mv-bg-card);
  border: 1px solid var(--c-mv-border-soft);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-mv-ink-soft);
}

/* ---------- Label "CONTEO ONPE" ---------- */

.progreso-onpe__label {
  white-space: nowrap;
}

/* ---------- Track (fondo gris suave) ---------- */

.progreso-onpe__bar {
  position: relative;
  width:  var(--po-bar-width);
  height: var(--po-bar-height);
  background: var(--c-mv-border-soft);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.10);
  overflow: visible;
}

/* ---------- Fill animado con gradiente FIJO POSICIONAL ---------- */

.progreso-onpe__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;                                  /* JS anima el width */
  border-radius: var(--radius-pill);
  /* Gradiente con stops alineados a las posiciones de la paleta. */
  background: linear-gradient(
    90deg,
    var(--flame-stop-0)     0%,
    var(--flame-stop-20)   20%,
    var(--flame-stop-38)   38%,
    var(--flame-stop-55)   55%,
    var(--flame-stop-75)   75%,
    var(--flame-stop-100) 100%
  );
  /* CLAVE: el background-size es el ancho TOTAL del bar, no del fill.
     Así el gradiente queda anclado en coordenadas absolutas del bar y
     el fill solo "revela" su porción izquierda al crecer. */
  background-size: var(--po-bar-width) 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  /* overflow hidden para que el shimmer no escape del border-radius. */
  overflow: hidden;
  transition: box-shadow 250ms ease-out;
}

/* ---------- Shimmer interno ----------
   Replicado del race-bar-shimmer del race header — franja blanca
   translúcida que atraviesa el fill cada ~3s. Limpio, sutil, vivo. */
.progreso-onpe__fill::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.32) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: progreso-shimmer 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes progreso-shimmer {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(400%);  }
  100% { transform: translateX(400%);  }
}

/* ---------- Cabeza brillante ---------- */

.progreso-onpe__head {
  position: absolute;
  top: 50%;
  left: 0%;
  width:  var(--po-head-size);
  height: var(--po-head-size);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* Foco brillante: blanco al centro fundiéndose al color de llama
     EN EL PUNTO ACTUAL (que el JS calcula y coincide con el color del
     gradiente del fill en esa posición). */
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.95) 0%,
    var(--flame-color-bright) 35%,
    transparent 70%
  );
  box-shadow: 0 0 10px var(--flame-color);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease-out, box-shadow 250ms ease-out;
}
.progreso-onpe.is-animating .progreso-onpe__head,
.progreso-onpe:not(.is-slamming) .progreso-onpe__head {
  opacity: 1;
}

/* ---------- Glow extendido durante la animación de crecimiento ---------- */

.progreso-onpe.is-animating .progreso-onpe__fill {
  box-shadow:
    0 0 8px var(--flame-color),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

/* ---------- Texto del % ---------- */

.progreso-onpe__pct {
  font-weight: var(--fw-semibold);
  color: var(--c-mv-ink);
  font-variant-numeric: tabular-nums;
  min-width: 5.5em;
  text-align: left;
  display: inline-block;
  transform-origin: left center;
}

/* ---------- Animación SLAM (al cargar inicial) ---------- */

.progreso-onpe.is-slamming .progreso-onpe__pct {
  animation: progreso-slam 750ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes progreso-slam {
  0% {
    transform: scale(2.2);
    opacity: 0;
    filter: blur(8px);
    letter-spacing: 0.12em;
  }
  60% {
    transform: scale(1.06);
    opacity: 1;
    filter: blur(0);
    letter-spacing: -0.02em;
  }
  80% { transform: scale(0.97); }
  100% {
    transform: scale(1);
    letter-spacing: 0;
  }
}

/* ---------- Animación PULSE (en cada refresh) ----------
   v0.1.6.11. Más sutil que el slam — el slam es la ENTRADA inicial
   dramática (0% → target con scale 2.2). El pulse es para los refreshes
   sucesivos: latido del % + flash del glow, sin opacity ni blur (el
   componente ya está visible y no queremos borrarlo). */

.progreso-onpe.is-pulsing .progreso-onpe__pct {
  animation: progreso-pulse 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.progreso-onpe.is-pulsing .progreso-onpe__fill {
  animation: progreso-fill-flash 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes progreso-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@keyframes progreso-fill-flash {
  0% {
    box-shadow:
      0 0 8px var(--flame-color),
      inset 0 1px 0 rgba(255, 255, 255, 0.30);
  }
  40% {
    /* Glow extendido temporario + highlight interno más fuerte. */
    box-shadow:
      0 0 18px var(--flame-color),
      0 0 6px  var(--flame-color),
      inset 0 1px 0 rgba(255, 255, 255, 0.55);
  }
  100% {
    box-shadow:
      0 0 8px var(--flame-color),
      inset 0 1px 0 rgba(255, 255, 255, 0.30);
  }
}

/* ===========================================================================
 *  Accesibilidad: prefers-reduced-motion
 * =========================================================================*/

@media (prefers-reduced-motion: reduce) {
  .progreso-onpe.is-slamming .progreso-onpe__pct,
  .progreso-onpe.is-pulsing  .progreso-onpe__pct,
  .progreso-onpe.is-pulsing  .progreso-onpe__fill {
    animation: none;
  }
  .progreso-onpe__fill::before {
    animation: none;
  }
  .progreso-onpe.is-animating .progreso-onpe__fill {
    box-shadow: none;
  }
}

/* ===========================================================================
 *  Responsive
 * =========================================================================*/

@media (max-width: 768px) {
  /* v0.1.13.2: extendido de 480 a 768 + barra más delgada. Renzo:
     "La barra de conteo ONPE MUCHO más delgada". 8px → 3px. */
  .progreso-onpe {
    --po-bar-width:  100px;
    --po-bar-height: 3px;
    --po-head-size:  10px;
  }
  .progreso-onpe__pct {
    min-width: 5em;
    font-size: 9px;
  }
}