/* Tablero — topbar con filtros, inicio, secciones, indicadores, matriz, graficos, tablas y pie de datos. */

/* Marca y filtros en una sola linea, fija al hacer scroll: con la barra de
   filtros aparte, el encabezado sumaba 111 px (16/09/2026). */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e2) var(--e4);
  padding: var(--e2) var(--e5);
  background: var(--blanco);
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--amarillo) 0 45%, var(--rojo-marca) 45% 100%) 1;
}
.marca { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e2); }
.marca-nombre { font-weight: 700; color: var(--tinta); text-decoration: none; }
.marca-nombre:hover { text-decoration: underline; }
.marca-tablero, .miga { color: var(--gris-500); }

/* Inicio: un boton por tema del informe general. */
.inicio { padding: var(--e6) var(--e5); max-width: 1200px; margin: 0 auto; }
.inicio-titulo { font-size: 22px; }
.modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--e4); margin-top: var(--e5); }
.modulo {
  display: flex; flex-direction: column; gap: var(--e2);
  min-height: var(--tactil); padding: var(--e5);
  background: var(--blanco); color: var(--tinta); text-decoration: none;
  border-radius: var(--radio); box-shadow: var(--sombra);
  border: 1px solid var(--gris-200); border-top: 4px solid var(--rojo-marca);
}
.modulo:hover { border-color: var(--gris-300); border-top-color: var(--rojo-marca); }
.modulo-titulo { font-size: 18px; font-weight: 700; }
.modulo-descripcion { font-size: 14px; color: var(--gris-500); }

/* Filtros de seleccion multiple (seleccion.js). 32 px con mouse y los 44 de
   --tactil con dedo: el escalon se condiciona por pointer, no por ancho. */
.filtros { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e2); }
/* Ingresos no llega a linea ni a dia: solo ano, mes, semana y operacion (navegacion.js). */
.solo-periodo #filtro-contrato, .solo-periodo #filtro-grupo, .solo-periodo #filtro-linea,
.solo-periodo #filtro-dia { display: none; }

/* Segmentadores propios de ingresos (operador, tipo de dia). Estan a la izquierda
   de la pantalla y el panel, anclado a la derecha como en la barra, se salia por
   el borde izquierdo (25/09/2026): aqui se ancla a la izquierda. */
.segmentadores { display: flex; flex-wrap: wrap; gap: var(--e2); }
.segmentadores .seleccion-panel { left: 0; right: auto; }

