/* ============================================================
   JUEGO · componentes propios del simulador
   Muchas clases las genera app.js, así que se conservan sus nombres
   y se re-implementan sobre el sistema de diseño 2.0.
   ============================================================ */

/* ============================================================
   BOTONES DEL JUEGO · solo la FORMA, nunca el color
   ------------------------------------------------------------
   v2.0: acá vivía una copia completa de .btn-rojo, .btn-fantasma
   y .btn-mini con sus propios degradados y sombras. Como game.css
   se carga DESPUÉS de components.css, esa copia le ganaba por
   cascada al sistema de diseño y los botones del tablero eran los
   únicos de todo el sitio que no se habían actualizado.

   Ahora el aspecto —el sello de goma, el barrido del foil, el
   hundido al apretar— sale entero de components.css, y acá queda
   únicamente lo que es propio del juego: que los botones de los
   modales ocupen todo el ancho y se apilen. Un cambio de color de
   marca vuelve a tocarse en un solo archivo.
   ============================================================ */
.btn-rojo, .btn-fantasma {
  display: flex; width: 100%;
  margin-top: var(--e-2);
}
.btn-rojo { font-size: var(--t-md); padding: var(--e-3) var(--e-4); }
.btn-fantasma { padding: var(--e-3); }

/* ============================================================
   CHIPS del juego (partidos y estados)
   ============================================================ */
.chip.ANR   { background: var(--peligro-suave); color: var(--peligro); border-color: currentColor; }
.chip.PLRA  { background: var(--info-suave); color: var(--info); border-color: currentColor; }
.chip.otro  { background: var(--superficie-3); color: var(--tinta-2); border-color: var(--borde); }
.chip.mio   { background: var(--ok-suave); color: var(--ok); border-color: currentColor; }
.chip.ins   { background: rgba(200,144,26,.16); color: var(--py-oro); border-color: currentColor; }

/* ============================================================
   BARRAS por color (las genera barraHtml())
   ============================================================ */
.b-verde    { background: var(--ok) !important; }
.b-amarilla { background: var(--alerta) !important; }
.b-roja     { background: var(--peligro) !important; }

/* ============================================================
   FACCIONES
   ============================================================ */
.faccion { margin-bottom: var(--e-3); }
.f-fila {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--e-2); font-size: var(--t-sm); margin-bottom: var(--e-1);
}
.f-val { font-family: var(--f-dato); font-weight: 700; font-variant-numeric: tabular-nums; }
.fac-nom { display: inline-flex; align-items: center; gap: var(--e-2); min-width: 0; }

/* ============================================================
   TABLERO DE GOBIERNO (Gabinete)
   ============================================================ */
.tablero-gob {
  display: grid; gap: var(--e-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr));
  margin-bottom: var(--e-3);
}
.tg-item {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-md); padding: var(--e-3) var(--e-2); text-align: center;
}
.tg-item .tg-n {
  display: block; font-family: var(--f-dato);
  font-size: var(--t-lg); font-weight: 800; line-height: 1.1;
}
.tg-item small { display: block; font-size: var(--t-xs); color: var(--tinta-2); margin-top: 3px; }
.alertas-gob { border-left: 4px solid var(--peligro); background: var(--peligro-suave); }
.alerta-item { font-size: var(--t-sm); padding: var(--e-2) 0; line-height: 1.5; }
.alerta-item + .alerta-item { border-top: 1px dashed var(--borde); }

/* Tarjetas de ministros */
.ministro-card { border-left: 4px solid var(--borde-fuerte); }
.mc-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.mc-cartera { font-family: var(--f-titulo); font-size: var(--t-md); font-weight: 700; }
.mc-nombre { font-size: var(--t-sm); margin-top: var(--e-1); }
.mc-ejec { font-size: var(--t-xs); color: var(--tinta-2); margin-top: var(--e-1); }
.ministro { padding: var(--e-3) 0; border-bottom: 1px dashed var(--borde); }
.ministro:last-child { border-bottom: none; }
.mi-info { font-size: var(--t-sm); }
.mi-cands { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-top: var(--e-2); }

/* ============================================================
   EL PATRÓN, RIVAL Y ALIADO
   ============================================================ */
.pedido-patron {
  border: 2px solid var(--py-oro);
  background: rgba(200,144,26,.10);
  animation: pulso-oro 2.4s ease-in-out infinite;
}
@keyframes pulso-oro {
  0%,100% { box-shadow: 0 0 0 0 rgba(200,144,26,.35); }
  50% { box-shadow: 0 0 0 8px rgba(200,144,26,0); }
}
.pp-titulo { font-size: var(--t-xs); font-weight: 800; color: var(--py-oro); letter-spacing: .08em; text-transform: uppercase; }
.pp-desc { font-size: var(--t-md); margin: var(--e-2) 0; line-height: 1.5; font-style: italic; }
.pp-botones { display: flex; gap: var(--e-2); flex-wrap: wrap; }

.rival-card { border-left: 4px solid var(--peligro); }
.rival-top { display: flex; gap: var(--e-3); align-items: center; }
.rival-amenaza {
  margin-top: var(--e-2); padding: var(--e-2) var(--e-3);
  border-radius: var(--r-md);
  background: var(--peligro-suave); border: 1px solid var(--peligro);
  font-size: var(--t-xs); color: var(--peligro);
}
.aliado-card { border-left: 4px solid var(--py-oro); }

/* ============================================================
   PRESUPUESTO
   ============================================================ */
.slider-fila { margin-bottom: var(--e-4); }
.sl-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2); font-size: var(--t-sm); }
.sl-val { font-family: var(--f-dato); font-weight: 700; color: var(--py-oro); }
.sl-monto { font-size: var(--t-xs); color: var(--tinta-2); margin-top: 2px; }
.sl-min { color: var(--peligro); font-weight: 600; }
.ppto-total { font-size: var(--t-sm); color: var(--tinta-2); margin: var(--e-3) 0; }
.ppto-total strong { color: var(--tinta); font-family: var(--f-dato); }
.ppto-total.excedido strong { color: var(--peligro); }

.caja-desvio {
  border: 2px solid var(--peligro);
  background: var(--peligro-suave);
  border-radius: var(--r-lg);
  padding: var(--e-4);
  margin-top: var(--e-4);
}
.titulo-desvio {
  color: var(--peligro); font-weight: 800;
  font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: var(--e-2);
}
.caja-desvio small { display: block; font-size: var(--t-xs); color: var(--tinta-2); margin-bottom: var(--e-3); line-height: 1.5; }

.fisco-caja { padding: var(--e-4); }
.fisco-fila {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2);
  padding: var(--e-2) 0; border-bottom: 1px dashed var(--borde); font-size: var(--t-sm);
}
.fisco-fila:last-child { border-bottom: none; }
.fisco-fila strong { font-family: var(--f-dato); font-variant-numeric: tabular-nums; text-align: right; }
.fisco-fila.peq { font-size: var(--t-xs); color: var(--tinta-2); }
.fisco-sub {
  font-size: var(--t-xs); font-weight: 800; color: var(--py-oro);
  letter-spacing: .06em; margin-bottom: var(--e-2); text-transform: uppercase;
}
.est { font-size: var(--t-xs); }
.est-r { color: var(--peligro); font-weight: 700; }
.est-a { color: var(--alerta); }
.est-v { color: var(--ok); }
.toggle-fila {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--e-3); padding: var(--e-2) 0; font-size: var(--t-sm); flex-wrap: wrap;
}
.tabla-planilla { font-size: var(--t-xs); }
.tabla-planilla td { padding: var(--e-2) var(--e-1); border-bottom: 1px dashed var(--borde); }
.tabla-planilla td:last-child { text-align: right; color: var(--tinta-2); font-family: var(--f-dato); }
.tabla-planilla tr:last-child td { border-bottom: none; font-weight: 700; color: var(--py-oro); }
.licit { border-left: 4px solid var(--ok); }

/* ============================================================
   CONGRESO
   ============================================================ */
.res-congreso {
  display: grid; gap: var(--e-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 100px), 1fr));
  margin-bottom: var(--e-3);
}
.res-congreso .mini {
  text-align: center; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--r-md); padding: var(--e-3) var(--e-2);
}
.res-congreso .mini strong { font-family: var(--f-dato); font-size: var(--t-xl); display: block; line-height: 1.1; }
.res-congreso .mini small { font-size: var(--t-xs); color: var(--tinta-2); }

.ley-card, .const-card, .org-card { border-left: 4px solid var(--py-oro); }
.const-card { border-left-color: var(--info); }
.const-card.peligrosa { border-left-color: var(--peligro); background: var(--peligro-suave); }
.const-card.peligrosa .l-nom { color: var(--peligro); }
.ley-card.vigente, .const-card.vigente { border-left-color: var(--ok); opacity: .8; }
.l-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.l-nom { font-family: var(--f-titulo); font-size: var(--t-md); font-weight: 700; }
.l-desc { font-size: var(--t-sm); color: var(--tinta-2); margin: var(--e-2) 0; line-height: 1.5; }
.l-votos { font-size: var(--t-xs); color: var(--py-oro); font-weight: 600; }
.org-card { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.org-card .o-info { flex: 1 1 220px; min-width: 0; }
.org-card .o-nom { font-family: var(--f-titulo); font-size: var(--t-md); font-weight: 700; }
.org-card .o-desc { font-size: var(--t-xs); color: var(--tinta-2); margin-top: 3px; line-height: 1.5; }

.senador {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-3) 0; border-bottom: 1px dashed var(--borde);
  font-size: var(--t-sm); flex-wrap: wrap;
}
.senador:last-child { border-bottom: none; }
.senador .sn-info { flex: 1 1 160px; min-width: 0; }
.senador .sn-nom { font-weight: 650; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.senador .sn-sub { color: var(--tinta-2); font-size: var(--t-xs); line-height: 1.4; }
.senador .barra { width: 70px; flex-shrink: 0; }
.senador.flash-fila { animation: flash-fila 1.4s var(--ease); }
@keyframes flash-fila { 0%,100% { background: transparent; } 20% { background: var(--alerta-suave); } }

/* Hemiciclo */
.hemiciclo-caja { text-align: center; }
.hemiciclo { width: 100%; max-width: 400px; height: auto; margin: 0 auto; }
.banca { cursor: pointer; transition: fill-opacity var(--vel-rapida) var(--ease); }
.banca:hover { fill-opacity: 1 !important; }
.hc-leyenda { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2) var(--e-3); margin-top: var(--e-2); }
.hc-leg { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-xs); color: var(--tinta-2); }
.hc-leg i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* ============================================================
   RÉGIMEN (dictadura)
   ============================================================ */
.banner-dict {
  border: 2px solid var(--peligro); background: var(--peligro-suave);
  font-size: var(--t-sm); text-align: center; line-height: 1.6;
  animation: pulso-rojo 2.4s ease-in-out infinite;
}
@keyframes pulso-rojo {
  0%,100% { box-shadow: 0 0 0 0 rgba(179,38,30,.35); }
  50% { box-shadow: 0 0 0 8px rgba(179,38,30,0); }
}
.consp-caja { border: 2px solid var(--peligro); background: var(--peligro-suave); }
.circulo-card { border-left: 4px solid var(--borde-fuerte); }
.cc-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.cc-nom { font-size: var(--t-md); }
.cc-metricas {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--e-2); margin-top: var(--e-3); text-align: center;
}
.cc-metricas > div {
  background: var(--superficie-3); border: 1px solid var(--borde);
  border-radius: var(--r-md); padding: var(--e-2) var(--e-1);
}
.cc-metricas small { font-size: var(--t-xs); color: var(--tinta-2); display: block; }
.cc-metricas strong { font-family: var(--f-dato); font-size: var(--t-lg); }
.mens-fila { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.mens-fila > span { flex: 1 1 200px; min-width: 0; font-size: var(--t-sm); }

/* ============================================================
   LA CALLE (marchas)
   ============================================================ */

/* ---------- Termómetro: la lectura de una sola ojeada ---------- */
.termo {
  background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  padding: var(--e-3) var(--e-4);
  margin-bottom: var(--e-3);
  position: relative; overflow: hidden;
}
.termo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); }
.termo-tit { font-weight: 800; font-size: var(--t-sm); }
.termo-val { font-family: var(--f-dato); font-size: var(--t-2xl); font-weight: 800; line-height: 1; }
.termo-val small { font-size: var(--t-md); opacity: .65; }
.termo-barra {
  height: 10px; margin: var(--e-2) 0;
  background: var(--superficie-3); border-radius: var(--r-full); overflow: hidden;
}
.termo-fill {
  height: 100%; border-radius: var(--r-full);
  transition: width .6s cubic-bezier(.22, .8, .3, 1);
}
.termo-pies {
  display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4);
  font-size: var(--t-xs); color: var(--tinta-2);
}
.termo-pies b { font-family: var(--f-dato); }
.v-bien { color: var(--ok); } .v-medio { color: var(--alerta); } .v-mal { color: var(--peligro); }

