/* ============ REPORTS SCREEN ============ */
.report-grid { display: grid; gap: 16px; }
.kpi-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* ── Responsive reports — v123 reescrito ─────────────────────────────────
   Las pantallas de reportes usan inline styles para sus grids. El selector
   [style*="..."] captura CUALQUIER variante del string (con/sin espacios).
   Se usa !important para ganar sobre inline styles. */

/* ── Tablet (≤768px): 4col→2col, 3col→2col ─────────────────────────────── */
@media (max-width: 768px) {
  .kpi-grid-4 { grid-template-columns: 1fr 1fr !important; }

  /* 4 columnas → 2 columnas */
  #app div[style*="repeat(4,1fr)"],
  #app div[style*="repeat(4, 1fr)"],
  #app div[style*="repeat(4,minmax"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* 3 columnas → 2 columnas */
  #app div[style*="1fr 1fr 1fr"],
  #app div[style*="repeat(3,1fr)"],
  #app div[style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── Teléfono (≤480px): más agresivo — 3col→2col, 4col→2col, algunos 2col→1col */
@media (max-width: 480px) {
  .kpi-grid-4 { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* Reducir gap en todos los grids de reportes */
  #app .screen-content > div[style*="display:grid"],
  #app .screen-content > div[style*="display: grid"] {
    gap: 8px !important;
  }

  /* 4 columnas → 2 columnas */
  #app div[style*="repeat(4,1fr)"],
  #app div[style*="repeat(4, 1fr)"],
  #app div[style*="repeat(4,minmax"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* 3 columnas → 2 columnas */
  #app div[style*="1fr 1fr 1fr"],
  #app div[style*="repeat(3,1fr)"],
  #app div[style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Reducir padding interno de tarjetas KPI */
  #app .screen-content div[style*="padding:20px"],
  #app .screen-content div[style*="padding: 20px"] {
    padding: 12px !important;
  }
  #app .screen-content div[style*="padding:16px"],
  #app .screen-content div[style*="padding: 16px"] {
    padding: 10px !important;
  }

  /* Fuentes de KPI más pequeñas */
  #app .screen-content div[style*="font-size:28px"],
  #app .screen-content div[style*="font-size: 28px"],
  #app .screen-content div[style*="font-size:24px"],
  #app .screen-content div[style*="font-size: 24px"] {
    font-size: 18px !important;
  }
  #app .screen-content div[style*="font-size:22px"],
  #app .screen-content div[style*="font-size: 22px"] {
    font-size: 16px !important;
  }
}

/* ── Teléfono pequeño (≤390px): single column donde quepa ─────────────── */
@media (max-width: 390px) {
  .kpi-grid-4 { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  #app div[style*="repeat(4,1fr)"],
  #app div[style*="repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
}

/* ── Dashboard módulos — v124 ────────────────────────────────────────────
   Los módulos del dashboard usan padding:28px 20px e iconos de 48px.
   Al colapsar la grilla 3col→2col en móvil, reducir el tamaño de cada card.  */
@media (max-width: 600px) {
  /* Módulo card — padding grande → compacto */
  #app div[style*="padding:28px 20px"],
  #app div[style*="padding: 28px 20px"] {
    padding: 18px 12px !important;
  }
  /* Icono emoji grande → mediano */
  #app div[style*="font-size:48px"] {
    font-size: 34px !important;
    margin-bottom: 8px !important;
  }
  /* Label del módulo → más pequeño */
  #app div[style*="font-size:19px"][style*="font-family:'Rajdhani'"],
  #app div[style*="font-size: 19px"][style*="font-family: 'Rajdhani'"] {
    font-size: 14px !important;
    letter-spacing: 0 !important;
  }
  /* Sub-badge del módulo ("ABRIR POS", etc.) → compacto */
  #app div[style*="padding:8px 16px"][style*="font-size:13px"] {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 480px) {
  /* Módulo grid: 3→2 ya manejado. Gap también. */
  #app div[style*="padding:28px 20px"],
  #app div[style*="padding: 28px 20px"] {
    padding: 14px 8px !important;
  }
  #app div[style*="font-size:48px"] {
    font-size: 28px !important;
    margin-bottom: 6px !important;
  }
  #app div[style*="font-size:19px"][style*="font-family:'Rajdhani'"],
  #app div[style*="font-size: 19px"][style*="font-family: 'Rajdhani'"] {
    font-size: 13px !important;
  }
  /* Dashboard KPI banner: más compacto */
  #app div[style*="border-radius:10px"][style*="padding:12px"] {
    padding: 8px 6px !important;
  }
  #app div[style*="font-size:20px"][style*="font-weight:900"] {
    font-size: 16px !important;
  }
  /* Texto del saludo del dashboard */
  #app h1[style*="font-size:32px"] { font-size: 22px !important; }
  #app p[style*="font-size:15px"]  { font-size: 13px !important; }
}