/* Estilos de la ventanita de mensajes */


/* //** Asegura que el contenedor quede arriba de modals/backdrops */
/*.blazored-toast-container {
    z-index: 1080 !important;
}*/

/* //** Estilo base del toast */
/*.blazored-toast-container .blazored-toast {
        border-radius: 14px;
        box-shadow: 0 .75rem 2rem rgba(0,0,0,.18);
        border: 1px solid rgba(255,255,255,.15);
        padding: .85rem 1rem;
        font-size: .95rem;*/
/* //** Look moderno (si el navegador lo soporta) */
/*backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }*/

/* //** Ajustes internos */
/*.blazored-toast-container .blazored-toast-body {
        margin-right: .75rem;
    }*/

/* //** Colores (tipo Bootstrap pero más “glass”) */
/*.blazored-toast-container .blazored-toast-success {
        background: rgba(25,135,84,.92) !important;
    }

    .blazored-toast-container .blazored-toast-error {
        background: rgba(220,53,69,.92) !important;
    }

    .blazored-toast-container .blazored-toast-info {
        background: rgba(13,110,253,.92) !important;
    }

    .blazored-toast-container .blazored-toast-warning {
        background: rgba(255,193,7,.92) !important;
        color: #1f1f1f !important;
    }*/


/* //** Toast moderno */
.blazored-toast-container {
    z-index: 1080;
}

.blazored-toast {
    border-radius: 14px;
    box-shadow: 0 .75rem 2rem rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: .85rem 1rem;
    font-size: .95rem;
}

.blazored-toast-success {
    background: rgba(25,135,84,.92);
}

.blazored-toast-error {
    background: rgba(220,53,69,.92);
}

.blazored-toast-info {
    background: rgba(13,110,253,.92);
}

.blazored-toast-warning {
    background: rgba(255,193,7,.92);
    color: #1f1f1f;
}


/* //** Variables (Timeout del host = 3s) */
/*.blazored-toast-container {
    --toast-timeout: 3s;
    --toast-fade: 1.2s;*/ /* //** más notorio que .75s */
    /*--toast-move: 22px;*/ /* //** más movimiento */
/*}*/

.blazored-toast-container {
    --toast-timeout: 3s;
    --toast-fade: .6s; /* //** 3 - 2.4 = 0.6 */
    --toast-move: 18px; /* //** a gusto */
}


    /* //** Forzar animación de entrada + salida (AUTO-CIERRE) */
    .blazored-toast-container .blazored-toast {
        will-change: opacity, transform;
        animation: toast-in .20s ease-out, toast-out var(--toast-fade) ease-in calc(var(--toast-timeout) - var(--toast-fade)) forwards !important;
    }

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(calc(var(--toast-move) * -1)) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toast-out {
    to {
        opacity: 0;
        transform: translateY(calc(var(--toast-move) * -1)) scale(.98);
    }
}