/* ========================================= */
/* Estilos Específicos: Menú         */
/* ========================================= */

/* NOTA: Las animaciones .animate-slide-up y @keyframes slideUp
   se han movido a styles.css si son reutilizables globalmente. */

/* Estilos para las tarjetas del MENÚ y el hover - ¡Diferentes al catering! */
.menu-card-hover {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    border: 1px solid #e0e0e0;
    border-radius: 0.75rem;
    overflow: hidden;
}

.menu-card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-color: #28a745;
    /* Borde verde al pasar el ratón, similar al catering pero el efecto de elevación lo distingue */
}

/* Ajustes para las imágenes de las tarjetas del MENÚ */
.menu-card-hover .card-img-top {
    height: 220px;
    /* Un poco más de altura que catering */
    object-fit: cover;
    border-radius: 0.7rem 0.7rem 0 0;
}

/* Estilos para las pestañas del MENÚ (Diferentes a las de Catering) */
.nav-pills .nav-link {
    color: #6c757d;
    /* Gris más oscuro para el texto normal */
    background-color: #f8f9fa;
    /* Fondo muy claro para inactivo */
    margin: 0 7px;
    /* Más espacio entre pestañas */
    border-radius: 2rem;
    /* Píldora más pronunciada */
    font-weight: 600;
    /* Un poco más de peso */
    padding: 0.75rem 1.5rem;
    /* Más padding */
    border: 1px solid #dee2e6;
    /* Borde sutil */
}

.nav-pills .nav-link.active,
.nav-pills .nav-link:hover {
    color: #fff;
    background-color: #007bff;
    /* Un azul primario para activo/hover */
    border-color: #007bff;
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
}

.nav-pills .nav-link:hover:not(.active) {
    background-color: #e2e6ea;
    border-color: #ced4da;
}

/* Estilos específicos del MODAL del MENÚ */
.modal-body img {
    max-height: 350px;
    /* Más altura para la imagen del modal */
    object-fit: cover;
    /* Cambiado a cover para llenar mejor el espacio */
    border-radius: 0.5rem;
}

.modal-header .modal-title {
    font-weight: 700;
    color: #007bff;
    /* Color del título del modal */
}

.modal-footer .btn-primary {
    /* Botón 'Cerrar' */
    background-color: #007bff;
    border-color: #007bff;
}

.modal-footer .btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
}

.modal-footer .btn-success {
    /* Botón "Añadir al Carrito" */
    background-color: #28a745;
    border-color: #28a745;
}

.modal-footer .btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}