/* Gestão de Campanha · sistema visual
   Vidro líquido sobre uma aurora com as cores da campanha.
   --c1, --c2 e --c3 vêm da identidade visual da campanha (tema.js); o resto deriva delas. */

@font-face{font-family:Unbounded;src:url(/static/fonts/unbounded-latin.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:Onest;src:url(/static/fonts/onest-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --c1:#6c3bff; --c2:#ff2d8a; --c3:#18d8f0; --c1-ink:#ffffff;
  --ok:#14c964; --warn:#ff8a1f; --bad:#ff3b5c; --info:#2f8bff;
  --font-d:"Unbounded",system-ui,sans-serif; --font-b:"Onest",system-ui,sans-serif;

  --bg:#f2f0ff; --bg-deep:#e6e1ff; --fg:#15103a; --fg2:#4a4475; --fg3:#7d78a6;
  --glass:rgba(255,255,255,.58); --glass-strong:rgba(255,255,255,.8); --glass-soft:rgba(255,255,255,.34);
  --edge:rgba(255,255,255,.95); --edge-dim:rgba(255,255,255,.55); --hair:rgba(21,16,58,.09);
  --shadow:0 18px 50px -18px color-mix(in srgb,var(--c1) 45%,transparent),0 2px 6px rgba(21,16,58,.06);
  --field:rgba(255,255,255,.7); --field-focus:#fff;
  --aurora-o:.75; --grain-o:.05;
  --r-xl:30px; --r-l:22px; --r-m:16px; --r-s:12px;
  --dock-h:74px; --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0a0720; --bg-deep:#05030f; --fg:#f6f4ff; --fg2:#c3bde6; --fg3:#8a84b3;
  --glass:rgba(255,255,255,.075); --glass-strong:rgba(28,22,66,.82); --glass-soft:rgba(255,255,255,.045);
  --edge:rgba(255,255,255,.28); --edge-dim:rgba(255,255,255,.1); --hair:rgba(255,255,255,.09);
  --shadow:0 24px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.02);
  --field:rgba(255,255,255,.07); --field-focus:rgba(255,255,255,.12);
  --aurora-o:.55; --grain-o:.07; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0a0720; --bg-deep:#05030f; --fg:#f6f4ff; --fg2:#c3bde6; --fg3:#8a84b3;
  --glass:rgba(255,255,255,.075); --glass-strong:rgba(28,22,66,.82); --glass-soft:rgba(255,255,255,.045);
  --edge:rgba(255,255,255,.28); --edge-dim:rgba(255,255,255,.1); --hair:rgba(255,255,255,.09);
  --shadow:0 24px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.02);
  --field:rgba(255,255,255,.07); --field-focus:rgba(255,255,255,.12);
  --aurora-o:.55; --grain-o:.07; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;height:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font-family:var(--font-b);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid color-mix(in srgb,var(--c3) 80%,white);outline-offset:2px;border-radius:10px}
::selection{background:color-mix(in srgb,var(--c2) 40%,transparent)}
h1,h2,h3{font-family:var(--font-d);letter-spacing:-.02em;line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:clamp(26px,4.4vw,40px);font-weight:700}
h2{font-size:clamp(20px,2.6vw,26px);font-weight:650}
h3{font-size:16px;font-weight:600;letter-spacing:-.01em}
p{margin:0}
.muted{color:var(--fg2)}
.faint{color:var(--fg3);font-size:13px}
.num{font-family:var(--font-d);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---------- aurora: o fundo vivo com as cores da campanha ---------- */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:
  radial-gradient(120% 80% at 50% 120%,color-mix(in srgb,var(--c1) 22%,var(--bg)) 0%,var(--bg) 60%)}
.aurora i{position:absolute;border-radius:50%;filter:blur(80px);opacity:var(--aurora-o);will-change:transform;animation:deriva 26s ease-in-out infinite}
.aurora i:nth-child(1){width:62vmax;height:62vmax;left:-22vmax;top:-26vmax;background:var(--c1)}
.aurora i:nth-child(2){width:48vmax;height:48vmax;right:-18vmax;top:4vmax;background:var(--c2);animation-delay:-9s;animation-duration:31s}
.aurora i:nth-child(3){width:44vmax;height:44vmax;left:18vmax;bottom:-30vmax;background:var(--c3);animation-delay:-17s;animation-duration:36s}
.aurora::after{content:"";position:absolute;inset:0;opacity:var(--grain-o);mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes deriva{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(6vmax,4vmax,0) scale(1.12)}66%{transform:translate3d(-4vmax,7vmax,0) scale(.94)}}

