/* Sideral Host UI: barra de progresso no topo + toasts (notificações). Usado no site, no ADM e na área do cliente. */
:root { --shui-cor: #1d4ed8; }

#shui-progresso { position: fixed; z-index: 100000; left: 0; top: 0; width: 100%; height: 3px; pointer-events: none; opacity: 0; transition: opacity .25s; }
#shui-progresso.ativo { opacity: 1; }
#shui-progresso i { display: block; height: 100%; width: 0; background: var(--shui-cor); box-shadow: 0 0 10px var(--shui-cor), 0 0 4px var(--shui-cor); transition: width .3s ease; position: relative; }
#shui-progresso i::after { content: ""; position: absolute; right: 0; top: 0; width: 90px; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7)); opacity: .6; }

#shui-toasts { position: fixed; z-index: 99999; right: 16px; top: 16px; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
.shui-toast { pointer-events: auto; position: relative; display: grid; grid-template-columns: 28px 1fr 22px; gap: 10px; align-items: start; padding: 14px 12px 16px 14px; background: #fff; color: #0f172a; border: 1px solid #e2e8f0; border-left: 4px solid var(--c); border-radius: 12px; box-shadow: 0 16px 36px -14px rgba(15,23,42,.35); overflow: hidden; transform: translateX(24px); opacity: 0; transition: transform .25s ease, opacity .25s ease; cursor: default; }
.shui-toast.entra { transform: none; opacity: 1; }
.shui-toast.sai { transform: translateX(24px); opacity: 0; }
.shui-toast--ok { --c: #16a34a; } .shui-toast--erro { --c: #dc2626; } .shui-toast--aviso { --c: #d97706; } .shui-toast--info { --c: #2563eb; }
.shui-toast__ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: #fff; font-size: 14px; font-weight: 700; }
.shui-toast__tit { font-weight: 700; margin: 0 0 1px; }
.shui-toast__msg { margin: 0; color: #475569; word-break: break-word; }
.shui-toast__x { width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: #64748b; font-size: 18px; line-height: 1; cursor: pointer; transition: background-color .15s, color .15s; }
.shui-toast__x:hover { background: var(--c); color: #fff; }
.shui-toast__barra { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--c); opacity: .55; transform-origin: left; animation: shui-barra var(--t) linear forwards; }
.shui-toast:hover .shui-toast__barra { animation-play-state: paused; }
@keyframes shui-barra { to { transform: scaleX(0); } }
@media (max-width: 560px) { #shui-toasts { right: 12px; left: 12px; top: 12px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .shui-toast, #shui-progresso i { transition: none; } }