/*! =============================================================================
 *  © 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       : panel-distrito.css
 *  Descripción   : Estilos del panel lateral de detalle del distrito
 *                  seleccionado en el mapa.
 *
 *                  Muestra dos vistas (B3 acordado):
 *                    1. Datos crudos 1V (% sobre votos válidos totales,
 *                       incluyendo otros candidatos)
 *                    2. Emulación 2V (Keiko vs Sánchez normalizado al 100%)
 *                  Ambas con 3 decimales.
 *
 *  Autor         : Renzo Núñez · RonBStudio
 *  Versión       : 0.1.5.1
 * ===========================================================================*/


/* ---------------------------------------------------------------------------
 *  PANEL — contenedor general
 * -------------------------------------------------------------------------*/

.panel-distrito {
  background: var(--c-mv-bg-card);
  border: 1px solid var(--c-mv-border-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  font-family: var(--font-sans);
  color: var(--c-mv-ink);
  min-height: 400px;
}

.panel-distrito--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--c-mv-ink-soft);
  font-size: var(--fs-sm);
  font-style: italic;
  min-height: 400px;
}


/* ---------------------------------------------------------------------------
 *  HEADER — distrito + provincia + departamento
 * -------------------------------------------------------------------------*/

.panel-distrito__header {
  border-bottom: 1px solid var(--c-mv-border-soft);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.panel-distrito__location {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-mv-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--sp-2);
}

.panel-distrito__name {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  color: var(--c-mv-ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.panel-distrito__ubigeo {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-mv-ink-soft);
  margin-top: var(--sp-2);
}


/* ---------------------------------------------------------------------------
 *  WINNER BADGE — quién gana en el distrito (sección destacada)
 * -------------------------------------------------------------------------*/

.panel-distrito__winner {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-5);
  background: var(--c-mv-bg-warm);
}

.panel-distrito__winner--keiko { border-left: 4px solid var(--c-party-fp); }
.panel-distrito__winner--pedro { border-left: 4px solid var(--c-party-ap); }
.panel-distrito__winner--empate { border-left: 4px solid var(--c-mapa-empate); }
.panel-distrito__winner--nodata { border-left: 4px solid var(--c-mapa-sin-data); }

.panel-distrito__winner-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--c-mv-ink-soft);
}

.panel-distrito__winner-name {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  color: var(--c-mv-ink);
}

.panel-distrito__winner-margin {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--c-mv-ink-muted);
}


/* ---------------------------------------------------------------------------
 *  SECCIÓN — bloque con título + datos
 * -------------------------------------------------------------------------*/

.panel-distrito__section {
  margin-bottom: var(--sp-5);
}

.panel-distrito__section:last-child {
  margin-bottom: 0;
}

.panel-distrito__section-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--c-mv-ink-soft);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px dotted var(--c-mv-border-soft);
}

.panel-distrito__section-caption {
  font-size: var(--fs-xs);
  color: var(--c-mv-ink-soft);
  font-style: italic;
  margin-top: var(--sp-3);
  line-height: 1.5;
}


/* ---------------------------------------------------------------------------
 *  CANDIDATE ROW — fila con candidato, %, votos, barra
 * -------------------------------------------------------------------------*/

.panel-distrito__candidate {
  margin-bottom: var(--sp-3);
}

.panel-distrito__candidate-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.panel-distrito__candidate-name {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
}

.panel-distrito__candidate-pct {
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
}

.panel-distrito__candidate--keiko .panel-distrito__candidate-pct { color: var(--c-party-fp-dark); }
.panel-distrito__candidate--pedro .panel-distrito__candidate-pct { color: var(--c-party-ap-dark); }

.panel-distrito__candidate-bar {
  height: 8px;
  background: var(--c-mv-border-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.panel-distrito__candidate-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width var(--duration-default) var(--easing-standard);
}

.panel-distrito__candidate--keiko .panel-distrito__candidate-fill { background: var(--c-party-fp); }
.panel-distrito__candidate--pedro .panel-distrito__candidate-fill { background: var(--c-party-ap); }

.panel-distrito__candidate-votes {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-mv-ink-soft);
  margin-top: var(--sp-1);
  font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------------------------
 *  STATS — bloque de cifras totales
 * -------------------------------------------------------------------------*/

.panel-distrito__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.panel-distrito__stat {
  background: var(--c-mv-bg-warm);
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
}

.panel-distrito__stat-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-mv-ink-soft);
  margin-bottom: var(--sp-1);
}

.panel-distrito__stat-value {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-mv-ink);
  font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------------------------
 *  CLOSE BUTTON
 * -------------------------------------------------------------------------*/

.panel-distrito__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  background: transparent;
  border: 1px solid var(--c-mv-border-soft);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: var(--fs-base);
  line-height: 1;
  color: var(--c-mv-ink-soft);
  transition: background var(--duration-fast) var(--easing-standard),
              color var(--duration-fast) var(--easing-standard);
}

.panel-distrito__close:hover {
  background: var(--c-mv-ink);
  color: var(--c-mv-ink-on-accent);
  border-color: var(--c-mv-ink);
}

.panel-distrito {
  position: relative;
}


/* ---------------------------------------------------------------------------
 *  FOOTNOTE — nota sobre datos sintéticos
 * -------------------------------------------------------------------------*/

.panel-distrito__footnote {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-mv-ink-soft);
  text-align: center;
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px dotted var(--c-mv-border-soft);
  font-style: italic;
}

/* ---------------------------------------------------------------------------
 *  LIVE SECTION — datos en vivo desde el Worker (v0.1.15.0)
 * -------------------------------------------------------------------------*/

/* Variante de section dedicada a los datos live. Acentúa el bloque con un
   borde izquierdo verde + un fondo suave, para que el usuario lo distinga
   de las vistas históricas/simuladas que vienen abajo. */
.panel-distrito__section--live {
  border-left: 3px solid var(--c-tabla-validos);
  padding-left: var(--sp-3);
  background: rgba(21, 114, 45, 0.04);
  border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
}

/* Pill "LIVE" — verde institucional, pequeño, junto al título. */
.panel-distrito__live-pill {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 0.1em 0.55em;
  border-radius: var(--radius-pill, 9px);
  background: var(--c-tabla-validos);
  color: var(--c-mv-bg-card);
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

/* Nota de telemetría dentro del footnote (solo visible con DEBUG=true). */
.panel-distrito__telemetry {
  opacity: 0.65;
  font-size: 0.85em;
}