.termo.fria     { border-color: var(--ok); }
.termo.fria     .termo-fill { background: var(--ok); }
.termo.tibia    .termo-fill { background: var(--alerta); }
.termo.caliente { border-color: var(--alerta); }
.termo.caliente .termo-fill { background: linear-gradient(90deg, var(--alerta), #e07a3a); }
.termo.ardiendo { border-color: var(--peligro); }
.termo.ardiendo .termo-fill {
  background: linear-gradient(90deg, #e07a3a, var(--peligro), #e05a3a);
  background-size: 200% 100%;
  animation: calle-arde 2.4s linear infinite;
}
/* Con la calle ardiendo, la tarjeta entera respira: el jugador tiene que
   sentir que esto no espera al mes que viene. */
.termo.ardiendo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 120%, var(--peligro-suave), transparent 70%);
  animation: calle-latido 2.8s ease-in-out infinite;
}
@keyframes calle-arde { to { background-position: 200% 0; } }
@keyframes calle-latido { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ---------- Ficha de cada movilización ---------- */
.marcha-card {
  border-left: 4px solid var(--alerta);
  animation: entrada var(--vel-media, .35s) var(--ease) both;
}
.marcha-card.grave { border-left-color: var(--peligro); }
.marcha-card.grave .modo-chip { animation: marcha-pulso 1.9s ease-in-out infinite; }

.modo-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 800; white-space: nowrap;
  background: var(--superficie-3); color: var(--tinta-2);
  border: 1px solid var(--borde);
}
.modo-chip.vigilia { background: var(--alerta-suave); color: var(--alerta); border-color: var(--alerta); }
.modo-chip.corte,
.modo-chip.paro,
.modo-chip.toma { background: var(--peligro-suave); color: var(--peligro); border-color: var(--peligro); }
/* El anillo late desde el token del tema, no desde un rgba fijo: en oscuro
   el rojo es otro y un literal se vería apagado o directamente invisible. */
@keyframes marcha-pulso {
  0%, 100% { box-shadow: 0 0 0 0 var(--peligro); }
  70%      { box-shadow: 0 0 0 9px transparent; }
}

/* ---------- La barra de gente: se ve que hay gente, no un porcentaje ---------- */
.gente-barra {
  position: relative;
  height: 22px; margin: var(--e-2) 0 5px;
  background: var(--superficie-3);
  border: 1px solid var(--borde);
  border-radius: var(--r-md); overflow: hidden;
}
.gente-fill {
  height: 100%;
  background: var(--col, var(--alerta));
  transition: width .55s cubic-bezier(.22, .8, .3, 1);
  position: relative;
}
/* La textura son cabezas apretadas. Cuando la marcha es grande, avanzan:
   una plaza llena no se queda quieta. */
.gente-fill::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 4px 13px, rgba(0, 0, 0, .30) 2.6px, transparent 3px),
                    radial-gradient(circle at 11px 8px,  rgba(0, 0, 0, .22) 2.2px, transparent 2.6px);
  background-size: 16px 22px;
  opacity: .9;
}
.gente-fill.llena::after { animation: gente-marcha 3.4s linear infinite; }
@keyframes gente-marcha { to { background-position: 16px 0, 16px 0; } }

.gente-pico {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--tinta); opacity: .38;
  transform: translateX(-1px);
}
.gente-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-dato); font-size: var(--t-xs); font-weight: 800;
  color: var(--tinta); text-shadow: 0 0 4px var(--superficie), 0 0 4px var(--superficie);
  pointer-events: none;
}
.nivel-txt { font-size: var(--t-xs); font-weight: 800; margin-bottom: var(--e-2); }
/* v1.33: lo que canta la marcha (bloque 'calle' de motor/frases.php) */
.marcha-canto {
  font-family: var(--f-titulo, inherit);
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--tinta-2);
  border-left: 3px solid var(--borde);
  padding: 2px 0 2px var(--e-2);
  margin-bottom: var(--e-2);
}

/* ---------- La escalera de escalada ---------- */
.esc-modos {
  display: flex; align-items: center; gap: 4px;
  margin: var(--e-2) 0;
}
.esc-paso {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  height: 26px; border-radius: var(--r-sm);
  font-size: var(--t-sm);
  background: var(--superficie-3); border: 1px solid var(--borde);
  filter: grayscale(1); opacity: .4;
  transition: all var(--vel-rapida) var(--ease);
}
.esc-paso.pas { filter: none; opacity: .75; background: var(--alerta-suave); border-color: var(--alerta); }
.esc-paso.pos { filter: grayscale(.7); opacity: .55; }
.esc-paso.no  { opacity: .18; }             /* este reclamo no llega hasta acá */
.esc-paso.act {
  filter: none; opacity: 1;
  background: var(--peligro-suave);
  border-color: var(--peligro);
  transform: scale(1.12);
  animation: marcha-pulso 2.2s ease-in-out infinite;
}
.modo-aviso {
  font-size: var(--t-xs); color: var(--peligro);
  background: var(--peligro-suave);
  border-left: 3px solid var(--peligro);
  border-radius: var(--r-sm);
  padding: var(--e-2) var(--e-3); margin-bottom: var(--e-2);
}

/* ---------- Meta, cohesión y bases ---------- */
.marcha-meta {
  display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3);
  font-size: var(--t-xs); color: var(--tinta-2);
  margin-bottom: var(--e-2);
}
.marcha-meta .infil { color: var(--py-azul); font-weight: 700; }

.cohesion { display: flex; align-items: center; gap: var(--e-2); }
.coh-et { font-size: var(--t-xs); color: var(--tinta-3); white-space: nowrap; }
.coh-barra {
  flex: 1 1 auto; min-width: 40px; height: 7px;
  background: var(--superficie-3); border-radius: var(--r-full); overflow: hidden;
}
.coh-barra > div {
  height: 100%; background: var(--py-azul); border-radius: var(--r-full);
  transition: width .55s cubic-bezier(.22, .8, .3, 1);
}
.coh-val { font-family: var(--f-dato); font-size: var(--t-xs); font-weight: 700; }
.coh-nota { margin: 3px 0 var(--e-2); }

.bases { display: flex; flex-wrap: wrap; gap: 5px; }
.base-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 700;
  background: var(--superficie-3); color: var(--tinta-2);
  border: 1px solid var(--borde);
  cursor: help;
}

/* ---------- Botonera de decisiones ---------- */
/* Siete salidas por conflicto no entran en una fila de 375px si cada etiqueta
   lleva el costo al lado. El costo baja a una segunda línea y así entran de a
   dos por fila en vez de apilarse en una columna larguísima. */
.marcha-card .pp-botones { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); }
.marcha-card .pp-botones .btn-mini {
  flex-direction: column; gap: 1px;
  white-space: normal; text-align: center;
  line-height: 1.25; padding: var(--e-2);
}
.marcha-card .pp-botones .btn-mini em {
  font-style: normal; font-weight: 600;
  font-size: .92em; opacity: .8;
  font-family: var(--f-dato);
}
.btn-mini.violeta  { background: linear-gradient(180deg, #6b4ba8, #4a3178); }
.btn-mini.verde    { background: linear-gradient(180deg, #2f9c5c, #1c6b3d); }
.btn-mini.rojo-osc { background: linear-gradient(180deg, #7a2018, #4c0f0a); }

/* ============================================================
   ACCIONES
   ============================================================ */
.grilla-acciones {
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.accion-card {
  display: flex; flex-direction: column; gap: var(--e-1);
  text-align: left; width: 100%;
  min-height: var(--tap);
  background: var(--superficie);
  border: 1px solid var(--borde); border-left: 4px solid var(--borde-fuerte);
  border-radius: var(--r-lg);
  padding: var(--e-4);
  color: var(--tinta);
  transition: border-color var(--vel-rapida) var(--ease), transform var(--vel-rapida) var(--ease), box-shadow var(--vel-rapida) var(--ease);
}
.accion-card:not(:disabled):hover { border-left-color: var(--py-oro); box-shadow: var(--sombra-2); }
.accion-card:not(:disabled):active { transform: scale(.985); }
.accion-card:disabled { opacity: .45; cursor: not-allowed; }
.accion-card .a-nom { font-family: var(--f-titulo); font-size: var(--t-md); font-weight: 700; }
.accion-card .a-desc { font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.45; }
.accion-card .a-costo { font-size: var(--t-xs); color: var(--py-oro); font-weight: 650; margin-top: var(--e-1); }

/* ---------- v1.32: Acciones en formato lista ---------- */
.af-cuenta {
  margin-left: auto; font-family: var(--f-dato); font-size: var(--t-xs);
  color: var(--tinta-3); font-weight: 600;
}
.hg-sec summary::after { margin-left: var(--e-2); }   /* el +/- ya no pega contra el contador */
.af-lista { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-3) var(--e-3) var(--e-4); }
.af-nota-emerg { border-left: 3px solid var(--py-oro); padding-left: var(--e-3); }

.accion-fila {
  display: flex; align-items: flex-start; gap: var(--e-3);
  width: 100%; text-align: left;
  padding: var(--e-3); border-radius: var(--r-md);
  background: var(--superficie-2); border: 1px solid var(--borde);
  transition: border-color var(--vel-rapida) var(--ease), transform var(--vel-rapida) var(--ease), box-shadow var(--vel-rapida) var(--ease);
}
.accion-fila:not(:disabled):hover { border-color: var(--py-oro); box-shadow: var(--sombra-1); }
.accion-fila:not(:disabled):active { transform: scale(.99); }
.accion-fila:disabled { opacity: .5; cursor: not-allowed; }
.accion-fila.urgente { border-color: var(--py-oro); background: rgba(200, 144, 26, .08); }
.af-ico {
  flex-shrink: 0; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--superficie); color: var(--py-oro);
  border: 1px solid var(--borde);
}
.af-cuerpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.af-nom { font-family: var(--f-titulo); font-size: var(--t-md); font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.af-desc { font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.45; }
.af-emerg { background: #3d2a10; color: #ffc966; display: inline-flex; align-items: center; gap: 3px; }
.af-costo {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  font-size: var(--t-xs); font-weight: 700; white-space: nowrap; padding-top: 2px;
}
.af-costo-linea { display: inline-flex; align-items: center; gap: 3px; color: var(--py-oro); }
.af-hecho { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); }
.af-aviso { color: var(--peligro); font-size: 10px; font-weight: 600; }
.af-inversion { flex-wrap: wrap; }
.af-inversion .af-cuerpo { flex-basis: 200px; }

/* ============================================================
   PERFIL Y LOGROS
   ============================================================ */
.perfil-cab {
  display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap;
  background: var(--superficie);
  border: 1px solid var(--borde); border-left: 4px solid var(--py-oro);
  border-radius: var(--r-lg); padding: var(--e-4); margin-bottom: var(--e-3);
}
.perfil-cab .p-nom { font-family: var(--f-titulo); font-size: var(--t-xl); font-weight: 800; }
.perfil-cab .p-sub { font-size: var(--t-xs); color: var(--py-oro); }
.prop-item { font-size: var(--t-sm); padding: var(--e-2) 0; border-bottom: 1px dashed var(--borde); }
.prop-item:last-child { border-bottom: none; }

/* ---------- v1.31: chips rápidos bajo la cabecera (PCP, mandato, semilla) ---------- */
.perfil-chips { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-4); }
.pc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 700;
  background: var(--superficie-2); border: 1px solid var(--borde); color: var(--tinta);
}
.pc-chip.pc-mudo { color: var(--tinta-3); font-weight: 600; font-family: var(--f-dato); }

/* ---------- v1.31: vitrina de propiedades ---------- */
.galeria-prop {
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  margin-bottom: var(--e-4);
}
.prop-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-2);
  text-align: center; padding: var(--e-4) var(--e-2);
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  transition: transform var(--vel-rapida) var(--ease), border-color var(--vel-rapida) var(--ease), box-shadow var(--vel-rapida) var(--ease);
  animation: logro-aparece var(--vel-media) var(--ease) backwards;
}
.prop-card:hover { transform: translateY(-3px); border-color: var(--py-oro); box-shadow: var(--sombra-2); }
.prop-ico {
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(200, 144, 26, .12); color: var(--py-oro);
}
.prop-nom { font-size: var(--t-xs); font-weight: 650; line-height: 1.35; }

/* ---------- v1.31: la hoja de gobierno (secciones plegables) ---------- */
.hg-sec {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-lg); margin-bottom: var(--e-2); overflow: hidden;
}
.hg-sec summary {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-3) var(--e-4); cursor: pointer; list-style: none;
  font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-sm);
  color: var(--tinta); user-select: none;
}
.hg-sec summary::-webkit-details-marker { display: none; }
.hg-sec summary::after {
  content: '+'; margin-left: auto; font-size: var(--t-lg); line-height: 1;
  color: var(--tinta-3); font-weight: 400;
}
.hg-sec[open] summary::after { content: '−'; }
.hg-sec[open] summary { border-bottom: 1px solid var(--borde); background: var(--superficie-2); }
.hg-lista { padding: var(--e-2) var(--e-4); }
.hg-fila {
  display: flex; align-items: flex-start; gap: var(--e-2);
  padding: var(--e-3) 0; border-bottom: 1px dashed var(--borde);
}
.hg-fila:last-child { border-bottom: none; }
.hg-ico.ico { flex-shrink: 0; margin-top: .2em; color: var(--py-oro); opacity: .85; }
.hg-cuerpo { flex: 1 1 auto; min-width: 0; }
.hg-linea { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); }
.hg-linea span { font-size: var(--t-sm); color: var(--tinta-2); }
.hg-linea strong { font-family: var(--f-dato); font-size: var(--t-sm); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.hg-lectura { font-size: var(--t-xs); color: var(--tinta-3); line-height: 1.5; margin: 3px 0 0; }

.grilla-logros {
  display: grid; gap: var(--e-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 88px), 1fr));
}
.logro {
  text-align: center; background: var(--superficie-3);
  border: 1px solid var(--borde); border-radius: var(--r-md);
  padding: var(--e-3) var(--e-1); opacity: .5;
  transition: opacity var(--vel-media) var(--ease), border-color var(--vel-media) var(--ease);
}
.logro.on { opacity: 1; border-color: var(--py-oro); box-shadow: 0 0 14px rgba(200,144,26,.18); }
.lg-icono { font-size: 1.5rem; display: block; line-height: 1.2; }
.lg-nombre { font-size: var(--t-xs); color: var(--tinta-2); display: block; margin-top: var(--e-1); line-height: 1.3; }
.logro.on .lg-nombre { color: var(--tinta); }

