/* Passe1: mundo visual unico (gramatica TUI). Fonte da verdade de tokens,
   primitivos e shell. Toda pagina carrega este arquivo; nenhuma redefine token. */

@font-face{
  font-family:"JetBrains Mono";
  src:url("/assets/jetbrains-mono.woff2") format("woff2");
  font-weight:100 800;font-style:normal;font-display:swap;
}

:root{
  /* chao e superficies: azul profundo, nunca preto */
  --bg:#101e5a;
  --bg-2:#182a78;      /* cabecalho de tabela, hover */
  --bg-well:#0a1442;   /* pocos: codigo, inputs */
  --line:#5a70d6;      /* bordas de painel */
  --line-soft:#33479f; /* divisorias internas */
  /* tintas */
  --text:#eef1ff;
  --dim:#aeb9f0;
  --faint:#8c9ae0;
  --yellow:#ffd43b;    /* acao, preco, tecla de atalho */
  --cyan:#5ee6e0;      /* selecao (video reverso) */
  --green:#7cf29a;     /* estado ok */
  --red:#ff7a7a;       /* erro, perigo */
  --ink:#0a1442;       /* texto sobre bloco claro */
  /* medidas */
  --side:30ch;
  --gap:1.5rem;
  --font:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;color-scheme:dark;scrollbar-color:var(--line) var(--bg);scrollbar-width:thin}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.6;font-variant-numeric:tabular-nums;font-feature-settings:"zero" 1;-webkit-font-smoothing:antialiased;min-height:100dvh;caret-color:var(--yellow)}
::selection{background:var(--cyan);color:var(--ink)}
a{color:var(--yellow);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{background:var(--yellow);color:var(--ink);text-decoration:none}
:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
h1,h2,h3{font-weight:700;line-height:1.2;text-wrap:balance;letter-spacing:-.02em}
h1{font-size:1.6rem}
h2{font-size:1.15rem}
h3{font-size:1rem}
p{max-width:72ch}
b,strong{font-weight:700;color:var(--text)}
code,kbd,pre{font-family:inherit}
button,input,select,textarea{font:inherit;color:inherit}
.dim{color:var(--dim)} .faint{color:var(--faint)} .yel{color:var(--yellow)} .cy{color:var(--cyan)}
.ok{color:var(--green)} .err{color:var(--red)}
.num{text-align:right}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* tecla: a letra de atalho dentro de um rotulo */
kbd{color:var(--yellow);font-weight:700}
.key{display:inline-block;border:1px solid var(--line);padding:0 .6ch;color:var(--yellow);font-size:.85em;line-height:1.5}

/* ---------- painel: borda fina, titulo encaixado na borda superior ---------- */
.pnl{position:relative;border:1px solid var(--line);padding:1.6rem 2ch 1.4rem;min-width:0}
.pnl > .pnl-t{position:absolute;top:-.8em;left:1.5ch;background:var(--bg);padding:0 1ch;font-size:.95rem;font-weight:700;color:var(--yellow);letter-spacing:0;max-width:calc(100% - 4ch);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pnl > .pnl-r{position:absolute;top:-.8em;right:1.5ch;background:var(--bg);padding:0 1ch;font-size:.85rem;color:var(--dim);max-width:46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
/* espacamento vertical e decisao do container, nunca do painel (grids quebram) */
.stack > * + *{margin-top:var(--gap)}
.pnl-lead{color:var(--dim);margin-bottom:1.1rem}
.cols{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,34ch),1fr))}

/* ---------- botoes: bloco em video reverso e colchetes ---------- */
.btn,.btn-2,.btn-x{display:inline-flex;align-items:center;gap:1ch;border:0;cursor:pointer;text-decoration:none;font-weight:700;line-height:1.5;white-space:nowrap}
.btn{background:var(--yellow);color:var(--ink);padding:.55rem 2ch}
.btn:hover{background:var(--text);color:var(--ink)}
.btn:active,.btn-2:active,.btn-x:active{transform:translateY(1px)}
.btn .key{border-color:var(--ink);color:var(--ink)}
.btn-2,.btn-x{background:none;padding:.15rem 0;font-weight:500}
.btn-2{color:var(--text)} .btn-x{color:var(--red)}
.btn-2::before,.btn-x::before{content:"[";color:var(--faint);padding-right:1ch}
.btn-2::after,.btn-x::after{content:"]";color:var(--faint);padding-left:1ch}
.btn-2:hover{background:var(--cyan);color:var(--ink)}
.btn-x:hover{background:var(--red);color:var(--ink)}
.btn-2:hover::before,.btn-2:hover::after,.btn-x:hover::before,.btn-x:hover::after{color:var(--ink)}
button:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.acts{display:flex;flex-wrap:wrap;gap:.6rem 3ch;align-items:center}

