/* OTG VAR — componentes. Cores só via tokens.css */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{font-family:Sora,system-ui,sans-serif;font-size:var(--t-corpo);color:var(--tx);background:var(--fundo)}
button,input,select{font:inherit}
a{color:inherit;text-decoration:none}
.n,.num{font-variant-numeric:tabular-nums}

/* ---- layout ---- */
.app{display:flex;min-height:100vh}
.mn{flex:1;min-width:0;display:flex;flex-direction:column}
.vw{padding:24px max(28px,calc((100% - var(--maxw))/2 + 28px)) 28px;flex:1}

/* ---- sidebar ---- */
.sb{width:var(--sbw);min-width:var(--sbw);background:var(--campo);color:var(--cal);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sb .brand{flex:none;display:flex;align-items:center;gap:11px;padding:0 22px;height:var(--hdr-h);min-height:var(--hdr-h);border-bottom:1px solid var(--sb-div)}
.sb .tile{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--campo),var(--var),var(--sinal));color:var(--cal);font-size:var(--t-sub)}
.sb .nm{font-family:Archivo,sans-serif;font-weight:800;font-size:var(--t-sub);letter-spacing:-.02em}
.sb .nm span{color:var(--sinal)}
.sb .nav{flex:1;min-height:0;padding:8px 8px 10px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--linha-f) transparent}
.sb .nav::-webkit-scrollbar{width:6px}
.sb .nav::-webkit-scrollbar-thumb{background:var(--linha-f);border-radius:3px}
.sb .gp{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);letter-spacing:.24em;
  color:var(--sb-gp);padding:13px 22px 4px;text-transform:uppercase}
.sb .it{display:flex;align-items:center;gap:11px;width:100%;padding:9px 16px;border:0;
  background:transparent;color:var(--sb-tx);font:inherit;font-size:var(--t-corpo);
  text-align:left;cursor:pointer;border-radius:var(--raio);white-space:nowrap;
  transition:background .12s,color .12s}
.sb .it i{font-size:var(--t-sub);opacity:.9;width:19px;text-align:center;flex:none}
.sb .it:hover{background:var(--linha);color:var(--cal)}
.sb .it.on{background:var(--linha);color:var(--cal);font-weight:600;box-shadow:inset 3px 0 0 var(--sinal)}
.sb .it .seta{margin-left:auto;font-size:var(--t-corpo);color:var(--sb-gp);transition:transform .15s}
.sb .it[aria-expanded="true"]{color:var(--cal)}
.sb .it[aria-expanded="true"] .seta{transform:rotate(90deg)}
.sb .it .ct+.seta{margin-left:0}

/* Sublista: o filho é discreto — sem ícone, recuado, marcado por filete
   vertical em vez de fundo cheio. A altura anima por grid-template-rows,
   sem medir nada em JS. */
.sb .sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .18s ease}
.sb .sub[data-aberto="1"]{grid-template-rows:1fr}
.sb .sub>div{overflow:hidden}
.sb .sub a{display:flex;align-items:center;gap:8px;padding:7px 16px 7px 43px;position:relative;
  font-size:var(--t-aux);color:var(--sb-gp);white-space:nowrap;transition:color .12s}
.sb .sub a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sb .sub a::before{content:'';position:absolute;left:26px;top:0;bottom:0;width:1px;background:var(--sb-div)}
.sb .sub a:hover{color:var(--cal)}
.sb .sub a.on{color:var(--cal);font-weight:500}
.sb .sub a.on::before{background:var(--sinal);width:2px}
.sb .sub a.off{color:var(--tx-4);pointer-events:none}
.sb .sub a.off::after{content:'em breve';flex:none;margin-left:auto;font-family:'IBM Plex Mono',monospace;
  font-size:var(--t-etq);letter-spacing:.1em;color:var(--tx-4)}

.sb .it .ct{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);font-weight:500;
  background:var(--sinal);color:var(--var-d);border-radius:9px;padding:1px 7px}
/* Rodapé da lateral: âncora do popover do usuário. */
.sb .who{position:relative;display:flex;align-items:center;gap:11px;padding:12px 16px;
  border-top:1px solid var(--sb-div);flex:none}
.sb .who .av{width:32px;height:32px;flex:none;border-radius:var(--raio);background:var(--linha);
  color:var(--sinal);display:grid;place-items:center;font-weight:600;font-size:var(--t-etq)}
img.av{object-fit:cover;border:1px solid var(--linha-f)}
.sb .who .wi{min-width:0;flex:1;overflow:hidden}
.sb .who .wi b{display:block;font-size:var(--t-aux);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb .who .wi span{display:block;font-size:var(--t-etq);color:var(--sb-gp);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb .who .acao{flex:none;display:grid;place-items:center;width:30px;height:30px;
  border:0;background:transparent;border-radius:var(--raio);color:var(--sb-gp);
  cursor:pointer;transition:background .12s,color .12s}
.sb .who .acao:hover{background:var(--linha);color:var(--cal)}

/* Popover: flutua sobre o conteúdo e abre para cima. Nunca <details> aqui —
   o summary empurra a altura da lateral e o rodapé sai da tela. */
.vc{position:absolute;left:12px;right:12px;bottom:calc(100% + 8px);z-index:60;
  background:var(--campo);border:1px solid var(--linha-f);border-radius:var(--raio-cd);
  box-shadow:0 12px 32px rgba(0,0,0,.45);padding:6px;
  display:none;max-height:320px;overflow-y:auto}
.vc[data-aberto="1"]{display:block}
.vc .vc-tit{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);letter-spacing:.16em;
  text-transform:uppercase;color:var(--sb-gp);padding:8px 10px 6px}
.vc form{display:block}
.vc button{display:flex;align-items:center;width:100%;padding:8px 10px;border:0;
  background:transparent;border-radius:var(--raio);color:var(--sb-tx);
  font:inherit;font-size:var(--t-aux);text-align:left;cursor:pointer;
  white-space:nowrap;transition:background .12s,color .12s}
.vc button:hover{background:var(--linha);color:var(--cal)}
.vc .vc-div{height:1px;background:var(--sb-div);margin:6px 4px}
.vc .vc-fim button{color:var(--amarelo)}
.vc .vc-fim button:hover{background:rgba(255,196,46,.12);color:var(--amarelo)}

.sb .sep-nav{height:1px;background:var(--sb-div);margin:12px 22px 10px}
.sb .vc summary::-webkit-details-marker{display:none}
.sb .vc summary:hover{color:var(--sb-tx)}
.faixa-vc{background:var(--card);border-bottom:1px solid var(--bd);color:var(--amb);height:32px;
  font-size:var(--t-aux);padding:0 max(28px,calc((100% - var(--maxw))/2 + 28px));display:flex;align-items:center;gap:8px}
.faixa-vc b{font-weight:600}

/* ---- cabeçalho: placar de estádio ---- */
:root{--hdr-h:74px}
.hdr{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px 26px;flex-wrap:wrap;
  background:var(--noite);color:var(--cal);min-height:var(--hdr-h);
  padding:12px max(28px,calc((100% - var(--maxw))/2 + 28px));
  position:sticky;top:0;z-index:20;border-bottom:1px solid var(--linha)}
.hdr>*{position:relative}
.hdr .campo-fundo{position:absolute;inset:0;pointer-events:none}
.hdr .campo-fundo i{position:absolute;display:block}
.hdr .campo-fundo .lv{inset:0;background-image:linear-gradient(90deg,rgba(26,58,37,.55) 1px,transparent 1px);background-size:30px 100%}
.hdr .campo-fundo .ci{right:-140px;top:50%;width:240px;height:240px;border:1px solid rgba(26,58,37,.9);border-radius:50%;transform:translateY(-50%)}
.hdr .campo-fundo .ml{inset:0;border:0;
  background:linear-gradient(90deg,var(--noite) 0%,rgba(7,17,11,.96) 70%,rgba(7,17,11,.9) 100%)}
.hdr .ht{flex:0 1 auto;min-width:180px;margin-right:8px}
.hdr h1{font-family:Archivo,sans-serif;font-weight:900;font-size:var(--t-tit);letter-spacing:-.035em;color:var(--cal);line-height:1.1}
.hdr .sub{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);letter-spacing:.12em;
  text-transform:uppercase;color:var(--sb-tx);margin-top:3px}
