/**
 * Estilos personalizados de la aplicacion
 * Agrega aqui tus estilos CSS custom
 */

/* Ejemplo: animaciones personalizadas */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* Fix para el texto del header - evitar problemas de renderizado */
header .flex-col span {
    will-change: auto !important;
    backface-visibility: visible !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translateZ(0);
}

/* Asegurar que el texto siempre sea visible */
header a > div:last-child span {
    opacity: 1 !important;
    color: inherit;
}

/* Optimización para el anillo animado */
@keyframes ping {
    75%, 100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.animate-ping {
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Prevenir parpadeos en las transiciones */
header * {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Mejora de legibilidad del texto del menú */
header .text-foreground {
    color: #ededed !important;
}

header .text-secondary {
    color: #7f7f7f !important;
}

/* Hover states mejorados */
header a:hover .text-foreground {
    color: #c4c4c4 !important;
}

header a:hover .text-secondary {
    color: rgba(237, 237, 237, 0.8) !important;
}