/* =====================================================================
   estudiantesasambleistas.com · sistema de diseño v2 · "Contar de a uno"
   Familia visual del Quorómetro. Tokens de la sección 12 del briefing.
   Regla: ningún componente tiene reglas propias de tema; todo sale de
   las variables, que cambian en claro y oscuro.
   ===================================================================== */

@font-face { font-family: "Source Serif 4"; src: url("../fuentes/source-serif-4-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fuentes/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fuentes/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fuentes/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* ---------- Tokens · claro ---------- */
:root {
  color-scheme: light;
  --rojo: #B61C1C;
  --rojo-hondo: #7F1414;
  --sobre-rojo: #FFFFFF;
  --tinta: #1D1B19;
  --tinta-2: #5C5650;
  --papel: #FAF7F2;
  --papel-2: #F3EEE6;          /* papel un tono más hondo: bandas suaves */
  --superficie: #FFFFFF;
  --linea: #E4DDD3;
  --linea-fuerte: #CFC6BA;
  --banda-fondo: #1D1B19;      /* banda de tinta */
  --banda-texto: #FAF7F2;
  --banda-texto-2: #C9C1B6;
  --falta-suave: #F6DEDB;      /* fondo del rayado de falta */
  /* datos */
  --docentes: #1c5cab;
  --estudiantes: #4a8ee0;      /* ajustado desde #86b6ef del briefing: 3,15:1 sobre papel (WCAG 1.4.11) */
  --borde-justificada: transparent;
  --borde-hueco: #B9AFA2;
  --borde-estudiantes: transparent;
  --justificada: #8a8279;      /* ajustado desde #A39B91 del briefing: 3,6:1 sobre papel; mismo tono que el Quorómetro */
  --ausente: #FFFFFF;
  --via-institucional: #2a78d6;
  --via-protesta: #b07612;
  --via-derecho: #1a9e6f;
  --sec-1: #cde2fb; --sec-2: #86b6ef; --sec-3: #3987e5; --sec-4: #1c5cab; --sec-5: #0d366b;
  /* estados */
  --estado-bueno: #1a7f5a;
  --estado-tramite: #8a5a00;
  --estado-pendiente: #B61C1C;
  --marcador-fondo: #FFF3C4;
  --marcador-texto: #5A4300;
}

/* ---------- Tokens · oscuro (solo por elección de la persona: el tema claro es el predeterminado,
   como en el Quorómetro; no se sigue la preferencia del sistema) ---------- */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --rojo: #E0574F; --rojo-hondo: #F2A39D; --sobre-rojo: #141210;
  --tinta: #F2EEE8; --tinta-2: #B5ADA4;
  --papel: #141210; --papel-2: #1A1714; --superficie: #1E1B18; --linea: #38332E; --linea-fuerte: #4A443D;
  --banda-fondo: #F2EEE8; --banda-texto: #141210; --banda-texto-2: #4F4943;
  --falta-suave: #3A1E1B;
  --docentes: #3987e5; --estudiantes: #9ec5f4; --borde-estudiantes: transparent; --borde-justificada: transparent; --borde-hueco: #6b645c; --justificada: #7d766e; --ausente: #1E1B18;
  --via-institucional: #3987e5; --via-protesta: #c98500; --via-derecho: #199e70;
  --sec-1: #1a2a40; --sec-2: #184f95; --sec-3: #2a78d6; --sec-4: #6da7ec; --sec-5: #b7d3f6;
  --estado-bueno: #3fbf8a; --estado-tramite: #e0a63a; --estado-pendiente: #E0574F;
  --marcador-fondo: #4A3B00; --marcador-texto: #FFE38A;
}

/* ---------- Escala ---------- */
:root {
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --t-display: clamp(4.5rem, 12vw, 9rem);
  --t-h1: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  --t-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --t-h3: 1.25rem;
  --t-entradilla: 1.35rem;
  --t-cifra: 3rem;
  --t-cuerpo: 1.0625rem;
  --t-dato: .8125rem;
  --t-mini: .78rem;
  --e-1: 4px; --e-2: 8px; --e-3: 16px; --e-4: 24px; --e-5: 32px; --e-6: 48px; --e-7: 64px; --e-8: 96px;
  --radio: 4px;
  --radio-casilla: 3px;
  --medida: 70ch;
  --ancho: 1200px;
  --margen: 16px;
  --margen-fuentes: 190px;
  --alto-banda: 32px;
  --alto-cabecera: 56px;
}
@media (min-width: 768px) { :root { --margen: 32px; --alto-cabecera: 64px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-cabecera) + 16px); }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--sans); font-size: var(--t-cuerpo); line-height: 1.6;
  font-feature-settings: "tnum" 1, "lnum" 1; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 650; line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; letter-spacing: -.005em; }
