/* Doca — design system "precisão calma"
   Ferramenta operacional densa. Acento teal marinho (mundo da importação),
   canvas frio quase-branco, semânticos de prazo legíveis, profundidade sutil. */
:root{
  --bg:#0f1729;              /* células (fundo escuro) */
  --surface:#0b111f;         /* chrome (topbar, tabs) */
  --surface-2:#1b2537;
  --line:#243149;            /* hairlines */
  --line-2:#3a4a68;          /* bordas fortes / sticky */
  --head:#182238;            /* cabeçalho do grid */
  --hover:#203052;           /* hover de linha (bem visível) */
  --bg-alt:#182339;          /* zebra: linhas pares */
  --col-line:#2b3a58;        /* divisória vertical de coluna (mais visível) */
  --header-bg:#2f6bd0;       /* cabeçalho azul (estilo Excel) — igual nos 3 temas */
  --header-ink:#ffffff;
  --header-ink-2:rgba(255,255,255,.80);
  --header-num:rgba(255,255,255,.22);
  --header-line:rgba(255,255,255,.28);
  --secao-bg:#1d4a87;        /* faixa de seção: azul escuro (texto branco negrito) */
  --secao-bg-hover:#255ba3;

  --ink:#eaf0fb;             /* texto principal (claro) */
  --ink-2:#aab6cd;           /* secundário */
  --ink-3:#727f99;           /* muted */

  --accent:#2dd4bf;          /* teal claro */
  --accent-600:#5eead4;
  --accent-700:#99f6e4;
  --accent-soft:#123230;     /* fundo suave (foco) */
  --accent-ring:rgba(45,212,191,.35);

  --good:#4ade80;
  --warn:#fbbf24;  --warn-soft:#3a2f14;
  --crit:#fb7185;  --crit-soft:#3b1f28;

  --calc:#0f2b2a;  --calc-ink:#5eead4;
  --manual:#2c2513;

  --r:9px; --r-sm:7px;
  --sh-1:0 1px 2px rgba(16,24,40,.05);
  --sh-2:0 4px 14px rgba(16,24,40,.10);
  --sh-pop:0 12px 34px rgba(16,24,40,.16);
  --font:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
}
/* ---- Tema CLARO (fundo branco) ---- */
:root[data-theme="light"]{
  --bg:#ffffff; --surface:#f6f8fa; --surface-2:#eef1f5;
  --line:#e6e9ef; --line-2:#d4d9e2; --head:#eef2f7; --hover:#e4f0ee; --bg-alt:#eef3f9; --col-line:#dbe1ea;
  --ink:#131720; --ink-2:#59616f; --ink-3:#8b93a2;
  --accent:#0f766e; --accent-600:#0b5f59; --accent-700:#0a4a45;
  --accent-soft:#e6f3f1; --accent-ring:rgba(15,118,110,.35);
  --good:#15803d; --warn:#b45309; --warn-soft:#fbf0e2; --crit:#be123c; --crit-soft:#fbe9ee;
  --calc:#eefaf7; --calc-ink:#0b5f59; --manual:#fffaf0;
}
/* ---- Tema PRETO (fundo preto puro) ---- */
:root[data-theme="black"]{
  --bg:#000000; --surface:#080808; --surface-2:#161616;
  --line:#242424; --line-2:#3a3a3a; --head:#0d0d0d; --hover:#242424; --bg-alt:#141414; --col-line:#303030;
  --ink:#f4f4f4; --ink-2:#adadad; --ink-3:#6f6f6f;
  --accent:#2dd4bf; --accent-600:#5eead4; --accent-700:#99f6e4;
  --accent-soft:#0e2b28; --accent-ring:rgba(45,212,191,.35);
  --good:#4ade80; --warn:#fbbf24; --warn-soft:#2a2410; --crit:#fb7185; --crit-soft:#2e1720;
  --calc:#06201e; --calc-ink:#5eead4; --manual:#1a160b;
}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* garante que o atributo hidden sempre esconda (login/menus) */
html,body{margin:0;height:100%}
body{
  background:var(--surface); color:var(--ink);
  font:13px/1.45 var(--font);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column; overflow:hidden;
}
button{font-family:inherit}
/* seleção de texto: teal translúcido, visível inclusive sobre a célula focada */
::selection{background:rgba(45,212,191,.40); color:#0b111f}
.cell::selection{background:rgba(45,212,191,.50); color:#0b111f}

/* ---------------- topbar / command bar ---------------- */
.tools{display:contents}       /* nao cria caixa: os botoes seguem filhos da topbar */
.tools[hidden]{display:none}
.topbar{
  display:flex; align-items:center; gap:12px;
  padding:11px 16px; flex:none;
  background:var(--surface); border-bottom:1px solid var(--line);
  box-shadow:var(--sh-1); position:relative; z-index:20;
}
.ttl{display:flex; align-items:center; gap:11px}
.mark{
  width:38px; height:38px; border-radius:11px; flex:none; color:#fff;
  background:linear-gradient(150deg,#12857c,#0b504b);
  display:grid; place-items:center; font-weight:800; font-size:10.5px; letter-spacing:.2px;
  box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.18);
}
h1{font-size:14px; margin:0; font-weight:640; letter-spacing:-.01em}
.sub{font-size:11.5px; color:var(--ink-2); margin-top:2px}
.sub b{color:var(--ink); font-weight:600}
.spacer{flex:1}

.search{
  display:flex; align-items:center; gap:7px; min-width:230px;
  background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r);
  padding:6px 10px; color:var(--ink-3); transition:border-color .15s, box-shadow .15s;
}
.search:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring)}
.search input{border:0; outline:0; font:inherit; color:var(--ink); width:100%; background:transparent}
.search input::placeholder{color:var(--ink-3)}

