/* =====================================================================
   Los 16 casos (briefing 5.3, índice). Rejilla de 16 tarjetas con número grande, título público, pregunta
   y microbarras a escala común. Un caso retenido (publicar: false) no tiene enlace ni barras: solo texto.
   ===================================================================== */

.banda-casos { padding-top: var(--e-7); padding-bottom: var(--e-7); }
@media (min-width: 1024px) { .banda-casos { padding-top: var(--e-8); padding-bottom: var(--e-8); } }
.banda-casos h1 { max-width: 16ch; margin-bottom: var(--e-4); }
.banda-casos__intro { color: var(--banda-texto-2); font-size: 1.05rem; margin-bottom: var(--e-6); }
.banda-casos__cifras { align-items: start; margin-top: var(--e-5); }
.banda-casos__cifras .cifra__valor { font-size: 2.25rem; }
.casos-banda__leer { max-width: 70ch; margin-top: var(--e-3); }
.casos-banda__leer summary { cursor: pointer; font: 650 .9rem var(--sans); color: var(--banda-texto); text-decoration: underline; text-decoration-color: var(--banda-texto-2); text-underline-offset: .2em; list-style-position: inside; }
.casos-banda__leer .lectura { color: var(--banda-texto-2); margin-top: var(--e-3); }
.orden-casos { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-4) 0 0; }
.banda-casos .fecha-corte { margin: var(--e-5) 0 0; }

.indice-casos { list-style: none; margin: var(--e-5) 0 0; padding: 0; display: grid; gap: var(--e-4); min-width: 0; }
@media (min-width: 620px) { .indice-casos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .indice-casos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); } }

.caso-idx {
  display: flex; flex-direction: column; gap: var(--e-2); min-width: 0;
  background: var(--superficie); border: 1px solid var(--linea); border-top: 3px solid var(--tinta);
  border-radius: var(--radio); padding: var(--e-3) var(--e-4) var(--e-4);
}
.caso-idx--retenido { border-top-style: dashed; border-top-color: var(--tinta-2); }
.caso-idx__num { font: 600 2.6rem/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; color: var(--tinta); }
.caso-idx__titulo { font: 650 1.12rem/1.3 var(--serif); margin: var(--e-1) 0 0; max-width: none; }
.caso-idx__titulo a { color: var(--tinta); }
.caso-idx__titulo a:hover { color: var(--rojo-hondo); text-decoration-color: currentColor; }
.caso-idx__pregunta { margin: 0; font-size: .95rem; color: var(--tinta-2); max-width: none; }
.caso-idx__texto { margin: 0; font-size: .95rem; max-width: none; }
.caso-idx__barras { list-style: none; margin: auto 0 0; padding: var(--e-2) 0 0; display: grid; gap: 6px; font-size: var(--t-dato); }
.caso-idx__fila { display: grid; grid-template-columns: 4.9rem minmax(0, 1fr) 2.2rem; gap: var(--e-2); align-items: center; }
.caso-idx__etq { color: var(--tinta-2); font-size: .8125rem; }
.caso-idx__pista { position: relative; height: 10px; border-radius: 2px; background: var(--linea); overflow: hidden; }
.caso-idx__barra { position: absolute; top: 0; bottom: 0; left: 0; background: var(--sec-4); border-radius: 2px; }
.caso-idx__n { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }