/* =====================================================================
   Piezas de tiempo: riel proporcional, tarjetas colgadas, minimapa de
   meses y vista completa con filtros. Usado por línea de tiempo y casos.
   Colores solo por variable; el rayado de "falta" es el mismo de la leyenda.
   ===================================================================== */

/* Colores por vía (las casillas y los iconos toman --c) */
.via-institucional { --c: var(--via-institucional); }
.via-derecho { --c: var(--via-derecho); }
.via-protesta { --c: var(--via-protesta); }
.via-nula { --c: var(--tinta-2); }

/* Etiquetas pequeñas (tipo, programada, rótulos) */
.etiq { display: inline-block; font: 650 .78rem/1.5 var(--sans); color: var(--tinta-2); border: 1px solid var(--linea-fuerte); border-radius: 2px; padding: 0 .35rem; white-space: nowrap; }
/* Los chips de caso del sistema son de 11,8 px; aquí suben a 12,8 px */
.chip-caso { font-size: .8rem; padding: .3rem .45rem; }

/* ---------- Rejilla: riel + minimapa ---------- */
.riel { position: relative; }
.riel__leyenda { margin-bottom: var(--e-3); }
.riel__grid { display: grid; gap: var(--e-4); }
.riel__cuerpo { position: relative; width: 100%; min-height: 200px; }
@media (min-width: 1100px) {
  .riel__grid--mapa { grid-template-columns: minmax(0, 1fr) 200px; gap: var(--e-6); align-items: start; }
}

