.app-alert {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    font-size: 0.9rem;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(12px);
    animation: alert-slide-down 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 1;
    transition: opacity 0.25s ease-out, transform 0.3s ease-out;
    min-width: 320px;
    max-width: 600px;
}

/* 👇 NUEVO: estado oculto (fade-out hacia arriba) */
.app-alert-hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(-16px);
}

.app-alert-icon i {
    font-size: 1.1rem;
}

.app-alert-success {
    background: #e6fff4;
    color: #046c4e;
    border: 1px solid #a5f3c7;
}

.app-alert-error {
    background: #ffecec;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.app-alert-warning {
    background: #fff7e6;
    color: #92400e;
    border: 1px solid #fed7aa;
}

.app-alert-info {
    background: #e0f2fe;
    color: #075985;
    border: 1px solid #bae6fd;
}

@keyframes alert-slide-down {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}