.btn{
  border:1px solid var(--line-2); background:var(--bg); color:var(--ink);
  padding:7px 13px; border-radius:var(--r); font-size:12.5px; font-weight:600;
  cursor:pointer; transition:background .14s, border-color .14s, box-shadow .14s, transform .04s;
  box-shadow:var(--sh-1);
}
.btn:hover{background:var(--surface-2); border-color:#c2c8d2}
.btn:active{transform:translateY(1px)}
#btn-add{ /* ação primária */
  background:var(--accent); border-color:var(--accent); color:#fff;
  box-shadow:0 1px 2px rgba(9,79,74,.35);
}
#btn-add:hover{background:var(--accent-600); border-color:var(--accent-600)}
.divisor{width:1px; height:22px; background:var(--line-2); opacity:.8}

/* status autosave — pílula */
.status{
  display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  color:var(--ink-2); padding:5px 11px; border-radius:999px;
  background:var(--bg); border:1px solid var(--line);
}
.status .dot{width:8px; height:8px; border-radius:50%; background:var(--good); transition:background .2s}
.status.saving{color:var(--warn); border-color:#f0d9b6}
.status.saving .dot{background:var(--warn); animation:pulse 1s ease-in-out infinite}
.status.error{color:var(--crit); border-color:#f0c2ce}
.status.error .dot{background:var(--crit)}
@keyframes pulse{50%{opacity:.3; transform:scale(.85)}}

/* botões de cor */
.xgroup{display:inline-flex; gap:5px}
.xbtn{display:inline-flex; align-items:stretch; border:1px solid var(--line-2);
  border-radius:var(--r); overflow:hidden; background:var(--bg); box-shadow:var(--sh-1)}
.xmain,.xcaret{background:transparent; border:0; color:var(--ink); cursor:pointer; padding:0; transition:background .12s}
.xmain{display:flex; flex-direction:column; align-items:center; justify-content:center; width:32px; gap:2px; padding-top:4px}
.xmain:hover,.xcaret:hover{background:var(--surface-2)}
.xA{font-weight:800; font-size:14px; line-height:.9}
.xbar{width:18px; height:4px; border-radius:2px; background:#FFD400; margin-bottom:4px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.xcaret{width:17px; font-size:9px; color:var(--ink-3); border-left:1px solid var(--line)}
.palette{position:fixed; z-index:60; background:var(--bg); border:1px solid var(--line-2);
  border-radius:12px; box-shadow:var(--sh-pop); padding:10px}
.pl-row{display:flex; gap:5px; margin-bottom:5px}
.pl-sw{width:19px; height:19px; border-radius:6px; border:1px solid rgba(0,0,0,.14); cursor:pointer; padding:0; transition:transform .1s}
.pl-sw:hover{transform:scale(1.18)}
.pl-opt{display:block; width:100%; text-align:left; margin-bottom:7px; padding:7px 9px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); font-size:12px; cursor:pointer; font-weight:500}
.pl-opt:hover{background:var(--surface-2)}
.pl-more{display:flex; align-items:center; gap:7px; margin-top:5px; padding:7px 9px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); font-size:12px; cursor:pointer; position:relative; overflow:hidden; font-weight:500}
.pl-more:hover{background:var(--surface-2)}
.pl-more input{position:absolute; inset:0; opacity:0; cursor:pointer}

/* menu exportar */
.menu-wrap{position:relative}
.menu{position:absolute; right:0; top:calc(100% + 6px); background:var(--bg); border:1px solid var(--line-2);
  border-radius:11px; box-shadow:var(--sh-pop); padding:6px; z-index:40; min-width:210px}
.menu button{display:block; width:100%; text-align:left; border:0; background:transparent; padding:8px 11px; border-radius:var(--r-sm); font:inherit; cursor:pointer; color:var(--ink)}
.menu button:hover{background:var(--accent-soft); color:var(--accent-700)}

/* ---------------- grid ---------------- */
/* ===================== gaveta de sistemas (sobreposta) ==================== */
/* A gaveta NUNCA empurra a planilha: ela flutua por cima e some ao escolher.
   Espaco de tela e o recurso escasso aqui — sao 52 colunas para caber. */
.app{flex:1; display:flex; min-height:0; position:relative}  /* min-height:0 = deixa o grid rolar */

/* botao ☰ mora na barra de cima, entao nao tira um pixel do grid */
.ham{
  flex:none; width:32px; height:30px; border:1px solid var(--line-2); border-radius:8px;
  background:transparent; color:var(--ink-2); cursor:pointer; font-size:14px; line-height:1;
  transition:.12s;
}
.ham:hover{color:var(--ink); border-color:var(--accent); background:var(--head)}
.ham.aberta{color:var(--ink); border-color:var(--accent); background:var(--accent-soft)}

.side{
  position:absolute; left:0; top:0; bottom:0; z-index:45; width:224px;
  display:flex; flex-direction:column; gap:2px; padding:12px 10px;
  background:var(--surface); border-right:1px solid var(--line);
  box-shadow:8px 0 26px rgba(0,0,0,.34);
  transform:translateX(-102%); transition:transform .17s ease;
}
.side.aberta{transform:translateX(0)}
.side-ttl{
  padding:2px 10px 9px; font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3);
}
.side-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px; border:0; border-radius:9px; cursor:pointer;
  background:transparent; color:var(--ink-2); font:inherit; font-size:12.5px;
  font-weight:600; text-align:left; white-space:nowrap; overflow:hidden;
  transition:background .12s, color .12s;
}
.side-item:hover{background:var(--head); color:var(--ink)}
.side-item.ativo{background:var(--accent-soft); color:var(--ink)}
.side-ico{flex:none; width:18px; text-align:center; font-size:14px}
.side-conta{margin-top:auto; border-top:1px solid var(--line); padding-top:6px}
.side-dica{padding:10px; font-size:11px; color:var(--ink-3)}

/* clique fora fecha; sem escurecer a tela, que so atrapalharia numa troca rapida */
.side-fora{position:absolute; inset:0; z-index:44}
.side-fora[hidden]{display:none}

/* area do modulo: sempre 100% da largura, gaveta aberta ou nao */
.modulo{flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden}
.modulo[hidden]{display:none}
.mod-frame{flex:1; width:100%; border:0; background:var(--bg)}

