/* =====================================================================
   Piezas de la rendición de cuentas: V40 (logros y reveses en una línea, con códigos enlazados) y
   V32 (estados por casillas de 16 px). Solo variables de tema: claro y oscuro. Rojo únicamente como
   contorno punteado (falta). Texto sobre casillas de datos: --sobre-rojo (blanco en claro, #141210 en oscuro).
   ===================================================================== */

/* ---------- V40 · marcas enlazadas ---------- */
.lr-nota { font-size: var(--t-dato); color: var(--tinta-2); margin: 0 0 var(--e-3); max-width: none; }
.lr-marca { cursor: pointer; outline: none; }
.lr-marca:focus-visible .lr-marca__caja { stroke: var(--tinta); stroke-width: 3; }
.lr-marca__caja { fill: var(--via-institucional); }
.lr-marca__caja--destacada { fill: var(--tinta); }
.lr-marca__caja--reves { fill: var(--superficie); stroke: var(--tinta-2); stroke-width: 1.5; stroke-dasharray: 3 2; }
.lr-marca__texto { font: 500 .75rem var(--mono); fill: var(--sobre-rojo); pointer-events: none; }
.lr-marca__caja--reves + .lr-marca__texto { fill: var(--tinta); }
.lr-marca:hover .lr-marca__caja { opacity: .85; }

/* ---------- V40 · móvil: dos listas (logros | reveses) con los mismos enlaces ---------- */
.lr-lista-caja { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-3); min-width: 0; }
.lr-lista-caja .antetitulo { font-size: .72rem; }
.lr-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.lr-lista a { display: grid; gap: 2px; color: var(--tinta); text-decoration: none; border-top: 1px solid var(--linea); padding-top: 6px; min-width: 0; }
.lr-lista a:hover { color: var(--rojo-hondo); }
.lr-lista__codigo { font: 500 .75rem var(--mono); color: var(--tinta); }
.lr-lista__fecha { font-size: var(--t-mini); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.lr-lista__titulo { font-size: .85rem; line-height: 1.3; overflow-wrap: anywhere; }

/* ---------- V32 · una fila por estado; casillas de 16 px; totales pegados ---------- */
.estados { display: grid; gap: var(--e-3); margin: 0; min-width: 0; }
.estados__leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--t-dato); color: var(--tinta-2); margin: 0 0 var(--e-3); max-width: none; }
.estados__fila { display: grid; gap: var(--e-2) var(--e-3); align-items: center; padding-top: var(--e-3); border-top: 1px solid var(--linea); min-width: 0; }
@media (min-width: 720px) { .estados__fila { grid-template-columns: 15rem minmax(0, 1fr); } }
.estados__etq { margin: 0; }
.estados__casillas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-5); min-width: 0; }
.estados__grupo { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.estados__marcas { display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 100%; }
.estados__n { font: 650 .8125rem var(--sans); font-variant-numeric: tabular-nums; color: var(--tinta); min-width: 1ch; }
.est-marca { display: inline-block; box-sizing: border-box; width: 16px; height: 16px; border-radius: 3px; flex: none; }
.est-marca--leyenda { width: 14px; height: 14px; vertical-align: -2px; }
.est-marca--leyenda.est-marca--lucha { background: var(--tinta-2); }
.est-marca--leyenda.est-marca--peticion { background: var(--tinta-2); opacity: .55; }
.est-marca--lucha { opacity: 1; }
.est-marca--peticion { opacity: .55; }
.est-marca--atendido { background: var(--estado-bueno); }
.est-marca--tramite { background: var(--estado-tramite); }
.est-marca--parcial { background: linear-gradient(90deg, var(--estado-tramite) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--estado-tramite); }
.est-marca--pendiente { background: var(--superficie); border: 1.5px dashed var(--rojo); }
.est-marca--sin-respuesta { background: var(--superficie); border: 1.5px dashed var(--tinta-2); }
.estados__etq .estado { border-radius: var(--radio); }