/* Cross-filtering de ingresos: lo elegido en fichas que se quitan de a una. */
.fichas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.seleccion-titulo { font-size: 14px; color: var(--gris-500); }
.ficha {
  min-height: var(--tactil); padding: 0 var(--e3); font-size: 14px;
  background: var(--rojo-tenue); color: var(--rojo-texto);   /* 5.11:1 */
  border: 1px solid var(--rojo-texto); border-radius: var(--radio-chico);
}
.fila-elegida td { background: var(--rojo-tenue); }
.variacion-sube { fill: var(--verde); }        /* 5.86:1 */
.variacion-baja { fill: var(--rojo-texto); }   /* 5.71:1 */
.variacion-nula { fill: var(--gris-500); }     /* 4.73:1 */
/* Hasta donde cuentan las cifras, antes de los filtros (22/09/2026). Gris 500: 4.73:1 sobre blanco. */
.corte { align-self: center; font-size: 14px; color: var(--gris-500); white-space: nowrap; }
/* Solo aparece con algo que limpiar. Rojo de superficie: 4.72:1 como texto sobre blanco. */
.limpiar-filtros { padding: 0 var(--e2); font-size: 14px; color: var(--rojo); text-decoration: underline; }
.seleccion { position: relative; }
.seleccion-boton {
  display: inline-flex; align-items: center; gap: var(--e2);
  max-width: 260px; min-height: var(--tactil); padding: 0 var(--e3);
  background: var(--gris-50); color: var(--tinta);
  border: 1px solid var(--gris-300);   /* 3.4:1 sobre blanco: el borde porta informacion */
  border-radius: var(--radio-chico); font-size: 14px; white-space: nowrap;
}
.seleccion-boton:hover { background: var(--gris-100); }
.seleccion-activa .seleccion-boton, .seleccion-boton[aria-expanded="true"] { border-color: var(--tinta); background: var(--blanco); }
.seleccion-rotulo { font-size: 12px; color: var(--gris-500); }
.seleccion-valor { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.seleccion-chevron {
  flex: none; width: var(--e2); height: var(--e2); margin: 0 2px 3px var(--e1);
  border-right: 2px solid var(--gris-700); border-bottom: 2px solid var(--gris-700); transform: rotate(45deg);
}
.seleccion-boton[aria-expanded="true"] .seleccion-chevron { transform: rotate(-135deg); margin-bottom: -3px; }

.seleccion-panel {
  position: absolute; top: calc(100% + var(--e1)); right: 0; z-index: 10;
  display: flex; flex-direction: column; gap: var(--e1);
  width: 280px; padding: var(--e2);
  background: var(--blanco); border: 1px solid var(--gris-200);
  border-radius: var(--radio-chico); box-shadow: var(--sombra-alta);
}
.seleccion-buscar {
  min-height: var(--tactil); padding: 0 var(--e3); margin-bottom: var(--e1); font-size: 14px;
  border: 1px solid var(--gris-300); border-radius: var(--radio-chico);
}
.seleccion-lista { display: flex; flex-direction: column; max-height: 320px; overflow: auto; }
.seleccion-opcion {
  display: flex; align-items: center; gap: var(--e2);
  min-height: var(--tactil); padding: 0 var(--e2);
  border-radius: var(--radio-chico); font-size: 14px; cursor: pointer;
}
.seleccion-opcion[hidden] { display: none; }
.seleccion-opcion:hover { background: var(--gris-50); }
.seleccion-opcion input { flex: none; width: var(--e4); height: var(--e4); min-height: 0; accent-color: var(--tinta); }
.seleccion-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seleccion-detalle { margin-left: auto; padding-left: var(--e2); font-size: 12px; color: var(--gris-500); white-space: nowrap; }
.seleccion-todos { font-weight: 600; border-bottom: 1px solid var(--gris-200); border-radius: var(--radio-chico) var(--radio-chico) 0 0; }
.seleccion-vacia { padding: var(--e2); font-size: 14px; color: var(--gris-500); }
.seleccion-pie { display: flex; justify-content: flex-end; padding-top: var(--e2); border-top: 1px solid var(--gris-200); }
/* La pista del tramo (Dia y Semana): con el dedo no hay Mayus, asi que no se muestra. */
.seleccion-ayuda { margin-right: auto; align-self: center; font-size: 12px; color: var(--gris-500); }   /* 4.73:1 */
@media (pointer: coarse) { .seleccion-ayuda { display: none; } }
.seleccion-aplicar, .boton-descarga {
  min-height: var(--tactil); padding: 0 var(--e4); border-radius: var(--radio-chico);
  background: var(--tinta); color: var(--blanco); font-size: 14px; font-weight: 600;   /* 16.9:1 */
}
.boton-descarga:disabled { cursor: progress; background: var(--gris-700); }

/* Descargas de Gestion de km: una tarjeta por informe, el boton al pie de cada una. */
.rejilla-descargas { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: var(--e3); }
.descarga { display: flex; flex-direction: column; gap: var(--e3); }
.descarga .boton-descarga { margin-top: auto; align-self: flex-start; }

/* Secciones: una fila de botones al comienzo del contenido. Con la quinta (Buses)
   la fila medía 403 px a 375 de ancho y daba scroll a la página: pasa a dos filas. */
.secciones { display: flex; flex-wrap: wrap; gap: var(--e1); }
.seccion-boton {
  display: inline-flex; align-items: center;
  min-height: var(--tactil); padding: 0 var(--e4);
  border-radius: var(--radio-chico);
  font-size: 14px; font-weight: 600; color: var(--gris-700); text-decoration: none;
}
.seccion-boton:hover { background: var(--gris-200); }
.seccion-boton[aria-current="page"],
.seccion-boton[aria-pressed="true"] { background: var(--tinta); color: var(--blanco); }   /* 16.9:1 */
.botonera { display: flex; flex-wrap: wrap; gap: var(--e1); }
/* --rojo-texto y no --rojo: a 14 px el --rojo daba 4,22:1 sobre el fondo gris de los avisos
   (Reintentar). --rojo-texto: 5,11 sobre gris-100, 5,27 sobre amarillo-tenue, 5,71 sobre blanco. */
.boton-texto { color: var(--rojo-texto); font-size: 14px; text-decoration: underline; min-height: 0; }

/* Despues de las reglas base de cada control: con la misma especificidad, gana la ultima. */
@media (pointer: fine) {
  .seleccion-boton, .seleccion-buscar, .seleccion-aplicar, .boton-descarga, .seccion-boton, .limpiar-filtros { min-height: var(--e6); }
  .seleccion-opcion { min-height: var(--e6); }
}

.contenido { display: flex; flex-direction: column; gap: var(--e4); min-width: 0; padding: var(--e4) var(--e5); }
.seccion { display: flex; flex-direction: column; gap: var(--e4); min-width: 0; }
.estado { color: var(--gris-500); }

/* Lo elegido en un grafico de Flota, que filtra toda la seccion: texto sobre el
   tenue del amarillo de marca (7.14:1). Sin eleccion, solo la pista. */
.franja-seleccion {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e2);
  font-size: 14px; color: var(--sobre-amarillo); background: var(--amarillo-tenue);
  padding: var(--e2) var(--e3); border-radius: var(--radio-chico); margin: 0 0 var(--e3);
}
.franja-seleccion.sin-eleccion { color: var(--gris-500); background: none; padding: 0; }