/* ---------- etiquetas de estado: bloco reverso, so para estado real ---------- */
.tag{display:inline-block;padding:0 1ch;font-size:.82rem;font-weight:700;line-height:1.55;text-transform:uppercase;letter-spacing:.04em;background:var(--line-soft);color:var(--text)}
.tag.ok{background:var(--green);color:var(--ink)}
.tag.warn{background:var(--yellow);color:var(--ink)}
.tag.err{background:var(--red);color:var(--ink)}
.tag.sel{background:var(--cyan);color:var(--ink)}
.selos{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.3rem}
.eco{display:block;margin-top:.25rem;font-size:.85rem;font-weight:700;color:var(--green)}
.filtros-preco{margin-bottom:1rem}

/* ---------- campos ---------- */
.fld{display:grid;gap:.35rem;margin-bottom:1rem}
.fld > label{font-size:.85rem;color:var(--dim)}
.fld > small{color:var(--faint);font-size:.82rem}
.fld > small.err{color:var(--red)}
.inp{width:100%;background:var(--bg-well);border:1px solid var(--line);padding:.55rem 1.5ch;border-radius:0;outline:0}
.inp::placeholder{color:var(--faint)}
.inp:focus{border-color:var(--yellow);box-shadow:inset 0 0 0 1px var(--yellow)}
.inp[readonly]{color:var(--dim)}
.inline{display:flex;gap:1ch;align-items:stretch}
.inline > .inp{flex:1;min-width:0}

/* ---------- tabela: cabecalho reverso suave, linha inteira destaca ---------- */
.tbl-w{overflow-x:auto;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th{background:var(--bg-2);color:var(--yellow);font-weight:700;text-align:left;padding:.45rem 1.2ch;white-space:nowrap}
td{padding:.5rem 1.2ch;border-top:1px solid var(--line-soft);white-space:nowrap}
th:first-child,td:first-child{padding-left:1.5ch} th:last-child,td:last-child{padding-right:1.5ch}
tbody tr:hover td{background:var(--bg-2)}
th.num,td.num{text-align:right}
.empty{border:1px dashed var(--line);padding:1.4rem 2ch;color:var(--dim)}

/* ---------- poco de codigo ---------- */
.well{position:relative;background:var(--bg-well);border:1px solid var(--line-soft);padding:1rem 2ch;overflow-x:auto;font-size:.9rem;line-height:1.7;white-space:pre;tab-size:2}
.well .cm{color:var(--faint)} .well .s{color:var(--cyan)} .well .k{color:var(--yellow)}
.well-h{display:flex;justify-content:space-between;align-items:center;gap:2ch;background:var(--bg-2);border:1px solid var(--line-soft);border-bottom:0;padding:.3rem 2ch;font-size:.85rem;color:var(--dim)}

/* ---------- leitura grande: numero com peso ---------- */
.big{font-size:clamp(2.2rem,1.4rem + 3vw,4rem);font-weight:800;line-height:1;letter-spacing:-.03em}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.25rem 3ch;font-size:.92rem}
.kv dt{color:var(--dim)} .kv dd{text-align:right}
.forn-conta{margin:1rem 0 .3rem;font-size:.95rem;color:var(--cyan)}
.meter{height:.9rem;border:1px solid var(--line);background:var(--bg-well)}
.meter > i{display:block;height:100%;background:var(--cyan)}
.meter.warn > i{background:var(--yellow)} .meter.full > i{background:var(--red)}
/* grade de fios: cada celula desenha o proprio fio (direita e embaixo) com
   box-shadow, nunca com border-left ou gap+background. Area sem celula (linha
   incompleta) fica com o fundo do proprio painel (var(--bg)), igual ao container,
   entao nunca vira buraco de outra cor. overflow:hidden corta o fio que sobraria
   na ultima coluna e na ultima linha, a borda do container fecha a moldura */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(18ch,1fr));gap:0;border:1px solid var(--line);overflow:hidden;background:var(--bg)}