.hdr .sub .ponto{color:var(--linha-f)}
.filtros{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.filtros .campo{width:auto;min-width:170px}
.filtros .campo[name="q"]{padding-left:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A9BAAF' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:10px center}
.filtros select.campo{padding-right:26px}
.rod{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);
  letter-spacing:.12em;text-transform:uppercase;color:var(--sinal);background:transparent;padding:0;margin:0}
.rod b{color:var(--sinal);font-weight:600}
.placar-topo{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.placar-topo>div{display:flex;flex-direction:column;justify-content:center}
.placar-topo .pl-rot{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);letter-spacing:.16em;
  text-transform:uppercase;color:var(--sb-tx);line-height:1.2}
.placar-topo .pl-num{font-family:Archivo,sans-serif;font-weight:900;font-size:23px;
  letter-spacing:-.03em;color:var(--cal);font-variant-numeric:tabular-nums;line-height:1.05}
.placar-topo .pl-num.a{color:var(--amarelo)}
.placar-topo .pl-num.r{color:var(--ver-esc)}
.placar-topo .pl-num.g{color:var(--sinal)}


/* ---- componentes de card, indicador e botão ----
   Restaurados aqui depois de terem sido removidos por engano junto com a
   faixa antiga. São a base de toda tela. */
.bg.viv{color:var(--sinal-c);background:rgba(15,122,68,.10)}
.bg.pen{color:var(--amb);background:rgba(255,196,46,.20)}
.bg.con{color:var(--ver);background:rgba(226,59,51,.10)}
.bg.enc{color:var(--enc-tx);background:var(--enc-bg)}
.dt{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.dt.off{background:transparent;border:1.5px solid currentColor;opacity:.55}
.crt{width:8px;height:12px;border-radius:2px;transform:rotate(8deg);flex:none;display:inline-block}
.crt.am{background:var(--amarelo)} .crt.vm{background:var(--vermelho)}

.bt{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:var(--t-aux);
  border-radius:var(--raio);padding:8px 14px;border:1px solid var(--bd);background:var(--card);color:var(--tx-2)}
.bt:hover{border-color:var(--sinal-c);color:var(--sinal-c)}
.bt.pr{background:var(--campo);border-color:var(--campo);color:var(--cal)}
.bt.pr:hover{background:var(--linha);border-color:var(--linha);color:var(--cal)}
.bt.dg{color:var(--ver);border-color:var(--bd)}
.bt.sm{padding:5px 10px;font-size:var(--t-aux)}
.bt{white-space:nowrap}
a.s2.informar{color:var(--sinal-c);border-bottom:1px dotted currentColor}
a.s2.informar:hover{border-bottom-style:solid}
.lnk-painel{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-aux);color:var(--tx-3);white-space:nowrap}
.lnk-painel i{font-size:var(--t-corpo)}
.lnk-painel:hover{color:var(--sinal-c)}
.bt:disabled{opacity:.5;cursor:not-allowed}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--gap);margin-bottom:var(--gap)}
.kpi{background:var(--card);border:1px solid var(--bd);border-radius:var(--raio-cd);padding:var(--pad);
  box-shadow:0 1px 2px rgba(7,17,11,.04)}
.kpi .lb{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3)}
.kpi .vl{font-family:Archivo,sans-serif;font-weight:900;font-size:32px;letter-spacing:-.03em;margin-top:6px;font-variant-numeric:tabular-nums}
.kpi .vl u{text-decoration:none;font-size:var(--t-sub);margin-left:1px}
.kpi .vl.a{color:var(--amb)} .kpi .vl.r{color:var(--ver)} .kpi .vl.g{color:var(--sinal-c)}
.kpi .s3{font-size:var(--t-aux);color:var(--tx-3);margin-top:4px}
.gr2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:stretch}
.gr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--gap);align-items:stretch}
.gr3>*{min-width:0}
.gr3 .cd{overflow:hidden}
@media (max-width:1200px){.gr3{grid-template-columns:1fr 1fr}}
/* Item de grade tem min-width:auto por padrão e não encolhe abaixo do
   conteúdo — é isso que empurra a tabela para fora do card. */
.gr2>*,.split>*{min-width:0}
.gr2 .cd,.split .cd{overflow:hidden}

.gr2>.cd,.split>.cd,.split>.dt-pane{display:flex;flex-direction:column}
.gr2>.cd>table,.split>.cd>table{flex:0 0 auto}
.gr2>.cd>.cb,.split>.cd>.cb{flex:1 1 auto}
.gr2>.cd>.cf,.split>.cd>.cf{margin-top:auto}
.split>.dt-pane>.dacts:last-child{margin-top:auto}
.gr2>*{min-width:0}
.bi{margin-bottom:14px}
.bi .rw{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.bi .lb2{font-size:var(--t-corpo)}
.bi .vv{font-family:'IBM Plex Mono',monospace;font-size:var(--t-aux);font-variant-numeric:tabular-nums}

/* Na gaveta, rótulo em cima e valor embaixo — campo com seletor já fazia
   isso, e campo de leitura ficava na mesma linha, parecendo outra coisa. */
/* Campos da gaveta: desenhados, não os nativos do navegador. A seta do
   sistema operacional e o "dd/mm/aaaa" cru eram o que mais destoava. */
.gaveta .gv-cp .campo{height:44px;padding:0 12px;border-radius:8px;background:var(--card);
  border:1px solid var(--bd);font-size:var(--t-corpo);color:var(--tx);width:100%}
.gaveta .gv-cp select.campo{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer}
.gaveta .gv-cp .campo:focus{outline:0;border-color:var(--sinal-c);box-shadow:0 0 0 3px var(--var-l)}
.gaveta .gv-cp .campo:hover{border-color:var(--linha-f)}

/* Invólucro: guarda a seta desenhada, o ícone de calendário e o avatar. */
.cx-campo{position:relative;display:block}
.cx-campo>.seta{position:absolute;right:11px;top:50%;transform:translateY(-50%);
  pointer-events:none;color:var(--tx-3);font-size:16px}
.cx-campo>.ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  pointer-events:none;color:var(--tx-3);font-size:17px}
.cx-campo.com-ico .campo{padding-left:38px}
.cx-campo>.av-campo{position:absolute;left:9px;top:50%;transform:translateY(-50%);
  pointer-events:none;width:24px;height:24px;border-radius:6px;background:var(--var-l);
  color:var(--sinal-c);display:grid;place-items:center;
  font-size:var(--t-etq);font-weight:600;letter-spacing:.02em}
.cx-campo.com-av .campo{padding-left:42px}
.gaveta .gv-cp input[type=date].campo::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer}

.gaveta .gv-cp .bi{display:flex;flex-direction:column;gap:5px;margin-bottom:0}
.gaveta .gv-cp .bi .lb2{font-size:var(--t-aux);font-weight:500;color:var(--tx-2)}
.gaveta .gv-cp .bi .vv{font-family:Sora,system-ui,sans-serif;font-size:var(--t-corpo);color:var(--tx)}
.gaveta .gv-cp .bloco-t{font-size:var(--t-aux);font-weight:500;color:var(--tx-2);margin-bottom:5px}
.gaveta .gv-cp .desc{font-size:var(--t-corpo);color:var(--tx-2);line-height:1.6}
.gaveta .doc{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--bd);
  border-radius:8px;background:var(--card)}
.gaveta .doc i{font-size:19px;color:var(--tx-3);flex:none}
.gaveta .doc b{display:block;font-size:var(--t-aux);font-weight:500}
.gaveta .doc span{display:block;font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);color:var(--tx-3)}
.gaveta .docs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gaveta .prazo-nota{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);color:var(--tx-3);margin-top:4px}
.gaveta .prazo-nota.a{color:var(--amb)} .gaveta .prazo-nota.r{color:var(--ver)}
.bi .vv i{color:var(--tx-4);font-style:normal}
.tk{height:6px;background:var(--div);border-radius:3px;overflow:hidden}
.tk i{display:block;height:100%;background:var(--var);border-radius:3px}
.tk i.hi{background:var(--sinal-c)} .tk i.lo{background:var(--amarelo)}

.cd{background:var(--card);border:1px solid var(--bd);border-radius:var(--raio-cd);overflow-x:auto;
  box-shadow:0 1px 2px rgba(7,17,11,.04);height:auto}
.ch{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);padding:15px var(--pad);border-bottom:1px solid var(--div)}
.ch h3{font-family:Archivo,sans-serif;font-weight:800;font-size:var(--t-corpo);letter-spacing:-.01em}
.hint{font-size:var(--t-aux);color:var(--tx-3);text-align:right;line-height:1.45}
.hint.etq{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);letter-spacing:.1em;text-transform:uppercase}
.cb{padding:var(--pad)}
.cf{padding:12px var(--pad);border-top:1px solid var(--div);display:flex;align-items:center;justify-content:space-between;gap:12px}
.ct2{font-size:var(--t-aux);color:var(--tx-3);line-height:1.5}