/* El sello de datos va al final del informe: hasta que dia llega cada fuente. */
.pie-datos { font-size: 12px; color: var(--gris-500); padding-top: var(--e3); border-top: 1px solid var(--gris-200); }
.pie-datos-titulo { color: var(--gris-700); font-weight: 600; }
.pie-atrasada { color: var(--rojo-texto); font-weight: 600; }

.bloque { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e4); min-width: 0; }
.bloque-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e3); }
.bloque-titulo { font-size: 16px; }
.bloque > .bloque-titulo { margin-bottom: var(--e3); }
.tarjeta-nota, .nota-tabla { font-size: 12px; color: var(--gris-500); }
.nota-tabla { margin-top: var(--e2); }

/* Indicadores: un panel de celdas con divisores, no tarjetas con sombra. Cinco
   por fila: servicio y sus dos indicadores arriba, vacios y flota abajo. */
#tarjetas, #tarjetas-buses { padding: var(--e3) var(--e4); }
#tarjetas-buses { margin-bottom: var(--e4); }
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: var(--e1) var(--e4);
  border-left: 1px solid var(--gris-200);
}
.kpi:nth-child(5n + 1) { border-left: 0; padding-left: 0; }
.kpi:nth-child(n + 6) { border-top: 1px solid var(--gris-200); padding-top: var(--e2); }
.kpi:nth-child(-n + 5) { padding-bottom: var(--e2); }
.kpi-rotulo { font-size: 12px; color: var(--gris-500); }
.kpi-rotulo sup { margin-left: 2px; }
.kpi-valor { font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.kpi-unidad { font-size: 14px; font-weight: 400; color: var(--gris-500); }
.kpi-detalle { font-size: 12px; color: var(--gris-700); }
.kpi-sin-dato .kpi-valor { font-size: 18px; font-weight: 400; color: var(--gris-500); }
.kpi-notas {
  margin-top: var(--e1); padding-top: var(--e2);
  border-top: 1px solid var(--gris-200); font-size: 12px; color: var(--gris-500);
}

/* Resumen: matriz, evolucion y vacios en una fila. Desde la v35 (Eliminado, No
   realizado y Ejec/Prog) la matriz pide 847 px plegada y 896 desplegada hasta los
   dias con su barra de scroll: 928 con el relleno del bloque (medido el 07/10/2026).
   Los tres solo caben desde 1920; por debajo, la matriz va sola a todo el ancho y los
   dos graficos debajo, lado a lado. */
.rejilla-resumen {
  display: grid; gap: var(--e4); align-items: stretch;
  grid-template-columns: minmax(928px, 13fr) minmax(0, 7fr) minmax(0, 7fr);
}

/* Dos graficos que se leen juntos —cascada y Pareto, o los dos rankings de
   lineas— lado a lado; debajo de 1200 px, uno sobre otro. Las dos tarjetas de una
   fila van con el mismo alto: alineadas arriba, las rutas del no realizado (554 px)
   quedaban al lado de un tipo de dia de 168, con el borde a media altura (07/10/2026). */
.rejilla-dos {
  display: grid; gap: var(--e4); align-items: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tabla-caja { overflow: auto; max-height: 520px; }
table { border-collapse: collapse; width: 100%; font-size: 12px; }
th, td { padding: var(--e1) var(--e2); border-bottom: 1px solid var(--gris-200); white-space: nowrap; text-align: left; }
th { color: var(--gris-500); font-weight: 600; background: var(--blanco); position: sticky; top: 0; z-index: 1; }
td.dato, th.dato { text-align: right; }
tfoot td {
  position: sticky; bottom: 0; z-index: 1;
  background: var(--gris-50); font-weight: 700;
  border-top: 2px solid var(--gris-300); border-bottom: 0;
}

/* Matriz: cada nivel se indenta y aclara, como la tabla dinamica de la operacion.
   Celdas y sangrias apretadas a proposito: al desplegar semanas, la primera
   columna crece con la sangria y el rotulo, y es la que empuja el scroll. */
.tabla-matriz th, .tabla-matriz td { padding: var(--e1); }
.tabla-matriz th { white-space: normal; vertical-align: bottom; line-height: 1.2; }
.fila-n0 { font-weight: 700; background: var(--gris-50); }
.fila-n1 .matriz-etiqueta { padding-left: var(--e3); }
.fila-n2 { color: var(--gris-700); }
.fila-n2 .matriz-etiqueta { padding-left: var(--e5); }
.fila-n3 { color: var(--gris-500); }
.fila-n3 .matriz-etiqueta { padding-left: var(--e7); }
/* El + de las tablas plegables: 24 px como minimo (WCAG 2.5.8) y --tactil con dedo. Medía 14 px
   de ancho (auditoria 26/09/2026). */
.plegar { min-height: var(--e5); min-width: var(--e5); margin-right: var(--e1); color: var(--gris-700); font-weight: 700; }
/* Despues de las reglas base de .plegar y .boton-texto: con la misma especificidad, gana la ultima. */
@media (pointer: coarse) {
  .plegar { min-width: var(--tactil); min-height: var(--tactil); }
  .boton-texto { min-height: var(--tactil); }
}

/* Rutas: centradas y con ancho por columna; las seis de cifras se reparten igual. */
.tabla-lineas { table-layout: fixed; }
.tabla-lineas th, .tabla-lineas td { text-align: center; white-space: normal; }
.tabla-lineas th:nth-child(1) { width: 8%; }
.tabla-lineas th:nth-child(2) { width: 13%; }
.tabla-lineas th:nth-child(3) { width: 12%; }

/* Buses: trece columnas. La del bus queda fija al desplazar a la derecha y los
   encabezados se parten en dos lineas para no ensanchar la tabla. */
.tabla-buses th { white-space: normal; vertical-align: bottom; line-height: 1.2; }
.tabla-buses td.celda-partible { white-space: normal; }   /* parte solo si la tabla no cabe (comun.js) */
/* Dos listas a media pantalla (Inmovilizados): con 8 px por lado, «Buses que más se
   inmovilizan» partía 30 de sus 40 celdas partibles a 1440 px; con 4, ninguna (28/09/2026). */
.tabla-estrecha th, .tabla-estrecha td { padding-left: var(--e1); padding-right: var(--e1); }
.tabla-buses th:first-child, .tabla-buses td:first-child,
.tabla-por-linea th:first-child, .tabla-por-linea td:first-child { position: sticky; left: 0; background: var(--blanco); }
.tabla-buses th:first-child, .tabla-por-linea th:first-child { z-index: 2; }
.tabla-buses tfoot td:first-child, .tabla-por-linea tfoot td:first-child { background: var(--gris-50); z-index: 2; }

/* Por linea en el resumen: el alto del cumplimiento diario al que reemplaza (300 px)
   y scroll dentro de la caja, para no alargar la pantalla con 53 lineas. La barra
   se lleva lo que sobra de ancho; con menos de 120 px no compara nada. */
.caja-por-linea { max-height: 300px; scrollbar-gutter: stable; }
.tabla-por-linea .barra-celda { width: 40%; min-width: 120px; }
.barra-linea { display: block; width: 100%; height: 12px; }
/* El texto al pie del boton, como el de los encabezados sin orden: centrado en sus 44 px quedaba mas arriba. */
.orden-boton { display: inline-flex; align-items: flex-end; justify-content: flex-end; font-weight: 600; text-align: right; }
.orden-boton:hover { color: var(--tinta); text-decoration: underline; }
th[aria-sort="descending"] { color: var(--tinta); }
.buscador { display: flex; align-items: center; gap: var(--e2); font-size: 14px; color: var(--gris-700); }
.buscador input {
  width: 180px; padding: 0 var(--e2); background: var(--blanco);
  border: 1px solid var(--gris-500); border-radius: var(--radio-chico);   /* 4.73:1: dice donde se escribe */
}

/* Graficos */
.grafico svg { display: block; width: 100%; height: auto; }
/* Un Pareto largo se ve por el alto de sus primeras filas y el resto se desplaza
   dentro: pintado entero, las 43 causas de inmovilización alargaban la página
   1.700 px (28/09/2026). El alto lo pone pareto.js; la impresión lo anula. */
.pareto-caja { max-height: var(--alto-visible); overflow-y: auto; scrollbar-gutter: stable; }
.caja-quince { --alto-visible: 458px; }   /* 15 barras de barras.js (FILA = 30 px) y su margen de 8 */
.leyenda { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3); margin-bottom: var(--e2); font-size: 12px; color: var(--gris-700); }
.leyenda-item { display: inline-flex; align-items: center; gap: var(--e1); }
.muestra { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.muestra-linea { width: 16px; height: 3px; border-radius: 2px; }
.lienzo { position: relative; }
.muestra-tenue { opacity: .25; }   /* la misma opacidad del programado en porLinea.js */
.muestra-rayada { border: 1px solid var(--gris-300); background: repeating-linear-gradient(45deg, var(--gris-300) 0 2px, var(--blanco) 2px 5px); }
/* Mapa de calor: con celdas de menos de 20 px la caja hace scroll en vez de encoger;
   el lienzo mide lo que el SVG para que el tooltip se ubique sobre su celda. El
   cuerpo alto mide lo que su contenido: si no, su scroll vertical le daba uno
   horizontal propio y las horas de la cabecera se quedaban quietas. */
.calor-caja { overflow-x: auto; }
.calor-cuerpo, .calor-caja .lienzo { width: max-content; min-width: 100%; }
.calor-cuerpo-alto { max-height: 600px; overflow-y: auto; scrollbar-gutter: stable; }
.grafico .calor-caja svg { width: auto; }
.tooltip {
  position: absolute; top: 0; z-index: 2; pointer-events: none;
  padding: var(--e2) var(--e3); border-radius: var(--radio-chico); box-shadow: var(--sombra);
  background: var(--tinta); color: var(--blanco);   /* 16.9:1 */
  font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tooltip-titulo { font-weight: 700; margin-bottom: 2px; }
.zona { cursor: pointer; }
.zona:focus-visible { outline: 3px solid var(--tinta); outline-offset: -3px; }

@media (max-width: 1919px) {
  /* Antes la matriz ocupaba dos filas a la izquierda y los graficos se apilaban a la
     derecha: sumaban 1.022 px de alto contra 609 de la matriz, y en un portatil de
     1366 los vacios quedaban debajo de la evolucion junto a un hueco, con la matriz
     15 px mas ancha que su columna (07/10/2026). */
  .rejilla-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla-resumen > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 1199px) {
  .rejilla-resumen, .rejilla-dos { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .topbar, .contenido { padding-left: var(--e3); padding-right: var(--e3); }
  .topbar { position: relative; }   /* en movil, con seis filtros, fija ocuparia media pantalla; relative ancla los paneles */
  .filtros { justify-content: flex-start; }
  .seleccion { position: static; }
  .seleccion-panel { left: var(--e3); right: var(--e3); width: auto; }
  /* Los de ingresos no estan en la topbar: sin esto el panel se anclaria al body. */
  .segmentadores .seleccion { position: relative; }
  .segmentadores .seleccion-panel { left: 0; right: auto; width: min(280px, calc(100vw - 2 * var(--e4))); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(n) { border-left: 1px solid var(--gris-200); border-top: 1px solid var(--gris-200); padding: var(--e2) var(--e3); }
  .kpi:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .kpi:nth-child(-n + 2) { border-top: 0; }
}

@media print {
  @page { size: landscape; margin: 12mm; }
  body { background: var(--blanco); }
  .rejilla-resumen, .rejilla-dos { grid-template-columns: 1fr; }
  .topbar { position: static; }
  .secciones, .boton-texto, .plegar, .tooltip, .seleccion-panel, .seleccion-chevron, .buscador,
  .limpiar-filtros { display: none; }
  .botonera .seccion-boton:not([aria-pressed="true"]) { display: none; }   /* se imprime solo lo elegido */
  .calor-caja, .calor-cuerpo-alto, .pareto-caja { overflow: visible; max-height: none; }
  .seleccion-boton { background: none; }       /* el valor de cada filtro SI se imprime */
  .bloque { box-shadow: none; border: 1px solid var(--gris-300); break-inside: avoid; }
  .tabla-caja { max-height: none; overflow: visible; }
  th, tfoot td, .tabla-buses td:first-child, .tabla-por-linea td:first-child { position: static; }
}

/* Gestión de varados: la fila del período, del subsistema o del total manda, y
   su detalle va sangrado y más claro, como los niveles de la matriz de km. */
.fila-total { font-weight: 700; background: var(--gris-50); }
.fila-detalle { color: var(--gris-700); }
.fila-detalle th:first-child { padding-left: var(--e5); font-weight: 400; }

/* Ficha del bus: sus datos de flota en una línea y sus cifras en otra, sin
   tarjetas (pedido el 23/09/2026). La cifra en negrita manda y el rótulo va al
   lado, que en el teléfono se parte por cifra y no a mitad de una. */
.ficha-flota { margin: 0 0 var(--e2); color: var(--gris-700); font-size: 14px; }
.ficha-cifras { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); margin: 0 0 var(--e3); font-size: 14px; }
.ficha-cifra { white-space: nowrap; color: var(--gris-700); }
.ficha-cifra strong { color: var(--tinta); font-size: 18px; }
/* El bus sigue inmovilizado: el texto lo dice, el rojo solo lo destaca (5.71:1 sobre el blanco del bloque). */
.ficha-alerta { margin: 0 0 var(--e3); color: var(--rojo-texto); font-size: 14px; font-weight: 600; }

/* La placa de la tabla por bus lleva a su ficha: subrayada, porque el color solo
   no dice que es un enlace. El rojo de los textos que se tocan («Limpiar
   filtros»), 4.72:1 sobre blanco. */
.enlace-tabla { color: var(--rojo); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.enlace-tabla:hover { text-decoration-thickness: 2px; }

/* Panel de ingresos como informe de hojas (02/10/2026): el banner a la izquierda
   con el medidor, las dos tortas y el menú, el mismo en todas las hojas. Bajo
   900 px pasa arriba del contenido: es la misma pantalla, no una segunda UI. */
.informe { display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
/* Con el banner al lado, cinco columnas fijas partian «$ 1.908.678 M» en dos lineas a 1024 px. */
.informe .kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); row-gap: var(--e2); }
.informe .kpi:nth-child(n) { border-top: 0; padding-top: var(--e1); padding-bottom: var(--e1); }
.informe .kpi-valor { white-space: nowrap; }
.banner {
  position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--e4);
  padding: var(--e4); background: var(--blanco); border-right: 1px solid var(--gris-200);
  min-height: 100%;
}
.banner-titulo { font-size: 14px; margin-bottom: var(--e2); }
.medidor-titulo { font-size: 14px; font-weight: 700; letter-spacing: .04em; text-align: center; margin: 0 0 var(--e1); }
.medidor { display: block; width: 100%; max-width: 240px; margin: 0 auto; }
.torta { display: block; width: 150px; height: 150px; margin: 0 auto var(--e2); }
.torta-tramo { cursor: pointer; }
.torta-leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e1); }
.torta-fila {
  display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: var(--e2); align-items: center;
  width: 100%; min-height: var(--tactil); padding: var(--e1) var(--e2); border: 0; border-radius: var(--radio-chico);
  background: none; font: inherit; font-size: 14px; color: var(--tinta); text-align: left;
}
button.torta-fila { cursor: pointer; }
button.torta-fila:hover, button.torta-fila[aria-pressed="true"] { background: var(--gris-100); }
.torta-fila-tenue { color: var(--gris-500); }
.torta-cifra { grid-column: 2; font-size: 12px; color: var(--gris-700); }
.hojas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e1); }
.hoja-enlace {
  display: flex; align-items: center; gap: var(--e2); min-height: var(--tactil); padding: 0 var(--e3);
  border-radius: var(--radio-chico); color: var(--tinta); text-decoration: none; font-size: 14px;
}
.hoja-enlace:hover { background: var(--gris-100); }
.hoja-enlace[aria-current="page"] { background: var(--rojo); color: var(--blanco); font-weight: 600; }
.hoja-icono { flex: none; width: 20px; height: 20px; }
.hoja-pendiente { margin-left: auto; font-size: 12px; color: var(--gris-500); }
.hoja-enlace[aria-current="page"] .hoja-pendiente { color: var(--blanco); }