/* ============================================================
   RANKINGS
   ============================================================ */
.tabla-rank { font-size: var(--t-sm); }
.tabla-rank th {
  text-align: left; color: var(--tinta-2); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .05em;
  padding: var(--e-2); border-bottom: 2px solid var(--borde-fuerte); white-space: nowrap;
}
.tabla-rank td { padding: var(--e-3) var(--e-2); border-bottom: 1px dashed var(--borde); }
.tabla-rank tr:last-child td { border-bottom: none; }
.pos { font-family: var(--f-dato); color: var(--py-oro); font-weight: 800; }
.rk-pres { font-weight: 650; }
.rk-user { color: var(--tinta-2); font-size: var(--t-xs); }
.sel-temporada { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-bottom: var(--e-3); }

/* ============================================================
   TUITER
   ============================================================ */
.tuit { padding: var(--e-3) 0; border-bottom: 1px dashed var(--borde); }
.tuit:last-child { border-bottom: none; }
.tu-cab { font-size: var(--t-xs); font-weight: 700; }
.tu-user { color: var(--info); }
.tu-verif { color: var(--py-oro); }
.tu-texto { font-size: var(--t-sm); line-height: 1.5; margin: var(--e-1) 0; }
.tu-pie { font-size: var(--t-xs); color: var(--tinta-3); display: flex; align-items: center; gap: 4px; }
.btn-tuit-compartir { min-height: auto; padding: 2px 8px; }
.tu-reply {
  margin: var(--e-2) 0 var(--e-1) var(--e-4);
  padding: var(--e-2) var(--e-3);
  border-left: 3px solid var(--py-oro);
  background: rgba(200,144,26,.08);
  font-size: var(--t-xs); border-radius: 0 var(--r-md) var(--r-md) 0;
}
.tu-nav { display: flex; justify-content: center; align-items: center; gap: var(--e-3); padding: var(--e-3) 0 var(--e-1); }

/* ============================================================
   NOTICIAS
   ============================================================ */
.noticia {
  display: flex; align-items: flex-start; gap: var(--e-2);
  padding: var(--e-3) 0; border-bottom: 1px dashed var(--borde);
  font-size: var(--t-sm); line-height: 1.55;
  animation: panel-entra var(--vel-media) var(--ease);
}
.noticia:last-child { border-bottom: none; }
/* El ícono nace del texto (currentColor) pero un poco más discreto que la
   letra, y fijo en tamaño para que un titular de dos líneas no lo estire. */
.noticia .n-ico { flex-shrink: 0; margin-top: .15em; color: var(--tinta-2); }

/* ============================================================
   NUEVA PARTIDA (chips de modo, partido, dificultad)
   ============================================================ */
.partido-grid {
  display: grid; gap: var(--e-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
.partido-grid .btn-mini { text-align: left; justify-content: flex-start; }
#avatares {
  display: grid; gap: var(--e-2);
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: var(--e-4);
}
#avatares .avatar {
  min-height: 0; aspect-ratio: 1;
  padding: var(--e-1);
  background: var(--superficie-3);
  border: 2px solid var(--borde);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--vel-rapida) var(--ease), border-color var(--vel-rapida) var(--ease);
}
#avatares .avatar:hover { border-color: var(--tinta-3); }
#avatares .avatar.activo { border-color: var(--py-oro); background: var(--superficie); transform: scale(1.06); }
#avatares .avatar img { width: 100%; height: auto; border-radius: 50%; }

/* ============================================================
   ICONOS / AVATARES
   ============================================================ */
img.ico, img.ico-mini { object-fit: contain; flex-shrink: 0; }
.ico { width: 18px; height: 18px; vertical-align: middle; display: inline-block; }
.ico-mini { width: 16px; height: 16px; vertical-align: middle; border-radius: 50%; display: inline-block; }
.ico-av { width: 32px; height: 32px; display: inline-flex; vertical-align: middle; }
.ico-av img { width: 32px; height: 32px; object-fit: contain; border-radius: 50%; }
.ico-perfil, .ico-perfil img { width: 60px; height: 60px; object-fit: contain; border-radius: 50%; }
.ico-rival { width: 48px; height: 48px; flex-shrink: 0; }
.ico-rival img { width: 48px; height: 48px; object-fit: contain; border-radius: 50%; border: 2px solid var(--peligro); }

/* ============================================================
   MAPA
   ============================================================ */
.camp-mapa svg, #mapa-tab svg { max-width: 360px; height: auto; margin: 0 auto; }
.mapa-leyenda {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: var(--e-2) var(--e-3); margin-top: var(--e-3);
  font-size: var(--t-xs); color: var(--tinta-2);
}
.mapa-leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.dep-tile rect { shape-rendering: crispEdges; }
.dep-tile text {
  pointer-events: none; font: 700 6.5px var(--f-texto); fill: #fff;
  paint-order: stroke; stroke: rgba(0,0,0,.6); stroke-width: 1.6px; stroke-linejoin: round;
}
.dep-tile .dep-pct { font-weight: 500; font-size: 6px; fill: #ffe9b0; }
#mapa-tab .dep-tile:hover rect, #mapa-tab .dep-tile:hover path, #mapa-tab .dep-tile:hover polygon { opacity: .78; }
.dep-marcha-activa rect, .dep-marcha-activa path, .dep-marcha-activa polygon { stroke: var(--peligro); stroke-width: 2.5; }

/* ============================================================
   CAMPAÑA ELECTORAL
   ============================================================ */
#vista-campana { max-width: var(--ancho-max); margin: 0 auto; padding: var(--e-4) var(--e-3) var(--e-7); }
.camp-wrap { display: flex; flex-direction: column; gap: var(--e-2); }
.camp-head {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); flex-wrap: wrap;
  padding: var(--e-3) var(--e-4);
  background: var(--superficie); border: 1px solid var(--borde);
  border-top: 4px solid var(--acento);
  border-radius: var(--r-lg); margin-bottom: var(--e-3);
}
.camp-logo { font-size: var(--t-xl); vertical-align: -3px; margin-right: var(--e-1); }
.camp-sem { font-family: var(--f-dato); font-weight: 800; color: var(--py-oro); }
.camp-barras {
  display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-lg); padding: var(--e-4); margin-bottom: var(--e-2);
}
.camp-cand { flex: 1 1 200px; min-width: 0; }
.camp-cand.tuyo { padding: var(--e-2); margin: calc(var(--e-2) * -1); border-radius: var(--r-md); background: var(--ok-suave); border: 1px solid rgba(31,122,69,.25); }
.cc-top { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); margin-bottom: var(--e-1); }
.camp-barra { height: 14px; background: var(--superficie-3); border: 1px solid var(--borde); border-radius: var(--r-full); overflow: hidden; }
.camp-barra > div { height: 100%; border-radius: var(--r-full); transition: width var(--vel-lenta) var(--ease); }
.cc-val { font-family: var(--f-dato); font-size: var(--t-xl); font-weight: 800; margin-top: 2px; }
.camp-vs { font-weight: 800; color: var(--tinta-3); }
.camp-fondos {
  text-align: center; font-size: var(--t-sm);
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-md); padding: var(--e-3); margin-bottom: var(--e-2);
}
.camp-jugadas { display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.camp-jug {
  display: flex; flex-direction: column; gap: 3px;
  text-align: left; background: var(--superficie);
  border: 1px solid var(--borde); border-left: 4px solid var(--borde-fuerte);
  border-radius: var(--r-lg); padding: var(--e-3) var(--e-4); color: var(--tinta);
  min-height: var(--tap);
  transition: border-color var(--vel-rapida) var(--ease);
}
.camp-jug:not(.off):hover { border-left-color: var(--py-oro); }
.camp-jug.off { opacity: .45; }
.cj-n { font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-md); }
.cj-d { font-size: var(--t-sm); color: var(--tinta-2); }
.cj-c { font-size: var(--t-xs); color: var(--py-oro); font-weight: 650; }

/* ============================================================
   MODALES DEL JUEGO
   ============================================================ */
/* Las opciones de un evento son la casilla que se tilda en un formulario:
   texto alineado a la izquierda (se LEEN, no se escanean como botones) y un
   canto de color a la izquierda que hace de casillero.

   v2.0: ese canto ahora se PINTA de oro al pasar por encima, en lugar de
   cambiar de color de golpe — el barrido de arriba hacia abajo dice "esta es
   la que estás por elegir" mucho antes de que el ojo llegue al texto. Y al
   apretar, la opción se hunde en el papel como el resto de los botones del
   sistema. */
#ev-opciones button {
  position: relative; overflow: hidden;
  display: block; width: 100%; text-align: left;
  min-height: var(--tap);
  margin-bottom: var(--e-2);
  padding: var(--e-3) var(--e-4);
  font-size: var(--t-sm); line-height: 1.5;
  background: var(--superficie-2); color: var(--tinta);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--borde-fuerte);
  border-radius: var(--r-sm);
  transition: border-color var(--vel-rapida) var(--ease),
              background var(--vel-rapida) var(--ease),
              transform var(--vel-rapida) var(--ease),
              box-shadow var(--vel-rapida) var(--ease);
}
#ev-opciones button::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -4px; width: 4px;
  background: var(--py-oro);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--vel-media) var(--ease);
}
#ev-opciones button:hover {
  background: var(--superficie-3);
  border-color: var(--borde-fuerte);
}
#ev-opciones button:hover::before,
#ev-opciones button:focus-visible::before { transform: scaleY(1); }
#ev-opciones button:active {
  transform: translateY(2px);
  box-shadow: var(--sombra-hundida);
}

/* ---------- Efectos de cada opción (v1.30) ----------
   Antes se elegía a ciegas: el catálogo siempre supo qué hacía cada opción,
   pero eso nunca llegaba a la pantalla. Los chips van DEBAJO del texto y en
   menor jerarquía a propósito: primero se lee la decisión, después el precio.
   Si fueran igual de grandes, el jugador terminaría eligiendo por los números
   sin leer lo que está haciendo, que es lo divertido del juego. */
.ev-op-txt { display: block; }
.ev-op-fx {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 7px;
}
.fx-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px;
  font-size: var(--t-xs); font-weight: 650; line-height: 1.5;
  border-radius: var(--r-full);
  background: var(--superficie-3);
  color: var(--tinta-2);
  border: 1px solid var(--borde);
  white-space: nowrap;
}
/* El color sigue al JUGADOR, no al signo: que suba el calor fiscal es un
   número que sube y una noticia mala. Eso ya viene resuelto del servidor. */
.fx-chip.fx-bien  { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-suave); }
.fx-chip.fx-mal   { color: var(--peligro); border-color: color-mix(in srgb, var(--peligro) 35%, transparent); background: var(--peligro-suave); }
.fx-chip.fx-aviso { color: var(--alerta); border-color: color-mix(in srgb, var(--alerta) 45%, transparent); background: var(--alerta-suave); font-weight: 800; }

/* ------------------------------------------------------------
   MINIJUEGOS — escenas de varios pasos (v1.29)
   Mismo molde que el modal de evento; lo que se agrega es el
   medidor, el contador de pasos y el repaso de lo contestado.
   ------------------------------------------------------------ */
.mj-caja { border-top-color: var(--py-azul); }
/* ===== EL DESPACHO (v1.34) ==============================================
   Fondo del juego. Todo 2D: es una imagen de fondo en una capa fija, sin
   canvas, sin WebGL y sin parallax — nada acá se mueve con el mouse.

   La imagen sale de --oficina. Por defecto apunta al SVG dibujado
   (assets/img/oficina-dia.svg, ~24 KB), pero si aparece una ilustración
   hecha a mano en assets/img/oficina-dia.webp el JS la usa en su lugar sin
   tocar una línea de CSS. Ver `precargarOficina()` en app.js.

   Va en #vista-app y no en <body> a propósito: así no se cuela detrás del
   login, de la pantalla de partida nueva ni de la campaña, que ya tienen su
   propio fondo. */
:root { --oficina: url(../img/oficina-dia.svg); --oficina-op: .42; }
:root[data-theme="dark"] { --oficina: url(../img/oficina-noche.svg); --oficina-op: .46; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --oficina: url(../img/oficina-noche.svg); --oficina-op: .46; }
}

#vista-app { position: relative; isolation: isolate; min-height: 100dvh; }

#fondo-oficina {
  position: fixed; inset: 0;
  z-index: -1;                 /* debajo de todo el juego, encima del body */
  pointer-events: none;
  background-image: var(--oficina);
  background-size: cover;
  background-position: center 38%;   /* el escritorio abajo, la puerta a la vista */
  opacity: var(--oficina-op);
  transition: opacity .6s ease, background-image .3s ease;
}

/* En pantalla angosta el despacho se recorta a una tira vertical y se vuelve
   ruido detrás del texto. Se baja todavía más para que no compita. */
@media (max-width: 599px) {
  #fondo-oficina { opacity: calc(var(--oficina-op) * .85); background-position: center 30%; }
}