h1 { font-size: var(--t-h1); line-height: 1.1; letter-spacing: -.012em; }
h2 { font-size: var(--t-h2); line-height: 1.2; }
h3 { font-size: var(--t-h3); }
p { margin: 0 0 1em; max-width: var(--medida); text-wrap: pretty; }
ul, ol { padding-left: 1.2em; }
a { color: var(--tinta); text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--linea-fuerte); text-underline-offset: .2em; }
a:hover { color: var(--rojo-hondo); text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; border-radius: 2px; }
img, svg { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; font-size: var(--t-dato); }
th, td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
hr { border: 0; border-top: 1px solid var(--linea); margin: var(--e-6) 0; }
::selection { background: var(--estudiantes); color: #0d1b2a; }

.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 8px; top: -100px; z-index: 200; background: var(--superficie); color: var(--tinta); padding: .5rem 1rem; border: 2px solid var(--tinta); }
.saltar:focus { top: 8px; }

/* ---------- Maquetación ---------- */
.contenedor { width: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; padding-left: var(--margen); padding-right: var(--margen); }
.seccion { padding-top: var(--e-7); padding-bottom: var(--e-7); }
.seccion + .seccion { border-top: 1px solid var(--linea); }
@media (min-width: 1024px) { .seccion { padding-top: var(--e-8); padding-bottom: var(--e-8); } }
.seccion--papel-2 { background: var(--papel-2); }
.lectura { max-width: var(--medida); }
.rejilla { display: grid; gap: var(--e-4); }
@media (min-width: 768px) {
  .rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { .rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* El acta: margen de fuentes a la izquierda en escritorio */
.acta { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-2) var(--e-5); }
.acta > * { min-width: 0; }
.acta__margen { font-size: var(--t-mini); color: var(--tinta-2); line-height: 1.45; }
.acta__margen .oficio { margin: 0 .25rem .25rem 0; }
@media (min-width: 1100px) {
  .acta { grid-template-columns: var(--margen-fuentes) minmax(0, 1fr); }
  .acta__margen { text-align: right; padding-top: .3rem; border-right: 1px solid var(--linea); padding-right: var(--e-4); }
  .acta__margen .oficio { margin: 0 0 .3rem .25rem; }
}

/* ---------- Tipografía de apoyo ---------- */
.antetitulo { font: 600 var(--t-mini)/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); margin: 0 0 var(--e-2); }
.entradilla { font: italic 400 var(--t-entradilla)/1.35 var(--serif); color: var(--tinta); max-width: 52ch; }
.lema { font: italic 500 1.05rem/1.3 var(--serif); color: var(--tinta-2); margin: 0 0 var(--e-3); }
.display { font: 600 var(--t-display)/.95 var(--serif); letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; margin: 0; }
.display small { font-size: .42em; letter-spacing: -.01em; font-weight: 500; }
.fuente { font-size: var(--t-mini); color: var(--tinta-2); }
.fuente::before { content: "Fuente · "; font-weight: 600; }
.fecha-corte { font: 500 var(--t-mini) var(--mono); color: var(--tinta-2); }
.subtitulo-seccion { color: var(--tinta-2); max-width: 60ch; margin-top: calc(-1 * var(--e-2)); }

