/* =====================================================================
   Piezas de la Asamblea · hemiciclo, distancia al quórum, V01, V02 y vías.
   Solo usa tokens de sitio.css. Funciona dentro de cualquier contenedor de 320 a 1280 px.
   ===================================================================== */

/* ---------- Marco común de las piezas ---------- */
.pieza-mini { margin: 0; min-width: 0; }
.pieza-mini__lienzo { width: 100%; }
.pieza-mini__lienzo svg { display: block; width: 100%; height: auto; font-family: var(--sans); }
.grafico svg, .pieza-mini svg { min-width: 0; }

/* Sin movimiento: ninguna transición ni entrada escalonada */
@media (prefers-reduced-motion: reduce) {
  .casilla, .hemi__asiento { transition: none !important; }
  .entra .casilla { opacity: 1 !important; transform: none !important; }
}

/* ---------- Hemiciclo (pieza firma 1) ---------- */
.hemi-marco { min-width: 0; }
.hemi-marco .grafico__titulo { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); }
.hemi__controles { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin: 0 0 var(--e-3); }
.hemi__etiqueta { font: 650 .85rem/1 var(--sans); color: var(--tinta-2); }
.hemi__rango { flex: 1 1 160px; min-width: 0; min-height: 32px; accent-color: var(--tinta); margin: 0; }
.hemi__salida { font: 650 .85rem/1 var(--sans); font-variant-numeric: tabular-nums; min-width: 6.5em; }
.hemi__pasos { display: flex; gap: var(--e-2); }
.hemi__resumen { font: 650 .95rem/1.4 var(--sans); margin: var(--e-2) 0 var(--e-3); }
.hemi__cifra { font-family: var(--serif); font-weight: 700; fill: var(--tinta); font-variant-numeric: tabular-nums lining-nums; }
.hemi__asiento { stroke-width: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .hemi__asiento { transition: fill .25s ease, stroke .25s ease; }
}

/* ---------- Distancia al quórum (pieza firma 2) ---------- */
.distancia-mini .pieza-mini__lienzo svg { overflow: visible; }

/* ---------- V02 · convocatorias ---------- */
.convo__pie {
  display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; justify-content: space-between;
  margin-top: var(--e-4); padding-top: var(--e-3); border-top: 1px solid var(--linea);
}
.convo__proxima { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.convo__proxima span { font-weight: 400; }

/* ---------- Vías (V09 + tarjetas) ---------- */
.vias-caja { container-type: inline-size; min-width: 0; }
.vias { display: grid; gap: var(--e-5); min-width: 0; }
.vias__grafico { min-width: 0; }
.vias__tarjetas { display: grid; gap: var(--e-3); min-width: 0; }
@container (min-width: 640px) {
  .vias { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: var(--e-6); }
}
.vias__tira-bloque { margin: var(--e-5) 0; }
.vias__tira-rotulo { font: 600 .78rem/1.4 var(--sans); color: var(--tinta-2); margin: 0 0 var(--e-2); }
.vias__tira { display: flex; flex-wrap: wrap; gap: 3px; }
.vias__tira span { width: 12px; height: 12px; border-radius: 2px; background: var(--c); }
.via-card .cifra__fuente { display: none; } /* la fuente es una sola, bajo la composición */
.via-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-3); align-items: start;
  border-top: 3px solid var(--c, var(--tinta));
}
.via-card__icono { width: 40px; height: 40px; color: var(--c, var(--tinta)); flex: none; }
.via-card__nombre { font: 650 1.1rem/1.25 var(--serif); margin: 0 0 var(--e-2); }
.via-card__cifra { border-top: 0; padding-top: 0; }
.via-card__cifra .cifra__valor { font-size: 2rem; }
.via-card__texto { margin: var(--e-2) 0 0; font-size: .95rem; color: var(--tinta-2); }