/* Cabeçalho sem placar não precisa reservar a coluna da direita. */
.hdr.sem-placar .ht{max-width:none}

/* ---- barra de controle (componente de sistema) ----
   Altura fixa e as mesmas zonas em toda tela. Nenhum controle de filtro
   escrito na faixa: tudo é ícone de 34px, e o que muda entre telas é o
   conteúdo do painel. */
.barra{display:flex;align-items:center;gap:14px;height:56px;
  padding:0 12px 0 max(24px,calc((100% - var(--maxw))/2 + 24px));
  background:var(--card);border-bottom:1px solid var(--bd)}
.barra .esq{flex:1;min-width:0;display:flex;align-items:center;gap:14px;overflow:hidden}
.barra .dir{flex:none;display:flex;align-items:center;gap:7px}

.barra .busca{display:flex;align-items:center;gap:9px;width:230px;height:36px;padding:0 11px;
  background:var(--campo-inativo);border:1px solid var(--bd);border-radius:8px;flex:none}
.barra .busca i{color:var(--tx-3);font-size:var(--t-corpo)}
.barra .busca input{flex:1;min-width:0;border:0;background:transparent;font:inherit;
  font-size:var(--t-corpo);color:var(--tx)}
.barra .busca input::placeholder{color:var(--tx-3)}
.barra .busca kbd{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);
  background:var(--card);border:1px solid var(--bd);border-radius:5px;padding:1px 5px;color:var(--tx-3)}
.barra .total{font-size:var(--t-corpo);color:var(--tx-2);white-space:nowrap;flex:none}
.barra .total b{font-weight:700;color:var(--tx);font-variant-numeric:tabular-nums}
.barra .limpar{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-corpo);
  font-weight:600;color:var(--sinal-c);white-space:nowrap;flex:none;cursor:pointer}
.barra .div{width:1px;height:20px;background:var(--bd);margin:0 7px}

/* Ícone de controle: sem moldura quando inativo, escuro quando ativo. */
/* Controle de faixa: precisa parecer clicável parado, não só no hover.
   Moldura leve, ícone em tamanho de leitura e cor de texto cheia. */
.bt-ic{position:relative;display:grid;place-items:center;width:36px;height:36px;
  border:1px solid var(--bd);background:var(--card);border-radius:8px;color:var(--tx);
  cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.bt-ic i{font-size:19px;line-height:1}
.bt-ic:hover{background:var(--fundo);border-color:var(--linha-f);color:var(--tx)}
.bt-ic.on{background:var(--campo);border-color:var(--campo);color:var(--cal)}
.bt-ic.on i{color:var(--sinal)}
.bt-ic .ct{position:absolute;top:-6px;right:-6px;font-family:'IBM Plex Mono',monospace;
  font-size:var(--t-etq);font-weight:700;background:var(--sinal);color:var(--var-d);
  border:2px solid var(--card);border-radius:9px;min-width:18px;height:18px;
  display:grid;place-items:center;padding:0 4px}

/* Painel: filtro é regra que se lê como frase, não caixa marcada. */
.painel{position:absolute;top:calc(100% + 8px);right:0;width:520px;max-width:92vw;z-index:60;
  background:var(--card);border:1px solid var(--bd);border-radius:10px;
  box-shadow:0 1px 2px rgba(7,17,11,.04),0 18px 40px rgba(7,17,11,.16);display:none}
.painel[data-aberto="1"]{display:block}
.painel .pn-hd{display:flex;align-items:center;gap:12px;padding:16px 18px 10px}
.painel .pn-hd h3{font-family:Archivo,sans-serif;font-weight:800;font-size:var(--t-sub);letter-spacing:-.015em}
.painel .pn-hd .ativos{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);letter-spacing:.14em;
  text-transform:uppercase;color:var(--sinal-c);background:var(--var-l);border-radius:20px;padding:3px 9px}
.painel .pn-cp{padding:0 18px 14px;display:flex;flex-direction:column;gap:8px;max-height:440px;overflow-y:auto}
.painel.pn-estreito{width:300px}

/* Construtor de regras: cada grupo é uma condição alternativa. */
.construtor{display:flex;flex-direction:column;gap:8px}
.construtor .grupo{display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:8px;background:var(--fundo)}
.construtor .grupo+.grupo{position:relative;margin-top:14px}
.construtor .grupo+.grupo::before{content:'ou';position:absolute;top:-13px;left:10px;
  font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx-3);background:var(--card);padding:0 6px}
.construtor .regra{background:var(--card)}
.construtor .tira{border:0;background:transparent;cursor:pointer}
.construtor-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.novo-filtro{border:1px solid var(--bd);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:6px}
.novo-filtro[hidden]{display:none}
.lista-campos{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow-y:auto}
.valor-livre{display:flex;gap:6px;align-items:center}
.recorte-lin{display:flex;align-items:center;gap:4px}
.recorte-lin .opc{flex:1}
.recorte-lin .tira{border:0;background:transparent;color:var(--tx-4);cursor:pointer;padding:4px}
.recorte-lin .tira:hover{color:var(--ver)}
.salvar-recorte{display:flex;gap:6px;margin-top:8px}
.salvar-recorte .campo{flex:1;height:32px}
.painel .opc{width:100%;border:0;background:transparent;font:inherit;text-align:left;cursor:pointer}
.painel .opc .marca{flex:none;width:16px;color:var(--sinal)}

/* Densidade: a linha encolhe sem mudar a leitura — o subtítulo continua lá. */
.vw[data-densidade="compacta"] tbody td{padding:7px var(--pad)}
.vw[data-densidade="compacta"] .s2{margin-top:1px}
.vw[data-densidade="compacta"] thead th{padding:8px var(--pad)}
.painel .pn-vazio{font-size:var(--t-aux);color:var(--tx-3)}
.painel .pn-pe{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px;border-top:1px solid var(--div);font-size:var(--t-aux);color:var(--tx-3)}

.regra{display:flex;align-items:center;height:36px;background:var(--campo-inativo);border-radius:8px;
  padding:3px;font-size:var(--t-corpo)}
.regra .op{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx-3);width:44px;text-align:center;flex:none}
.regra .campo-n{display:flex;align-items:center;height:30px;padding:0 10px;background:var(--card);
  border-radius:6px;font-weight:600;white-space:nowrap;flex:none;box-shadow:0 1px 2px rgba(7,17,11,.06)}
.regra .e{color:var(--tx-3);padding:0 8px;flex:none}
.regra .val{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;
  background:var(--campo);color:var(--cal);border-radius:6px;font-weight:500;
  white-space:nowrap;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.regra .tira{margin-left:auto;margin-right:8px;color:var(--tx-4);flex:none;cursor:pointer}
.regra .tira:hover{color:var(--ver)}

.campo-lista{margin-top:6px}
.campo-lista-t{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-3);padding:8px 2px 6px}
.painel .opc{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;
  font-size:var(--t-corpo);color:var(--tx-2);transition:background .12s,color .12s}
.painel .opc:hover{background:var(--campo-inativo);color:var(--tx)}
.painel .opc.on{background:var(--campo);color:var(--cal);font-weight:500}
.painel .opc span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.painel .opc b{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);font-weight:500;color:var(--tx-3)}
.painel .opc.on b{color:var(--sinal)}

/* ---- pessoa com foto na tabela ---- */
.pes{display:flex;align-items:center;gap:11px;min-width:0}
.pes-foto{width:30px;height:30px;min-width:30px;border-radius:50%;object-fit:cover;
  border:1px solid var(--bd);background:var(--enc-bg);display:grid;place-items:center}
.pes-ini{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);letter-spacing:.04em;color:var(--tx-3)}
.pes-nm{min-width:0}

/* Resumo do que já está completo: uma linha com bola cheia, no lugar de
   barras cheias repetidas que não informam nada. */
.completo{display:flex;align-items:center;gap:9px;font-size:var(--t-aux);color:var(--tx-2);
  padding:2px 0 6px}
.completo .bg{padding:3px 6px}

/* Nome da contraparte: a célula mais importante da linha não precisa de três
   ênfases ao mesmo tempo. Fica o peso; o verde é do hover. */
.cpt{color:var(--tx);font-weight:500;text-transform:capitalize}
.cpt:hover{color:var(--sinal-c)}
/* Ausência de dado: cinza claro, sem virar zero e sem parecer defeito. */
.ausente{color:var(--tx-4);white-space:nowrap}

