/* =============== avisos do Painel, estados (carregando / erro / vazio) e seletor de estados do preview =============== */

/* ---------- avisos no topo do Painel ---------- */
.notices{display:flex;flex-direction:column;gap:10px}
.notices:empty{display:none}
.banner{display:flex;align-items:flex-start;gap:14px;padding:14px 18px;border:1px solid var(--bn-line,rgba(245,158,11,.35));border-radius:14px;
  background:linear-gradient(180deg,var(--bn-a,rgba(245,158,11,.10)),var(--bn-b,rgba(245,158,11,.04)));animation:bn-in .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes bn-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.banner .bi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;color:var(--bn-ic,#fbbf24);background:var(--bn-chip,rgba(245,158,11,.14));border:1px solid var(--bn-line,rgba(245,158,11,.35))}
.banner .bx{flex:1;min-width:0}
.banner .bt2{font-size:14px;font-weight:700;line-height:20px;color:var(--bn-t,#fcd34d)}
.banner .bd{margin-top:2px;font-size:13px;line-height:19px;color:var(--t300)}
.banner .bd.list{display:flex;flex-direction:column;gap:2px;margin-top:8px;font-variant-numeric:tabular-nums;color:var(--t200)}
.banner .btn{align-self:center;flex:none}
.banner.err{--bn-line:rgba(244,63,94,.38);--bn-a:rgba(244,63,94,.10);--bn-b:rgba(244,63,94,.03);--bn-ic:#fb7185;--bn-chip:rgba(244,63,94,.14);--bn-t:#fda4af}
.banner.info{--bn-line:rgba(56,189,248,.32);--bn-a:rgba(56,189,248,.09);--bn-b:rgba(56,189,248,.03);--bn-ic:#38bdf8;--bn-chip:rgba(56,189,248,.14);--bn-t:#7dd3fc}

/* ---------- estados: a tela real some e entra a camada de estado ---------- */
body[data-estado] .view{display:none!important}
#state-view{display:flex;flex-direction:column;gap:20px}
#state-view[hidden]{display:none}
@keyframes shimmer{to{transform:translateX(100%)}}
@keyframes spin{to{transform:rotate(360deg)}}
.sbox{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:72px 24px;border:1px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.sbox .sic{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;margin-bottom:10px;color:#60a5fa;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.22)}
.sbox.bad .sic{color:#fb7185;background:rgba(244,63,94,.1);border-color:rgba(244,63,94,.3)}
.sbox h2{font-size:20px;font-weight:700;letter-spacing:-.3px;color:#fff}
.sbox p{max-width:460px;font-size:14px;line-height:21px;color:var(--t400)}
.sbox .code{margin-top:4px;font-size:12px;color:var(--t500);font-variant-numeric:tabular-nums}
.sbox .acts{display:flex;gap:10px;margin-top:16px}

/* ---------- seletor de estados (só com ?dev) ---------- */
#estado-bar{position:fixed;left:14px;bottom:14px;z-index:120;display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:9999px;background:rgba(10,12,16,.92);border:1px solid var(--line);backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.5);font-size:12px;color:var(--t400)}
#estado-bar b{font-weight:600;padding:0 6px 0 8px;color:var(--t300)}
#estado-bar button{padding:5px 11px;border-radius:9999px;font-size:12px;font-weight:600;color:var(--t400);transition:.15s}
#estado-bar button:hover{color:#fff;background:rgba(255,255,255,.06)}
#estado-bar button.on{color:#fff;background:var(--grad)}
#estado-bar i{width:1px;height:16px;background:var(--line);margin:0 4px}

/* ---------- SPA: transição entre login e app ---------- */
body.booting .page,body.booting .bgvideo{opacity:0}
body:not(.booting) .page,body:not(.booting) .bgvideo{transition:opacity .5s ease}
#pg-fade{position:fixed;inset:0;z-index:9999;background:#050608;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .45s ease}
#pg-fade.on{opacity:1;visibility:visible}
/* o app fica escondido enquanto a tela de login está aberta */
body.is-login .page,body.is-login .bgvideo{display:none}
body.is-login{overflow:hidden}

/* "x" para fechar o aviso */
.banner .bn-x{flex:none;align-self:flex-start;width:32px;height:32px;margin:-4px -8px 0 0;border-radius:9px;display:grid;place-items:center;color:var(--t200,#cbd5e1);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:color .15s,background .15s}
.banner .bn-x:hover{color:#fff;background:rgba(255,255,255,.16)}
.banner .bn-x:focus-visible{outline:2px solid rgba(56,189,248,.6);outline-offset:1px}
.banner .btn{align-self:center}

/* carregando: logo animada em loop + texto */
.ld-wrap{min-height:62vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.ld-txt{color:var(--t400);font-size:14px;letter-spacing:.02em}
.ld-dots i{font-style:normal;animation:ld-dot 1.2s infinite both}
.ld-dots i:nth-child(2){animation-delay:.2s}.ld-dots i:nth-child(3){animation-delay:.4s}
@keyframes ld-dot{0%,60%,100%{opacity:.2}30%{opacity:1}}
.nlogo.ld .nl-s{animation:ld-draw 2.6s infinite}
.nlogo.ld{animation:ld-cycle 2.6s infinite}
@keyframes ld-draw{0%{stroke-dashoffset:100;animation-timing-function:cubic-bezier(.65,0,.35,1)}58%,100%{stroke-dashoffset:0}}
@keyframes ld-cycle{
  0%,58%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 0 rgba(56,189,248,0))}
  66%{opacity:1;transform:scale(1.08);filter:drop-shadow(0 0 12px rgba(56,189,248,.65))}
  76%,90%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 0 rgba(56,189,248,0))}
  100%{opacity:0;transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){.nlogo.ld .nl-s,.nlogo.ld,.ld-dots i{animation:none}}

/* tela de carregando ao abrir/recarregar a página (F5): cobre tudo até os dados chegarem */
#boot-loader{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:var(--screen,#0b0d12);transition:opacity .4s ease,visibility .4s}
body:not(.booting) #boot-loader{opacity:0;visibility:hidden;pointer-events:none}
/* ao sair: congela a logo (não reinicia o ciclo) e só desaparece em fade */
body:not(.booting) #boot-loader .nlogo,body:not(.booting) #boot-loader .nl-s{animation-play-state:paused}