/* ==========================================================================
   KpoToast — avisos propios (Shared/KpoToastHost.razor + Extensiones/KpoToastService.cs)
   Sin dependencia de Blazor.Bootstrap. Soporta [data-theme="dark"] y prefers-reduced-motion.
   ========================================================================== */
:root {
    --kt-bg: #FFFFFF;
    --kt-text: #1B2A41;
    --kt-muted: #5B6B84;
    --kt-line: rgba(215, 223, 234, .7);
    --kt-hover: #E9EEF6;
    --kt-shadow: 0 12px 32px -8px rgba(27, 42, 65, .28), 0 2px 6px rgba(27, 42, 65, .10);
    --kt-ok: #15803D;   --kt-ok-bg: #E6F4EA;
    --kt-warn: #B45309; --kt-warn-bg: #FDF1E0;
    --kt-err: #B91C1C;  --kt-err-bg: #FCE8E8;
    --kt-info: #1D4ED8; --kt-info-bg: #E3ECFB;
    --kt-notif: #2E75B6; --kt-notif-bg: #E3ECFB;
}
[data-theme="dark"] {
    --kt-bg: #1D2A42;
    --kt-text: #E4EBF5;
    --kt-muted: #98A8C2;
    --kt-line: rgba(44, 61, 90, .8);
    --kt-hover: #2A3A57;
    --kt-shadow: 0 14px 36px -8px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .35);
    --kt-ok: #4ADE80;   --kt-ok-bg: #12301F;
    --kt-warn: #FBBF24; --kt-warn-bg: #3A2A0D;
    --kt-err: #F87171;  --kt-err-bg: #3D1717;
    --kt-info: #7FB0FF; --kt-info-bg: #14264A;
    --kt-notif: #63A0E8; --kt-notif-bg: #14264A;
}

/* Pila: arriba a la derecha, por encima de modales (BlazorBootstrap usa ~1055) */
.kpo-toasts {
    position: fixed;
    top: 64px;
    right: 16px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}
@media (max-width: 575.98px) {
    .kpo-toasts { top: 60px; right: 12px; left: 12px; width: auto; }
}

.kpo-toast {
    --c: var(--kt-info);
    --c-bg: var(--kt-info-bg);
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 4px 40px 1fr auto;
    align-items: start;
    background: var(--kt-bg);
    color: var(--kt-text);
    border-radius: 12px;
    border: 1px solid var(--kt-line);
    box-shadow: var(--kt-shadow);
    font-family: inherit;
    transform: translateX(28px) scale(.96);
    opacity: 0;
    max-height: 320px;
    transition: transform .38s cubic-bezier(.2, .8, .2, 1), opacity .30s ease, margin .30s ease, max-height .30s ease;
}
.kpo-toast.in { transform: none; opacity: 1; }
.kpo-toast.out { transform: translateX(22px) scale(.97); opacity: 0; max-height: 0; margin-top: -10px; }

.kpo-toast.ok    { --c: var(--kt-ok);    --c-bg: var(--kt-ok-bg); }
.kpo-toast.warn  { --c: var(--kt-warn);  --c-bg: var(--kt-warn-bg); }
.kpo-toast.err   { --c: var(--kt-err);   --c-bg: var(--kt-err-bg); }
.kpo-toast.info  { --c: var(--kt-info);  --c-bg: var(--kt-info-bg); }
.kpo-toast.notif { --c: var(--kt-notif); --c-bg: var(--kt-notif-bg); }

.kpo-toast .t-stripe { background: var(--c); align-self: stretch; }
.kpo-toast .t-icon {
    margin: 12px 0 0 10px;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--c-bg);
    color: var(--c);
    display: grid; place-items: center;
}
.kpo-toast .t-icon svg { width: 17px; height: 17px; }
.kpo-toast .t-body { padding: 11px 6px 12px 10px; min-width: 0; }
.kpo-toast .t-title { font-weight: 700; font-size: 14px; line-height: 1.25; }
.kpo-toast .t-msg { font-size: 13.5px; color: var(--kt-muted); margin-top: 2px; overflow-wrap: anywhere; }
.kpo-toast .t-msg p:last-child, .kpo-toast .t-msg ul:last-child { margin-bottom: 0; }
.kpo-toast .t-close {
    margin: 8px 8px 0 0;
    width: 26px; height: 26px;
    border: 0; border-radius: 7px;
    background: transparent;
    color: var(--kt-muted);
    cursor: pointer;
    display: grid; place-items: center;
    transition: background .15s, color .15s;
}
.kpo-toast .t-close:hover { background: var(--kt-hover); color: var(--kt-text); }
.kpo-toast .t-close:focus-visible, .kpo-toast .t-action:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.kpo-toast .t-close svg { width: 14px; height: 14px; }
.kpo-toast .t-action {
    margin-top: 8px;
    border: 0; border-radius: 7px;
    padding: 5px 12px;
    font: inherit; font-size: 13px; font-weight: 600;
    background: var(--c); color: #fff;
    cursor: pointer;
    transition: filter .15s, transform .15s;
}
.kpo-toast .t-action:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Barra de tiempo restante; se pausa al pasar el mouse */
.kpo-toast .t-progress {
    position: absolute; left: 4px; right: 0; bottom: 0;
    height: 3px;
    background: color-mix(in srgb, var(--c) 22%, transparent);
}
.kpo-toast .t-progress > b {
    display: block; height: 100%; width: 100%;
    background: var(--c);
    transform-origin: left;
    animation: kt-shrink var(--dur, 3000ms) linear forwards;
}
.kpo-toast:hover .t-progress > b { animation-play-state: paused; }
@keyframes kt-shrink { to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
    .kpo-toast { transition: opacity .2s ease; transform: none; }
    .kpo-toast.out { transform: none; }
}