/* ---------- Banda superior única (versión de trabajo + franja hermana) ---------- */
.banda-superior { background: var(--identidad, #B61C1C); color: #FFFFFF; font-size: .8125rem; line-height: 1.25; }
.banda-superior .contenedor { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: var(--alto-banda); padding-top: 4px; padding-bottom: 4px; }
.banda-superior a { color: #FFFFFF; font-weight: 650; text-decoration: none; white-space: nowrap; }
.banda-superior a:hover { text-decoration: underline; color: #FFFFFF; }
.banda-superior p { margin: 0; max-width: none; }
.banda-superior__trabajo { letter-spacing: .01em; min-width: 0; }
.banda-superior__trabajo strong { font-weight: 700; white-space: nowrap; }
.banda-superior__proyecto { white-space: nowrap; }
.banda-superior__trabajo::before { content: ""; display: inline-block; width: .55em; height: .55em; border: 1.5px solid currentColor; border-radius: 50%; margin-right: .45em; vertical-align: .02em; }
@media (max-width: 899px) { .banda-superior__largo { display: none; } }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--papel) 92%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--linea); }
.cabecera .contenedor { display: flex; align-items: center; gap: var(--e-3); min-height: var(--alto-cabecera); }
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--tinta); margin-right: auto; min-width: 0; }
.marca__emblema { flex: none; width: 44px; height: 44px; border-radius: 6px; box-shadow: 0 1px 0 rgb(0 0 0 / .08); }
@media (max-width: 559px) { .marca__emblema { width: 38px; height: 38px; } }
.marca__nombre { font: 700 1.08rem/1.05 var(--serif); letter-spacing: -.005em; }
.marca__sub { display: block; font: 500 .75rem/1.2 var(--sans); color: var(--tinta-2); letter-spacing: .01em; }
@media (max-width: 559px) { .marca__sub { display: none; } }
.marca:hover { color: var(--tinta); }
.version { font: 500 .75rem var(--mono); color: var(--tinta-2); text-decoration: none; border: 1px solid var(--linea); border-radius: var(--radio); padding: .05rem .35rem; white-space: nowrap; }
.version:hover { color: var(--tinta); border-color: var(--tinta-2); }
.boton-quorometro { flex: none; background: var(--rojo); color: var(--sobre-rojo); text-decoration: none; font-weight: 650; font-size: .86rem; padding: .48rem .8rem; border-radius: var(--radio); white-space: nowrap; }
.boton-quorometro:hover { background: var(--rojo-hondo); color: var(--sobre-rojo); }
.boton-tema { flex: none; display: grid; place-items: center; width: 40px; height: 40px; background: none; border: 1px solid var(--linea); color: var(--tinta); border-radius: 50%; cursor: pointer; }
.boton-tema:hover { border-color: var(--tinta-2); }
.boton-tema svg { width: 18px; height: 18px; }
.nav-principal { border-top: 1px solid var(--linea); }
.nav-principal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--e-4); }
.nav-principal a { display: block; color: var(--tinta); text-decoration: none; font-size: .9rem; padding: .62rem 0 .5rem; border-bottom: 2px solid transparent; }
.nav-principal a:hover { border-color: var(--linea-fuerte); color: var(--tinta); }
.nav-principal a[aria-current="page"] { border-color: var(--tinta); font-weight: 650; }
.menu-movil { display: none; }
@media (max-width: 1099px) {
  .nav-principal { display: none; }
  .menu-movil { display: block; position: static; }
  .menu-movil > summary { list-style: none; cursor: pointer; font: 600 .88rem/1 var(--sans); border: 1px solid var(--linea); border-radius: var(--radio); padding: .62rem .75rem; white-space: nowrap; }
  .menu-movil > summary::-webkit-details-marker { display: none; }
  .menu-movil[open] > summary { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
  .menu-movil__panel { position: absolute; left: 0; right: 0; top: 100%; padding-bottom: var(--e-4); background: var(--papel); border-bottom: 1px solid var(--linea); box-shadow: 0 16px 32px -16px rgb(0 0 0 / .25); }
  .menu-movil__panel ul { list-style: none; margin: 0 auto; padding: var(--e-2) var(--margen) var(--e-4); max-width: calc(var(--ancho) + 2 * var(--margen)); }
  .menu-movil__panel a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--linea); text-decoration: none; font: 600 1.15rem/1.2 var(--serif); }
  .menu-movil__panel a[aria-current="page"]::before { content: "→ "; }
}
@media (max-width: 559px) {
  .cabecera .contenedor { gap: 10px; }
  .version { display: none; }
  .marca__nombre { font-size: .92rem; display: block; max-width: 7.2em; }
  .boton-quorometro { font-size: .8rem; padding: .5rem .6rem; }
  .cabecera .boton-tema { display: none; }
  .menu-movil > summary { padding: .58rem .65rem; }
}
.menu-movil__tema { display: none; }
@media (max-width: 559px) { .menu-movil__tema { display: flex; align-items: center; gap: .6rem; margin: var(--e-3) auto 0; padding: 0 var(--margen); max-width: calc(var(--ancho) + 2 * var(--margen)); } }

