/* todoloquepagas — El directorio de casos de corrupción (/corrupcion/casos/ y la página de cada caso).
   Se carga con <Base estilos={['datos', 'areas', 'casos']}> (el directorio) o <Base estilos={['datos', 'casos']}> (un caso),
   después de tokens.css, componentes.css, sitio.css y datos.css. Regla: todos los colores salen de tokens.css.
   Neutral: ningún color de partido. El estado va como en las gráficas: tinta, lo confirmado (sentencia firme); el gris de
   contexto, lo abierto; solo el filete, lo que acabó sin condena. */

/* ---- El estado de un caso: una pastilla con su fecha ------------------------------------------------------------- */
.caso-estado { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--espacio-1) var(--espacio-3); margin: 0; }
.caso-estado__etiqueta { display: inline-block; padding: var(--espacio-1) var(--espacio-3); border: var(--grosor-control) solid var(--tinta); border-radius: var(--radio-pastilla); font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; white-space: nowrap; }
.caso-estado__fecha { font: var(--tipo-nota); color: var(--tinta-suave); }
.caso-estado--confirmado .caso-estado__etiqueta { background: var(--inverso); color: var(--sobre-inverso); border-color: var(--inverso); }
/* El gris de «abierto», a medias con el papel: el dato-neutro entero daba 4,0:1 con la letra en el tema oscuro. */
.caso-estado--abierto .caso-estado__etiqueta { background: color-mix(in srgb, var(--dato-neutro) 50%, var(--papel)); color: var(--tinta); border-color: var(--dato-neutro); }
.caso-estado--fuera .caso-estado__etiqueta { background: transparent; color: var(--tinta-suave); border-color: var(--linea-control); }

/* ---- La ficha de un caso: etiqueta y dato, en filas con filete -------------------------------------------------- */
.caso-ficha { display: grid; margin: 0; border-top: var(--grosor-control) solid var(--tinta); }
.caso-ficha > div { display: grid; gap: var(--espacio-1) var(--espacio-6); padding-block: var(--espacio-3); border-bottom: var(--grosor-linea) solid var(--linea); }
@media (min-width: 40em) { .caso-ficha > div { grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); } }
.caso-ficha dt { font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta-suave); }
.caso-ficha dd { margin: 0; font: var(--tipo-cuerpo); text-wrap: pretty; overflow-wrap: anywhere; }
.caso-otras { margin: 0; font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); text-wrap: pretty; }

/* ---- Los filtros del directorio (cliente/casos.ts los enseña: sin JavaScript, la lista entera) -------------------- */
.filtro-casos { display: grid; gap: var(--espacio-4) var(--espacio-5); align-items: end; margin: 0 0 var(--espacio-6); }
.filtro-casos[hidden] { display: none; }
@media (min-width: 40em) { .filtro-casos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .filtro-casos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.filtro-casos .tlqp-campo { max-width: none; min-width: 0; }
.filtro-casos__select { position: relative; }
.filtro-casos__select select { width: 100%; padding-right: var(--espacio-12); border-radius: var(--radio-m); appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis; }
.filtro-casos__select::after { content: ""; position: absolute; top: 50%; right: var(--espacio-5); width: 9px; height: 9px; margin-top: -8px; border-right: var(--grosor-control) solid var(--tinta); border-bottom: var(--grosor-control) solid var(--tinta); transform: rotate(45deg); pointer-events: none; }
.filtro-casos__select select option { background: var(--superficie); color: var(--tinta); }
.filtro-casos__cuenta { grid-column: 1 / -1; margin: 0; font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.filtro-casos__vacio { margin: 0; font: var(--tipo-cuerpo); }

/* ---- La lista: una fila por caso -------------------------------------------------------------------------------- */
.lista-casos { display: grid; margin: 0; padding: 0; list-style: none; border-top: var(--grosor-control) solid var(--tinta); }
.caso-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--espacio-1) var(--espacio-4); align-items: baseline; padding-block: var(--espacio-4); border-bottom: var(--grosor-linea) solid var(--linea); }
.caso-fila[hidden] { display: none; }
.caso-fila > p { margin: 0; min-width: 0; }
.caso-fila__nombre { font: 760 18px/24px var(--font-sans); letter-spacing: -0.01em; text-wrap: pretty; overflow-wrap: anywhere; }
.caso-fila__nombre a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.caso-fila__nombre a:hover { text-decoration-thickness: 2px; }
.caso-fila__estado { justify-self: end; padding: 2px var(--espacio-2); border: var(--grosor-linea) solid var(--tinta); border-radius: var(--radio-pastilla); font: var(--tipo-nota); white-space: nowrap; }
.caso-fila__estado.caso-estado--confirmado { background: var(--inverso); color: var(--sobre-inverso); border-color: var(--inverso); }
.caso-fila__estado.caso-estado--abierto { background: color-mix(in srgb, var(--dato-neutro) 50%, var(--papel)); color: var(--tinta); border-color: var(--dato-neutro); }
.caso-fila__estado.caso-estado--fuera { color: var(--tinta-suave); border-color: var(--linea-control); }
.caso-fila__datos { grid-column: 1; font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); text-wrap: pretty; }
.caso-fila__dinero { grid-column: 2; justify-self: end; font: var(--tipo-cuerpo-pequeno); font-variant-numeric: tabular-nums; text-align: right; }
/* En el móvil, el estado y el dinero bajan debajo del nombre, en una línea. */
@media (max-width: 39.99em) {
  .caso-fila { grid-template-columns: minmax(0, 1fr); }
  .caso-fila__estado, .caso-fila__dinero { grid-column: 1; justify-self: start; text-align: left; }
  .caso-fila__datos { grid-row: 2; }
}

