/*! =============================================================================
 *  © 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       : nav-detail.css
 *  Descripción   : Panel detalle de zona del modo Navegar. Vive en el aside
 *                  derecho de la fila del mapa. Estilo editorial sobrio:
 *                  número grande del margen al centro, candidatos arriba
 *                  con sus colores partidarios, meta abajo.
 *
 *                  Convención BEM. Tokens locales referencian tokens.css.
 *                  Cero hex hardcoded.
 *
 *                  v0.1.11.0:
 *                    · Cards meta 2x2 (Padrón / Válidos / Blancos / Nulos)
 *                      eliminadas → reemplazadas por tabla editorial
 *                      con dot markers (verde válidos, rojo terroso nulos).
 *                    · Card cremita del margen eliminada → reemplazada
 *                      por subtítulo inline editorial.
 *                    · border-radius unificado a 14px (--c-card-radius).
 *                    · Sombra premium unificada (--c-card-shadow).
 *                    · Foco radial indigo en el card detalle (coherente
 *                      con el card del mapa).
 *                    · 12 tokens muertos --c-meta-* eliminados de tokens.css.
 *                    · Animación meta-glyph-stamp y prefers-reduced-motion
 *                      asociado eliminados.
 *
 *  Autor         : Renzo Núñez · RonBStudio
 *  Versión       : 0.1.13.16
 * ===========================================================================*/

:root {
  --nav-detail-padding-y     : var(--sp-4);
  --nav-detail-padding-x     : var(--sp-4);
  --nav-detail-gap           : var(--sp-3);

  --nav-detail-color-a       : var(--c-party-fp);
  --nav-detail-color-b       : var(--c-party-ap);
  --nav-detail-color-otros   : var(--c-mv-border-soft);

  --nav-detail-margen-A-alto  : var(--nav-color-a-alto);
  --nav-detail-margen-A-medio : var(--nav-color-a-medio);
  --nav-detail-margen-empate  : var(--nav-color-empate);
  --nav-detail-margen-B-medio : var(--nav-color-b-medio);
  --nav-detail-margen-B-alto  : var(--nav-color-b-alto);
}


/* =============================================================================
 *  Bloque
 * ===========================================================================*/

.nav-detail {
  /* v0.1.9.9: panel elevado con sombra multi-capa para sensación de
     "card flotante" sobre el body azulado.
     v0.1.11.0: bordes más redondeados (14px) y sombra premium unificada
     con el card del mapa (--c-card-shadow). Fondo con foco radial indigo
     top-left para coherencia visual con el card del mapa — los dos cards
     dialogan como pareja, no como elementos disjuntos. */
  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);
  border: 1px solid var(--c-mv-card-border);
  border-radius: var(--c-card-radius);
  padding: var(--nav-detail-padding-y) var(--nav-detail-padding-x);
  box-shadow: var(--c-card-shadow);
  position: relative;
  overflow: hidden;

  font-family: inherit;
  color: var(--c-mv-ink);

  display: flex;
  flex-direction: column;
  gap: var(--nav-detail-gap);
  min-height: 200px;
}


/* Estado sin selección: hint centrado. */
.nav-detail.is-empty {
  align-items: center;
  justify-content: center;
}

.nav-detail__hint {
  color: var(--c-mv-ink-muted);
  font-size: 14px;
  text-align: center;
  font-style: italic;
  margin: 0;
  padding: var(--sp-3);
  max-width: 280px;
}


/* =============================================================================
 *  Header (nombre, nivel, % avance)
 * ===========================================================================*/

.nav-detail__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid var(--c-mv-border-soft);
  padding-bottom: var(--sp-3);
}

/* v0.1.15.21: nombre + nivel ("Huánuco  Departamento") en la MISMA línea. */
.nav-detail__titlerow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
}

.nav-detail__title {
  font-family: var(--ff-serif, Georgia, serif);
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: var(--c-mv-ink);
  line-height: 1.15;
}

.nav-detail__level {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-mv-ink-soft);
}
/* v0.1.15.41 — bullet separador "Nombre • NIVEL" (formato pedido por Renzo). */
.nav-detail__level::before {
  content: '•';
  margin-right: 0.5em;
  color: var(--c-mv-ink-soft);
  font-weight: 400;
  letter-spacing: 0;
}

/* v0.1.15.41 — Chip de avance del conteo. Vive en la fila del título
   ("Ayacucho • DEPARTAMENTO  [al 100.000% computado]"). El color lo inyecta
   JS vía --avance-color según qué tan avanzado va el escrutinio (verde=completo,
   azul=muy avanzado, ámbar=a medias, naranja=arrancando). Neutral a candidatos. */
.nav-detail__avance {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.2em 0.7em 0.2em 0.6em;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--avance-color, var(--c-mv-ink-muted));
  background: color-mix(in srgb, var(--avance-color, #64748b) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--avance-color, #64748b) 30%, transparent);
  font-variant-numeric: tabular-nums;
}
.nav-detail__avance::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--avance-color, #64748b);
}

/* v0.1.15.50 — Etiqueta del filtro 900K activo en el header del panel (para
   que sea coherente con el mapa: "estás viendo SOLO 900K / OTRAS, no el total"). */
.nav-detail__view-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.65em;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #ffffff;
  white-space: nowrap;
}
.nav-detail__view-tag--solo  { background: #1f3a5f; }
.nav-detail__view-tag--otras { background: #94a3b8; }


/* =============================================================================
 *  Body
 * ===========================================================================*/

.nav-detail__body {
  display: flex;
  flex-direction: column;
  gap: var(--nav-detail-gap);
}

.nav-detail__no-data {
  color: var(--c-mv-ink-muted);
  font-size: 13px;
  font-style: italic;
  margin: 0;
}


/* =============================================================================
 *  Mini-versus (v0.1.9.2)
 *
 *  Dos avatares circulares con nombre + partido, separados por "vs" central.
 *  Espejo compacto del race-header principal. La foto se aplica como
 *  background-image leyendo la custom property --photo-url, que el JS
 *  apunta al token --cand-X-photo de tokens.css.
 * ===========================================================================*/

.nav-detail__versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
}

.nav-detail__versus-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.nav-detail__versus-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-image: var(--photo-url);
  background-size: cover;
  background-position: center var(--photo-y, 50%);
  background-repeat: no-repeat;
  border: 3px solid;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.nav-detail__versus-side.is-a .nav-detail__versus-avatar {
  border-color: var(--nav-detail-color-a);
}
.nav-detail__versus-side.is-b .nav-detail__versus-avatar {
  border-color: var(--nav-detail-color-b);
}

.nav-detail__versus-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--c-mv-ink);
  text-align: center;
  line-height: 1.15;
}

.nav-detail__versus-party {
  font-size: 10px;
  color: var(--c-mv-ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}

.nav-detail__versus-vs {
  font-family: var(--ff-serif, Georgia, serif);
  font-style: italic;
  font-size: 18px;
  color: var(--c-mv-ink-soft);
  user-select: none;
}


/* =============================================================================
 *  Barra horizontal de resultados (solo válidos, v0.1.9.2)
 *
 *  A vs B suman 100% (calculados sobre votos válidos). Blancos y nulos
 *  no aparecen acá — son informativos en el meta-bloque abajo.
 *
 *  v0.1.9.4: efecto shimmer + transition cubic-bezier mismo timing
 *  que la barra presidencial del race-header. Coherencia visual entre
 *  ambos componentes.
 * ===========================================================================*/

.nav-detail__bar {
  display: flex;
  position: relative;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--c-mv-border-soft);
  margin-bottom: var(--sp-2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.nav-detail__bar-seg {
  position: relative;
  height: 100%;
  width: var(--w, 0%);
  /* v0.1.9.5: bajado de 800ms a 600ms para que ninguna animación supere
     el segundo. Mismo timing curve que el race-header. */
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-detail__bar-seg--a { background: var(--nav-detail-color-a); }
.nav-detail__bar-seg--b { background: var(--nav-detail-color-b); }

/* Incandescencia interna (gradiente vertical sutil). */
.nav-detail__bar-seg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.08) 40%,
    rgba(0, 0, 0, 0.00) 65%,
    rgba(0, 0, 0, 0.15) 100%
  );
  pointer-events: none;
}