/* ---------- Banda de tinta: el momento de impacto de cada página ---------- */
.banda-tinta { background: var(--banda-fondo); color: var(--banda-texto); }
.banda-tinta a { color: var(--banda-texto); text-decoration-color: var(--banda-texto-2); }
.banda-tinta a:hover { color: var(--banda-texto); text-decoration-color: currentColor; }
.banda-tinta .antetitulo, .banda-tinta .fuente, .banda-tinta .fecha-corte { color: var(--banda-texto-2); }
.banda-tinta :focus-visible { outline-color: var(--banda-texto); }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; gap: .5rem; font: 650 .95rem/1 var(--sans); padding: .8rem 1.1rem; border-radius: var(--radio); text-decoration: none; border: 1.5px solid var(--tinta); cursor: pointer; }
.boton--primario { background: var(--tinta); color: var(--papel); }
.boton--primario:hover { background: var(--rojo-hondo); border-color: var(--rojo-hondo); color: var(--papel); }
.boton--secundario { background: transparent; color: var(--tinta); }
.boton--secundario:hover { background: var(--tinta); color: var(--papel); }
.banda-tinta .boton--primario { background: var(--banda-texto); color: var(--banda-fondo); border-color: var(--banda-texto); }
.banda-tinta .boton--secundario { color: var(--banda-texto); border-color: var(--banda-texto); }
.banda-tinta .boton--secundario:hover { background: var(--banda-texto); color: var(--banda-fondo); }
.boton-mini { font: 600 .78rem/1 var(--sans); color: var(--tinta); background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--radio); padding: .45rem .65rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.boton-mini:hover, .boton-mini[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.enlace-flecha { font-weight: 650; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
.enlace-flecha::after { content: " →"; }

/* ---------- Componentes propios ---------- */

/* Etiqueta de oficio (expediente). Variante EA-FD para documentos de la representación. */
.oficio { display: inline-block; font: 500 var(--t-mini)/1.55 var(--mono); color: var(--tinta); background: var(--papel); border: 1px solid var(--linea-fuerte); border-radius: 2px; padding: 0 .38rem; white-space: nowrap; }
.oficio--ea { border-color: var(--tinta); }
.documentos { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: 0; padding: 0; list-style: none; }
.documentos__rotulo { font: 600 .75rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); margin-right: .3rem; }

/* Cifra con fuente: estándar, display y compacta */
.cifra { display: flex; flex-direction: column; gap: .3rem; padding: var(--e-3) 0 0; border-top: 2px solid var(--tinta); }
.cifra__valor { font: 700 var(--t-cifra)/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; }
.cifra__frase { font-size: .98rem; line-height: 1.35; max-width: 32ch; }
.cifra__fuente { font-size: var(--t-mini); color: var(--tinta-2); margin-top: .25rem; }
.cifra__fuente::before { content: "Fuente · "; font-weight: 600; }
.cifra__salvedad { display: inline-block; font: 650 .75rem var(--sans); color: var(--estado-tramite); border: 1px solid currentColor; border-radius: 999px; padding: 0 .45rem; align-self: flex-start; }
.cifra--display .cifra__valor { white-space: nowrap; font-size: var(--t-display); line-height: .92; letter-spacing: -.035em; font-weight: 600; }
.cifra--display .cifra__frase { font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); max-width: 26ch; }
.cifra--compacta { border-top-width: 1px; padding-top: var(--e-2); }
.cifra--compacta .cifra__valor { font-size: 1.8rem; }
.cifra--compacta .cifra__frase { font-size: .85rem; }
.banda-tinta .cifra { border-top-color: var(--banda-texto); }
.banda-tinta .cifra__fuente { color: var(--banda-texto-2); }
.fila-cifras { display: grid; gap: var(--e-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .fila-cifras { grid-template-columns: repeat(var(--columnas, 4), minmax(0, 1fr)); } }
.fila-cifras--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Cita con marca de tiempo */
.cita-tiempo { margin: 0; padding: var(--e-3) var(--e-4); background: var(--superficie); border: 1px solid var(--linea); border-left: 3px solid var(--docentes); border-radius: var(--radio); display: flex; flex-direction: column; gap: var(--e-2); }
.cita-tiempo blockquote { margin: 0; font: 400 1.12rem/1.45 var(--serif); }
.cita-tiempo figcaption { font-size: .82rem; color: var(--tinta-2); display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin-top: auto; }
.marca-tiempo { font: 500 .8rem var(--mono); background: var(--tinta); color: var(--papel); padding: .05rem .4rem; border-radius: 2px; white-space: nowrap; }
.chip-tipo { font: 650 .75rem var(--sans); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--linea-fuerte); border-radius: 2px; padding: .05rem .4rem; color: var(--tinta-2); }

/* Marcador de capa */
.capa { display: inline-flex; align-items: center; gap: .45rem; font: 700 .78rem/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; padding: .42rem .65rem; border-radius: 2px; margin-bottom: var(--e-3); }
.capa::before { content: ""; width: 8px; height: 8px; border-radius: 1px; background: currentColor; }
.capa--consta { background: var(--tinta); color: var(--papel); }
.capa--consta::before { background: var(--papel); }
.capa--instancias { color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.capa--analisis { color: var(--docentes); box-shadow: inset 0 0 0 1.5px var(--docentes); }
.capa--pedimos { background: var(--docentes); color: var(--papel); }
.capa--pedimos::before { background: var(--papel); }

/* Distintivo de estado: icono + texto */
.estado { display: inline-flex; align-items: baseline; gap: .4rem; font-size: .82rem; font-weight: 650; line-height: 1.3; padding: .12rem .55rem; border-radius: 999px; border: 1.5px solid currentColor; max-width: 100%; }
.estado__icono { font-family: var(--sans); }
.estado--atendido { color: var(--estado-bueno); }
.estado--parcial, .estado--tramite { color: var(--estado-tramite); }
.estado--pendiente, .estado--sin-respuesta { color: var(--estado-pendiente); border-style: dashed; }

/* Chips de caso y de vía */
.chip-caso { display: inline-flex; align-items: center; font: 650 .78rem/1 var(--sans); color: var(--tinta); border: 1px solid var(--linea-fuerte); border-radius: 2px; padding: .32rem .45rem; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
a.chip-caso:hover { border-color: var(--tinta); color: var(--tinta); background: var(--superficie); }
.via { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.via::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--c); }
.via--institucional { --c: var(--via-institucional); }
.via--derecho { --c: var(--via-derecho); }
.via--protesta { --c: var(--via-protesta); }

/* Tarjeta (solo para unidades que se comparan) */
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e-4); }
a.tarjeta { display: block; color: var(--tinta); text-decoration: none; transition: border-color .15s; }
a.tarjeta:hover { border-color: var(--tinta); }