/* La franja de medidores es una banda opaca a todo el ancho: si queda sólida
   corta el despacho al medio. Se la deja translúcida — las tarjetas de cada
   medidor siguen siendo opacas, así que no se pierde legibilidad. */
#franja-stats { background: color-mix(in srgb, var(--fondo-alt) 82%, transparent); }

/* ===== RETRATO DE PERSONAJE (v1.34) =====================================
   Quien viene a verte entra por la izquierda del título. Los sprites son de
   cuerpo entero, así que se recortan al busto con object-position:top.
   La entrada es un deslizamiento corto desde el costado: la idea es que se
   lea como "alguien cruzó la puerta", no como una animación de UI. Nada
   sigue al mouse ni se mueve solo — eso era lo que molestaba del 3D. */
.ev-cab, .mj-cab { display: flex; align-items: flex-end; gap: var(--e-3); }
.mj-cab-txt { flex: 1; min-width: 0; }
.ev-cab h2 { flex: 1; min-width: 0; margin-bottom: 0; }

/* La figura entera, no un avatar recortado. Un busto circular de 64 px sobre
   un sprite de 560×906 deja la cara en unos pocos píxeles y no se reconoce a
   nadie: lo que tiene que leerse es que ALGUIEN entró al despacho. Por eso
   `contain`, alto fijo y ancho libre, apoyado en la base del título. */
.retrato-pj {
  height: 132px; width: auto; min-width: 76px; max-width: 40%;
  flex-shrink: 0;
  object-fit: contain; object-position: bottom;
  align-self: flex-end;
  cursor: pointer;
  animation: pj-entra .38s cubic-bezier(.2, .9, .3, 1) both;
  transition: transform .15s var(--ease, ease);

  /* EL VANO DE LA PUERTA. No es decoración: los sprites son arte claro con
     contorno negro y este juego tiene tema oscuro, así que un traje negro
     sobre el modal (luminancia 26 contra 44) directamente no se veía.
     El degradado va detrás de las zonas transparentes del PNG y le da al
     personaje un fondo propio contra el cual recortarse — y de paso se lee
     como la luz del pasillo, que es de donde viene. */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--py-oro) 22%, transparent) 0%,
      color-mix(in srgb, var(--superficie-3) 92%, transparent) 45%,
      var(--superficie-2) 100%);
  border-radius: 46px 46px var(--radio, 8px) var(--radio, 8px);
  border: 1px solid var(--borde);
  border-bottom: 3px solid var(--py-oro);
  padding: var(--e-2) var(--e-1) 0;
  box-shadow: inset 0 12px 22px -12px rgba(255, 255, 255, .35),
              0 4px 12px rgba(0, 0, 0, .45);
}
.retrato-pj:hover { transform: translateY(-3px); }
.mj-caja .retrato-pj { border-bottom-color: var(--py-azul); }

/* Entra desde la izquierda, como cruzando la puerta. Es lo único que se
   mueve, y se mueve una vez: nada sigue al mouse. */
@keyframes pj-entra {
  from { opacity: 0; transform: translateX(-26px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 479px) {
  .retrato-pj { height: 104px; max-width: 38%; }
}

/* ===== FICHA DE PERSONAJE (v1.34) =====================================
   Se abre encima del modal de evento: el z-index tiene que superar el de
   .modal (--z-modal) o la ficha quedaría detrás de la decisión que la abrió. */
#modal-ficha { z-index: calc(var(--z-modal) + 10); }
.ficha-caja { max-width: 420px; }
.ficha-cab { display: flex; align-items: flex-end; gap: var(--e-4); margin-bottom: var(--e-3); }
.ficha-cab-txt { flex: 1; min-width: 0; }
.ficha-cab h2 { margin-bottom: var(--e-1); }
.ficha-foto {
  height: 190px; width: auto; max-width: 45%; flex-shrink: 0;
  object-fit: contain; object-position: bottom;
  align-self: flex-end;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .4));
}
.ficha-rol { color: var(--tinta-2); font-size: .82rem; }
.ficha-frase {
  font-style: italic; color: var(--tinta-2);
  border-left: 3px solid var(--py-oro); padding-left: var(--e-3);
  margin-bottom: var(--e-4);
}
.ficha-datos { display: grid; gap: var(--e-2); margin-bottom: var(--e-4); }
.ficha-dato {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3);
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--radio, 8px); padding: var(--e-2) var(--e-3);
}
.ficha-dato span { color: var(--tinta-2); font-size: .82rem; }
.ficha-dato b { font-variant-numeric: tabular-nums; }
.ficha-vacia { color: var(--tinta-3); font-size: .82rem; }

@media (max-width: 479px) {
  .ficha-foto { height: 150px; }
}

.mj-cab { margin-bottom: var(--e-3); }
.mj-caja h2 { margin-bottom: var(--e-1); }
.mj-pasos {
  display: flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-xs); color: var(--tinta-3);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 650;
}
.mj-pips { display: flex; gap: 4px; }
.mj-pips i {
  width: 18px; height: 4px; border-radius: 2px;
  background: var(--borde); transition: background var(--vel-media) var(--ease);
}
.mj-pips i.hecho { background: var(--borde-fuerte); }
.mj-pips i.ahora { background: var(--py-oro); }

/* El medidor va NEUTRO (oro) a propósito: según el minijuego, subir es bueno
   ("Quién va ganando el debate") o pésimo ("Sospecha del fiscal"), y el motor
   no dice para qué lado conviene. Pintarlo de verde/rojo mentiría la mitad de
   las veces. El número y el salto entre pasos sí se ven, que es lo que importa. */
.mj-medidor {
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--r-md); padding: var(--e-3); margin-bottom: var(--e-4);
}
.mj-med-fila {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2);
  font-size: var(--t-sm); color: var(--tinta-2); margin-bottom: var(--e-2);
}
.mj-med-fila strong { color: var(--py-oro); font-size: var(--t-lg); font-family: var(--f-dato); }
.mj-delta {
  font-size: var(--t-xs); font-family: var(--f-dato); margin-left: var(--e-1);
  opacity: 0; transition: opacity var(--vel-media) var(--ease);
}
.mj-delta.visible { opacity: 1; }
.mj-delta.sube { color: var(--ok); }
.mj-delta.baja { color: var(--peligro); }
.mj-barra {
  height: 9px; border-radius: 5px; overflow: hidden;
  background: var(--superficie-3); border: 1px solid var(--borde);
}
.mj-barra i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--py-azul), var(--py-oro));
  transition: width .65s cubic-bezier(.22, .9, .3, 1);
}

.mj-ctx { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-3); }
.mj-ctx span {
  font-size: var(--t-xs); padding: 3px 10px; border-radius: 20px;
  background: var(--superficie-2); border: 1px solid var(--borde); color: var(--tinta-2);
}
.mj-ctx span b { color: var(--tinta); font-family: var(--f-dato); font-weight: 650; }
#mj-pista { font-size: var(--t-sm); color: var(--tinta-2); font-style: italic; }

/* Repaso de lo ya contestado. Abierto de entrada en la fiscalía, donde
   acordarse de lo que declaraste es literalmente la mecánica. */
#mj-historial, #mjf-historial { margin-bottom: var(--e-4); }
.mj-hist {
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--r-md); padding: 0 var(--e-3);
}
.mj-hist > summary {
  cursor: pointer; list-style: none; padding: var(--e-2) 0;
  font-size: var(--t-xs); color: var(--tinta-3);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 650;
}
.mj-hist > summary::-webkit-details-marker { display: none; }
.mj-hist > summary::after { content: ' ▾'; color: var(--py-oro); }
.mj-hist[open] > summary::after { content: ' ▴'; }
.mj-hist ol { list-style: none; padding: 0 0 var(--e-2); margin: 0; }
.mj-hist li {
  display: flex; gap: var(--e-2); align-items: baseline;
  font-size: var(--t-xs); line-height: 1.5; text-align: left;
  padding: var(--e-2) 0; border-top: 1px dashed var(--borde); color: var(--tinta-2);
}
.mj-hist li b { color: var(--py-oro); font-family: var(--f-dato); flex: 0 0 auto; }
.mj-hist li span { flex: 1; min-width: 0; }
.mj-hist li em { flex: 0 0 auto; font-style: normal; color: var(--tinta-3); font-family: var(--f-dato); }

#mj-opciones button {
  display: block; width: 100%; text-align: left;
  min-height: var(--tap);
  margin-bottom: var(--e-2);
  padding: var(--e-3) var(--e-4);
  font-size: var(--t-sm); line-height: 1.5;
  background: var(--superficie-2); color: var(--tinta);
  border: 1px solid var(--borde); border-left: 4px solid var(--borde-fuerte);
  border-radius: var(--r-md);
  transition: border-color var(--vel-rapida) var(--ease), background var(--vel-rapida) var(--ease);
}
#mj-opciones button:hover:not(:disabled) { border-left-color: var(--py-oro); background: var(--superficie-3); }
#mj-opciones button:disabled { opacity: .5; cursor: not-allowed; }
#mj-opciones button .o-nota {
  display: block; margin-top: var(--e-1); font-size: var(--t-xs); color: var(--tinta-3);
}
.mj-salir {
  display: block; width: 100%; margin-top: var(--e-1); padding: var(--e-2);
  background: none; border: 1px dashed var(--borde); border-radius: var(--r-md);
  color: var(--tinta-3); font-size: var(--t-xs);
}
.mj-salir:hover { border-color: var(--peligro); color: var(--peligro); }

#mjf-saldo { margin-bottom: var(--e-4); text-align: left; }
#mjf-saldo .fila-saldo {
  display: flex; justify-content: space-between; gap: var(--e-2);
  padding: var(--e-2) 0; border-bottom: 1px dashed var(--borde); font-size: var(--t-sm);
}
#mjf-saldo .fila-saldo:last-child { border-bottom: none; }
#mjf-saldo .fila-saldo strong { font-family: var(--f-dato); }
#mjf-saldo .bueno strong { color: var(--ok); }
#mjf-saldo .malo strong { color: var(--peligro); }
#mjf-saldo .saldo-nada { font-size: var(--t-sm); color: var(--tinta-2); font-style: italic; }

#bug-adjuntos { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-2); }
.bug-adj-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--r-md); padding: 4px 6px 4px 4px; font-size: var(--t-xs);
  max-width: 100%;
}
.bug-adj-chip img { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.bug-adj-chip .bug-adj-ico { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--superficie-3); border-radius: 4px; flex-shrink: 0; }
.bug-adj-chip .bug-adj-nom { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bug-adj-chip button { background: none; border: none; color: var(--peligro); font-weight: 800; min-height: 24px; min-width: 24px; padding: 0; flex-shrink: 0; }
.bug-adj-chip.subiendo { opacity: .6; }
.bug-adj-chip.error { border-color: var(--peligro); color: var(--peligro); }

.modal-caja.final { border-top-color: var(--peligro); text-align: center; }
.fin-nombre { color: var(--py-oro); font-weight: 700; margin-bottom: var(--e-2) !important; }
#fin-stats { text-align: left; margin-bottom: var(--e-4); }
#fin-stats .fila-stat {
  display: flex; justify-content: space-between; gap: var(--e-2);
  padding: var(--e-2) 0; border-bottom: 1px dashed var(--borde); font-size: var(--t-sm);
}
#fin-stats .fila-stat strong { color: var(--py-oro); font-family: var(--f-dato); }
.cambio {
  display: flex; justify-content: space-between; gap: var(--e-2);
  padding: var(--e-2) 0; border-bottom: 1px dashed var(--borde); font-size: var(--t-sm);
}
.cambio:last-child { border-bottom: none; }
.cambio .sube { color: var(--ok); font-family: var(--f-dato); }
.cambio .baja { color: var(--peligro); font-family: var(--f-dato); }

/* Leyes resueltas este mes — van primero en el resumen, son el titular */
.cambio-ley {
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--e-2) var(--e-3); margin-bottom: var(--e-2);
  border-radius: var(--r-md); border-left: 4px solid var(--borde-fuerte);
  background: var(--superficie-2); font-size: var(--t-sm); text-align: left;
}
.cambio-ley .cl-cab { display: flex; align-items: center; gap: var(--e-2); }
.cambio-ley .cl-ico { font-size: var(--t-lg); flex-shrink: 0; }
.cambio-ley .cl-cab strong { flex: 1; min-width: 0; }
.cambio-ley .cl-detalle { color: var(--tinta-2); font-size: var(--t-xs); font-family: var(--f-dato); padding-left: calc(var(--t-lg) + var(--e-2)); }
.cambio-ley.ley-aprobada { border-left-color: var(--ok); }
.cambio-ley.ley-aprobada .chip { background: var(--ok-suave); color: var(--ok); }
.cambio-ley.ley-rechazada { border-left-color: var(--peligro); }
.cambio-ley.ley-rechazada .chip { background: var(--peligro-suave); color: var(--peligro); }
.cambio-ley.ley-postergada { border-left-color: var(--alerta); }
.cambio-ley.ley-postergada .chip { background: var(--alerta-suave); color: var(--alerta); }

/* ============================================================
   TAPA DE DIARIO · el momento estrella
   ============================================================ */