/* Shimmer que pasa cada 4s (offset 2s entre A y B). */
.nav-detail__bar-seg::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: nav-detail-bar-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}
.nav-detail__bar-seg--b::after { animation-delay: 2s; }

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


/* =============================================================================
 *  Filas por candidato — v0.1.10.0
 *
 *  Los dos candidatos viven dentro de un wrapper grid de 2 columnas
 *  (Keiko izq, Roberto der). Cada columna apila el % grande arriba y
 *  los votos chico abajo, alineados al extremo del card padre. El
 *  nombre y partido NO se renderizan acá — son redundantes porque
 *  viven arriba en el mini-versus.
 * ===========================================================================*/

.nav-detail__cand-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
}

.nav-detail__cand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  min-width: 0;
}

.nav-detail__cand.is-a { align-items: flex-start; text-align: left;  }
.nav-detail__cand.is-b { align-items: flex-end;   text-align: right; }

.nav-detail__cand.is-a .nav-detail__cand-pct { color: var(--nav-detail-color-a); }
.nav-detail__cand.is-b .nav-detail__cand-pct { color: var(--nav-detail-color-b); }

.nav-detail__cand-pct {
  font-family: var(--ff-serif, Georgia, serif);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.nav-detail__cand-votos {
  font-size: 12px;
  color: var(--c-mv-ink-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}


/* =============================================================================
 *  Margen inline (v0.1.11.0) — subtítulo editorial sin caja
 *
 *  Reemplaza la card cremita "margen + brecha" del v0.1.9.9 que rompía
 *  el flujo vertical del panel detalle. Ahora es una sola línea editorial
 *  centrada debajo del result block, formato:
 *
 *      Lidera <NOMBRE> por <±X.XXX%> · Brecha: <NN,NNN> votos
 *
 *  El nombre del líder y el porcentaje se pintan con el color del partido
 *  líder vía CSS custom property --lider-color (setada por el JS según
 *  el signo del margen). El resto del texto va en gris-indigo discreto.
 *  Sin caja, sin tinte, sin sombra — solo texto editorial.
 * ===========================================================================*/

.nav-detail__margen-inline {
  text-align: center;
  padding: var(--sp-2) 0 var(--sp-1) 0;
  font-size: 13px;
  color: rgba(31, 58, 95, 0.65);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  /* Default si el JS no setea custom property (caso empate). */
  --lider-color: var(--c-mv-ink);
}

.nav-detail__margen-inline strong {
  color: var(--lider-color);
  font-weight: 600;
}


/* =============================================================================
 *  Tabla editorial (v0.1.11.0) — reemplaza meta-block de cards 2x2
 *
 *  Antes: hero "Participación" + grid 2x2 (Padrón / Válidos / Blancos /
 *         Nulos) con cards de fondo, watermarks glyphs y focos radiales
 *         de 4 colores semánticos distintos. Renzo lo definió como
 *         "muy Claude" — demasiado decorado, fragmenta el sistema cromático.
 *
 *  Ahora: tabla editorial sin cajas, formato DecideChile:
 *         · Hero PARTICIPACIÓN ELECTORAL — label uppercase indigo medio +
 *           valor serif grande indigo + subtítulo ausentismo discreto.
 *         · 4 filas (padron / validos / blancos / nulos) con dot marker
 *           de 8px a la izquierda del label. Cada dot consume el token
 *           --c-tabla-* correspondiente (indigo / verde / indigo desat /
 *           rojo terroso). Sin focos, sin glyphs, sin animaciones.
 *
 *  Markup esperado:
 *    <section class="nav-detail__table-block">
 *      <div class="nav-detail__table-hero">
 *        <div class="nav-detail__table-hero-label">…</div>
 *        <div class="nav-detail__table-hero-vals">
 *          <div class="nav-detail__table-hero-val">…%</div>
 *          <div class="nav-detail__table-hero-sub">…</div>
 *        </div>
 *      </div>
 *      <div class="nav-detail__table-rows">
 *        <div class="nav-detail__table-row" data-kind="padron|validos|blancos|nulos">
 *          <span class="nav-detail__table-row-label">…</span>
 *          <span class="nav-detail__table-row-val">…</span>
 *        </div>
 *        …
 *      </div>
 *    </section>
 * ===========================================================================*/

.nav-detail__table-block {
  display: flex;
  flex-direction: column;
}

/* Hero PARTICIPACIÓN ELECTORAL — el % es la cifra editorial destacada. */
.nav-detail__table-hero {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid rgba(31, 58, 95, 0.10);
}

.nav-detail__table-hero-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(31, 58, 95, 0.70);
  font-weight: 600;
}

.nav-detail__table-hero-val {
  font-family: var(--ff-serif, Georgia, serif);
  font-size: 24px;
  /* v0.1.11.7: color azul indigo institucional (--c-tabla-padron = #1f3a5f),
     el mismo color del botón "Refrescar resultados" del race-header.
     La participación electoral es un dato institucional clave (no
     partidario), conviene pintarlo con el azul institucional fuerte
     para que tenga la jerarquía visual del dato más importante de
     la tabla.
     v0.1.12.1: quitado el bold (600 → 400). El peso del color indigo
     y el tamaño 24px serif ya dan suficiente jerarquía sin necesidad
     del semibold — queda más editorial y respira mejor.
     v0.1.13.11: text-align: right en el wrapper .table-hero-vals para
     que el 78.233% quede alineado a la derecha del card como los demás
     números de la tabla (24,270,000, 6,579,620, etc.). Antes el wrapper
     tenía textAlign:start por defecto y, al ser flex-justify-content
     space-between, el wrapper se posicionaba a la derecha pero su
     CONTENIDO interno quedaba a la izquierda de ese bloque de ~113px,
     dejando el número 78.233% visualmente desalineado con los otros. */
  color: var(--c-tabla-padron);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.nav-detail__table-hero-vals {
  /* v0.1.13.11: pega el valor y el subtítulo a la derecha del card,
     en línea visual con los .nav-detail__table-row-val (24,270,000…). */
  text-align: right;
}

.nav-detail__table-hero-sub {
  display: block;
  text-align: right;
  font-size: 11px;
  color: rgba(31, 58, 95, 0.50);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* Filas de tabla con dot marker. */
.nav-detail__table-rows {
  display: flex;
  flex-direction: column;
}

.nav-detail__table-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(31, 58, 95, 0.06);
}

.nav-detail__table-row:last-child {
  border-bottom: none;
}

.nav-detail__table-row-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(31, 58, 95, 0.75);
}

/* Dot marker de 8px. El color base es indigo; cada data-kind lo sobrescribe. */
.nav-detail__table-row-label::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
  background: var(--c-tabla-padron);
}

