/* ════════════════════════════════════════════════════════════════════
   mobile_override.css v2 — Sobrescribe inline styles de React en móvil
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Bloquea overflow horizontal global */
  html, body, #root {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  /* Sidebar fijo (width:260) → ocultar */
  [style*="width: 260"][style*="position: fixed"],
  [style*="width:260"][style*="position:fixed"],
  [style*="width: 260px"][style*="position: fixed"] {
    display: none !important;
  }

  /* Main content con marginLeft:260 → resetear */
  [style*="marginLeft: 260"],
  [style*="marginLeft:260"],
  [style*="margin-left: 260"],
  [style*="maxWidth: `calc(100vw - 260px)"],
  [style*="max-width: calc(100vw - 260px)"] {
    margin-left: 0 !important;
    max-width: 100vw !important;
    width: 100% !important;
    padding: 8px !important;
  }

  /* Cualquier grid template con N columnas → 1 columna */
  [style*="gridTemplateColumns"],
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Excepción: KPI rows pequeños (4-5 columnas con gap pequeño) → 2 columnas */
  [style*="repeat(4, 1fr)"],
  [style*="repeat(5, 1fr)"],
  [style*="1fr 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Forzar 1fr en grids genéricos de columnas (para tarjetas activas/abiertas) */
  [style*="repeat(2, 1fr)"],
  [style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Ocultar cualquier ancho fijo grande (300+ px) */
  [style*="width: 300"],
  [style*="width:300"],
  [style*="width: 320"],
  [style*="width:320"],
  [style*="width: 380"],
  [style*="width:380"],
  [style*="width: 400"],
  [style*="width:400"],
  [style*="width: 520"],
  [style*="width:520"],
  [style*="minWidth: 280"],
  [style*="minWidth:280"],
  [style*="minWidth: 300"],
  [style*="minWidth:300"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Cards genéricas */
  .card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Flex rows que muestran kanban → stack vertical */
  [style*="display: flex"][style*="overflow"],
  [style*="display:flex"][style*="overflow"] {
    flex-direction: column !important;
    overflow-x: visible !important;
  }

  /* Tablas con scroll horizontal mejor que se desborden */
  table {
    width: 100% !important;
    font-size: 11px !important;
  }

  /* Inputs y selects ocupan todo el ancho */
  input, select, textarea, button {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Texto */
  h1 { font-size: 1.05rem !important; }
  h2 { font-size: 0.95rem !important; }
  h3 { font-size: 0.85rem !important; }

  /* Padding genérico reducido */
  [style*="padding: 16px 20px"],
  [style*="padding: 20px"],
  [style*="padding:16px 20px"],
  [style*="padding:20px"] {
    padding: 10px 12px !important;
  }

  /* Header / topbar siempre arriba */
  [style*="position: fixed"][style*="top: 0"]:not([style*="left: 0"][style*="bottom"]),
  [style*="position:fixed"][style*="top:0"]:not([style*="left:0"][style*="bottom"]) {
    width: 100vw !important;
    left: 0 !important;
  }
}

/* Móvil pequeño */
@media (max-width: 480px) {
  body { font-size: 12px !important; }
  table { font-size: 10px !important; }
  h1 { font-size: 0.95rem !important; }

  /* Padding aún más reducido */
  [style*="padding: 16px 20px"],
  [style*="padding:16px 20px"] {
    padding: 8px 10px !important;
  }
}