/* ---- linha do tempo da Auditoria ----
   Horário em mono à esquerda, marcador colorido pelo tipo de registro e o
   que mudou embaixo. A cor diz o que aconteceu; o texto diz onde. */
.linha-tempo{padding:6px var(--pad) var(--pad)}
.lt-dia{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-3);padding:16px 0 8px;position:sticky;top:0;
  background:var(--card);z-index:1}
.lt-item{display:flex;align-items:flex-start;gap:12px;padding:7px 0;position:relative}
.lt-hora{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);color:var(--tx-4);
  flex:0 0 42px;padding-top:3px;font-variant-numeric:tabular-nums}
.lt-marca{flex:0 0 8px;width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--tx-4)}
.lt-marca.criou{background:var(--sinal-c)}
.lt-marca.alterou{background:var(--neutro)}
.lt-marca.decidiu{background:var(--amarelo)}
.lt-marca.acesso{background:var(--var)}
.lt-marca.excluiu{background:var(--vermelho)}
.lt-texto{min-width:0;font-size:var(--t-aux);color:var(--tx-2);line-height:1.5}
.lt-texto b{color:var(--tx);font-weight:600}
.lt-ref{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);color:var(--tx-4);margin-left:2px}
a.lt-ref:hover{color:var(--sinal-c)}
.lt-mudanca{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:3px;
  font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);color:var(--tx-3);min-width:0}
.lt-mudanca i{font-size:var(--t-aux);color:var(--tx-4)}
.lt-mudanca .antes{text-decoration:line-through;opacity:.75;overflow-wrap:anywhere}
.lt-mudanca .depois{color:var(--tx-2);overflow-wrap:anywhere}

/* ---- faixa de ciclo de vida ----
   As oito etapas do contrato, em ordem. Etapa vazia continua visível: o
   ciclo é o mesmo com ou sem contrato nela, e o buraco no meio é informação. */
.ciclo{display:flex;gap:2px;background:var(--card);border:1px solid var(--bd);
  border-radius:var(--raio-cd);overflow:hidden;box-shadow:0 1px 2px rgba(7,17,11,.04)}
.ciclo a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px;
  padding:12px 12px 13px;border-right:1px solid var(--div);position:relative;
  transition:background .12s}
.ciclo a:last-child{border-right:0}
.ciclo a:hover{background:var(--fundo)}
.ciclo .et{font-size:var(--t-etq);color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ciclo .qt{font-family:Archivo,sans-serif;font-weight:900;font-size:var(--t-sub);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--tx)}
.ciclo .qt.zero{color:var(--tx-4)}
.ciclo .qt.a{color:var(--amb)}
.ciclo .qt.g{color:var(--sinal-c)}
.ciclo a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--div)}
.ciclo a.andamento::after{background:var(--var)}
.ciclo a.espera::after{background:var(--amarelo)}
.ciclo a.vigente::after{background:var(--sinal-c)}
.ciclo a.fim::after{background:var(--enc-tx);opacity:.5}

.opc-linha{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:var(--t-corpo);cursor:pointer}
.opc-linha input{width:16px;height:16px}

/* ---- placar de economia ----
   Economia é o número que abre a tela, em verde. Gasto é sinal negativo, em
   vermelho — nunca verde, por menor que seja. */
.hdr .placar-topo>div.destaque{padding-right:26px;border-right:1px solid var(--placar-div)}
.hdr .placar-topo .pl-rot.g{color:var(--sinal)}
.hdr .placar-topo .pl-num.xl{font-size:30px;line-height:1.02}
.hdr .placar-topo .pl-sub{display:block;font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);
  color:var(--sb-tx);margin-top:3px;white-space:nowrap}
.hdr .placar-topo>div{display:flex;flex-direction:column;align-items:flex-end}

.faixa-placar{flex:none;margin:20px max(24px,calc((100% - var(--maxw))/2 + 24px)) 0;
  position:relative;overflow:hidden;background:var(--noite);border-radius:8px;
  padding:20px 24px;display:grid;grid-template-columns:280px 1fr 1fr 1fr;gap:28px}
.faixa-placar .cpo{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(26,58,37,.5) 1px,transparent 1px);background-size:32px 100%}
.faixa-placar .circ{position:absolute;left:44%;top:50%;width:210px;height:210px;
  border:1px solid var(--placar-anel);border-radius:50%;transform:translate(-50%,-50%)}
.faixa-placar>div{position:relative;display:flex;flex-direction:column;justify-content:center}
.faixa-placar .grande{font-family:Archivo,sans-serif;font-weight:900;font-size:44px;
  letter-spacing:-.04em;line-height:.92;color:var(--sinal);font-variant-numeric:tabular-nums}
.faixa-placar .leg{font-size:var(--t-aux);color:var(--sb-tx);margin-top:8px}
.faixa-placar .leg b{color:var(--cal);font-weight:500}
.faixa-placar .tit-bloco{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);
  letter-spacing:.14em;text-transform:uppercase;color:var(--sb-gp);margin-bottom:12px}
.faixa-placar .lin-gol{display:flex;align-items:baseline;gap:10px;padding:5px 0;font-size:var(--t-aux);color:var(--sb-tx)}
.faixa-placar .lin-gol b{font-family:Archivo,sans-serif;font-weight:900;font-size:19px;color:var(--sinal);min-width:30px}
.faixa-placar .lin-gol span{margin-left:auto;color:var(--cal);font-variant-numeric:tabular-nums}
.faixa-placar .barras{display:flex;align-items:flex-end;gap:10px;height:92px}
.faixa-placar .barras>div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.faixa-placar .barras i{display:block;width:100%;background:var(--placar-barra);border-radius:2px}
.faixa-placar .barras i.alta{background:var(--sinal)}
.faixa-placar .barras u{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);
  color:var(--sb-gp);text-decoration:none}
.faixa-placar .frase{font-size:var(--t-aux);color:var(--sb-tx);margin-top:12px}

/* Cobertura e concentração: barra de gasto nunca em verde. */
.barra-medida{display:flex;align-items:center;gap:10px;padding:7px 0}
.barra-medida .rot{font-size:var(--t-aux);color:var(--tx-2);width:150px;flex:none}
.barra-medida .tk{flex:1;height:8px;background:var(--div);border-radius:4px;overflow:hidden}
.barra-medida .tk i{display:block;height:100%;background:var(--tx-3)}
.barra-medida .tk i.ruim{background:var(--vermelho)}
.barra-medida .tk i.meio{background:var(--amarelo)}
.barra-medida .tk i.g1{background:var(--gasto-1)}
.barra-medida .tk i.g2{background:var(--gasto-2)}
.barra-medida .tk i.g3{background:var(--gasto-3)}
.barra-medida .vlr{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);
  color:var(--tx-3);width:104px;text-align:right;flex:none;font-variant-numeric:tabular-nums}

/* Ranking: ordena por economia, e quem não tem dono fica fora da disputa. */
.rank-lin{display:grid;grid-template-columns:22px 126px 1fr 1fr 58px;gap:12px;
  align-items:center;height:38px;border-bottom:1px solid var(--linha-clara)}
.rank-lin .pos{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);color:var(--tx-3)}
.rank-lin .nm{font-size:var(--t-aux);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-lin .bar{height:8px;background:var(--div);border-radius:4px;overflow:hidden}
.rank-lin .bar i{display:block;height:100%}
.rank-lin .bar.eco i{background:var(--sinal-c)}
.rank-lin .bar.cus i{background:var(--ver)}
.rank-lin .ap{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);color:var(--tx-3);text-align:right}
.rank-lin.fora .nm,.rank-lin.fora .pos{color:var(--tx-4)}

/* Primeira linha em altura fixa: com auto, o card mais alto empurra o resto. */
.grade-diretoria{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--gap);
  grid-auto-rows:400px;padding:var(--gap) max(24px,calc((100% - var(--maxw))/2 + 24px))}