#modal-tapa {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(8, 8, 12, .88);
  display: flex; align-items: center; justify-content: center;
  padding: var(--e-4); cursor: pointer;
}
#tapa-diario {
  width: 100%; max-width: 480px;
  max-height: 88dvh; overflow-y: auto;
  background: #f4f1e6; color: #17150f;
  padding: var(--e-5);
  border-radius: var(--r-sm);
  box-shadow: 0 18px 60px rgba(0,0,0,.75);
  font-family: var(--f-titulo);
}
#tapa-diario.girar { animation: girotapa .9s cubic-bezier(.2,.8,.3,1); }
@keyframes girotapa {
  0% { transform: scale(.1) rotate(-720deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.tapa-cabecera {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2);
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; flex-wrap: wrap;
}
.tapa-cabecera #tapa-nombre { font-size: var(--t-xl); font-weight: 900; letter-spacing: 0; }
.tapa-linea { border-top: 4px double #17150f; margin: var(--e-2) 0 var(--e-4); }
#tapa-titular {
  font-size: var(--t-2xl); line-height: 1.05; margin-bottom: var(--e-3);
  font-weight: 900; text-transform: uppercase; min-height: 1.05em;
}
#tapa-subtitular {
  font-size: var(--t-md); line-height: 1.45;
  border-left: 4px solid #17150f; padding-left: var(--e-3); margin-bottom: var(--e-3);
}
.tapa-pie {
  font-size: var(--t-xs); color: #5a5344;
  border-top: 1px solid #a99; padding-top: var(--e-2); font-style: italic;
}

/* ============================================================
   AYUDA
   ============================================================ */
.ayuda-sec {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-lg); margin-bottom: var(--e-2); overflow: hidden;
}
.ayuda-sec summary {
  padding: var(--e-3) var(--e-4);
  min-height: var(--tap);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
  cursor: pointer; font-weight: 700; font-size: var(--t-md);
  font-family: var(--f-titulo);
  list-style: none;
}
.ayuda-sec summary::-webkit-details-marker { display: none; }
.ayuda-sec summary::after { content: '▾'; color: var(--tinta-3); transition: transform var(--vel-media) var(--ease); }
.ayuda-sec[open] summary::after { transform: rotate(180deg); }
.ayuda-sec summary:hover { color: var(--py-oro); }
.ayuda-cont { padding: 0 var(--e-4) var(--e-4); font-size: var(--t-sm); line-height: 1.65; color: var(--tinta-2); }
.ayuda-cont b { color: var(--tinta); }
.ayuda-cont ul { margin: var(--e-2) 0; padding-left: var(--e-5); }
.ayuda-cont li { margin-bottom: var(--e-1); }
.ayuda-cont p { margin: var(--e-2) 0; }

/* ============================================================
   MODAL DE BUG
   ============================================================ */
#modal-bug textarea { width: 100%; }

/* ==========================================================================
   v1.35 — CARAS EN LOS CARGOS Y GRÁFICO DE PODER
   ========================================================================== */

/* --- las caras chicas que van dentro de las tarjetas ---------------------
   Mismo tratamiento que .retrato-pj de los modales: el vano de puerta detrás
   de la figura. Sin eso, un sprite oscuro (el juez de toga negra, el militar
   de verde) desaparece contra el fondo del tema oscuro. */
.cara-cargo, .cara-chip, .cara-mini {
  object-fit: contain; object-position: bottom;
  flex-shrink: 0; cursor: pointer; display: block;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--py-oro) 20%, transparent) 0%,
    color-mix(in srgb, var(--superficie-3) 92%, transparent) 48%,
    var(--superficie-2) 100%);
  border: 1px solid var(--borde);
  border-bottom: 2px solid var(--py-oro);
  transition: transform .14s var(--ease, ease), filter .14s ease;
}
.cara-cargo:hover, .cara-chip:hover, .cara-mini:hover { transform: translateY(-2px); filter: brightness(1.06); }
.cara-cargo:active, .cara-chip:active, .cara-mini:active { transform: translateY(0) scale(.97); }

.cara-cargo { height: 92px; width: auto; min-width: 52px; max-width: 82px;
  border-radius: 30px 30px var(--radio, 8px) var(--radio, 8px); padding: 4px 2px 0; }
.cara-mini  { height: 58px; width: auto; min-width: 34px; max-width: 54px;
  border-radius: 20px 20px var(--radio, 8px) var(--radio, 8px); padding: 3px 2px 0; }
.cara-chip  { height: 30px; width: auto; min-width: 20px; max-width: 30px;
  border-radius: 11px 11px 3px 3px; padding: 2px 1px 0; border-bottom-width: 1px; }
/* Los dibujos apaisados (el pueblo es un grupo, no una figura) se caparían a
   un sello ilegible con el max-width de una figura vertical. */
.cara-cargo.cara-ancha { max-width: 150px; height: 74px; border-radius: var(--radio, 8px); }
.cara-chip.cara-ancha  { max-width: 56px; height: 26px; border-radius: 4px; }
.ficha-foto.ficha-ancha { max-width: 92%; height: auto; max-height: 190px; }

/* --- gabinete, cúpula, aliado y rival con foto --- */
.mc-cuerpo, .ali-cab { display: flex; gap: var(--e-3); align-items: flex-end; }
.mc-txt, .ali-txt { flex: 1; min-width: 0; }
.ministro { display: flex; gap: var(--e-3); align-items: flex-end; flex-wrap: wrap; }
.rival-ex { display: flex; gap: var(--e-3); align-items: center; }

/* --- el gráfico ---------------------------------------------------------- */
.g-poder { padding-top: var(--e-3); }
.g-lienzo {
  background: color-mix(in srgb, var(--superficie-3) 60%, transparent);
  border: 1px solid var(--borde); border-radius: var(--radio, 8px);
  padding: 2px; overflow: hidden;
}
.g-svg { display: block; width: 100%; height: 132px; }
.g-grid   { stroke: var(--borde); stroke-width: .5; opacity: .55; }
.g-muerte { stroke: var(--rojo); stroke-width: .8; stroke-dasharray: 3 3; opacity: .65; }
.g-linea  { fill: none; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round;
            vector-effect: non-scaling-stroke; transition: opacity .18s ease; }
.g-punta  { transition: opacity .18s ease; }

/* Aislar una facción: la leyenda escribe data-solo en el contenedor y las
   demás líneas se apagan sin volver a dibujar el panel entero.
   Se escribe una regla por facción y no con :not([data-f=attr()]) porque
   attr() en selectores no existe. */
.g-poder[data-solo="congreso"] .g-linea:not([data-f="congreso"]),
.g-poder[data-solo="congreso"] .g-punta:not([data-f="congreso"]),
.g-poder[data-solo="justicia"] .g-linea:not([data-f="justicia"]),
.g-poder[data-solo="justicia"] .g-punta:not([data-f="justicia"]),
.g-poder[data-solo="ffaa"] .g-linea:not([data-f="ffaa"]),
.g-poder[data-solo="ffaa"] .g-punta:not([data-f="ffaa"]),
.g-poder[data-solo="policia"] .g-linea:not([data-f="policia"]),
.g-poder[data-solo="policia"] .g-punta:not([data-f="policia"]),
.g-poder[data-solo="patron"] .g-linea:not([data-f="patron"]),
.g-poder[data-solo="patron"] .g-punta:not([data-f="patron"]),
.g-poder[data-solo="prensa"] .g-linea:not([data-f="prensa"]),
.g-poder[data-solo="prensa"] .g-punta:not([data-f="prensa"]),
.g-poder[data-solo="pyragues"] .g-linea:not([data-f="pyragues"]),
.g-poder[data-solo="pyragues"] .g-punta:not([data-f="pyragues"]) { opacity: .1; }

.g-poder[data-solo] .g-item { opacity: .5; }
.g-poder[data-solo="congreso"] .g-item[data-solofac="congreso"],
.g-poder[data-solo="justicia"] .g-item[data-solofac="justicia"],
.g-poder[data-solo="ffaa"] .g-item[data-solofac="ffaa"],
.g-poder[data-solo="policia"] .g-item[data-solofac="policia"],
.g-poder[data-solo="patron"] .g-item[data-solofac="patron"],
.g-poder[data-solo="prensa"] .g-item[data-solofac="prensa"],
.g-poder[data-solo="pyragues"] .g-item[data-solofac="pyragues"] {
  opacity: 1; border-color: var(--py-oro);
  background: color-mix(in srgb, var(--py-oro) 12%, var(--superficie-2));
}

.g-eje { display: flex; justify-content: space-between; gap: var(--e-2);
  font-size: var(--t-xs); color: var(--tinta-2); margin: 3px 2px var(--e-3); }
.g-eje-med { opacity: .75; text-align: center; }
.g-vacio { font-size: var(--t-sm); color: var(--tinta-2); padding: var(--e-3) 0; }

/* --- la leyenda: cara, nombre, valor y el delta del mes --- */
/* minmax(0, ...) y no minmax(190px, ...) a secas: un track 1fr nunca baja del
   min-content de su contenido, así que en 375px de ancho la leyenda medía 368
   y empujaba scroll horizontal a TODO el panel del gabinete. El min() deja
   que la columna se achique cuando no entran dos. */
.g-leyenda { display: grid; gap: var(--e-2);
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.g-item, .g-leyenda > * { min-width: 0; }
.g-item {
  display: flex; align-items: center; gap: var(--e-2);
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--radio, 8px); padding: 4px 8px 4px 5px;
  font: inherit; font-size: var(--t-sm); color: var(--tinta); text-align: left;
  cursor: pointer; transition: border-color .14s ease, background .14s ease, opacity .14s ease;
}
.g-item:hover { border-color: var(--py-oro); }
.g-item.g-peligro { border-color: var(--rojo); background: color-mix(in srgb, var(--rojo) 10%, var(--superficie-2)); }
.g-punto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.g-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-val { font-family: var(--f-dato); font-weight: 700; }
.g-val small { font-size: .72em; opacity: .65; }
.d-sube  { color: var(--verde); font-weight: 700; font-size: var(--t-xs); min-width: 30px; text-align: right; }
.d-baja  { color: var(--rojo);  font-weight: 700; font-size: var(--t-xs); min-width: 30px; text-align: right; }
.d-igual { color: var(--tinta-2); font-size: var(--t-xs); min-width: 30px; text-align: right; }

/* --- qué movió el tablero --- */
.g-movs { margin-top: var(--e-3); border-top: 1px solid var(--borde); padding-top: var(--e-3); }
.g-movs-tit { font-size: var(--t-xs); font-weight: 800; color: var(--py-oro);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--e-2); }
.g-mov { padding: var(--e-2) 0; border-bottom: 1px dashed var(--borde); }
.g-mov:last-child { border-bottom: none; }
.g-mov-cab { display: flex; gap: var(--e-2); align-items: baseline; font-size: var(--t-sm); }
.g-mov-mes { font-family: var(--f-dato); font-size: var(--t-xs); color: var(--tinta-2); flex-shrink: 0; }
.g-mov-q { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-mov-fx { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.g-mov-chip { display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--t-xs); border: 1px solid var(--borde); border-left-width: 3px;
  border-radius: 4px; padding: 1px 6px; color: var(--tinta-2); }
.g-mov-chip .d-sube, .g-mov-chip .d-baja, .g-mov-chip .d-igual { min-width: 0; }

@media (max-width: 479px) {
  .cara-cargo { height: 74px; max-width: 62px; }
  .g-leyenda { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .g-nom { font-size: var(--t-xs); }
  .cara-chip { display: none; }   /* en 2 columnas no entra la cara y el nombre */
}

/* Las marcas del eje Y flotan sobre el lienzo: adentro del SVG se estirarían
   con preserveAspectRatio="none". */
.g-lienzo { position: relative; }
.g-eje-y { position: absolute; inset: 2px auto 2px 4px; width: 22px; pointer-events: none; z-index: 1; }
.g-eje-y span { position: absolute; left: 0; font-size: 9px; line-height: 12px;
  color: var(--tinta-2); opacity: .8; font-family: var(--f-dato); }
.g-svg { padding-left: 22px; box-sizing: border-box; }

/* ============================================================
   v2.1 · ACCIONES A LA VISTA, PERFIL EN UNA PÁGINA, BANCA DE
   EX MINISTROS, PROYECCIÓN DE VOTACIÓN E INTERRUPTORES
   ============================================================ */

/* ---------- Columnas sin huecos (acomodarColumnas en app.js) ----------
   El contenedor es una columna de tarjetas. Cuando hay ancho, el JS lo
   parte en dos .mas-col y reparte cada tarjeta a la más corta: las dos
   terminan parejas y no queda aire debajo de ninguna. Una grilla CSS no
   puede hacer esto — alinea filas, y una fila mide lo que su tarjeta más
   alta. */
.acc-grilla, .hoja-grilla { display: flex; flex-direction: column; gap: var(--e-3); }
.acc-grilla.dos, .hoja-grilla.dos { flex-direction: row; align-items: flex-start; }
.mas-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--e-3); }

