/* Piezas de datos.html (turno D): expediente de 267, matriz de casos, banda de cifras, paleta de categorías.
   Todo color sale de las variables de sitio.css; por eso funciona igual en claro y oscuro. */

/* ---------- Paleta del expediente: cinco tonos de la escala secuencial oficial, justificada y tinta (seis clases como máximo por vista). Sin rojo. ---------- */
.k-s1 { fill: var(--sec-1); stroke: var(--sec-4); stroke-width: 1; }
.k-s2 { fill: var(--sec-2); }
.k-s3 { fill: var(--sec-3); }
.k-s4 { fill: var(--sec-4); }
.k-s5 { fill: var(--sec-5); }
.k-j { fill: var(--justificada); }
.k-t { fill: var(--tinta); }
.leyenda__muestra--diagonal { background: var(--papel-2); box-shadow: inset 0 0 0 1.5px var(--tinta-2); }

/* ---------- Expediente de 267 ---------- */
.expediente-waffle { display: block; width: 100%; height: auto; }
.expediente-waffle rect { transition: fill .25s ease, stroke .25s ease; }
.grafico.expediente .grafico__lienzo { max-width: 880px; margin: 0 auto; }
@media (prefers-reduced-motion: reduce) { .expediente-waffle rect { transition: none; } }
.expediente-waffle rect:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }

.vistas { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0 0 var(--e-3); }
.vistas .boton-mini { min-height: 44px; padding: .6rem .9rem; font-size: .86rem; }
@media (min-width: 560px) { .vistas .boton-mini { min-height: 36px; padding: .45rem .75rem; } }

/* ---------- Banda de cifras (V15) ---------- */
.banda-cifras {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-5) var(--e-4); margin: var(--e-5) 0 var(--e-3);
}
@media (min-width: 760px) { .banda-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .banda-cifras { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--e-3); } }
.banda-cifras .cifra { min-width: 0; }
.banda-cifras .cifra__valor { overflow-wrap: anywhere; }
.banda-cifras .cifra__frase { font-size: .82rem; max-width: none; }
.grupo > .fuente { margin-top: 0; }

/* ---------- Matriz de casos (V19) ---------- */
.matriz-caja { width: 100%; overflow-x: auto; }
.matriz {
  width: auto; table-layout: fixed; border-collapse: separate; border-spacing: 1px;
  font-size: 12px; margin: 0; font-variant-numeric: tabular-nums;
}
.matriz th, .matriz td { padding: 0; border: 0; text-align: center; vertical-align: middle; }
.matriz thead th { width: 19px; min-width: 19px; max-width: 19px; }
.matriz tbody th { width: 26px; min-width: 26px; }
.matriz td { width: 19px; height: 19px; min-width: 19px; border-radius: 2px; font: 650 12px/1 var(--sans); color: var(--tinta); }
.matriz td.s1 { background: var(--sec-1); }
.matriz td.s2 { background: var(--sec-2); }
.matriz td.s3 { background: var(--sec-3); }
.matriz td.s4 { background: var(--sec-4); color: var(--sobre-rojo); }
.matriz td.s5 { background: var(--sec-5); color: var(--sobre-rojo); }
.matriz td.hueco { background: var(--ausente); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.matriz td.diag { background: var(--papel-2); box-shadow: inset 0 0 0 1.5px var(--tinta-2); }
.matriz td.cruz { outline: 2px solid var(--tinta); outline-offset: -2px; }
.matriz__cab {
  appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: 650 12px/1 var(--sans); color: var(--tinta-2); width: 100%; height: 22px; font-variant-numeric: tabular-nums;
}
.matriz__cab.activo { background: var(--tinta); color: var(--papel); border-radius: 2px; }
.matriz .esquina { width: 26px; }
@media (min-width: 760px) {
  .matriz { border-spacing: 2px; font-size: 13px; }
  .matriz td { width: 34px; height: 34px; min-width: 34px; font-size: 13px; }
  .matriz thead th { width: 34px; min-width: 34px; max-width: 34px; }
  .matriz tbody th, .matriz .esquina { width: 36px; min-width: 36px; }
  .matriz__cab { height: 30px; font-size: 13px; }
  .matriz tbody .matriz__cab { width: 36px; }
}
.matriz-lectura { margin: var(--e-3) 0 var(--e-2); font-size: .95rem; font-weight: 600; min-height: 1.5em; }
.matriz-top { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: grid; gap: 0; }
.matriz-top li { display: flex; justify-content: space-between; gap: var(--e-3); padding: .45rem 0; border-bottom: 1px solid var(--linea); font-size: .9rem; }
.matriz-top strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 760px) { .matriz-top { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-5); } }

/* Las celdas de la matriz no son foco: el foco va a los rótulos (cruz de fila y columna). */
.matriz td[data-i]:focus { outline: none; }

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


