/* C13.1 — Toast de donaciones en tiempo real + realces del ranking en vivo.
   Estilo fiel a la página (oscuro, gaming), con borde morado/rosa y corazón. El stack va ABAJO a la
   derecha para no chocar con el muro de actividad de C18 (arriba a la derecha). z-index por debajo de
   los modales de pago (Culqi ~2147483000). */

#dn-toast-stack {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 1090;
    display: flex;
    flex-direction: column-reverse;   /* el más nuevo (insertado arriba en el DOM) queda visualmente encima */
    gap: 10px;
    width: min(360px, calc(100vw - 36px));
    pointer-events: none;             /* el hueco no bloquea la página; cada toast reactiva sus clics */
}

.dn-toast {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem 2.1rem .85rem .9rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(26, 16, 43, .97), rgba(17, 12, 30, .97));
    border: 1px solid rgba(196, 132, 255, .55);
    box-shadow: 0 10px 30px rgba(120, 40, 200, .35), 0 2px 8px rgba(0, 0, 0, .4);
    color: #f3ecff;
    /* Entrada/salida: desliza desde la derecha + fade. */
    opacity: 0;
    transform: translateX(24px) scale(.98);
    transition: opacity .32s ease, transform .32s cubic-bezier(.2, .8, .2, 1);
    will-change: opacity, transform;
}
.dn-toast.is-in { opacity: 1; transform: translateX(0) scale(1); }
.dn-toast.is-out { opacity: 0; transform: translateX(24px) scale(.98); }

/* La confirmación personal del donante resalta un poco más (borde rosa). */
.dn-toast-mia {
    border-color: rgba(255, 128, 191, .7);
    box-shadow: 0 10px 30px rgba(210, 40, 140, .38), 0 2px 8px rgba(0, 0, 0, .4);
}

.dn-toast-ic {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 120, 200, .35), rgba(150, 80, 255, .28));
    color: #ff77c8;
}
.dn-toast-ic svg { width: 20px; height: 20px; }

.dn-toast-body { min-width: 0; flex: 1 1 auto; }
.dn-toast-title {
    margin: 0 0 .12rem;
    font-size: .72rem; font-weight: 800; letter-spacing: .04em;
    color: #d9b8ff; text-transform: uppercase;
}
.dn-toast-line { margin: 0; font-size: .92rem; line-height: 1.3; }
.dn-toast-quien { color: #efe6ff; }
.dn-toast-monto { color: #fff; font-weight: 800; }
.dn-toast-foot { margin: .2rem 0 0; font-size: .74rem; color: #b9a7d6; }

.dn-toast-x {
    position: absolute;
    top: .35rem; right: .4rem;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border: 0; border-radius: 8px;
    background: transparent; color: #c9b8e6;
    font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.dn-toast-x:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.dn-toast-x:focus-visible { outline: 2px solid #c484ff; outline-offset: 1px; }

/* ===== Realce de lo que cambió en el ranking (podio / tarjeta "Tu posición") ===== */
.rk-flash { animation: rk-flash-kf 1.1s ease-out; }
@keyframes rk-flash-kf {
    0% { box-shadow: 0 0 0 0 rgba(196, 132, 255, .0); }
    18% { box-shadow: 0 0 0 3px rgba(196, 132, 255, .55); }
    100% { box-shadow: 0 0 0 0 rgba(196, 132, 255, 0); }
}

/* Indicador "en vivo": al recibir una actualización, el punto late un momento. */
.rk-live-on .rk-live-dot { box-shadow: 0 0 0 0 rgba(120, 230, 160, .7); animation: rk-live-pulse 1.4s ease-out; }
@keyframes rk-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(120, 230, 160, .7); }
    100% { box-shadow: 0 0 0 10px rgba(120, 230, 160, 0); }
}

/* Móvil: ocupa el ancho y se despega de la barra inferior global (C22). */
@media (max-width: 768px) {
    #dn-toast-stack {
        left: 10px; right: 10px;
        width: auto;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 74px);
    }
}

/* Respeta a quien pidió menos movimiento: sin deslizamientos ni pulsos, solo aparecer/desaparecer. */
@media (prefers-reduced-motion: reduce) {
    .dn-toast { transition: opacity .2s ease; transform: none; }
    .dn-toast.is-in { transform: none; }
    .dn-toast.is-out { transform: none; }
    .rk-flash { animation: none; }
    .rk-live-on .rk-live-dot { animation: none; }
}