/* =========================================================================
   estilos.css — Sistema visual del micrositio.

   Hereda la paleta, la tipografía y el componente de tarjeta de
   micrositio_web_9_sept_2026. Lo que cambia respecto a aquél:

     1. --ancho = 1240 px, el de la caja donde se publica.
     2. Todo un punto más pequeño y con más aire entre bloques: el tablero
        tiene que verse menos cargado, y eso se consigue antes bajando el
        cuerpo de letra y subiendo el espacio en blanco que quitando
        contenido.
     3. Los rótulos de las tarjetas van en caja normal —primera en mayúscula
        y el resto en minúscula—, no en versalitas.
     4. Las notas aclaratorias van DEBAJO de lo que explican, en cuerpo
        pequeño y sin negrita: son una aclaración, no un titular.
     5. El rojo no presenta cifras, salvo dos excepciones deliberadas: el
        botón de limpiar filtros, y la tarjeta `.kpi-alarma` (franja, borde,
        fondo y cifra) reservada a «Estudiantes» y «Sedes que no han vuelto
        a clase». En cualquier otra tarjeta, si el rojo aparece, tiñe sólo
        la cifra (`.kpi-valor-rojo`). El vinotinto #6B1410 sigue siendo el
        extremo de la escala de severidad, donde significa algo distinto.
   ========================================================================= */

/* Montserrat como sustituto de Gotham cuando la fuente corporativa no está
   instalada. Si no hay conexión, la pila cae al sans-serif del sistema. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

:root {
  --principal: #14354E;
  --principal-claro: #1E4A6B;
  --secundario: #FFC100;
  --azul: #034175;
  --azul-medio: #3E7CA6;
  --rojo: #a8301c;
  --tinta: #0E2233;
  --texto: #2B3B49;
  --texto-suave: #63748A;
  --borde: #DCE3EA;
  --fondo: #F4F7FA;
  --superficie: #FFFFFF;
  --neutro: #9AA5B1;
  --ocre: #8C6D1F;

  /* Escala de severidad. Idéntica a CONFIG.SEVERIDAD: está medida en
     contraste y bajo daltonismo y no se toca. */
  --sev-alta: #6B1410;
  --sev-media: #D95F0E;
  --sev-baja: #FFC100;
  --sev-nd: #9AA5B1;

  --fuente: "Gotham", "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;

  --radio: 10px;
  --sombra: 0 1px 2px rgba(20, 53, 78, .05), 0 3px 12px rgba(20, 53, 78, .05);
  --sombra-alta: 0 8px 26px rgba(20, 53, 78, .15);

  --ancho: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 14px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--fuente); margin: 0; line-height: 1.25; }
a { color: var(--azul); }

code {
  font-family: "Consolas", "SF Mono", ui-monospace, monospace;
  font-size: .88em;
  background: rgba(20, 53, 78, .07);
  padding: .1em .35em;
  border-radius: 4px;
}

.oculto { display: none !important; }

/* ------------------------------------------------------------ Encabezado */
.cabecera {
  background: linear-gradient(135deg, var(--principal) 0%, var(--tinta) 100%);
  color: #fff;
  padding: 20px 24px 0;
}
.cabecera-interior { max-width: var(--ancho); margin: 0 auto; text-align: center; }

/* El lema es el título, sin nada dinámico al lado: el nombre de la sección
   ya lo dice el botón activo. */
.cabecera h1 {
  font-size: 21px; font-weight: 700; letter-spacing: -.2px;
  color: var(--secundario);
}

.lema-intro {
  font-size: 13.5px; line-height: 1.6;
  color: rgba(255, 255, 255, .84);
  max-width: 88ch; margin: 10px auto 0;
}
.lema-intro em { font-style: normal; color: #fff; font-weight: 600; }

.invita {
  font-size: 12.5px; color: rgba(255, 255, 255, .7);
  margin: 0 0 8px;
}

/* ---------------------------------------------------- Conmutador de sección */
.secciones {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; align-items: stretch;
  margin: 12px 0 16px;
}
.seccion {
  appearance: none;
  flex: 1 1 240px; max-width: 390px;
  min-height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: inherit; font-weight: 700; font-size: 13.5px;
  padding: 8px 16px; border-radius: 9px;
  cursor: pointer; text-align: center; line-height: 1.2;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.seccion:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .6); }
