/* Lastro: visual pedido pelo Vini (modelo de 03/11/2026): escuro, luz roxa difusa, painéis de vidro, datas grandes.
   Só aparência: sobrescreve /estilo.css sem mudar texto, rota ou dado. Peça central: a conta (anterior + entraram − saíram = agora). */

@font-face{font-family:"Montserrat";src:url("/static/fontes/montserrat.woff2") format("woff2");font-weight:500 800;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/static/fontes/instrument-sans.woff2") format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}

:root{
  color-scheme:dark;
  --chao:#0b0a1a;--fundo:#0b0a1a;
  --vidro:rgba(255,255,255,.045);--vidro-2:rgba(255,255,255,.075);--vidro-solido:#16142c;
  --borda:rgba(255,255,255,.09);--borda-2:rgba(255,255,255,.16);
  --brilho:inset 0 1px 0 rgba(255,255,255,.07);
  --forte:#fff;--veu:rgba(255,255,255,.06);--fosso:rgba(0,0,0,.2);
  --orbe-1:rgba(124,92,255,.38);--orbe-2:rgba(92,60,230,.22);--orbe-3:rgba(124,92,255,.20);--topo:rgba(20,18,42,.62);--lateral:rgba(22,19,46,.55);
  --tinta:#f3f1ff;--cinza:#aaa6cc;--apagado:#7a76a0;
  --acento:#7c5cff;--acento-forte:#6a45ff;--acento-texto:#ab97ff;--acento-fundo:rgba(124,92,255,.16);
  --ok:#4fd69c;--atencao:#fbbf5a;--muda:#ff9f5a;--alerta:#ff6b86;
  --texto:var(--tinta);--fraco:var(--cinza);--linha:var(--borda);--caixa:var(--vidro);--suave:var(--vidro-2);
  --verde:var(--ok);--amarelo:var(--atencao);--laranja:var(--muda);--vermelho:var(--alerta);--marca:var(--acento);
  --r:20px;--r-m:14px;--r-p:10px;
  --ease:cubic-bezier(.22,1,.36,1);
  --exibe:"Montserrat",system-ui,sans-serif;
  --corpo:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}

html{background:var(--chao);scrollbar-color:var(--borda-2) var(--chao)}
body{
  position:relative;min-height:100vh;min-height:100dvh;overflow-x:hidden;
  background:var(--chao);color:var(--tinta);font:400 15px/1.55 var(--corpo);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* luz roxa difusa, parada, atrás de tudo */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(42vw 38vw at 8% -6%,var(--orbe-1),transparent 70%),
    radial-gradient(36vw 30vw at 96% 18%,var(--orbe-2),transparent 70%),
    radial-gradient(50vw 40vw at 70% 110%,var(--orbe-3),transparent 70%);
}
#rastro{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
header,main{position:relative;z-index:1}

::selection{background:rgba(124,92,255,.5);color:#fff}
input,select,textarea{caret-color:var(--acento-texto)}
:focus-visible{outline:2px solid var(--acento-texto);outline-offset:3px;border-radius:8px}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--borda-2);border-radius:10px;border:2px solid var(--chao)}

a{color:var(--acento-texto);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--acento)}
b,strong{font-weight:600}
.total b,.cartao b,.faixa b,.filtro b,h2 b,.prazo b,.tabela td,.campos td,.conta,.sub{font-variant-numeric:tabular-nums}

