/* modal-scroll-fix.css
   Mejoras adicionales para el comportamiento de scroll en modales
   Se asegura de que la página mantenga su posición cuando se abren/cierran modales
*/

/* Prevenir scroll en el fondo cuando el modal está abierto */
html.modal-open,
body.modal-open {
  position: relative;
  overflow: hidden !important;
  height: 100% !important;
}

/* Asegurar que el modal se posicione correctamente */
.product-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

/* CRÍTICO: Forzar scroll en el body del modal de productos */
.product-modal__body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(80vh - 120px) !important;
    min-height: 200px !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* Asegurar que el grid de soluciones permita scroll */
.solutions-grid {
    overflow: visible !important;
    min-height: min-content !important;
}

/* Modal dialog debe permitir scroll interno */
.product-modal__dialog {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: 90vh !important;
}

/* Header del modal no debe hacer scroll */
.product-modal__header {
    flex-shrink: 0 !important;
}

/* En dispositivos móviles, ajustar alturas */
@media (max-height: 600px) {
    .product-modal__body {
        max-height: calc(90vh - 100px) !important;
    }
}

/* Webkit scrollbar styling para mejor UX */
.product-modal__body::-webkit-scrollbar {
    width: 8px;
}

.product-modal__body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.product-modal__body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.product-modal__body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.product-modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
}

.product-modal__dialog {
  position: relative;
  z-index: 10000;
  max-height: 90vh;
  overflow-y: auto;
}

/* Smooth scroll behavior para cuando se cierra el modal */
html {
  scroll-behavior: smooth;
}

/* Override para cuando necesitamos scroll inmediato */
html.modal-scroll-instant {
  scroll-behavior: auto !important;
}

/* Mejoras para dispositivos móviles */
@media (max-width: 768px) {
  body.modal-open {
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  .product-modal__dialog {
    max-height: 100vh;
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Prevenir zoom en iOS cuando se enfoca un input en el modal */
@media screen and (max-width: 768px) {
  .product-modal input,
  .product-modal textarea,
  .product-modal select {
    font-size: 16px;
  }
}