@media print {
  .caso-estado--confirmado .caso-estado__etiqueta, .caso-fila__estado.caso-estado--confirmado { background: transparent; color: var(--tinta); border-color: var(--tinta); }
}
/* Los partidos con página propia: enlace y número de casos, en columnas que caben. */
/* En columnas que se llenan de arriba abajo (como un índice): la última nunca deja una fila con una sola pieza. */
.lista-partidos { columns: 3 240px; column-gap: var(--espacio-6); margin: 0; padding: 0; list-style: none; border-top: var(--grosor-linea) solid var(--linea); }
.lista-partidos li { break-inside: avoid; display: flex; justify-content: space-between; align-items: baseline; gap: var(--espacio-3); padding-block: var(--espacio-3); border-bottom: var(--grosor-linea) solid var(--linea); font: var(--tipo-cuerpo-pequeno); }
.lista-partidos a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.lista-partidos a:hover { text-decoration-thickness: 2px; }
.lista-partidos__n { color: var(--tinta-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lista-casos__mas { margin-top: var(--espacio-6); }
.lista-casos__mas[hidden] { display: none; }

/* El intervalo de una estimación en la gráfica de «Lo que supone»: hasta dónde llega, sin relleno. */
.grafica .rango { fill: none; stroke: var(--dato-neutro); stroke-width: 1.5; stroke-dasharray: 4 3; }
.leyenda__muestra--rango { background: transparent; border: 1.5px dashed var(--dato-neutro); }

/* ---- La línea de tiempo de un caso (components/LineaCaso.astro): hechos, destape y estado sobre una pista ----------- */
.linea-caso { display: grid; gap: var(--espacio-2); }
.linea-caso__pista { position: relative; height: 28px; margin-inline: 8px; background: linear-gradient(var(--linea), var(--linea)) left center / 100% var(--grosor-linea) no-repeat; }
.linea-caso__hechos { position: absolute; top: 9px; height: 10px; background: var(--dato-neutro); }
.linea-caso__espera { position: absolute; top: 13px; height: 2px; background: var(--tinta); }
.linea-caso__espera--sin-dato { height: 0; background: none; border-top: 2px dashed var(--tinta-suave); }
.linea-caso__destape { position: absolute; top: 3px; width: 4px; height: 22px; margin-left: -2px; background: var(--tinta); }
.linea-caso__estado { position: absolute; top: 7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--tinta); box-shadow: 0 0 0 2px var(--papel); }
.bloque--superficie .linea-caso__estado { box-shadow: 0 0 0 2px var(--superficie); }
.linea-caso__eje { display: flex; justify-content: space-between; font: var(--tipo-nota); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.linea-caso__hitos { display: grid; gap: var(--espacio-3); margin: var(--espacio-2) 0 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .linea-caso__hitos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio-6); } }
/* Cada hito, con la misma marca que en la pista delante: la barra gris, la raya y el punto. */
.linea-caso__hito { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: var(--espacio-2); align-items: baseline; }
.linea-caso__hito::before { content: ""; grid-row: 1 / span 2; align-self: start; margin-top: 5px; width: 14px; height: 10px; background: var(--dato-neutro); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.linea-caso__hito--destape::before { width: 4px; height: 16px; margin-top: 2px; margin-left: 5px; background: var(--tinta); }
.linea-caso__hito--estado::before { width: 12px; height: 12px; margin-top: 4px; margin-left: 1px; border-radius: 50%; background: var(--tinta); }
.linea-caso__anio { font: 760 16px/22px var(--font-sans); font-variant-numeric: tabular-nums; }
.linea-caso__texto { grid-column: 2; font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); text-wrap: pretty; }