/* ========================================= */
/* Estilos Específicos: Catering     */
/* ========================================= */

/* NOTA: Las animaciones .animate-fade-in y @keyframes fadeIn
   se han movido a styles.css si son reutilizables globalmente. */

/* Estilos para las tarjetas de CATERING y el hover */
/* Si estas clases (card-hover, card-img-top) se usan SÓLO en catering, se quedan.
   Si también se usan en menú, deberíamos generalizarlas en styles.css y crear
   modificadores específicos aquí, o renombrarlas para mayor claridad (ej. .catering-card-hover).
   Por ahora, las mantengo aquí como específicas de CATERING. */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.card-hover:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Ajustes para las imágenes de las tarjetas de CATERING */
.card-img-top {
    height: 200px;
    /* Altura fija para consistencia visual */
    object-fit: cover;
    /* Recorta la imagen para cubrir el espacio */
}

/* Mejoras visuales para las pestañas de BOOTSTRAP en CATERING */
.nav-pills .nav-link {
    color: #495057;
    /* Color de texto para pestañas inactivas */
    background-color: #e9ecef;
    /* Fondo suave para pestañas inactivas */
    margin: 0 5px;
    border-radius: .5rem;
    transition: all 0.3s ease;
    font-weight: 500;
}

.nav-pills .nav-link.active,
.nav-pills .nav-link:hover {
    color: #fff;
    background-color: #28a745;
    /* Un verde vibrante para activo/hover */
}

.nav-pills .nav-link:hover:not(.active) {
    background-color: #ced4da;
    /* Un gris un poco más oscuro para hover en inactivos */
}

/* Estilos específicos del MODAL de CATERING */
.modal-body img {
    max-height: 300px;
    /* Altura máxima para la imagen dentro del modal */
    object-fit: contain;
    /* Asegura que la imagen se vea completa */
}

.modal-header .modal-title {
    font-weight: bold;
    color: #333;
}

.modal-footer .btn-success {
    background-color: #28a745;
    border-color: #28a745;
}

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