.seccion:focus-visible { outline: 3px solid var(--secundario); outline-offset: 2px; }
.seccion.activa {
  background: var(--secundario); border-color: var(--secundario);
  color: var(--tinta); box-shadow: 0 4px 14px rgba(255, 193, 0, .26);
}

/* ----------------------------------------------- Conmutador de nivel */
.selector-nivel { margin: 0 0 12px; }

.niveles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.nivel-btn {
  appearance: none;
  min-height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .92);
  font: inherit; font-weight: 600; font-size: 12.5px;
  padding: 6px 16px; border-radius: 8px;
  cursor: pointer; text-align: center; line-height: 1.2;
  transition: background .15s, border-color .15s;
}
.nivel-btn:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); }
.nivel-btn:focus-visible { outline: 3px solid var(--secundario); outline-offset: 2px; }
.nivel-btn.activa {
  background: #fff; border-color: #fff; color: var(--principal);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.nivel-btn[disabled] { opacity: .4; cursor: default; }

#resumen-filtro {
  margin: 12px 0 0; font-size: 13.5px;
  color: rgba(255, 255, 255, .92);
}
#resumen-filtro b { color: var(--secundario); font-size: 15.5px; }
#resumen-filtro .tenue { color: rgba(255, 255, 255, .58); font-size: 12px; }

#nota-corte {
  margin: 5px 0 0; font-size: 11.5px;
  color: rgba(255, 255, 255, .58); font-weight: 400;
}
#nota-corte b { font-weight: 600; color: rgba(255, 255, 255, .78); }

/* ------------------------------------------------------------- Pestañas */
/* Botones, no subrayados: es el mismo gesto que el conmutador de nivel y
   debe verse igual. */
.pestanas {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-top: 14px; padding-bottom: 14px;
}
.pestana {
  appearance: none;
  min-height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .9);
  font: inherit; font-weight: 600; font-size: 12.5px;
  padding: 6px 18px; border-radius: 8px;
  cursor: pointer; line-height: 1.2;
  transition: background .15s, border-color .15s;
}
.pestana:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); }
.pestana:focus-visible { outline: 3px solid var(--secundario); outline-offset: 2px; }
.pestana.activa {
  background: #fff; border-color: #fff; color: var(--principal);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

/* ------------------------------------------------------- Barra de filtros */
.barra-filtros {
  background: var(--superficie); border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 40;
  box-shadow: 0 2px 10px rgba(20, 53, 78, .05);
}
.barra-filtros-interior { max-width: var(--ancho); margin: 0 auto; padding: 10px 24px; }

.filtros-titulo { font-size: 11.5px; color: var(--texto-suave); margin: 0 0 8px; font-weight: 400; }
.filtros-titulo b { color: var(--principal); font-weight: 600; }

.barra-controles { display: flex; flex-wrap: wrap; gap: 9px; align-items: flex-end; }

.control { display: flex; flex-direction: column; gap: 4px; min-width: 140px; flex: 1 1 140px; }
.control.crece { flex: 2 1 210px; }
.control.estrecho { flex: 0 1 146px; }
.control label {
  font-size: 10px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--texto-suave);
}

.desplegable {
  font: inherit; font-size: 12.5px; padding: 8px 9px;
  border: 1px solid var(--borde); border-radius: 8px;
  background: #fff; color: var(--texto); max-width: 100%; width: 100%;
}
.desplegable:focus { outline: 2px solid var(--azul); outline-offset: 1px; }