.stats > div{padding:.9rem 2ch;box-shadow:1px 0 0 0 var(--line-soft),0 1px 0 0 var(--line-soft)}
.stats .v{font-size:1.5rem;font-weight:800;line-height:1.2}
.stats .l{font-size:.82rem;color:var(--dim)}
.stats .d{font-size:.8rem;color:var(--faint)}
@media (max-width:860px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stats .v{font-size:1.25rem}}

/* ---------- segmentado: grupo de botoes, um ativo por vez ---------- */
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line)}
.seg button{background:none;border:0;padding:.25rem 2ch;cursor:pointer;color:var(--dim)}
.seg button + button{border-left:1px solid var(--line)}
.seg button:hover{background:var(--bg-2);color:var(--text)}
.seg button[aria-pressed=true],.seg button[aria-selected=true]{background:var(--cyan);color:var(--ink);font-weight:700}

/* ---------- barras: grafico simples com eixo (1a data, pico, ultima data) ---------- */
.bars{display:flex;align-items:flex-end;gap:2px;height:9rem;border-bottom:1px solid var(--line);padding-top:.5rem}
.bars > div{flex:1;min-width:3px;background:var(--cyan)}
.bars > div.z{background:var(--line-soft);height:2px!important}
.bars > div:hover{background:var(--yellow)}
.bars-x{display:flex;justify-content:space-between;font-size:.78rem;color:var(--faint);margin-top:.3rem}

/* ---------- linha de lista: titulo + detalhe, acao a direita ---------- */
.srow{display:flex;justify-content:space-between;align-items:center;gap:2ch;flex-wrap:wrap;padding:.7rem 0;border-top:1px solid var(--line-soft)}
.srow:first-child{border-top:0}
.srow small{display:block;color:var(--dim)}

/* ---------- aviso ---------- */
.note{border:1px solid var(--line);padding:.8rem 2ch;display:flex;flex-wrap:wrap;gap:.5rem 3ch;align-items:center;justify-content:space-between}
.note.warn{border-color:var(--yellow)} .note.err{border-color:var(--red);color:var(--red)}

/* ---------- shell do app: so sidebar, sem header ---------- */
.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100dvh}
.side{position:sticky;top:0;height:100dvh;overflow-y:auto;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:1.2rem 0 1rem}
.brand{display:flex;align-items:center;gap:1.5ch;padding:0 2ch 1.1rem;text-decoration:none;color:var(--text);font-weight:800}
.brand:hover{background:none;color:var(--text)}
.brand > span:first-child{background:var(--yellow);color:var(--ink);padding:0 1ch}
.side-g{padding:1rem 2ch .3rem;font-size:.78rem;color:var(--faint);text-transform:uppercase;letter-spacing:.08em}
.nav-i{display:flex;align-items:center;gap:1ch;width:100%;background:none;border:0;cursor:pointer;text-align:left;text-decoration:none;color:var(--text);padding:.32rem 2ch;font-weight:500}
.nav-i:hover{background:var(--bg-2);color:var(--text)}
.nav-i[aria-current=page]{background:var(--cyan);color:var(--ink);font-weight:700}
.nav-i[aria-current=page] kbd{color:var(--ink)}
.nav-i .n{margin-left:auto;font-size:.85rem;color:var(--dim)}
.nav-i[aria-current=page] .n{color:var(--ink)}
.nav-i[hidden]{display:none}
.side-f{margin-top:auto;padding:.9rem 0 0;border-top:1px solid var(--line-soft);display:grid;gap:0;font-size:.88rem}
.side-f .who{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2ch .5rem}
.main{padding:2.2rem 4ch 5rem;min-width:0;max-width:150ch}
.main > h1{margin-bottom:.3rem}
.main > .sub{color:var(--dim);margin-bottom:2rem}
.view{display:none} .view.on{display:block}