/* ---------- vidro líquido ----------
   camadas: desfoque + saturação do fundo, borda com brilho em degradê, reflexo interno no topo
   e um brilho que segue o dedo/mouse (--mx/--my, só onde tiver .reflexo). */
.glass{position:relative;background:var(--glass);border-radius:var(--r-l);
  -webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
  box-shadow:var(--shadow),inset 0 1px 0 var(--edge),inset 0 -1px 0 var(--edge-dim)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(145deg,var(--edge),transparent 38%,transparent 62%,color-mix(in srgb,var(--c2) 45%,var(--edge-dim)));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glass.reflexo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.55;
  background:radial-gradient(420px circle at var(--mx,30%) var(--my,0%),rgba(255,255,255,.22),transparent 45%)}
.glass.forte{background:var(--glass-strong)}
.glass.leve{background:var(--glass-soft)}
@media (prefers-reduced-transparency:reduce){.glass{background:var(--glass-strong);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- estrutura do app ---------- */
.app{display:grid;grid-template-columns:1fr;min-height:100dvh}
.main{min-width:0;padding:max(14px,env(safe-area-inset-top)) 16px calc(var(--dock-h) + var(--safe-b) + 30px)}
.wrap{max-width:1120px;margin:0 auto}
.topo{display:flex;align-items:center;gap:12px;margin:4px 0 18px}
.topo .marca{display:flex;align-items:center;gap:10px;min-width:0}
.topo .marca .logo{width:40px;height:40px;border-radius:13px;flex:none;object-fit:cover;background:linear-gradient(135deg,var(--c1),var(--c2));display:grid;place-items:center;color:var(--c1-ink);font-family:var(--font-d);font-weight:700;font-size:14px;overflow:hidden}
.topo .marca b{font-family:var(--font-d);font-size:14px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topo .marca small{display:block;color:var(--fg3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topo .sp{flex:1}
.titulo{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:6px 0 16px}
.titulo .sp{flex:1}
.titulo p{color:var(--fg2);margin-top:6px;max-width:62ch}

/* dock: a barra de baixo no celular */
.dock{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + var(--safe-b));z-index:40;width:min(560px,calc(100% - 20px));height:var(--dock-h);
  display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:8px;border-radius:26px}
.dock a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:100%;border-radius:19px;text-decoration:none;color:var(--fg2);font-size:11px;font-weight:600;transition:color .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.dock a svg{width:23px;height:23px}
.dock a:active{transform:scale(.9)}
.dock a.on{color:var(--c1-ink)}
.dock a.on::before{content:"";position:absolute;inset:2px;z-index:-1;border-radius:18px;background:linear-gradient(140deg,var(--c1),color-mix(in srgb,var(--c1) 55%,var(--c2)));box-shadow:0 10px 24px -8px var(--c1),inset 0 1px 0 rgba(255,255,255,.45)}
.dock a .badge{position:absolute;top:6px;right:calc(50% - 22px);min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--c2);color:#fff;font-size:10px;display:grid;place-items:center}

/* trilho lateral no computador */
.trilho{display:none}
@media (min-width:980px){
  .app{grid-template-columns:252px 1fr}
  .dock{display:none}
  .main{padding:22px 28px 60px}
  .trilho{display:flex;flex-direction:column;gap:4px;position:sticky;top:14px;height:calc(100dvh - 28px);margin:14px 0 14px 14px;padding:16px 12px;border-radius:28px;overflow:auto}
  .trilho .marca{display:flex;align-items:center;gap:10px;padding:4px 8px 16px}
  .trilho .marca .logo{width:42px;height:42px;border-radius:14px;flex:none;object-fit:cover;background:linear-gradient(135deg,var(--c1),var(--c2));display:grid;place-items:center;color:var(--c1-ink);font-family:var(--font-d);font-weight:700;overflow:hidden}
  .trilho .marca b{display:block;font-family:var(--font-d);font-size:13.5px;font-weight:600;line-height:1.25}
  .trilho .marca small{display:block;color:var(--fg3);font-size:11.5px;margin-top:2px}
  .trilho{scrollbar-width:none}.trilho::-webkit-scrollbar{display:none}
  .trilho .grupo{font-size:11.5px;color:var(--fg3);font-weight:600;padding:14px 12px 4px}
  .trilho a{position:relative;display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:15px;color:var(--fg2);text-decoration:none;font-weight:600;font-size:14px;transition:background .2s,color .2s}
  .trilho a svg{width:20px;height:20px;flex:none}
  .trilho a:hover{background:var(--glass-soft);color:var(--fg)}
  .trilho a.on{color:var(--c1-ink);background:linear-gradient(140deg,var(--c1),color-mix(in srgb,var(--c1) 60%,var(--c2)));box-shadow:0 12px 26px -10px var(--c1),inset 0 1px 0 rgba(255,255,255,.4)}
  .trilho a.breve{opacity:.55}
  .trilho .pe{margin-top:auto;padding-top:12px}
  .topo .marca{display:none}
}
.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- botões ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:15px;border:0;cursor:pointer;
  font-weight:650;font-size:14.5px;text-decoration:none;white-space:nowrap;color:var(--fg);background:var(--glass);
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  box-shadow:inset 0 1px 0 var(--edge),inset 0 0 0 1px var(--hair),0 6px 16px -10px rgba(0,0,0,.35);
  transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .25s,background .25s,filter .2s}
.btn:hover{background:var(--glass-strong)}
.btn:active{transform:scale(.95)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn .ico{width:18px;height:18px}
.btn.p{color:var(--c1-ink);background:linear-gradient(135deg,var(--c1) 0%,color-mix(in srgb,var(--c1) 55%,var(--c2)) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.12),0 14px 30px -12px var(--c1)}
.btn.p:hover{filter:brightness(1.08) saturate(1.1)}
.btn.p::after{content:"";position:absolute;inset:1px 1px 50% 1px;border-radius:14px 14px 40% 40%/14px 14px 12px 12px;background:linear-gradient(rgba(255,255,255,.32),rgba(255,255,255,0));pointer-events:none}
.btn.ok{color:#04210f;background:linear-gradient(135deg,#3ef08a,var(--ok));box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 14px 30px -12px var(--ok)}
.btn.perigo{color:#fff;background:linear-gradient(135deg,#ff6b84,var(--bad))}
.btn.pequeno{min-height:36px;padding:7px 13px;font-size:13.5px;border-radius:12px}
.btn.icone{width:44px;padding:0}
.btn.icone.pequeno{width:36px}
.btn.bloco{width:100%}
.btn.fantasma{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--fg2)}
.btn.fantasma:hover{background:var(--glass-soft);color:var(--fg)}
.btn.carregando{color:transparent!important}
.btn.carregando::before{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-color:var(--c1-ink) transparent var(--c1-ink) transparent;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.acoes{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- formulários ---------- */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 14px}
.form .inteiro{grid-column:1/-1}
@media (max-width:620px){.form{grid-template-columns:1fr}}
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo>label,.campo>.rotulo{font-size:13px;font-weight:600;color:var(--fg2)}
.campo>label .obr{color:var(--c2);margin-left:2px}
.entrada{width:100%;min-height:48px;padding:12px 14px;border-radius:14px;border:1px solid var(--hair);background:var(--field);color:var(--fg);outline:0;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06);transition:border-color .2s,background .2s,box-shadow .2s}
.entrada::placeholder{color:var(--fg3)}
.entrada:focus{background:var(--field-focus);border-color:color-mix(in srgb,var(--c1) 70%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--c1) 20%,transparent)}
.entrada.erro,.campo.erro .entrada{border-color:var(--bad);box-shadow:0 0 0 4px color-mix(in srgb,var(--bad) 18%,transparent)}
select.entrada{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237d78a6' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
textarea.entrada{min-height:96px;resize:vertical}
.dica{font-size:12.5px;color:var(--fg3)}
.msg-erro{font-size:12.5px;color:var(--bad);font-weight:600}
.check{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:16px;background:var(--glass-soft);border:1px solid var(--hair);cursor:pointer}
.check input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--c1)}

/* busca com lista de sugestões (local de votação, cidade) */
.busca{position:relative}
.busca .lista{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);max-height:300px;overflow:auto;padding:6px;border-radius:18px}
.busca .op{display:block;width:100%;text-align:left;border:0;background:transparent;padding:10px 12px;border-radius:12px;cursor:pointer}
.busca .op:hover,.busca .op.foco{background:color-mix(in srgb,var(--c1) 14%,transparent)}
.busca .op b{display:block;font-weight:650}
.busca .op small{color:var(--fg3)}
.busca .vazio{padding:12px;color:var(--fg3);font-size:13.5px}

/* controle segmentado */
.seg{display:inline-flex;padding:4px;border-radius:15px;background:var(--glass-soft);box-shadow:inset 0 0 0 1px var(--hair);gap:2px;max-width:100%;overflow:auto}
.seg button{border:0;background:transparent;padding:8px 14px;border-radius:11px;font-weight:600;font-size:13.5px;color:var(--fg2);cursor:pointer;white-space:nowrap}
.seg button.on{background:var(--glass-strong);color:var(--fg);box-shadow:0 4px 12px -6px rgba(0,0,0,.4),inset 0 1px 0 var(--edge)}

/* ---------- blocos ---------- */
.painel{padding:20px}
.painel+.painel{margin-top:14px}
.grade{display:grid;gap:14px}
.grade.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grade.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grade.g4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.cab{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cab .sp{flex:1}

.indicador{padding:16px 18px}
.indicador .v{font-family:var(--font-d);font-size:clamp(24px,3.4vw,32px);font-weight:700;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.indicador .r{color:var(--fg2);font-size:13px;margin-top:4px}
.indicador .t{font-size:12.5px;font-weight:650;margin-top:8px;color:var(--ok)}

.etq{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:99px;font-size:12.5px;font-weight:650;white-space:nowrap;
  background:color-mix(in srgb,var(--cor,var(--c1)) 16%,transparent);color:color-mix(in srgb,var(--cor,var(--c1)) 75%,var(--fg));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cor,var(--c1)) 30%,transparent)}
.etq i{width:8px;height:8px;border-radius:50%;background:var(--cor,var(--c1))}
.etq button{border:0;background:none;padding:0;margin-left:2px;cursor:pointer;color:inherit;font-size:15px;line-height:1}
.etqs{display:flex;flex-wrap:wrap;gap:6px}

/* listas de pessoas e afins */
.lista-l{display:flex;flex-direction:column}
.linha{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;text-decoration:none;color:inherit;cursor:pointer;transition:background .15s}
.linha:hover{background:var(--glass-soft)}
.linha+.linha{border-top:1px solid var(--hair)}
.linha .av{width:42px;height:42px;border-radius:14px;flex:none;display:grid;place-items:center;font-family:var(--font-d);font-weight:700;font-size:14px;color:#fff;
  background:linear-gradient(135deg,hsl(var(--h,260) 85% 58%),hsl(calc(var(--h,260) + 50) 90% 60%));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.linha .meio{flex:1;min-width:0}
.linha .meio b{display:block;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linha .meio small{display:block;color:var(--fg3);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linha .fim{display:flex;gap:6px;align-items:center;flex:none}

.vazio-tela{padding:42px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.vazio-tela img{width:110px;filter:drop-shadow(0 16px 24px color-mix(in srgb,var(--c1) 40%,transparent))}
.vazio-tela p{max-width:46ch;color:var(--fg2)}

/* ---------- urna: o número do candidato como no teclado da urna ---------- */
.urna{display:flex;gap:clamp(6px,1.4vw,10px)}
.urna .tecla{position:relative;width:clamp(46px,9vw,74px);aspect-ratio:3/4;border-radius:clamp(12px,2vw,18px);display:grid;place-items:center;
  font-family:var(--font-d);font-weight:700;font-size:clamp(28px,6vw,48px);letter-spacing:-.04em;color:var(--fg);
  background:linear-gradient(170deg,var(--glass-strong),var(--glass));box-shadow:inset 0 1px 0 var(--edge),inset 0 -3px 0 color-mix(in srgb,var(--c1) 35%,transparent),0 14px 24px -14px var(--c1);
  -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%)}
.urna .tecla.digitando{animation:tecla .42s cubic-bezier(.3,1.6,.5,1) both}
@keyframes tecla{0%{transform:translateY(-10px) scale(.7);opacity:0}100%{transform:none;opacity:1}}
.confirma{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:10px;font-weight:800;font-size:12px;letter-spacing:.04em;color:#04210f;background:linear-gradient(135deg,#3ef08a,var(--ok));box-shadow:0 10px 24px -10px var(--ok)}
.confirma.pulsa{animation:pulsa 1.1s ease-out 1}
@keyframes pulsa{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 70%,transparent)}100%{box-shadow:0 0 0 18px transparent}}

/* ---------- janelas: folha que sobe no celular, caixa no centro no computador ---------- */
.veu{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:color-mix(in srgb,var(--bg-deep) 40%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:aparece .2s ease}
.folha{width:100%;max-height:92dvh;overflow:auto;border-radius:30px 30px 0 0;padding:10px 18px calc(20px + var(--safe-b));animation:sobe .38s cubic-bezier(.2,1.2,.4,1)}
.folha .puxador{width:42px;height:5px;border-radius:9px;background:var(--hair);margin:4px auto 12px}
.folha .cab h2{font-size:20px}
.folha .rodape{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px;position:sticky;bottom:calc(-20px - var(--safe-b));padding:12px 0 4px;background:linear-gradient(transparent,var(--glass-strong) 35%)}
@media (min-width:720px){.veu{align-items:center;padding:20px}.folha{width:min(720px,100%);border-radius:28px;padding:20px 24px 22px;animation:surge .3s cubic-bezier(.2,1.2,.4,1)}.folha .puxador{display:none}.folha.larga{width:min(980px,100%)}}
@keyframes aparece{from{opacity:0}}
@keyframes sobe{from{transform:translateY(40%);opacity:.4}}
@keyframes surge{from{transform:translateY(16px) scale(.97);opacity:0}}

/* avisos rápidos */
.avisos{position:fixed;z-index:80;left:50%;transform:translateX(-50%);top:max(12px,env(safe-area-inset-top));display:flex;flex-direction:column;gap:8px;width:min(440px,calc(100% - 24px));pointer-events:none}
.aviso{pointer-events:auto;padding:12px 16px;border-radius:18px;font-weight:600;display:flex;gap:10px;align-items:center;animation:surge .3s cubic-bezier(.2,1.2,.4,1)}
.aviso::first-letter{text-transform:uppercase}
.aviso .ponto{width:10px;height:10px;border-radius:50%;flex:none;background:var(--ok);box-shadow:0 0 12px var(--ok)}
.aviso.erro .ponto{background:var(--bad);box-shadow:0 0 12px var(--bad)}

/* carregando */
.esqueleto{border-radius:14px;background:linear-gradient(100deg,var(--glass-soft) 30%,var(--glass) 50%,var(--glass-soft) 70%);background-size:300% 100%;animation:brilho 1.4s linear infinite;min-height:18px}
@keyframes brilho{to{background-position:-150% 0}}

/* tabela simples (computador) */
.tabela{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.tabela th{text-align:left;font-size:12.5px;color:var(--fg3);font-weight:600;padding:8px 12px;border-bottom:1px solid var(--hair)}
.tabela td{padding:11px 12px;border-bottom:1px solid var(--hair);vertical-align:middle}
.tabela tr:last-child td{border-bottom:0}
.tabela .d{text-align:right;font-variant-numeric:tabular-nums}
.rolagem{overflow:auto;-webkit-overflow-scrolling:touch}

/* barra de progresso líquida */
.progresso{height:12px;border-radius:99px;background:var(--glass-soft);box-shadow:inset 0 0 0 1px var(--hair);overflow:hidden}
.progresso i{display:block;height:100%;width:var(--p,0%);border-radius:inherit;background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3));background-size:200% 100%;animation:onda 3s linear infinite;transition:width .5s ease}
@keyframes onda{to{background-position:-200% 0}}

/* ---------- assistente (o robô da Norama no canto) ---------- */
.robo{position:fixed;z-index:45;right:14px;bottom:calc(var(--dock-h) + var(--safe-b) + 22px);width:68px;height:68px;border:0;padding:0;background:none;cursor:pointer;
  filter:drop-shadow(0 12px 18px color-mix(in srgb,var(--c1) 45%,transparent));animation:flutua 5s ease-in-out infinite;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.robo img{width:100%;height:100%;object-fit:contain}
.robo:hover{transform:scale(1.08) rotate(-4deg)}
.robo .bolinha{position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:var(--c2);box-shadow:0 0 0 3px var(--bg),0 0 12px var(--c2)}
@media (min-width:980px){.robo{bottom:22px;right:22px;width:78px;height:78px}}
@keyframes flutua{0%,100%{translate:0 0}50%{translate:0 -7px}}
.balao{position:fixed;z-index:46;right:14px;bottom:calc(var(--dock-h) + var(--safe-b) + 98px);width:min(380px,calc(100% - 28px));max-height:min(560px,calc(100dvh - 200px));display:flex;flex-direction:column;border-radius:26px;animation:surge .3s cubic-bezier(.2,1.2,.4,1)}
@media (min-width:980px){.balao{bottom:112px;right:22px}}
.balao .cab{padding:14px 16px 0;margin:0}
.balao .conversa{flex:1;overflow:auto;padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.balao .fala{max-width:88%;padding:10px 13px;border-radius:16px 16px 16px 6px;background:var(--glass-strong);box-shadow:inset 0 1px 0 var(--edge);font-size:14px}
.balao .fala.eu{align-self:flex-end;border-radius:16px 16px 6px 16px;color:var(--c1-ink);background:linear-gradient(135deg,var(--c1),color-mix(in srgb,var(--c1) 60%,var(--c2)))}
.balao .sugestoes{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.balao .sugestoes button{border:0;cursor:pointer;padding:7px 11px;border-radius:12px;font-size:13px;font-weight:600;background:color-mix(in srgb,var(--c1) 14%,transparent);color:var(--fg)}
.balao form{display:flex;gap:8px;padding:10px 12px 12px;border-top:1px solid var(--hair)}

/* tour guiado: recorte que ilumina uma parte da tela */
.tour-alvo{position:fixed;z-index:70;border-radius:18px;pointer-events:none;box-shadow:0 0 0 9999px color-mix(in srgb,var(--bg-deep) 62%,transparent),0 0 0 3px var(--c3),0 0 30px 6px color-mix(in srgb,var(--c3) 60%,transparent);transition:all .4s cubic-bezier(.2,1,.3,1)}
.tour-caixa{position:fixed;z-index:71;width:min(340px,calc(100% - 24px));padding:16px 16px 14px;border-radius:22px;display:flex;gap:12px;align-items:flex-start;transition:top .4s cubic-bezier(.2,1,.3,1),left .4s cubic-bezier(.2,1,.3,1)}
.tour-caixa img{width:54px;flex:none}
.tour-caixa p{font-size:14px;margin:4px 0 10px}

/* ---------- telas sem login (entrar, começar, link de cadastro) ---------- */
.porta{min-height:100dvh;display:grid;place-items:center;padding:24px 16px calc(24px + var(--safe-b))}
.porta .caixa{width:min(460px,100%);padding:26px 22px}
.porta .caixa.larga{width:min(640px,100%)}
.porta .logo-n{height:22px;margin:0 auto 18px;opacity:.9}
.passos{display:flex;gap:6px;margin:0 0 18px}
.passos i{flex:1;height:5px;border-radius:9px;background:var(--glass-soft);box-shadow:inset 0 0 0 1px var(--hair)}
.passos i.on{background:linear-gradient(90deg,var(--c1),var(--c2))}
.escolhas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.escolha{position:relative;display:flex;flex-direction:column;gap:4px;text-align:left;padding:16px;border-radius:18px;border:0;cursor:pointer;background:var(--glass-soft);box-shadow:inset 0 0 0 1px var(--hair);transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.escolha:active{transform:scale(.97)}
.escolha b{font-family:var(--font-d);font-size:16px;font-weight:650}
.escolha small{color:var(--fg3)}
.escolha.on{background:color-mix(in srgb,var(--c1) 16%,var(--glass));box-shadow:inset 0 0 0 2px var(--c1),0 12px 26px -14px var(--c1)}

@media (max-width:979px){.so-pc{display:none!important}}
@media (min-width:980px){.so-cel{display:none!important}}

@media (prefers-reduced-motion:reduce){
  .aurora i,.robo,.progresso i{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* faixas que andam para o lado: o deslizar não escapa para a página, e a borda esmaece quando há mais opções */
.filtros,.seg,.rolagem,[data-rola-x]{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.filtros,.seg{-webkit-user-select:none;user-select:none}
.arrastavel:is(.filtros,.seg,[data-rola-x]){cursor:grab}
.arrastando{cursor:grabbing!important;scroll-behavior:auto}
.arrastando *{pointer-events:none}
.mais-dir{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 52px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 52px),transparent)}
.mais-esq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 52px);mask-image:linear-gradient(90deg,transparent,#000 52px)}
.mais-esq.mais-dir{-webkit-mask-image:linear-gradient(90deg,transparent,#000 52px,#000 calc(100% - 52px),transparent);mask-image:linear-gradient(90deg,transparent,#000 52px,#000 calc(100% - 52px),transparent)}
/* computador: a tela é larga, então o sistema usa a largura e os filtros quebram linha em vez de esconder opções */
@media (min-width:980px){.wrap{max-width:1680px}.grade.g2{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}}
@media (min-width:1400px){.folha.larga{width:min(1040px,100%)}}