/* usados pelo modal de credencial do Conexos e pelo chip de status */
.pg-lbl{display:block; font-size:11.5px; font-weight:700; color:var(--ink-2);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px}
.pg-area{
  width:100%; padding:9px 11px; border:1px solid var(--line-2); border-radius:9px;
  background:var(--bg); color:var(--ink); font:inherit; font-size:13px; resize:vertical;
}
.pg-area:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.pg-acoes{display:flex; align-items:center; gap:14px; margin-top:11px; flex-wrap:wrap}
.btn.primario{background:var(--accent); color:#062024; border-color:transparent; font-weight:700}
.btn.primario:hover{filter:brightness(1.08)}
.btn.primario:disabled{opacity:.55; cursor:default; filter:none}
.pg-status{max-width:1180px; margin:14px 0 0; padding:10px 13px; border-radius:9px;
  font-size:12.5px; background:var(--head); color:var(--ink-2)}
.pg-status.erro{background:var(--crit-soft); color:var(--crit); font-weight:600}
.pg-status.ok{background:var(--accent-soft); color:var(--ink)}

/* chip da credencial do Conexos (a senha nunca aparece aqui) */
.cx-chip{margin-left:auto; display:flex; align-items:center; gap:9px; font-size:12px;
  color:var(--ink-2); white-space:nowrap; flex-wrap:wrap; justify-content:flex-end}
.cx-dot{width:8px; height:8px; border-radius:50%; background:var(--crit); flex:none}
.cx-dot.on{background:var(--good)}

/* ===================== Diferença de câmbio (tela própria) ==================
   A pergunta é sempre "em que dia registrar?", e a resposta é dinheiro. Então a
   tela é um veredito, não um painel: as duas datas viram PLACAS grandes que
   dizem de onde vem a taxa de cada uma, e a tabela responde processo a processo.

   Por que as placas são o elemento principal: o erro real deste cálculo não é
   somar errado, é usar a PTAX do dia errado — a regra D-1 (cada dia usa a taxa
   do dia útil anterior). O programa antigo explicava isso num rótulo cinza de
   9px; aqui a proveniência da taxa é a coisa maior da tela.
   ------------------------------------------------------------------------- */
.cb{flex:1; overflow:auto; padding:24px 28px 40px; background:var(--bg)}
.cb-top{display:flex; align-items:flex-start; gap:18px; margin-bottom:18px}
.cb-h1{
  margin:0; font-size:19px; font-weight:700; letter-spacing:-.015em; color:var(--ink);
}
.cb-lead{margin:4px 0 0; font-size:13px; color:var(--ink-2)}

/* ------------------------------- formulario ------------------------------ */
.cb-form{
  display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start;
  max-width:1180px; padding:16px 18px;
  border:1px solid var(--line-2); border-radius:12px; background:var(--surface);
}
.cb-campo{display:flex; flex-direction:column; gap:5px; min-width:0}
.cb-campo-larga{flex:1 1 380px}
.cb-campo-acao{align-self:stretch; justify-content:flex-end; padding-bottom:2px}
.cb-lbl{
  font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3);
}
.cb-input{
  padding:9px 11px; border:1px solid var(--line-2); border-radius:8px;
  background:var(--bg); color:var(--ink); font:inherit; font-size:13px;
}
.cb-input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.cb-ta{resize:vertical; min-height:44px}
.cb-ajuda{font-size:11px; color:var(--ink-3)}
.cb-run{min-width:118px; padding:9px 18px}
.cb-alerta{
  max-width:1180px; margin:12px 0 0; padding:9px 13px;
  border-left:3px solid var(--warn); border-radius:0 8px 8px 0;
  background:var(--warn-soft); color:var(--warn); font-size:12px;
}
.cb-alerta b{color:var(--warn)}

/* barra de progresso indeterminada — o Conexos leva segundos por processo */
.cb-barra{
  max-width:1180px; height:3px; margin:16px 0 0; border-radius:3px;
  background:var(--line); overflow:hidden;
}
.cb-barra span{
  display:block; width:34%; height:100%; border-radius:3px; background:var(--accent);
  animation:cb-desliza 1.15s ease-in-out infinite;
}
@keyframes cb-desliza{
  0%{transform:translateX(-105%)} 100%{transform:translateX(400%)}
}

/* ===================== as duas placas de dia (assinatura) ================= */
.cb-placas{
  display:flex; align-items:stretch; gap:0; flex-wrap:wrap;
  max-width:1180px; margin:22px 0 6px;
}
.placa{
  flex:1 1 210px; min-width:190px; padding:15px 18px;
  border:1px solid var(--line-2); background:var(--surface);
}
.placa:first-child{border-radius:12px 0 0 12px}
.placa:last-child{border-radius:0 12px 12px 0; border-left:0}
.placa-dow{
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3);
}
.placa-dia{
  display:flex; align-items:baseline; gap:7px; margin-top:2px;
  color:var(--ink);
}
.placa-num{font-size:30px; font-weight:700; line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.placa-mes{font-size:13px; font-weight:600; color:var(--ink-2)}
.placa-taxa{
  margin-top:11px; padding-top:10px; border-top:1px solid var(--line);
  font-size:16px; font-weight:650; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.placa-taxa.vazia{color:var(--warn); font-size:13px; font-weight:600}
/* a proveniencia da taxa: e isto que evita registrar no dia errado */
.placa-fonte{margin-top:3px; font-size:11px; color:var(--ink-3)}
.placa-fonte b{color:var(--ink-2); font-weight:600; font-variant-numeric:tabular-nums}

/* conector entre as placas: carrega a variação da PRÓPRIA taxa */
.placa-liga{
  flex:0 0 132px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; padding:12px 8px;
  border-block:1px solid var(--line-2); background:var(--head);
}
.placa-liga-rot{font-size:9.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3)}
.placa-liga-val{font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--ink-2)}
.placa-liga-val.sobe{color:var(--crit)}
.placa-liga-val.desce{color:var(--good)}