/* ---------- Acciones: tarjetas por categoría ---------- */
.acc-cat {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-md); overflow: hidden;
  position: relative;
}
/* El hilo de seguridad arriba de cada categoría, como en las tarjetas oficiales */
.acc-cat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--hilo); opacity: .85; }
/* La cabecera es un botón: pliega y despliega la categoría */
.acc-cat-cab {
  display: flex; align-items: center; gap: var(--e-2);
  width: 100%; text-align: left;
  padding: var(--e-3) var(--e-4); padding-top: calc(var(--e-3) + 3px);
  font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-sm);
  text-transform: uppercase; letter-spacing: var(--track-etiqueta);
  color: var(--tinta);
  border-bottom: 1px solid var(--borde); background: var(--superficie-2);
  transition: background var(--vel-rapida) var(--ease);
}
.acc-cat-cab:hover { background: var(--superficie-3); }
.acc-cat-cab .ico { color: var(--py-oro); }
.acc-cat-cab .af-cuenta { margin-left: auto; }
/* El chevrón: apunta abajo abierta, a la derecha plegada */
.acc-chevron {
  flex-shrink: 0; width: 9px; height: 9px; margin-left: var(--e-2);
  border-right: 2px solid var(--tinta-3); border-bottom: 2px solid var(--tinta-3);
  transform: rotate(45deg); margin-top: -4px;
  transition: transform var(--vel-media) var(--ease);
}
.acc-cat.plegada .acc-chevron { transform: rotate(-45deg); margin-top: 0; }
.acc-cat.plegada .acc-cat-cab { border-bottom-color: transparent; }
.acc-cat.plegada .af-lista { display: none; }
/* La categoría con una palanca de emergencia usable se marca entera */
.acc-cat.acc-urgente { border-color: var(--py-oro); box-shadow: 0 0 0 1px var(--py-oro), 0 0 22px rgba(184,134,15,.18); }
.acc-cat.acc-urgente .acc-cat-cab { background: rgba(184,134,15,.10); }
.acc-cat .af-lista { padding: var(--e-3); }

/* La fila que se acaba de usar se ilumina un segundo (ver refrescar) */
.recien { animation: recien 1.4s var(--ease); }
@keyframes recien {
  0%   { box-shadow: 0 0 0 0 rgba(184,134,15,.0); background-color: var(--alerta-suave); }
  25%  { box-shadow: 0 0 0 4px rgba(184,134,15,.35); }
  100% { box-shadow: 0 0 0 0 rgba(184,134,15,0); }
}

/* ---------- Perfil: hoja de gobierno en dos columnas, sin plegar ---------- */
.hoja-grilla { margin-bottom: var(--e-4); }
.hg-sec.hg-abierta { margin-bottom: 0; }
.hg-cab {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-sm);
  text-transform: uppercase; letter-spacing: var(--track-etiqueta);
  color: var(--tinta); background: var(--superficie-2);
  border-bottom: 1px solid var(--borde);
}
.hg-cab .ico { color: var(--py-oro); }

/* ---------- Interruptor ---------- */
.config-grilla { display: flex; flex-direction: column; gap: var(--e-2); }
.interruptor {
  display: flex; align-items: center; gap: var(--e-3);
  width: 100%; min-height: var(--tap); text-align: left;
  padding: var(--e-2) var(--e-3);
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--r-md); color: var(--tinta);
  transition: border-color var(--vel-rapida) var(--ease), background var(--vel-rapida) var(--ease);
}
.interruptor:hover:not(:disabled) { border-color: var(--borde-fuerte); }
.interruptor:disabled { opacity: .5; cursor: not-allowed; }
.interruptor.on { border-color: var(--py-oro); background: rgba(184,134,15,.08); }
.int-pista {
  flex-shrink: 0; position: relative;
  width: 44px; height: 24px; border-radius: 999px;
  background: var(--borde-fuerte);
  transition: background var(--vel-media) var(--ease);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}
.int-perilla {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--superficie); box-shadow: var(--sombra-1);
  transition: transform var(--vel-media) var(--ease-sello);
}
.interruptor.on .int-pista { background: var(--foil-oro); }
.interruptor.on .int-perilla { transform: translateX(20px); }
.int-txt { min-width: 0; line-height: 1.3; }
.int-txt strong { display: block; font-size: var(--t-sm); }
.int-txt small { display: block; font-size: var(--t-xs); color: var(--tinta-2); margin-top: 2px; }

/* ---------- Gabinete: banca de ex ministros ---------- */
.ex-min { border-left: 4px solid var(--borde-fuerte); margin-top: 0 !important; }
.ex-min.ex-escandalo { border-left-color: var(--peligro); }
.ex-aviso {
  margin-top: 6px; padding: 6px 9px; border-radius: var(--r-sm);
  background: var(--peligro-suave); color: var(--peligro);
  font-size: var(--t-xs); font-weight: 600; line-height: 1.4;
  display: flex; align-items: flex-start; gap: 5px;
}
.ex-aviso .ico { flex-shrink: 0; margin-top: 2px; }
.btn-mini.ex-peligro { outline: 2px dashed var(--peligro); outline-offset: 1px; }

/* ---------- Congreso: proyección de la votación ---------- */
.proy { margin-top: var(--e-2); }
.proy-barra {
  position: relative; height: 10px; border-radius: var(--r-sm);
  background: var(--superficie-3); border: 1px solid var(--borde); overflow: visible;
}
.proy-barra i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.proy-barra .proy-fav { background: var(--foil-oro); opacity: .85; z-index: 1; }
.proy-barra .proy-tengo { background: var(--ok); z-index: 2; }
.proy-mal .proy-barra .proy-tengo { background: var(--peligro); }
.proy-barra .proy-meta {
  position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -2px;
  background: var(--tinta); z-index: 3;
}
.proy-txt { font-size: var(--t-xs); margin-top: 5px; line-height: 1.45; color: var(--tinta-2); display: flex; align-items: flex-start; gap: 5px; }
.proy-txt .ico { flex-shrink: 0; margin-top: 1px; }
.proy-ok .proy-txt .ico { color: var(--ok); }
.proy-favor .proy-txt .ico { color: var(--py-oro); }
.proy-mal .proy-txt .ico { color: var(--peligro); }
.proy-txt em { color: var(--tinta-3); }

/* ---------- v2.3: líneas rojas y techo de votos ---------- */
.chip.lineas {
  background: var(--peligro-suave); color: var(--peligro); border-color: transparent;
  text-transform: none; letter-spacing: 0; font-family: var(--f-texto); font-weight: 600;
  white-space: normal; line-height: 1.3;
}
.l-posibles {
  margin-top: 6px; font-size: var(--t-xs); color: var(--tinta-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px; line-height: 1.5;
}
.l-posibles .ico { flex-shrink: 0; }
.l-posibles.l-imposible, .l-posibles.l-imposible strong { color: var(--peligro); }

/* ---------- v2.4: el libro de rencores ---------- */
.rencor-card { margin-top: 0 !important; border-left: 4px solid var(--alerta); }
.rencor-card.nivel-2 { border-left-color: #d9782a; }
.rencor-card.nivel-3 { border-left-color: var(--peligro); background: var(--peligro-suave); }
.rencor-card.calmado { opacity: .62; border-left-color: var(--borde-fuerte); background: var(--superficie); }
.rencor-fuego { letter-spacing: -2px; font-size: .95em; }

/* ---------- v2.5: el expediente ---------- */
.exp-cab { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); text-align: center; margin-bottom: var(--e-2); }
.exp-cab b { display: block; font-family: var(--f-titulo); font-size: 1.15rem; }
.exp-cab span { font-size: .72rem; color: var(--tinta-3); line-height: 1.25; display: block; }
.exp-barra { height: 8px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borde); overflow: hidden; }
.exp-barra i { display: block; height: 100%; transition: width .5s ease; }
.exp-barra i.n-ok { background: var(--verde); }
.exp-barra i.n-alerta { background: var(--alerta); }
.exp-barra i.n-peligro { background: var(--peligro); }
.exp-lista { margin-top: var(--e-3); border-top: 1px solid var(--borde); }
.exp-folio { display: grid; grid-template-columns: 62px 1fr auto; gap: var(--e-2); align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--borde); font-size: .88rem; }
.exp-mes { font-size: .72rem; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; }
.exp-monto { font-family: var(--f-titulo); white-space: nowrap; }
.fin-exp-tit { margin: var(--e-3) 0 4px; font-size: 1.05rem; }
#fin-expediente { text-align: left; margin-bottom: var(--e-3); }
/* Las mismas filas que #fin-stats, pero el concepto es largo y se parte en
   varias líneas: sin esto el monto termina pegado a la última palabra. */
#fin-expediente .fila-stat {
  display: flex; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-2) 0; border-bottom: 1px dashed var(--borde); font-size: var(--t-sm);
}
#fin-expediente .fila-stat span { min-width: 0; }
#fin-expediente .fila-stat strong { color: var(--py-oro); font-family: var(--f-dato); white-space: nowrap; align-self: flex-end; }
/* Un senador que llegó ahí por bronca con vos */
.chip.exrencor { background: var(--peligro-suave); border-color: var(--peligro); color: var(--peligro); }

/* ---------- v2.5: heredar el país (pantalla de partida nueva) ---------- */
.hered { border: 1px solid var(--borde-fuerte); border-radius: var(--r-2); background: var(--superficie-2); margin: var(--e-3) 0; overflow: hidden; text-align: left; }
.hered.on { border-color: var(--py-oro); box-shadow: 0 0 0 1px var(--py-oro) inset; }
.hered-cab { display: flex; gap: var(--e-2); align-items: center; width: 100%; padding: var(--e-3); background: none; border: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.hered-check { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--borde-fuerte); position: relative; }
.hered.on .hered-check { background: var(--py-oro); border-color: var(--py-oro); }
.hered.on .hered-check::after { content: '✓'; position: absolute; inset: -3px 0 0; text-align: center; color: #1a1200; font-weight: 800; font-size: .9rem; }
.hered-txt b { display: block; line-height: 1.3; }
.hered-txt .nota { display: block; margin: 2px 0 0; }
.hered-detalle { display: grid; grid-template-columns: 1fr; gap: var(--e-2) var(--e-3); padding: 0 var(--e-3) var(--e-3); }
@media (min-width: 560px) { .hered-detalle { grid-template-columns: 1fr 1fr; } .hered-ancho { grid-column: 1 / -1; } }
.hered-et { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-3); }
.hered-detalle ul { margin: 4px 0 0; padding-left: 1.1em; }
.hered-detalle li { font-size: .85rem; line-height: 1.5; }

/* ---------- v3.0: el patrimonio ---------- */
.pat-cab { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-2); text-align: center; }
@media (min-width: 620px) { .pat-cab { grid-template-columns: repeat(4, 1fr); } }
.pat-cab b { display: block; font-family: var(--f-titulo); font-size: 1.1rem; }
.pat-cab b.malo { color: var(--peligro); }
.pat-cab span { font-size: .72rem; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .05em; }

.dj-aviso { border-left: 4px solid var(--py-oro); background: var(--alerta-suave); }
/* Solo el titular del aviso va en bloque. Sin el > el selector agarraba
   también los <b> de adentro del párrafo y le partía la frase al medio. */
.dj-aviso > b { display: block; margin-bottom: 4px; }

.pat-grilla { display: grid; grid-template-columns: 1fr; gap: var(--e-3); align-items: start; }
@media (min-width: 760px) { .pat-grilla { grid-template-columns: 1fr 1fr; } }
.pat-card { margin-top: 0 !important; }
.pat-nom { font-weight: 700; line-height: 1.3; }
.pat-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0; }
.pat-cifras { display: flex; gap: var(--e-3); flex-wrap: wrap; font-size: .8rem; color: var(--tinta-3); margin-top: 6px; }
.pat-cifras b { color: var(--tinta); font-family: var(--f-dato); }
.pat-estado { height: 5px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borde); overflow: hidden; margin-top: 7px; }
.pat-estado i { display: block; height: 100%; transition: width .4s ease; }
.pat-anombre { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--borde); }

.tf-lista { margin-top: var(--e-2); }
.tf-fila { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--e-2); align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--borde); }
.tf-fila.traidor { opacity: .6; }
.tf-nom { font-weight: 600; }
.tf-lealtad { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.tf-lealtad i { display: block; height: 100%; }

.cta-fila { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; padding: 8px 0; border-bottom: 1px dashed var(--borde); }
.cta-fila.muerta { opacity: .55; }
.cta-saldo { margin-left: auto; font-family: var(--f-dato); font-weight: 700; }

/* Los tres estados que comparten patrimonio, expediente y testaferros */
.pat-estado i.n-ok, .tf-lealtad i.n-ok { background: var(--verde); }
.pat-estado i.n-alerta, .tf-lealtad i.n-alerta { background: var(--alerta); }
.pat-estado i.n-peligro, .tf-lealtad i.n-peligro { background: var(--peligro); }

/* ---------- v3.0: la vida del presidente ---------- */
.vd-cab { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-2); text-align: center; }
@media (min-width: 620px) { .vd-cab { grid-template-columns: repeat(4, 1fr); } }
.vd-cab b { display: block; font-family: var(--f-titulo); font-size: 1.15rem; }
.vd-cab b.malo { color: var(--peligro); }
.vd-cab span { font-size: .72rem; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .05em; }
.vd-medida { display: grid; grid-template-columns: 62px 1fr; gap: var(--e-2); align-items: center; margin-top: 6px; font-size: .8rem; color: var(--tinta-3); }
.vd-barra { display: block; height: 7px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borde); overflow: hidden; }
.vd-barra i { display: block; height: 100%; transition: width .4s ease; }
.vd-barra i.n-ok { background: var(--verde); }
.vd-barra i.n-alerta { background: var(--alerta); }
.vd-barra i.n-peligro { background: var(--peligro); }
.vd-licencia { border-left: 4px solid var(--peligro); background: var(--peligro-suave); }
.vd-licencia > b { display: block; margin-bottom: 4px; }
.vd-sospecha { margin-top: 8px; font-style: italic; border-left: 3px solid var(--alerta); padding-left: 8px; }
.vd-grilla { display: grid; grid-template-columns: 1fr; gap: var(--e-3); align-items: start; }
@media (min-width: 760px) { .vd-grilla { grid-template-columns: 1fr 1fr; } }
.vd-enf { margin-top: 0 !important; border-left: 4px solid var(--peligro); }
.vd-enf.tratada { border-left-color: var(--verde); opacity: .8; }
.vd-enf-nom { display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline; margin-bottom: 4px; }
.vd-vicios, .vd-fam { display: grid; grid-template-columns: 1fr; gap: var(--e-2); margin-top: var(--e-2); }
@media (min-width: 700px) { .vd-vicios { grid-template-columns: 1fr 1fr; } }
.vd-vicio, .vd-pariente { border: 1px solid var(--borde); border-radius: var(--r-1); padding: var(--e-2); background: var(--superficie-2); }
.vd-vicio.on { border-color: var(--alerta); }
.vd-pariente.hablo { opacity: .65; border-color: var(--peligro); }
.vd-vicio-nom, .vd-fam-nom { display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline; }
.vd-puntos { letter-spacing: 2px; color: var(--alerta); font-size: .8rem; }