.boton {
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 8px 15px; border-radius: 8px;
  border: 1px solid var(--principal); background: var(--principal);
  color: #fff; cursor: pointer; white-space: nowrap;
}
.boton:hover { background: var(--principal-claro); }
.boton-limpio { background: #fff; color: var(--rojo); border-color: var(--rojo); }
.boton-limpio:hover { background: #FDF2F0; }
.boton-limpio:disabled { opacity: .4; cursor: default; background: #fff; }

/* ------------------------------------------------------------- Contenido */
.contenido { max-width: var(--ancho); margin: 0 auto; padding: 22px 24px 40px; }

/* Más aire entre bloques: es lo que descarga visualmente el tablero.

   `display: flex` está aquí por una razón concreta: permite que la nota
   aclaratoria se pinte al final del bloque —con `order`— aunque el código la
   cree junto al título. Así las vistas siguen declarando «este bloque se
   llama X y se aclara con Y» en una sola línea, y la aclaración aparece
   igualmente debajo de lo que explica. */
.bloque { margin-bottom: 34px; display: flex; flex-direction: column; }

.titulo-bloque { font-size: 16.5px; font-weight: 700; color: var(--principal); margin-bottom: 4px; }
.titulo-bloque::after {
  content: ""; display: block; width: 32px; height: 3px;
  background: var(--secundario); border-radius: 2px; margin-top: 6px;
}

/* NOTA AL PIE DE BLOQUE. Va debajo de lo que explica, en cuerpo pequeño y
   sin negrita: es una aclaración, no un titular. Sustituye a los párrafos
   de ayuda que iban encima y a las cajas de aviso con fondo de color. */
.nota-pie {
  order: 9;                 /* siempre la última dentro de su bloque o tarjeta */
  /* Cuerpo mínimo y ancho completo: cuantos menos renglones ocupe la
     aclaración, menos carga el tablero. Sin `max-width` el texto aprovecha
     los 1.240 px y cabe en una o dos líneas en vez de cuatro. */
  font-size: 10.5px; line-height: 1.55; font-weight: 400;
  color: var(--texto-suave);
  margin: 10px 0 0; max-width: none;
}
.nota-pie b, .nota-pie strong { font-weight: 400; }
.nota-pie code { font-size: .92em; }

.ayuda {
  font-size: 10.5px; color: var(--texto-suave);
  margin: 10px 0 0; max-width: none; line-height: 1.55; font-weight: 400;
}
.ayuda b { font-weight: 400; }
.nota { font-size: 10.5px; color: var(--texto-suave); margin: 9px 0 0; }
.tenue { color: var(--texto-suave); }

/* --------------------------------------------------------------- Rejillas */
/* `min-width: 0` en las celdas: sin él, una tabla con ancho mínimo dentro de
   una columna de la rejilla estira la rejilla entera y el desplazamiento
   horizontal se le pasa a la página. Con él, la tabla se desplaza dentro de
   su propio marco y la página no se mueve. */
.rejilla { display: grid; gap: 18px; }
.rejilla > * { min-width: 0; }
.rejilla.dos { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.rejilla.tres { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
/* Tres cuartos para el listado, un cuarto para lo que lo acompaña. */
.rejilla.tres-cuartos { grid-template-columns: 3fr 1fr; }
@media (max-width: 1000px) { .rejilla.tres-cuartos { grid-template-columns: 1fr; } }

.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 16px 18px; margin-top: 14px; min-width: 0;
  display: flex; flex-direction: column;
}
.tarjeta-cab { margin-bottom: 10px; }
.tarjeta-cab h3 { font-size: 14px; font-weight: 700; color: var(--principal); }
.rejilla .tarjeta { margin-top: 0; }

/* ----------------------------------------------------------- Tarjetas KPI */
/* Rótulo en caja normal: primera en mayúscula, el resto en minúscula. */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin-top: 14px;
}
.kpi {
  position: relative; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 14px 17px 13px; overflow: hidden;
}
.kpi-barra { position: absolute; inset: 0 auto 0 0; width: 5px; }
.kpi-rotulo {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0;
  color: var(--texto-suave); margin: 0 0 7px; line-height: 1.35;
}
.kpi-valor {
  font-size: 29px; font-weight: 700; color: var(--principal);
  margin: 0; line-height: 1.05; letter-spacing: -.5px;
}
/* Única cifra en rojo del resto del tablero. Tiñe el número y nada más, ni
   la franja ni el borde ni el fondo de la tarjeta. La excepción a esto es
   `.kpi-alarma`, justo debajo. */
.kpi-valor-rojo { color: var(--rojo); }
.kpi-pie { font-size: 11.5px; color: var(--texto-suave); margin: 7px 0 0; line-height: 1.5; }
.kpi-pie-sec { margin-top: 3px; opacity: .88; }
.kpi-enlace { font-size: 11.5px; font-weight: 700; color: var(--azul); margin: 9px 0 0; }
.kpi-accionable { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.kpi-accionable:hover { border-color: var(--azul); box-shadow: var(--sombra-alta); }
.kpi-accionable:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

/* Variante de alarma: tiñe TODA la tarjeta -fondo, borde y franja-, además
   de la cifra. Reservada a «Estudiantes que no han vuelto a clase» y «Sedes
   que no han vuelto a clase» (sección «Regresando a clases»): las dos
   cifras que el tablero existe para llevar a cero. Es la única tarjeta del
   micrositio con color de alarma; en cualquier otro sitio el rojo, cuando
   aparece, tiñe sólo el número (`.kpi-valor-rojo` arriba). */
.kpi-alarma { background: #FBEAE8; border-color: var(--rojo); }
.kpi-alarma .kpi-rotulo { color: var(--rojo); }
.kpi-alarma .kpi-pie { color: #8C3B30; }

.kpis-principal .kpi { padding: 17px 19px 15px; }
.kpis-principal .kpi-barra { width: 7px; }
.kpis-principal .kpi-valor { font-size: 34px; }
.kpis-principal .kpi-pie {
  border-top: 1px solid var(--borde); padding-top: 9px; margin-top: 10px;
}
.kpis-principal .kpi-pie b { color: var(--principal); font-weight: 700; }

/* --------------------------------------- Conmutador como cabezote de tabla */
/* Los grupos dejan de ser tarjetas sueltas y se convierten en la cabecera
   de la tabla que filtran. Ocupan su ancho completo, van pegados a ella y el
   activo se continúa visualmente con el listado. */
.cabezote-tabla {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--borde); border-bottom: 0;
  border-radius: var(--radio) var(--radio) 0 0; overflow: hidden;
  background: #EEF3F8;
}
.cabezote-tabla .cb {
  appearance: none; flex: 1 1 150px; min-width: 0;
  border: 0; border-bottom: 3px solid transparent;
  background: transparent; font: inherit; cursor: pointer;
  padding: 12px 18px; text-align: left;
  transition: background .15s, border-color .15s;
}
.cabezote-tabla .cb + .cb { border-left: 1px solid var(--borde); }
.cabezote-tabla .cb:hover { background: #E2EAF3; }
.cabezote-tabla .cb:focus-visible { outline: 2px solid var(--azul); outline-offset: -3px; }
.cabezote-tabla .cb.activa { background: #fff; border-bottom-color: var(--principal); }
.cabezote-tabla .cb.activa.acento { border-bottom-color: var(--secundario); }
.cabezote-tabla .cb.activa.verde { border-bottom-color: var(--azul-medio); }
.cabezote-tabla .cb.activa.ocre { border-bottom-color: var(--ocre); }
.cb-rotulo { display: block; font-size: 12px; font-weight: 600; color: var(--texto-suave); }
.cb-valor { display: block; font-size: 22px; font-weight: 700; color: var(--principal); line-height: 1.2; margin-top: 2px; }
.cb-pie { display: block; font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; }
.cabezote-tabla + .tabla-marco { border-radius: 0 0 var(--radio) var(--radio); margin-top: 0; }

/* Conmutador de dos grupos suelto —no como cabezote de una tabla—. Lo usa la
   pestaña territorial, donde los dos grupos no encabezan un listado sino que
   cambian el escalafón de más abajo. */
.conmutador { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.conm-btn {
  flex: 1 1 260px; text-align: left; appearance: none; font: inherit;
  cursor: pointer; background: var(--superficie);
  border: 2px solid var(--borde); border-radius: 10px;
  padding: 12px 16px; transition: border-color .15s, background .15s;
}
.conm-btn:hover { border-color: var(--principal-claro); }
.conm-btn:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.conm-btn.activa { border-color: var(--principal); background: #EEF3F8; }
.conm-btn.activa.acento { border-color: var(--secundario); background: #FFF8E6; }
.conm-btn.activa.verde { border-color: var(--azul-medio); background: #EDF4F9; }
.conm-btn.activa.ocre { border-color: var(--ocre); background: #FBF6E8; }
.conm-btn .cb-valor { font-size: 24px; }

/* Conmutador de dos pestañas dentro de una tarjeta (tablas con dos cortes). */
.conmuta-mini { display: inline-flex; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; }
.conmuta-mini button {
  appearance: none; border: 0; background: #fff; font: inherit;
  font-size: 11.5px; font-weight: 600; color: var(--texto-suave);
  padding: 7px 14px; cursor: pointer; max-width: 100%; min-width: 0;
}
.conmuta-mini button.activa { background: var(--principal); color: #fff; }

.control-linea { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.control-linea .crece { flex: 1 1 180px; }
.control-linea > * { min-width: 0; max-width: 100%; }
.select-mini {
  font: inherit; font-size: 11.5px; padding: 6px 9px;
  border: 1px solid var(--borde); border-radius: 6px; background: #fff;
  max-width: 100%; min-width: 0;
}

/* ---------------------------------------------------------------- Tablas */
.tabla-marco {
  overflow: auto; border: 1px solid var(--borde);
  border-radius: var(--radio); background: #fff; margin-top: 14px;
}
.tabla-marco.alto-bajo { max-height: 300px; }
.tabla-marco.alto-medio { max-height: 400px; }
.tabla-marco.alto-alto { max-height: 560px; }

/* `table-layout: auto` por defecto: con `fixed` el navegador repartía el
   ancho en columnas iguales sin mirar el contenido y palabras como
   «Presencialidad» se partían a mitad. Sólo el listado de sedes usa `fixed`,
   porque trae su propio `colgroup` con anchos calibrados. */
.tabla { width: 100%; border-collapse: collapse; font-size: 12.3px; table-layout: auto; }
.tabla.tabla-fija { table-layout: fixed; }
/* El listado ancho lleva diez columnas calibradas para los 1240 px en que se
   publica el micrositio. Por debajo de ese ancho no se aprietan más: la tabla
   conserva su ancho y es el marco el que se desplaza. Apretarlas hacía que el
   nombre del aliado, el del municipio y el de la secretaría se salieran de su
   celda —recortados sin aviso—, que es peor que desplazar la tabla. */
.tabla.tabla-fija:not(.tabla-compacta) { min-width: 1190px; }
.tabla.tabla-compacta { min-width: 875px; }
/* El listado estrecho lleva seis columnas en tres cuartos de pantalla. Baja
   de cuerpo para que quepan todas sin desplazamiento horizontal: recortar la
   columna de aliados no era opción, porque «sin aliado» es justo el dato que
   se busca en ese listado. */
.tabla.tabla-compacta { font-size: 11px; }
.tabla.tabla-compacta th { font-size: 9.5px; padding: 8px 7px; }
.tabla.tabla-compacta td { padding: 7px 7px; }
.tabla.tabla-compacta .celda-sub { font-size: 9.5px; }
.tabla.tabla-compacta .marca-no { font-size: 9px; padding: 2px 5px; }
.tabla.tabla-compacta .pastilla-sev { min-width: 20px; font-size: 10px; padding: 2px 5px; }

.tabla th {
  position: sticky; top: 0; z-index: 2; background: #EEF3F8;
  color: var(--principal); text-align: left; font-weight: 700;
  font-size: 10.5px; letter-spacing: .2px; padding: 9px 10px;
  border-bottom: 1px solid var(--borde); vertical-align: bottom;
  overflow-wrap: normal; word-break: normal; hyphens: none;
}
.tabla th.num { text-align: right; }
.tabla th.centro { text-align: center; }
.tabla th.ordenable { cursor: pointer; user-select: none; }
.tabla th.ordenable:hover { background: #E2EAF3; }
.tabla th.ordenado { color: var(--azul); }

/* Ninguna palabra se parte: el texto salta entre palabras o no salta. */
.tabla td {
  padding: 8px 10px; border-bottom: 1px solid #EEF2F6;
  vertical-align: top; overflow-wrap: normal; word-break: normal; hyphens: none;
}
.tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla td.centro { text-align: center; }
.tabla td.mono {
  font-family: Consolas, "SF Mono", ui-monospace, monospace;
  font-size: 10.5px; color: var(--texto-suave);
}
.tabla td.entero, .tabla th.entero { white-space: nowrap; }
.tabla tbody tr:hover { background: #F6FAFD; }
.tabla .destacado { font-weight: 700; color: var(--principal); }

.celda-principal { display: block; font-weight: 600; color: var(--texto); }
/* Celda que además filtra el tablero al hacer clic, como las barras de los
   gráficos de al lado. Mismo color y el mismo gesto que un enlace normal. */
.celda-principal.enlace { color: var(--azul); cursor: pointer; }
.celda-principal.enlace:hover { text-decoration: underline; }
.celda-sub { display: block; font-size: 10.5px; color: var(--texto-suave); margin-top: 2px; }
.celda-sub.mono-sub { font-family: Consolas, "SF Mono", ui-monospace, monospace; font-size: 10px; }

/* La celda de aliados publica el nombre de la organización. Los nombres son
   largos —hasta ochenta caracteres— así que se permiten dos renglones y de
   ahí en adelante se recorta con puntos suspensivos: el nombre completo está
   en el atributo `title`, en la ficha de la sede y en la exportación. Se
   recorta entre palabras y nunca dentro de una, que era lo que afeaba las
   tablas antes. */
.celda-aliados { line-height: 1.3; }
.nombre-aliado {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; color: var(--texto);
}
.sin-aliado { color: var(--texto-suave); font-style: italic; }
.mas-aliados {
  display: inline-block; margin-top: 3px; padding: 1px 5px;
  background: var(--fondo); border: 1px solid var(--borde); color: var(--texto-suave);
  border-radius: 4px; font-size: 9.5px; font-weight: 700;
}
.tabla.tabla-compacta .mas-aliados { font-size: 9px; }

.punto {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 6px; vertical-align: baseline; flex: none;
}
.pastilla-sev {
  display: inline-block; min-width: 23px; padding: 2px 7px;
  border-radius: 5px; color: #fff; font-weight: 700;
  font-size: 10.5px; text-align: center;
}
.pastilla-sev.clara { color: var(--tinta); }

.fr-urg { border-left: 5px solid transparent; }
.fr-3 { border-left-color: var(--sev-alta); }
.fr-2 { border-left-color: var(--sev-media); }
.fr-1 { border-left-color: var(--sev-baja); }
.fr-0 { border-left-color: var(--sev-nd); }

/* Los tres estados del regreso. El que no ha vuelto va lleno porque es el
   que manda el tablero; el que ya regresó, lleno y en azul medio; el que no
   tiene reporte va sin relleno, para que se lea como lo que es, un vacío. */
.marca-reg {
  display: inline-block;
  font-size: 9.5px; font-weight: 700; padding: 2px 7px;
  border: 1px solid transparent; border-radius: 4px; vertical-align: middle;
  line-height: 1.25; text-align: center; max-width: 100%;
}
.marca-no { background: var(--principal); color: #fff; }
.marca-si { background: var(--azul-medio); color: #fff; }
.marca-alt { background: transparent; border-color: var(--ocre); color: var(--ocre); }
.marca-sin {
  background: transparent; border-color: var(--borde);
  color: var(--texto-suave); font-weight: 400;
}

.barra-celda {
  display: inline-block; height: 9px; border-radius: 3px;
  background: var(--principal-claro); opacity: .3;
  vertical-align: middle; margin-right: 6px;
}
.barra-celda-txt { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- Leyendas */
.leyenda {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 0 0 10px; font-size: 11.5px; color: var(--texto-suave);
}
.leyenda .it { display: flex; align-items: center; gap: 6px; }
.leyenda i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none; }

.leyenda-sev {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 12px 16px; margin-top: 14px; box-shadow: var(--sombra);
}
.leyenda-sev h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
  color: var(--texto-suave); margin-bottom: 9px;
}
.leyenda-sev .fila { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 3px 0; }
.leyenda-sev .swatch { width: 34px; height: 12px; border-radius: 3px; flex: none; }
.leyenda-sev .eq { color: var(--texto-suave); font-size: 11.5px; }

/* -------------------------------------------------------------- Gráficos */
.lienzo { width: 100%; margin-top: 8px; min-width: 0; }
.lienzo svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Encabezado de una sub-gráfica: el nombre de la medida y su escala. Va
   cuando dos medidas de unidades distintas comparten tarjeta y cada una se
   dibuja con su propio eje. */
.sub-grafico { margin-top: 14px; }
.sub-grafico:first-of-type { margin-top: 4px; }
.sub-grafico h4 {
  font-size: 11.5px; font-weight: 700; color: var(--principal);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
}
.sub-grafico h4 .escala {
  font-size: 10px; font-weight: 400; color: var(--texto-suave);
}

/* Escalafones largos: desplazamiento propio, para no alargar la página. El
   alto se declara aquí y no en el SVG, que crece con el número de filas. */
.lienzo-scroll {
  max-height: 380px; overflow-y: auto; overflow-x: hidden;
  padding-right: 4px; margin-top: 8px;
}
.lienzo-scroll .lienzo { margin-top: 0; }

.gr-etiqueta { font-size: 11px; fill: var(--texto); }
.gr-sub { font-size: 9.5px; fill: var(--texto-suave); }
.gr-valor { font-size: 11px; fill: var(--principal); font-weight: 700; }
.gr-eje { font-size: 9.5px; fill: var(--neutro); }
.gr-seg { cursor: pointer; }
.gr-seg:hover { opacity: .82; }
.dona-centro-v { font-size: 16px; font-weight: 700; fill: var(--principal); }
.dona-centro-r { font-size: 9.5px; fill: var(--texto-suave); }

/* ----------------------------------------------------------------- Mapa */
.mapa {
  height: 440px; border: 1px solid var(--borde);
  border-radius: var(--radio); margin-top: 12px; background: #EEF3F8;
}
.mapa-sin {
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--texto-suave); font-size: 12.5px; padding: 24px;
}
.leaflet-container { font-family: var(--fuente) !important; border-radius: var(--radio); }
.escala-mapa { display: flex; align-items: center; gap: 0; margin-top: 10px; flex-wrap: wrap; }
.escala-mapa .paso { height: 13px; flex: 1 1 0; min-width: 22px; }
.escala-mapa .paso:first-child { border-radius: 3px 0 0 3px; }
.escala-mapa .paso:last-child { border-radius: 0 3px 3px 0; }

/* -------------------------------------------------------------- Tooltip */
#tip {
  position: fixed; z-index: 999; pointer-events: none;
  background: var(--tinta); color: #fff; font-size: 11.5px; line-height: 1.5;
  padding: 10px 12px; border-radius: 8px; max-width: 320px;
  box-shadow: 0 8px 26px rgba(14, 34, 51, .3);
  opacity: 0; transition: opacity .1s;
}
#tip.on { opacity: 1; }
#tip hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .25); margin: 7px 0; }
#tip b { color: var(--secundario); }

/* ------------------------------------------------------------------ Pie */
/* Sólo fuentes y fechas de corte, en cuerpo mínimo. */
.pie-pagina {
  max-width: var(--ancho); margin: 0 auto;
  padding: 0 24px 34px; font-size: 10.5px;
  color: var(--texto-suave); line-height: 1.65;
  border-top: 1px solid var(--borde); padding-top: 16px;
}
.pie-pagina h4 {
  font-size: 10.5px; color: var(--principal); margin: 0 0 6px;
  text-transform: uppercase; letter-spacing: .4px;
}
.pie-pagina ul { margin: 0; padding-left: 16px; }
.pie-pagina li { margin-bottom: 3px; }
.pie-pagina b { font-weight: 600; color: var(--texto); }

/* --------------------------------------------------------- Adaptaciones */
@media (max-width: 900px) {
  .seccion { flex: 1 1 100%; }
  .nivel-btn, .pestana { flex: 1 1 100%; }
}

@media (max-width: 760px) {
  .cabecera, .barra-filtros-interior, .contenido, .pie-pagina {
    padding-left: 16px; padding-right: 16px;
  }
  .kpi-valor { font-size: 24px; }
  .kpis-principal .kpi-valor { font-size: 28px; }
  .cabecera h1 { font-size: 18px; }
  .mapa { height: 320px; }
  .cabezote-tabla .cb { flex: 1 1 100%; }
  .cabezote-tabla .cb + .cb { border-left: 0; border-top: 1px solid var(--borde); }
}