/* =====================================================================
   Rendición de cuentas (briefing 5.2). Banda de tinta con la cifra titular; índice pegajoso de secciones;
   cifras de apertura por sección; logros en tarjetas (L01 en 7/5); luchas en tablero; lo que no salió, sin
   comentarios; peticiones en tabla que se apila en móvil. Listas largas plegadas con "Ver todos".
   Sin rojo salvo contorno punteado de falta.
   ===================================================================== */

/* ---------- Banda ---------- */
.banda-rendicion { padding-top: var(--e-7); padding-bottom: var(--e-7); }
@media (min-width: 1024px) { .banda-rendicion { padding-top: var(--e-8); padding-bottom: var(--e-8); } }
.banda-rendicion h1 { max-width: 18ch; margin-bottom: var(--e-4); }
.banda-rendicion__intro { color: var(--identidad-texto-2); font-size: 1.05rem; margin-bottom: var(--e-6); }
.banda-rendicion__cifras { align-items: start; }
.banda-rendicion .fecha-corte { margin: var(--e-5) 0 0; }

/* ---------- Índice pegajoso de secciones ---------- */
.indice-pagina {
  position: sticky; top: var(--alto-cabecera); z-index: 50;
  background: color-mix(in srgb, var(--papel) 94%, transparent);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--linea);
}
@media (min-width: 1100px) { .indice-pagina { top: calc(var(--alto-cabecera) + 44px); } }
.indice-pagina ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0 var(--e-5); overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.indice-pagina li { flex: none; }
.indice-pagina a { display: block; padding: .7rem 0 .55rem; font-size: .9rem; color: var(--tinta); text-decoration: none; border-bottom: 2px solid transparent; }
.indice-pagina a:hover { border-color: var(--linea-fuerte); color: var(--tinta); }
.indice-pagina a[aria-current="true"] { border-color: var(--tinta); font-weight: 650; }
.indice-pagina :focus-visible { outline-offset: -3px; }

/* ---------- Cifras de apertura por sección ---------- */
.apertura { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-6); margin: var(--e-4) 0 var(--e-5); }
.apertura:empty { display: none; }
.apertura__cifra { min-width: 12rem; max-width: 24ch; }
.apertura__cifra .cifra__valor { font-size: 2rem; }
.tira-rotulo { font-size: var(--t-dato); color: var(--tinta-2); margin: var(--e-4) 0 0; max-width: none; }
.tira-rotulo .cifra__valor { font: 700 .95rem var(--serif); color: var(--tinta); margin-right: .25rem; }

/* ---------- Ejemplos por vía ---------- */
.ejemplos-titulo { margin: var(--e-6) 0 var(--e-3); }
.ejemplos { display: grid; gap: var(--e-5); min-width: 0; }
@media (min-width: 900px) { .ejemplos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6); } }
.ejemplos__via { min-width: 0; border-top: 1px solid var(--linea-fuerte); padding-top: var(--e-3); }
.ejemplos__titulo { font: 650 1.05rem/1.3 var(--sans); margin: 0 0 var(--e-3); }
.ejemplos__titulo .via { font-size: .95rem; }
.ejemplos__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }
.ejemplos__lista p { margin: 0; max-width: none; }
.ejemplos__lista li { min-width: 0; }
.ejemplos__lista .ejemplos__meta { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; font-size: var(--t-dato); color: var(--tinta-2); margin: 0 0 var(--e-1); font-variant-numeric: tabular-nums; }
.ejemplos__texto { font-size: .95rem; line-height: 1.5; }
.actividad { margin-top: var(--e-7); }