/* ============================== tabela ================================== */
.cb-tab{
  width:100%; max-width:1180px; margin-top:20px;
  border-collapse:separate; border-spacing:0;
  border:1px solid var(--line-2); border-radius:12px; overflow:hidden;
}
.cb-tab th{
  padding:9px 12px; text-align:left; white-space:nowrap;
  background:var(--header-bg); color:var(--header-ink);
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.cb-tab th.num{text-align:right}
.cb-tab td{
  padding:10px 12px; border-top:1px solid var(--line);
  color:var(--ink); vertical-align:top;
}
.cb-tab tbody tr:hover > td{background:var(--hover)}
.cb-tab tr.par > td{background:var(--bg-alt)}
.cb-tab tr.par:hover > td{background:var(--hover)}
.cb-n{width:40px; color:var(--ink-3); font-size:11.5px; font-variant-numeric:tabular-nums}
.cb-ref{font-weight:700; font-size:13px; white-space:nowrap}
.cb-ref button{
  display:block; margin-top:4px; padding:0; border:0; background:none; cursor:pointer;
  color:var(--ink-2); font:inherit; font-size:11px; font-weight:600;
  text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;
}
.cb-ref button:hover{color:var(--accent)}

/* celula de um dia: Impostos em cima, AFRMM embaixo — como no programa antigo,
   porque sao duas contas diferentes e somar as duas escondia o AFRMM */
td.cb-dia{width:190px; border-left:3px solid transparent}
td.cb-dia.vence{border-left-color:var(--accent); background:var(--accent-soft)}
.cb-linha{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.cb-linha + .cb-linha{margin-top:5px}
.cb-k{font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3)}
.cb-v{font-size:15px; font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.cb-v.menor{font-size:12.5px; font-weight:600; color:var(--ink-2)}
.cb-v.isento{color:var(--good); font-weight:700; font-size:12.5px}
.cb-v.pend{color:var(--ink-3); font-weight:500; font-size:12px; font-style:italic}

td.cb-dif{width:150px; text-align:right}
.cb-dif-v{font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.cb-dif-v.sobe{color:var(--crit)}
.cb-dif-v.desce{color:var(--good)}
.cb-dif-v.igual{color:var(--ink-3)}
.cb-dif-nota{margin-top:2px; font-size:10.5px; color:var(--ink-3)}

.cb-vd{display:inline-flex; align-items:center; gap:6px; padding:4px 11px;
  border-radius:20px; font-size:11.5px; font-weight:700; white-space:nowrap}
.cb-vd.hoje{background:var(--accent-soft); color:var(--accent)}
.cb-vd.amanha{background:var(--accent-soft); color:var(--accent)}
.cb-vd.indiferente{background:var(--head); color:var(--ink-2)}
.cb-vd.aguardando{background:var(--warn-soft); color:var(--warn)}
.cb-obs{margin:6px 0 0; padding-left:15px; font-size:11px; color:var(--warn)}
.cb-obs li + li{margin-top:2px}

tr.cb-erro > td{background:var(--crit-soft); color:var(--crit)}
tr.cb-erro .cb-ref{color:var(--crit)}

/* detalhe: o desdobramento que o programa antigo tinha mas nao mostrava */
tr.cb-det > td{background:var(--surface); border-top:0; padding:0 12px 14px 55px}
.det-grade{display:flex; flex-wrap:wrap; gap:26px}
.det-bloco{min-width:180px}
.det-ttl{font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:6px}
.det-l{display:flex; justify-content:space-between; gap:18px; font-size:12px; padding:2px 0}
.det-l dt{color:var(--ink-3)}
.det-l dd{margin:0; font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600}
.det-l.somatorio{border-top:1px solid var(--line); margin-top:4px; padding-top:5px}

@media (max-width:900px){
  .cb{padding:18px 16px 32px}
  .placa-liga{flex-basis:100%; border-inline:1px solid var(--line-2)}
  .placa:first-child, .placa:last-child{border-radius:12px; border-left:1px solid var(--line-2)}
  td.cb-dia{width:auto}
}

.grid-wrap{flex:1; overflow:auto; position:relative; background:var(--bg)}
table#grid{border-collapse:separate; border-spacing:0; font-size:12.5px}
.grid-wrap [style]{font-variant-numeric:tabular-nums}

thead th{
  position:sticky; top:0; z-index:3;
  background:var(--header-bg); color:var(--header-ink);
  font-weight:700; text-align:left; white-space:nowrap;
  padding:10px 11px; border-right:1px solid var(--header-line);
  border-bottom:1px solid rgba(0,0,0,.25);
  font-size:11.5px; letter-spacing:.02em; position:relative;
  box-shadow:0 2px 6px rgba(0,0,0,.28);
}
thead th .cnum{
  display:inline-block; min-width:15px; margin-right:7px; padding:1px 4px;
  font-size:9.5px; font-weight:700; color:var(--header-ink);
  background:var(--header-num); border-radius:4px; text-align:center;
  font-variant-numeric:tabular-nums;
}
thead th.calc{color:var(--header-ink)}
thead th.calc .cnum{background:var(--header-num); color:var(--header-ink)}
thead th.manual::after{content:"✎"; margin-left:6px; color:var(--ink-3); font-size:11px}

tbody td{
  padding:0; border-right:1px solid var(--col-line); border-bottom:1px solid var(--line);
  background:transparent; min-width:120px; max-width:280px;
}
tbody tr{background:var(--bg); transition:background .08s}
tbody tr:nth-child(even){background:var(--bg-alt)}   /* zebra */
tbody tr:hover{background:var(--hover)}

/* severidade: trilho à esquerda (no rownum), limpo */
tbody tr.sev-critico .rownum{box-shadow:inset 3px 0 0 var(--crit)}
tbody tr.sev-atencao .rownum{box-shadow:inset 3px 0 0 var(--warn)}

.rownum{
  position:sticky; left:0; z-index:2; min-width:74px; max-width:74px; width:74px;
  text-align:center; color:var(--ink-3); font-size:11px; font-variant-numeric:tabular-nums;
  background:var(--head); border-right:1px solid var(--line-2); user-select:none;
  white-space:nowrap; padding:0 2px;
}
thead th.rownum{z-index:4; background:var(--header-bg); color:var(--header-ink)}
.sticky-1{
  position:sticky; left:48px; z-index:2; background:var(--bg)!important;
  border-right:1px solid var(--line-2);
  box-shadow:6px 0 8px -8px rgba(16,24,40,.18);
}
thead th.sticky-1{z-index:4; left:48px; background:var(--header-bg)!important}
tbody tr:nth-child(even) td.sticky-1{background:var(--bg-alt)!important}   /* zebra na coluna fixa */
tbody tr:hover td.sticky-1{background:var(--hover)!important}

.cell{width:100%; height:100%; border:0; outline:0; background:transparent; color:var(--ink);
  font:inherit; padding:8px 11px; display:block; font-variant-numeric:tabular-nums}
tbody td.sticky-1 .cell{font-weight:650}   /* Ref. Tradestar em destaque (identidade da linha) */
.cell::placeholder{color:var(--ink-3)}
.cell:focus{background:var(--accent-soft); box-shadow:inset 0 0 0 1.5px var(--accent)}
div.cell{min-height:33px; white-space:nowrap; overflow:hidden; cursor:text}
select.cell{appearance:none; cursor:pointer; color:var(--ink)}
select.cell option{background:var(--surface-2); color:var(--ink)}
input.cell[type=date]{color-scheme:dark}
input.cell[type=number]{text-align:right}

td.calc{background:var(--calc)}
td.calc .cell{color:var(--calc-ink); font-weight:600}
td.ro{padding:8px 10px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums}
td.ro.aguard{color:var(--warn); font-weight:600; font-size:10.5px; letter-spacing:.04em}
td.manual-cell{background:var(--manual)}
td.manual-cell .cell:focus{background:var(--accent-soft)}
/* escala de urgência do Prazo Perdimento (cor + peso) */
.due-crit{color:#ff5c72!important; font-weight:800!important}
.due-warn{color:#fbbf24!important; font-weight:700!important}
.due-ok{color:var(--ink-3)!important; font-weight:500!important}   /* longe: discreto, não rouba atenção */
tbody td{position:relative}
td.sel{outline:2px solid var(--accent); outline-offset:-2px; box-shadow:inset 0 0 0 999px rgba(45,212,191,.16)}
td.sel .cell{background:transparent}

.col-resize{position:absolute; top:0; right:-3px; width:7px; height:100%; cursor:col-resize; z-index:5}
.col-resize:hover{background:var(--accent)}
/* excluir mora na coluna fixa do #, junto da alca e da bandeira: aparece no
   hover da linha, igual aos outros controles de linha */
.del{display:none; cursor:pointer; color:var(--ink-3); border-radius:5px;
  padding:0 3px; margin-left:1px; font-size:11px; line-height:1; transition:.12s}
tbody tr:hover .del{display:inline-block; opacity:.55}
.del:hover{color:var(--crit); background:var(--crit-soft); opacity:1}
.vazio{padding:34px; text-align:center; color:var(--ink-3); font-size:13px}

/* ---------------- abas (sheet tabs) ---------------- */
.tabbar{
  flex:none; display:flex; align-items:stretch; gap:3px;
  padding:0 10px; background:var(--surface); border-top:1px solid var(--line);
  overflow-x:auto; min-height:38px;
}
.tab{
  display:flex; align-items:center; gap:8px; padding:0 15px; cursor:pointer;
  font-size:12px; color:var(--ink-2); white-space:nowrap;
  border:1px solid transparent; border-bottom:0; position:relative; top:0;
  transition:background .12s, color .12s;
}
.tab:hover{background:var(--surface-2); color:var(--ink)}
.tab.active{
  background:var(--bg); color:var(--ink); font-weight:680;
  border-color:var(--line); border-radius:9px 9px 0 0; margin-top:-1px;
  box-shadow:0 -2px 8px -4px rgba(16,24,40,.12);
}
.tab.active::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--accent); border-radius:2px 2px 0 0;
}
.tab-dot{width:8px; height:8px; border-radius:50%; flex:none; box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.tab .cnt{color:var(--ink-3); font-weight:600; font-variant-numeric:tabular-nums}

.toast{
  position:fixed; bottom:50px; left:50%; transform:translateX(-50%) translateY(16px);
  background:#171a21; color:#fff; padding:10px 18px; border-radius:11px;
  font-size:12.5px; font-weight:600; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; z-index:80; box-shadow:var(--sh-2);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---------------- filtro / ordenação por coluna ---------------- */
thead th{padding-right:26px}          /* espaço para o botão de filtro */
.fbtn{
  position:absolute; right:9px; top:50%; transform:translateY(-50%); z-index:6;
  width:17px; height:17px; padding:0; border:0; border-radius:5px; cursor:pointer;
  background:transparent; color:var(--ink-3); font-size:9px; line-height:1;
  display:grid; place-items:center; opacity:.5; transition:background .12s, color .12s, opacity .12s;
}
.fbtn{color:var(--header-ink-2)}
thead th:hover .fbtn{opacity:1}
.fbtn:hover{background:rgba(255,255,255,.18); color:#fff}
.fbtn.on{opacity:1; color:#fff; background:rgba(255,255,255,.28)}

.filtro-pop{
  position:fixed; z-index:70; width:236px; background:var(--bg);
  border:1px solid var(--line-2); border-radius:12px; box-shadow:var(--sh-pop);
  padding:9px; font-size:12px;
}
.fp-sort{display:flex; gap:6px; margin-bottom:8px}
.fp-sort button{flex:1; padding:7px 6px; border:1px solid var(--line); background:var(--surface); border-radius:var(--r-sm); cursor:pointer; font:inherit; font-weight:500; color:var(--ink)}
.fp-sort button:hover{background:var(--surface-2)}
.fp-search{margin-bottom:6px}
.fp-search input{width:100%; padding:7px 9px; border:1px solid var(--line-2); border-radius:var(--r-sm); outline:0; font:inherit}
.fp-search input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring)}
.fp-all{display:flex; align-items:center; gap:8px; padding:5px 4px 8px; font-weight:600; border-bottom:1px solid var(--line); margin-bottom:5px; cursor:pointer}
.fp-list{max-height:220px; overflow:auto; margin-bottom:9px}
.fp-item{display:flex; align-items:center; gap:8px; padding:4px 5px; border-radius:6px; cursor:pointer; white-space:nowrap}
.fp-item:hover{background:var(--surface)}
.fp-item span{overflow:hidden; text-overflow:ellipsis}
.fp-all input,.fp-item input{accent-color:var(--accent); flex:none}
.fp-actions{display:flex; gap:6px}
.fp-actions button{flex:1; padding:8px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--bg); cursor:pointer; font:inherit; font-weight:600; color:var(--ink)}
.fp-clear:hover{background:var(--crit-soft); border-color:#f0c2ce; color:var(--crit)}
.fp-ok{background:var(--accent); border-color:var(--accent); color:#fff}
.fp-ok:hover{background:var(--accent-600); border-color:var(--accent-600)}

/* ---------------- célula de texto multilinha (preview + card) ---------------- */
div.cell.multi{position:relative; padding-right:18px; cursor:pointer}
div.cell.multi:hover{background:var(--hover)}
div.cell.multi:focus{background:var(--accent-soft); box-shadow:inset 0 0 0 1.5px var(--accent)}

/* botão "⋯" para abrir a caixa (aparece no hover da célula) */
.cell-exp{
  position:absolute; top:3px; right:3px; z-index:3;
  width:17px; height:16px; padding:0; border:0; border-radius:4px; cursor:pointer;
  background:var(--surface-2); color:var(--ink-2); font-size:12px; line-height:1;
  display:none; place-items:center; box-shadow:0 1px 2px rgba(0,0,0,.35);
}
tbody td:hover .cell-exp{display:grid}
.cell-exp:hover{background:var(--accent); color:#04201d}

/* dica de seleção múltipla (topbar) */
.seldica{
  font-size:11.5px; font-weight:600; color:var(--accent-600);
  background:var(--accent-soft); border:1px solid var(--line-2);
  padding:5px 10px; border-radius:999px; white-space:nowrap;
}
div.cell.multi.tem-mais::after{
  content:"⋯"; position:absolute; right:5px; top:50%; transform:translateY(-50%);
  color:var(--accent); font-weight:700; font-size:13px; line-height:1;
  background:var(--accent-soft); border-radius:4px; padding:0 3px;
}

.card-edit{
  position:fixed; z-index:75; width:340px; max-width:calc(100vw - 20px);
  background:var(--bg); border:1px solid var(--line-2); border-radius:12px;
  box-shadow:var(--sh-pop); padding:10px; display:flex; flex-direction:column; gap:8px;
}
.ce-head{display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:11.5px; font-weight:700; color:var(--ink-2); letter-spacing:.01em; text-transform:uppercase}
.ce-x{border:0; background:transparent; color:var(--ink-3); cursor:pointer; font-size:13px; padding:2px 6px; border-radius:6px}
.ce-x:hover{background:var(--crit-soft); color:var(--crit)}
.ce-area{
  width:100%; min-height:120px; max-height:50vh; resize:vertical;
  border:1px solid var(--line-2); border-radius:var(--r-sm); outline:0;
  padding:9px 11px; font:13px/1.5 var(--font); color:var(--ink); background:var(--bg);
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.ce-area:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring)}
.ce-foot{font-size:10.5px; color:var(--ink-3)}

/* ---------------- arrastar cabeçalho para reordenar ---------------- */
thead th[draggable="true"]{cursor:grab}
thead th.dragging{opacity:.45; cursor:grabbing}
thead th.drop-alvo{box-shadow:inset 3px 0 0 var(--accent); background:var(--accent-soft)}

/* ---------------- tela de login ---------------- */
.login-overlay{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:var(--surface);
}
.login-card{
  width:340px; max-width:calc(100vw - 24px);
  background:var(--bg); border:1px solid var(--line-2); border-radius:16px;
  box-shadow:var(--sh-pop); padding:26px 24px; display:flex; flex-direction:column;
}
.login-mark{
  width:46px; height:46px; border-radius:13px; align-self:center; color:#fff;
  background:linear-gradient(150deg,#12857c,#0b504b);
  display:grid; place-items:center; font-weight:800; font-size:11.5px; letter-spacing:.3px;
  box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.18); margin-bottom:12px;
}
.login-card h2{margin:0; text-align:center; font-size:18px; font-weight:680; color:var(--ink)}
.login-sub{margin:4px 0 18px; text-align:center; font-size:12.5px; color:var(--ink-2)}
.login-lbl{font-size:11px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.03em; margin-bottom:5px}
.login-inp{
  width:100%; padding:10px 12px; margin-bottom:14px;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r);
  color:var(--ink); font:14px var(--font); outline:0;
}
.login-inp:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring)}
.login-inp[readonly]{color:var(--ink-2); cursor:default}
.login-passwrap{position:relative}
.login-passwrap .login-inp{padding-right:42px}
.login-inp::-ms-reveal,.login-inp::-ms-clear{display:none}  /* esconde o olho nativo do Edge */
.login-eye{
  position:absolute; right:6px; top:6px; width:30px; height:32px; padding:0;
  border:0; background:transparent; color:var(--ink-3); cursor:pointer;
  font-size:15px; border-radius:7px; display:grid; place-items:center;
}
.login-eye:hover{background:var(--surface-2); color:var(--ink)}
.login-erro{color:var(--crit); font-size:12px; font-weight:600; margin:-6px 0 12px}
.login-btn{width:100%; justify-content:center; padding:11px;
  background:var(--accent); border-color:var(--accent); color:#04201d; font-weight:700}
.login-btn:hover{background:var(--accent-600); border-color:var(--accent-600)}
.login-ver{text-align:center; font-size:9.5px; color:var(--ink-3); margin-top:10px; letter-spacing:.12em}
/* tres paineis no mesmo cartao: entrar / pedir acesso / criar senha */
.login-card{width:368px}
.login-pane{display:flex; flex-direction:column}
.login-pane[hidden]{display:none}
.login-link{
  margin-top:12px; padding:6px; border:0; background:none; cursor:pointer;
  color:var(--ink-2); font:inherit; font-size:12px; font-weight:600;
  text-decoration:underline; text-underline-offset:2px;
}
.login-link:hover{color:var(--accent)}
.login-ok{
  margin:-4px 0 12px; padding:10px 12px; border-radius:var(--r-sm);
  background:var(--accent-soft); color:var(--ink); font-size:12.5px; line-height:1.5;
}
.login-dica{margin:-8px 0 14px; font-size:11.5px; color:var(--ink-3); line-height:1.5}
#senha-quem{text-align:left}
#senha-quem b{color:var(--ink)}

/* ============================= tela de Pessoas ============================ */
.pes-topo{display:flex; align-items:flex-start; gap:16px; margin-bottom:18px; flex-wrap:wrap}
.pes-nova{
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
  max-width:1180px; padding:14px 16px; margin-bottom:20px;
  border:1px solid var(--line-2); border-radius:12px; background:var(--surface);
}
.pes-nova .cb-campo{flex:1 1 180px}
.pes-tab{
  width:100%; max-width:1180px; border-collapse:separate; border-spacing:0;
  border:1px solid var(--line-2); border-radius:12px; overflow:hidden;
}
.pes-tab th{
  padding:9px 12px; text-align:left; white-space:nowrap;
  background:var(--header-bg); color:var(--header-ink);
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.pes-tab td{padding:10px 12px; border-top:1px solid var(--line); color:var(--ink); font-size:13px}
.pes-tab tbody tr:hover > td{background:var(--hover)}
.pes-tab tr.inativa > td{opacity:.55}
.pes-nome{font-weight:700}
.pes-email{font-size:11.5px; color:var(--ink-3)}
.pes-acoes{white-space:nowrap; text-align:right}
.pes-acoes .btn{padding:4px 10px; font-size:11.5px}
.selo{
  display:inline-block; padding:2px 9px; border-radius:20px;
  font-size:10.5px; font-weight:700; letter-spacing:.02em; white-space:nowrap;
}
.selo.ativo{background:var(--accent-soft); color:var(--accent)}
.selo.convidado{background:var(--warn-soft); color:var(--warn)}
.selo.revogado{background:var(--crit-soft); color:var(--crit)}
.selo.pediu{background:var(--info-soft, var(--head)); color:var(--warn); margin-left:6px}
.selo.admin{background:var(--head); color:var(--ink-2); margin-left:6px}

/* o link de convite aparece UMA vez: precisa ser copiavel sem erro */
.convite-box{
  max-width:1180px; margin:0 0 18px; padding:14px 16px;
  border:1px solid var(--accent); border-radius:12px; background:var(--accent-soft);
}
.convite-box h3{margin:0 0 4px; font-size:14px; font-weight:700; color:var(--ink)}
.convite-box p{margin:0 0 10px; font-size:12.5px; color:var(--ink-2)}
.convite-linha{display:flex; gap:8px; align-items:stretch; flex-wrap:wrap}
.convite-linha input{
  flex:1 1 380px; min-width:0; padding:9px 11px; font:12px var(--mono, monospace);
  border:1px solid var(--line-2); border-radius:8px; background:var(--bg); color:var(--ink);
}
/* quem está logado, na barra de cima */
.eu-chip{display:flex; flex-direction:column; align-items:flex-end; line-height:1.25;
  font-size:11.5px; color:var(--ink-2); white-space:nowrap}
.eu-chip b{font-size:12.5px; color:var(--ink); font-weight:650}

/* ---------------- Layout B: agrupamento por etapa + hierarquia ---------------- */
/* cabeçalho de grupo (fica fixo à esquerda, não rola na horizontal) */
tr.grupo td.grupo-td{
  position:sticky; left:0; z-index:2; padding:0; cursor:pointer;
  background:var(--secao-bg); border-top:1px solid rgba(0,0,0,.3); border-bottom:1px solid rgba(0,0,0,.3);
}
tr.grupo:hover td.grupo-td{background:var(--secao-bg-hover)}
.grupo-td .ginner{display:inline-flex; align-items:center; gap:9px; padding:9px 14px; font-size:12.5px}
.gtri{color:#fff; font-size:11px; width:12px; text-align:center; flex:none}
.gnome{font-weight:800; color:#fff; letter-spacing:.01em}
.gcount{font-size:11px; font-weight:800; color:#fff;
  background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:1px 9px}

/* colunas primárias x secundárias */
thead th.col-prim{color:var(--header-ink); font-weight:800}
thead th.col-sec{color:var(--header-ink-2); font-weight:600}
td.col-prim .cell{color:var(--ink); font-weight:600}
td.col-sec .cell, td.col-sec.ro{color:var(--ink-2)}
td.col-sec .cell::placeholder{color:var(--ink-3)}

/* truncamento limpo (tooltip via title na td) */
input.cell{text-overflow:ellipsis}

/* datas: sem "dd/mm/aaaa" quando vazio; ícone só no hover/foco */
input.cell[type=date].vazia{color:transparent}
input.cell[type=date].vazia:focus{color:var(--ink)}
input.cell[type=date]::-webkit-calendar-picker-indicator{opacity:0; cursor:pointer; transition:opacity .12s}
tbody td:hover input.cell[type=date]::-webkit-calendar-picker-indicator,
input.cell[type=date]:focus::-webkit-calendar-picker-indicator{opacity:.55}

/* botão + colunas ativo */
#btn-extras.ativo{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-700)}

/* arrastar linha: alça (⠿) na coluna do número (#), aparece no hover */
.rn-grip{display:none; cursor:grab; color:var(--ink-2); font-size:14px; line-height:1; user-select:none}
.rn-grip:active{cursor:grabbing}
tbody tr:hover .rn-num{display:none}
tbody tr:hover .rn-grip{display:inline-block}
/* linha sendo arrastada: pintada de teal para não se perder de vista */
tr.arrastando td{background:rgba(45,212,191,.32)!important}
tr.arrastando td.rownum{background:rgba(45,212,191,.42)!important}
tr.arrastando .cell{color:var(--ink)!important}
/* indicador GROSSO de onde a linha vai cair */
#body tr.drop-antes td{box-shadow:inset 0 4px 0 0 var(--accent); background:rgba(45,212,191,.12)}
#body tr.drop-depois td{box-shadow:inset 0 -4px 0 0 var(--accent); background:rgba(45,212,191,.12)}
#body tr.grupo.drop-in td.grupo-td{box-shadow:inset 0 0 0 3px var(--accent); background:var(--secao-bg-hover)}
/* soltar fora da propria secao e recusado: a secao e calculada, nao arrastada */
#body tr.drop-nao td{box-shadow:inset 0 0 0 2px var(--crit); background:var(--crit-soft)}
#body tr.grupo.drop-nao td.grupo-td{box-shadow:inset 0 0 0 2px var(--crit)}
td.acoes{white-space:nowrap; text-align:center; padding:0 4px}
tr.mv-flash td{background:var(--accent-soft)!important; transition:background .2s}

/* marca manual de Processo Em Perdimento (bandeira na coluna de acoes) */
/* marca manual de perdimento: escondida ate o hover, igual a alca de arrastar —
   mas SEMPRE visivel quando ligada, senao nao ha como desmarcar. */
.perd{display:none; cursor:pointer; color:var(--ink-3); border-radius:5px;
  padding:0 3px; margin-left:2px; font-size:12px; line-height:1; transition:.12s}
tbody tr:hover .perd{display:inline-block; opacity:.55}
.perd:hover{color:var(--crit); background:var(--crit-soft); opacity:1}
.perd.on{display:inline-block; color:var(--crit); opacity:1; font-weight:700}

/* linha que a regra acabou de mover / que acabou de nascer: pisca 2s pra achar
   o olho, porque a faixa de destino costuma estar fora da tela */
@keyframes pisca-linha{
  0%,100%{background:transparent}
  12%{background:var(--accent-soft)}
  38%{background:transparent}
  62%{background:var(--accent-soft)}
}
tr.linha-alvo td{animation:pisca-linha 2s ease-in-out; box-shadow:inset 0 0 0 0 var(--accent)}
tr.linha-alvo td.rownum{box-shadow:inset 3px 0 0 0 var(--accent)}

/* ---------------------------------- Lixeira -------------------------------- */
.lix-badge{display:inline-block; min-width:17px; padding:0 5px; margin-left:5px;
  border-radius:9px; background:var(--crit); color:#fff; font-size:10px;
  font-weight:700; line-height:17px; text-align:center; vertical-align:middle}

.modal-bg{position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center; padding:24px}
.modal{width:min(700px,100%); max-height:80vh; display:flex; flex-direction:column;
  background:var(--bg); border:1px solid var(--line-2); border-radius:14px;
  box-shadow:var(--sh-pop); overflow:hidden}
.modal-top{display:flex; align-items:center; gap:12px; padding:14px 16px 10px}
.modal-top h2{margin:0; font-size:15px; font-weight:700; color:var(--ink)}
.modal-acoes{margin-left:auto; display:flex; gap:8px}
.modal-sub{margin:0; padding:0 16px 12px; font-size:12px; color:var(--ink-2)}
.modal-corpo{overflow:auto; padding:0 16px 16px; border-top:1px solid var(--line-2)}

.lix-item{display:flex; align-items:center; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--line-2)}
.lix-item:last-child{border-bottom:none}
.lix-info{min-width:0; flex:1}
.lix-ref{font-size:13px; font-weight:700; color:var(--ink)}
.lix-meta{font-size:11.5px; color:var(--ink-2); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lix-quando{font-size:11px; color:var(--ink-3); margin-top:2px}
.lix-btns{display:flex; gap:6px; flex:none}
.lix-vazia{padding:26px 0; text-align:center; color:var(--ink-3); font-size:13px}
.btn.perigo{color:var(--crit); border-color:var(--crit)}
.btn.perigo:hover{background:var(--crit-soft)}

.toast-acao{margin-left:12px; padding:2px 9px; border-radius:6px; cursor:pointer;
  background:transparent; border:1px solid currentColor; color:inherit;
  font:inherit; font-weight:700}

/* buscar coluna (popover) */
.col-pop{position:absolute; right:0; top:calc(100% + 6px); z-index:60; width:250px;
  background:var(--bg); border:1px solid var(--line-2); border-radius:11px; box-shadow:var(--sh-pop); padding:8px}
.col-pop #col-q{width:100%; padding:8px 10px; border:1px solid var(--line-2); border-radius:var(--r-sm); outline:0; font:inherit; background:var(--bg); color:var(--ink); margin-bottom:6px}
.col-pop #col-q:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring)}
.col-list{max-height:320px; overflow:auto}
.col-item{display:block; width:100%; text-align:left; border:0; background:transparent; padding:7px 9px; border-radius:var(--r-sm); font:inherit; cursor:pointer; color:var(--ink)}
.col-item:hover{background:var(--accent-soft); color:var(--accent-700)}
.col-tag{color:var(--ink-3); font-size:10px}
.col-vazio{padding:10px; color:var(--ink-3); font-size:12px; text-align:center}
/* destaque ao pular para a coluna */
.col-flash{box-shadow:inset 0 0 0 2px var(--accent)!important; transition:box-shadow .2s}
thead th.col-flash{box-shadow:inset 0 0 0 2px #fff!important}

/* acessibilidade */
:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}