/* ============================================================================
   responsive.css — CAPA RESPONSIVE COMPARTIDA DEL SISTEMA INTERNO
   ----------------------------------------------------------------------------
   Cargada UNA vez en el shell (dashboard.html <head>). Como las páginas se
   inyectan en #main-content del MISMO documento, esta hoja aplica a todas.
   => Cualquier página nueva es responsive por defecto SI usa las clases del
      design system (design-system.css / los <style> inline de cada página).

   CÓMO ESCRIBIR UNA PÁGINA NUEVA QUE YA SEA RESPONSIVE (sin tocar este archivo):
   ---------------------------------------------------------------------------
     • Contenedor de página .......... <div class="page-body">…</div>
     • Encabezado .................... <div class="page-hdr">…</div>
     • Grilla de campos .............. <div class="form-grid"> … </div>
         (multi-columna en desktop → 1 columna en móvil, automático)
     • Cada campo .................... <div class="form-group">  ó  <div class="field">
         con el <label> ARRIBA del control (flex-column). En móvil se apila.
     • Input / select / textarea ..... class="form-control"  (100% de ancho)
     • Botonera de formulario ........ <div class="form-actions">  → botones full-width apilados en móvil
     • TABLAS ........................ envolver SIEMPRE en <div class="table-wrap"><table>…</table></div>
         (scroll horizontal contenido; nunca rompe el ancho de la página)
     • NO usar anchos fijos en px (width:340px). Usar max-width, %, fr, minmax().
       Si un contenedor necesita tope, usar max-width (se respeta) no width.

   Reglas con !important a propósito: esta es una capa de OVERRIDE que debe ganar
   sobre los <style> inline de cada fragmento (que el loader SPA scopea a
   #main-content, subiéndoles la especificidad).
   ============================================================================ */

/* ============================================================================
   MÓVIL (≤ 640px)  — todo el override es mobile-only; el desktop NO se toca.
   ============================================================================ */
@media (max-width: 640px) {

  /* Regla de oro: en móvil el documento nunca scrollea horizontal. */
  html { overflow-x: hidden; }

  /* ── Contenedores de layout ── */
  .page-body        { padding: 16px !important; max-width: 100% !important; }
  .page-hdr         { padding: 14px 16px !important; flex-wrap: wrap !important; }
  .stats-row, .kpis, .kpi-row, .kpi-grid, .cards-row { grid-template-columns: 1fr 1fr !important; flex-wrap: wrap !important; }
  .card, .form-section, .wrap, .page-wrapper, .cmp-page { max-width: 100% !important; }
  /* Wrappers en display:grid sin columnas explícitas: su columna implícita `auto`
     se dimensiona al CONTENIDO y desborda. Fijarla a minmax(0,1fr) la acota al
     contenedor y obliga al contenido a encoger. (inofensivo si el wrapper no es grid) */
  .wrap, .page-wrapper, .page-wrap, .content-wrap, .main-wrap, .cmp-page {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* ── Layouts de 2/3 columnas (sidebar + contenido, grillas de página) → 1 columna ── */
  .layout, .grid-main, .grid-2, .grid-3, .two-col, .col-2, .split, .split-2,
  .content-grid, .main-grid, .layout-grid, .cols-2, .cols-3 {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
  /* ── min-width:0 en hijos de grillas/flex: permite que el contenido ancho
        (ej. tabla scrolleable) encoja la columna en vez de expandirla.
        Es la causa nº1 de overflow residual en layouts de 2 columnas. ── */
  .layout > *, .grid-main > *, .grid-2 > *, .grid-3 > *, .two-col > *,
  .content-grid > *, .main-grid > *, .stats-row > *, .form-grid > *,
  .toolbar > *, .filters > *, .card-head > *, .page-hdr > * {
    min-width: 0 !important;
  }

  /* ── Canvas (gráficos) nunca exceden el ancho ── */
  canvas { max-width: 100% !important; height: auto !important; }

  /* ── Grupos de controles en fila → envolver, hijos flexibles ── */
  .group, .field-group, .inline-fields { flex-wrap: wrap !important; }
  .group > input, .group > select, .field-group > input, .field-group > select { flex: 1 1 auto !important; min-width: 0 !important; }

  /* ── Formularios en grilla → 1 columna ── */
  .form-grid, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }

  /* ── Barras de filtros / toolbars → apilar en columna full-width.
        Usar flex-column (no grid 1fr) las hace inmunes a los grid-column:span N
        de las celdas, que crean columnas implícitas y desbordan. ── */
  .filters, .filter-grid, .filtros, .filter-bar, .toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .filters > *, .filter-grid > *, .toolbar > * { grid-column: auto !important; width: 100% !important; }

  /* ── Campo: label ARRIBA del control, apilado ── */
  .form-group, .field, .form-row, .input-group {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* ── Inputs / selects / textareas a 100% ── */
  .form-control,
  .field > input, .field > select, .field > textarea,
  .form-group > input, .form-group > select, .form-group > textarea,
  .input-group > input, .input-group > select {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Tope de seguridad: ningún control se pasa del ancho disponible */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  select, textarea { max-width: 100% !important; }

  /* ── Botones full-width en botoneras (no todos los .btn sueltos) ── */
  .form-actions, .modal-foot, .btn-row, .actions-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .form-actions > .btn, .modal-foot > .btn, .btn-row > .btn, .btn-block {
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: center !important;
  }

  /* ── Barras de herramientas / filtros / acciones de encabezado: envolver ── */
  .toolbar, .filters, .filter-bar, .sort-bar,
  .page-header-actions, .page-hdr-r, .hdr-r, .header-actions, .hdr-actions, .card-head {
    flex-wrap: wrap !important;
  }
  .toolbar .search-wrap, .filters .search-wrap { min-width: 0 !important; flex: 1 1 100% !important; }
  .filters > *, .filter-bar > * { max-width: 100% !important; }

  /* ── Barras de pestañas: scroll horizontal en vez de romper la página ── */
  .tabs, .tab-bar, .tabs-bar, [role="tablist"] {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar, .tab-bar::-webkit-scrollbar, [role="tablist"]::-webkit-scrollbar { height: 0; }
  .tabs > .tab, .tab-bar > .tab, [role="tablist"] > .tab { flex: 0 0 auto !important; }

  /* ── TABLAS: scroll horizontal contenido, nunca rompen la página ──
     .table-wrap es el patrón oficial. Como red de seguridad, cualquier
     tabla suelta dentro de la página se vuelve scrolleable en vez de
     empujar el ancho del documento. */
  .table-wrap, .tabla-wrap, .table-scroll, .table-responsive {
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }
  table:not(.no-mobile-scroll) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Modales a ancho de pantalla ── */
  .modal, .modal-lg, .modal-md, .modal-sm {
    width: 96vw !important;
    max-width: 96vw !important;
  }
}

/* ============================================================================
   MÓVIL CHICO (≤ 430px) — apretar un punto más
   ============================================================================ */
@media (max-width: 430px) {
  .stats-row { grid-template-columns: 1fr !important; }
  .page-body { padding: 12px !important; }
}