/* Netos: el neto con el desmonte sale al pasar el ratón, al tocar o al enfocar. */
.kpi-con-ayuda { position: relative; cursor: help; }
.kpi-ayuda {
  display: none; position: absolute; z-index: 5; top: 100%; left: 0; width: max-content; max-width: 280px;
  margin-top: var(--e1); padding: var(--e2) var(--e3); border-radius: var(--radio-chico);
  background: var(--tinta); color: var(--blanco); font-size: 12px; box-shadow: var(--sombra-alta);
}
.kpi-con-ayuda:hover .kpi-ayuda, .kpi-con-ayuda:focus .kpi-ayuda, .kpi-con-ayuda:focus-within .kpi-ayuda { display: block; }

@media (max-width: 900px) {
  .informe { grid-template-columns: 1fr; }
  .banner { position: static; border-right: 0; border-bottom: 1px solid var(--gris-200); min-height: 0; }
}

@media print {
  .informe { grid-template-columns: 1fr; }
  .banner { position: static; border: 0; }
  .hojas { display: none; }
}

/* La cifra de «Otros» por linea abre su detalle (porLinea.js): el globo va fijo a la
   ventana porque la tabla esta en una caja con scroll, y el subrayado punteado dice
   que la cifra tiene mas. */
.tooltip-fijo { position: fixed; z-index: 10; }
.celda-detalle {
  min-height: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit;
  text-decoration: underline dotted; text-underline-offset: 3px; cursor: help;
}