/* ---------- Riel y meses ---------- */
.riel__linea { position: absolute; width: 2px; background: var(--linea-fuerte); }
.riel__tick { position: absolute; width: 12px; height: 1px; background: var(--tinta-2); }
/* Banda de cada mes: alterna el tono para que se vea a qué mes pertenece cada tarjeta */
.riel__banda { position: absolute; left: 0; right: 0; background: transparent; }
.riel__banda--par { background: color-mix(in srgb, var(--tinta) 4%, transparent); }
@media (max-width: 639px) { .riel__banda { border-top: 1px solid var(--linea-fuerte); } }
.riel__leyenda { display: grid; gap: .3rem; margin-bottom: var(--e-3); }
.leyenda__grupo { font: 700 .78rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); margin-right: .3rem; }
.riel__mes--sep { left: 0; width: auto !important; text-align: left; font-weight: 650; color: var(--tinta); background: transparent; }
.riel__mes { position: absolute; left: 0; height: 16px; line-height: 16px; font: 500 .78rem var(--sans); color: var(--tinta-2); text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Bandas hasta el borde del minimapa en escritorio: el mes se lee como bloque completo */
@media (min-width: 1100px) {
  .riel__meses.desplazable-x { -webkit-mask-image: none; mask-image: none; scroll-snap-type: none; padding-bottom: 0; overflow-x: visible; }
}

/* Casilla de un evento: pegada al riel, de color por vía */
.riel__ev { position: absolute; width: 10px; height: 10px; border-radius: 2px; background: var(--c, var(--tinta-2)); }
/* Marca de tarjeta sobre el riel: evento (color de vía), hito (tinta) o sesión (estado) */
.riel__marca { position: absolute; border-radius: 2px; background: var(--c, var(--tinta-2)); }
/* Hito: punto hueco en tinta (no cuadrado: el cuadrado es el marcador "Con quórum") */
.riel__marca--hito { width: 12px; height: 12px; box-sizing: border-box; background: var(--superficie); border: 2px solid var(--tinta); border-radius: 50%; }
/* Fecha de corte: línea discreta de punto a lo ancho del riel; el rótulo va bajo ella, sin tapar el mes */
.riel__hoy { position: absolute; height: 0; border-top: 1px dashed var(--tinta); }
.riel__hoy em { position: absolute; left: 0; top: 4px; font: 700 .78rem/1 var(--sans); font-style: normal; color: var(--tinta); white-space: nowrap; }
.riel__banda:focus-visible { outline-offset: -3px; }
.leyenda__muestra--hito { background: var(--superficie); border: 2px solid var(--tinta); border-radius: 50%; box-sizing: border-box; }
.leyenda__muestra--casilla { border-radius: 2px; }
.riel__marca--ev { width: 10px; height: 10px; }
.riel__ev.es-futuro { background: var(--superficie); outline: 1.5px dashed var(--tinta-2); outline-offset: -1.5px; }

/* Sesión de la Asamblea: casilla mayor en el riel, con su resultado */
.riel__ses, .riel__marca--ses { position: absolute; width: 20px; height: 20px; box-sizing: border-box; border-radius: 3px; display: grid; place-items: center; font: 700 .8rem/1 var(--sans); }
.riel__ses--con-quorum, .riel__marca--ses.riel__ses--con-quorum { background: var(--tinta); color: var(--papel); border: 1.5px solid var(--tinta); }
.riel__ses--sin-quorum, .riel__marca--ses.riel__ses--sin-quorum { background: repeating-linear-gradient(-45deg, var(--rojo) 0 1.5px, var(--falta-suave) 1.5px 5px); border: 1.5px solid var(--rojo); }
.riel__ses--programada, .riel__marca--ses.riel__ses--programada { background: var(--superficie); color: var(--tinta-2); border: 1.5px dashed var(--tinta-2); }
.riel__ses--no-celebrada, .riel__ses--sin-dato, .riel__marca--ses.riel__ses--no-celebrada, .riel__marca--ses.riel__ses--sin-dato { background: var(--superficie); color: var(--tinta-2); border: 1.5px solid var(--linea-fuerte); }

/* ---------- Tarjetas (hitos y eventos del caso) colgadas del riel ---------- */
.riel__hitos { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.hito { position: absolute; margin: 0; box-sizing: border-box; pointer-events: auto; background: var(--superficie); border: 1px solid var(--linea); border-left: 3px solid var(--tinta); border-radius: var(--radio); padding: .6rem .8rem; font-size: .94rem; line-height: 1.4; }
/* Guía horizontal desde el riel hasta la tarjeta, a la altura del evento */
.hito::before { content: ""; position: absolute; top: 12px; left: calc(-1 * var(--gu, 24px)); width: var(--gu, 24px); height: 1px; background: var(--linea-fuerte); }
.hito--futuro { border: 1.5px dashed var(--tinta-2); }
.hito__cab { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin: 0 0 .25rem; font: 600 .8rem/1.4 var(--sans); color: var(--tinta-2); max-width: none; }
.hito__cab time { color: var(--tinta); font-variant-numeric: tabular-nums; }
.hito__texto { margin: 0; max-width: none; color: var(--tinta); }
.hito__pie { margin: .35rem 0 0; max-width: none; font-size: .8rem; }
.hito__pie .fuente { font-size: .8rem; }

/* ---------- Minimapa de meses ---------- */
.riel__meses { order: -1; display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
@media (min-width: 1100px) {
  .riel__meses { order: 2; flex-direction: column; overflow-y: auto; overflow-x: visible; padding: 0; position: sticky; top: calc(var(--alto-cabecera) + var(--e-3)); max-height: calc(100vh - var(--alto-cabecera) - 2 * var(--e-3)); }
}
.riel__meses { scroll-snap-type: x proximity; }
.mes { scroll-snap-align: start; flex: none; display: flex; align-items: center; gap: .5rem; min-height: 44px; min-width: 4.8rem; padding: .3rem .5rem; background: var(--superficie); color: var(--tinta); border: 1px solid var(--linea); border-radius: var(--radio); font: 600 .8rem/1.2 var(--sans); text-align: left; cursor: pointer; }
.mes:hover { border-color: var(--tinta-2); }
.mes[aria-current="true"] { border-color: var(--tinta); background: var(--papel-2); box-shadow: inset 3px 0 0 var(--tinta); }
.mes__nombre { min-width: 3.4rem; font-variant-numeric: tabular-nums; }
.mes__casillas { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; min-width: 0; align-items: center; }
.mes__casillas i { display: block; width: 7px; height: 7px; border-radius: 1.5px; background: var(--c, var(--tinta-2)); }
.mes__casillas b { font-size: .78rem; font-weight: 650; margin-left: 2px; }
.mes__n { font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 1099px) {
  .mes { min-width: 4.4rem; }
  .mes__casillas { display: none; }
}
@media (min-width: 1100px) {
  .mes { min-height: 32px; width: 100%; }
}

/* ---------- Vista completa: filtros ---------- */
.filtros { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: var(--e-3) 0; margin-bottom: var(--e-3); }
.filtros > summary { cursor: pointer; display: flex; align-items: center; min-height: 44px; font: 650 .95rem var(--sans); list-style: none; }
.filtros > summary::-webkit-details-marker { display: none; }
/* Chips rápidos de tipo y vía, con su conteo; pulsados = incluidos */
.filtros__rapidos { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 var(--e-3); }
.chip-toggle { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; font: 650 .84rem var(--sans); color: var(--tinta); background: var(--superficie); border: 1px solid var(--tinta-2); border-radius: 999px; padding: .3rem .8rem; cursor: pointer; }
.chip-toggle:hover { border-color: var(--tinta); }
.chip-toggle[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.chip-toggle__n { font-variant-numeric: tabular-nums; font-weight: 700; }
.filtros__grid { display: grid; gap: var(--e-3); margin-top: var(--e-2); }
@media (min-width: 640px) { .filtros__grid { grid-template-columns: 1fr 1fr 1.3fr; gap: var(--e-4); } }
.filtro { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: .2rem; align-content: start; }
.filtro legend { font: 700 .78rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); padding: 0; margin-bottom: .3rem; }
.opcion { display: flex; align-items: center; gap: .5rem; min-height: 40px; font-size: .92rem; cursor: pointer; }
.opcion input { width: 18px; height: 18px; accent-color: var(--tinta); margin: 0; flex: none; }
.filtro select { font: inherit; color: var(--tinta); background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--radio); padding: .5rem .6rem; min-height: 44px; width: 100%; }
.filtros__conteo { font: 600 .85rem var(--sans); color: var(--tinta-2); margin: 0 0 var(--e-3); }

/* ---------- Vista completa: lista por mes ---------- */
.completa { min-width: 0; }
.completa__mes { margin-bottom: var(--e-5); }
.completa__mes h3 { position: sticky; top: calc(var(--alto-cabecera) + var(--e-2)); z-index: 2; background: var(--papel); font: 650 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.25 var(--serif); margin: 0 0 var(--e-2); padding: .3rem 0; border-bottom: 2px solid var(--tinta); scroll-margin-top: calc(var(--alto-cabecera) + var(--e-6)); }
.completa__mes h3:focus { outline: none; }
.completa__n { font: 500 .9rem var(--sans); color: var(--tinta-2); }
.completa__lista { list-style: none; margin: 0; padding: 0; }
.fila { display: grid; grid-template-columns: 5.6rem 1.1rem minmax(0, 1fr); gap: .3rem .7rem; padding: .65rem 0; border-bottom: 1px solid var(--linea); align-items: start; }
@media (max-width: 559px) { .fila { grid-template-columns: 4.5rem 1rem minmax(0, 1fr); gap: .3rem .5rem; } }
.fila__fecha { font: 600 .86rem/1.5 var(--sans); font-variant-numeric: tabular-nums; color: var(--tinta); white-space: nowrap; }
.fila__via { padding-top: .3rem; }
.casilla-via { display: block; width: 11px; height: 11px; border-radius: 2px; background: var(--c, var(--tinta-2)); }
.fila--futuro .casilla-via { background: var(--superficie); outline: 1.5px dashed var(--tinta-2); outline-offset: -1.5px; }
.fila__cuerpo { min-width: 0; }
.fila__titulo { margin: 0; max-width: none; font-size: .8125rem; line-height: 1.45; }
.fila__tipo { display: inline-block; font: 700 .78rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); margin-right: .5rem; }
.fila__pie { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; margin: .35rem 0 0; max-width: none; font-size: .8rem; }
.fila__casos { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.fila__pie .fuente { font-size: .8rem; }
.fila__enlace { font: 600 .8rem var(--sans); color: var(--tinta); text-decoration: underline; text-decoration-color: var(--linea-fuerte); text-underline-offset: .2em; }
.fila__enlace:hover { color: var(--rojo-hondo); }

/* Cronología del caso: pie con el conteo y el botón de ver todos */
.cronologia__pie { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); align-items: center; justify-content: space-between; margin-top: var(--e-3); }
.cronologia__cuenta { font-size: .85rem; color: var(--tinta-2); margin: 0; max-width: none; }

/* Sesión sin quórum: ● dentro del cuadrado rayado, sobre un disco de superficie (contraste AA) */
.riel__ses--sin-quorum::after, .riel__marca--ses.riel__ses--sin-quorum::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--superficie); z-index: 1; }
.riel__ses--sin-quorum::before, .riel__marca--ses.riel__ses--sin-quorum::before { content: "●"; position: relative; z-index: 2; color: var(--rojo); font: 700 .62rem/1 var(--sans); }

/* Chips de filtros activos y "Quitar filtros" */
.filtros__activos { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 var(--e-3); }
.filtros__activos[hidden] { display: none; }
.chip-filtro { display: inline-flex; align-items: center; gap: .2rem; min-height: 36px; font: 650 .82rem var(--sans); color: var(--tinta); background: var(--superficie); border: 1px solid var(--tinta-2); border-radius: 999px; padding: .3rem .7rem; cursor: pointer; }
.chip-filtro:hover { border-color: var(--tinta); background: var(--papel-2); }
.filtros__activos .boton-mini { margin-left: .2rem; }

/* Minimapa: casillas en escritorio; barras de un solo tono (altura = conteo) en móvil */
.mes__barra { display: none; }
@media (max-width: 1099px) {
  .mes__barra { display: block; flex: none; width: 10px; height: calc(var(--h, 0) * 24px + 2px); background: var(--tinta-2); border-radius: 2px; }
  .mes { min-height: 48px; }
}