/* ============================================================
   Notificaciones push (toasts) — Sistema de Rifas
   Apiladas arriba a la derecha, auto-cierre con barra de
   progreso. Usa tokens de theme.css; funciona en admin,
   login y portal publico (ambos temas claros).
   Requiere theme.css cargado antes.
   ============================================================ */

.toast-stack {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    width: min(360px, calc(100vw - 2rem));
    pointer-events: none;
}

.app-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-left: 4px solid var(--ink-faint);
    border-radius: 10px;
    box-shadow: var(--shadow-float);
    padding: .8rem .9rem .9rem;
    cursor: pointer;
    opacity: 0;
    transform: translateX(calc(100% + 1.5rem));
    transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
    overflow: hidden;
}

.app-toast.is-in {
    opacity: 1;
    transform: translateX(0);
}

.app-toast.is-out {
    opacity: 0;
    transform: translateX(calc(100% + 1.5rem));
}

/* --- Colores por tipo --- */
.app-toast-success { border-left-color: var(--success); }
.app-toast-success .app-toast-icon { color: var(--success); }

.app-toast-error { border-left-color: var(--danger); }
.app-toast-error .app-toast-icon { color: var(--danger); }

.app-toast-warning { border-left-color: var(--gold); }
.app-toast-warning .app-toast-icon { color: var(--gold-deep); }

.app-toast-info { border-left-color: var(--seal-soft); }
.app-toast-info .app-toast-icon { color: var(--seal-soft); }

/* --- Piezas --- */
.app-toast-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: .05rem;
}

.app-toast-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.app-toast-body {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    padding-bottom: .35rem;
}

.app-toast-message {
    display: block;
    font-family: var(--font-body);
    font-size: .9rem;
    line-height: 1.45;
    color: var(--ink);
    overflow-wrap: break-word;
}

/* Barra de progreso del auto-cierre */
.app-toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    border-radius: 2px;
    background: var(--line);
    transform-origin: left center;
    animation: toast-progress 5s linear forwards;
}

.app-toast-success .app-toast-progress { background: color-mix(in srgb, var(--success) 45%, #fff); }
.app-toast-error .app-toast-progress { background: color-mix(in srgb, var(--danger) 45%, #fff); }
.app-toast-warning .app-toast-progress { background: color-mix(in srgb, var(--gold) 50%, #fff); }
.app-toast-info .app-toast-progress { background: color-mix(in srgb, var(--seal-soft) 45%, #fff); }

@keyframes toast-progress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

.app-toast-close {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ink-faint);
    cursor: pointer;
    transition: background var(--speed-fast) ease, color var(--speed-fast) ease;
}

.app-toast-close svg {
    width: 12px;
    height: 12px;
    display: block;
}

.app-toast-close:hover,
.app-toast-close:focus-visible {
    background: var(--paper-sunken);
    color: var(--ink);
}

/* --- Movil: ancho completo con margen --- */
@media (max-width: 575.98px) {
    .toast-stack {
        top: .6rem;
        right: .6rem;
        left: .6rem;
        width: auto;
    }

    .app-toast {
        transform: translateY(calc(-100% - 1rem));
    }

    .app-toast.is-in {
        transform: translateY(0);
    }

    .app-toast.is-out {
        transform: translateY(calc(-100% - 1rem));
    }
}