/* V48 · El hilo del año: escena horizontal con seis carriles, banda de etapas, cumbre, luchas abiertas
   y versión vertical por etapas. Colores solo por variable; el rojo queda para la falta. */

.hilo__filtro { display: grid; gap: var(--e-2); margin: 0 0 var(--e-3); }
.hilo__filtro-l { display: grid; gap: .3rem; width: 100%; min-width: 0; font: 650 .9rem var(--sans); }
.hilo__select { width: 100%; min-width: 0; font: inherit; color: var(--tinta); background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--radio); padding: .45rem .6rem; min-height: 44px; }
@media (min-width: 640px) { .hilo__filtro-l { display: inline-grid; width: auto; } .hilo__select { width: min(34rem, 100%); } }
.hilo__caso { font-size: .92rem; }
.hilo__caso p { margin: 0 0 .4rem; max-width: none; }
.hilo__caso-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2) var(--e-3); margin: var(--e-2) 0; }
.hilo__caso-cifras div { border-top: 2px solid var(--tinta); padding-top: .3rem; }
.hilo__caso-cifras dt { font: 700 1.5rem/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.hilo__caso-cifras dd { margin: 0; font-size: .82rem; color: var(--tinta-2); }
@media (min-width: 640px) { .hilo__caso-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.hilo__notas { display: grid; gap: .35rem; margin-top: var(--e-2); }
.hilo__nota { margin: 0; max-width: none; font-size: .8rem; line-height: 1.45; color: var(--tinta-2); }

/* ---------- Escena horizontal ---------- */
.hilo__envoltorio { padding-bottom: 8px; }
.hilo__escena { position: relative; }
.hilo__carril { position: absolute; left: 0; width: 100%; background: transparent; }
.hilo__carril--par { background: color-mix(in srgb, var(--tinta) 4%, transparent); }
.hilo__carril-t { position: absolute; left: 0; width: 132px; display: flex; align-items: center; font: 600 .8rem/1.25 var(--sans); color: var(--tinta-2); padding-right: 6px; }
.hilo__mes-linea { position: absolute; width: 1px; background: var(--linea); }
.hilo__mes { position: absolute; font: 600 .78rem/1 var(--sans); color: var(--tinta-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hilo__hilos { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.hilo__hilo { fill: none; stroke: var(--tinta-2); stroke-width: 1; opacity: .45; transition: opacity .15s, stroke-width .15s; }
.hilo__hilo.is-activo { stroke: var(--tinta); stroke-width: 2; opacity: 1; }
.hilo__escena--activa .hilo__hilo:not(.is-activo) { opacity: .08; }
.hilo__hilo.is-atenuado { opacity: .06; }

/* Marcas: cada forma con su significado (leyenda) */
.hilo__marca { position: absolute; transform: translate(-50%, -50%); box-sizing: border-box; display: grid; place-items: center; font: 700 .72rem/1 var(--sans); color: var(--papel); background: var(--via, var(--tinta-2)); cursor: pointer; border-radius: 2px; }
.hilo__marca:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.hilo__marca--casilla { width: 10px; height: 10px; }
.hilo__marca--logro { width: 16px; height: 16px; background: var(--via-institucional); }
.hilo__marca--hueca { width: 10px; height: 10px; background: var(--superficie); border: 2px solid var(--tinta); }
.hilo__marca--oficio { width: 8px; height: 8px; background: var(--tinta-2); }
.hilo__marca--punto { width: 6px; height: 6px; border-radius: 50%; background: var(--tinta-2); }
.hilo__marca--sesion-ok { width: 16px; height: 16px; background: var(--tinta); }
.hilo__marca--sesion-neutra { width: 16px; height: 16px; background: var(--superficie); border: 1.5px solid var(--tinta-2); color: var(--tinta-2); }
.hilo__marca--programada { width: 16px; height: 16px; background: var(--superficie); border: 1.5px dashed var(--tinta-2); }
.hilo__marca--reves { width: 12px; height: 12px; background: var(--superficie); border: 1.5px dashed var(--rojo); }
.hilo__marca--sesion-falta { width: 16px; height: 16px; background: repeating-linear-gradient(-45deg, var(--rojo) 0 1.5px, var(--falta-suave) 1.5px 5px); border: 1.5px solid var(--rojo); color: transparent; }
.hilo__marca--sesion-falta::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--superficie); z-index: 1; }
.hilo__marca--sesion-falta::before { content: "●"; position: relative; z-index: 2; color: var(--rojo); font: 700 .6rem/1 var(--sans); }
.hilo__marca--cumbre { box-shadow: 0 0 0 2px var(--superficie); }
.hilo__marca.is-enlazado { outline: 2px solid var(--tinta); outline-offset: 2px; }
.hilo__marca.is-atenuado, .hilo__lucha.is-atenuado, .hilo__lucha-t.is-atenuado { opacity: .18; }

/* Cumbre: columna azul institucional que cruza los carriles */
.hilo__cumbre { position: absolute; width: 20px; background: var(--via-institucional); border-radius: 3px; opacity: .9; }
.hilo__cumbre-tarjeta { position: absolute; box-sizing: border-box; background: var(--superficie); border: 1px solid var(--linea); border-top: 3px solid var(--via-institucional); border-radius: var(--radio); padding: var(--e-2) var(--e-3); }
.hilo__cumbre-cab { font: 600 .8rem/1.3 var(--sans); color: var(--tinta-2); margin: 0 0 .2rem; max-width: none; }
.hilo__cumbre-tit { font: 650 1.05rem/1.25 var(--serif); margin: 0 0 var(--e-2); max-width: none; }
.hilo__cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); margin: 0; }
.hilo__cifras dt { font: 700 1.2rem/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.hilo__cifras dd { margin: 0; font-size: .8rem; line-height: 1.3; color: var(--tinta-2); }

/* Banda de etapas */
.hilo__tramo { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; overflow: hidden; padding: 6px 8px; background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--radio); color: var(--tinta); text-decoration: none; font: 500 .8rem/1.3 var(--sans); }
a.hilo__tramo:hover { border-color: var(--tinta); color: var(--tinta); }
.hilo__tramo-n { font: 700 .78rem/1.2 var(--sans); color: var(--tinta-2); }
.hilo__tramo-cap { font: 650 .85rem/1.25 var(--serif); }
.hilo__tramo-per { color: var(--tinta-2); }
.hilo__tramo-tot { margin-top: auto; font-variant-numeric: tabular-nums; color: var(--tinta-2); }
.hilo__tramo--sigue { background: transparent; border: 1.5px dashed var(--tinta-2); justify-content: center; align-items: center; padding: 6px 3px; text-align: center; }
.hilo__tramo--sigue .hilo__tramo-n { font: 700 .7rem/1.2 var(--sans); color: var(--tinta-2); overflow-wrap: normal; }

/* Luchas abiertas: una línea fina desde su ancla hasta la zona derecha */
.hilo__lucha { position: absolute; height: 0; border-top: 1.5px solid var(--estado-tramite); }
.hilo__lucha--falta { border-top: 1.5px dashed var(--rojo); }
/* El rótulo de cada lucha va completo (sin «…»): hasta tres líneas dentro de su fila */
.hilo__lucha-t { position: absolute; display: block; font: 600 .76rem/1.2 var(--sans); color: var(--tinta); cursor: default; }
/* Títulos de etapa: fila de dos alternadas bajo la banda; cada uno enlaza a su capítulo y va completo */
.hilo__titulo { position: absolute; box-sizing: border-box; padding-right: 6px; font: 600 .76rem/1.25 var(--sans); color: var(--tinta); text-decoration: none; }
.hilo__titulo strong { font-weight: 700; color: var(--tinta-2); margin-right: .2rem; }
.hilo__titulo-p { display: block; font-weight: 500; color: var(--tinta-2); }
a.hilo__titulo:hover { text-decoration: underline; }
.hilo__titulo--sigue { color: var(--tinta-2); }
.hilo__caso-nota { margin: var(--e-2) 0 0; max-width: none; font-size: .8rem; color: var(--tinta-2); }
.hilo__resumen-enlace { margin: var(--e-3) 0 0; font: 650 .92rem var(--sans); }
.hilo__movil-etapa--resumen { border-top: 1px solid var(--linea); padding: var(--e-2) 0; display: grid; gap: .15rem; }
.hilo__lucha-est { color: var(--tinta-2); font-weight: 650; }
.hilo__base { fill: none; stroke: var(--tinta-2); stroke-width: 1.5; stroke-linejoin: round; opacity: .8; }
.hilo__base-t { position: absolute; font: 600 .8rem/1.2 var(--sans); color: var(--tinta-2); white-space: nowrap; }
.hilo__cumbre-caso { font: 600 .82rem/1.35 var(--sans); color: var(--tinta); margin: var(--e-2) 0 0; max-width: none; border-top: 1px solid var(--linea); padding-top: var(--e-2); }
.hilo__tramo--corto { justify-content: center; align-items: flex-start; }

/* ---------- Vista vertical (móvil) ---------- */
.hilo__movil-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.hilo__movil-etapa { border-top: 1px solid var(--linea); padding: var(--e-2) 0; }
.hilo__movil-etapa > summary { cursor: pointer; display: grid; gap: .15rem; min-height: 44px; list-style: none; }
.hilo__movil-etapa > summary::-webkit-details-marker { display: none; }
.hilo__movil-n { font: 700 .78rem/1.2 var(--sans); color: var(--tinta-2); }
.hilo__movil-t { font: 650 1.05rem/1.25 var(--serif); }
.hilo__movil-p, .hilo__movil-tot { font-size: .8rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.hilo__movil-cap { margin: var(--e-2) 0; font-size: .85rem; }
.hilo__movil-nodos { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.hilo__movil-nodo { display: grid; gap: .1rem; font-size: .9rem; line-height: 1.4; }
.hilo__movil-nodo time { font: 600 .82rem var(--sans); font-variant-numeric: tabular-nums; }
.hilo__movil-carril { font: 600 .78rem var(--sans); color: var(--tinta-2); }
.hilo__movil-cumbre { border: 1px solid var(--linea); border-top: 3px solid var(--via-institucional); border-radius: var(--radio); padding: var(--e-3); margin: var(--e-2) 0; list-style: none; }
.hilo__movil-luchas { margin-top: var(--e-6); border-top: 1px solid var(--linea); padding-top: var(--e-4); }
.hilo__movil-luchas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.hilo__movil-lucha p { margin: 0 0 .2rem; max-width: none; }

.hilo__tablas { margin-top: var(--e-4); border-top: 1px solid var(--linea); padding-top: var(--e-3); }
.hilo__tablas > summary { cursor: pointer; font: 650 .95rem var(--sans); min-height: 44px; display: flex; align-items: center; }
.hilo__tablas h3 { font: 650 1rem var(--serif); margin: var(--e-4) 0 var(--e-2); }

@media (prefers-reduced-motion: reduce) { .hilo__hilo { transition: none; } }