/* 30-09-2026 (117.ª): las gráficas en pantalla estrecha.

   Las gráficas se maquetan en el servidor para 488 px de ancho (dos por fila en una pantalla de 1366: `app.ANCHO_GRAFICA`):
   el título se parte a 62 caracteres y las etiquetas de los ejes se colocan para ese ancho. Plotly no parte ni encoge los
   textos, así que en una caja más estrecha el título se corta por la derecha y las etiquetas se pisan. Medido con Playwright
   en 318bis.org: a 390 px de pantalla (móvil) la gráfica mide 366 px y 6 de los 9 títulos del eje 1 salían cortados; a 768
   (tableta), 264 px, y la pestaña era ilegible (eso lo arregla `lg=6` en app.py: dos por fila solo desde 992 px); de 992 a
   ~1320, dos por fila de 360 a 470 px.

   Aquí, en esas anchuras de pantalla, la letra de los textos baja lo justo para que quepan, sin pasar de 9 px. La posición
   la calcula plotly con su letra: más pequeña, el texto ocupa menos y no se pisa. De 576 a 991 (una por fila, ≥ 540 px) y
   desde 1320 (dos por fila, ≥ 470 px) nada cambia.

   Por pantalla y NO por contenedor (`container-type` en la caja de la gráfica), medido: con la caja como contenedor, la fila
   de debajo se colocaba 47 px ANTES del final de la gráfica (plotly la hace crecer después de pintarla y la fila no se
   enteraba) y tapaba su leyenda, también a 1366, donde no había nada que arreglar. */

@media (max-width: 575.98px), (min-width: 992px) and (max-width: 1319.98px) {
    .dash-graph text.gtitle { font-size: 10.5px !important; }
    .dash-graph .xtick > text,
    .dash-graph .ytick > text,
    .dash-graph text.legendtext,
    .dash-graph .heatmap-label > text,
    .dash-graph text.bartext { font-size: 9px !important; }
}

@media (max-width: 359.98px) {
    .dash-graph text.gtitle { font-size: 9.5px !important; }
}