/*! =============================================================================
 *  Perú Elige 2026 — 2V · macro-regiones.css
 *  Cuadro de análisis por macro regiones (estilo IPSOS) — barras VERTICALES,
 *  dos por región (Keiko / Sánchez).
 * ===========================================================================*/

.macro-section {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--sp-4, 16px) var(--container-padding, 20px) var(--sp-5, 24px);
}

.macro {
  /* v0.1.16.13: mismo foco radial institucional + radius + sombra que los demás
     cuadros (mapa, detalle, encuesta) para un look coherente. */
  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: var(--sp-5, 24px);
  box-shadow: var(--c-card-shadow, 0 1px 3px rgba(15, 23, 42, 0.06));
}

.macro__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2, 8px);
  margin-bottom: var(--sp-5, 24px);
}

.macro__title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg, 1.3rem);
  font-weight: var(--fw-regular, 400);
  color: var(--c-mv-card-title, #2c5599);
  margin: 0;
}

.macro__legend { display: flex; gap: var(--sp-3, 12px); }
.macro__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--c-text-muted);
}
.macro__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.macro__dot--a { background: var(--c-party-fp); }
.macro__dot--b { background: var(--c-party-ap); }

/* --- Fila de columnas (una por macro región) --- */
.macro__list {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3, 12px);
}

.macro__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Área de las dos barras verticales (crecen desde la base). */
.macro__bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  height: 160px;
  width: 100%;
  border-bottom: 1px solid rgba(31, 58, 95, 0.14);
}

.macro__vbar {
  width: 32px;
  max-width: 42%;
  min-height: 3px;
  border-radius: 6px 6px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  transition: height 0.6s ease;
}
.macro__vbar--a { background: linear-gradient(180deg, var(--c-party-fp) 0%, var(--c-party-fp-dark, #c75826) 100%); }
.macro__vbar--b { background: linear-gradient(180deg, var(--c-party-ap) 0%, #a3231d 100%); }
.macro__vbar--empty {
  width: 32px;
  height: 100%;
  border-radius: 0;
  background: repeating-linear-gradient(45deg, #eef1f5, #eef1f5 6px, #e2e8f0 6px, #e2e8f0 12px);
}

/* % dentro de la barra, arriba, en blanco. */
.macro__vval {
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffffff;
  padding-top: 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}
.macro__vbar.is-leader .macro__vval { font-size: 0.78rem; }

.macro__col-name {
  font-weight: 600;
  color: var(--c-text-strong);
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.15;
}

/* Votos por candidato (abreviados), con color de cada uno. */
.macro__cands {
  display: flex;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.macro__cand--a { color: var(--c-party-fp-dark, #c75826); }
.macro__cand--b { color: var(--c-party-ap, #c8302a); }

/* Pie: avance · total (mono, tenue). */
.macro__col-foot {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--c-text-muted);
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

.macro__col--empty .macro__col-name { opacity: 0.55; }

.macro__note {
  margin: var(--sp-5, 24px) 0 0;
  font-size: 0.7rem;
  color: var(--c-text-muted);
  opacity: 0.7;
  line-height: 1.4;
}

@media (max-width: 560px) {
  .macro { padding: var(--sp-4, 16px); }
  .macro__title { font-size: 1.1rem; }
  .macro__list { gap: 4px; }
  .macro__bars { height: 130px; gap: 4px; }
  .macro__vbar { width: 17px; }
  .macro__vbar--empty { width: 17px; }
  .macro__vval { font-size: 0.6rem; padding-top: 3px; }
  .macro__vbar.is-leader .macro__vval { font-size: 0.62rem; }
  .macro__col-name { font-size: 0.64rem; }
  .macro__cands { font-size: 0.56rem; gap: 5px; }
  .macro__col-foot { font-size: 0.54rem; }
  .macro__legend { gap: var(--sp-2, 8px); }
  .macro__legend-item { font-size: 0.72rem; }
}