/* Animaciones para menús */
.submenu {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.submenu:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
}

.mobile-submenu {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.mobile-submenu:not(.hidden) {
    max-height: 500px;
    opacity: 1;
}

.fa-chevron-down {
    transition: transform 0.3s ease;
}

/* Animación para el menú móvil */
#mobile-menu {
    transition: transform 0.3s ease-in-out;
    transform: translateX(-100%);
}

#mobile-menu:not(.hidden) {
    transform: translateX(0);
}

/* Animaciones hover */
.hover\:bg-gray-100:hover,
.hover\:bg-gray-200:hover,
.hover\:text-gray-950:hover {
    transition: all 0.2s ease;
}

/* Transiciones suaves para los botones */
.transition {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}