:root {
    --toast-bg: #222938;
    --toast-fg: #fff;
    --toast-accent: #47d764; /* verde éxito; cámbialo según el tipo */
}

.toasts {
    position: fixed;
    top: 20px;
    right: 4%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 9999;
    max-width: 92%;
    width: fit-content;
}

/* ------- Toast base ------- */
.toast {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 260px;
    padding: 0.8rem 1rem;
    border-radius: 0.6rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    /* Animación: entrada + (opcional) salida */
    opacity: 0;
    transform: translateX(120%);
    transition: opacity 0.3s ease, transform 0.8s ease;
    max-width: 100%;
}

.toastOk {
    background: #aeffae;
    color: #161616;
    border-left: 0.3rem solid #008000;
}
.toastError {
    background: #ffa9b3;
    color: #161616;
    border-left: 0.3rem solid #FF2C2C;
}

.toastInfo {
    background: #adddff;
    color: #161616;
    border-left: 0.3rem solid #00008A;
}




    /* Estado visible */
    .toast.show {
        opacity: 1;
        transform: translateX(0);
    }

    /* Cierra con CSS (útil si manejas JS aparte) */
    .toast.hide {
        opacity: 0;
        transform: translateX(120%);
    }

/* Icono y botón */
.toast__icon, .toast i {
    font-size: 1.2rem;
    flex-shrink: 0;
    color: #161616;
}

.toast__close {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
}

    /* Hover amistoso en el botón */
    .toast__close:hover {
        opacity: 0.7;
    }