/* ---------- topo de vidro ---------- */
header{
  position:sticky;top:14px;z-index:5;max-width:1080px;margin:14px max(16px,calc((100% - 1080px) / 2)) 0;
  padding:8px 10px 8px 12px;gap:6px 22px;min-height:58px;
  background:var(--topo);border:1px solid var(--borda);border-radius:18px;box-shadow:var(--brilho),0 20px 40px -24px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
}
.marca{display:inline-flex;align-items:center;gap:11px;font:700 18px/1 var(--exibe);letter-spacing:-.015em;color:var(--forte)}
.marca::before{ /* ícone do app: quadrado roxo com o rastro de três pontos */
  content:"";width:34px;height:34px;flex:none;border-radius:11px;
  background:
    radial-gradient(circle at 70% 50%,#fff 2.4px,transparent 3px),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.62) 2.2px,transparent 2.8px),
    radial-gradient(circle at 30% 50%,rgba(255,255,255,.32) 2px,transparent 2.6px),
    linear-gradient(145deg,#8f74ff,#5b36f2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 20px -6px rgba(124,92,255,.7);
}
.marca:hover{color:var(--forte)}
nav{gap:2px}
nav a{
  padding:8px 14px;border:0;border-radius:999px;background:none;color:var(--cinza);font:500 14px/1.2 var(--corpo);
  transition:color .25s var(--ease),background-color .25s var(--ease);
}
nav a:hover{color:var(--forte);background:var(--veu)}
nav a.ativo{color:#fff;font-weight:600;background:var(--acento);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 22px -8px rgba(124,92,255,.9)}
nav form{display:flex;align-items:center}
button.link{height:auto;margin:0;padding:8px 12px;border:0;border-radius:999px;background:none;box-shadow:none;color:var(--cinza);font:500 13.5px/1.2 var(--corpo)}
button.link:hover{color:var(--forte);background:var(--veu)}

main{max-width:1080px;padding:38px 16px 80px}
@media (min-width:1112px){main{padding-left:0;padding-right:0}}

/* ---------- títulos ---------- */
h1{font:600 clamp(26px,3.3vw,38px)/1.12 var(--exibe);letter-spacing:-.03em;margin:0 0 8px;text-wrap:balance;color:var(--forte)}
h2{font:600 16px/1.3 var(--exibe);letter-spacing:-.01em;margin:0 0 12px}
h2 b{margin-left:6px;color:var(--acento-texto);font-weight:600}
.resumo{margin:0 0 26px;font-size:16px}
.resumo a,.resumo a:first-child{display:inline-flex;align-items:baseline;gap:9px;color:var(--cinza);text-decoration:none}
.resumo a::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px var(--ok);transform:translateY(-1px)}
.resumo a:hover{color:var(--tinta)}

/* ---------- vidro ---------- */
.caixa,.total{background:var(--vidro);border:1px solid var(--borda);border-radius:var(--r);box-shadow:var(--brilho)}
.caixa{padding:20px 22px;margin:16px 0}

/* ---------- a conta: anterior + entraram − saíram = agora, em cartões ---------- */
.total{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:14px;margin:0 0 26px}
.placar,.cartoes{display:contents}
.placar i{display:none}
.total>*{order:10;grid-column:1/-1}
.placar>span,.cartao{
  order:1;position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:12px;min-width:0;min-height:136px;
  margin:0;padding:18px 20px;border:1px solid var(--borda);border-radius:var(--r-m);
  background:var(--vidro);box-shadow:var(--brilho);color:var(--cinza);font:500 14px/1.2 var(--corpo);text-decoration:none;
}
.cartao{flex-direction:column-reverse;justify-content:flex-end;transition:transform .35s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease)}
.cartao:hover{transform:translateY(-3px);background:var(--vidro-2);border-color:var(--borda-2)}
.cartao.verde{order:2}.cartao.cinza{order:3}.placar>.agora{order:4}
.placar b,.cartao b{display:block;margin-top:auto;font:600 clamp(32px,4.2vw,52px)/1 var(--exibe);letter-spacing:-.035em;color:var(--forte)}
.cartao span{display:block;margin:0;font:500 14px/1.2 var(--corpo);color:var(--cinza)}
.cartao.verde b{color:var(--ok)}
/* o resultado, em destaque como no modelo */
.placar>.agora{
  color:rgba(255,255,255,.85);font-weight:600;border-color:rgba(255,255,255,.18);
  background:linear-gradient(150deg,#8b6dff 0%,#6a45ff 55%,#5532e6 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 24px 50px -20px rgba(124,92,255,.85);
}
.placar>.agora b{color:#fff;font-size:clamp(32px,4.2vw,52px)}
.cartao.verde::before,.cartao.cinza::before,.placar>.agora::before{
  position:absolute;left:-20px;top:50%;margin-top:-13px;z-index:2;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--vidro-solido);border:1px solid var(--borda-2);color:var(--tinta);font:500 15px/1 var(--corpo);
}
.cartao.verde::before{content:"+"}.cartao.cinza::before{content:"−"}.placar>.agora::before{content:"=";background:#2a1f6b;border-color:rgba(171,151,255,.6)}
/* o que está dentro do agora */
.cartao.laranja,.cartao.azul{
  order:5;grid-column:span 2;min-height:0;flex-direction:row-reverse;justify-content:flex-end;align-items:baseline;gap:10px;padding:14px 20px;
}
.cartao.azul{order:6}
.cartao.laranja b,.cartao.azul b{margin:0;font-size:22px;letter-spacing:-.02em}
.cartao.laranja b{color:var(--muda)}.cartao.azul b{color:var(--forte)}
.cartao.verde,.cartao.laranja,.cartao.azul,.cartao.cinza{border-top-color:var(--borda)}

.faixa{order:8;margin:0;padding:4px 6px;gap:6px 26px;border:0;background:none}
.faixa a{display:flex;align-items:baseline;gap:7px;padding:8px 0;color:var(--cinza);font-size:14px;text-decoration:none}
.faixa a:hover{color:var(--tinta)}
.faixa b{font:600 17px/1 var(--exibe);color:var(--forte)}
.total>.nota,.total>.conta,.total>.aviso,.total>.erro{margin:0 6px;font-size:13.5px}
.total>.explica{margin:2px 6px 4px}
.caixa .nota,.caixa .aviso,.caixa .conta{font-size:13.5px}
.nota,.conta,.vazio{color:var(--cinza)}
.conta.ok{color:var(--ok);font-weight:500}
.aviso{color:var(--atencao)}
.erro{color:var(--alerta);font-weight:600}

details>summary{list-style:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
summary::-webkit-details-marker{display:none}
details>summary::before{content:"";width:5px;height:5px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .25s var(--ease)}
details[open]>summary::before{transform:rotate(45deg) translate(-1px,-1px)}
.explica summary{color:var(--cinza);font-weight:500}.explica summary:hover{color:var(--tinta)}

.dobra{padding:0;overflow:hidden}
.dobra>summary{display:flex;width:100%;padding:17px 22px;color:var(--tinta);font:600 15px/1.3 var(--exibe)}
.dobra>summary:hover{background:var(--veu)}
.dobra[open]>summary{margin:0;border-bottom:1px solid var(--borda)}
.dobra>:not(summary){margin-left:22px;margin-right:22px}
.dobra>.busca{margin-top:18px}
.dobra>.rola,.dobra>.vazio{margin-bottom:20px}
.dobra>.rola:first-of-type{margin-top:18px}

/* ---------- filtros e busca ---------- */
.filtros{gap:8px;margin:0 0 14px}
.filtro{
  display:inline-flex;align-items:center;gap:8px;padding:8px 9px 8px 15px;border:1px solid var(--borda);border-radius:999px;
  background:var(--vidro);color:var(--cinza);font:500 13.5px/1.2 var(--corpo);
  transition:color .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease);
}
.filtro b{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 7px;border-radius:999px;background:var(--veu);color:var(--tinta);font-size:12px;font-weight:600}
.filtro:hover{color:var(--forte);border-color:var(--borda-2)}
.filtro.ativo{color:#fff;font-weight:600;border-color:transparent;background:var(--acento);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 22px -10px rgba(124,92,255,.9)}
.filtro.ativo b{background:rgba(255,255,255,.22);color:#fff}

label{font:500 13px/1.3 var(--corpo);color:var(--cinza);margin:12px 0}
input,select{
  height:46px;padding:0 16px;margin-top:6px;border:1px solid var(--borda);border-radius:var(--r-m);
  background:rgba(255,255,255,.04);color:var(--tinta);font:400 15px/1 var(--corpo);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease);
}
select{appearance:none;-webkit-appearance:none;padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--cinza) 50%),linear-gradient(135deg,var(--cinza) 50%,transparent 50%);
  background-position:calc(100% - 20px) 20px,calc(100% - 15px) 20px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select option{background:var(--vidro-solido);color:var(--tinta)}
input::placeholder{color:var(--apagado)}
input:hover,select:hover{border-color:var(--borda-2)}
input:focus,select:focus{outline:0;border-color:var(--acento);box-shadow:0 0 0 4px rgba(124,92,255,.22);background-color:var(--vidro-2)}
.busca{gap:10px;margin:0 0 16px}
.busca input[name=q]{min-width:180px}

button{
  height:46px;padding:0 24px;margin-top:12px;border:0;border-radius:999px;background:var(--acento);color:#fff;
  font:600 14.5px/1 var(--corpo);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 26px -10px rgba(124,92,255,.95);
  transition:background-color .2s var(--ease),transform .2s var(--ease),box-shadow .25s var(--ease);
}
button:hover{background:var(--acento-forte);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 14px 32px -10px rgba(124,92,255,1)}
button:active{transform:scale(.98)}
button.leve{height:36px;padding:0 16px;margin:0;border:1px solid var(--borda-2);background:var(--veu);color:var(--forte);font-size:13.5px;font-weight:500;box-shadow:none}
button.leve:hover{background:var(--acento);border-color:transparent;box-shadow:0 8px 20px -10px rgba(124,92,255,.9)}
button.perigo{height:40px;margin:0;border:1px solid rgba(255,107,134,.5);background:rgba(255,107,134,.08);color:var(--alerta);box-shadow:none}
button.perigo:hover{background:rgba(255,107,134,.16)}

/* ---------- lista: cartões com a data grande ---------- */
.lista{margin:0 0 12px;padding:0;display:grid;gap:10px}
.linha{
  grid-template-columns:96px minmax(0,1fr) auto;gap:0 20px;align-items:center;
  margin:0;padding:12px 16px 12px 12px;border:1px solid var(--borda);border-left:1px solid var(--borda);border-radius:var(--r);
  background:var(--vidro);box-shadow:var(--brilho);transition:background-color .25s var(--ease),border-color .25s var(--ease),transform .35s var(--ease);
}
.linha:hover{background:var(--vidro-2);border-color:var(--borda-2)}
.linha.vermelho,.linha.amarelo{border-left-color:var(--borda)}
.prazo{
  align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:12px 12px;
  border-radius:var(--r-m);background:var(--veu);border:1px solid var(--borda);color:var(--tinta);
}
.prazo b{font:600 22px/1 var(--exibe);letter-spacing:-.03em;color:var(--forte)}
.prazo span{display:block;font:500 11.5px/1.25 var(--corpo);color:var(--cinza)}
/* vencido ou vence hoje: o cartão da data em destaque */
.linha.vermelho .prazo{border-color:rgba(255,255,255,.18);background:linear-gradient(150deg,#ff7d96,#e0476a);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 30px -16px rgba(255,107,134,.9)}
.linha.vermelho .prazo b,.linha.vermelho .prazo span{color:#fff}
.linha.amarelo .prazo{border-color:rgba(251,191,90,.35);background:rgba(251,191,90,.10)}
.linha.amarelo .prazo b{color:var(--atencao)}.linha.amarelo .prazo span{color:var(--atencao)}
.meio>a strong{font:600 16px/1.35 var(--corpo);color:var(--forte)}
.meio>a:hover strong{color:var(--acento-texto)}
.sub{margin-top:3px;font-size:13.5px;color:var(--cinza)}
.etq{display:inline-flex;align-items:center;height:22px;padding:0 10px;margin:0 0 0 8px;border:0;border-radius:999px;
  font:600 11.5px/1 var(--corpo);color:var(--acento-texto);background:var(--acento-fundo);vertical-align:2px;white-space:nowrap}
.meio details{margin:4px 0 0}
.meio summary{font:500 13px/1.3 var(--corpo);color:var(--apagado)}
.meio summary:hover{color:var(--cinza)}
.meio details p{color:var(--cinza)}
.meio details[open]{padding:10px 12px;margin-top:8px;border-radius:var(--r-p);background:var(--fosso);border:1px solid var(--borda)}
.meio a.pista{color:var(--acento-texto)}
.linha>form{margin:0}
.linha>.etq{margin:0;justify-self:end}

/* ---------- leitura dos tribunais ---------- */
.janela{gap:6px 24px;align-items:center;padding:14px 16px;margin-top:10px;border:1px solid rgba(171,151,255,.35);border-radius:var(--r-m);background:var(--acento-fundo)}
.janela.espera{background:none;border-color:var(--borda)}
.vivo{color:var(--acento-texto);font-weight:600}
.vivo i{width:9px;height:9px;background:var(--acento-texto);box-shadow:0 0 12px var(--acento)}
.pilulas{gap:8px}
.pilulas li{padding:6px 13px;border-radius:999px;border:1px solid var(--borda);background:var(--vidro);font-size:13px;color:var(--cinza)}
.fileiras{display:grid;gap:6px}
.fileira{
  --cor:var(--apagado);position:relative;gap:2px 24px;align-items:baseline;
  padding:12px 14px 12px 32px;border:1px solid var(--borda);border-radius:var(--r-m);background:rgba(255,255,255,.025);
}
.fileira:last-child{border-bottom:1px solid var(--borda)}
.fileira::before{content:"";position:absolute;left:14px;top:20px;width:8px;height:8px;border-radius:50%;background:var(--cor);box-shadow:0 0 10px var(--cor)}
.fileira.verde{--cor:var(--ok)}.fileira.amarelo{--cor:var(--atencao)}.fileira.vermelho{--cor:var(--alerta)}
.fileira.verde,.fileira.amarelo,.fileira.vermelho{border-left-color:var(--borda)}
.fileira strong{font-weight:600;min-width:230px}

/* ---------- tabelas e ato ---------- */
.rola{border:1px solid var(--borda);border-radius:var(--r-m);background:var(--fosso)}
.tabela{font-size:13.5px}
.tabela th{color:var(--cinza);font:500 12.5px/1.3 var(--corpo);padding:12px 14px;border-bottom:1px solid var(--borda-2);white-space:nowrap}
.tabela td{padding:11px 14px;border-bottom:1px solid var(--borda)}
.tabela tr:last-child td{border-bottom:0}
.tabela tr:hover td{background:var(--veu)}
.tabela td a{font-weight:600;text-decoration:none}
.tabela td a:hover{text-decoration:underline}
.campos th,.campos td{padding:10px 12px 10px 0;border-bottom:1px solid var(--borda)}
.campos th{width:32%;color:var(--cinza);font:500 13.5px/1.4 var(--corpo)}
.campos tr:last-child th,.campos tr:last-child td{border-bottom:0}
.texto{max-width:78ch;background:var(--fosso);border:1px solid var(--borda);border-radius:var(--r-m);padding:16px 18px;font:400 14.5px/1.65 var(--corpo);color:var(--tinta)}
.hist{padding-left:0;list-style:none}
.hist li{position:relative;padding:5px 0 5px 18px;color:var(--cinza)}
.hist li::before{content:"";position:absolute;left:1px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--acento)}
.hist li b{color:var(--tinta);font-weight:600;margin-right:6px}
.l1{margin:6px 0 12px}
.caixa h2{margin-top:6px}
.st-lida{color:var(--ok)}.st-incompleta{color:var(--atencao)}.st-falhou{color:var(--alerta)}
.tabela tr.sem td{color:var(--atencao)}

/* ---------- entrar ---------- */
.tela-entrar header{justify-content:center;max-width:430px;margin:12vh auto 0;position:relative;top:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.tela-entrar .marca{font-size:24px}
.login{max-width:430px;margin:18px auto;padding:30px 30px 24px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.login h1{margin:0 0 10px;font-size:26px}
.login button{width:100%;margin-top:20px}
.login .nota{margin-top:16px;text-align:center}


/* ---------- computador: menu de vidro na lateral esquerda ---------- */
@media (min-width:1024px){
  body:not(.tela-entrar){padding-left:276px}
  body:not(.tela-entrar) header{
    position:fixed;top:16px;left:16px;bottom:16px;width:244px;max-width:none;margin:0;
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:26px;padding:20px 14px 14px;
    border-radius:24px;background:var(--lateral);
  }
  body:not(.tela-entrar) .marca{padding:0 6px}
  body:not(.tela-entrar) nav{flex:1;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:4px}
  body:not(.tela-entrar) nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;font-size:14.5px}
  body:not(.tela-entrar) nav form{margin:auto 0 0;padding-top:12px;border-top:1px solid var(--borda)}
  body:not(.tela-entrar) nav form button.link{width:100%;text-align:left;padding:11px 14px;border-radius:14px}
  body:not(.tela-entrar) main{padding:44px 32px 80px}
  /* ícones desenhados em CSS, na cor do texto */
  nav a::before{content:"";width:18px;height:18px;flex:none;box-sizing:border-box;opacity:.9}
  nav a:nth-of-type(1)::before{border:1.6px solid currentColor;border-radius:5px;box-shadow:inset 0 3px 0 currentColor}
  nav a:nth-of-type(2)::before{border:1.6px solid currentColor;border-radius:50%;background:radial-gradient(circle,currentColor 2.4px,transparent 2.9px)}
  nav a:nth-of-type(3)::before{background:linear-gradient(currentColor,currentColor) 50% 32%/14px 1.8px no-repeat,linear-gradient(currentColor,currentColor) 50% 68%/14px 1.8px no-repeat}
  nav a:nth-of-type(4)::before{background:linear-gradient(currentColor,currentColor) 0 30%/12px 1.8px no-repeat,linear-gradient(currentColor,currentColor) 100% 70%/12px 1.8px no-repeat,radial-gradient(circle at 85% 30%,currentColor 2px,transparent 2.5px),radial-gradient(circle at 15% 70%,currentColor 2px,transparent 2.5px)}
  nav a:nth-of-type(5)::before{border:1.6px solid currentColor;border-radius:50%;background:linear-gradient(currentColor,currentColor) 50% 25%/1.6px 6px no-repeat,linear-gradient(currentColor,currentColor) 72% 52%/5px 1.6px no-repeat}
}

/* ---------- celular ---------- */
@media (max-width:760px){
  header{position:relative;top:0;margin:10px 12px 0;padding:12px;border-radius:18px}
  nav{flex:1 1 100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:6px}
  nav a{text-align:center;padding:9px 2px;font-size:13.5px;white-space:nowrap}
  nav form{justify-content:center}
  nav form button.link{width:100%;white-space:nowrap}
  main{padding:26px 14px 60px}
  .total{gap:8px;padding:10px;border-radius:18px}
  .placar>span,.cartao{min-height:104px;padding:12px 10px 12px 12px;gap:8px;font-size:12px;border-radius:12px}
  .cartao span{font-size:12px}
  .placar b,.cartao b{font-size:clamp(22px,7.2vw,30px)}
  .cartao.verde::before,.cartao.cinza::before,.placar>.agora::before{width:18px;height:18px;left:-13px;margin-top:-9px;font-size:12px}
  .cartao.laranja,.cartao.azul{padding:11px 12px;gap:7px}
  .cartao.laranja b,.cartao.azul b{font-size:18px}
  .faixa{flex-direction:column;gap:0;padding:2px 4px}
  .faixa a{padding:7px 0}
  .busca select{flex:1 1 100%}
  .busca input[name=q]{min-width:0;flex:1 1 0}
  .linha{grid-template-columns:78px minmax(0,1fr);gap:10px 14px;align-items:start;padding:10px;border-radius:18px}
  .linha>form,.linha>.etq{grid-column:2;justify-self:start}
  .prazo{padding:10px}
  .prazo b{font-size:19px}
  .caixa{padding:18px 16px}
  .dobra{padding:0}
  .dobra>:not(summary){margin-left:14px;margin-right:14px}
  .fileira strong{min-width:0;flex:1 1 100%}
  .tela-entrar header{margin-top:8vh}
  .login{padding:24px 18px 20px}
}



/* ---------- botões de menu e tema (criados pelo visual.js) ---------- */
.botao-menu,.botao-tema{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;height:38px;margin:0;padding:0;border:1px solid var(--borda);
  border-radius:12px;background:var(--vidro);color:var(--cinza);font:500 14px/1 var(--corpo);box-shadow:var(--brilho);
}
.botao-menu:hover,.botao-tema:hover{background:var(--veu);color:var(--forte);box-shadow:var(--brilho)}
.botao-menu::before{ /* ícone de painel lateral */
  content:"";width:18px;height:15px;box-sizing:border-box;border:1.6px solid currentColor;border-radius:4px;
  background:linear-gradient(currentColor,currentColor) 4px 0/1.6px 100% no-repeat;
}
.botao-tema::before{ /* meia-lua: metade cheia */
  content:"";width:16px;height:16px;flex:none;box-sizing:border-box;border:1.6px solid currentColor;border-radius:50%;
  background:linear-gradient(90deg,currentColor 50%,transparent 50%);
}
.botao-menu{display:none}
@media (min-width:1024px){
  .botao-menu{display:inline-flex;position:fixed;z-index:6;top:30px;left:212px;width:38px;transition:left .45s var(--ease)}
  :root[data-menu="fechado"] .botao-menu{left:16px}
  body:not(.tela-entrar) header{transition:transform .45s var(--ease),opacity .3s var(--ease)}
  body:not(.tela-entrar){transition:padding-left .45s var(--ease)}
  :root[data-menu="fechado"] body:not(.tela-entrar){padding-left:0}
  :root[data-menu="fechado"] body:not(.tela-entrar) header{transform:translateX(calc(-100% - 24px));opacity:0;visibility:hidden}
  :root[data-menu="fechado"] body:not(.tela-entrar) main{padding-left:56px}
  body:not(.tela-entrar) .marca{padding-right:48px}
  .botao-tema{justify-content:flex-start;width:100%;height:auto;padding:11px 14px;margin-top:auto;border:0;background:none;box-shadow:none;border-radius:14px}
  body:not(.tela-entrar) nav form{margin-top:4px}
}
@media (max-width:1023px){
  .botao-tema{position:absolute;top:12px;right:12px;width:38px;font-size:0;gap:0}
  .botao-tema span{display:none}
}

/* ---------- tema claro (botão no menu; a escolha fica no navegador de cada pessoa) ---------- */
:root[data-tema="claro"]{
  color-scheme:light;
  --chao:#f3f1fb;--fundo:#f3f1fb;
  --vidro:rgba(255,255,255,.66);--vidro-2:rgba(255,255,255,.9);--vidro-solido:#ffffff;
  --borda:rgba(40,28,110,.10);--borda-2:rgba(40,28,110,.18);
  --brilho:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(40,28,110,.06);
  --forte:#14112c;--veu:rgba(40,28,110,.05);--fosso:rgba(40,28,110,.04);
  --tinta:#1c1938;--cinza:#5b5779;--apagado:#7f7b9e;
  --acento:#6a45ff;--acento-forte:#5734f0;--acento-texto:#5634e8;--acento-fundo:rgba(106,69,255,.10);
  --ok:#11845a;--atencao:#9a6400;--muda:#b9560c;--alerta:#cf2a4f;
  --orbe-1:rgba(124,92,255,.22);--orbe-2:rgba(92,60,230,.12);--orbe-3:rgba(124,92,255,.12);
  --topo:rgba(255,255,255,.7);--lateral:rgba(255,255,255,.62);
}
:root[data-tema="claro"] .placar>.agora::before{background:#ece6ff;color:var(--acento-texto)}
:root[data-tema="claro"] .resumo a::before,:root[data-tema="claro"] .fileira::before{box-shadow:none}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation:none!important}.cartao:hover{transform:none}}
@media (forced-colors:active){#rastro,body::before{display:none}}

/* ---------- menu lateral: vidro de verdade (o fundo da galáxia aparece borrado por trás) ---------- */
@media (min-width:1024px){
  body:not(.tela-entrar) header{
    background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.025) 38%,rgba(255,255,255,.045)),var(--lateral-vidro);
    -webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
    border:1px solid var(--lateral-borda);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 1px 0 0 rgba(255,255,255,.06),0 30px 70px -30px rgba(0,0,0,.75);
  }
  body:not(.tela-entrar) header::after{ /* reflexo de luz no canto de cima */
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:radial-gradient(130% 35% at 0% 0%,rgba(255,255,255,.12),transparent 60%);
  }
  body:not(.tela-entrar) header>*{position:relative;z-index:1}
  body:not(.tela-entrar) nav a{border:1px solid transparent;color:var(--cinza)}
  body:not(.tela-entrar) nav a::before{opacity:.75}
  body:not(.tela-entrar) nav a:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.09);color:var(--forte)}
  body:not(.tela-entrar) nav a.ativo{
    color:#fff;border-color:rgba(255,255,255,.24);
    background:linear-gradient(135deg,rgba(143,116,255,.92),rgba(106,69,255,.62));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 28px -10px rgba(124,92,255,.95);
  }
  body:not(.tela-entrar) nav a.ativo::before{opacity:1}
  body:not(.tela-entrar) nav form{border-top-color:var(--lateral-borda)}
  .botao-menu{background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03)),var(--lateral-vidro);border-color:var(--lateral-borda);
    -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%)}
}
:root{--lateral-vidro:rgba(18,14,42,.30);--lateral-borda:rgba(255,255,255,.14)}
:root[data-tema="claro"]{--lateral-vidro:rgba(255,255,255,.42);--lateral-borda:rgba(255,255,255,.75)}
:root[data-tema="claro"] body:not(.tela-entrar) nav a:hover{background:rgba(40,28,110,.06);border-color:rgba(40,28,110,.08)}