.grade-diretoria>.cd{min-height:0;overflow:hidden;display:flex;flex-direction:column}
.grade-diretoria>.cd>.cb{overflow-y:auto}
.grade-diretoria .largo{grid-column:span 2}
.grade-diretoria .empilhado{display:flex;flex-direction:column;gap:var(--gap);min-height:0}
.grade-diretoria .empilhado>.cd{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.grade-diretoria .empilhado>.cd>.cb{overflow-y:auto}

.dec{position:relative}
.dec summary{list-style:none;cursor:pointer}
.dec summary::-webkit-details-marker{display:none}
.dec-cx{position:absolute;right:0;top:calc(100% + 6px);z-index:40;width:330px;
  background:var(--card);border:1px solid var(--bd);border-radius:var(--raio-cd);
  box-shadow:0 10px 26px rgba(7,17,11,.16);padding:12px;display:flex;flex-direction:column;gap:14px}
.dec-frm{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dec-frm .campo{flex:1;min-width:120px;height:32px}
.dec-frm .s2{flex-basis:100%;margin-top:0}

.col-nome{min-width:230px}
/* Seletor dentro de tabela encolhe com a coluna: sem isto ele segura a
   largura toda e o nome quebra letra a letra. */
.vw table td select.campo{width:100%;min-width:0;max-width:100%}
.vw table td .cel{min-width:0}

/* ---- painel do gestor ----
   Duas colunas, primeira linha em altura fixa. Com auto, o card mais alto
   empurra o resto e estoura a moldura. */
.grade-gestor{display:grid;grid-template-columns:1fr 372px;gap:var(--gap);
  grid-auto-rows:414px;padding:var(--gap) max(24px,calc((100% - var(--maxw))/2 + 24px))}
.grade-gestor>.cd{min-height:0;overflow:hidden;display:flex;flex-direction:column}
.grade-gestor>.cd>.cb,.grade-gestor>.cd>table{overflow-y:auto}
.fila-lin{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--div)}
.fila-lin:last-child{border-bottom:0}
.fila-lin .txt{flex:1;min-width:0}
.fila-lin .txt b{display:block;font-size:var(--t-corpo);font-weight:500}
.fila-lin .av{width:30px;height:30px;border-radius:var(--raio);background:var(--var-l);
  color:var(--sinal-c);display:grid;place-items:center;font-size:var(--t-etq);font-weight:600;flex:none}
.barra-medida .media{flex-basis:100%;font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);
  color:var(--tx-3);padding-left:160px;margin-top:-2px}

/* ---- quadro por etapa ----
   Cinco colunas em 1fr: cabem em 1280px sem rolagem horizontal. Concluídas
   não são coluna nem trilho — saem por um ícone na faixa. */
.visao{display:flex;height:36px;background:var(--campo-inativo);border:1px solid var(--bd);
  border-radius:8px;padding:3px;gap:2px}
.visao a{display:grid;place-items:center;width:32px;border-radius:6px;color:var(--tx-2);
  transition:background .12s,color .12s}
.visao a i{font-size:18px}
.visao a.on{background:var(--card);color:var(--sinal-c);box-shadow:0 1px 2px rgba(7,17,11,.10)}

/* Cinco colunas por padrão; a tela declara outra contagem em --cols quando
   o ciclo dela tem outro tamanho. Nunca rolagem horizontal. */
.quadro{display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));gap:12px;
  padding:16px max(24px,calc((100% - var(--maxw))/2 + 24px)) 20px;flex:1;min-height:0}
.quadro>*{min-width:0}
.col{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}
.col-tit{display:flex;align-items:center;gap:8px;height:26px;padding:0 2px}
.col-tit b{font-size:var(--t-aux);font-weight:600}
.col-tit .n{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);color:var(--tx-3)}
.col-corpo{background:var(--enc-bg);border-radius:6px;padding:8px;display:flex;flex-direction:column;
  gap:8px;flex:1;min-height:0;overflow-y:auto}

/* Etapa de espera: marcador, borda tracejada e linha de contexto. Nunca fundo. */
.col.espera .col-corpo{border-top:2px dashed var(--amarelo)}
.col.espera .col-tit .n{color:var(--amb)}
.col-corpo .contexto{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);letter-spacing:.14em;
  text-transform:uppercase;color:var(--amb);padding:1px 3px 3px}
.col.alvo .col-corpo{outline:2px dashed var(--sinal-c);outline-offset:-3px}
.col .novo{display:flex;align-items:center;justify-content:center;gap:6px;height:34px;
  border:1px dashed var(--bd);border-radius:var(--raio);color:var(--tx-3);
  font-size:var(--t-aux);background:transparent}
.col .novo:hover{border-color:var(--sinal-c);color:var(--sinal-c)}
.col .vazia{font-size:var(--t-aux);color:var(--tx-3);padding:8px 3px}

.dcard{position:relative;background:var(--card);border:1px solid var(--bd);border-radius:var(--raio);
  padding:11px 12px;box-shadow:0 1px 2px rgba(7,17,11,.05);cursor:pointer;
  transition:border-color .12s,box-shadow .12s}
.dcard:hover,.dcard:focus-visible{border-color:var(--linha-f);box-shadow:0 2px 6px rgba(7,17,11,.08)}
.dcard.aberta{border:2px solid var(--sinal-c);padding:10px 11px;box-shadow:0 2px 10px rgba(15,122,68,.16)}
.dcard.arrastando{opacity:.45}
.dcard .topo{display:flex;align-items:center;gap:8px}
.dcard .id{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);color:var(--tx-3)}
.dcard .tit{font-size:var(--t-corpo);font-weight:500;margin-top:8px;line-height:1.35}
.dcard .sub{font-size:var(--t-aux);color:var(--tx-3);margin-top:4px}
.dcard .sub.falta{color:var(--ver)}
.s2.falta{color:var(--ver)}
.dcard .pe{display:flex;align-items:center;gap:8px;margin-top:11px}
.dcard .pe .av{width:22px;height:22px;border-radius:var(--raio);background:var(--var-l);
  color:var(--sinal-c);display:grid;place-items:center;font-size:var(--t-etq);font-weight:600}
.dcard .pe .prazo{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);color:var(--tx-3)}
.dcard .pe .prazo.a{color:var(--amb)} .dcard .pe .prazo.r{color:var(--ver)}
.dcard .pe .prazo.sem{color:var(--tx-4)}
.dcard .pe .ico{color:var(--tx-4);font-size:var(--t-aux)}

/* Prioridade: três traços. Prioridade é opinião; atraso é fato e vira badge. */
.prio{display:flex;align-items:center;gap:3px}
.prio i{width:3px;height:11px;border-radius:1px;background:var(--bd);display:block}
.prio.urgente i{background:var(--ver)}
.prio.alta i:nth-child(2),.prio.alta i:nth-child(3){background:var(--amb)}
.prio.normal i:nth-child(2){background:var(--tx-3)}
.prio.baixa i:nth-child(1){background:var(--tx-4)}

/* Sem responsável: o avatar vira ação pendente. */
.escalar{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;
  border:1px dashed var(--bd);border-radius:var(--raio);font-size:var(--t-etq);
  font-weight:600;color:var(--amb)}

.dcard .mais-menu{position:absolute;right:6px;top:6px;opacity:0;border:0;background:transparent;
  color:var(--tx-3);border-radius:var(--raio);width:24px;height:24px;cursor:pointer}
.dcard:hover .mais-menu,.dcard:focus-within .mais-menu{opacity:1}
.dcard .mover{position:absolute;right:6px;top:30px;z-index:40;background:var(--card);
  border:1px solid var(--bd);border-radius:var(--raio);box-shadow:0 8px 20px rgba(7,17,11,.14);
  padding:4px;display:none;min-width:190px}
.dcard .mover[data-aberto="1"]{display:block}
.dcard .mover button{display:block;width:100%;text-align:left;border:0;background:transparent;
  padding:7px 9px;border-radius:var(--raio);font:inherit;font-size:var(--t-aux);color:var(--tx-2);cursor:pointer}
.dcard .mover button:hover{background:var(--fundo);color:var(--tx)}

/* ---- gaveta de detalhe ----
   Abre sobre o quadro, com véu. A coluna de origem continua visível e o
   cartão aberto fica marcado — o contexto não se perde ao olhar o detalhe. */
.veu{position:fixed;inset:0;background:rgba(7,17,11,.28);z-index:70}
.veu[hidden],.gaveta[hidden]{display:none}
.gaveta{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:96vw;z-index:71;
  background:var(--card);box-shadow:-18px 0 48px rgba(7,17,11,.22);display:flex;flex-direction:column}
.gaveta .gv-hd{position:relative;overflow:hidden;flex:none;background:var(--noite);
  color:var(--cal);padding:18px 22px 20px}
.gaveta .gv-hd .cpo{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(26,58,37,.5) 1px,transparent 1px);background-size:30px 100%}
.gaveta .gv-hd>*{position:relative}
.gaveta .gv-hd .lin{display:flex;align-items:center;gap:10px}
.gaveta .gv-hd .id{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);color:var(--sb-tx)}
.gaveta .gv-hd h2{font-family:Archivo,sans-serif;font-weight:900;font-size:var(--t-tit);
  letter-spacing:-.03em;margin-top:12px;line-height:1.15}
