/* Fix para garantizar el correcto orden de elementos en el modal de producto */

/* Forzar separación visual clara entre elementos */
#productoModal .col-lg-7 > * {
    width: 100%;
    clear: both;
}

/* Asegurar que la descripción tenga un fondo sólido y esté por encima */
.producto-descripcion {
    background-color: white !important;
    padding-bottom: 30px !important;
    border-bottom: 2px solid #eee !important;
    margin-bottom: 40px !important;
    min-height: 150px !important;
    margin-top: 20px !important;
    display: block !important;
}

/* Estilos para el contenedor de texto de la descripción */
#productoDescripcion {
    min-height: 100px !important;
    max-height: none !important;
    overflow-y: visible !important;
    margin-bottom: 20px !important;
    display: block !important;
    background-color: #f9f9f9 !important;
    padding: 15px !important;
    position: relative !important;
    z-index: 999 !important; /* Valor extremadamente alto para estar por encima de todo */
}

/* Agregar margen visual más amplio entre descripción y botones */
.producto-botones {
    margin-top: 50px !important;
    padding-top: 15px !important;
    clear: both !important;
    display: block !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Garantizar que los elementos tienen el orden correcto */
#productoNombre { order: 0 !important; }
#productoPrecio { order: 1 !important; }
.producto-descripcion { order: 2 !important; z-index: 999 !important; }
.producto-botones { order: 3 !important; z-index: 10 !important; }
#productoModal .mt-4 { order: 4 !important; z-index: 10 !important; }

/* Eliminar posibles problemas con estilos de Bootstrap */
.modal-body {
    overflow-x: hidden !important;
}