/* ---------- entrar: cartão bem transparente, para a galáxia aparecer ---------- */
.tela-entrar .login{
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));
  border-color:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(5px) saturate(140%);backdrop-filter:blur(5px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 30px 70px -30px rgba(0,0,0,.7);
}
.tela-entrar .login input{background:rgba(10,8,26,.35);border-color:rgba(255,255,255,.14)}
.tela-entrar .login input:focus{background:rgba(10,8,26,.5)}
.tela-entrar .login .nota{color:#c9c5e6}
:root[data-tema="claro"] .tela-entrar .login{background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.3));border-color:rgba(255,255,255,.8)}
:root[data-tema="claro"] .tela-entrar .login input{background:rgba(255,255,255,.6);border-color:rgba(40,28,110,.15)}
:root[data-tema="claro"] .tela-entrar .login .nota{color:var(--cinza)}
@media (min-width:1024px){ /* entrar: cartão à esquerda, galáxia inteira à direita */
  .tela-entrar header{margin:16vh 0 0 9vw;max-width:400px;justify-content:flex-start}
  .tela-entrar .login{margin:20px 0 0 9vw;max-width:400px}
}
@media (min-width:1024px){.tela-entrar main{max-width:none;margin:0;padding:0}}

/* ---------- painel: cartões de vidro fosco, a galáxia passa borrada por trás e o texto fica limpo ---------- */
body:not(.tela-entrar) .total,body:not(.tela-entrar) .caixa{
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),var(--fosco);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
}
body:not(.tela-entrar) .linha{background:var(--fosco-linha)}
body:not(.tela-entrar) .linha:hover{background:var(--fosco-linha-2)}
:root{--fosco:rgba(14,11,34,.5);--fosco-linha:rgba(16,13,36,.78);--fosco-linha-2:rgba(24,20,50,.85)}
:root[data-tema="claro"]{--fosco:rgba(255,255,255,.55);--fosco-linha:rgba(255,255,255,.82);--fosco-linha-2:rgba(255,255,255,.95)}