/* ---------- v3.0: el poder territorial ---------- */
.pd-resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); text-align: center; margin-top: var(--e-2); }
.pd-resumen b { display: block; font-family: var(--f-titulo); font-size: 1.1rem; }
.pd-resumen span { font-size: .7rem; color: var(--tinta-3); line-height: 1.25; display: block; }
.pd-grilla { display: grid; grid-template-columns: 1fr; gap: var(--e-3); align-items: start; }
@media (min-width: 760px) { .pd-grilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .pd-grilla { grid-template-columns: 1fr 1fr 1fr; } }
.pd-gob { margin-top: 0 !important; text-align: left; }
.pd-gob.enojado { border-left: 4px solid var(--peligro); }
.pd-gob-nom { display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline; }
.pd-int { font-size: .8rem; margin: 7px 0 4px; }
.pd-obra { padding: 9px 0; border-bottom: 1px dashed var(--borde); text-align: left; }
.pd-obra-pie { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); margin-top: 5px; }

/* ---------- v3.0: el ciclo económico y las efemérides ---------- */
.tp-ciclo { border-left: 4px solid var(--py-oro); }
.tp-ciclo-nom { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-bottom: 3px; font-size: 1.02rem; }
/* El aviso de la proxima efemeride. Tenia un margen superior NEGATIVO para
   pegarse al titulo de arriba, y cuando arriba habia una tarjeta de ciclo
   economico se le metia debajo: el texto quedaba cortado por el borde de la
   tarjeta. Ahora tiene entidad propia — es un aviso con fecha, no una nota
   al pie de otra cosa. */
.tp-proxima {
  margin: 0 0 var(--e-3); font-style: italic;
  border-left: 3px solid var(--py-oro, var(--alerta));
  padding: 8px 12px;
  background: var(--superficie-2);
  border-radius: var(--r-1);
}
.tp-ciclo { margin-bottom: var(--e-2); }
/* El epílogo, en la pantalla final */
.ep-item { display: flex; gap: var(--e-2); padding: 7px 0; border-bottom: 1px dashed var(--borde); text-align: left; }
.ep-item i { font-style: normal; font-size: 1.1rem; flex-shrink: 0; }
.ep-item b { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); }

/* ============================================================
   v3.2 · LA VIDA PRIVADA: salidas, la otra y los chicos
   ============================================================ */
.sal-grilla { display: grid; grid-template-columns: 1fr; gap: var(--e-3); align-items: start; margin-top: var(--e-3); }
@media (min-width: 640px) { .sal-grilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .sal-grilla { grid-template-columns: 1fr 1fr 1fr; } }
.sal-item { border: 1px solid var(--borde); border-radius: var(--r-1); padding: var(--e-2); background: var(--superficie-2); display: flex; flex-direction: column; gap: 6px; }
.sal-cab { display: flex; align-items: center; gap: 7px; }
.sal-ico { font-size: 1.25rem; line-height: 1; flex-shrink: 0; }
.sal-datos { display: flex; flex-wrap: wrap; gap: 5px; }
.sal-item .btn-mini { margin-top: auto; align-self: flex-start; }
.sal-no { font-style: italic; opacity: .8; }

.am-caja { border-left: 3px solid var(--peligro); }
.am-caja.hablo { opacity: .75; }

.hj-pedido { border-left: 3px solid var(--dorado, var(--alerta)); }
.hj-ped-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.hj-grilla { display: grid; grid-template-columns: 1fr; gap: var(--e-3); align-items: start; margin-top: var(--e-3); }
@media (min-width: 860px) { .hj-grilla { grid-template-columns: 1fr 1fr; } }
.hj-item { border: 1px solid var(--borde); border-radius: var(--r-1); padding: var(--e-2); background: var(--superficie-2); }
.hj-item.expuesto { border-color: var(--peligro); }
.hj-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.hj-cole { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--borde); }
.hj-sin { color: var(--peligro); font-style: italic; }

/* ============================================================
   v3.4 · LA CUENTA DEL PATRÓN (pestaña Congreso)
   ============================================================ */
.pv-caja { border-left: 3px solid var(--dorado, var(--alerta)); }
.pv-grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-2); text-align: center; }
@media (min-width: 620px) { .pv-grilla { grid-template-columns: repeat(4, 1fr); } }
.pv-dato { border: 1px solid var(--borde); border-radius: var(--r-1); padding: var(--e-2); background: var(--superficie-2); }
.pv-dato b { display: block; font-size: 1.5rem; line-height: 1.1; }
.pv-dato span { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-3); }
.pv-dato.pv-alerta b { color: var(--alerta); }
.pv-dato.pv-ok b { color: var(--verde); }
.pv-nota { margin-top: var(--e-2); }
.pv-prestados { margin-top: 6px; border-left: 2px solid var(--alerta); padding-left: 8px; }
.pv-rota { margin-top: 6px; color: var(--peligro); font-style: italic; }
.pv-precio { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: space-between; align-items: baseline;
  margin-top: var(--e-2); padding-top: var(--e-2); border-top: 1px dashed var(--borde); font-size: .82rem; }
.pv-total { white-space: nowrap; }

/* ============================================================
   v3.5 · EL EXPEDIENTE DEL SENADOR
   ============================================================ */
.sup-caja { margin-bottom: var(--e-3); border-left: 3px solid var(--borde); }
.sup-listas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.sn-dossier { border-left: 3px solid var(--dorado, var(--alerta)); }
.sn-dat { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); text-align: center; margin-top: var(--e-2); }
.sn-dat > div { border: 1px solid var(--borde); border-radius: var(--r-1); padding: 6px 4px; background: var(--superficie-2); }
.sn-dat b { display: block; font-size: .98rem; line-height: 1.2; }
.sn-dat span { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tinta-3); }
.sn-dat .sn-mal b { color: var(--peligro); }
.sn-carpeta { margin-top: 8px; border-left: 2px solid var(--peligro); padding-left: 8px; }
.sn-supl { font-style: italic; }
.sn-destit { margin-top: var(--e-3); padding-top: var(--e-2); border-top: 1px dashed var(--borde); }

/* ============================================================
   v3.8 · INSEGURIDAD Y ACADEMIA POLICIAL
   El bloque abre la pestaña Calle, así que reusa el termómetro que ya
   existe (.termo) y agrega tres piezas propias: la grilla de los cuatro
   números de la fuerza, la barra de presión por las cabezas, y el
   selector de ritmo de la academia — que es la decisión del sistema y
   por eso son botones grandes y no un <select>.
   ============================================================ */
.sg-caja { margin-top: var(--e-3); }
.sg-grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-2); text-align: center; }
@media (min-width: 620px) { .sg-grilla { grid-template-columns: repeat(4, 1fr); } }
.sg-dato { border: 1px solid var(--borde); border-radius: var(--r-1); padding: var(--e-2); background: var(--superficie-2); }
.sg-dato b { display: block; font-family: var(--f-dato); font-size: 1.4rem; line-height: 1.1; }
.sg-dato span { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-3); }
.sg-dato.sg-ok b { color: var(--ok); }
.sg-dato.sg-medio b { color: var(--alerta); }
.sg-dato.sg-alerta b { color: var(--peligro); }
.sg-nota { margin-top: var(--e-2); }

/* La presión por las cabezas. Cuando pasa de 75 el borde se pone rojo:
   a esa altura no entregar a nadie cuesta popularidad todos los meses. */
.sg-presion { margin-top: var(--e-3); border-left: 3px solid var(--alerta); }
.sg-presion.grave { border-left-color: var(--peligro); background: var(--peligro-suave); }
.sg-barra { height: 8px; border-radius: 99px; background: var(--superficie-3); overflow: hidden; margin-top: 8px; }
.sg-barra > div { height: 100%; background: linear-gradient(90deg, var(--alerta), var(--peligro)); transition: width .4s ease; }
.sg-presion.grave .sg-barra > div { background: var(--peligro); }

/* La academia. */
.sg-academia { margin-top: var(--e-2); }
.sg-acad-cab { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: space-between; align-items: baseline; }
.sg-metas { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--e-2); margin-bottom: var(--e-2); }
.sg-meta {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 8px; border: 1px solid var(--borde); border-radius: var(--r-1);
  background: var(--superficie-2); color: inherit; cursor: pointer; text-align: center;
  transition: border-color .15s ease, transform .15s ease;
}
.sg-meta:hover:not(:disabled) { border-color: var(--alerta); transform: translateY(-1px); }
.sg-meta:disabled { cursor: default; opacity: .6; }
.sg-meta.activa { border-color: var(--ok); background: var(--ok-suave); opacity: 1; }
.sg-meta-i { font-size: 1.3rem; line-height: 1; }
.sg-meta-n { font-weight: 700; font-size: .82rem; }
.sg-meta-c { font-size: .66rem; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .03em; }
.sg-meta-hoy {
  position: absolute; top: -7px; right: 6px; padding: 1px 6px; border-radius: 99px;
  background: var(--ok); color: #fff; font-size: .58rem; font-weight: 800; letter-spacing: .06em;
}

.sg-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; margin-top: var(--e-2); }
.sg-acciones small { opacity: .75; font-weight: 400; }

/* La fila hija de la planilla: la academia colgando de "Policías", para que
   se lea que ese número sube solo y por qué. */
.tabla-planilla tr.tp-hija td { padding-left: 22px; font-size: .8rem; color: var(--tinta-3); border-top: 0; }
.tabla-planilla tr.tp-hija td:first-child::before { content: "↳ "; opacity: .6; }

/* El chip rojo del bloque de seguridad: se usa cuando la presion aprieta
   o cuando el ingreso a la academia esta suspendido. */
.chip.chip-rojo { background: var(--peligro-suave); color: var(--peligro); border-color: currentColor; }

/* ============================================================
   v3.9 · LAS GRILLAS DEL GABINETE
   Tres grillas que antes se acomodaban mirando el ANCHO DE LA PANTALLA
   con un media query, aunque vivían adentro de una columna que medía la
   mitad. En un monitor de 1280 el media query decía "dos columnas" y las
   metía a las dos en 566 px: quedaban dos tarjetas de 277 px, apretadas,
   mientras el otro lado del panel estaba vacío.

   Ahora se acomodan por el ancho del CONTENEDOR, con auto-fit: si hay
   lugar para tres, entran tres; si hay para una sola, entra una y ocupa
   todo. Es la misma regla que ya usan las otras grillas del juego.
   ============================================================ */
.min-grilla,
.ex-grilla,
.rencor-grilla {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  align-items: start;
}
.rencor-grilla { margin-bottom: var(--e-4); }
.min-grilla { margin-bottom: var(--e-3); }

/* La puerta giratoria: el aviso arriba del gabinete. Cambia de color según
   cuánto rotaste, porque el número solo no dice si está bien o mal. */
.pg-caja { margin-bottom: var(--e-3); border-left: 3px solid var(--borde); }
.pg-caja.pg-media { border-left-color: var(--alerta); }
.pg-caja.pg-alta { border-left-color: var(--peligro); }
.pg-caja.pg-critica { border-left-color: var(--peligro); background: var(--peligro-suave); }
.pg-cab { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: space-between; align-items: center; }

/* ============================================================
   v4.0 · LO QUE TE FALTA CONTESTAR
   La barra vive arriba de las pestañas y es lo primero que se ve al
   volver a una partida. Tres estados: normal (hay cosas), 'vence'
   (algo se termina este mes) y 'traba' (no se puede cerrar el mes).
   ============================================================ */
