.toast-message-container {
    position: fixed;
    inset: auto 1rem 1rem auto;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-height: 25vh;
    overflow: hidden;
    z-index: 9999;
    pointer-events: none;
}

/* arranca fuera de pantalla y sube ~1/4 de alto de viewport */
.toast-message {
    min-width: 260px;
    max-width: 420px;
    padding: .75rem .9rem;
    border-radius: .5rem;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
    transform: translateY(25vh);
    opacity: 0;
    pointer-events: auto;
    background: rgba(17, 17, 17, .8);
    transition: transform 1.2s cubic-bezier(.22, .61, .36, 1), opacity 1.2s ease;
}



.toast-message.show {
    transform: translateY(0);
    opacity: 1;
}

.toast-message.hide {
    opacity: 0;
    transform: translateY(-14px);
}

.toast-message.success {
    background: rgba(10, 126, 48, .8);
}

.toast-message.error {
    background: rgba(163, 18, 18, .8);
}

.toast-message.info {
    background: rgba(45, 45, 45, .8);
}