/* Logro con "Qué sigue" */
.logro { border-top: 3px solid var(--tinta); padding-top: var(--e-4); display: grid; gap: var(--e-3); }
.logro__que-sigue { border-left: 3px solid var(--tinta); background: var(--papel-2); padding: var(--e-3) var(--e-4); font-size: .95rem; }
.logro__que-sigue > strong { display: block; font: 700 .75rem var(--sans); letter-spacing: .09em; text-transform: uppercase; margin-bottom: .25rem; }

/* Avisos legales */
.aviso { border: 1px solid var(--linea); border-left: 4px solid var(--tinta-2); background: var(--superficie); padding: var(--e-3) var(--e-4); font-size: .9rem; border-radius: var(--radio); }
.aviso > strong:first-child { display: block; font: 700 .75rem var(--sans); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .3rem; }
.aviso p:last-child { margin-bottom: 0; }

/* Marcadores de texto pendiente o por definir */
.pendiente { background: var(--marcador-fondo); color: var(--marcador-texto); padding: 0 .25rem; border-radius: 2px; font-weight: 650; }

/* Pestañas */
.pestanas { display: flex; gap: 0; border-bottom: 1px solid var(--linea-fuerte); margin-bottom: var(--e-4); overflow-x: auto; }
.pestanas [role="tab"] { background: none; border: 0; border-bottom: 3px solid transparent; padding: .7rem .1rem; margin-right: var(--e-4); font: 650 .95rem var(--sans); color: var(--tinta-2); cursor: pointer; white-space: nowrap; }
.pestanas [role="tab"][aria-selected="true"] { color: var(--tinta); border-color: var(--tinta); }

/* ---------- Gráficos: contenedor común ---------- */
.grafico { margin: 0; }
.grafico__cabeza { margin-bottom: var(--e-3); }
.grafico__titulo { font: 650 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.25 var(--serif); margin: 0 0 .25rem; max-width: 40ch; }
.grafico__subtitulo { font-size: .85rem; color: var(--tinta-2); margin: 0; }
.grafico__cuerpo { position: relative; }
.grafico__lienzo svg { display: block; width: 100%; height: auto; font-family: var(--sans); }
.grafico__pie { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); align-items: center; justify-content: space-between; border-top: 1px solid var(--linea); margin-top: var(--e-3); padding-top: var(--e-2); }
.grafico__pie .fuente { flex: 1 1 260px; }
.grafico__acciones { display: flex; gap: var(--e-2); }
.grafico__tabla { margin-top: var(--e-2); }
.grafico__tabla .tabla-desplazable { overflow-x: auto; margin-top: var(--e-2); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.grafico--tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e-4); }
.leyenda { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: var(--t-dato); margin: 0 0 var(--e-3); padding: 0; list-style: none; }
.leyenda li { display: inline-flex; align-items: center; gap: .4rem; }
.leyenda__muestra { width: 12px; height: 12px; border-radius: 2px; flex: none; background: var(--c, var(--tinta)); }
.leyenda__muestra--falta { background: repeating-linear-gradient(-45deg, var(--rojo) 0 1.5px, var(--falta-suave) 1.5px 4px); outline: 1.5px dashed var(--rojo); outline-offset: -1.5px; }
.leyenda__muestra--hueco { background: var(--ausente); box-shadow: inset 0 0 0 1px var(--borde-hueco); }
.leyenda__muestra--punteada { background: transparent; outline: 1.5px dashed var(--tinta-2); outline-offset: -1.5px; }

/* Tooltip de gráficos */
.tooltip { position: absolute; z-index: 30; pointer-events: none; background: var(--tinta); color: var(--papel); font-size: .8rem; line-height: 1.35; padding: .45rem .6rem; border-radius: var(--radio); max-width: 240px; box-shadow: 0 6px 18px -6px rgb(0 0 0 / .35); transform: translate(-50%, calc(-100% - 10px)); white-space: normal; }
.tooltip strong { display: block; font-weight: 650; }
.tooltip[hidden] { display: none; }