/* ---------- Logros ---------- */
.aviso { margin: 0 0 var(--e-5); }
.logros { display: grid; gap: var(--e-6); margin-top: var(--e-5); min-width: 0; }
@media (min-width: 900px) { .logros { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-6); align-items: start; } }
.logro-card { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; border-top: 3px solid var(--tinta); padding-top: var(--e-3); scroll-margin-top: calc(var(--alto-cabecera) + 96px); }
.logro-card--destacado { grid-column: 1 / -1; display: grid; gap: var(--e-4) var(--e-6); }
@media (min-width: 900px) { .logro-card--destacado { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.logro-card__cuerpo { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.logro-card__lateral { display: grid; gap: var(--e-3); align-content: start; min-width: 0; padding: var(--e-4); background: var(--superficie); border: 1px solid var(--linea); border-top: 3px solid var(--tinta); border-radius: var(--radio); }
.logro-card__lateral .cifra__valor { font-size: 2.25rem; }
.logro-card__accion { margin: 0; }
.logro-card__meta { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin: 0; font-size: var(--t-dato); }
.logro-card__fecha { color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.logro-card__titulo { font: 650 1.2rem/1.28 var(--serif); margin: 0; max-width: 34ch; }
.logro-card--destacado .logro-card__titulo { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); max-width: 26ch; }
.logro-card__credito { margin: 0; font-size: .92rem; color: var(--tinta-2); }
.logro-card__credito strong { color: var(--tinta); }
.logro-card__texto { margin: 0; max-width: 70ch; }
.logro-card .logro__que-sigue { margin: 0; max-width: 70ch; }
.logro-card__lateral .logro__que-sigue { max-width: none; }
.logro-card .documentos { margin-top: auto; }
.codigo { display: inline-block; font: 500 .75rem/1.5 var(--mono); color: var(--tinta); border: 1px solid var(--tinta); border-radius: 2px; padding: 0 .35rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chip-tramite { font: 650 .75rem var(--sans); color: var(--estado-tramite); border: 1px solid currentColor; border-radius: 999px; padding: .05rem .5rem; white-space: nowrap; }
.documentos { row-gap: .4rem; }

/* El oficio puede partirse dentro de tarjetas estrechas (sin desbordes en 390 px) */
.logro-card .oficio, .reves .oficio, .lucha .oficio, .ejemplos__lista .oficio { white-space: normal; overflow-wrap: anywhere; }

/* Listas largas plegadas: el grupo se muestra con display contents para no romper la rejilla */
.plegado { display: contents; }
.plegado[hidden] { display: none; }
.plegable__boton { margin-top: var(--e-4); }

/* ---------- Luchas en curso ---------- */
.tablero { list-style: none; margin: var(--e-5) 0 0; padding: 0; display: grid; gap: var(--e-4); min-width: 0; }
@media (min-width: 900px) { .tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4) var(--e-5); align-items: start; } }
.lucha { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e-4); }
.lucha__cabeza { display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center; }
.lucha__tema { font: 650 1.1rem/1.3 var(--serif); margin: 0; }
.lucha__situacion { margin: 0; font-size: .95rem; }
.lucha__casos { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.lucha__rotulo { font: 600 .75rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); margin-right: .2rem; }
.lucha .documentos { margin-top: auto; }
.lucha__desde { margin: 0; font-size: .85rem; color: var(--tinta-2); }
.lucha__desde strong { color: var(--tinta); font-weight: 650; }
.lucha__sigue { margin: 0; font-size: .95rem; border-left: 3px solid var(--tinta); background: var(--papel-2); padding: var(--e-2) var(--e-3); }
.lucha__sigue strong { display: block; font: 700 .75rem var(--sans); letter-spacing: .09em; text-transform: uppercase; margin-bottom: .2rem; }
.solicitudes-bloque { margin-top: var(--e-7); border-top: 1px solid var(--linea-fuerte); padding-top: var(--e-5); min-width: 0; }
.solicitudes-bloque h3 { font: 650 1.25rem/1.25 var(--serif); margin: 0 0 var(--e-2); }
.nota-conteos { font-size: var(--t-dato); color: var(--tinta-2); margin: 0 0 var(--e-4); max-width: 72ch; }
.enlace-reconocimiento { margin: var(--e-3) 0 0; }
.reves--cierre { grid-column: 1 / -1; }
@media (min-width: 760px) { .plegable__boton--movil { display: none; } }

/* ---------- Lo que no salió como pedíamos: dignidad sobria, sin color de alarma ---------- */
.reveses { list-style: none; margin: var(--e-5) 0 0; padding: 0; display: grid; gap: var(--e-5); min-width: 0; }
@media (min-width: 900px) { .reveses { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-6); align-items: start; } }
.reves { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; border-left: 2px solid var(--tinta-2); padding-left: var(--e-4); scroll-margin-top: calc(var(--alto-cabecera) + 96px); }
.reves:last-child:nth-child(odd) { grid-column: 1 / -1; }
.reves p { margin: 0; max-width: 68ch; }
.reves__meta { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; }
.reves__fecha { font-size: var(--t-dato); color: var(--tinta-2); font-variant-numeric: tabular-nums; font-weight: 600; }
.reves__titulo { font: 600 1.12rem/1.3 var(--serif); margin: 0; max-width: 40ch; }
.reves__texto { font-size: .98rem; }
.reves__nota { font-size: var(--t-mini); color: var(--tinta-2); }

/* ---------- Qué pedimos: tabla que se apila en móvil ---------- */
.tabla-peticiones { margin-top: var(--e-5); min-width: 0; }
table.peticiones { font-size: .95rem; }
table.peticiones th, table.peticiones td { padding: .6rem .7rem; }
.peticion__estado { display: block; font-size: .82rem; color: var(--tinta-2); margin-top: .35rem; max-width: 46ch; }
@media (max-width: 719px) {
  table.peticiones thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.peticiones, table.peticiones tbody, table.peticiones tr, table.peticiones td { display: block; width: 100%; }
  table.peticiones tr { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); padding: var(--e-2) var(--e-3); margin-bottom: var(--e-3); }
  table.peticiones td { border: 0; padding: .3rem 0; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--e-2); align-items: start; }
  table.peticiones td::before { content: attr(data-etiqueta); font: 600 .75rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); padding-top: .2rem; }
  .peticion__estado { margin-top: 0; }
}