.nav-detail__table-row-val {
  font-family: var(--ff-serif, Georgia, serif);
  font-size: 16px;
  color: var(--c-mv-ink);
  /* v0.1.12.1: quitado el bold (600 → 400). Los números ya destacan
     por su color partidario (indigo padrón, verde válidos, rojo nulos)
     y el font serif Georgia 16px. El bold competía con la jerarquía
     visual sin aportar — queda más limpio y editorial sin él. La
     regla específica de Blancos abajo mantiene su 500 (medium) porque
     el color desaturado lo necesita para no perder presencia. */
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* === Variantes por data-kind ===
   Cada fila recibe un atributo data-kind que mapea al token de color
   correspondiente. Padrón = indigo (universo total), Válidos = verde
   institucional (voto efectivo positivo), Blancos = indigo desaturado
   (voto neutro, no alimenta candidato), Nulos = rojo terroso (voto
   descartado negativo). Ningún color partidario aquí — son datos
   institucionales, no partidarios. */
.nav-detail__table-row[data-kind="padron"]  .nav-detail__table-row-label::before { background: var(--c-tabla-padron); }
.nav-detail__table-row[data-kind="validos"] .nav-detail__table-row-label::before { background: var(--c-tabla-validos); }
.nav-detail__table-row[data-kind="blancos"] .nav-detail__table-row-label::before { background: var(--c-tabla-blancos); }
.nav-detail__table-row[data-kind="nulos"]   .nav-detail__table-row-label::before { background: var(--c-tabla-nulos); }

/* v0.1.11.7: número del valor con el MISMO color del dot — refuerza
   visualmente la asociación entre marker y dato. Padrón en indigo
   institucional, Válidos en verde, Nulos en rojo terroso. Blancos
   queda fuera porque tiene su propia regla más abajo (alpha distinto
   por ser dato secundario). */
.nav-detail__table-row[data-kind="padron"]  .nav-detail__table-row-val { color: var(--c-tabla-padron); }
.nav-detail__table-row[data-kind="validos"] .nav-detail__table-row-val { color: var(--c-tabla-validos); }
.nav-detail__table-row[data-kind="nulos"]   .nav-detail__table-row-val { color: var(--c-tabla-nulos); }

/* Blancos: label y número levemente desaturados — son datos secundarios
   al resultado principal (no alimentan a ningún candidato). */
.nav-detail__table-row[data-kind="blancos"] .nav-detail__table-row-label,
.nav-detail__table-row[data-kind="blancos"] .nav-detail__table-row-val {
  color: var(--c-tabla-blancos-texto);
  font-weight: 500;
}


/* =============================================================================
 *  Palpitar avatar del líder (v0.1.9.4)
 * ===========================================================================*/

@keyframes nav-detail-leader-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
  }
  50% {
    transform: scale(1.06);
  }
}

