/* DTO Eventos V2 · feedback global y microinteracciones */

.dto-ui-route-progress {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:4000;
    height:3px;
    pointer-events:none;
    opacity:0;
    overflow:hidden;
    transition:opacity .15s ease;
}
.dto-ui-route-progress span {
    display:block;
    height:100%;
    width:0;
    background:linear-gradient(90deg,var(--dto-primary),#5eead4);
    box-shadow:0 0 14px rgba(33,183,170,.5);
    transition:width .28s cubic-bezier(.2,.8,.2,1);
}
.dto-ui-route-progress.is-active { opacity:1; }
.dto-ui-route-progress.is-active span { width:78%; }
.dto-ui-route-progress.is-complete span { width:100%; transition-duration:.12s; }

.dto-ui-network {
    position:fixed;
    top:12px;
    left:50%;
    z-index:3900;
    transform:translate(-50%,-120%);
    display:flex;
    align-items:center;
    gap:9px;
    max-width:min(520px,calc(100vw - 28px));
    padding:10px 14px;
    border:1px solid #fed7aa;
    border-radius:12px;
    background:#fff7ed;
    color:#9a3412;
    box-shadow:var(--dto-shadow-lg);
    font-size:12px;
    font-weight:700;
    opacity:0;
    transition:transform .24s ease,opacity .24s ease;
}
.dto-ui-network.is-visible { transform:translate(-50%,0); opacity:1; }

.dto-ui-toast-stack {
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:3800;
    width:min(380px,calc(100vw - 30px));
    display:grid;
    gap:10px;
    pointer-events:none;
}
.dto-ui-toast {
    pointer-events:auto;
    display:grid;
    grid-template-columns:34px minmax(0,1fr) 26px;
    gap:10px;
    align-items:start;
    padding:13px 12px 13px 13px;
    border:1px solid var(--dto-line);
    border-radius:14px;
    background:rgba(255,255,255,.98);
    box-shadow:var(--dto-shadow-lg);
    opacity:0;
    transform:translateY(10px) scale(.985);
    transition:opacity .2s ease,transform .2s ease;
}
.dto-ui-toast.is-visible { opacity:1; transform:translateY(0) scale(1); }
.dto-ui-toast.is-leaving { opacity:0; transform:translateY(7px) scale(.985); }
.dto-ui-toast-icon {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:10px;
    font-size:14px;
}
.dto-ui-toast.is-success .dto-ui-toast-icon { background:var(--dto-success-soft); color:var(--dto-success); }
.dto-ui-toast.is-error .dto-ui-toast-icon { background:var(--dto-danger-soft); color:var(--dto-danger); }
.dto-ui-toast.is-warning .dto-ui-toast-icon { background:var(--dto-warning-soft); color:var(--dto-warning); }
.dto-ui-toast.is-info .dto-ui-toast-icon { background:var(--dto-info-soft); color:var(--dto-info); }
.dto-ui-toast-copy strong { display:block; color:var(--dto-ink); font-size:12px; line-height:1.25; }
.dto-ui-toast-copy span { display:block; margin-top:4px; color:var(--dto-muted); font-size:11px; line-height:1.45; }
.dto-ui-toast-close {
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#94a3b8;
    cursor:pointer;
}
.dto-ui-toast-close:hover { background:#f1f5f9; color:var(--dto-text); }

.dto-ui-confirm-overlay,
.dto-ui-loading-overlay {
    position:fixed;
    inset:0;
    z-index:3700;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(15,23,42,.48);
    backdrop-filter:blur(4px);
    opacity:0;
    visibility:hidden;
    transition:opacity .18s ease,visibility .18s ease;
}
.dto-ui-confirm-overlay.is-open,
.dto-ui-loading-overlay.is-open { opacity:1; visibility:visible; }

.dto-ui-confirm {
    width:min(430px,100%);
    padding:25px;
    border:1px solid rgba(226,232,240,.95);
    border-radius:20px;
    background:#fff;
    box-shadow:0 28px 80px rgba(15,23,42,.26);
    transform:translateY(8px) scale(.985);
    transition:transform .2s ease;
    text-align:center;
}
.dto-ui-confirm-overlay.is-open .dto-ui-confirm { transform:translateY(0) scale(1); }
.dto-ui-confirm-icon {
    width:50px;
    height:50px;
    margin:0 auto 14px;
    display:grid;
    place-items:center;
    border-radius:15px;
    background:var(--dto-primary-soft);
    color:var(--dto-primary-dark);
    font-size:20px;
}
.dto-ui-confirm.is-danger .dto-ui-confirm-icon { background:var(--dto-danger-soft); color:var(--dto-danger); }
.dto-ui-confirm.is-warning .dto-ui-confirm-icon { background:var(--dto-warning-soft); color:var(--dto-warning); }
.dto-ui-confirm h3 { margin:0; color:var(--dto-ink); font-size:18px; font-weight:850; }
.dto-ui-confirm p { margin:9px auto 0; max-width:350px; color:var(--dto-muted); font-size:12px; line-height:1.55; }
.dto-ui-confirm-actions { margin-top:22px; display:flex; justify-content:center; gap:9px; }
.dto-ui-confirm-actions .dto-btn { min-width:120px; }
.dto-ui-confirm.is-danger [data-dto-confirm-accept] { background:var(--dto-danger); color:#fff!important; }
.dto-ui-confirm.is-danger [data-dto-confirm-accept]:hover { background:#b91c1c; }

.dto-ui-loading-card {
    width:min(360px,100%);
    padding:28px 24px;
    border:1px solid rgba(226,232,240,.9);
    border-radius:20px;
    background:#fff;
    box-shadow:0 28px 80px rgba(15,23,42,.24);
    text-align:center;
    transform:translateY(8px) scale(.985);
    transition:transform .2s ease;
}
.dto-ui-loading-overlay.is-open .dto-ui-loading-card { transform:translateY(0) scale(1); }
.dto-ui-spinner {
    width:38px;
    height:38px;
    margin:0 auto 15px;
    display:block;
    border:3px solid #dce8e7;
    border-top-color:var(--dto-primary);
    border-radius:50%;
    animation:dtoUiSpin .72s linear infinite;
}
.dto-ui-loading-card h3 { margin:0; color:var(--dto-ink); font-size:16px; font-weight:850; }
.dto-ui-loading-card p { margin:7px 0 0; color:var(--dto-muted); font-size:11px; line-height:1.5; }
@keyframes dtoUiSpin { to { transform:rotate(360deg); } }

.dto-btn.is-loading,
button.is-loading {
    position:relative;
    cursor:wait!important;
    pointer-events:none;
}
.dto-btn.is-loading > :not(.dto-ui-inline-spinner),
button.is-loading > :not(.dto-ui-inline-spinner) { opacity:.72; }
.dto-ui-inline-spinner {
    width:13px;
    height:13px;
    flex:0 0 auto;
    border:2px solid currentColor;
    border-right-color:transparent;
    border-radius:50%;
    animation:dtoUiSpin .62s linear infinite;
}

.dto-ui-skeleton {
    position:relative;
    overflow:hidden;
    background:#eef2f6!important;
    color:transparent!important;
    border-color:transparent!important;
    user-select:none;
}
.dto-ui-skeleton::after {
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
    animation:dtoUiShimmer 1.25s infinite;
}
@keyframes dtoUiShimmer { 100% { transform:translateX(100%); } }

.dto-ui-soft-refresh { animation:dtoUiSoftRefresh .26s ease both; }
@keyframes dtoUiSoftRefresh { from { opacity:.5; transform:translateY(3px); } to { opacity:1; transform:none; } }

body.dto-is-navigating .dto-app-content { opacity:.72; transition:opacity .18s ease; }

:where(.dto-btn,.dto-icon-button,.dto-profile-trigger,.dto-app-nav-link,.dto-input,.dto-select,.dto-textarea):focus-visible {
    outline:3px solid rgba(33,183,170,.23);
    outline-offset:2px;
}

@media (max-width:980px) {
    .dto-ui-toast-stack { right:15px; bottom:calc(var(--dto-bottom-nav-height) + 12px + env(safe-area-inset-bottom)); }
    .dto-ui-network { top:9px; }
}

@media (max-width:640px) {
    .dto-ui-toast-stack { left:12px; right:12px; width:auto; }
    .dto-ui-confirm { padding:22px 18px; border-radius:18px; }
    .dto-ui-confirm-actions { flex-direction:column-reverse; }
    .dto-ui-confirm-actions .dto-btn { width:100%; }
}

@media (prefers-reduced-motion:reduce) {
    .dto-ui-route-progress span,
    .dto-ui-network,
    .dto-ui-toast,
    .dto-ui-confirm-overlay,
    .dto-ui-loading-overlay,
    .dto-ui-confirm,
    .dto-ui-loading-card,
    body.dto-is-navigating .dto-app-content { transition:none!important; }
    .dto-ui-spinner,.dto-ui-inline-spinner,.dto-ui-skeleton::after { animation-duration:2s; }
    html { scroll-behavior:auto; }
}

/* Entrada ligera de cada vista; no bloquea la interacción. */
body.dto-v2-app .dto-app-content { animation:dtoUiPageEnter .24s ease both; }
@keyframes dtoUiPageEnter { from { opacity:.72; transform:translateY(3px); } to { opacity:1; transform:none; } }
.dto-btn:active,.dto-icon-button:active { transform:translateY(0) scale(.985); }
@media (prefers-reduced-motion:reduce) {
    body.dto-v2-app .dto-app-content { animation:none!important; }
}