/* Sección Estadísticas. La paleta de los gráficos vive en custom properties
   (--color-grafico-*, más abajo) para que chart_controller.js la lea en
   tiempo de ejecución en vez de tener colores hardcodeados en JS; el resto de
   esta hoja todavía usa literales. */
.estadisticas-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.estadisticas-filtros-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* El aviso de "hay cambios sin aplicar": al lado del botón, que es donde está
   mirando quien acaba de tocar un control. */
.estadisticas-filtros-sucio {
  margin: 0;
  color: rgb(161 98 7);
  font-size: 0.875rem;
}

.estadisticas-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.estadisticas-kpi {
  padding: 1rem;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.5rem;
  background: #fff;
}

.estadisticas-kpi dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(100 116 139);
}

.estadisticas-kpi dd {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: rgb(15 23 42);
}

/* El denominador y el porcentaje: es lo que vuelve legible el número de arriba
   ("1" no dice nada, "de 7 · 14,3 %" sí), pero no compite con él. */
.estadisticas-kpi dd.estadisticas-kpi-contexto {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(100 116 139);
}

/* Bloques del panel de cifras. */
.estadisticas-bloque {
  margin-bottom: 2rem;
}

.estadisticas-bloque-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: rgb(15 23 42);
}

/* De qué período habla el bloque. Va al lado del título y no en una nota al pie:
   leer un acumulado del rango como si fuera una foto de hoy (o al revés) es el
   error que esta etiqueta existe para evitar. */
.estadisticas-bloque-alcance {
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(100 116 139);
}

.estadisticas-bloque-nota {
  font-size: 0.8125rem;
  color: rgb(100 116 139);
}

/* Pestañas de categoría. Reemplazaron los encabezados por categoría de la
   grilla única: cada pantalla muestra una sola categoría. */
.estadisticas-pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgb(226 232 240);
}

.estadisticas-pestana {
  padding: 0.5rem 0.875rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(100 116 139);
  text-decoration: none;
}

.estadisticas-pestana:hover {
  color: rgb(15 23 42);
}

.estadisticas-pestana-activa,
.estadisticas-pestana-activa:hover {
  border-bottom-color: rgb(15 118 110);
  color: rgb(15 118 110);
  font-weight: 600;
}

/* Dos columnas, no las tres o cuatro que dejaba `minmax(22rem)`: una tarjeta de
   ~22rem no alcanza para leer un gráfico. Abajo de ~62rem de contenido cae sola
   a una columna. */
.estadisticas-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  gap: 1rem;
}

/* El turbo-frame es el item de la grilla (la tarjeta va adentro), y `turbo-frame`
   es inline por defecto. */
.estadisticas-celda {
  display: block;
  min-width: 0;
}

.estadisticas-celda-ancha {
  grid-column: 1 / -1;
}

.estadisticas-card-header h3 {
  font-size: 1rem;
  font-weight: 600;
}

.estadisticas-card-descripcion {
  font-size: 0.8125rem;
  color: rgb(100 116 139);
}

/* Las tablas anchas scrollean dentro de su contenedor: la página nunca scrollea
   en horizontal. */
.estadisticas-card-datos,
.estadisticas-detalle-tabla {
  overflow-x: auto;
}

.estadisticas-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.estadisticas-tabla caption {
  text-align: left;
  padding-bottom: 0.5rem;
  font-weight: 600;
}

.estadisticas-tabla th,
.estadisticas-tabla td {
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid rgb(241 245 249);
  text-align: left;
}

.estadisticas-tabla td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Separador entre grupos de columnas de un desglose ancho (el de duraciones
   tiene doce): marca dónde cambia lo que se está mirando. */
.estadisticas-tabla .estadisticas-tabla-grupo {
  border-left: 1px solid rgb(226 232 240);
}

.estadisticas-tabla tfoot th,
.estadisticas-tabla tfoot td {
  font-weight: 700;
  border-top: 2px solid rgb(226 232 240);
}

/* La nota explica QUÉ está contando la tabla (qué entra en cada columna, qué
   queda afuera). Va debajo y en tono secundario: es contexto de lectura, no
   una advertencia — las advertencias son `.estadisticas-avisos`. */
.estadisticas-desglose-nota {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: rgb(100 116 139);
}

.estadisticas-card-vacia,
.estadisticas-vacio,
.estadisticas-cargando {
  color: rgb(100 116 139);
  font-size: 0.875rem;
}

/* Tarjeta degradada (el indicador no se pudo calcular). Se distingue del estado
   vacío —que es un dato legítimo— porque acá hay algo que arreglar. */
.estadisticas-card-error {
  color: rgb(185 28 28);
  font-size: 0.875rem;
}

/* Paleta de las series. Se define acá para que el JS la lea por custom property
   y no tenga colores hardcodeados. */
:root {
  --color-grafico-1: #0f766e;
  --color-grafico-2: #0369a1;
  --color-grafico-3: #a16207;
  --color-grafico-4: #9333ea;
  --color-grafico-5: #be123c;
  --color-grafico-6: #4d7c0f;
}

.estadisticas-lienzo {
  position: relative;
  height: 16rem;
  margin: 0.5rem 0 1rem;
}

/* La tarjeta a todo el ancho también gana alto: si no, una serie de doce meses
   queda como una franja aplastada. */
.estadisticas-celda-ancha .estadisticas-lienzo {
  height: 20rem;
}

.estadisticas-detalle-lienzo {
  position: relative;
  height: 24rem;
  margin-bottom: 1.5rem;
}

.estadisticas-detalle-descripcion {
  margin-bottom: 1rem;
  color: rgb(100 116 139);
}

.estadisticas-detalle-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

/* Avisos sobre la lectura del dato (deriva entre versiones del formulario,
   dimensión multivalor). No son errores: son advertencias de interpretación,
   así que van en tono de atención y no de alarma. */
.estadisticas-avisos {
  margin: 0.75rem 0 0;
  padding: 0.625rem 0.75rem 0.625rem 1.75rem;
  border-left: 3px solid rgb(217 119 6);
  background: rgb(255 251 235);
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  color: rgb(120 53 15);
  list-style: disc;
}

.estadisticas-avisos li + li {
  margin-top: 0.375rem;
}