/* V19 · matriz con su lista de conexiones a la derecha desde 1100 px; celdas de 50 px */
.matriz-fila { display: grid; gap: var(--e-5); align-items: start; }
.matriz-lado { min-width: 0; }
@media (min-width: 1100px) {
  .matriz-fila { grid-template-columns: auto minmax(0, 1fr); }
  .matriz { border-spacing: 2px; font-size: 14px; }
  .matriz td { width: 50px; height: 50px; min-width: 50px; font-size: 14px; }
  .matriz thead th { width: 50px; min-width: 50px; max-width: 50px; }
  .matriz tbody th, .matriz .esquina { width: 50px; min-width: 50px; }
  .matriz tbody .matriz__cab { width: 50px; }
  .matriz__cab { height: 40px; font-size: 14px; }
  .matriz-top { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
}

/* ---------- Vías (paleta validada de la entrega): institucional, derecho y protesta ---------- */
.camino__via--institucional { background: var(--via-institucional); }
.camino__via--derecho { background: var(--via-derecho); }
.camino__via--protesta { background: var(--via-protesta); }

/* ---------- V42 · Cómo llegamos aquí (una fila por etapa, escala propia por columna) ---------- */
.camino { margin: 0; }
.camino__cab, .camino__cuerpo {
  display: grid; gap: var(--e-2) var(--e-3); align-items: center;
  grid-template-columns: minmax(170px, 1.4fr) repeat(6, minmax(0, 1fr));
}
.camino--compacto .camino__cuerpo { grid-template-columns: minmax(170px, 1.4fr) repeat(2, minmax(0, 1fr)); }
.camino__cab { font: 600 .74rem/1.25 var(--sans); color: var(--tinta-2); letter-spacing: .03em; padding-bottom: var(--e-2); border-bottom: 1px solid var(--linea-fuerte); }
.camino__fila { padding: var(--e-3) 0; border-bottom: 1px solid var(--linea); list-style: none; }
.camino__fila--destacada { background: var(--papel-2); }
.camino__fila--destacada .camino__cuerpo { padding: 0 var(--e-2); }
.camino ol { margin: 0; padding: 0; }
.camino__celda { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: .92rem; }
.camino__celda--etapa { gap: 2px; }
.camino__enlace { font-weight: 650; color: var(--tinta); }
.camino__periodo { margin: 0; font-size: .8rem; color: var(--tinta-2); max-width: none; }
.camino__barra { display: block; width: var(--w); max-width: 100%; height: 12px; background: var(--tinta-2); border-radius: 2px; }
.camino__pila { display: flex; width: var(--w); max-width: 100%; height: 12px; border-radius: 2px; overflow: hidden; }
.camino__pila > span { flex: 0 0 var(--p); height: 100%; }
.camino__valor, .camino__celda-valor, .motor__valor { font-weight: 650; font-variant-numeric: tabular-nums; }
.camino__casillas { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.camino__sq { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.camino__sq--quorum { background: var(--tinta); }
.camino__sq--falta { background: repeating-linear-gradient(45deg, var(--rojo) 0 2px, var(--falta-suave) 2px 5px); border: 1.5px solid var(--rojo); }
.camino__sq--anulada { background: var(--superficie); border: 1.5px solid var(--tinta-2); }
.camino__logro { color: var(--tinta); letter-spacing: .05em; }
@media (max-width: 759px) {
  .camino__cab { display: none; }
  .camino__cuerpo, .camino--compacto .camino__cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .camino__celda--etapa { grid-column: 1 / -1; }
}

/* ---------- V49 · Los casos como motor (tabla con barras cortas, escala propia por columna) ---------- */
.motor { width: 100%; border-collapse: collapse; font-size: .9rem; }
.motor th, .motor td { padding: .5rem .5rem; border-bottom: 1px solid var(--linea); vertical-align: middle; text-align: left; }
.motor thead th { font: 600 .74rem/1.25 var(--sans); color: var(--tinta-2); }
.motor__caso { font-weight: 600; min-width: 200px; }
.motor__num { display: inline-block; min-width: 2.2em; font-family: var(--mono); color: var(--tinta-2); }
.motor__celda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 90px; }
.motor__pila { display: flex; width: var(--w); min-width: 6px; max-width: 110px; height: 12px; border-radius: 2px; overflow: hidden; }
.motor__pila > span { flex: 0 0 var(--p); height: 100%; }
.motor__logros { color: var(--tinta); letter-spacing: .05em; }
.motor__luchas { letter-spacing: .15em; color: var(--tinta); }
.motor__puntos { color: var(--tinta-2); letter-spacing: .1em; }
.motor__marca { font-size: .84rem; }
.motor__marca--si { color: var(--docentes); font-weight: 650; } /* texto AA: --docentes contrasta 6,2:1 sobre papel */
.motor__vacio { color: var(--tinta-2); font-style: italic; }
.motor__fila--revision td { color: var(--tinta-2); }
@media (max-width: 759px) {
  .motor thead { display: none; }
  .motor, .motor tbody, .motor tr, .motor th, .motor td { display: block; width: 100%; }
  .motor tr { padding: var(--e-3) 0; border-bottom: 1px solid var(--linea); }
  .motor th, .motor td { border: 0; padding: .2rem 0; }
  .motor__caso { min-width: 0; }
}

/* ---------- V45 · Solicitudes de información: cifras, tabla (desktop) y tarjetas (móvil) ---------- */
.solicitudes__cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); margin: 0 0 var(--e-4); }
@media (min-width: 760px) { .solicitudes__cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.solicitudes__cifra { display: flex; flex-direction: column; gap: 2px; border-top: 2px solid var(--tinta); padding-top: var(--e-2); }
.solicitudes__valor { font: 700 2rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.solicitudes__etiqueta { font-size: .8rem; color: var(--tinta-2); }
.solicitudes__tabla { width: 100%; border-collapse: collapse; font-size: .84rem; }
.solicitudes__tabla th, .solicitudes__tabla td { padding: .45rem .5rem; border-bottom: 1px solid var(--linea); vertical-align: top; text-align: left; }
.solicitudes__tabla th { font: 600 .74rem/1.25 var(--sans); color: var(--tinta-2); }
.solicitudes__tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.solicitudes__tarjetas { list-style: none; margin: 0; padding: 0; }
.solicitud { padding: var(--e-3) 0; border-bottom: 1px solid var(--linea); }
.solicitud p { margin: 0 0 .3rem; font-size: .92rem; }
.solicitud__cab { font-size: .82rem; color: var(--tinta-2); }
@media (max-width: 759px) { .solicitudes__tabla { display: none; } }
@media (min-width: 760px) { .solicitudes__tarjetas { display: none; } }