/* ---------- luz do mouse dentro de todos os cartões ---------- */
.placar>span,.cartao,.linha,.caixa,.fileira,.filtro,.janela,.login{position:relative;isolation:isolate}
.placar>span::after,.cartao::after,.linha::after,.caixa::after,.fileira::after,.filtro::after,.janela::after,.login::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(171,151,255,.3),transparent 65%);
  transition:opacity .35s var(--ease);
}
.placar>span:hover::after,.cartao:hover::after,.linha:hover::after,.caixa:hover::after,.fileira:hover::after,.filtro:hover::after,.janela:hover::after,.login:hover::after{opacity:1}
.placar>.agora::after{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 65%)}
.placar>span:hover,.linha:hover,.caixa:hover,.fileira:hover{border-color:rgba(171,151,255,.32)}
:root[data-tema="claro"] .placar>span::after,:root[data-tema="claro"] .cartao::after,:root[data-tema="claro"] .linha::after,:root[data-tema="claro"] .caixa::after,:root[data-tema="claro"] .fileira::after,:root[data-tema="claro"] .filtro::after{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(106,69,255,.12),transparent 65%)}

/* ---------- menu lateral: vidro roxo ---------- */
@media (min-width:1024px){
  body:not(.tela-entrar) header{
    background:
      linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 22%,transparent 38%),
      linear-gradient(180deg,rgba(139,109,255,.26) 0%,rgba(92,62,220,.14) 45%,rgba(60,36,160,.2) 100%);
    -webkit-backdrop-filter:blur(30px) saturate(190%) brightness(1.05);backdrop-filter:blur(30px) saturate(190%) brightness(1.05);
    border:1px solid rgba(190,172,255,.32);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(255,255,255,.06),inset 1px 0 0 rgba(255,255,255,.12),
      inset 0 0 40px rgba(139,109,255,.12),0 30px 80px -30px rgba(40,20,120,.8);
  }
  body:not(.tela-entrar) header::after{
    background:
      radial-gradient(120% 30% at 0% 0%,rgba(255,255,255,.2),transparent 60%),
      radial-gradient(80% 25% at 100% 100%,rgba(171,151,255,.18),transparent 70%);
  }
  body:not(.tela-entrar) nav a{color:#d9d2ff}
  body:not(.tela-entrar) nav a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16);color:#fff}
  body:not(.tela-entrar) nav a.ativo{
    background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.08));border-color:rgba(255,255,255,.4);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 30px -12px rgba(139,109,255,1);
  }
  body:not(.tela-entrar) nav form{border-top-color:rgba(190,172,255,.25)}
  body:not(.tela-entrar) .botao-tema,body:not(.tela-entrar) button.link{color:#d9d2ff}
  .botao-menu{background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(139,109,255,.18));border-color:rgba(190,172,255,.32);color:#e6e0ff}
  :root[data-tema="claro"] body:not(.tela-entrar) header{
    background:linear-gradient(115deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.3) 30%,transparent 45%),linear-gradient(180deg,rgba(139,109,255,.22),rgba(106,69,255,.14));
    border-color:rgba(255,255,255,.8)}
  :root[data-tema="claro"] body:not(.tela-entrar) nav a,:root[data-tema="claro"] body:not(.tela-entrar) .botao-tema,:root[data-tema="claro"] body:not(.tela-entrar) button.link{color:#2e2466}
  :root[data-tema="claro"] body:not(.tela-entrar) nav a.ativo{color:#fff;background:linear-gradient(135deg,#8b6dff,#6a45ff)}
}
/* galáxia no centro do painel: vidro mais fino para ela aparecer, ainda borrando o que fica atrás do texto */
body:not(.tela-entrar) .total,body:not(.tela-entrar) .caixa{-webkit-backdrop-filter:blur(7px) saturate(150%);backdrop-filter:blur(7px) saturate(150%)}
:root{--fosco:rgba(14,11,34,.3);--fosco-linha:rgba(16,13,36,.62);--fosco-linha-2:rgba(24,20,50,.75)}
/* filtros, busca e etiquetas: vidro escuro fosco, para ler bem mesmo com a galáxia atrás */
body:not(.tela-entrar) .filtro,body:not(.tela-entrar) .pilulas li{
  background:var(--fosco-linha);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body:not(.tela-entrar) .filtro:hover{background:var(--fosco-linha-2)}
body:not(.tela-entrar) .filtro.ativo{background:var(--acento)}
body:not(.tela-entrar) input,body:not(.tela-entrar) select{background-color:var(--fosco-linha);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
:root{--fosco-linha:rgba(16,13,36,.8);--fosco-linha-2:rgba(26,21,54,.88)}