.gaveta .gv-hd .ctx{font-size:var(--t-aux);color:var(--sb-tx);margin-top:6px}
.gaveta .gv-nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.gaveta .gv-nav button,.gaveta .gv-nav a{display:grid;place-items:center;width:30px;height:30px;border:0;
  background:transparent;border-radius:7px;color:var(--sb-gp);cursor:pointer}
.gaveta .gv-nav button:hover,.gaveta .gv-nav a:hover{background:var(--linha);color:var(--cal)}
.gaveta .gv-abas{flex:none;display:flex;align-items:center;gap:22px;padding:0 22px;height:44px;
  border-bottom:1px solid var(--div)}
.gaveta .gv-abas button{border:0;background:transparent;font:inherit;font-size:var(--t-aux);
  color:var(--tx-2);height:100%;cursor:pointer}
.gaveta .gv-abas button.on{font-weight:600;color:var(--tx);box-shadow:inset 0 -2px 0 var(--campo)}
.gaveta .gv-cp{flex:1;min-height:0;padding:18px 22px;display:flex;flex-direction:column;
  gap:16px;overflow-y:auto}
.gaveta .gv-pe{flex:none;display:flex;align-items:center;gap:9px;padding:14px 22px;
  border-top:1px solid var(--div)}
.gaveta .gv-cp .bi{margin-bottom:0}
.gaveta .carregando{padding:28px 22px;color:var(--tx-3);font-size:var(--t-aux)}
.gaveta .gv-nota{flex:none;padding:8px 22px;font-size:var(--t-aux);color:var(--sinal-c);
  background:var(--var-l);border-bottom:1px solid var(--div)}
.gaveta .gv-nota.erro{color:var(--ver);background:rgba(226,59,51,.07)}
.gaveta .gv-nota[hidden]{display:none}
.gaveta .gv-cp .campo{height:34px;font-size:var(--t-aux)}

/* ---- selo de situação ----
   Um sinal por informação. O rótulo é mono maiúsculo, o cartão é o marcador,
   e não há pílula: fundo colorido atrás de texto colorido com ícone colorido
   são três estímulos para o mesmo dado. */
.selo{display:inline-flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;
  font-size:var(--t-etq);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.selo.divergente{color:var(--ver)}
.selo i{flex:none}
/* Dentro do card do quadro e da gaveta o selo continua legível sobre o fundo
   claro; no cabeçalho escuro a cor é a da paleta viva. */
.dcard .selo,.gv-hd .selo{font-size:var(--t-etq)}
.gv-hd .selo.divergente{color:var(--vermelho)}
.gv-hd .selo.pendente{color:var(--amarelo)}
.gv-hd .selo.vigente{color:var(--sinal)}
.gv-hd .selo.encerrado{color:var(--sb-tx)}
.selo.pendente{color:var(--amb)}
.selo.vigente{color:var(--sinal-c)}
.selo.encerrado{color:var(--tx-3)}
.hdr .selo,.dt-pane .hd .selo{color:inherit}
.dt-pane .hd .selo.divergente{color:var(--vermelho)}
.dt-pane .hd .selo.pendente{color:var(--amarelo)}

/* Título de grupo dentro da tabela: o rótulo aparece uma vez. */
tbody tr.grp td{padding:12px var(--pad) 6px;background:var(--fundo);border-bottom:1px solid var(--div)}
tbody tr.grp:hover td{background:var(--fundo)}
.marcador{display:inline-flex;align-items:center;margin-right:9px;vertical-align:-1px}
.dt-pane .hd .id{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sep-selo{color:var(--sb-gp)}

/* ---- ação em lote ----
   Aparece só quando há linha marcada: barra permanente em tela sem seleção é
   espaço ocupado por uma ação que ninguém pediu. */
.lote{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px var(--pad);border-bottom:1px solid var(--div);background:var(--campo-inativo)}
.lote[hidden]{display:none}
.lote .lote-n{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx-3)}
.lote .lote-n b{color:var(--tx);font-size:var(--t-aux)}
.lote .campo{width:auto;min-width:170px;flex:0 1 auto}
.lote .lote-sep{width:1px;align-self:stretch;background:var(--bd);margin:0 2px}
td.marca,th input[type=checkbox]{cursor:pointer}
td.marca{text-align:center}

/* ---- ações de linha ----
   Ícone fantasma alinhado à direita, visível no hover da linha e sempre no
   foco por teclado. Cartão vermelho fica para botão em tamanho real e para o
   diálogo de confirmação: em ação de linha ele vira ruído. */
.acoes-linha{display:flex;gap:4px;justify-content:flex-end;opacity:0;transition:opacity .12s}
tbody tr:hover .acoes-linha,tbody tr:focus-within .acoes-linha{opacity:1}
.acoes-linha a,.acoes-linha button{display:grid;place-items:center;width:32px;height:32px;border:0;
  background:transparent;border-radius:var(--raio);color:var(--tx-3);cursor:pointer;
  transition:background .12s,color .12s}
.acoes-linha a:hover,.acoes-linha button:hover{background:var(--fundo);color:var(--tx)}
.acoes-linha .dg:hover{background:rgba(226,59,51,.08);color:var(--ver)}

/* ---- barra de abas ----
   Clara, entre a faixa de controle e o conteúdo. Não repete o título da tela:
   o destino é o título; a aba é onde dentro dele você está. */
.abas{display:flex;align-items:stretch;gap:26px;height:44px;overflow-x:auto;scrollbar-width:none;
  padding:0 max(28px,calc((100% - var(--maxw))/2 + 28px));
  background:var(--card);border-bottom:1px solid var(--bd)}
.abas::-webkit-scrollbar{height:0}
.abas a{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:var(--t-corpo);color:var(--tx-2);
  transition:color .12s, box-shadow .12s}
.abas a:hover{color:var(--tx)}
.abas a.on{font-weight:600;color:var(--tx);box-shadow:inset 0 -2px 0 var(--campo)}
.abas a .ct3{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);color:var(--tx-3)}
.abas a.off{color:var(--tx-4);pointer-events:none}

/* ---- atalho da busca ---- */
.bf-busca{position:relative}
.bf-busca kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;
  font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);color:var(--tx-4);
  border:1px solid var(--bd);border-radius:var(--raio);padding:1px 5px;background:var(--campo-inativo)}
.bf-busca .campo.busca{padding-right:58px}

/* Duas listas de tamanhos diferentes não precisam dividir a linha: empilhadas
   em largura cheia, cada uma cabe sem rolagem e sem card cortado. */
.empilha{display:flex;flex-direction:column;gap:var(--gap)}

/* ---- zona de perigo: ação irreversível fora do caminho de navegação ---- */
.zona-perigo{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:28px;padding-top:20px;border-top:1px solid var(--div)}
.zona-perigo p{font-size:var(--t-aux);color:var(--tx-3);max-width:52ch;line-height:1.55}
.bt-perigo{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;
  border:1px solid var(--bd);border-radius:var(--raio);background:var(--card);
  font-size:var(--t-corpo);font-weight:600;color:var(--tx-2);white-space:nowrap;
  cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.bt-perigo:hover{background:rgba(226,59,51,.06);border-color:var(--ver);color:var(--ver)}

/* Voltar é navegação de contexto, não ação: vive no cabeçalho, acima do título. */
.volta{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-aux);
  color:var(--sb-tx);margin-bottom:6px;transition:color .12s}
.volta:hover{color:var(--cal)}
.volta i{font-size:var(--t-corpo)}
.hdr .navreg{background:transparent;border-color:var(--linha-f)}
.hdr .navreg a{color:var(--sb-tx)}
.hdr .navreg a:hover{background:var(--linha);color:var(--cal)}
.hdr .navreg b{color:var(--sb-tx)}
.hdr .sino{color:var(--cal);border-color:var(--linha-f)}
.hdr .hdr-nav{display:flex;align-items:center;gap:10px}

/* ---- voltar e navegação entre registros ---- */

.navreg{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--bd);border-radius:var(--raio);
  padding:1px 4px;background:var(--card)}
.navreg a,.navreg .off{display:grid;place-items:center;width:26px;height:26px;border-radius:var(--raio);
  color:var(--tx-3);transition:background .12s,color .12s}
.navreg a:hover{background:var(--fundo);color:var(--tx)}
.navreg .off{color:var(--tx-4);opacity:.5}
.navreg b{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);font-weight:500;color:var(--tx-3);
  padding:0 5px;white-space:nowrap}

