/*=============================================
FIX PARA SCROLL EN MÓVILES Y TABLETS
=============================================
Documentación del modelo (Etapa 1 PWA — 2026-08):

Qué hace scroll:
  - Navegador móvil: documento (body) o .content-wrapper según contexto.
  - Standalone / .pwa-standalone / .from-icon: ÚNICAMENTE .content-wrapper
    (body/wrapper con overflow hidden; ver pwa-standalone.css).

Qué usa overflow:hidden / position:fixed:
  - pwa-standalone.css: solo en standalone / from-icon / force-fullscreen.
  - Ya NO se fuerza position:fixed en todo max-width 1024 en navegador.

AdminLTE:
  - .main-sidebar tiene scroll propio del menú lateral.
  - .content-wrapper es el área de módulo.

Contenedores internos:
  - .modal-body, .table-responsive, .card-modern.card-scroll, Select2 dropdown,
    DataTables scrollX — se respetan (no se anulan max-height de DataTables).

Teclado móvil:
  - Inputs ≥16px (en pwa-standalone) para evitar zoom iOS.
  - padding-bottom extra deja espacio sobre la barra inferior.

Conflicto histórico:
  - Este archivo revertía position:fixed global; ahora alinea con el modelo único.
=============================================*/

@media (max-width: 991px) {

  body:not(.pwa-standalone):not(.from-icon):not(.force-fullscreen) {
    position: relative !important;
    overflow-x: hidden !important;
  }

  body:not(.pwa-standalone):not(.from-icon):not(.force-fullscreen) .wrapper {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }

  body:not(.pwa-standalone):not(.from-icon):not(.force-fullscreen) .content-wrapper {
    overflow-x: hidden !important;
    position: relative !important;
    min-height: auto !important;
  }

  /* Standalone: un solo scroll — no pelear con pwa-standalone */
  body.pwa-standalone .content-wrapper,
  body.from-icon .content-wrapper,
  body.force-fullscreen .content-wrapper {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
  }

  body.pwa-standalone,
  body.from-icon,
  body.force-fullscreen {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  .content {
    padding-bottom: 24px !important;
    min-height: auto !important;
  }

  .modal-content {
    max-height: 95vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(95vh - 120px) !important;
  }

  .box,
  .card-modern {
    overflow: visible !important;
  }

  .table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .dashboard-modern,
  .dashboard-modern .row {
    overflow: visible !important;
  }

  .card-modern.card-scroll {
    max-height: 500px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 767px) {
  html {
    overflow-x: hidden !important;
  }

  body:not(.pwa-standalone):not(.from-icon):not(.force-fullscreen) {
    overflow-x: hidden !important;
    position: relative !important;
  }

  .content {
    padding-bottom: calc(24px + var(--sm-bottom-nav-h, 56px)) !important;
  }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 991px) {
    body.pwa-standalone .content-wrapper,
    body.from-icon .content-wrapper,
    body.force-fullscreen .content-wrapper {
      -webkit-overflow-scrolling: touch !important;
      overflow-y: scroll !important;
      overflow-x: hidden !important;
    }
  }
}