/* celular: a sidebar vira a barra de teclas no rodape, como a linha F1..F10 */
@media (max-width:860px){
  .app{display:block}
  .side{position:fixed;inset:auto 0 0 0;top:auto;height:auto;z-index:20;flex-direction:row;align-items:stretch;padding:0;border-right:0;border-top:1px solid var(--line);background:var(--bg);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .side::-webkit-scrollbar{display:none}
  .side .brand,.side-g,.side-f .who,.nav-i .n{display:none}
  .nav-i{width:auto;flex:0 0 auto;padding:.85rem 2ch;white-space:nowrap}
  .side-f{margin:0;padding:0;border:0;display:flex;gap:0;font-size:inherit}
  .side-f > a,.side-f > button{padding:.85rem 2ch;white-space:nowrap}
  .main{padding:1.6rem 2ch 6rem}
}

/* ---------- dialogo proprio ---------- */
.dlg-ov{position:fixed;inset:0;z-index:50;display:none;place-items:center;padding:2ch;background:rgb(6 12 40 / .82)}
.dlg-ov.on{display:grid}
/* largura em vw, nao %: dentro do grid place-items:center, uma largura em % se
   apoia no max-content do proprio conteudo (uma tabela larga, por exemplo) e vaza
   a tela. altura maxima com rolagem so no corpo: cabecalho e rodape ficam fixos */
.dlg{width:min(100vw - 4ch,64ch);max-height:calc(100dvh - 4ch);background:var(--bg);border:1px solid var(--yellow);padding:1.6rem 2ch 1.2rem;position:relative;display:flex;flex-direction:column}
.dlg.wide{width:min(100vw - 4ch,110ch)}
.dlg > h3{position:absolute;top:-.8em;left:1.5ch;background:var(--bg);padding:0 1ch;color:var(--yellow)}
.dlg-b{color:var(--dim);margin-bottom:1.3rem;overflow-wrap:anywhere;overflow-y:auto;overflow-x:hidden;min-height:0}
.dlg-f{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.6rem 3ch;align-items:center;flex-shrink:0}

/* cursor de bloco: o unico movimento autoral do mundo */
.cur::after{content:"";display:inline-block;width:.6em;height:1.05em;margin-left:.2ch;vertical-align:text-bottom;background:var(--yellow);animation:cur 1.1s steps(1) infinite}
@keyframes cur{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cur::after{animation:none}*{scroll-behavior:auto!important}}

/* ---------- rodape: grupo Acompanhe (redes sociais) ---------- */
.rd-sec{display:flex;align-items:center;flex-wrap:wrap;gap:0;border-left:1px solid var(--line-soft);margin-left:auto;flex-shrink:0}
.rd-sec-t{padding:.6rem 1ch;font-size:.75rem;color:var(--faint);white-space:nowrap;line-height:1}
.rd-social{flex:0 0 auto;padding:.8rem 1.2ch;font-size:.82rem;white-space:nowrap}
@media(max-width:640px){
  .rd-sec{border-left:none;border-top:1px solid var(--line-soft);width:100%;margin-left:0;flex-wrap:wrap}
  .rd-social{flex:1 1 auto;text-align:center;padding:.85rem 1ch;font-size:.8rem}
}


/* ---------- ranking global ---------- */
.rk-lista{border:1px solid var(--line);background:var(--bg)}
.rk-linha{display:grid;grid-template-columns:5ch 1fr auto;gap:0 2ch;align-items:center;padding:.7rem 2ch;border-top:1px solid var(--line-soft)}
.rk-linha:first-child{border-top:0}
.rk-linha.eu{background:var(--bg-2);box-shadow:inset 2px 0 0 var(--cyan)}
.rk-pos{font-weight:800;color:var(--dim)}
.rk-linha.top .rk-pos{color:var(--yellow)}
.rk-nome{font-weight:700;overflow-wrap:anywhere}
.rk-sub{color:var(--dim);font-size:.82rem}
.rk-total{text-align:right;font-weight:800;font-size:1.15rem;white-space:nowrap}
.rk-total small{display:block;font-weight:400;font-size:.75rem;color:var(--faint)}
@media(max-width:640px){.rk-linha{grid-template-columns:4ch 1fr}.rk-total{grid-column:2;text-align:left;margin-top:.3rem}.rk-total small{display:inline;margin-left:1ch}}

/* ---------- tabela responsiva (opt-in com .tbl-r no .tbl-w): no celular cada
   linha vira um bloco, e cada celula mostra o proprio rotulo (td[data-l]).
   Nenhuma coluna some nem corta: o que nao cabe quebra linha ---------- */
.tbl-w td.wrap{white-space:normal;min-width:18ch}
@media (max-width:640px){
  .tbl-r{border:0;overflow:visible}
  .tbl-r table,.tbl-r tbody,.tbl-r tr,.tbl-r td{display:block;width:100%}
  .tbl-r thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tbl-r tr{border:1px solid var(--line);padding:.35rem 0}
  .tbl-r tr + tr{margin-top:.7rem}
  .tbl-r td{border:0;padding:.3rem 2ch;white-space:normal;overflow-wrap:anywhere;text-align:right;min-width:0}
  .tbl-r td::after{content:"";display:table;clear:both}
  .tbl-r td[data-l]::before{content:attr(data-l);float:left;margin-right:2ch;color:var(--dim);font-size:.85rem;text-align:left}
  .tbl-r td:first-child{text-align:left;font-weight:700;border-bottom:1px solid var(--line-soft);margin-bottom:.2rem}
  .tbl-r td:first-child::before{display:none}
  .tbl-r td[colspan]{text-align:left;border:0;margin:0;font-weight:400}
  .tbl-r tbody tr:hover td{background:none}
}

/* ---------- paginacao: anterior / posicao / proxima ---------- */
.pag{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 3ch;margin-top:1rem;font-size:.9rem;color:var(--dim)}
.pag .acts{gap:.4rem 2ch}

/* ---------- conta de chegada: a soma que fecha o saldo ---------- */
.conta-eq{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 2ch;border:1px solid var(--line);padding:.9rem 2ch;margin:1rem 0}
.conta-eq .op{color:var(--faint)}
.conta-eq .t{display:block;font-size:.78rem;color:var(--dim)}
.conta-eq b{font-size:1.25rem}
.conta-eq .res b{color:var(--yellow)}

/* ---------- area de texto com a mesma pele do .inp ---------- */
textarea.inp{resize:vertical;min-height:4.5rem;line-height:1.5}

/* ---------- dobra: bloco recolhido (Ao vivo, Histórico, mais filtros) ---------- */
details.dobra{border:1px solid var(--line)}
details.dobra > summary{cursor:pointer;list-style:none;padding:.7rem 2ch;color:var(--yellow);font-weight:700;display:flex;justify-content:space-between;gap:2ch;align-items:baseline}
details.dobra > summary::-webkit-details-marker{display:none}
details.dobra > summary::after{content:"[+]";color:var(--faint);font-weight:500}
details.dobra[open] > summary::after{content:"[-]"}
details.dobra > summary:hover{background:var(--bg-2)}
details.dobra > summary small{color:var(--dim);font-weight:400;font-size:.85rem;margin-right:auto}
details.dobra > .dobra-b{padding:1.4rem 2ch 1.2rem;border-top:1px solid var(--line-soft)}
/* dobra dentro de uma linha de filtros: so o rotulo, sem moldura */
details.dobra.leve{border:0}
details.dobra.leve > summary{padding:.35rem 0;color:var(--text);font-weight:500}
details.dobra.leve > .dobra-b{border:0;padding:.8rem 0 0}

/* ---------- linha de filtros: tudo numa linha, quebra so quando falta espaco ---------- */
.filtros{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 2ch;margin-bottom:1rem}
.filtros .inp{width:auto;max-width:24ch;padding:.4rem 1.2ch}
.filtros label{color:var(--dim);display:inline-flex;align-items:center;gap:1ch;white-space:nowrap}

/* ---------- serie com poucos dias: o numero no lugar do grafico vazio ---------- */
.poucos{display:grid;gap:.4rem;font-size:.92rem}
.poucos > div{display:flex;justify-content:space-between;gap:2ch;border-top:1px solid var(--line-soft);padding-top:.4rem}
.poucos > div:first-child{border-top:0;padding-top:0}
.poucos b{font-size:1.15rem}

/* ---------- celula com duas leituras: principal em cima, detalhe embaixo ---------- */
td .det{display:block;font-size:.8rem;color:var(--faint)}

/* ---------- linha filha (chaves dentro de uma conta) ---------- */
tr.filha td{background:var(--bg-well);font-size:.86rem;color:var(--dim)}
tr.filha td:first-child{padding-left:4ch}

@media (max-width:640px){
  /* cartao compacto no celular: so o essencial, o resto fica no detalhe */
  .tbl-r td.m-x{display:none}
  .conta-eq{display:grid;grid-template-columns:1fr auto;gap:.35rem 2ch;align-items:baseline}
  .conta-eq > span:not(.op):not(.tag){display:contents}
  .conta-eq .t{font-size:.85rem}
  .conta-eq b{text-align:right;font-size:1.05rem}
  .conta-eq .op{display:none}
  .conta-eq > .tag{grid-column:1 / -1;justify-self:start;margin-top:.3rem}
  .filtros .inp{max-width:none;flex:1 1 14ch}
}