#ceri-toast {
    /* Ocultamiento base y bloqueo de clics */
    opacity: 0;
    pointer-events: none;
    
    /* Centrado Responsivo Avanzado (Soporta paddings y textos dinámicos) */
    left: 0;
    right: 0;
    margin: 0 auto;
    width: max-content; 
    max-width: 90vw; 
    
    /* Posicionamiento y Capa Suprema */
    top: -20px; 
    position: fixed !important;
    z-index: 2147483647 !important; /* Capa por encima de carritos laterales AJAX */
    
    /* Estética Premium Glassmorphism */
    background: var(--ceri-toast-bg, rgba(250, 250, 252, 0.65));
    color: var(--ceri-toast-text, #1d1d1f);
    font-size: var(--ceri-toast-font-size, 15px);
    padding: var(--ceri-toast-padding, 16px 24px);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    text-align: center;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* CLASES DISPARADAS POR JAVASCRIPT */
.ceri-anim-in-slideDown { animation: inSlideDown 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; pointer-events: auto; }
.ceri-anim-in-fadeIn { animation: inFadeIn 0.5s ease forwards; pointer-events: auto; }
.ceri-anim-in-zoomIn { animation: inZoomIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; pointer-events: auto; }

.ceri-anim-out-slideUp { animation: outSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; pointer-events: none; }
.ceri-anim-out-fadeOut { animation: outFadeOut 0.4s ease forwards; pointer-events: none; }
.ceri-anim-out-zoomOut { animation: outZoomOut 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; pointer-events: none; }

/* --- COREOGRAFÍAS VISUALES (@keyframes) --- */
@keyframes inSlideDown {
    0% { top: -20px; opacity: 0; }
    100% { top: 80px; opacity: 1; }
}
@keyframes inFadeIn {
    0% { top: 80px; opacity: 0; }
    100% { top: 80px; opacity: 1; }
}
@keyframes inZoomIn {
    0% { top: 80px; opacity: 0; transform: scale(0.85); }
    100% { top: 80px; opacity: 1; transform: scale(1); }
}

@keyframes outSlideUp {
    0% { top: 80px; opacity: 1; }
    100% { top: -20px; opacity: 0; }
}
@keyframes outFadeOut {
    0% { top: 80px; opacity: 1; }
    100% { top: 80px; opacity: 0; }
}
@keyframes outZoomOut {
    0% { top: 80px; opacity: 1; transform: scale(1); }
    100% { top: 80px; opacity: 0; transform: scale(0.85); }
}