/* ---------- SVG: clases de datos (colores siempre por variable) ---------- */
.g-eje { stroke: var(--linea-fuerte); stroke-width: 1; }
.g-reticula { stroke: var(--linea); stroke-width: 1; stroke-dasharray: 2 3; }
.g-texto { fill: var(--tinta-2); font-size: 12px; }
.g-texto-fuerte { fill: var(--tinta); font-size: 13px; font-weight: 650; }
.g-valor { fill: var(--tinta); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.g-docentes { fill: var(--docentes); }
.g-estudiantes { fill: var(--estudiantes); stroke: var(--borde-estudiantes); stroke-width: 1; }
.g-justificada { fill: var(--justificada); stroke: var(--borde-justificada); stroke-width: 1; }
.g-tinta { fill: var(--tinta); }
.g-tinta-2 { fill: var(--tinta-2); }
.g-papel { fill: var(--papel); }
.g-hueco { fill: var(--ausente); stroke: var(--borde-hueco); stroke-width: 1; }
.g-falta { fill: url(#rayado-falta); stroke: var(--rojo); stroke-width: 1.5; stroke-dasharray: 3 2; }
.g-falta-linea { stroke: var(--rojo); stroke-width: 2; stroke-dasharray: 5 3; fill: none; }
.g-falta-texto { fill: var(--rojo); font-weight: 700; font-size: 12px; }
.g-quorum { stroke: var(--tinta); stroke-width: 1.5; stroke-dasharray: 4 3; fill: none; }
.g-programada { fill: none; stroke: var(--tinta-2); stroke-width: 1.5; stroke-dasharray: 4 3; }
.g-institucional { fill: var(--via-institucional); }
.g-derecho { fill: var(--via-derecho); }
.g-protesta { fill: var(--via-protesta); }
.g-sec-1 { fill: var(--sec-1); } .g-sec-2 { fill: var(--sec-2); } .g-sec-3 { fill: var(--sec-3); } .g-sec-4 { fill: var(--sec-4); } .g-sec-5 { fill: var(--sec-5); }
.g-interactivo { cursor: pointer; }
.g-interactivo:focus-visible { outline: none; stroke: var(--tinta); stroke-width: 3; }

/* Casillas que entran al ser vistas (solo si se permite el movimiento) */
@media (prefers-reduced-motion: no-preference) {
  .entra .casilla { opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; transition: opacity .25s ease, transform .25s ease, fill .25s ease; transition-delay: calc(var(--i, 0) * var(--paso, 2ms)); }
  .entra.vista .casilla { opacity: 1; transform: none; }
  .casilla { transition: fill .25s ease, stroke .25s ease; }
}

/* ---------- Pie ---------- */
.pie { background: var(--papel-2); border-top: 1px solid var(--linea); padding: var(--e-7) 0 var(--e-6); font-size: .9rem; }
.pie__rejilla { display: grid; gap: var(--e-5); }
@media (min-width: 900px) { .pie__rejilla { grid-template-columns: 1.3fr 1fr 1fr; } }
.pie__lema { font: italic 600 1.35rem/1.25 var(--serif); margin: 0 0 var(--e-2); }
.pie__no-oficial { font-weight: 700; margin: var(--e-3) 0 0; }
.pie h2 { font: 700 .75rem var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-2); margin: 0 0 var(--e-2); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.pie a { text-decoration-color: var(--linea-fuerte); }
.pie__base { margin-top: var(--e-6); padding-top: var(--e-3); border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); justify-content: space-between; color: var(--tinta-2); font-size: .82rem; }

/* ---------- Impresión ---------- */
@media print {
  .banda-superior, .cabecera, .pie__base .version, .grafico__acciones, .boton-tema { display: none !important; }
  body { background: #fff; color: #000; }
}

/* La cifra display ocupa su propia fila en la rejilla de cifras */
.fila-cifras .cifra--display { grid-column: 1 / -1; }
@media (min-width: 900px) { .fila-cifras .cifra--display { grid-column: span 2; } }

.grafico__lectura { font-size: .95rem; max-width: 70ch; margin: var(--e-3) 0 0; padding-left: var(--e-3); border-left: 2px solid var(--tinta); }
.fuente-sin-rotulo { font-size: var(--t-mini); color: var(--tinta-2); }

.leyenda__muestra[style*="--estudiantes"] { box-shadow: inset 0 0 0 1px var(--borde-estudiantes); }

/* Barras que se desplazan de lado (subnavegación, minimapa móvil): señal visible de que hay más */
.desplazable-x { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--linea-fuerte) transparent; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); padding-bottom: 6px; }
.desplazable-x > * > *, .desplazable-x > * { scroll-snap-align: start; }
.desplazable-x.al-final { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 1099px) { .menu-movil__panel { border-top: 1px solid var(--linea); border-bottom: 2px solid var(--tinta); } }

/* Rojo de "falta" sobre la banda de tinta: el que contrasta con su fondo (claro: banda oscura → coral; oscuro: banda clara → rojo de marca) */
:root { --rojo-en-banda: #E0574F; }
:root[data-tema="oscuro"] { --rojo-en-banda: #B61C1C; }
.banda-tinta .g-falta-texto { fill: var(--rojo-en-banda); }
.banda-tinta .g-falta, .banda-tinta .g-falta-linea { stroke: var(--rojo-en-banda); }


/* =====================================================================
   IDENTIDAD · Estudiantes Asambleístas
   El campo rojo del emblema oficial (#B61C1C, el mismo rojo de marca del Quorómetro) es la
   identidad del sitio: cabeceras de página, portada e imágenes para compartir. Es un color de
   identidad, no un dato: dentro de los gráficos el rojo sigue significando "falta" (rayado o
   contorno). Blanco sobre #B61C1C = 6,5:1 (AA). El campo rojo es igual en claro y en oscuro.
   ===================================================================== */
:root { --identidad: #B61C1C; --identidad-honda: #8E1414; --identidad-texto: #FFFFFF; --identidad-texto-2: #F6D5D5; }
.campo-rojo, main > .banda-tinta:first-child, main .banda-baja {
  background: var(--identidad);
  color: var(--identidad-texto);
  position: relative; overflow: hidden; isolation: isolate;
  /* tokens locales: todo lo que se dibuje dentro del campo rojo se lee sobre el rojo */
  --banda-fondo: var(--identidad); --banda-texto: var(--identidad-texto); --banda-texto-2: var(--identidad-texto-2);
  --tinta: #FFFFFF; --tinta-2: var(--identidad-texto-2); --papel: var(--identidad); --papel-2: var(--identidad-honda); --superficie: var(--identidad-honda);
  --linea: rgb(255 255 255 / .28); --linea-fuerte: rgb(255 255 255 / .5);
  --rojo: #FFFFFF; --rojo-hondo: #FFFFFF; --rojo-en-banda: #FFFFFF; --falta-suave: var(--identidad-honda); --sobre-rojo: var(--identidad);
  --docentes: #FFFFFF; --estudiantes: #F6D5D5; --borde-hueco: rgb(255 255 255 / .55); --ausente: var(--identidad);
}
.campo-rojo a, main > .banda-tinta:first-child, main .banda-baja a { color: var(--identidad-texto); text-decoration-color: var(--identidad-texto-2); }
.campo-rojo :focus-visible, main > .banda-tinta:first-child, main .banda-baja :focus-visible { outline-color: #FFFFFF; }
.campo-rojo .antetitulo, .campo-rojo .fuente, .campo-rojo .fecha-corte, .campo-rojo .cifra__fuente, .campo-rojo .lema,
main > .banda-tinta:first-child, main .banda-baja .antetitulo, main > .banda-tinta:first-child, main .banda-baja .fuente, main > .banda-tinta:first-child, main .banda-baja .fecha-corte,
main > .banda-tinta:first-child, main .banda-baja .cifra__fuente, main > .banda-tinta:first-child, main .banda-baja .lema { color: var(--identidad-texto-2); }
.campo-rojo .cifra, main > .banda-tinta:first-child, main .banda-baja .cifra { border-top-color: rgb(255 255 255 / .9); }
.campo-rojo .cifra__salvedad, main > .banda-tinta:first-child, main .banda-baja .cifra__salvedad { color: #FFFFFF; }
.campo-rojo .boton--primario, main > .banda-tinta:first-child, main .banda-baja .boton--primario { background: #FFFFFF; color: var(--identidad); border-color: #FFFFFF; }
.campo-rojo .boton--secundario, main > .banda-tinta:first-child, main .banda-baja .boton--secundario { color: #FFFFFF; border-color: #FFFFFF; }
.campo-rojo .boton--secundario:hover, main > .banda-tinta:first-child, main .banda-baja .boton--secundario:hover { background: #FFFFFF; color: var(--identidad); }
.campo-rojo .pendiente, main > .banda-tinta:first-child, main .banda-baja .pendiente { background: #FFF3C4; color: #5A4300; }
/* Marca de agua del emblema (la Justicia) en las cabeceras: grande, al borde derecho, sin restar lectura */
main > .banda-tinta:first-child::after, main .banda-baja::after, .campo-rojo--emblema::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: max(-40px, calc((100vw - var(--ancho)) / 2 - 120px)); top: 50%; translate: 0 -50%;
  width: min(46vw, 420px); aspect-ratio: 1; opacity: .16;
  background: url("../img/emblema-figura.svg") center / contain no-repeat;
}
@media (max-width: 699px) { main > .banda-tinta:first-child::after, main .banda-baja::after, .campo-rojo--emblema::after { width: 62vw; right: -18vw; opacity: .12; } }
/* La cabecera fija sobre el campo rojo: el borde inferior marca el paso al rojo */
.cabecera { border-bottom-color: var(--linea); }
/* Pie: emblema con leyenda */
.pie__emblema { display: block; width: 104px; height: auto; margin-bottom: var(--e-3); border-radius: 4px; }
/* "Falta" dentro del campo rojo: rayado blanco y contorno blanco punteado */
.campo-rojo .g-falta, main > .banda-tinta:first-child, main .banda-baja .g-falta { fill: url(#rayado-falta-campo); stroke: #FFFFFF; }
.campo-rojo .leyenda__muestra--falta, main > .banda-tinta:first-child, main .banda-baja .leyenda__muestra--falta { background: repeating-linear-gradient(-45deg, #FFFFFF 0 1.5px, transparent 1.5px 4px); outline-color: #FFFFFF; }

/* Los gráficos de datos dentro del campo rojo van sobre un panel de papel: así el rojo vuelve a
   significar "falta" y docentes y estudiantes recuperan sus colores. Los --pg-* guardan los tokens
   de la página (claro u oscuro) calculados en :root, antes de que el campo rojo los cambie. */
:root, :root[data-tema="oscuro"] {
  --pg-tinta: var(--tinta); --pg-tinta-2: var(--tinta-2); --pg-papel: var(--papel); --pg-papel-2: var(--papel-2); --pg-superficie: var(--superficie);
  --pg-linea: var(--linea); --pg-linea-fuerte: var(--linea-fuerte); --pg-rojo: var(--rojo); --pg-rojo-hondo: var(--rojo-hondo); --pg-falta-suave: var(--falta-suave);
  --pg-docentes: var(--docentes); --pg-estudiantes: var(--estudiantes); --pg-ausente: var(--ausente); --pg-borde-hueco: var(--borde-hueco); --pg-sobre-rojo: var(--sobre-rojo);
}
:is(.campo-rojo, main > .banda-tinta:first-child) :is(figure.grafico, .panel-papel, .hero__miniatura, .datos-banda__miniatura) {
  --tinta: var(--pg-tinta); --tinta-2: var(--pg-tinta-2); --papel: var(--pg-papel); --papel-2: var(--pg-papel-2); --superficie: var(--pg-superficie);
  --linea: var(--pg-linea); --linea-fuerte: var(--pg-linea-fuerte); --rojo: var(--pg-rojo); --rojo-hondo: var(--pg-rojo-hondo); --falta-suave: var(--pg-falta-suave);
  --docentes: var(--pg-docentes); --estudiantes: var(--pg-estudiantes); --ausente: var(--pg-ausente); --borde-hueco: var(--pg-borde-hueco); --sobre-rojo: var(--pg-sobre-rojo); --rojo-en-banda: var(--pg-rojo);
  --identidad-texto: var(--pg-tinta); --identidad-texto-2: var(--pg-tinta-2); --banda-texto: var(--pg-tinta); --banda-texto-2: var(--pg-tinta-2); --banda-fondo: var(--pg-superficie);
  background: var(--pg-superficie); color: var(--pg-tinta); border-radius: 8px; padding: var(--e-4);
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / .45);
}
:is(.campo-rojo, main > .banda-tinta:first-child) :is(figure.grafico, .panel-papel, .hero__miniatura, .datos-banda__miniatura) .g-falta { fill: url(#rayado-falta); stroke: var(--pg-rojo); }
:is(.campo-rojo, main > .banda-tinta:first-child) :is(figure.grafico, .panel-papel, .hero__miniatura, .datos-banda__miniatura) .leyenda__muestra--falta { background: repeating-linear-gradient(-45deg, var(--pg-rojo) 0 1.5px, var(--pg-falta-suave) 1.5px 4px); outline-color: var(--pg-rojo); }
:is(.campo-rojo, main > .banda-tinta:first-child) :is(figure.grafico, .panel-papel, .hero__miniatura, .datos-banda__miniatura) a { color: var(--pg-tinta); }
:is(.campo-rojo, main > .banda-tinta:first-child) :is(figure.grafico, .panel-papel, .hero__miniatura, .datos-banda__miniatura) .fuente,
:is(.campo-rojo, main > .banda-tinta:first-child) :is(figure.grafico, .panel-papel, .hero__miniatura, .datos-banda__miniatura) .grafico__subtitulo { color: var(--pg-tinta-2); }