/* =========================================================
   MOBILE SAFETY NET
   Capa final que refuerza el comportamiento responsive ya
   existente en app.css y los demás archivos de diseño.
   Se carga AL FINAL en core/layout.js para que sus reglas
   tengan prioridad cuando hay conflicto.
   ========================================================= */

/* Evita scroll horizontal accidental en cualquier pantalla */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas,iframe{max-width:100%;height:auto}

/* Inputs/selects no deben forzar zoom en iOS (min 16px) ni desbordar */
input,select,textarea,button{max-width:100%;font-size:16px}

/* Cualquier tabla que no haya sido convertida a tarjeta en su
   propio CSS, al menos no rompe el layout: scroll horizontal
   contenido dentro de la tabla en vez de toda la página */
.table-card,.table-wrap,.invoice-panel,.svc-panel{overflow-x:auto}

/* Modales: nunca más anchos que la pantalla, con margen seguro */
.modal-box{max-width:calc(100vw - 24px)!important}

@media(max-width:980px){
  /* Evita que una tabla/elemento ancho dentro de un contenedor con
     overflow-x:auto fuerce el ancho de TODA la página (bug clásico
     de min-width:auto en grid/flex). Esto es lo que causaba que
     secciones completas se vieran "cortadas" obligando a modo escritorio. */
  .content,.main,.prod-admin,.prod-panel,.svc-admin,.svc-admin-panel,
  .appr-page,.appr-card,.sp-page,.sp-card,[class$="-admin"],[class$="-panel"]{
    min-width:0!important;
  }
}
  /* Cualquier grid de 2,3,4,5,6 columnas que algún CSS puntual
     no haya colapsado todavía, cae a 1 columna por defecto */
  [class*="grid-"]:not(.bottom-nav),
  [class*="-grid"]:not(.bg-grid):not(.cat-grid):not(.currency-grid),
  .cards-3,.cards-4,.cards-5,.cards-6{
    grid-template-columns:1fr!important;
  }

  /* Botones y filas de acción se acomodan en columna si no caben */
  .form-actions,.table-toolbar,.head-row,.inline-form{
    flex-wrap:wrap;
  }

  /* Tamaño mínimo de toque (accesibilidad táctil) */
  .btn,button,.nav-item,.bottom-nav a{min-height:40px}
}

@media(max-width:480px){
  h1{font-size:24px!important}
  h2{font-size:20px!important}
  .content{padding:12px!important}
  .card,.hero-card,.admin-hero{padding:14px!important;border-radius:16px!important}
  .modal-box{padding:18px!important}
}