/* Estilos para el mensaje flotante (toast) */
.toast-glass {
    position: fixed;
    left: 2rem;
    bottom: 1rem;
    background: rgba(110, 0, 255, 0.23);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 24px;
    border: 1px solid rgba(200, 150, 255, 0.3);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(110, 0, 255, 0.1),
        inset 0 0 30px 15px rgba(180, 100, 255, 0.15);
    color: var(--text-main);
    padding: 0.8rem 1.5rem;
    font-weight: bold;
    animation-delay: 1s;
    animation: fadeInOut 5s ease forwards;
}

@keyframes fadeInOut {
    0% { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    15% { 
        opacity: 1; 
        transform: translateY(0); 
    }
    85% { 
        opacity: 1; 
        transform: translateY(0); 
    }
    100% { 
        opacity: 0; 
        transform: translateY(10px); 
    }
}

@media (max-width: 600px) {
    .toast-glass {
        left: 1rem;
        right: 40%;
        transform: translateX(50%);
    }
}