/* Responsive para Grafana — apila paneles en pantallas angostas (celulares).
   Se inyecta via nginx sub_filter en todas las paginas de Grafana.
   Grafana 13 apila nativamente a <=768px (breakpoint md) pero mantiene el ancho en px.
   Aqui solo se fuerzan ANCHOS: NO se tocan alturas (los paneles conservan la altura
   en px del grid), para evitar que los cards/gauges se colapsen a una linea.

   Nivel intermedio (<=768px): los 11 paneles de 'Quick CPU / Mem / Disk' van de a 2 por fila (50%).
   Nivel minimo (<=480px): los 6 graficos 1 por fila (100%); los 5 stats siguen de a 2.
   Desktop (>768px) intacto. */
@media only screen and (max-width: 768px) {
  .react-grid-item {
    width: 100% !important;
  }
  .react-grid-item:has([data-viz-panel-id="323"]),
  .react-grid-item:has([data-viz-panel-id="20"]),
  .react-grid-item:has([data-viz-panel-id="155"]),
  .react-grid-item:has([data-viz-panel-id="16"]),
  .react-grid-item:has([data-viz-panel-id="21"]),
  .react-grid-item:has([data-viz-panel-id="154"]),
  .react-grid-item:has([data-viz-panel-id="14"]),
  .react-grid-item:has([data-viz-panel-id="75"]),
  .react-grid-item:has([data-viz-panel-id="18"]),
  .react-grid-item:has([data-viz-panel-id="23"]),
  .react-grid-item:has([data-viz-panel-id="15"]) {
    width: 50% !important;
  }
}
@media only screen and (max-width: 480px) {
  .react-grid-item:has([data-viz-panel-id="323"]),
  .react-grid-item:has([data-viz-panel-id="20"]),
  .react-grid-item:has([data-viz-panel-id="155"]),
  .react-grid-item:has([data-viz-panel-id="16"]),
  .react-grid-item:has([data-viz-panel-id="21"]),
  .react-grid-item:has([data-viz-panel-id="154"]) {
    width: 100% !important;
  }
}