/* =========================================================================
   Measurements — las graficas de /report/result (2026-08-02)

   La pagina no tenia hoja propia: iba con `12u` (que no es un selector valido:
   no puede empezar por digito, asi que nunca hizo nada), tres <h1> y `height:
   400px` en linea. En un movil de 360 eso deja una grafica mas alta que ancha
   y con las etiquetas del eje amontonadas.
   ========================================================================= */

.graficas {
    display: grid;
    gap: 2rem;
}

.grafica {
    background: #fff;
    border: 1px solid var(--ivan-borde);
    border-radius: .5rem;
    padding: 1.25rem 1.25rem 1rem;
}

.grafica-titulo {
    font-size: 1.15rem !important;
    font-weight: 700;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 0 0 .9rem !important;
}
.grafica-cifra { color: #2a6b30; }

/* El alto crece con la pantalla en vez de quedarse clavado en 400px, y no baja
   de lo que necesita Highcharts para que quepan los rotulos. */
.grafica-lienzo {
    width: 100%;
    height: clamp(260px, 42vh, 420px);

    /* ⚠️ El tema claro se fija con la clase `highcharts-light` en el propio
       div (esta en el marcado, es el interruptor que trae Highcharts). Sin
       ella, la 13 resuelve sus colores con `light-dark()` y sigue el modo del
       SISTEMA: en un ordenador con tema oscuro las tres graficas salian con el
       fondo negro en mitad de una pagina blanca. Poner `color-scheme: light`
       aqui no basta: su propia hoja lo repone en `.highcharts-container`. */
}

@media (max-width: 575.98px) {
    .grafica { padding: 1rem .75rem .75rem; }
    .grafica-titulo { font-size: 1.05rem !important; }
}

/* --- Cifras de cabecera --------------------------------------------------- */
.cifras {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 0 0 1.5rem;
}
.cifra {
    flex: 1 1 8rem;
    background: #fff;
    border: 1px solid var(--ivan-borde);
    border-radius: .4rem;
    padding: .8rem 1rem;
}
.cifra-valor {
    display: block;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ivan-tinta);
    font-variant-numeric: tabular-nums;
}
.cifra-etiqueta {
    display: block;
    font-size: .82rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ivan-tinta-suave, #6b7378);
}

/* Dos columnas en escritorio para las graficas pequeñas; las series largas
   —años, meses, apilada— ocupan la fila entera. */
@media (min-width: 992px) {
    .graficas { grid-template-columns: 1fr 1fr; }
    .grafica--ancha { grid-column: 1 / -1; }
}

.grafica-nota {
    margin: .5rem 0 0;
    font-size: .82rem;
    color: var(--ivan-tinta-suave, #6b7378);
}