#pendientes { margin: 0 0 var(--e-3); }
.pd-cab {
  width: 100%; display: flex; align-items: center; gap: var(--e-2);
  padding: 9px 12px; border: 1px solid var(--borde); border-radius: var(--r-1);
  background: var(--superficie-2); color: inherit; cursor: pointer; text-align: left;
  font: inherit; transition: border-color .15s ease, background .15s ease;
}
.pd-cab:hover { border-color: var(--alerta); }
.pd-cab.vence { border-color: var(--alerta); background: var(--alerta-suave, var(--superficie-2)); }
.pd-cab.traba { border-color: var(--peligro); background: var(--peligro-suave); }
.pd-punto {
  flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px;
  display: grid; place-items: center; background: var(--alerta); color: #1a1a1a;
  font-family: var(--f-dato); font-weight: 800; font-size: .78rem;
}
.pd-cab.traba .pd-punto { background: var(--peligro); color: #fff; }
.pd-tit { flex: 1; font-weight: 700; font-size: var(--t-sm); }
.pd-flecha { flex: none; color: var(--tinta-3); font-size: .8rem; }

.pd-lista { display: grid; gap: 6px; margin-top: 6px; }
.pd-item {
  display: flex; align-items: center; gap: var(--e-2); width: 100%;
  padding: 9px 11px; border: 1px solid var(--borde); border-radius: var(--r-1);
  background: var(--superficie); color: inherit; cursor: pointer; text-align: left;
  font: inherit; transition: transform .15s ease, border-color .15s ease;
}
.pd-item:hover { border-color: var(--alerta); transform: translateX(2px); }
.pd-item.urge { border-left: 3px solid var(--peligro); }
.pd-ico { flex: none; font-size: 1.15rem; line-height: 1; }
.pd-txt { flex: 1; min-width: 0; }
.pd-txt b { display: block; font-size: .86rem; }
.pd-txt small { display: block; color: var(--tinta-3); font-size: .76rem; line-height: 1.35;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* El puntito de la pestaña. Position relative lo pone el propio botón de
   #pestanas, que ya lo es para el subrayado del activo. */
#pestanas button { position: relative; }
.tab-aviso {
  position: absolute; top: 3px; right: 5px;
  min-width: 15px; height: 15px; padding: 0 4px; border-radius: 99px;
  display: grid; place-items: center;
  background: var(--alerta); color: #1a1a1a;
  font-family: var(--f-dato); font-weight: 800; font-size: .6rem; line-height: 1;
  box-shadow: 0 0 0 2px var(--fondo-alt, var(--superficie));
  pointer-events: none;
}
.tab-aviso.apura { background: var(--peligro); color: #fff; animation: pd-latido 1.8s ease-in-out infinite; }
@keyframes pd-latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .tab-aviso.apura { animation: none; } }

/* ============================================================
   v4.0 · LAS LISTAS DE CANDIDATOS NO PUEDEN DESBORDAR
   ------------------------------------------------------------
   .btn-mini nace con white-space:nowrap, que está bien para un botón de
   dos palabras en una botonera ancha. Pero los candidatos a ministro son
   nombres largos con título adelante ("Cra. Filomena Duarte Villamayor")
   y viven adentro de una tarjeta de 278 px: el botón medía 304 px y se
   salía 46 px por la derecha, encimándose con la tarjeta de al lado.

   Dos reglas. La primera es la red de seguridad: en cualquier lista de
   opciones, el texto puede cortarse en varias líneas y el botón nunca
   pasa el ancho de su caja. La segunda cambia la forma: adentro de una
   tarjeta angosta, los candidatos dejan de ser una botonera y pasan a ser
   una LISTA — cada uno ocupa el ancho entero, con el nombre a la
   izquierda y lo que cuesta a la derecha, que es como se lee un menú de
   opciones donde todas hacen lo mismo y solo cambia quién y a qué precio.
   ============================================================ */
.mi-cands .btn-mini { white-space: normal; max-width: 100%; }

.min-grilla .mi-cands,
.ex-grilla .mi-cands {
  display: grid; grid-template-columns: 1fr; gap: 5px;
}
.min-grilla .mi-cands .btn-mini,
.ex-grilla .mi-cands .btn-mini {
  width: 100%; justify-content: space-between; text-align: left;
  padding: 7px 10px; line-height: 1.3; letter-spacing: .03em;
  min-height: 0; min-block-size: 34px;
}
/* Los chips informativos (RECICLADO, fuera de su área) comparten contenedor
   con los botones pero no son opciones: no se estiran. */
.min-grilla .mi-cands > .chip,
.ex-grilla .mi-cands > .chip { justify-self: start; }

/* Lo que cuesta, a la derecha y sin gritar. */
.bm-costo {
  flex: none; margin-left: var(--e-2);
  font-size: .82em; font-weight: 600; letter-spacing: .02em;
  opacity: .72; text-transform: none; white-space: nowrap;
}

/* En la cúpula el contenedor es más ancho, así que ahí siguen siendo
   botones sueltos — pero el nombre igual puede cortarse si hace falta. */
.ministro .mi-cands .btn-mini { max-width: 100%; }

/* ============================================================
   v4.2 · LA JUSTICIA POR DENTRO
   Los nueve de la Corte se leen como fichas, no como una lista: cada
   uno tiene cara propia, un precio y una carpeta que se va llenando.
   Misma gramática visual que el expediente de senador.
   ============================================================ */
.jz-grilla { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: start; margin-bottom: var(--e-3); }
.jz-min { border-left: 3px solid var(--borde); }
.jz-min.jz-tuyo { border-left-color: var(--ok); background: var(--ok-suave); }
.jz-min.jz-ins { border-left-color: var(--py-oro, var(--alerta)); }
.jz-f { font-style: italic; margin-top: 4px; }
.jz-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); text-align: center; margin-top: var(--e-2); }
.jz-datos > div { border: 1px solid var(--borde); border-radius: var(--r-1); padding: 5px 3px; background: var(--superficie-2); }
.jz-datos b { display: block; font-family: var(--f-dato); font-size: .95rem; line-height: 1.2; }
.jz-datos span { font-size: .64rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tinta-3); }
.jz-carpeta { margin-top: var(--e-2); padding-left: 8px; border-left: 2px solid var(--alerta); font-size: .8rem; line-height: 1.5; }
.jz-et { color: var(--tinta-3); font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; }
.jz-deb { margin-top: 4px; color: var(--peligro); font-style: italic; }
.jz-fiscal { border-left: 3px solid var(--alerta); }
.jz-aviso { margin-top: 6px; border-top: 1px dashed var(--borde); padding-top: 6px; }

/* v4.4 · BINACIONALES Y ENTES */
.bn-anexo { border-left: 3px solid var(--borde); }
.bn-anexo.negociando { border-left-color: var(--alerta); }
.bn-anexo.bien { border-left-color: var(--ok); background: var(--ok-suave); }
.bn-anexo.mal { border-left-color: var(--peligro); background: var(--peligro-suave); }
.bn-posturas { display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); margin: var(--e-3) 0; }
.bn-postura {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 8px; border: 1px solid var(--borde); border-radius: var(--r-1);
  background: var(--superficie-2); color: inherit; cursor: pointer; text-align: center; font: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.bn-postura:hover:not(:disabled) { border-color: var(--alerta); transform: translateY(-1px); }
.bn-postura:disabled { opacity: .55; cursor: default; }
.bn-p-i { font-size: 1.3rem; line-height: 1; }
.bn-p-n { font-weight: 700; font-size: .85rem; }
.bn-p-d { font-size: .7rem; color: var(--tinta-3); }
.bn-entes { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: start; }
.bn-ente { border-left: 3px solid var(--borde); }
.bn-ente.bien { border-left-color: var(--ok); }
.bn-ente.medio { border-left-color: var(--alerta); }
.bn-ente.mal { border-left-color: var(--peligro); }

/* v4.3 · DE DONDE VENIS Y TU OBJETIVO */
.og-caja { border-left: 3px solid var(--py-oro, var(--alerta)); }
.og-cab { display: flex; gap: var(--e-3); align-items: flex-start; }
.og-i { font-size: 2.2rem; line-height: 1; flex: none; }
.og-n { font-family: var(--f-titulo); font-weight: 800; font-size: var(--t-md); }
.og-pros { display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-top: var(--e-3); }
.og-pro, .og-contra { border: 1px solid var(--borde); border-radius: var(--r-1); padding: 8px 10px; font-size: .84rem; background: var(--superficie-2); }
.og-pro { border-left: 3px solid var(--ok); }
.og-contra { border-left: 3px solid var(--peligro); }
.og-et { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-3); margin-bottom: 2px; }
.og-obj { margin-top: var(--e-2); border-left: 3px solid var(--alerta); }
.og-obj.listo { border-left-color: var(--ok); background: var(--ok-suave); }
.og-pista { margin-top: 4px; font-style: italic; }

/* v4.5 · LA FRONTERA */
.fr-caja { margin-top: var(--e-3); }
.fr-aviso { margin-top: 8px; border-left: 2px solid var(--alerta); padding-left: 8px; }

/* v4.6 · LAS MUNICIPALES */
.mu-caja { border-left: 3px solid var(--alerta); }
.mu-caja.bien { border-left-color: var(--ok); background: var(--ok-suave); }
.mu-caja.mal { border-left-color: var(--peligro); background: var(--peligro-suave); }
.mu-pron { display: flex; gap: var(--e-3); align-items: flex-start; }
.mu-num { font-family: var(--f-dato); font-size: 2.4rem; font-weight: 800; line-height: 1; flex: none; }
.mu-num small { font-size: 1rem; opacity: .6; }
.mu-barra { height: 10px; border-radius: 99px; background: var(--superficie-3); overflow: hidden; margin: var(--e-3) 0; }
.mu-barra > div { height: 100%; background: linear-gradient(90deg, var(--peligro), var(--alerta), var(--ok)); }
.mu-partes { display: grid; gap: 3px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.mu-parte { display: flex; justify-content: space-between; gap: var(--e-2); font-size: .8rem; padding: 3px 0; border-bottom: 1px dashed var(--borde); }
.mu-parte b { font-family: var(--f-dato); }

/* v4.8 · LA LINEA DE TIEMPO DEL MANDATO */
.lt-caja { margin-top: var(--e-3); padding-top: var(--e-3); border-top: 1px dashed var(--borde); text-align: left; }
.lt-tit { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); margin-bottom: 6px; }
.lt-svg { width: 100%; height: 54px; display: block; overflow: visible; }
.lt-meses { display: flex; gap: 1px; margin-top: 3px; }
.lt-mes { flex: 1 1 0; height: 7px; border-radius: 1px; background: var(--superficie-3); cursor: help; }
.lt-mes.alto { background: var(--ok); }
.lt-mes.medio { background: var(--alerta); }
.lt-mes.bajo { background: var(--peligro); }
.lt-pies { display: flex; justify-content: space-between; font-size: .66rem; color: var(--tinta-3); margin-top: 3px; }
.lt-hitos { margin-top: var(--e-2); display: grid; gap: 4px; }
.lt-hito { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: baseline; font-size: .76rem; }
.lt-h-mes { color: var(--tinta-3); white-space: nowrap; }
.lt-h-delta { font-family: var(--f-dato); font-weight: 700; white-space: nowrap; }
.lt-h-txt { color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   v4.10 · SECCIONES PLEGABLES
   Para los bloques que CRECEN con la partida: el libro de rencores suma
   una ficha por cada persona que sacás, y en un segundo mandato son doce.
   Un bloque así no puede vivir arriba de todo ni abierto para siempre.
   ============================================================ */
/* v4.12: cada plegable es una TARJETA, no un pie de página. Ver el bloque
   de arriba: cuando eran una sola al final de la pestaña, una línea punteada
   alcanzaba; ahora son seis, en dos columnas, y necesitan caja propia. */
.seccion-plegable {
  border: 1px solid var(--borde); border-radius: var(--r-2);
  background: var(--superficie); overflow: hidden;
  margin: 0 0 var(--e-3);
}
.seccion-plegable > summary {
  display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap;
  cursor: pointer; list-style: none;
  padding: 10px var(--e-3);
  background: var(--superficie-2);
  font-family: var(--f-titulo); font-weight: 700;
  transition: background var(--vel-rapida) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.seccion-plegable > summary:hover { background: var(--superficie-3, var(--superficie-2)); }
.seccion-plegable[open] > summary { border-bottom: 1px solid var(--borde); }
.seccion-plegable > summary::-webkit-details-marker { display: none; }
.seccion-plegable > summary::after {
  content: '▾'; margin-left: auto; color: var(--tinta-3); font-size: .9rem;
  transition: transform var(--vel-rapida) var(--ease);
}
.seccion-plegable[open] > summary::after { transform: rotate(180deg); }
.seccion-plegable > summary:hover .sp-tit { color: var(--py-oro); }
.sp-tit { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-md); }
/* El cuerpo respira, pero sin duplicar el margen de la primera tarjeta que
   trae adentro: por eso el :first-child sin margen de arriba. */
.sp-cuerpo { padding: var(--e-3); }
.sp-cuerpo > *:first-child { margin-top: 0; }
.sp-cuerpo > *:last-child { margin-bottom: 0; }
.sp-cuerpo > h3:first-child { margin-top: 0; }

/* ============================================================
   v4.12 · LA PESTAÑA GABINETE EN DOS COLUMNAS
   ============================================================
   El reparto lo hace balancearColumnas() en JS midiendo alturas reales, pero
   el aire entre bloques es cosa del CSS: sin esto, dos plegables cerradas
   quedaban pegadas una encima de la otra como dos renglones de una lista.
   ============================================================ */
.gab-col { min-width: 0; }                  /* sin esto una tabla ancha rompe la grilla */
.gab-bloque { margin-bottom: var(--e-3); }
.gab-bloque:last-child { margin-bottom: 0; }
.gab-bloque > h3:first-child { margin-top: 0; }
/* El rival y el aliado no son plegables (son dos tarjetas sueltas): que no
   se peguen al borde de arriba de su columna. */
.gab-bloque h3 { margin-top: var(--e-3); }
.gab-bloque > *:first-child { margin-top: 0; }

/* v4.13: las escenas traen saltos de línea de verdad (la lista de la terna,
   la cuenta de votos del Patrón). Sin esto se colapsaban en un solo renglón. */
#mj-texto { white-space: pre-line; }