/* ---- aviso de alteração não salva ---- */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;
  background:rgba(7,17,11,.55)}
.modal[hidden]{display:none}
.modal .cx{background:var(--card);border:1px solid var(--bd);border-radius:var(--raio-cd);
  width:100%;max-width:460px;box-shadow:0 8px 24px rgba(7,17,11,.18)}
.modal .cx .cb{padding:var(--pad)}
.modal .cx h4{font-family:Archivo,sans-serif;font-weight:800;font-size:var(--t-sub);margin-bottom:8px}
.modal .cx p{font-size:var(--t-aux);color:var(--tx-3);line-height:1.55}
.modal .cx .acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}

/* ---- sino de alertas ---- */
/* O sino do cabeçalho escuro é o mesmo controle da faixa, na cor de lá. */
.sino{position:relative;display:grid;place-items:center;width:36px;height:36px;
  border:1px solid var(--linha-f);border-radius:8px;color:var(--cal);transition:background .12s,color .12s}
.sino i{font-size:19px;line-height:1}
.sino:hover{background:var(--linha);color:var(--sinal)}
.sino b{position:absolute;top:-6px;right:-6px;font-family:'IBM Plex Mono',monospace;
  font-size:var(--t-etq);font-weight:700;background:var(--sinal);color:var(--var-d);
  border:2px solid var(--noite);border-radius:9px;min-width:18px;height:18px;
  display:grid;place-items:center;padding:0 4px}

/* ---- transições ---- */
.sb .it,.sb .sub a,.bt,.pil,tbody tr{transition:background .12s, border-color .12s, color .12s}

/* ---- paginação das tabelas ---- */
.pag{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:10px var(--pad);border-top:1px solid var(--div)}
.pag .pag-info{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx-3)}
.pag .pag-ctrl{display:flex;align-items:center;gap:8px}
.pag .pag-qtd{width:auto;padding:5px 26px 5px 9px;font-size:var(--t-aux)}
.pag .pag-num{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx-3);min-width:120px;text-align:center}
.pag .bt[disabled]{opacity:.4;pointer-events:none}
table{min-width:680px;width:100%;border-collapse:collapse;font-size:var(--t-corpo)}
/* Em card de meia largura, 680px força rolagem horizontal e corta coluna. */
.gr2 table,.split table{min-width:0}
thead th{background:var(--linha);color:var(--cal);text-align:left;padding:12px var(--pad);
  font-size:var(--t-etq);font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  print-color-adjust:exact;-webkit-print-color-adjust:exact}
thead th.ordenavel{cursor:pointer;user-select:none;position:relative;padding-right:26px}
thead th.ordenavel:hover{color:var(--sinal)}
thead th .ord{position:absolute;right:9px;top:50%;transform:translateY(-50%);opacity:0;font-size:var(--t-aux);transition:opacity .12s}
thead th.ordenavel:hover .ord{opacity:.6}
thead th.asc .ord, thead th.desc .ord{opacity:1;color:var(--sinal)}
thead th:last-child,tbody td:last-child{padding-right:calc(var(--pad) + 4px)}
tbody td{padding:12px var(--pad);border-bottom:1px solid var(--div);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr.cl{cursor:pointer}
tbody tr.cl:hover td{background:var(--fundo)}
tbody tr.sel td{background:var(--var-l)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.id{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);color:var(--tx-3);letter-spacing:.04em}
.s2{display:block;font-size:var(--t-etq);color:var(--tx-3);margin-top:2px}
/* Célula com data/valor + cartão: o cartão nunca disputa a linha do dado.
   Use sempre .cel dentro de td quando houver badge junto de texto. */
.cel{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.cel .top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.cel .s2{margin-top:0}
.bg{white-space:nowrap;flex:none}
td{vertical-align:top}
/* Toda tabela respeita as larguras declaradas em vez de recalcular sozinha */
/* Largura automática: a largura declarada em cada coluna vira preferência,
   não camisa de força. Com layout fixo, "Mensal" numa coluna de 90px quebrava
   no meio da palavra; agora a coluna cresce só quando o conteúdo precisa, e o
   resto do espaço fica com a coluna sem largura. */
table{table-layout:auto}

/* Cabeçalho e dado curto não quebram: quem cede é a coluna flexível. */
thead th{white-space:nowrap}
td .id,td .s2 .id,.selo,.bg{white-space:nowrap}
table td,table th{overflow-wrap:anywhere}

/* ---- split da revisão ---- */
.split{display:grid;grid-template-columns:1fr 372px;gap:var(--gap);align-items:stretch}
.split>*{min-width:0}
.dt-pane{background:var(--card);border:1px solid var(--bd);border-radius:var(--raio-cd);
  box-shadow:0 1px 2px rgba(7,17,11,.04);
  min-width:0;overflow:hidden}
.dt-pane .hd{padding:calc(var(--pad) + 4px) var(--pad) var(--pad);border-bottom:1px solid var(--linha);
  background:var(--noite);color:var(--cal);position:relative;overflow:hidden}
.dt-pane .hd>*{position:relative}
.dt-pane .hd .cpo{position:absolute;inset:0;pointer-events:none}
.dt-pane .hd .cpo i{position:absolute;display:block;border:1px solid rgba(26,58,37,.9)}
.dt-pane .hd .cpo .lin-v{inset:0;border:0;background-image:linear-gradient(90deg,rgba(26,58,37,.55) 1px,transparent 1px);background-size:30px 100%}
.dt-pane .hd .cpo .circ2{left:-92px;top:50%;width:230px;height:230px;border-radius:50%;transform:translateY(-50%)}
.dt-pane .hd .cpo .meio2{left:0;right:0;top:50%;height:0;border-width:1px 0 0}
.dt-pane .hd .cpo .area3{right:0;top:50%;width:74px;height:132px;border-right:0;transform:translateY(-50%)}
.dt-pane .hd .cpo .marca2{right:52px;top:50%;width:5px;height:5px;border:0;border-radius:50%;background:var(--risco);transform:translate(50%,-50%)}
.dt-pane .hd .id{color:var(--sb-gp)}
.dt-pane .hd .vl{color:var(--cal)}
/* situação sobre superfície escura: contraste auditado */
.dt-pane .hd .bg.con{color:var(--ver-esc);background:transparent;border:1px solid var(--vermelho)}
.dt-pane .hd .bg.pen{color:var(--amarelo);background:transparent;border:1px solid var(--amarelo)}
.dt-pane .hd .bg.enc{color:var(--sb-gp);background:transparent;border:1px solid var(--linha-f)}
.dt-pane .vl{font-family:Archivo,sans-serif;font-weight:900;font-size:var(--t-tit);letter-spacing:-.03em;margin-top:6px}
.hist{padding:var(--pad)}
.hl{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);margin-bottom:10px}
.hist li{list-style:none;display:flex;gap:12px;padding:6px 0;font-size:var(--t-aux);min-width:0}
.hist li p{min-width:0;overflow-wrap:anywhere}
.hist li span{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);color:var(--tx-4);flex:0 0 44px}
.dacts{display:flex;flex-direction:column;gap:9px;padding:0 var(--pad) var(--pad);min-width:0}
.dacts .rot2{font-family:Sora,system-ui,sans-serif;font-size:var(--t-aux);letter-spacing:0;
  text-transform:none;color:var(--tx-3)}
.dacts .lin2{display:flex;gap:9px;flex-wrap:wrap;min-width:0}
.dacts .bt{flex:1 1 auto;justify-content:center;min-width:0}
.campo-b{min-width:0}
.campo-b .rot2,.rot2{display:block;font-family:Sora,system-ui,sans-serif;font-size:var(--t-aux);
  font-weight:500;letter-spacing:0;text-transform:none;color:var(--tx-2);margin-bottom:6px}
.campo:disabled{background:var(--campo-inativo);color:var(--tx-3)}
.campo{width:100%;max-width:100%;min-width:0;border:1px solid var(--bd);border-radius:var(--raio);
  padding:8px 10px;font-size:var(--t-corpo);background:var(--card);color:var(--tx)}
select.campo{text-overflow:ellipsis}
/* Texto jurídico corrido em monoespaçada é ilegível. Mono fica para o dado
   que é código: CNPJ, número de contrato, identificador. */