.nav-detail__versus-side.is-leading .nav-detail__versus-avatar {
  animation: nav-detail-leader-pulse 1.6s ease-in-out infinite;
}

.nav-detail__versus-side.is-a.is-leading .nav-detail__versus-avatar {
  box-shadow: 0 0 0 0 var(--c-party-fp-glow);
  animation-name: nav-detail-leader-pulse-a;
}

.nav-detail__versus-side.is-b.is-leading .nav-detail__versus-avatar {
  animation-name: nav-detail-leader-pulse-b;
}

@keyframes nav-detail-leader-pulse-a {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12), 0 0 0 0 var(--c-party-fp-glow);
  }
  50% {
    transform: scale(1.07);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12), 0 0 0 8px rgba(243, 112, 33, 0);
  }
}

@keyframes nav-detail-leader-pulse-b {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12), 0 0 0 0 var(--c-party-ap-glow);
  }
  50% {
    transform: scale(1.07);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12), 0 0 0 8px rgba(200, 48, 42, 0);
  }
}


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

@media (max-width: 768px) {
  .nav-detail { padding: var(--sp-3); }
  .nav-detail__title             { font-size: 14px; }
  .nav-detail__cand-pct          { font-size: 18px; }
  .nav-detail__table-hero-val    { font-size: 20px; }
  .nav-detail__margen-inline     { font-size: 12px; }

  /* ==========================================================================
     v0.1.13.6 — Reordenamiento para mostrar VERSUS COMPACTO en el peek del
     bottom-sheet, ANTES del header de la región.
     
     Pedido de Renzo: "en el edge de abajo... en vez de mostrar 'Lima,
     Distrito, % actas computadas' toca mostrar DIRECTAMENTE el versus
     de Keiko vs Sánchez en una versión más compacta".
     
     Approach: usar flex order para reordenar visualmente sin tocar HTML.
     Estructura final visible en mobile (de arriba a abajo):
        1. Versus (fotos + nombres + partidos)        ← peek visible
        2. Resultado (barra poder + porcentajes)      ← peek visible
        3. Header (Lima · DEPARTAMENTO · % actas)     ← expanded
        4. Margen inline (Lidera X por Y · Brecha N)  ← expanded
        5. Table block (Padrón/Válidos/Blancos/Nulos) ← expanded
     
     El peek visible se sube a 180px (var en mobile-sheet.css) para que
     entren versus + barra + porcentajes en una sola mirada.
     ========================================================================== */
  .nav-detail {
    display: flex;
    flex-direction: column;
  }
  .nav-detail__body {
    order: 1;
    display: flex;
    flex-direction: column;
  }
  /* v0.1.15.20: en el peek móvil el orden es
       NOMBRE de la región(0) → fotos(1) → barra/%(2) → margen(3) → tabla(4).
     El nombre va ARRIBA de todo (incluso de las fotos) y el peek se hace más
     alto (var --sheet-peek-visible) para que entre nombre + fotos + barra. */
  .nav-detail__body > .nav-detail__header        { order: 0; }
  .nav-detail__body > .nav-detail__versus        { order: 1; }
  .nav-detail__body > .nav-detail__result        { order: 2; margin-top: 0; }
  .nav-detail__body > .nav-detail__margen-inline { order: 3; }
  .nav-detail__body > .nav-detail__avance        { order: 4; }  /* % actas: bajo el margen, puede caer fuera del peek */
  .nav-detail__body > .nav-detail__table-block   { order: 5; }
  .nav-detail__body > .nav-detail__comp          { order: 5; }  /* v0.1.15.42: composición = mismo slot que la tabla */

  /* Versus compacto en mobile.
     v0.1.13.12 — Pedido de Renzo:
       · Quitar el nombre del partido en el peek (más espacio).
       · Reducir nombres: 13px → 11px.
       · Aumentar foto: 44px → 56px (+27%).
     CORRECCIÓN: las reglas anteriores usaban clases inexistentes
     `.nav-detail__cand-name` / `.nav-detail__cand-party`. Las clases
     reales del componente son `__versus-name` / `__versus-party`
     (sufijo del bloque BEM, no `cand-*`). Por eso los cambios de
     v0.1.13.6/7 nunca aplicaban al texto del versus. */
  .nav-detail__versus { padding: 0; gap: 0; }
  .nav-detail__versus-avatar,
  .nav-detail__versus-avatar img,
  .nav-detail__versus-avatar svg {
    width: 56px !important;     /* v0.1.13.12: 44 → 56 */
    height: 56px !important;
  }
  .nav-detail__versus-name   { font-size: 11px; }   /* v0.1.13.12: era 13 (regla equivocada) */
  .nav-detail__versus-party  { display: none; }     /* v0.1.13.12: ocultar partido en peek */
  .nav-detail__versus-vs     { font-size: 12px; }

  /* Resultado compacto — sin margen-top con versus, % a 18px. */
  .nav-detail__result { margin: 4px 0 0 0; padding: 0; gap: 4px; }
  .nav-detail__bar    { height: 8px; margin: 0; }
  .nav-detail__cand-row { padding: 0; margin: 0; }

  /* v0.1.13.14 — Pedido de Renzo:
     Centrar "Lidera X por Y" y debajo, en línea separada centrada,
     "Brecha: Z votos". El JS envuelve cada parte en su propio span.
     En mobile las hacemos display: block para que cada una use su
     propia línea, y ocultamos el separador "·" inline (que sí se
     ve en desktop entre los dos spans inline). */
  .nav-detail__margen-inline { text-align: center; }
  /* v0.1.15.20: la línea ahora es corta ("Keiko +X% · Z votos"), así que va
     en UNA sola línea también en móvil (antes "Lidera…/Brecha:" se partía
     en dos para que cupiera). */
  .nav-detail__margen-inline__part-lider,
  .nav-detail__margen-inline__part-brecha { display: inline; }
  .nav-detail__margen-inline__sep { display: inline; }
}


/* prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .nav-detail__bar-seg { transition: none; }
  .nav-detail__bar-seg::after { animation: none; }
  .nav-detail__versus-side.is-leading .nav-detail__versus-avatar {
    animation: none;
  }
  .nav-detail__live-pill { animation: none; }
}


/* =============================================================================
 *  Pill "ONPE en vivo" — v0.1.15.1
 *
 *  Se inserta junto al título de la zona cuando los datos vienen del
 *  Worker (zone._live=true). Indica al usuario de manera no intrusiva
 *  que los números que ve son reales y recién llegados de ONPE, no
 *  simulados. Verde institucional (--c-tabla-validos) para coherencia
 *  con el semáforo general del dashboard.
 * ===========================================================================*/

.nav-detail__live-pill {
  display: inline-flex;
  align-items: center;
  margin-left: var(--sp-2);
  padding: 0.15em 0.55em;
  border-radius: var(--radius-pill, 9px);
  background: var(--c-tabla-validos);
  color: var(--c-mv-bg-card);
  font-family: var(--font-mono);
  font-size: 0.65em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
  /* Punto pulsante a la izquierda ("señal en vivo"). */
  position: relative;
  padding-left: 1.4em;
}

.nav-detail__live-pill::before {
  content: '';
  position: absolute;
  left: 0.5em;
  top: 50%;
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--c-mv-bg-card);
  transform: translateY(-50%);
  animation: nav-detail-live-pulse 1.6s ease-in-out infinite;
}

