/* Carril INFO: estilos propios de este carril (frontend/js/informes.js). Se carga después de estilo.css; solo lo toca su dueño.
   Solo tokens de estilo.css (nada de colores ni tamaños sueltos) y rejillas con minmax(0, 1fr). */

/* El color de cada serie, en la bolita de la leyenda de una tarjeta y en las barras (--g-*: 3:1 en claro y oscuro) */
.col-ventas { background: var(--g-ventas); }
.col-gastos { background: var(--g-gastos); }
.col-resultado { background: var(--g-resultado); }
.col-cobros { background: var(--g-cobros); }
.col-pagos { background: var(--g-pagos); }
.col-av { background: var(--av-fg); }
.col-no { background: var(--no-fg); }
.kpi .k i.pto { flex: none; }
/* Las cifras de una tarjeta se encogen con la tarjeta (de 26 a 16 px) en vez de salirse de ella: «86.419.752,30 €» no cabe a 26 px en una tarjeta estrecha */
.kpi-informe { container-type: inline-size; }
.kpi-informe .v { font-size: clamp(var(--t-lg), 10cqi, var(--t-2xl)); }

/* Una lista de barras (gastos por categoría, antigüedad de saldos): cada fila, su nombre, su cifra y su barra */
.lista-barras { display: grid; gap: var(--e3); }
.lista-barras > div { min-width: 0; }
.lista-barras .barra-h { margin-top: var(--e1); }
.b-media { font-weight: 500; }
.fila.apart { margin-top: var(--e3); padding-top: var(--e2); border-top: 1px solid var(--linea); }
.fila.apart + .fila.apart { margin-top: var(--e1); padding-top: 0; border-top: 0; }

/* Las tablas de informe: los meses en filas, el total fijo debajo y lo que no tiene datos, atenuado */
.tabla-meses td:first-child { white-space: nowrap; }
.tabla-informe tr.sin-datos td { color: var(--tenue); }
.tabla-informe tr.fila-fuerte td { font-weight: 600; background: var(--sub); }
.tabla-informe td.sangria { padding-left: var(--e5); white-space: normal; max-width: 0; width: 80%; }   /* el texto de una causa se parte en líneas, nunca desborda */
.tabla-informe tr.sin-ficha td { cursor: default; }
.tabla-informe tfoot td { background: var(--sub); }

/* El texto que explica un bloque, dentro de su tarjeta */
.cc.cc-nota { padding-bottom: var(--e3); color: var(--tenue); font-size: var(--t-sm); }
.graf-nota.graf-nota-pie { margin-top: 0; padding-top: 0; }
.nowrap { white-space: nowrap; }

/* Clientes y proveedores: cada tabla tiene cinco columnas y necesita unos 480 px; con menos sitio, una debajo de otra */
.par-tablas { grid-template-columns: minmax(0, 1fr); align-items: start; }          /* cada tabla mide lo suyo: la corta no se estira hasta la larga */
@media (min-width: 1400px) { .par-tablas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Los meses son pocas columnas de cifras: en el móvil siguen siendo una tabla (la clase «sin-apilar» de la tabla; apilarlos en tarjetas eran doce bloques
   de cinco líneas) y las columnas que sobran (el año anterior, el acumulado, lo previsto) ceden con .solo-ancho. */
@media (max-width: 860px) {
  .tabla.tabla-meses th, .tabla.tabla-meses td { padding: var(--e2) var(--e1); font-size: var(--t-2xs); }      /* cabe en 390 px con cifras normales (12 px) */
}