/*=============================================
FIX PARA SCROLL EN MÓVILES Y TABLETS
=============================================*/

/* Asegurar que el contenido principal tenga scroll habilitado en móviles */
@media (max-width: 991px) {
  
  /* El body puede tener overflow hidden, pero el wrapper debe permitir scroll */
  body {
    position: relative !important;
    overflow-x: hidden !important;
    /* NO aplicar overflow-y: hidden aquí en móviles */
  }
  
  /* El wrapper debe tener scroll vertical habilitado */
  .wrapper {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    min-height: 100vh !important;
    /* NO limitar altura en móviles */
  }
  
  /* El content-wrapper DEBE tener scroll vertical */
  .content-wrapper {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
    min-height: auto !important;
    /* Permitir que crezca más allá del viewport */
  }
  
  /* Asegurar que las secciones de contenido tengan espacio */
  .content {
    padding-bottom: 40px !important;
    min-height: auto !important;
  }
  
  /* Fix para modales - deben tener scroll */
  .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;
  }
  
  /* Fix específico para modo PWA/Standalone en móviles */
  body.pwa-standalone .wrapper,
  body.from-icon .wrapper {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
  
  body.pwa-standalone .content-wrapper,
  body.from-icon .content-wrapper {
    height: auto !important;
    min-height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
  }
  
  /* Asegurar que los boxes y cards no bloqueen el scroll */
  .box,
  .card-modern {
    overflow: visible !important;
    max-height: none !important;
  }
  
  /* Fix para tablas responsive */
  .table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Asegurar que las secciones del dashboard puedan crecer */
  .dashboard-modern {
    overflow: visible !important;
  }
  
  .dashboard-modern .row {
    overflow: visible !important;
  }
  
  /* Fix para card-scroll - debe permitir scroll interno */
  .card-modern.card-scroll {
    max-height: 500px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Fix adicional para pantallas muy pequeñas (teléfonos) */
@media (max-width: 767px) {
  
  /* Asegurar scroll en todos los dispositivos móviles */
  html {
    overflow-x: hidden !important;
    /* NO bloquear overflow-y aquí */
  }
  
  body {
    overflow-x: hidden !important;
    /* Permitir scroll vertical siempre en móviles */
    position: relative !important;
  }
  
  .content-wrapper {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 20px !important;
  }
  
  /* Asegurar que el contenido pueda crecer */
  .content {
    padding-bottom: 60px !important;
  }
}

/* Fix para iOS específicamente */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 991px) {
    body {
      overflow-x: hidden !important;
      /* En iOS, el body puede tener overflow hidden para evitar scroll horizontal */
    }
    
    .content-wrapper {
      -webkit-overflow-scrolling: touch !important;
      overflow-y: scroll !important; /* Cambiar de auto a scroll en iOS para mejor performance */
      overflow-x: hidden !important;
    }
  }
}