/* assets/css/responsive.css */

/* Estilos para pantallas grandes (desktop) */
@media (min-width: 992px) {
    /* Clases para botones */
    .btn-lg-responsive {
        font-size: 0.9rem; /* Tamaño de fuente más pequeño */
        padding: 0.5rem 1.5rem; /* Padding más compacto */
    }
    
    /* Clases para títulos */
    .h5-responsive {
        font-size: 1.35rem; /* Título un poco más pequeño */
    }

    /* Tamaño de íconos en el encabezado de información */
    .info-item .material-icons {
        font-size: 1.25rem !important;
    }

    /* Estilos para las tarjetas de producto en el modal */
    .product-title {
        font-size: 1.15rem; /* Título de producto más pequeño */
    }
    
    .product-details li {
        font-size: 0.85rem; /* Texto de detalles de producto más pequeño */
    }

    /* Separación de elementos del footer */
    .modal-footer .btn {
        width: auto !important; /* Asegura que no ocupen todo el ancho */
    }
}

/* Estilos para pantallas pequeñas (móviles y tablets) */
@media (max-width: 991.98px) {
    /* Clases para botones */
    .btn-lg-responsive {
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
    }

    /* Clases para títulos */
    .h5-responsive {
        font-size: 1.25rem;
    }
    
    /* Ajuste para que los botones del footer se apilen verticalmente en móvil */
    .modal-footer {
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem;
    }

    /* Ajuste de ancho para los botones en móviles */
    .modal-footer .btn {
        width: 100%; /* Hacen que los botones ocupen todo el ancho */
    }
}