/* Optimizaciones para modales en dispositivos móviles - Página principal */

/* Ajustes generales del modal */
#productoModal .modal-dialog {
    max-width: 1100px;
    max-height: 90vh;
}

#productoModal .modal-content {
    overflow: hidden;
    max-height: 90vh;
}

/* Ajustes para pantallas grandes */
@media (min-width: 992px) {
    #productoModal .modal-dialog {
        max-width: 80%;
        max-height: 95vh;
    }
    
    #productoModal .modal-content {
        max-height: 95vh;
    }
}

/* Ajustes específicos para pantallas pequeñas */
@media (max-width: 576px) {
    #productoModal .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
    }
    
    #productoModal .modal-content {
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border: none;
    }
    
    #productoModal .modal-body {
        padding: 0 !important;
    }
    
    #productoModal .col-lg-7 {
        padding: 15px !important;
        max-height: calc(100vh - 200px);
    }
    
    #productoImgContainer {
        height: 200px !important;
        max-height: 200px !important;
    }
    
    #productoModal .col-lg-5 {
        max-height: 200px !important;
    }
    
    /* Mejorar visualización del precio y título */
    #productoNombre {
        font-size: 1.4rem !important;
    }
    
    #productoPrecio {
        font-size: 1.2rem !important;
        margin-bottom: 15px !important;
    }
}