@keyframes nav-detail-live-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}


/* =============================================================================
 *  Composición del electorado — v0.1.15.42 (anillo elegido v0.1.15.44)
 *
 *  Inscritos · Participación · Válidos · Blancos+Nulos · No votan, derivados
 *  del snapshot sin requests extra. Diseño: anillo (donut) de participación +
 *  mini-stats. Colores NEUTRALES a los candidatos:
 *    válidos = verde · blancos+nulos = ámbar · no votaron = pizarra ·
 *    inscritos = tinta.
 * ===========================================================================*/

.nav-detail__comp {
  --comp-validos: #16a34a;   /* verde institucional */
  --comp-byn:     #eab308;   /* amarillo — neutral a candidatos (no naranja/rojo) */
  --comp-novota:  #94a3b8;   /* pizarra */
  --comp-padron:  #475569;   /* tinta */
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-mv-border-soft, #eef0f3);
}

/* color del punto por tipo */
.nav-detail__comp-row[data-kind="validos"] .nav-detail__comp-dot { background: var(--comp-validos); }
.nav-detail__comp-row[data-kind="byn"]     .nav-detail__comp-dot { background: var(--comp-byn); }
.nav-detail__comp-row[data-kind="novota"]  .nav-detail__comp-dot { background: var(--comp-novota); }
.nav-detail__comp-row[data-kind="padron"]  .nav-detail__comp-dot { background: var(--comp-padron); }

.nav-detail__comp-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 12px;
  padding: 3px 0;
}
.nav-detail__comp-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--comp-padron);
}
.nav-detail__comp-row-label { color: var(--c-mv-ink-muted); }
.nav-detail__comp-row-val {
  margin-left: auto;
  font-weight: 700;
  color: var(--c-mv-ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- Anillo (donut) + stats ---------- */
.nav-detail__comp-anillo-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.nav-detail__comp-ring {
  --ring-thickness: 13px;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  flex: 0 0 auto;
  position: relative;
  display: grid;
  place-items: center;
}
.nav-detail__comp-ring-hole {
  /* hueco amplio (124 − 2·13 = 98px) para que el % no toque el anillo */
  width: calc(100% - var(--ring-thickness) * 2);
  height: calc(100% - var(--ring-thickness) * 2);
  border-radius: 50%;
  background: var(--c-mv-bg-card, #fff);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,0.04);
}
.nav-detail__comp-ring-pct {
  /* v0.1.15.44: bajado de 20→16px + nowrap para que "XX.XXX%" no se
     solape con el borde del anillo (pedido de Renzo). */
  font-size: 16px;
  font-weight: 800;
  color: var(--c-mv-ink);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.nav-detail__comp-ring-cap {
  font-size: 8.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-mv-ink-soft);
  margin-top: 3px;
}
.nav-detail__comp-stats {
  flex: 1 1 160px;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}