textarea.campo{font-family:Sora,system-ui,sans-serif;font-size:var(--t-corpo);line-height:1.6}
.campo:focus{outline:none;border-color:var(--sinal-c);box-shadow:0 0 0 3px rgba(15,122,68,.12)}
.empty{padding:56px 24px;text-align:center;color:var(--tx-3)}
.empty i{font-size:32px;color:var(--sinal-c);opacity:.8}
.empty h4{font-family:Archivo,sans-serif;font-weight:800;font-size:var(--t-sub);color:var(--tx);margin:10px 0 6px}
.empty p{max-width:440px;margin:0 auto;font-size:var(--t-corpo);line-height:1.55}
/* Nota de rodapé da tela. Sem max-width: travada em 960px dentro de um card
   de 1560px, ela abria uma coluna morta à direita em toda tela que tem nota. */
.nt{margin-top:12px;font-size:var(--t-aux);color:var(--tx-3);line-height:1.55}

/* ---- avisos ---- */
.busca-aviso{font-family:'IBM Plex Mono',monospace;font-size:var(--t-etq);letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx-3);margin-bottom:10px}
/* Aviso de resultado.
   Ele nasce no fluxo da página, mas é levado para um canto fixo assim que a
   tela carrega: quem acabou de mexer num seletor no fim de uma lista de 149
   linhas não vê mensagem nenhuma no topo — e a página agora guarda a rolagem,
   então nem o salto para cima acontece mais. */
.aviso{border-radius:var(--raio);padding:11px 14px;font-size:var(--t-aux);margin-bottom:var(--gap)}

.avisos{position:fixed;right:22px;bottom:22px;z-index:120;display:flex;flex-direction:column;
  gap:10px;max-width:min(440px,calc(100vw - 44px));pointer-events:none}
.avisos .aviso{margin:0;pointer-events:auto;box-shadow:0 10px 28px rgba(7,17,11,.18);
  border:1px solid var(--bd);display:flex;align-items:flex-start;gap:10px;
  animation:aviso-entra .18s ease-out}
.avisos .aviso.ok{background:var(--card);border-color:var(--sinal-c);color:var(--sinal-c)}
.avisos .aviso.erro{background:var(--card);border-color:var(--ver);color:var(--ver)}
.avisos .aviso p{margin:0;flex:1;color:var(--tx-1)}
.avisos .aviso .fecha{background:none;border:0;cursor:pointer;color:var(--tx-3);
  font-size:15px;line-height:1;padding:0 2px}
.avisos .aviso .fecha:hover{color:var(--tx-1)}
@keyframes aviso-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.avisos .aviso{animation:none}}
.aviso.erro{background:rgba(226,59,51,.10);color:var(--ver)}
.aviso.ok{background:rgba(15,122,68,.10);color:var(--sinal-c)}

/* ---- login ---- */
.login{display:grid;grid-template-columns:minmax(0,1fr) clamp(440px,40%,560px);min-height:100vh;
  background:var(--card);color:var(--tx);font-family:Sora,system-ui,sans-serif}

/* painel da marca, com o meio-campo desenhado */
.login .marca{position:relative;overflow:hidden;background:var(--noite);color:var(--cal);
  display:flex;flex-direction:column;justify-content:space-between;padding:56px clamp(34px,6vw,80px)}
.login .marca .listras,.login .marca .brilho,.login .marca .veu,
.login .marca .circ,.login .marca .meio,.login .marca .area,.login .marca .area-p,
.login .marca .pen,.login .marca .bola,.login .marca .bola2{position:absolute;pointer-events:none}
.login .marca .listras{inset:0;background-image:linear-gradient(90deg,rgba(18,48,30,.55) 1px,transparent 1px);background-size:24px 100%}
.login .marca .brilho{inset:0;background:radial-gradient(120% 90% at 92% 8%,rgba(20,102,60,.16),transparent 62%)}
.login .marca .veu{inset:0;background:linear-gradient(to top right,rgba(7,17,11,.92) 0%,rgba(7,17,11,.35) 42%,transparent 70%)}
.login .marca .circ{left:-200px;top:50%;width:680px;height:680px;border:1px solid var(--risco);border-radius:50%;transform:translateY(-50%)}
.login .marca .meio{left:0;right:0;top:50%;height:1px;background:var(--linha-meio)}
.login .marca .area{right:0;top:50%;width:240px;height:400px;border:1px solid var(--linha-area);border-right:none;transform:translateY(-50%)}
.login .marca .area-p{right:0;top:50%;width:100px;height:200px;border:1px solid var(--linha-area);border-right:none;transform:translateY(-50%)}
.login .marca .pen{right:158px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--risco);transform:translate(50%,-50%)}
.login .marca .bola{right:206px;top:262px;width:9px;height:9px;border-radius:50%;background:var(--sinal);box-shadow:0 0 0 8px rgba(63,217,127,.16)}
.login .marca .bola2{right:268px;bottom:268px;width:8px;height:8px;border-radius:50%;background:var(--linha-f)}

.login .marca>*{position:relative}
.login .lockup{display:flex;align-items:center;gap:14px}
.login .lockup .ico{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;
  font-size:var(--t-sub);color:var(--cal);background:linear-gradient(135deg,var(--campo),var(--var),var(--sinal))}
.login .lockup .nome{font-weight:700;font-size:var(--t-sub);letter-spacing:-.01em}
.login .lockup .nome b{color:var(--sinal);font-weight:700}
.login .frase{font-family:Archivo,sans-serif;font-weight:900;font-size:clamp(40px,4.6vw,68px);
  line-height:.97;letter-spacing:-.04em;max-width:14ch}
.login .lede-marca{font-size:var(--t-sub);line-height:1.6;color:var(--sb-tx);max-width:42ch;margin-top:24px}
.login .rodape-marca{display:flex;gap:40px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;
  font-size:var(--t-etq);letter-spacing:.18em;color:var(--sb-gp)}

/* painel de entrada */
.login .form{display:flex;flex-direction:column;justify-content:center;background:var(--card);
  padding:0 clamp(28px,5vw,68px)}
.login .form .etiqueta{font-family:'IBM Plex Mono',monospace;font-size:var(--t-aux);letter-spacing:.2em;
  color:var(--tx-3);margin-bottom:14px}
.login .form h1{font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(34px,3.6vw,52px);
  letter-spacing:-.04em;line-height:1.02;margin:0 0 26px}

/* o botão real do Google fica por cima, invisível, para o clique ser dele */
.g-botao{position:relative;overflow:hidden;background:var(--campo);color:var(--cal);border-radius:4px;
  padding:22px;font-size:var(--t-sub);font-weight:600;display:flex;align-items:center;justify-content:center;gap:12px}
.g-botao .hachura{position:absolute;inset:0;
  background-image:repeating-linear-gradient(45deg,var(--linha) 0 1px,transparent 1px 14px),
                   repeating-linear-gradient(-45deg,var(--linha) 0 1px,transparent 1px 14px);
  -webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 40%,#000 100%)}
.g-botao i,.g-botao span:not(.hachura){position:relative}
.g-real{position:absolute;inset:0;opacity:.001;display:flex;align-items:center;justify-content:center}
.g-real>div{transform:scale(3);transform-origin:center}
.g-envolve{position:relative;cursor:pointer}
.g-envolve:hover .g-botao{background:var(--noite)}

.login .nota{display:flex;align-items:flex-start;gap:11px;margin-top:18px}
.login .nota i{font-size:var(--t-sub);color:var(--sinal-c);flex:none;margin-top:2px}
.login .nota div{font-size:var(--t-corpo);line-height:1.55;color:var(--tx-2)}
.login .nota code{font-family:'IBM Plex Mono',monospace;font-size:var(--t-corpo);color:var(--tx)}

@media(max-width:900px){
  .login{grid-template-columns:1fr}
  .login .marca{min-height:320px;padding:34px 26px}
  .login .form{padding:34px 26px 44px}
}

/* ---- telas estreitas ---- */
@media(max-width:820px){
  .hdr{padding-left:18px;padding-right:18px}
  .barra{padding-left:18px;padding-right:12px}
  .vw{padding-left:14px;padding-right:14px}
  .cd{border-radius:var(--raio)}
  .placar-topo{gap:18px}
  .placar-topo .pl-num{font-size:var(--t-sub)}
  .barra .busca{width:150px}
  .bf-acoes{margin-left:0;width:100%}
}


/* ---- login só com Google ---- */
.form .g-area{display:flex;justify-content:center;margin-top:26px}
.form .g-area>div{width:100%;max-width:380px}
.form .so-google{margin-top:16px;font-size:var(--t-aux);line-height:1.6;color:var(--tx-3);text-align:center}
.form .so-google b{color:var(--tx-2)}