*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: 'DM Sans', sans-serif; background: #EEF2F7; }
#root { height: 100%; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
input, select, textarea, button { font-family: 'DM Sans', sans-serif; }
a { text-decoration: none; }
img { max-width: 100%; }

/* ─── RESPONSIVE ──────────────────────────────────────────────────────────────
   La app usa estilos inline (React), que no admiten media queries. Estas reglas
   con selectores de atributo + !important colapsan las cuadrículas de columnas
   fijas según el ancho de pantalla. Los grids con auto-fill/minmax ya son
   fluidos y no se tocan. */

/* Tablet horizontal: paneles laterales fijos pasan a una columna */
@media (max-width: 1280px) {
  [style*="grid-template-columns: 1fr 340px"], [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns: 1fr 320px"], [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns: 1fr 300px"], [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns: 1fr 280px"], [style*="grid-template-columns:1fr 280px"],
  [style*="grid-template-columns: 300px 1fr"], [style*="grid-template-columns:300px 1fr"],
  [style*="grid-template-columns: 320px 1fr"], [style*="grid-template-columns:320px 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [style*="grid-template-columns: repeat(5, 1fr)"], [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Tablet: filas de 4 KPIs pasan a 2 columnas */
@media (max-width: 1100px) {
  [style*="grid-template-columns: repeat(4, 1fr)"], [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Móvil grande: filas de 3 columnas pasan a 1 */
@media (max-width: 900px) {
  [style*="grid-template-columns: repeat(3, 1fr)"], [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: 1fr 1fr 1fr;"], [style*="grid-template-columns:1fr 1fr 1fr;"],
  [style*="grid-template-columns: 1fr 1fr 1fr "] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [style*="grid-template-columns: repeat(5, 1fr)"], [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Móvil: todo a una columna (el ";" evita capturar "1fr 1fr 1fr") */
@media (max-width: 700px) {
  [style*="grid-template-columns: 1fr 1fr;"], [style*="grid-template-columns:1fr 1fr;"],
  [style*="grid-template-columns: repeat(2, 1fr)"], [style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
@media (max-width: 560px) {
  [style*="grid-template-columns: repeat(4, 1fr)"], [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"], [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}