/* Escritório Vivo · estilo
   Escala de urgência igual à do painel do CRM (Folga → Queimando). Tudo se adapta ao tamanho da janela:
   grades que se reorganizam, planta que vira coluna, painel (quadro no centro ou ao lado) que vira tela cheia no celular. */
:root{
  --bg:#F5F5F7; --card:#FFFFFF; --card-2:#F5F5F7; --ink:#1D1D1F; --ink-2:#424245; --muted:#6E6E73; --faint:#A1A1A6;
  --line:rgba(0,0,0,.08); --line-2:rgba(0,0,0,.05); --accent:#0071E3; --accent-bg:rgba(0,113,227,.08);
  --u0:#2C7A57; --u0-bg:#E6F2EB; --u1:#6C8A16; --u1-bg:#EFF3DD; --u2:#AF7806; --u2-bg:#F9F0D8;
  --u3:#BF5514; --u3-bg:#FBE9DD; --u4:#C4221F; --u4-bg:#FCE8E7; --ux:#8E8E93; --ux-bg:#F0F0F2;
  --c-peca:#0071E3; --c-tarefa:#12A1A1; --c-aud:#AF52DE; --c-entrega:#A2845E; --c-reuniao:#8E8E93;
  --floor:#E8E8EC; --room:#FFFFFF; --wood:#EEDFCB; --wood-edge:#DCC6A8; --paper:#FFFFFF; --paper-edge:#CFCFD4;
  --screen:#2C2C2E; --plant:#5DA271; --mug:#C9714A; --skin:#E8B796; --coin:#E3B341;
  --shadow:0 1px 1px rgba(0,0,0,.02), 0 8px 28px rgba(0,0,0,.06);
  --shadow-up:0 2px 4px rgba(0,0,0,.04), 0 16px 40px rgba(0,0,0,.10);
  --glass:rgba(245,245,247,.8); color-scheme:light;
  /* Controles e colunas que podem ficar soltos na página: no claro, um cinza translúcido (como os da Apple), que se vê
     com delicadeza tanto sobre o branco do cartão quanto sobre o fundo; no escuro, o cinza de sempre. */
  --preench:rgba(118,118,128,.12); --coluna:rgba(118,118,128,.075); --coluna-2:rgba(118,118,128,.04); --fio:rgba(0,0,0,.035);
  /* o painel ao lado: 44% da tela, ao menos 520 px (quando cabe), até 880 px; no centro, o quadro fica a essa distância do alto */
  --painel-w:clamp(min(520px, 100vw), 44vw, 880px); --painel-topo:clamp(16px, 5vh, 48px);
  /* Largura do conteúdo: cresce com a tela (92% dela), entre 1240 e 1480 px, sempre com margem dos lados; nunca encosta na borda. */
  --largura:clamp(1240px, 92vw, 1480px);
  --grade:rgba(0,0,0,.13); --grade-cab:#EEEEF1; --grade-zebra:rgba(0,0,0,.018); --grade-tot:#F3F3F6;
  --grade-h:rgba(0,0,0,.12); --grade-v:rgba(0,0,0,.06); --g-borda:rgba(0,0,0,.085); --g-linha:rgba(0,0,0,.06);
  --g-col:rgba(0,0,0,.035); --g-cab-linha:rgba(0,0,0,.11); --g-sombra:rgba(0,0,0,.12);
  --g-zebra:color-mix(in srgb, var(--ink) 2.6%, var(--card));
  --g-sobre:color-mix(in srgb, var(--accent) 5.5%, var(--card));
  --g-aberto:color-mix(in srgb, var(--accent) 10%, var(--card));
  --g-faixa:color-mix(in srgb, var(--ink) 4.5%, var(--card))
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000; --card:#1C1C1E; --card-2:#2C2C2E; --ink:#F5F5F7; --ink-2:#D1D1D6; --muted:#98989D; --faint:#636366;
    --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06); --accent:#2997FF; --accent-bg:rgba(41,151,255,.14);
    --u0:#54BE90; --u0-bg:#132A20; --u1:#A8C24C; --u1-bg:#242B13; --u2:#DFA83E; --u2-bg:#2D2413;
    --u3:#F08A4B; --u3-bg:#311E12; --u4:#FF6961; --u4-bg:#3A1A1A; --ux:#8E8E93; --ux-bg:#2C2C2E;
    --c-peca:#2997FF; --c-tarefa:#30C2C2; --c-aud:#C77DFF; --c-entrega:#C4A57E; --c-reuniao:#8E8E93;
    --floor:#111113; --room:#1C1C1E; --wood:#4A3D2F; --wood-edge:#5E4D3A; --paper:#E5E5EA; --paper-edge:#8E8E93;
    --screen:#000; --plant:#4E9A6C; --mug:#B5653F; --skin:#C99A7A; --coin:#D9A62E;
    --shadow:0 1px 1px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.5); --shadow-up:0 16px 40px rgba(0,0,0,.6);
    --glass:rgba(0,0,0,.72); color-scheme:dark;
    --preench:var(--card-2); --coluna:var(--card-2); --coluna-2:color-mix(in srgb, var(--card-2) 70%, transparent); --fio:transparent;
    --grade:rgba(255,255,255,.16); --grade-cab:#242427; --grade-zebra:rgba(255,255,255,.025); --grade-tot:#232326;
    --grade-h:rgba(255,255,255,.14); --grade-v:rgba(255,255,255,.06); --g-borda:rgba(255,255,255,.09);
    --g-linha:rgba(255,255,255,.065); --g-col:rgba(255,255,255,.035); --g-cab-linha:rgba(255,255,255,.12);
    --g-sombra:rgba(0,0,0,.5); --g-zebra:color-mix(in srgb, var(--ink) 3.6%, var(--card));
    --g-sobre:color-mix(in srgb, var(--accent) 10%, var(--card));
    --g-aberto:color-mix(in srgb, var(--accent) 17%, var(--card)); --g-faixa:color-mix(in srgb, var(--ink) 6%, var(--card))
  }
}
:root[data-theme="dark"]{
  --bg:#000000; --card:#1C1C1E; --card-2:#2C2C2E; --ink:#F5F5F7; --ink-2:#D1D1D6; --muted:#98989D; --faint:#636366;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06); --accent:#2997FF; --accent-bg:rgba(41,151,255,.14);
  --u0:#54BE90; --u0-bg:#132A20; --u1:#A8C24C; --u1-bg:#242B13; --u2:#DFA83E; --u2-bg:#2D2413;
  --u3:#F08A4B; --u3-bg:#311E12; --u4:#FF6961; --u4-bg:#3A1A1A; --ux:#8E8E93; --ux-bg:#2C2C2E;
  --c-peca:#2997FF; --c-tarefa:#30C2C2; --c-aud:#C77DFF; --c-entrega:#C4A57E; --c-reuniao:#8E8E93;
  --floor:#111113; --room:#1C1C1E; --wood:#4A3D2F; --wood-edge:#5E4D3A; --paper:#E5E5EA; --paper-edge:#8E8E93;
  --screen:#000; --plant:#4E9A6C; --mug:#B5653F; --skin:#C99A7A; --coin:#D9A62E;
  --shadow:0 1px 1px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.5); --shadow-up:0 16px 40px rgba(0,0,0,.6);
  --glass:rgba(0,0,0,.72); color-scheme:dark;
  --preench:var(--card-2); --coluna:var(--card-2); --coluna-2:color-mix(in srgb, var(--card-2) 70%, transparent); --fio:transparent;
  --grade:rgba(255,255,255,.16); --grade-cab:#242427; --grade-zebra:rgba(255,255,255,.025); --grade-tot:#232326;
  --grade-h:rgba(255,255,255,.14); --grade-v:rgba(255,255,255,.06); --g-borda:rgba(255,255,255,.09);
  --g-linha:rgba(255,255,255,.065); --g-col:rgba(255,255,255,.035); --g-cab-linha:rgba(255,255,255,.12);
  --g-sombra:rgba(0,0,0,.5); --g-zebra:color-mix(in srgb, var(--ink) 3.6%, var(--card));
  --g-sobre:color-mix(in srgb, var(--accent) 10%, var(--card));
  --g-aberto:color-mix(in srgb, var(--accent) 17%, var(--card)); --g-faixa:color-mix(in srgb, var(--ink) 6%, var(--card))
}

*{box-sizing:border-box}
html,body{margin:0}
/* nada passa da largura da janela (o painel fechado, fora da tela, não abre rolagem de lado); clip não cria rolagem, o cabeçalho preso continua */
html{overflow-x:clip}
body{background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Inter,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.47; -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; letter-spacing:-.005em; overflow-x:clip}
/* 14/10/2026: era overflow-x:hidden, que fazia do body uma caixa de rolagem e soltava tudo o que é preso (a barra de cima e o
   cabeçalho das planilhas rolavam junto com a página); clip guarda a largura sem isso */
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-align:inherit}
input,select,textarea{font:inherit; color:var(--ink)}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:8px}
[hidden]{display:none!important}

/* ---------- barra superior ---------- */
.barra{position:sticky; top:0; z-index:20; background:var(--glass); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--line-2)}
.barra-in{max-width:var(--largura); margin:0 auto; padding:10px clamp(12px,3vw,24px); display:flex; align-items:center; gap:14px}
.marca{font-weight:600; font-size:15px; white-space:nowrap; cursor:pointer; border-radius:8px}
.marca:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
/* Barra de ícones: cabe inteira; o nome aparece ao passar o mouse (data-dica). */
.nav{flex:1; display:flex; justify-content:center; gap:4px; overflow:visible; min-width:0}
.nav button{width:42px; height:36px; display:grid; place-items:center; border-radius:12px; color:var(--ink-2); flex:none; transition:background .15s, color .15s}
.nav button svg{width:20px; height:20px}
.nav button:hover{background:var(--line-2); color:var(--ink)}
.nav button[aria-current="page"]{background:var(--ink); color:var(--bg)}
.nav button[data-dica]:hover::after{font-size:12.5px; top:calc(100% + 6px)}
@media (max-width:520px){
  .nav{justify-content:flex-start; scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav button{width:36px}
}
.lado{display:flex; align-items:center; gap:8px; white-space:nowrap}
.lado .dt{font-size:12.5px; color:var(--muted)}
.lado .tema{font-size:16px; color:var(--muted); width:30px; height:30px; border-radius:50%; display:grid; place-items:center}
.lado .tema:hover{background:var(--line-2); color:var(--ink)}
.av{width:34px; height:34px; border-radius:50%; display:inline-grid; vertical-align:middle; place-items:center; font-weight:600; font-size:12.5px; letter-spacing:.02em;
  color:color-mix(in srgb, var(--pc) 78%, var(--ink)); background:color-mix(in srgb, var(--pc) 18%, var(--card)); flex:none}
.av.lg{width:64px; height:64px; font-size:22px}
.av.sm{width:22px; height:22px; font-size:9.5px}
.velho{background:var(--u2-bg); color:var(--u2); font-size:13px; text-align:center; padding:6px 12px}
/* a oficina de testes (EV_OFICINA=1, 17/10/2026): uma faixa fina no alto de todas as páginas, acima da barra */
.oficina{font-size:12px; line-height:1.4; text-align:center; padding:4px 16px; background:var(--card-2); color:var(--muted); border-bottom:1px solid var(--line-2)}
.oficina a{color:var(--accent); text-decoration:none; white-space:nowrap}
.oficina a:hover{text-decoration:underline}

/* ---------- página ---------- */
main{max-width:var(--largura); margin:0 auto; padding:clamp(18px,3vw,30px) clamp(16px,3vw,24px) 90px; transition:margin-right .25s ease;
  padding-top:clamp(14px,2.2vw,24px)}
.topo{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:16px; gap:14px}
.kicker{font-size:13px; color:var(--muted); font-weight:500; margin:0 0 2px}
h1{line-height:1.1; font-weight:700; letter-spacing:-.025em; margin:0; font-size:clamp(24px,3.2vw,30px)}
.frase{font-size:clamp(16px,2vw,18px); line-height:1.45; color:var(--ink-2); margin:8px 0 0; max-width:820px}
.frase b{color:var(--ink); font-weight:600}
h2{font-weight:700; letter-spacing:-.015em; margin:0; font-size:clamp(17px,2vw,20px)}
h3{font-size:16px; margin:0}
.sec{margin-top:clamp(22px,3vw,34px)}
.sec-h{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:10px}
.sec-h p{margin:2px 0 0; color:var(--muted); font-size:13.5px}
.acao{font-size:14px; color:var(--accent); white-space:nowrap}
.acao:hover{text-decoration:underline}
.card{background:var(--card); border-radius:20px; box-shadow:var(--shadow); padding:22px}
.vazio{color:var(--muted); font-size:14px; padding:6px 0}
.nota{font-size:13px; color:var(--muted); margin:12px 0 0}
.chips{display:inline-flex; gap:2px; background:var(--preench); border-radius:10px; padding:3px; flex-wrap:wrap; max-width:100%}
.chip{padding:5px 12px; border-radius:8px; font-size:13px; color:var(--ink-2); white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--card); color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.1)}
.barra-filtros{display:flex; align-items:center; flex-wrap:wrap; margin-bottom:12px; gap:8px}
.btn{display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:20px; background:var(--accent); color:#fff; font-weight:500; font-size:14px; white-space:nowrap}
.btn:hover{filter:brightness(1.08)}
.btn.sec2{background:var(--preench); color:var(--ink)}
.btn.sec2:hover{background:color-mix(in srgb,var(--accent) 10%, var(--preench))}
.btn.ok{background:var(--u0)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn.ok{background:#2F8F62} }
:root[data-theme="dark"] .btn.ok{background:#2F8F62}
.btn.perigo{background:var(--preench); color:var(--u4)}
.btn[disabled]{opacity:.45; cursor:default; filter:none}
.btn svg{width:15px; height:15px}
.pill{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; padding:2px 9px 2px 7px; border-radius:20px; background:var(--g-bg); color:var(--g); white-space:nowrap}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--g)}
.tag{display:inline-flex; align-items:center; gap:4px; font-size:12.5px; padding:2px 9px; border-radius:20px; background:var(--card-2); color:var(--ink-2); white-space:nowrap}
.tag button{color:var(--faint); font-size:14px; line-height:1}
.tag button:hover{color:var(--u4)}

/* ---------- quadros com números (clicáveis: abrem a lista) ---------- */
.quadros{display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:10px}
.qd{background:var(--card); border-radius:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:2px; text-align:left; transition:transform .15s, box-shadow .15s; min-width:0;
  padding:13px 14px 12px}
button.qd:hover{transform:translateY(-2px); box-shadow:var(--shadow-up)}
.qd .rot{font-size:13px; color:var(--muted); font-weight:500; display:flex; align-items:center; gap:6px}
.qd .rot i{width:8px; height:8px; border-radius:50%; background:var(--c); flex:none}
.qd .num{font-weight:700; letter-spacing:-.03em; line-height:1.1; white-space:nowrap; font-size:clamp(24px,2.8vw,34px)}
.qd .num small{font-size:.45em; font-weight:600}
.qd .sub{font-size:13px; color:var(--muted)}
.qd .sub.mau{color:var(--u4); font-weight:500}
.qd .sub.bom{color:var(--u0); font-weight:500}

/* ---------- indicadores (faturamento e gasto contra a média) ---------- */
.inds{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px}
.ind{background:var(--card); border-radius:18px; box-shadow:var(--shadow); padding:16px 18px; display:flex; flex-direction:column; gap:8px; text-align:left}
.ind .rot{font-size:13px; color:var(--muted); font-weight:500}
.ind .num{font-size:clamp(26px,3vw,32px); font-weight:700; letter-spacing:-.025em; line-height:1.1}
.ind .cmp{display:flex; gap:8px; flex-wrap:wrap}
.seta{display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:600; padding:3px 9px; border-radius:20px; background:var(--g-bg); color:var(--g)}
.ind .mini{display:flex; align-items:flex-end; gap:3px; height:38px}
.ind .mini i{flex:1; border-radius:2px; background:color-mix(in srgb,var(--c,var(--accent)) 30%, var(--card-2)); min-height:2px}
.ind .mini i.at{background:var(--c,var(--accent))}

/* ---------- planta: grade que se reorganiza com o tamanho ---------- */
.planta{position:relative; background:var(--floor); border-radius:24px; padding:clamp(10px,1.4cqw,16px); box-shadow:inset 0 0 0 1px var(--line-2); container-type:inline-size; overflow:hidden}
.planta-g{display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:auto 34px auto; gap:0 clamp(8px,1.2cqw,14px)}
.sala{position:relative; background:var(--room); border-radius:16px; box-shadow:0 1px 2px rgba(0,0,0,.05), 0 0 0 1px var(--line-2); transition:box-shadow .2s, transform .2s; display:flex; flex-direction:column; cursor:pointer; min-height:clamp(170px,22cqw,240px); min-width:0}
.sala:hover{box-shadow:var(--shadow-up); transform:translateY(-1px)}
.sala[data-sala="comercial"]{grid-column:1/4; grid-row:1}
.sala[data-sala="gestao"]{grid-column:4/7; grid-row:1}
.sala[data-sala="financeiro"]{grid-column:7/10; grid-row:1}
.sala[data-sala="arquivo"]{grid-column:10/13; grid-row:1}
.sala[data-sala="caio"]{grid-column:1/4; grid-row:3}
.sala[data-sala="leandro"]{grid-column:4/8; grid-row:3}
.sala[data-sala="nucleo"]{grid-column:8/13; grid-row:3}
.corredor{grid-column:1/-1; grid-row:2; position:relative}
.corredor[data-lista]{cursor:pointer}
.sala-h{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px 14px 0}
.sala-n{font-size:13px; font-weight:600; color:var(--ink-2); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sala-h .pill{flex:none}
.sala-h button.pill{border:0; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; transition:filter .15s}
.sala-h button.pill:hover{filter:brightness(.95)}
.sala-c{flex:1; display:flex; align-items:center; justify-content:space-evenly; gap:4px; padding:6px 6px 26px; min-height:0; flex-wrap:wrap}
.janela{position:absolute; top:-1px; left:20%; right:20%; height:3px; border-radius:2px; background:linear-gradient(90deg,#A7D3F5,#CDE6FA)}
.mesa{display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px; border-radius:12px; min-width:0}
.mesa:hover{background:var(--line-2)}
.tampo{position:relative; width:clamp(72px,9cqw,120px); height:clamp(38px,4.6cqw,60px); background:var(--wood); border-radius:6px; box-shadow:inset 0 -3px 0 var(--wood-edge)}
.monitor{position:absolute; left:50%; top:10%; width:30%; height:12%; transform:translateX(-50%); background:var(--screen); border-radius:2px}
.folhas{position:absolute; bottom:16%; display:flex; flex-direction:column-reverse; align-items:center}
.folhas span{display:block; width:clamp(13px,1.6cqw,20px); height:3px; background:var(--paper); border:1px solid var(--paper-edge); margin-top:-1px; border-radius:1px}
.solta{position:absolute; width:14px; height:18px; background:var(--paper); border:1px solid var(--paper-edge); border-radius:1px}
.caneca{position:absolute; right:14%; bottom:22%; width:11px; height:11px; border-radius:50%; background:var(--mug); box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--mug) 60%, #000)}
.vapor{position:absolute; right:15%; bottom:46%; font-size:11.5px; color:var(--faint); animation:vapor 3s ease-in-out infinite}
@keyframes vapor{0%,100%{opacity:.2; transform:translateY(2px)} 50%{opacity:.8; transform:translateY(-2px)}}
.pessoa{position:relative; margin-top:-8px; z-index:1}
/* o anel da bolinha é da cor da pessoa (como em todo o sistema); a situação da mesa é a bolinha pequena antes do nome */
.pessoa .av{width:clamp(30px,3.4cqw,42px); height:clamp(30px,3.4cqw,42px); font-size:13px; box-shadow:0 0 0 3px var(--room), 0 0 0 5px color-mix(in srgb, var(--pc) 55%, transparent)}
.mesa .nm .dot-s{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--g); margin-right:6px; vertical-align:2px}
.mesa .nm{font-size:13px; font-weight:600; margin-top:4px}
.mesa .est{font-size:11.5px; color:var(--muted)}
.estante{display:grid; grid-template-columns:repeat(8,1fr); gap:3px; width:78%}
.estante i{display:block; height:clamp(11px,1.3cqw,17px); border-radius:2px; background:color-mix(in srgb,var(--u2) 22%, var(--room))}
.estante i.on{background:color-mix(in srgb,var(--u2) 65%, var(--room))}

/* bonequinhos no corredor: cada um leva uma peça de uma sala a outra */
.boneco{position:absolute; top:3px; width:16px; height:28px; left:var(--de); animation:anda var(--dur) linear var(--atraso) infinite; opacity:0}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .boneco{filter:drop-shadow(0 0 1px rgba(255,255,255,.75)) drop-shadow(0 0 3px rgba(255,255,255,.25))} }
:root[data-theme="dark"] .boneco{filter:drop-shadow(0 0 1px rgba(255,255,255,.75)) drop-shadow(0 0 3px rgba(255,255,255,.25))}
.boneco .cab{position:absolute; left:4px; top:0; width:8px; height:8px; border-radius:50%; background:var(--skin)}
.boneco .corpo{position:absolute; left:3px; top:8px; width:10px; height:11px; border-radius:4px 4px 2px 2px; background:var(--pc)}
.boneco .pe{position:absolute; top:19px; width:3px; height:8px; border-radius:2px; background:var(--ink-2); transform-origin:top center}
.boneco .pe.a{left:4px; animation:passo .5s ease-in-out infinite alternate}
.boneco .pe.b{left:9px; animation:passo .5s ease-in-out infinite alternate-reverse}
.boneco .folha{position:absolute; left:11px; top:9px; width:7px; height:9px; background:var(--paper); border:1px solid var(--paper-edge); border-radius:1px}
.boneco.volta .folha{display:none}
@keyframes passo{from{transform:rotate(-16deg)} to{transform:rotate(16deg)}}
@keyframes anda{0%{left:var(--de); opacity:0} 4%{opacity:1} 46%{left:var(--para); opacity:1} 50%{left:var(--para); opacity:0} 100%{left:var(--para); opacity:0}}
/* indicadores vivos nas salas */
.cofre{display:inline-flex; flex-direction:column; align-items:center; gap:4px; color:inherit; font:inherit}
.cofre-i{position:relative; width:46px; height:40px; display:block}
.cofre .pote{position:absolute; left:6px; bottom:0; width:34px; height:30px; border-radius:6px 6px 10px 10px; border:2px solid var(--wood-edge); border-top-width:3px; overflow:hidden; background:var(--card-2)}
.cofre .nivel{position:absolute; left:0; right:0; bottom:0; background:color-mix(in srgb,var(--g) 55%, transparent); transition:height .6s}
.cofre .moeda{position:absolute; left:18px; top:-8px; width:10px; height:10px; border-radius:50%; background:var(--coin); box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--coin) 70%, #000); animation:cai 2.8s ease-in infinite}
@keyframes cai{0%{transform:translateY(-6px); opacity:0} 15%{opacity:1} 55%{transform:translateY(22px); opacity:1} 60%,100%{transform:translateY(22px); opacity:0}}
.pulso{width:8px; height:8px; border-radius:50%; background:var(--g); box-shadow:0 0 0 0 color-mix(in srgb,var(--g) 50%, transparent); animation:pulso 2s ease-out infinite}
@keyframes pulso{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--g) 55%, transparent)} 100%{box-shadow:0 0 0 9px transparent}}
.contratos{position:relative; width:42px; height:40px}
.contratos span{position:absolute; left:8px; width:24px; height:30px; background:var(--paper); border:1px solid var(--paper-edge); border-radius:2px}
.contratos span:nth-child(1){top:8px; transform:rotate(-8deg)}
.contratos span:nth-child(2){top:5px; transform:rotate(4deg)}
.contratos span:nth-child(3){top:2px}
.contratos b{position:absolute; right:0; top:-2px; width:18px; height:18px; border-radius:50%; background:var(--u0); color:#fff; font-size:11.5px; display:grid; place-items:center; animation:selo 3.4s ease-in-out infinite}
@keyframes selo{0%,70%,100%{transform:scale(1)} 78%{transform:scale(1.25)}}
.bandejas{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; justify-content:center; max-width:50%}
.bandejas .tit{width:100%; text-align:center; font-size:12.5px; color:var(--muted); margin-bottom:2px}
.bandeja{display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px; border-radius:12px}
.bandeja:hover{background:var(--line-2)}
.bandeja .cx{width:clamp(48px,6cqw,82px); height:clamp(28px,3.4cqw,46px); border:2px solid var(--wood-edge); border-top:0; border-radius:0 0 8px 8px; background:var(--card-2); display:flex; align-items:flex-end; justify-content:center; padding-bottom:3px}
.bandeja .cx b{font-size:clamp(14px,1.8cqw,22px)}
.bandeja small{font-size:12.5px; color:var(--ink-2); font-weight:500}
.planta.sozinha .planta-g{display:block}
.planta.sozinha .sala{min-height:clamp(240px,30vw,360px); cursor:default}
.planta.sozinha .sala:hover{transform:none; box-shadow:0 1px 2px rgba(0,0,0,.05), 0 0 0 1px var(--line-2)}
.planta.sozinha .tampo{width:clamp(100px,14cqw,190px); height:clamp(50px,7cqw,96px)}
.planta.sozinha .pessoa .av{width:clamp(40px,5cqw,62px); height:clamp(40px,5cqw,62px); font-size:18px}

@container (max-width:760px){
  .planta-g{grid-template-columns:1fr 1fr; grid-template-rows:none; gap:10px}
  .planta-g > .sala{grid-column:auto!important; grid-row:auto!important}
  /* o Leandro fica ao lado do Caio; só o Núcleo técnico (duas mesas) ocupa a linha inteira */
  .planta-g > .sala[data-sala="nucleo"]{grid-column:1/-1!important}
  .corredor{display:none}
}
@container (max-width:440px){
  .planta-g{grid-template-columns:1fr}
  .bandejas{max-width:100%}
}

/* ---------- alertas ---------- */
.alertas{display:grid; grid-template-columns:minmax(0,1fr); gap:8px}
.alerta{min-width:0; display:flex; align-items:center; background:var(--card); box-shadow:var(--shadow); border-left:5px solid var(--ac);
  gap:12px; border-radius:14px; padding:10px 14px 10px 12px; border-left-width:3px}
.alerta .ic{display:grid; place-items:center; background:color-mix(in srgb, var(--ac) 14%, var(--card)); color:var(--ac); flex:none;
  width:30px; height:30px; border-radius:9px}
.alerta .tx{flex:1; min-width:0}
.alerta .tt{font-weight:600; font-size:14px; line-height:1.3}
.alerta .ok:not(.btn){font-size:13px; color:var(--muted); padding:6px 12px; border-radius:20px; background:var(--card-2)}
.alerta .ok:not(.btn):hover{color:var(--ink)}
.alerta .btn.mini{flex:none}
/* Cumprido hoje: fica no quadro, riscado e apagado, para a pessoa ver o que já fez no dia. */
.alerta.feito{box-shadow:none; background:color-mix(in srgb, var(--card) 55%, transparent); border-left-color:color-mix(in srgb, var(--ac) 35%, transparent)}
.alerta.feito .tx{opacity:.5}
.alerta.feito .tt{text-decoration:line-through; text-decoration-thickness:1.5px; text-decoration-color:color-mix(in srgb, var(--ink) 55%, transparent)}
.alerta.feito .ic{background:color-mix(in srgb, var(--u0) 14%, var(--card)); color:var(--u0)}
.alerta .feito-rot{color:var(--u0); font-weight:500; padding-right:4px; font-size:12px}

/* ---------- matriz de prazos ---------- */
/* Prazos e tarefas por pessoa: os cartões coloridos de sempre, no compasso enxuto (12/10/2026) */
.matriz{display:grid; grid-template-columns:minmax(110px,160px) repeat(4,minmax(0,1fr)); gap:6px; align-items:stretch}
.matriz .cab{font-size:12.5px; color:var(--muted); font-weight:500; padding:0 4px 2px; align-self:end}
.matriz .quem{display:flex; align-items:center; gap:8px; font-weight:500; font-size:14px; padding:0 4px; min-width:0}
.cel{border-radius:11px; background:var(--card); box-shadow:var(--shadow); padding:6px 11px; text-align:left; display:flex; align-items:baseline; gap:6px; min-height:40px; min-width:0}
.cel b{font-size:19px; font-weight:700; letter-spacing:-.02em; color:var(--g,var(--ink)); font-variant-numeric:tabular-nums}
.cel span{font-size:12px; color:var(--muted)}
.cel[data-v="0"]{background:transparent; box-shadow:inset 0 0 0 1px var(--line-2); cursor:default}
.cel[data-v="0"] b{color:var(--faint); font-weight:500}
button.cel:not([data-v="0"]):hover{box-shadow:var(--shadow-up)}
.cel.quente{background:var(--g-bg); box-shadow:none}

/* ---------- barras ---------- */
.barras{display:flex; align-items:flex-end; gap:clamp(3px,.8vw,8px); height:200px; padding-top:22px}
.barras .sem{flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; min-width:0}
.barras .pilar{width:100%; max-width:44px; display:flex; flex-direction:column-reverse; gap:2px; position:relative}
.barras .grupo{width:100%; display:flex; align-items:flex-end; justify-content:center; gap:3px; height:100%}
.barras .grupo .pilar{max-width:22px}
.barras .pilar i:last-child{border-radius:6px 6px 3px 3px}
.barras .pilar .tot{position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-size:11.5px; color:var(--muted); white-space:nowrap}
.barras .eixo{font-size:11.5px; color:var(--faint); height:14px; white-space:nowrap}
.barras .sem.atual .eixo{color:var(--ink); font-weight:600}
.leg{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); margin-top:14px}
.leg span[style*="--c"]::before{content:""; display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--c); margin-right:6px; vertical-align:-1px}

/* ---------- métricas comparadas ---------- */
.metricas{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
.mt{background:var(--card); border-radius:18px; box-shadow:var(--shadow); padding:16px 18px; text-align:left}
.mt .rot{font-size:13px; color:var(--muted); font-weight:500; min-height:36px}
.mt .vals{display:flex; gap:22px; margin-top:6px}
.mt .v{display:flex; flex-direction:column}
.mt .v b{font-size:32px; font-weight:700; letter-spacing:-.025em; line-height:1.1}
.mt .v span{font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:5px}
.mt .v span i{width:8px; height:8px; border-radius:50%; background:var(--pc)}
.mt .det{font-size:12.5px; color:var(--faint); margin-top:6px}
/* Números da sala: até 4 grandes; o resto numa faixa menor, em pílulas (13/10/2026), cada valor abre a lista */
.metricas-m{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.mt-p{display:flex; align-items:center; gap:4px; padding:3px 6px 3px 13px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line); max-width:100%}
.mt-p .rot{font-size:13px; color:var(--muted); margin-right:4px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mt-p .v{display:inline-flex; align-items:center; gap:5px; padding:3px 7px; border-radius:999px; font-size:14px}
.mt-p .v b{font-weight:650}
.mt-p .v i{width:7px; height:7px; border-radius:50%; background:var(--pc)}
.mt-p button.v[data-lista]:hover{background:var(--card)}

/* ---------- semana ---------- */
.semana{display:grid; grid-template-columns:repeat(auto-fill,minmax(136px,1fr)); gap:12px; overflow:visible; padding:4px 4px 8px}
@media (min-width:700px){ .semana{grid-template-columns:repeat(var(--n,6),minmax(0,1fr)); gap:10px} }
@media (min-width:700px) and (max-width:1100px){ .semana .dia{padding:12px 8px; min-height:140px} .semana .dia-h{padding:0 2px 2px} }
.dia{background:var(--card); border-radius:18px; box-shadow:var(--shadow); padding:14px 12px; min-height:180px; display:flex; flex-direction:column; gap:8px; scroll-snap-align:start}
.dia.hoje{box-shadow:0 0 0 2px var(--accent), var(--shadow)}
.dia.atras{background:color-mix(in srgb,var(--u4) 5%, var(--card))}
.dia-h{display:flex; justify-content:space-between; align-items:baseline; padding:0 4px 2px}
.dia-h b{font-size:15px}
.dia-h span{font-size:12.5px; color:var(--muted)}
.dia.atras .dia-h b{color:var(--u4)}
.it{display:block; width:100%; background:var(--card-2); border-radius:12px; padding:9px 10px 9px 12px; position:relative; transition:background .15s; text-align:left}
.it:hover{background:color-mix(in srgb,var(--accent) 8%, var(--card-2))}
.it::before{content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:2px; background:var(--tc)}
.it .tp{font-size:12px; font-weight:600; color:var(--tc)}
.it .tt{font-size:13px; font-weight:500; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; hyphens:auto; overflow-wrap:anywhere}
.it .cs{font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.it.feita{opacity:.55}
.it.feita .tt{text-decoration:line-through}
.mais{font-size:13px; color:var(--accent); padding:2px 6px; text-align:left}
.dia .nada{font-size:13px; color:var(--faint); padding:8px 4px}

/* ---------- demandas: cartões, Kanban e planilha ---------- */
.dm{background:var(--card); border-radius:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; transition:transform .15s, box-shadow .15s; text-align:left; width:100%;
  padding:14px 16px; gap:8px; min-width:0}
.dm:hover{transform:translateY(-2px); box-shadow:var(--shadow-up)}
.dm[draggable="true"]{cursor:grab}
.dm.arrastando{opacity:.4}
.dm.aberto{box-shadow:0 0 0 2px var(--accent), var(--shadow)}
.dm .cl{font-size:12.5px; color:var(--muted); font-weight:500}
.dm .as{font-size:16px; font-weight:600; line-height:1.3; letter-spacing:-.01em}
.passos{display:flex; align-items:center}
.passos .p{flex:1; display:flex; align-items:center}
.passos .p::after{content:""; flex:1; height:2px; background:var(--line)}
.passos .p:last-child{flex:none}
.passos .p:last-child::after{display:none}
.passos .b{width:10px; height:10px; border-radius:50%; background:var(--line); flex:none}
.passos .p.feito .b, .passos .p.feito::after{background:var(--ink-2)}
.passos .p.agora .b{background:var(--g); box-shadow:0 0 0 4px color-mix(in srgb,var(--g) 22%, transparent)}
.passos-rot{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--muted); margin:0 0 14px}
.passos-rot b{color:var(--ink); font-weight:600}
.tempo{height:6px; border-radius:3px; background:var(--card-2); overflow:hidden}
.tempo i{display:block; height:100%; border-radius:3px; background:var(--g)}
.dm .pe{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 8px; font-size:12.5px; color:var(--muted); min-width:0}
.dm .pe .pill{max-width:100%; overflow:hidden; text-overflow:ellipsis}
.kanban{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(200px,1fr); gap:12px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x proximity;
  align-items:start}
/* Quando as colunas não cabem, a borda de onde ainda há conteúdo esmaece de leve (a coluna cortada não parece quebrada). */
.kanban.rola-dir, .grade-caixa.rola-dir{-webkit-mask-image:linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 48px), transparent)}
.kanban.rola-esq{-webkit-mask-image:linear-gradient(to left, #000 calc(100% - 48px), transparent); mask-image:linear-gradient(to left, #000 calc(100% - 48px), transparent)}
.kanban.rola-dir.rola-esq{-webkit-mask-image:linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image:linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent)}
.col{background:var(--coluna); box-shadow:inset 0 0 0 1px var(--fio); border-radius:16px; padding:12px; min-height:220px; display:flex; flex-direction:column; gap:10px; transition:box-shadow .15s, background .15s; scroll-snap-align:start}
.col.alvo{box-shadow:inset 0 0 0 2px var(--accent); background:var(--accent-bg)}
.col h4{margin:2px 4px; font-size:13px; display:flex; justify-content:space-between}
.col h4 span{color:var(--muted); font-weight:500}
.col .dm{padding:14px; gap:8px; box-shadow:0 1px 2px rgba(0,0,0,.05)}
.col .dm .as{font-size:14px}
.tabela{background:var(--card); overflow:auto; border:1px solid var(--grade-h); border-radius:12px; box-shadow:none}
table{width:100%; border-collapse:collapse; font-size:14px}
th{text-align:left; font-weight:500; color:var(--muted); font-size:12.5px; padding:11px 12px; border-bottom:1px solid var(--line); white-space:nowrap; position:sticky; top:0; background:var(--card)}
th button{color:inherit; font-weight:inherit}
th button:hover{color:var(--ink)}
td{padding:10px 12px; border-bottom:1px solid var(--line-2); vertical-align:middle}
td.n,th.n{text-align:right}
tr.cl{cursor:pointer}
tr.cl:hover td{background:var(--card-2)}
tr.aberto td{background:var(--accent-bg)}
td .sub{display:block; font-size:12.5px; color:var(--muted)}
.etapa-dots{display:inline-flex; gap:3px}
.etapa-dots i{width:8px; height:8px; border-radius:50%; background:var(--line)}
.etapa-dots i.f{background:var(--ink-2)}
.etapa-dots i.a{background:var(--g)}
@media (max-width:720px){
  /* a planilha vira cartões: cada linha uma ficha */
  .tabela.vira table, .tabela.vira tbody, .tabela.vira tr, .tabela.vira td{display:block; width:100%}
  .tabela.vira thead{display:none}
  .tabela.vira tr{padding:12px 14px; border-bottom:1px solid var(--line-2)}
  .tabela.vira td{border:0; padding:2px 0}
  .tabela.vira td[data-r]::before{content:attr(data-r) " · "; color:var(--muted); font-size:12.5px}
}
.mover{display:flex; flex-wrap:wrap; gap:6px}
.mover button{padding:7px 12px; border-radius:20px; background:var(--card-2); font-size:13px}
.mover button:hover{background:var(--accent); color:#fff}
.mover button[disabled]{opacity:.4; cursor:default; background:var(--card-2); color:inherit}

/* ---------- listas ---------- */
.lista{background:var(--card); border-radius:18px; box-shadow:var(--shadow); padding:6px 0; container-type:inline-size}
/* lista estreita (celular, coluna dupla, painel): o valor e os botões descem para baixo do título */
@container (max-width:480px){
  .ln{grid-template-columns:auto minmax(0,1fr)}
  .ln > .rr, .ln > .acoes-ln{grid-column:2; justify-content:flex-start; align-items:flex-start; text-align:left}
  .ln > .acoes-ln .rr{align-items:flex-start; text-align:left; flex:1}
  .ln > .idade{grid-column:2}
}
.ln{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; width:100%; text-align:left; padding:10px 16px; gap:12px}
.ln + .ln{border-top:1px solid var(--line-2)}
button.ln:hover, .ln.cl:hover{background:var(--card-2); cursor:pointer}
.ln.aberto{background:var(--accent-bg)}
.ln .dot{width:9px; height:9px; border-radius:50%; background:var(--g,var(--ux))}
.ln .tt{font-weight:500; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ln .ss{font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ln .rr{text-align:right; font-size:13px; color:var(--muted); white-space:nowrap; display:flex; flex-direction:column; align-items:flex-end; gap:2px}
.ln .rr b{display:block; color:var(--g,var(--ink)); font-weight:600}
/* o número do processo no painel do cliente: pequeno e cinza, na linha do "sem movimento" (14/10/2026) */
.ln .rr .rr-num{align-self:stretch; display:flex; justify-content:space-between; align-items:baseline; gap:12px; max-width:100%; min-width:0}
.ln .rr .num-proc{font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums}
/* a situação do processo, quando longa, encurta com reticências (inteira ao passar o mouse): não empurra o título (14/10/2026) */
.ln > .rr:has(.sit-proc){min-width:0; max-width:min(60cqi, 460px)}
.ln .rr .sit-proc{display:block; max-width:100%; min-width:0; overflow:hidden; text-overflow:ellipsis}
.ln .rr .rr-num .num-proc{flex:none}
@container (max-width:480px){ .ln > .rr:has(.sit-proc){max-width:100%} }
.ln .acoes-ln{display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.ln .tt .acao{white-space:normal; text-align:left}
.ln .acoes-ln .btn{padding:5px 12px; font-size:13px}
.ln.feita .tt{text-decoration:line-through; color:var(--muted)}
.idade{display:grid; grid-template-columns:minmax(0,1fr) minmax(80px,160px); gap:16px; align-items:center; min-width:0}
.idade > span{min-width:0}
.idade .br{height:8px; border-radius:4px; background:var(--card-2); overflow:hidden}
.idade .br i{display:block; height:100%; border-radius:4px; background:var(--g)}
details.dob{background:var(--card); border-radius:18px; box-shadow:var(--shadow); margin-top:12px}
details.dob summary{list-style:none; cursor:pointer; padding:16px 20px; display:flex; align-items:center; font-weight:600; gap:8px}
details.dob summary::-webkit-details-marker{display:none}
details.dob summary span{font-weight:400; color:var(--muted); font-size:14px; margin-left:auto; padding-left:24px; text-align:right; max-width:60%}
details.dob summary::after{content:"›"; font-size:20px; color:var(--faint); transform:rotate(90deg); transition:transform .2s}
details.dob[open] summary::after{transform:rotate(-90deg)}
details.dob .lista{box-shadow:none; border-top:1px solid var(--line-2); border-radius:0 0 18px 18px}
/* regras de uma conta (apuração, sócios): recolhidas, abrem com um clique */
details.dob.regras{margin:0 0 12px}
details.dob + details.dob.regras{margin-top:12px}  /* depois de outro recolhido (Perdas · Regras): o mesmo respiro e o mesmo tamanho deles */
details.dob + details.dob.regras summary{padding:16px 20px; font-size:inherit}
details.dob.regras summary{padding:12px 18px; font-size:14px}
.dois{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr)); gap:14px}
.dois .card{padding:18px 6px 6px}
.dois .card > p{margin:0 14px 8px; font-size:13px; color:var(--muted)}
.dois .card h3{margin:0 14px 2px}
.dois .lista{box-shadow:none; padding:0}
.emp{display:flex; height:10px; gap:2px; border-radius:5px; overflow:hidden}
.emp i{display:block; height:100%}
.busca{width:100%; max-width:420px; padding:10px 14px; border:0; border-radius:12px; background:var(--preench); color:var(--ink); font:inherit}
.fonte{font-size:12.5px; color:var(--faint); margin-top:28px}
/* os botões de ir para outro lugar no pé da tela (14/10/2026) */
.rodape-acoes{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px}
.rodape-acoes + .fonte{margin-top:10px}
.rodape-acoes .btn{white-space:normal; text-align:left; max-width:100%}
/* no celular o menu "Mais" saía pela esquerda (teste de 14/10/2026): fica preso à direita da tela */
@media (max-width:520px){ .menu-nav{position:fixed; top:58px; right:12px; left:auto; max-width:calc(100vw - 24px)} }
.sec-h > .btn.mini{flex:none; align-self:center}
.sec .quadros-m.sec-num{margin:0 0 12px}

/* ---------- painel: quadro no centro (o padrão) ou ao lado ----------
   Gabriel, 14/10/2026 (reunião com a equipe): "prefere quando abre o quadrinho"; "a barra lateral pode ocupar um espaço
   maior, parece que ficou tudo muito apertado". O botão ao lado do × leva o quadro para a lateral e traz de volta.
   Camadas: barra 20 · fundo do quadro 24 · painel 25 · fundo da janela 30 · janela (lista, confirmação, arquivo) 31 ·
   aviso 40 · dicas 60. Aberto, o painel não usa transform (um transform prenderia nele o que é fixo na tela). */
.painel{position:fixed; z-index:25; background:var(--card); display:flex; flex-direction:column; visibility:hidden}
/* ao lado: preso à direita, mais largo (44% da tela, ao menos 520 px, até 880 px); a página ao lado continua utilizável */
.painel.ao-lado{top:0; right:0; bottom:0; width:var(--painel-w); box-shadow:-1px 0 0 var(--line), -24px 0 48px rgba(0,0,0,.10);
  transform:translateX(102%); transition:transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s .25s}
.painel.ao-lado.on{transform:none; visibility:visible; transition:transform .25s cubic-bezier(.2,.8,.2,1)}
/* no centro: o quadro grande sobre o fundo escurecido, preso em cima (cresce para baixo, sem pular) e rolando por dentro */
.painel.no-centro{top:var(--painel-topo); left:0; right:0; margin:0 auto; width:min(880px, calc(100vw - 48px)); max-height:calc(100vh - 2 * var(--painel-topo)); max-height:calc(100dvh - 2 * var(--painel-topo));
  border-radius:22px; overflow:hidden; box-shadow:0 0 0 1px var(--line-2), 0 24px 70px rgba(0,0,0,.22);
  opacity:0; transform:translateY(10px) scale(.985); transition:opacity .18s, transform .2s cubic-bezier(.2,.8,.2,1), visibility 0s .2s}
.painel.no-centro.on{opacity:1; transform:none; visibility:visible; transition:opacity .18s, transform .22s cubic-bezier(.2,.8,.2,1)}
.painel:focus{outline:none}
.veu-p{position:fixed; inset:0; z-index:24; background:rgba(0,0,0,.32); opacity:0; pointer-events:none; transition:opacity .2s}
.veu-p.on{opacity:1; pointer-events:auto}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .veu-p{background:rgba(0,0,0,.55)} :root:not([data-theme="light"]) .painel.no-centro{box-shadow:0 0 0 1px var(--line), 0 24px 70px rgba(0,0,0,.6)} }
:root[data-theme="dark"] .veu-p{background:rgba(0,0,0,.55)}
:root[data-theme="dark"] .painel.no-centro{box-shadow:0 0 0 1px var(--line), 0 24px 70px rgba(0,0,0,.6)}
/* no centro (e no celular), a página por trás fica parada: só o quadro rola */
html.trava-rolagem{overflow:hidden}
/* trocar de modo: sem a animação de abrir; o quadro só reaparece de leve. Clicar fora com algo por gravar: um leve aceno */
.painel.sem-anim{transition:none !important}
.painel.troca{animation:painel-troca .22s ease}
@keyframes painel-troca{from{opacity:.35}}
.painel.no-centro.segura{animation:painel-segura .28s ease}
@keyframes painel-segura{40%{transform:scale(1.012)}}
.painel-h{display:flex; align-items:flex-start; gap:12px; padding:18px 20px 12px; border-bottom:1px solid var(--line-2)}
.painel-h .tx{flex:1; min-width:0}
.painel-h .pill{white-space:normal; max-width:100%}
.painel-h h2{font-size:21px; line-height:1.25; word-break:break-word}
.painel-b{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:16px 20px 40px; display:flex; flex-direction:column; gap:18px}
.painel.no-centro .painel-h{padding:22px 28px 14px}
.painel.no-centro .painel-h h2{font-size:23px}
.painel.no-centro .painel-b{padding:18px 28px 44px; gap:20px}
@media (min-width:601px){ .painel.no-centro .campos{grid-template-columns:minmax(120px,170px) minmax(0,1fr); column-gap:16px} }
/* o × e, ao lado, o botão que leva o quadro para a lateral (e de volta): discreto, só com a dica ao passar o mouse */
.painel-bts{display:flex; align-items:center; gap:4px; flex:none; margin:-2px -6px 0 0}
.fecha{width:32px; height:32px; border-radius:50%; background:var(--card-2); color:var(--muted); font-size:19px; line-height:32px; text-align:center; flex:none}
.fecha:hover{color:var(--ink); background:var(--line)}
.modo-p{width:32px; height:32px; border-radius:50%; color:var(--muted); display:grid; place-items:center; flex:none}
.modo-p svg{width:19px; height:19px}
.modo-p:hover{color:var(--ink); background:var(--card-2)}
.modo-p[data-dica]:hover::after, .modo-p[data-dica]:focus-visible::after{left:auto; right:0; transform:none}
.painel .acoes{display:flex; gap:8px; flex-wrap:wrap}
.painel .bloco h3{font-size:13px; color:var(--muted); font-weight:600; margin:0 0 8px}
/* o histórico do painel, recolhido (13/10/2026): o título, quantas alterações e a setinha */
.painel details.hist summary{list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:8px}
.painel details.hist summary::-webkit-details-marker{display:none}
.painel details.hist summary h3{margin:0}
.painel details.hist summary span{font-size:12.5px; color:var(--faint)}
.painel details.hist summary::after{content:"›"; margin-left:auto; color:var(--faint); font-size:17px; line-height:1; transform:rotate(90deg); transition:transform .2s}
.painel details.hist[open] summary::after{transform:rotate(-90deg)}
.painel details.hist[open] summary{margin-bottom:8px}
.painel details.hist li{align-items:start}
.painel details.hist .de{color:var(--muted)}
.painel .lista{box-shadow:none; background:var(--card-2); padding:2px 0}
.painel .ln{padding:10px 14px}
.painel .ln + .ln{border-top-color:var(--line)}
@media (min-width:1280px){ body.com-painel main, body.com-painel .barra-in, body.com-painel #velho{margin-right:calc(var(--painel-w) + 8px)} }
.barra-in, #velho{transition:margin-right .25s ease}
@media (max-width:700px){ .painel{--painel-w:100vw} }
/* celular: o quadro é a tela inteira, como uma folha que sobe; sem o botão da lateral */
@media (max-width:600px){
  .painel.ao-lado, .painel.no-centro{top:0; right:0; bottom:0; left:0; width:auto; max-height:none; margin:0; border-radius:0; box-shadow:none; opacity:1;
    transform:translateY(100%); transition:transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s .28s}
  .painel.ao-lado.on, .painel.no-centro.on{transform:none; transition:transform .28s cubic-bezier(.2,.8,.2,1)}
  .painel .modo-p, .veu-p{display:none}
  .painel .painel-h, .painel.no-centro .painel-h{padding:16px 16px 12px}
  .painel.no-centro .painel-h h2{font-size:21px}
  .painel .painel-b, .painel.no-centro .painel-b{padding:14px 16px 40px; gap:18px}
}

/* campos: o valor aparece pronto; um clique e ele vira campo de edição */
.campos{display:grid; grid-template-columns:minmax(110px,140px) minmax(0,1fr); gap:2px 12px; font-size:14px; margin:0}
.campos dt{color:var(--muted); padding:7px 0}
.campos dd{margin:0; min-width:0}
.cp{display:flex; align-items:center; gap:6px; width:100%; min-height:34px; padding:6px 24px 6px 8px; margin-left:-8px; border-radius:8px; text-align:left; flex-wrap:wrap; position:relative}
.cp:hover{background:var(--card-2)}
/* o lápis fica no canto, por cima do espaço reservado: não empurra o texto nem faz o quadro crescer (Gabriel, 13/10/2026:
   "esse movimento de subir e descer o quadro me irrita; vamos tirar isso do sistema inteiro; deixar só mudando a cor") */
.cp:hover::after{content:"✎"; position:absolute; right:8px; top:8px; color:var(--faint); font-size:13px; line-height:18px; pointer-events:none}
.cp .vz{color:var(--faint)}
.cp.so-ler{cursor:default}
.cp.so-ler:hover{background:none}
.cp.so-ler:hover::after{content:none}
.ed{display:flex; gap:6px; align-items:center; width:100%}
.ed input,.ed select,.ed textarea, .form input, .form select, .form textarea{width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--card); min-width:0}
.ed input:focus,.ed select:focus,.ed textarea:focus,.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--accent); outline-offset:0; border-color:transparent}
.ed textarea,.form textarea{min-height:70px; resize:vertical}
.ed-dica{font-size:12.5px; color:var(--muted); margin:4px 0 0}
.ed-dica.mau{color:var(--u4)}
.ed-dica.bom{color:var(--u0)}
.campo-smart{position:relative; width:100%}
.sugestoes{position:absolute; left:0; right:0; top:calc(100% + 4px); background:var(--card); border-radius:12px; box-shadow:var(--shadow-up); z-index:5; overflow:hidden; max-height:280px; overflow-y:auto}
.sugestoes button{display:block; width:100%; padding:9px 12px; text-align:left; font-size:14px}
.sugestoes button:hover,.sugestoes button.sel{background:var(--accent-bg)}
.sugestoes small{display:block; color:var(--muted); font-size:12.5px}
.ligado{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:var(--card-2); font-size:13px; width:100%; text-align:left}
.ligado b{font-weight:600}
.ligado small{display:block; color:var(--muted); font-size:12.5px}
button.ligado:hover{background:color-mix(in srgb,var(--accent) 8%, var(--card-2))}
.form{display:grid; grid-template-columns:1fr 1fr; gap:12px 12px}
.form label{display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--muted); font-weight:500; min-width:0}
.form .inteiro{grid-column:1/-1}
.form .rapidos{display:flex; gap:6px; flex-wrap:wrap; margin-top:2px}
.form .rapidos button{font-size:12.5px; padding:3px 10px; border-radius:20px; background:var(--card-2); color:var(--ink-2)}
.form .rapidos button:hover{background:var(--accent-bg); color:var(--accent)}
.segmento{display:flex; gap:2px; background:var(--preench); border-radius:10px; padding:3px; flex-wrap:wrap}
.segmento button{flex:1; padding:6px 10px; border-radius:8px; font-size:13px; color:var(--ink-2); text-align:center; white-space:nowrap}
.segmento button[aria-pressed="true"]{background:var(--card); color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.1)}
@media (max-width:520px){ .form{grid-template-columns:1fr} .campos{grid-template-columns:1fr} .campos dt{padding:6px 0 0} }
.notas{display:flex; flex-direction:column; gap:10px}
.nt{background:var(--card-2); border-radius:12px; padding:10px 12px; font-size:14px}
.nt small{color:var(--muted); font-size:12.5px; margin-bottom:2px; display:flex; align-items:center; gap:6px}
.escreve{display:flex; gap:8px; align-items:flex-end}
.escreve textarea{flex:1; min-height:42px; max-height:160px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--card); resize:vertical}
.linha-tempo{list-style:none; padding:0; margin:0}
.linha-tempo li{display:grid; grid-template-columns:16px 1fr auto; gap:10px; align-items:center; padding:5px 0; font-size:13px}
.linha-tempo li::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--c,var(--ink-2)); justify-self:center}
.linha-tempo li span{color:var(--muted); font-size:12.5px; text-align:right}
.linha-tempo li .cp{min-height:0; padding:2px 22px 2px 6px; margin:0; justify-content:flex-end; width:auto}
.linha-tempo li .cp:hover::after{top:3px}

/* ---------- janela (lista por trás de um número), aviso e escolha de usuário ---------- */
.veu{position:fixed; inset:0; background:rgba(0,0,0,.28); opacity:0; pointer-events:none; transition:opacity .2s; z-index:30}
.veu.on{opacity:1; pointer-events:auto}
.modal{position:fixed; left:50%; top:50%; width:min(620px,calc(100vw - 24px)); max-height:86vh; overflow:auto; background:var(--card); border-radius:22px; z-index:31; padding:24px;
  box-shadow:var(--shadow-up); opacity:0; pointer-events:none; transform:translate(-50%,-47%) scale(.98); transition:opacity .18s, transform .18s}
.modal.on{opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1)}
.modal .lista{box-shadow:none; background:var(--card-2); margin-top:16px}
.x{float:right; width:32px; height:32px; border-radius:50%; background:var(--card-2); color:var(--muted); font-size:19px; line-height:32px; text-align:center}
.x:hover{color:var(--ink)}
.toast{position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); background:var(--ink); color:var(--bg); padding:10px 8px 10px 18px; border-radius:22px; font-size:14px; opacity:0; transition:opacity .2s, transform .2s; z-index:40; pointer-events:none; display:flex; gap:12px; align-items:center; max-width:calc(100vw - 32px)}
.toast.on{opacity:1; transform:translate(-50%,0); pointer-events:auto}
.toast button{color:var(--bg); font-weight:600; padding:2px 10px; border-radius:14px; background:color-mix(in srgb,var(--bg) 18%, transparent)}
.toast:not(:has(button)){padding-right:18px}
.escolha{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; margin-top:18px}
.escolha button{display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px; border-radius:16px; background:var(--card-2)}
.escolha button:hover{background:color-mix(in srgb,var(--accent) 10%, var(--card-2))}
.escolha small{color:var(--muted); font-size:11.5px}

@media (max-width:900px){
  .lado .dt{display:none}
  .matriz{grid-template-columns:90px repeat(4,minmax(0,1fr))}
  .bandejas{max-width:60%}
}
@media (max-width:700px){ .marca{display:none} }
@media (max-width:620px){
  .barra-in{gap:8px}
  .quadros{grid-template-columns:repeat(2,minmax(0,1fr))}
  .matriz{grid-template-columns:repeat(4,minmax(0,1fr))}
  .matriz .quem{grid-column:1/-1; margin-top:8px}
  .matriz .cab.vz{display:none}
  .cel{padding:6px 8px; min-height:38px}
  .cel b{font-size:17px}
  .cel span{display:none}
  .idade{grid-template-columns:1fr; gap:6px}
  .dems{grid-template-columns:1fr}
  .ln .acoes-ln .btn{padding:4px 10px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
  .boneco{display:none}
}

/* ---------- dica ao parar o mouse (bolinhas das etapas) ---------- */
[data-dica]{position:relative}
[data-dica]:hover::after,[data-dica]:focus-visible::after{content:attr(data-dica); position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--ink); color:var(--bg);
  font-size:12.5px; font-weight:500; line-height:1.3; padding:5px 9px; border-radius:8px; white-space:nowrap; z-index:6; pointer-events:none; box-shadow:var(--shadow-up)}
.passos .p:first-child [data-dica]:hover::after{left:0; transform:none}
.passos .p:last-child [data-dica]:hover::after{left:auto; right:0; transform:none}
.passos.grande{padding:4px 0 2px}
.passos.grande .b{width:16px; height:16px; border:0; padding:0; cursor:pointer; transition:transform .12s, box-shadow .12s}
.passos.grande .b:not([disabled]):hover{transform:scale(1.35); box-shadow:0 0 0 4px var(--accent-bg); background:var(--accent)}
.passos.grande .b[disabled]{cursor:default}
.passos.grande .p.agora .b{box-shadow:0 0 0 5px color-mix(in srgb,var(--g) 22%, transparent)}
.passos.grande .p::after{height:3px}

/* ---------- marcação de pessoas e avisos ---------- */
.mencao{display:inline-flex; align-items:center; gap:4px; padding:1px 8px 1px 2px; border-radius:20px; background:color-mix(in srgb,var(--pc) 14%, var(--card)); color:color-mix(in srgb, var(--pc) 78%, var(--ink)); font-weight:600; font-size:13px; vertical-align:middle}
.mencao .av{width:18px; height:18px; font-size:8px}
.campo-mencao{position:relative; flex:1}
.campo-mencao textarea{width:100%}
.campo-mencao .sugestoes{top:auto; bottom:calc(100% + 4px)}
/* editar e apagar o próprio comentário (14/10/2026): os botões aparecem ao passar o mouse; o apagado fica como um traço */
.nt-bts{margin-left:auto; display:flex; gap:2px}
.nt-bt{width:26px; height:26px; margin:-5px 0; display:inline-grid; place-items:center; border-radius:8px; color:var(--faint); opacity:0; transition:opacity .15s, background .15s, color .15s}
.nt-bt svg{width:14px; height:14px}
.nt:hover .nt-bt, .nt-bt:focus-visible{opacity:1}
.nt-bt:hover{background:var(--preench); color:var(--ink)}
@media (hover:none){ .nt-bt{opacity:.6} }
.nt-editado{color:var(--faint); cursor:default}
.nt.apagada{background:transparent; border:1px dashed var(--line); padding:6px 12px}
.nt.apagada small{margin:0}
.sino{position:relative; width:30px; height:30px; border-radius:50%; color:var(--muted); display:grid; place-items:center}
.sino:hover{background:var(--line-2); color:var(--ink)}
.sino svg{width:18px; height:18px}
.sino b{position:absolute; top:-2px; right:-4px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--u4); color:#fff; font-size:10.5px; display:grid; place-items:center}
.ln.novo{background:var(--accent-bg)}

/* ---------- entrar na mesa: a sala da pessoa no topo ---------- */
.voltar{display:inline-block; margin-bottom:12px}
/* entrar na sala: as outras somem; na chegada, o resto da página aparece depois que a sala pousa */
.planta.entrando .sala{transition:opacity .18s}
.planta.entrando .sala:not(.foco){opacity:0}
.planta.entrando .corredor{opacity:0}
#app.chegando > :not(.planta):not(.voltar){animation:aparece .5s ease .25s both}
@keyframes aparece{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@keyframes entra{from{transform:scale(.97); opacity:.3} to{transform:none; opacity:1}}
.mesa.apagada{opacity:.55}
.mesa.sua .nm{color:var(--accent)}

/* ---------- financeiro ---------- */
.ln .tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
.ln .tags .tag{font-size:11.5px; padding:1px 8px; font-weight:500}
.ln.conta .rr b{font-size:15px}
.meses{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:6px; align-items:end}
.mes{display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 2px; border-radius:12px; min-width:0}
.mes:hover{background:var(--card-2)}
.mes.sel{background:var(--accent-bg); box-shadow:inset 0 0 0 1.5px var(--accent)}
.mes .v{font-size:11.5px; color:var(--muted); white-space:nowrap}
.mes .pilhas{display:flex; gap:3px; width:100%; justify-content:center; align-items:flex-end}
.mes .pilha{width:100%; max-width:34px; height:110px; display:flex; flex-direction:column-reverse; gap:2px; justify-content:flex-start}
.meses.duplas .mes .pilha{max-width:16px}
.mes .pilha i{display:block; width:100%; border-radius:3px; min-height:0}
.mes .m{font-size:12.5px; color:var(--muted); text-transform:capitalize}
.mes.atual .m{color:var(--ink); font-weight:700}
@media (max-width:620px){ .meses{grid-template-columns:repeat(6,minmax(0,1fr))} .mes .pilha{height:70px} }
details.cliente-atraso summary{gap:12px; font-weight:500}
details.cliente-atraso summary small{display:block; color:var(--muted); font-size:12.5px; font-weight:400}
details.cliente-atraso summary::after{margin-left:6px}
.resumo{display:flex; flex-direction:column; gap:4px}
.resumo:hover{box-shadow:var(--shadow-up)}
.resumo .num{font-size:30px; font-weight:700; letter-spacing:-.02em}

/* ---------- leilões ---------- */
/* O cartão do leilão (14/10/2026): neutro e compacto. A proximidade da hasta fica só na borda fina da esquerda, como nos cartões
   do CRM (Gabriel: "talvez apenas a borda tenha essa variação de cor"); o fundo e o texto não mudam de cor. */
.leils{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr)); gap:14px}
.leil{background:var(--card); border-radius:16px; box-shadow:var(--shadow); padding:14px 16px 13px; display:flex; flex-direction:column; gap:11px; text-align:left; width:100%; min-width:0;
  border-left:3px solid var(--g, var(--ux)); transition:box-shadow .15s;
  cursor:pointer}
.leil:hover{box-shadow:var(--shadow-up)}
.leil.aberto{outline:2px solid var(--accent); outline-offset:-2px}
.leil-h{display:flex; align-items:center; gap:8px; min-width:0}
.leil-est{margin-left:auto; padding-left:8px; font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.trib{font-size:11.5px; font-weight:700; letter-spacing:.03em; padding:2px 8px; border-radius:6px; background:var(--accent-bg); color:var(--accent)}
/* o TJMT saiu do âmbar da escala de urgência (14/10/2026): com a proximidade na borda, o âmbar no tribunal confundiria */
.trib.trib-mt{background:color-mix(in srgb, var(--c-tarefa) 14%, transparent); color:var(--c-tarefa)}
/* uma cor por tribunal da leiloeira; o que vier de novo fica no cinza neutro (13/10/2026) */
.trib.trib-mg{background:color-mix(in srgb, var(--c-aud) 14%, transparent); color:var(--c-aud)}
.trib.trib-go{background:color-mix(in srgb, var(--c-entrega) 16%, transparent); color:var(--c-entrega)}
.trib.trib-n{background:var(--card-2); color:var(--muted)}
.comarca{font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
/* o bem: texto corrido, justificado, em até duas linhas; embaixo, a avaliação numa linha discreta */
.leil-t{display:flex; gap:12px; align-items:flex-start}
.leil-tx{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px}
/* justificado sem corte: o resumo já vem curto (até 170 letras); com o corte em 2 linhas, a linha cortada era esticada e
   abria buracos ("NGO- 2370,      chassi") */
.leil-bem{margin:0; font-size:14px; font-weight:600; line-height:1.4; color:var(--ink); text-align:left; overflow-wrap:break-word}
.leil-av{margin:0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 10px; font-size:12.5px; color:var(--muted); min-width:0}
.leil-av > span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.leil-av b{font-weight:500; color:var(--ink-2); font-variant-numeric:tabular-nums}
.leil-av .com b{color:var(--u0)}
.ico-bem{width:34px; height:34px; border-radius:10px; background:var(--card-2); color:var(--ink-2); display:grid; place-items:center; flex:none}
.ico-bem svg{width:19px; height:19px}
/* as hastas: a data em destaque; o dia e quanto falta em cinza; o valor do lance mínimo, discreto, embaixo de um fio */
.hastas{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.hasta{display:flex; flex-direction:column; gap:1px; padding:9px 11px 10px; border-radius:11px; background:var(--card-2); min-width:0; color:var(--ink)}
.hasta .h-r, .hasta .h-d{font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hasta .h-dt{font-size:18px; font-weight:700; letter-spacing:-.01em; line-height:1.25; font-variant-numeric:tabular-nums}
.hasta .h-m{margin-top:6px; padding-top:6px; border-top:1px solid var(--line); font-size:13px; font-weight:500; color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hasta .h-m.vz{font-size:12px; font-weight:400; color:var(--faint)}
.hasta.passou{opacity:.55}
.hasta.passou .h-dt{text-decoration:line-through; text-decoration-thickness:1.5px}
/* embaixo, numa linha só: o andamento ou o que falta fazer */
.leil-s{border-top:1px solid var(--line-2); padding-top:10px; min-width:0; font-size:12.5px; color:var(--muted)}
.leil-and{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ---------- comercial: a régua ---------- */

/* ---------- etiquetas com cor ---------- */
.tag.cor{background:color-mix(in srgb,var(--tc) 16%, transparent); color:color-mix(in srgb,var(--tc) 80%, var(--ink)); font-weight:500}
.tag.cor::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--tc); flex:none}
.tag.cor button{color:inherit; opacity:.6}
.tag.cor .etq-nome{opacity:1; font:inherit; color:inherit}
.etqs{display:flex; gap:4px; flex-wrap:wrap; margin-top:4px}
.etqs .tag{font-size:11.5px; padding:1px 7px; gap:4px}
.etqs .tag.cor::before{width:6px; height:6px}
.it .pontos{display:flex; align-items:center; gap:3px; margin-top:5px}
.it .pontos i{width:8px; height:8px; border-radius:50%; background:var(--tc)}
.it .pontos small{font-size:11.5px; color:var(--muted); margin-left:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.paleta{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.paleta button{width:34px; height:34px; border-radius:50%; background:var(--c); box-shadow:0 0 0 2px var(--card), 0 0 0 3px transparent}
.paleta button[aria-pressed="true"], .paleta button:hover{box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--c)}

/* ---------- custo fixo × receita recorrente ---------- */
.cob{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; align-items:end}
.cob-m{display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; border-radius:10px; padding:4px 2px}
.cob-v{font-size:12.5px; font-weight:600; color:var(--u0); white-space:nowrap}
.cob-m.falta .cob-v{color:var(--u4)}
.cob-barra{position:relative; width:100%; max-width:56px; height:120px; display:flex; align-items:flex-end}
.cob-barra .rec{display:block; width:100%; border-radius:6px 6px 3px 3px; background:color-mix(in srgb,var(--u0) 70%, transparent)}
.cob-m.falta .cob-barra .rec{background:color-mix(in srgb,var(--u0) 35%, transparent)}
.cob-barra .linha{position:absolute; left:-6px; right:-6px; height:2px; background:var(--u4); border-radius:2px}
.cob-m .m{font-size:12.5px; color:var(--muted); text-transform:capitalize}

/* ---------- leilões: o que falta fazer ---------- */
/* numa linha só, sem faixa colorida: a bolinha, o texto na cor normal e o botão (14/10/2026) */
.pend{--g:var(--u2); display:flex; align-items:center; gap:6px 8px; flex-wrap:wrap; font-size:13px; color:var(--ink-2); min-width:0}
.pend.aviso{--g:var(--u4)}
.pend > i{width:7px; height:7px; border-radius:50%; background:var(--g); flex:none}
.pend-t{flex:1; min-width:0}
.pend-b{display:flex; gap:6px; flex-wrap:wrap; margin-left:auto}
.pend .btn.mini{padding:4px 11px; font-size:12px}
.pend.curto{font-size:12.5px}
.pend.curto .pend-t{min-width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.painel .pend{padding:10px 12px; border-radius:12px; background:var(--card-2)}

/* ---------- modo planilha: a sensação de Excel ----------
   Grade visível nos dois temas, cabeçalho fixo, uma linha por item com altura única, número à direita,
   linha de total. A cor da escala aparece no texto da situação, não em balão. */
.grade-bloco{display:flex; flex-direction:column; gap:8px; min-width:0; container-type:inline-size}
.grade-barra{display:flex; align-items:center; flex-wrap:wrap; gap:12px}
.grade-busca{border:0; background:var(--preench); border-radius:9px; padding:7px 12px; width:min(240px,100%); font-size:13px}
.grade-n{font-size:12.5px; color:var(--muted)}
.btn.mini{padding:5px 12px; font-size:12.5px}
.grade-caixa{box-shadow:none; max-height:none; overflow:clip; border:1px solid var(--g-borda); border-radius:12px; background:var(--card)}
table.grade{width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:14px; line-height:1.35}
.grade th, .grade td{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle;
  max-width:none; background:var(--card); border-right:1px solid var(--g-col); border-bottom:1px solid var(--g-linha);
  height:44px; padding:7px 14px}
.grade thead th button:hover{background:transparent; color:var(--ink)}
.grade thead th.num button, .grade thead th.brl button, .grade thead th.pct button{justify-content:safe flex-end}
.grade .seta-o{font-size:9px; color:var(--accent)}
.grade tbody tr:nth-child(even) td{background:var(--grade-zebra)}
.grade tbody tr.cl{cursor:pointer}
.grade tbody tr.aberto td{background:var(--accent-bg)}
.grade td.num, .grade td.brl, .grade td.pct{text-align:right; font-variant-numeric:tabular-nums}
.grade .rs{font-size:.85em; color:var(--muted); margin-right:1px}
.grade td.brl{font-weight:500}
.grade .vz{color:var(--faint)}
.grade tfoot td{bottom:0; z-index:1; position:static; background:var(--g-faixa); border-top:1px solid var(--g-cab-linha); border-bottom:0; height:40px; font-size:13px}
.grade .vazio-g{color:var(--muted); text-align:center; padding:18px; height:auto}
.grade td .btn{padding:3px 10px; font-size:12.5px}
.grade td.acoes-g{white-space:nowrap; overflow:hidden; text-align:right; text-overflow:clip}
.grade td.acoes-g .btn + .btn{margin-left:6px}
.grade .tag{font-size:11.5px; padding:1px 7px}
.sit{display:inline-flex; align-items:center; gap:6px; color:var(--g); font-weight:600; font-size:12.5px; max-width:100%; min-width:0}
.sit i{width:7px; height:7px; border-radius:50%; background:var(--g); flex:none}
.pc{display:inline-flex; align-items:center; gap:6px}
.pc .av.sm{width:19px; height:19px; font-size:8.5px}
/* dinheiro exato nos quadros: R$ e centavos menores, o número inteiro cabe */
.qd .num:has(.rs), .ind .num:has(.rs){font-size:clamp(20px,2.2vw,27px); letter-spacing:-.02em}
.num .rs{font-size:.55em; font-weight:600; color:var(--muted); margin-right:3px}
.num .ct{font-size:.6em; font-weight:600}
.h-av{display:inline-flex; align-items:center; gap:10px}
h2.h-av{display:flex}
.grade .etqs{margin:0; flex-wrap:nowrap}
.grade .etapa-dots{vertical-align:-1px; margin-right:4px}
.peso{font-size:12.5px; font-weight:600; padding:1px 8px; border-radius:6px; background:var(--card-2)}
  .peso.sug{background:transparent; box-shadow:inset 0 0 0 1px var(--grade); font-weight:500; opacity:.8}
.grade td.larga{max-width:240px}
/* tudo clicável: barras, legendas e números das salas */
.barras .pilar .seg{display:block; width:100%; border-radius:3px; padding:0; transition:filter .12s, transform .12s}
.barras .pilar .seg:last-of-type{border-radius:6px 6px 3px 3px}
.barras .pilar .seg:hover{filter:brightness(1.15); transform:scaleX(1.06)}
.barras .pilar button.tot{cursor:pointer}
.barras .pilar button.tot:hover{color:var(--accent)}
.leg button{font-size:12.5px; color:var(--muted)}
.leg button:hover{color:var(--ink)}
.leg button[style*="--c"]::before{content:""; display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--c); margin-right:6px; vertical-align:-1px}
.mt button.v{text-align:left; border-radius:10px; padding:2px 6px; margin:-2px -6px}
.mt button.v[data-lista]:hover{background:var(--card-2)}
button.cob-m:hover{background:var(--card-2)}
.texto-pub{white-space:pre-wrap; font-size:13px; line-height:1.5; background:var(--card-2); border-radius:12px; padding:12px 14px; overflow:auto; color:var(--ink-2);
  max-height:none; /* verificação de 13/10/2026 (noite): link longo no texto da publicação não passa da caixa */
  overflow-wrap:anywhere}
/* ---------- relatórios ---------- */
.qd.rel .cmp{display:flex; gap:6px; flex-wrap:wrap; margin:4px 0 2px}
.qd.rel .cmp .seta{font-size:11.5px; padding:2px 8px}
.din .din-ctl{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.din-sel{display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--muted); font-weight:500}
.din-sel select{padding:7px 10px; border:1px solid var(--grade); border-radius:8px; background:var(--card); min-width:220px}
.din-barra{display:block; height:10px; border-radius:5px; background:var(--card-2); min-width:120px}
.din-barra i{display:block; height:100%; border-radius:5px; background:var(--accent)}
/* relatório do mês: na tela parece uma folha; na impressão, só a folha */
.topo-mensal{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:16px}
.folha-mensal{background:#fff; color:#1D1D1F; max-width:820px; margin:0 auto; padding:44px 52px; border-radius:6px; box-shadow:var(--shadow-up); font-size:14px; line-height:1.55}
.folha-mensal header{border-bottom:2px solid #1D1D1F; padding-bottom:12px; margin-bottom:18px}
.folha-mensal .kicker{color:#6E6E73}
.folha-mensal h1{font-size:28px; color:#1D1D1F}
.folha-mensal h1 small{font-size:15px; font-weight:500; color:#6E6E73}
.folha-mensal h2{font-size:16px; margin:22px 0 8px; color:#1D1D1F; text-transform:none}
.folha-mensal p, .folha-mensal li{color:#2C2C2E}
.folha-mensal ul{margin:6px 0; padding-left:20px}
.tab-mensal{width:100%; border-collapse:collapse; font-size:13px; margin:6px 0 10px; table-layout:fixed}
.tab-mensal th, .tab-mensal td{overflow-wrap:break-word; border:1px solid #D2D2D7; padding:6px 9px; text-align:left; color:#1D1D1F; background:#fff; position:static}
.tab-mensal th{background:#F2F2F5; font-weight:600; font-size:12.5px; color:#424245}
/* no celular (15/10/2026, teste de navegação L4): sem quebrar palavra no meio, os valores inteiros e, na produção, a leitura
   numa linha inteira embaixo de cada pessoa */
@media (max-width:520px){
  .folha-mensal{padding-left:14px !important; padding-right:14px !important}
  .tab-mensal{font-size:11px}
  .tab-mensal th, .tab-mensal td{padding:5px 4px; overflow-wrap:normal; word-break:normal; hyphens:none}
  .tab-mensal th{font-size:10.5px; line-height:1.25; white-space:normal; vertical-align:bottom}
  .tab-mensal td b{white-space:nowrap}
  .tab-prod thead, .tab-prod tbody{display:block}
  .tab-prod tr{display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr))}
  .tab-prod th:nth-child(5){display:none}
  .tab-prod td:nth-child(5){grid-column:1/-1; border-top:0; color:#6E6E73; padding-top:0}
}
.folha-mensal .var{font-size:11.5px; font-weight:600; margin-left:4px}
.folha-mensal .var.bom{color:#1F7A4D} .folha-mensal .var.mau{color:#B42318}
.folha-mensal .sit{--u0:#1F7A4D; --u2:#9A6700; --u4:#B42318; --ux:#6E6E73}
.folha-mensal footer{margin-top:26px; padding-top:10px; border-top:1px solid #D2D2D7; font-size:11.5px; color:#6E6E73}
@media print{
  @page{size:A4; margin:14mm}
  body{background:#fff !important}
  .barra, #velho, .painel, .veu, .veu-p, .modal, .toast, .nao-imprime{display:none !important}
  html.trava-rolagem{overflow:visible}
  main{padding:0 !important; max-width:none !important; margin:0 !important}
  .folha-mensal{box-shadow:none; padding:0; max-width:none; border-radius:0}
  .tab-mensal tr{break-inside:avoid}
  .folha-mensal section{break-inside:avoid-page}
}
/* ---------- documentos ---------- */
.ln.arq{text-decoration:none; color:inherit}
.ln.arq:hover{background:var(--card-2)}
.ln.arq .ext{width:34px; height:24px; border-radius:6px; background:var(--accent-bg); color:var(--accent); font-size:9.5px; font-weight:700; display:grid; place-items:center; letter-spacing:.03em}
.soltar{display:block; margin-top:8px; padding:14px; border:1.5px dashed var(--grade); border-radius:12px; text-align:center; font-size:13px; color:var(--muted); cursor:pointer}
.soltar:hover, .soltar.sobre{border-color:var(--accent); color:var(--accent); background:var(--accent-bg)}
/* ---------- barra: nada passa por cima do sino; o que não cabe vai para "Mais" ---------- */
.barra-in.apertada .marca, .barra-in.apertada .dt{display:none}
.mais-nav{position:relative; flex:none}
.mais-nav > button{width:42px; height:36px; display:grid; place-items:center; border-radius:12px; color:var(--ink-2)}
.mais-nav > button svg{width:20px; height:20px}
.mais-nav > button:hover{background:var(--line-2); color:var(--ink)}
.mais-nav > button[aria-current="page"]{background:var(--ink); color:var(--bg)}
.menu-nav{position:absolute; top:calc(100% + 8px); right:0; min-width:200px; background:var(--card); border-radius:14px; box-shadow:var(--shadow-up); padding:6px; z-index:30; display:flex; flex-direction:column}
.menu-nav button{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; font-size:14px; color:var(--ink); text-align:left}
.menu-nav button svg{width:18px; height:18px; color:var(--ink-2)}
.menu-nav button:hover{background:var(--card-2)}
.menu-nav button[aria-current="page"]{background:var(--accent-bg); color:var(--accent)}
.menu-nav-sep{font-size:11.5px; font-weight:600; color:var(--muted); padding:10px 12px 4px; margin-top:4px; border-top:1px solid var(--line-2)}
.menu-nav-sep:first-child{border-top:0; margin-top:0}
.nav button[hidden]{display:none}
/* ---------- planilha enxuta (refeita em 10/10, noite) ----------
   O que dá a sensação de Excel é a linha que separa bem, não a quantidade de colunas: 4 a 6 colunas,
   linha horizontal nítida, vertical leve, altura folgada, nada de zebra. O detalhe fica no painel. */
/* (14/10/2026: aqui ficava "tr:nth-child(even) td{background:transparent}", que deixava a coluna congelada transparente e a
   linha par logo depois de uma faixa de grupo sem fundo; o fundo das linhas agora vem do refino das planilhas, no fim) */
.grade .pc .av.sm{width:20px; height:20px; font-size:8.5px}
.grade .sec-t{color:var(--muted); font-size:12.5px}
.grade-lupa{position:relative}
.grade-ac{font-size:13px; color:var(--muted)}
.grade-ac:hover{color:var(--accent)}
.grade td .fatal{display:inline-block; font-size:10.5px; font-weight:600; color:var(--u4); border:1px solid color-mix(in srgb,var(--u4) 45%, transparent); border-radius:5px; padding:0 5px; margin-right:6px; vertical-align:1px}
/* módulos de um perfil */
.mods{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:6px}
.mod{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; background:var(--card-2); color:var(--muted); font-size:13px; text-align:left; box-shadow:inset 0 0 0 1px transparent}
.mod svg{width:16px; height:16px; flex:none}
.mod.on{background:var(--accent-bg); color:var(--accent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%, transparent); font-weight:500}
.mod:not([disabled]):hover{box-shadow:inset 0 0 0 1px var(--accent)}
.mod[disabled]{cursor:default; opacity:.85}
/* relatórios: uma entrada com as partes */
.partes-rel{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:14px}
.parte-rel{text-align:left; display:flex; flex-direction:column; gap:2px; position:relative; min-height:150px; transition:box-shadow .15s, transform .15s}
.parte-rel:hover{box-shadow:var(--shadow-up); transform:translateY(-2px)}
.parte-rel .kicker{font-size:13px; color:var(--accent); font-weight:600}
.parte-num{font-size:16px; line-height:1.4; margin:4px 0 0; color:var(--ink-2)}
.parte-num b{color:var(--ink); font-weight:700}
/* relatório ao cliente: o estilo está em app/relcliente.css (remontado no padrão do sistema em 14/10/2026) */
.nav .menu-nav button{width:100%; height:auto; display:flex; place-items:initial; justify-content:flex-start}
.nav .menu-nav button svg{width:18px; height:18px; flex:none}
/* a planilha cabe na tela: colunas fixas, texto longo termina em reticências (o inteiro aparece ao passar o mouse) */
.grade td > span:not(.sit):not(.cx):not(.pc):not(.fatal){overflow:hidden; text-overflow:ellipsis}
/* enquadramento: a grade mede a si mesma. Estreita, a coluna de apoio sai, a pessoa vira avatar e o cabeçalho encurta */
.grade th .r-c, .grade .s-c{display:none}
@container (max-width:800px){
  .grade col.opc{width:0 !important}
  .grade th.opc, .grade td.opc{padding:0 !important; border-right:0; font-size:0}
  .grade th.opc > *, .grade td.opc > *{display:none}
  .grade col.k-etapa{width:98px !important}
  .grade td.k-etapa .et-l{display:none}
}
@container (max-width:640px){
  .grade col.pes{width:56px !important}
  .grade col.pes.opc{width:0 !important}
  .grade td.pes .pn{display:none}
  .grade th .r-l, .grade .s-l, .grade .so-largo{display:none}
  .grade th .r-c, .grade .s-c{display:inline}
  .grade col.k-acoes{width:auto !important; min-width:56px}
}

/* ================= prazo fatal × interno ================= */
.it .fz{font-size:11.5px; color:var(--u4); font-weight:500; margin-top:3px; display:flex; align-items:center; gap:5px; white-space:nowrap; flex-wrap:wrap; row-gap:2px}
.bol{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-left:5px; vertical-align:middle; cursor:help; flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); transition:transform .15s}
.bol:hover, .bol:focus{transform:scale(1.35); outline:none}
.bol-pop{position:fixed; z-index:60; background:var(--card); color:var(--ink); border-radius:14px; padding:11px 13px; font-size:12.5px; line-height:1.55;
  box-shadow:0 10px 30px rgba(0,0,0,.18), 0 0 0 1px var(--line-2); opacity:0; pointer-events:none; transform:translateY(-3px); transition:opacity .15s, transform .15s}
.bol-pop.on{opacity:1; transform:none}
.bol-pop b{font-weight:600}
.bol-pop .pl{color:var(--accent)}
.a-conferir{font-size:11.5px; color:var(--u2); font-weight:600; margin-left:4px}
/* o fatal à vista (14/10/2026): selo vermelho discreto "Fatal dd/mm"; perto (hoje ou amanhã), com o fundo */
.selo-fatal{display:inline-block; font-size:10.5px; line-height:1.45; font-weight:600; color:var(--u4); border:1px solid color-mix(in srgb,var(--u4) 40%, transparent); border-radius:5px; padding:0 5px; margin-right:6px; vertical-align:1px; white-space:nowrap; font-variant-numeric:tabular-nums}
.selo-fatal.perto{background:var(--u4-bg)}
.grade td .selo-fatal{margin-right:0; font-size:12px; padding:0 6px}
.it .fz .selo-fatal{margin-right:0}
.it .fz .a-conferir{margin-left:0}
/* ver o mês na mesa (D4, 14/10/2026): segunda a sexta largas, sábado e domingo estreitos; no celular, só os dias com itens */
.mes-acoes{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.mes-nav{display:inline-flex; align-items:center; gap:6px}
.mes-nav .btn{min-width:30px; justify-content:center}
.semana.mes-mesa{grid-template-columns:repeat(5,minmax(0,1fr)) repeat(2,minmax(0,.6fr)); gap:6px}
.semana.mes-mesa .dia{min-height:92px; padding:8px 6px 7px; gap:4px; border-radius:13px}
.semana.mes-mesa .dia-h{padding:0 3px; gap:4px}
.semana.mes-mesa .dia-h b{font-size:13.5px}
.semana.mes-mesa .dia-h span{font-size:11.5px}
.semana.mes-mesa .dia.fora-mes{opacity:.5}
.semana.mes-mesa .dia.passou:not(.hoje){background:color-mix(in srgb, var(--card) 55%, transparent); box-shadow:none}
.semana.mes-mesa .dia.fds .dia-h span{display:none}
.semana.mes-mesa .mais{font-size:12px; padding:0 4px}
@media (max-width:699px){ .semana.mes-mesa{grid-template-columns:1fr} .semana.mes-mesa .dia.sem-itens{display:none} .semana.mes-mesa .dia{min-height:0} .semana.mes-mesa .dia.fds .dia-h span{display:inline} }
/* o cronômetro (D8, 14/10/2026): no cartão, discreto; ligado, na cor do sistema */
.crono{display:inline-flex; align-items:center; gap:4px; margin-top:5px; padding:1px 7px 1px 5px; border-radius:20px; font-size:11.5px; color:var(--muted); background:var(--preench); cursor:pointer; line-height:1.6}
.crono svg{width:10px; height:10px}
.crono:hover{color:var(--accent)}
.crono.on{color:#fff; background:var(--accent)}
.alerta .crono{margin-top:0; align-self:center; flex:none}
/* sem tempo ainda, o botão só aparece ao passar o mouse (no toque, fica sempre) */
@media (hover:hover){ .it .crono:not(.on):not(:has(span)), .alerta .crono:not(.on):not(:has(span)){opacity:0; transition:opacity .15s} .it:hover .crono, .it:focus-within .crono, .alerta:hover .crono, .alerta .crono:focus{opacity:1} }
.crono-dia{font-size:11.5px; color:var(--muted); padding:0 4px; margin-top:-4px}
/* dias na revisão (14/10/2026): amarelo, ao lado do atraso da demanda */
.na-rev{color:var(--u2); font-weight:500; white-space:nowrap}
.na-rev.selo{display:inline-block; font-size:10.5px; line-height:1.45; font-weight:600; border:1px solid color-mix(in srgb,var(--u2) 40%, transparent); border-radius:5px; padding:0 5px; vertical-align:1px}
.fatal-dd{flex-wrap:wrap; gap:4px}
.calc-fatal{display:grid; grid-template-columns:1fr 1fr; gap:12px; background:var(--card-2); border-radius:14px; padding:12px}
.calc-fatal label{display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--muted); font-weight:500; min-width:0}
.calc-fatal .so-data{display:none}
.calc-fatal.modo-data .so-data{display:flex}
.calc-fatal.modo-data label:has([name=fDisp]), .calc-fatal.modo-data label:has([name=fDias]), .calc-fatal.modo-data label:has([name=fDobro]){display:none}
.calc-fatal .inteiro{grid-column:1/-1}
.fatal-res{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.fatal-res > span:first-child{font-size:12.5px; color:var(--muted); font-weight:500}
.fatal-res b{font-size:17px; color:var(--u4)}
.bol.on{width:8px; height:8px}
.pulados{margin:0 0 8px; padding:0; list-style:none; font-size:13px}
.pulados li{padding:3px 0; color:var(--ink-2)}
.pulados b{display:inline-block; min-width:44px; margin-right:4px; color:var(--accent); font-weight:600}
.cal{display:flex; gap:16px; flex-wrap:wrap}
.cal-m b{font-size:12.5px; text-transform:capitalize; color:var(--muted); font-weight:600}
.cal-g{display:grid; grid-template-columns:repeat(7, 24px); gap:3px; margin-top:4px}
.cal-g span{font-size:10px; color:var(--faint); text-align:center}
.cal-g i{font-style:normal; font-size:11.5px; height:22px; display:grid; place-items:center; border-radius:6px; color:var(--faint)}
.cal-g i.ct{background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--ink)}
.cal-g i.pl{background:color-mix(in srgb, var(--u2) 22%, transparent); color:var(--ink); text-decoration:line-through}
.cal-g i.fat{background:var(--u4); color:#fff; font-weight:700}
.cal-g i.pb, .cal-g i.dp{box-shadow:inset 0 0 0 1.5px var(--line); color:var(--ink-2)}
i.lg{display:inline-block; width:10px; height:10px; border-radius:3px; vertical-align:-1px}
i.lg.ct{background:color-mix(in srgb, var(--accent) 30%, transparent)} i.lg.pl{background:color-mix(in srgb, var(--u2) 40%, transparent)} i.lg.fat{background:var(--u4)}

/* ================= arrastar na semana ================= */
.it[draggable="true"]{cursor:grab}
.it.arrastando{opacity:.35}
.semana.arrastando .dia{transition:opacity .2s, box-shadow .2s}
.semana.arrastando .dia.fora{opacity:.28}
.semana.arrastando .dia.no-fatal{box-shadow:0 0 0 2px color-mix(in srgb, var(--u4) 70%, transparent), var(--shadow)}
.semana.arrastando .dia.alvo{box-shadow:0 0 0 2px var(--accent), var(--shadow)}
.it.antes{box-shadow:0 -3px 0 0 var(--accent)}
.it.depois{box-shadow:0 3px 0 0 var(--accent)}
/* de leve, e cada vez menos (15/10/2026: padrão Apple, nada de tremer forte) */
@keyframes treme{0%,100%{transform:translateX(0)} 20%{transform:translateX(-4px)} 40%{transform:translateX(3px)} 60%{transform:translateX(-2px)} 80%{transform:translateX(1px)}}
.it.treme, .ln.treme{animation:treme .4s ease-out}   /* .ln: a linha de "Mais adiante" arrastada para a semana (14/10/2026) */

/* ================= CRM: esteira ================= */
.crm-k{grid-auto-columns:minmax(190px,1fr)}
.crm-k .col.fim{background:var(--coluna-2)}
.dm.crm-c{gap:8px; padding:14px}
.passos-crm{display:flex; gap:6px; margin:0 0 14px; margin-bottom:6px}
.passos-crm .ps.ok{background:color-mix(in srgb, var(--accent) 45%, transparent)}
.passos-crm .ps.at{background:var(--accent)}

/* ================= documentos no Drive ================= */
.modal.largo{width:min(1000px, calc(100vw - 24px))}
.ver-doc{margin-top:12px}
.ver-doc iframe{width:100%; height:70vh; border:0; border-radius:12px; background:#fff}
.ver-doc img{display:block; max-width:100%; max-height:70vh; margin:0 auto; border-radius:12px}
.ver-doc video{width:100%; max-height:70vh; border-radius:12px}
.ver-doc audio{width:100%}
.soltar-w{display:flex; flex-direction:column; gap:6px; margin-top:8px}
.soltar-w .soltar{margin-top:0}
details.icloud{margin-top:6px}
details.icloud .bloco{margin:0; padding:0; border:0}
.col-soma{font-size:12.5px; color:var(--muted); font-weight:500; margin:-4px 4px 2px; letter-spacing:.01em}
.crm-k .col.alvo{box-shadow:0 0 0 2px var(--accent)}
.dm.crm-c.arrastando{opacity:.35}
.dm.crm-c[draggable="true"]{cursor:grab}
.linha-periodo{display:flex; align-items:center; justify-content:flex-end; gap:10px; margin:0 0 12px; font-size:13px; color:var(--muted)}
.bol-pop .av-pz{color:var(--u2)}
.avisos-pz li{color:var(--u2)}
.avisos-pz b{color:var(--u2)}

/* ================= leilões ================= */
.leil.fim{opacity:.8}
/* da leiloeira, para conferir (14/10/2026): no alto da tela; o selo discreto de quando o pregão já passou; "padrão" no % do TJMT */
section.leil-dj{margin-top:22px}
section.leil-dj details.dob{margin-top:0}
.leil-dj-ln .tt{display:block}   /* o nome da vara inteiro, para o selo não sumir no celular */
.leil-dj-ln a.btn{text-decoration:none}
@media (max-width:600px){ section.leil-dj summary{flex-wrap:wrap} section.leil-dj summary span{flex-basis:100%; order:3; margin:0; padding:0; max-width:none; text-align:left} }
.selo-dj{display:inline-block; margin-left:8px; padding:1px 8px; border-radius:20px; background:var(--preench); color:var(--muted); font-size:11.5px; font-weight:500; vertical-align:1px; cursor:default}
.pct-padrao{color:var(--faint); font-size:11.5px; font-weight:400; cursor:default}
/* a 2ª hasta sem o % (14/10/2026, noite): "conferir no edital", no tom do "a conferir" */
.conf-edital{color:var(--u2); font-size:12.5px; font-weight:500}
.hasta .h-m .conf-edital{font-size:12px}
/* o edital lido no DJEN, no painel do leilão: uma linha a mais na tabela das hastas e os botões logo abaixo */
.hastas-g .hg-dj{padding-top:5px; color:var(--ink-2)}
.leil-dj-ac{margin-top:10px}
.leil-dj-ac a.btn{text-decoration:none}
/* a Lista agrupada pela fase (14/10/2026, no lugar do Kanban): o título, a contagem e a setinha; recolhe com um clique */
.leil-barra{justify-content:space-between}
details.leil-g{margin-top:28px}
details.leil-g:first-of-type{margin-top:6px}
details.leil-g > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; margin-bottom:12px; width:max-content; max-width:100%}
details.leil-g > summary::-webkit-details-marker{display:none}
details.leil-g > summary h2{font-size:clamp(18px,2.2vw,20px)}
details.leil-g > summary .n{font-size:12.5px; font-weight:600; color:var(--muted); background:var(--preench); border-radius:10px; padding:1px 8px; font-variant-numeric:tabular-nums}
details.leil-g > summary::after{content:"›"; font-size:19px; line-height:1; color:var(--faint); transform:rotate(90deg); transition:transform .2s}
details.leil-g:not([open]) > summary{margin-bottom:0}
details.leil-g:not([open]) > summary::after{transform:none}
/* a legenda da proximidade, pequena, abre ao passar o mouse (Gabriel perguntou por que a data ficava em amarelo); a barrinha é a
   mesma borda do cartão */
.escala-leil{position:relative; display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); cursor:default; padding:4px 2px; outline-offset:2px; margin-left:auto}
.escala-leil .pts{display:inline-flex; gap:3px}
.escala-leil i, .leil-sinal > i{width:3px; height:12px; border-radius:2px; background:var(--g); flex:none}
.escala-leil .pop{display:none; position:absolute; right:0; top:calc(100% + 6px); z-index:20; background:var(--card); border-radius:12px; box-shadow:var(--shadow-up); padding:10px 14px; gap:7px; min-width:230px}
.escala-leil:hover .pop, .escala-leil:focus .pop{display:grid}
.escala-leil .pop span{display:flex; align-items:center; gap:9px; white-space:nowrap}
.escala-leil .pop b{color:var(--ink); font-weight:600; min-width:80px}
.leil-sinal{display:inline-flex; align-items:center; gap:7px; color:var(--ink-2); font-size:12.5px; min-width:0; max-width:100%}
.grade .leil-sinal{overflow:hidden; white-space:nowrap; text-overflow:ellipsis; vertical-align:middle}
.painel-h .leil-sinal{font-size:13px}
/* o painel do leilão em grupos (14/10/2026) */
.leil-painel .leil-topo{display:grid; gap:10px}
.leil-painel .leil-topo .passos-rot{margin:0}
.txt-just{display:block; flex:1 1 100%; min-width:0; text-align:justify; hyphens:auto; -webkit-hyphens:auto; line-height:1.5}
.leil-gp > .cp{align-items:flex-start}
.hastas-g{display:grid; grid-template-columns:minmax(110px,140px) minmax(0,1fr) minmax(0,1fr); gap:2px 12px; align-items:center; font-size:14px}
.hastas-g .hg-r{color:var(--muted)}
.hastas-g .hg-h, .hastas-g > .leil-sinal{font-size:12.5px; font-weight:600; color:var(--ink-2); padding:4px 0}
.hastas-g .hg-h.passou{color:var(--faint)}
.hastas-g .hg-c{min-width:0; display:flex; flex-direction:column; align-items:flex-start}
.hastas-g .hg-av{grid-column:span 2; margin-bottom:6px}
.hastas-g .cp{width:auto; min-height:30px; padding:4px 22px 4px 6px; margin-left:-6px}
.hastas-g .cp:hover::after{top:6px; right:6px}
.hastas-g .hg-d{font-size:12px; color:var(--muted); white-space:nowrap; margin:-2px 0 4px}
.hg-v{font-weight:500; font-variant-numeric:tabular-nums; color:var(--ink)}
.hastas-g .hg-v{padding:5px 0}
.hastas-g .hg-v.vz{font-weight:400; color:var(--faint); font-size:12.5px}
.leil-res-tx{margin:8px 0 0; font-size:13px; color:var(--muted); line-height:1.45}
.divisao-leil{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px}
.divisao-leil span{background:var(--card-2); border-radius:10px; padding:8px 10px; display:flex; flex-direction:column; gap:2px; min-width:0}
.divisao-leil small{font-size:11.5px; color:var(--muted)}
.divisao-leil b{font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.divisao-leil .eu{box-shadow:inset 0 0 0 1px var(--line)}
.divisao-leil .eu b{color:var(--u0)}
@media (max-width:520px){ .hastas-g{grid-template-columns:84px minmax(0,1fr) minmax(0,1fr); gap:2px 8px} }
/* a planilha de leilões estreita: a comissão (coluna de apoio) sai, e o total dela sai junto (é a penúltima célula do rodapé) */
@container (max-width:800px){
  .leil-vista .grade tfoot td:nth-last-child(2){padding:0 !important; border-right:0; font-size:0}
  .leil-vista .grade tfoot td:nth-last-child(2) > *{display:none}
}
/* a grade separada por fase: a linha par logo depois de uma faixa ficava transparente e, presa ao rolar de lado, deixava ver
   o que passava por baixo; aqui ela fica com o fundo do cartão (a zebra continua valendo onde se aplica) */
.leil-vista .grade tbody tr:nth-child(even):where(:not(.g-grupo)) td{background:var(--card)}

/* ================= planilha em tela estreita: tudo visível, rola para o lado ================= */
/* Planilha estreita (painel aberto ao lado, janela pequena, celular): continua cabendo na largura, sem rolar de lado.
   A coluna de apoio sai, a pessoa fica só com a bolinha, os textos encurtam com reticências e o texto inteiro aparece
   ao passar o mouse (ou no painel do item). */
@container (max-width:640px){
  .grade col.opc{width:0 !important}
  .grade th.opc, .grade td.opc{padding:0 !important; border-right:0; font-size:0}
  .grade th.opc > *, .grade td.opc > *{display:none}
}

/* ================= planilha editável e texto inteiro ao passar o mouse ================= */
.grade td.edt{cursor:pointer; position:relative}
.grade td.edt:hover{box-shadow:none}
.grade td .ed{margin:-5px -6px}
.grade td .ed input, .grade td .ed select{width:100%; min-width:120px; font-size:13px; padding:5px 8px; border-radius:8px; border:1.5px solid var(--accent); background:var(--card); color:var(--ink)}
.tip-txt{position:fixed; z-index:61; background:var(--ink); color:var(--bg); border-radius:10px; padding:8px 11px; font-size:13px; line-height:1.45; white-space:pre-line;
  box-shadow:0 8px 24px rgba(0,0,0,.18); opacity:0; pointer-events:none; transform:translateY(-2px); transition:opacity .12s, transform .12s}
.tip-txt.on{opacity:1; transform:none}
.dt-b{font:inherit; color:inherit; padding:2px 6px; border-radius:8px}
.dt-b:hover{background:var(--line-2); color:var(--ink)}
.dt-b.velho-b{color:var(--u2); font-weight:600}
/* o "‹ Voltar" do painel (Gabriel, 14/10/2026, noite): no alto, à esquerda, discreto como o ×; para onde volta, ao passar o mouse */
.voltar-p{display:inline-flex; align-items:center; gap:2px; height:28px; padding:0 10px 0 4px; margin:-3px 0 6px -6px; border-radius:14px; color:var(--muted); font-size:13.5px; font-weight:500; flex:none}
.voltar-p svg{width:16px; height:16px}
.voltar-p:hover, .voltar-p:focus-visible{color:var(--ink); background:var(--card-2)}
.voltar-p[data-dica]:hover::after, .voltar-p[data-dica]:focus-visible::after{left:0; transform:none; white-space:normal; width:max-content; max-width:min(440px, calc(100vw - 48px))}
.painel-h .tx > .voltar-p{display:flex; width:max-content}
button.cofre, button.contratos{background:none; border:0; padding:0; cursor:pointer}
button.cofre:hover .pote, button.contratos:hover span{filter:brightness(1.08)}
details.dob-p > summary{list-style:none; cursor:pointer}
details.dob-p > summary::-webkit-details-marker{display:none}
details.dob-p > summary h3::after{content:" ›"; color:var(--faint)}
details.dob-p[open] > summary h3::after{content:" ⌄"}

/* ---------- números de conhecimento: faixa menor embaixo dos quadros principais ---------- */
.quadros-m{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.quadros-m .qd{flex-direction:row; align-items:baseline; gap:7px; padding:6px 13px; border-radius:999px; background:transparent; box-shadow:inset 0 0 0 1px var(--line); max-width:100%}
.quadros-m button.qd:hover{transform:none; background:var(--card); box-shadow:inset 0 0 0 1px var(--line), var(--shadow)}
.quadros-m .qd .rot{font-size:13px}
.quadros-m .qd .rot i{width:6px; height:6px}
.quadros-m .qd .num, .quadros-m .qd .num:has(.rs){font-size:14px; font-weight:650; letter-spacing:0; line-height:1.4}
.quadros-m .qd .num small{font-size:.85em}
.quadros-m .qd .sub, .quadros-m .qd .cmp{display:none}
.quadros-m .qd:has(.sub.mau) .num{color:var(--u4)}
.quadros-m .num .rs{font-size:.8em; margin-right:2px}
/* quatro principais: uma fileira de quatro, ou dois por dois quando não cabe (nunca três e um sozinho) */
.qds{container-type:inline-size}
.qds .quadros:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
@container (max-width:660px){ .qds .quadros:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))} }
.fonte .acao{white-space:normal; text-align:left; display:inline}
/* no celular, a faixa menor em duas colunas: o nome pode quebrar, o número fica à direita */
@container (max-width:480px){
  .quadros-m{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
  .quadros-m .qd{border-radius:12px; justify-content:space-between; align-items:center; padding:7px 11px}
  .quadros-m .qd .rot{font-size:12.5px; line-height:1.25}
}
@media (max-width:620px){ .qds .quadros:has(> :nth-child(3):last-child) > :last-child{grid-column:1 / -1} }

/* ---------- planilhas: o responsável é só a bolinha das iniciais, na primeira coluna ---------- */
.grade td.pes .pn{display:none}
.grade td.pes .pc{justify-content:center}
.grade thead th.pes button{justify-content:center; padding-left:4px; padding-right:4px}
.av-vazio{background:transparent !important; box-shadow:inset 0 0 0 1.5px var(--u2); opacity:.8}
/* editando o responsável ali mesmo: a lista abre por cima das colunas vizinhas */
.grade td.pes:has(select){overflow:visible; position:relative; z-index:4}
.grade td.pes select{min-width:140px; position:relative}

/* ---------- datas: o mesmo jeito em todo o sistema ----------
   Algarismos de largura igual, o mesmo tamanho do texto da linha, cor um pouco mais suave.
   Na planilha, o que a data significa vem embaixo, numa linha fina e menor (o adendo), na cor da situação só quando pede atenção. */
.grade td.data .dt-a{display:inline-flex; flex-direction:column; vertical-align:middle; align-items:center; line-height:1.18}
.dt-d{font-variant-numeric:tabular-nums; display:inline-flex; align-items:center}
.dt-s{font-size:11.5px; font-weight:500; color:var(--g, var(--muted)); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.dt-n{display:inline-flex; align-items:center; gap:5px; font-variant-numeric:tabular-nums; color:var(--g); font-weight:600; cursor:default}
.dt-n i{width:7px; height:7px; border-radius:50%; background:var(--g); flex:none}
.grade td > span.dt-a{overflow:visible}
/* complexidade: um anel que vai se fechando, 1/4 por nível, em volta da bolinha de quem cuida (na cor neutra) */
/* Quatro gomos com um respiro entre eles: os do nível na cor cheia da pessoa, os que faltam na mesma cor bem clara (o
   trilho), para a fração ler de longe. Sugestão do sistema ainda não confirmada: os gomos cheios pela metade da cor. */
.anel{--anel-c:var(--muted); --cheio:var(--anel-c); --trilho:color-mix(in srgb, var(--anel-c) 24%, var(--card)); --vao:9deg;
  --s1:var(--cheio); --s2:var(--trilho); --s3:var(--trilho); --s4:var(--trilho);
  display:inline-grid; place-items:center; padding:3px; border-radius:50%; flex:none; vertical-align:middle;
  background:conic-gradient(from calc(var(--vao) / 2), var(--s1) 0 calc(90deg - var(--vao)), transparent 0 90deg, var(--s2) 0 calc(180deg - var(--vao)), transparent 0 180deg,
    var(--s3) 0 calc(270deg - var(--vao)), transparent 0 270deg, var(--s4) 0 calc(360deg - var(--vao)), transparent 0)}
.anel.n2{--s2:var(--cheio)} .anel.n3{--s2:var(--cheio); --s3:var(--cheio)} .anel.n4{--s2:var(--cheio); --s3:var(--cheio); --s4:var(--cheio)}
.anel.sug{--cheio:color-mix(in srgb, var(--anel-c) 62%, var(--card)); --trilho:color-mix(in srgb, var(--anel-c) 18%, var(--card))}
.anel > .av{box-shadow:0 0 0 1.5px var(--card)}
.anel-so{padding:0; width:15px; height:15px; vertical-align:-2px}
.anel-so i{width:9px; height:9px; border-radius:50%; background:var(--card); display:block}
.anel-so.g{width:18px; height:18px} .anel-so.g i{width:11px; height:11px}

/* ---------- números e cabeçalhos que abrem a lista: discretos, com sublinhado ao passar o mouse ---------- */
button.cab, button.dia-h, .n-col, .n-cel{cursor:pointer; text-align:left; font:inherit}
button.dia-h{width:100%; border-radius:8px}
button.cab:hover, button.dia-h:hover b, .n-col:hover, .n-cel:hover{color:var(--accent)}
.col h4 .n-col{color:var(--muted); font-weight:500; padding:0 2px}
.n-cel{color:inherit; font-variant-numeric:tabular-nums; padding:2px 4px; margin:-2px -4px; border-radius:6px}
.n-cel:hover{background:var(--accent-bg)}
/* Demandas no quadro: soltar o cartão na pessoa */
.soltar-p{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px}
.alvo-p{display:inline-flex; align-items:center; gap:6px; padding:5px 12px 5px 6px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line); font-size:13px; transition:background .15s, box-shadow .15s}
.alvo-p.alvo{background:var(--accent-bg); box-shadow:inset 0 0 0 1.5px var(--accent)}

/* ---------- tabelas de resumo: o mesmo traçado da planilha (linha que separa linhas e colunas, números ao centro) ---------- */
.tabela th, .tabela td{border-right:1px solid var(--grade-v); border-bottom:1px solid var(--grade-h)}
.tabela th:last-child, .tabela td:last-child{border-right:0}
.tabela tbody tr:last-child td{border-bottom:0}
.tabela thead th{border-bottom:1.5px solid var(--grade-h)}
.tabela td.n, .tabela th.n{text-align:center; font-variant-numeric:tabular-nums}
.tabela .leg{border-top:1px solid var(--grade-h); padding-top:12px !important}
.tabela td .pc, .tabela td > .av{vertical-align:middle}
/* na planilha, contagem e porcentagem ao centro da coluna; dinheiro continua à direita (as casas se alinham) */
.grade td.num, .grade td.pct{text-align:center}
.grade th.num button, .grade th.pct button{justify-content:center}
/* a pilha de contratos da sala Comercial, com o nome embaixo */
.contratos-w{display:inline-flex; flex-direction:column; align-items:center; gap:4px; background:none; border:0; padding:0; color:inherit; font:inherit}
.contratos-w .contratos{display:block}
.cap-pilha{font-size:11.5px; color:var(--muted); white-space:nowrap}
button.contratos-w{cursor:pointer}
button.contratos-w:hover .contratos span{filter:brightness(1.08)}
button.contratos-w:hover .cap-pilha{color:var(--accent)}

/* ---------- copiar um dado: o ícone aparece ao passar o mouse, no lugar do lápis; clicar no texto continua editando ---------- */
.copia{width:28px; height:28px; display:inline-grid; place-items:center; border-radius:8px; color:var(--faint); flex:none; opacity:0; transition:opacity .15s, background .15s, color .15s}
.copia svg{width:15px; height:15px}
.copia:hover{background:var(--preench); color:var(--ink)}
.copia:focus-visible{opacity:1}
dd.copiavel{display:flex; align-items:center; gap:2px; min-width:0}
dd.copiavel .cp{flex:1; min-width:0}
dd.copiavel .cp:hover::after{content:none}
dd.copiavel:hover .copia{opacity:1}
.grade td.copiavel{position:relative; padding-right:34px}
.grade td.copiavel .copia{position:absolute; right:4px; top:50%; transform:translateY(-50%); width:26px; height:26px}
.grade tr:hover td.copiavel .copia{opacity:.55} .grade td.copiavel:hover .copia{opacity:1}
@media (hover:none){ .copia{opacity:.6} }

/* tabelas de resumo por pessoa: só a bolinha, o nome ao passar o mouse */
.tabela td.pes-c, .tabela th.pes-c{text-align:center; width:64px; white-space:nowrap}

/* quadros de resumo lado a lado enquanto couberem; título, valor e nota com o mesmo recuo */
.dois.resumos{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.dois .card.resumo{padding:18px 20px 16px}
.dois .card.resumo > p{margin:0 0 4px}
.dois .card.resumo .num{font-size:clamp(22px, 2.6vw, 30px)}

/* ---------- Controle financeiro ---------- */
.quem-fin{display:inline-flex; align-items:center; gap:8px; min-width:0; max-width:100%}
.quem-fin .quem-t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.ico-desp{width:26px; height:26px; border-radius:8px; display:inline-grid; place-items:center; background:var(--preench); color:var(--ink-2); flex:none}
.ico-desp svg{width:15px; height:15px}
.ico-desp.vazio{background:transparent}
.val-fin{font-variant-numeric:tabular-nums; white-space:nowrap}
.val-fin.entra{color:var(--u0)}
.grade td.acoes-g .btn{vertical-align:middle; max-width:100%}
.bt-boleto{display:inline-flex; align-items:center; gap:5px}
.bt-boleto svg{width:14px; height:14px}
@container (max-width:640px){ .bt-boleto span{display:none} .bt-boleto{padding-inline:8px} }
.seta-mes{width:30px; height:30px; border-radius:50%; display:inline-grid; place-items:center; color:var(--muted); transition:background .15s, color .15s}
.seta-mes:hover{background:var(--preench); color:var(--ink)}
.seta-mes svg{width:16px; height:16px}
.paga-op{margin:16px 0 8px}
.paga-op .btn{width:100%; justify-content:center}
.paga-data{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-top:12px; padding-top:14px; border-top:1px solid var(--line-2)}
.paga-data label{display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--muted); font-weight:500; flex:1; min-width:180px}
.paga-data input{padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); font:inherit}

/* ---------- boleto dentro do sistema ---------- */
.bol-l{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-2)}
.bol-r{font-size:12.5px; color:var(--muted); width:118px; flex:none}
.bol-v{flex:1; min-width:0; font-size:13px; overflow-wrap:anywhere}
.bol-v.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12.5px; letter-spacing:.01em}
.bol-l .copia{opacity:.7}
.bol-l:hover .copia{opacity:1}
.bol-qr{margin-top:8px; font-size:13px; color:var(--muted)}
.bol-qr summary{cursor:pointer}
.bol-qr img{display:block; width:180px; height:180px; margin-top:8px; image-rendering:pixelated; background:#fff; border-radius:10px; padding:6px}
.boleto-pdf{display:block; width:100%; height:min(70vh,620px); border:1px solid var(--line); border-radius:12px; margin-top:10px; background:#fff}

/* ---------- apuração do sistema ---------- */
.apur-h{display:flex; align-items:center; gap:8px; font-size:15px; margin:0 14px 4px}
.apur-p{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:8px 14px 2px}
.aviso-plan{padding:14px 18px; margin-bottom:12px; font-size:14px; color:var(--ink-2); background:var(--u2-bg)}
.pcts{display:flex; gap:4px; align-items:center; flex-wrap:wrap}
.pcts .chip{background:var(--preench)}

/* celular: na barra da planilha fica o filtro, a contagem e o Copiar (baixar arquivo é coisa de computador) */
@media (max-width:520px){ .grade-barra .grade-ac[data-grade-baixa]{display:none} }

/* ===================== reorganização (11/10, noite) ===================== */
/* Nada rola dentro da página: a planilha cresce com as linhas e o cabeçalho fica preso logo abaixo da barra de cima,
   na rolagem da própria página. No celular, a planilha larga ainda desliza para o lado (não há outro jeito). */
/* no celular a caixa desliza para o lado; o cabeçalho fica no alto dela (preso à página, ele caía por cima da 1ª linha) */
@media (max-width:520px){ .grade-caixa{overflow-x:auto; overflow-y:hidden} .grade thead th{top:0 !important} }
/* Kanban: as colunas quebram em linhas em vez de rolar de lado (na Esteira, Fechados e Perdidos caem para a linha de baixo). */
.kanban, .kanban.crm-k, .kanban.leil-k{grid-auto-flow:row; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); grid-auto-columns:unset; overflow:visible; -webkit-mask-image:none; mask-image:none}

/* Espaçamento: um passo mais justo em todo o sistema (sem apertar), para ver mais numa tela. */
.card{padding:18px}
.dob summary{padding-top:11px; padding-bottom:11px}

/* ---------- Controle financeiro ---------- */
.mes-cab{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:4px 0 12px}
.mes-cab .mes-nav h2{margin:0}
.mes-saldo{font-size:13.5px; color:var(--muted)}
.mes-saldo b{font-variant-numeric:tabular-nums; margin-left:4px}
.sit-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,160px), 1fr)); gap:10px}
.sit-c{background:var(--card); border-radius:16px; box-shadow:var(--shadow); padding:14px 16px 12px; display:flex; flex-direction:column; gap:6px; text-align:left; min-width:0; transition:box-shadow .15s}
.sit-c:hover{box-shadow:var(--shadow-up)}
.sit-r{font-size:13px; color:var(--muted); font-weight:500}
.sit-v{font-size:clamp(20px,2.2vw,26px); font-weight:700; letter-spacing:-.02em; color:var(--c); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sit-v .rs{font-size:.55em; font-weight:600; color:var(--muted); margin-right:2px}
.sit-bar{height:6px; border-radius:3px; background:var(--preench); overflow:hidden}
.sit-bar i{display:block; height:100%; border-radius:3px; background:var(--c)}
.sit-l{font-size:12.5px; color:var(--c); font-weight:600}
.sec-cola{margin-top:18px}
.g-dia{display:flex; justify-content:space-between; gap:10px; width:100%; font-size:12px; font-weight:500; color:var(--muted)}
.g-dia b{color:var(--ink); font-weight:600}
.ico-desp.entra{background:color-mix(in srgb, var(--u0) 12%, var(--card)); color:var(--u0)}
.dob .lista > .card{box-shadow:none; padding:12px 14px}
.kanban .col{min-height:110px}

/* ---------- busca geral (⌘K) ---------- */
.lado .lupa{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--ink-2)}
.lado .lupa:hover{background:var(--line-2); color:var(--ink)}
.lado .lupa svg{width:18px; height:18px}
.modal.modal-busca{top:12vh; transform:translate(-50%,0); padding:10px; width:min(640px,calc(100vw - 24px))}
.busca-g{display:flex; align-items:center; gap:10px; padding:6px 10px; border-bottom:1px solid var(--line-2)}
.busca-ico svg{width:20px; height:20px; color:var(--muted); display:block}
#busca-g{flex:1; border:0; background:transparent; font:inherit; font-size:17px; color:var(--ink); padding:8px 0; outline:none}
.busca-r{max-height:min(60vh,520px); overflow-y:auto; overflow-x:hidden; padding:6px 2px 4px}
.busca-dica{color:var(--muted); font-size:13px; padding:12px 10px; margin:0}
.busca-dica kbd{font:inherit; font-size:11.5px; padding:1px 6px; border-radius:5px; background:var(--preench); color:var(--ink-2)}
.busca-rot{font-size:12.5px; font-weight:600; color:var(--muted); margin:10px 10px 4px}
.busca-it{display:flex; justify-content:space-between; align-items:baseline; gap:12px; width:100%; text-align:left; padding:8px 10px; border-radius:10px}
.busca-it .tt{font-size:14px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.busca-it .ss{font-size:12.5px; color:var(--muted); white-space:nowrap; flex:none}
.busca-it.sel, .busca-it:hover{background:var(--accent-bg)}
.busca-mais{font-size:12px; color:var(--faint); margin:2px 10px 6px}

/* ===================== refinamento (12/10): a proporção do Controle financeiro no sistema todo ===================== */
/* Avisos ("Hoje pede atenção", alertas do Financeiro, de Leilões e de Publicações): um passo mais finos, no compasso das
   linhas de lista; a faixa da cor fica fina, como nos cartões da Régua. */
.alerta .ic svg{width:16px; height:16px}
.alerta .ss{color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12.5px; margin-top:1px}
.alerta .ok{font-size:12.5px; padding:5px 11px}
/* cartões soltos na página: o respiro dos cartões de situação do Financeiro */
.ind, .mt, .leil{padding:14px 16px}
/* coluna de ações da planilha: os botões sempre cabem (o do boleto fica só com o ícone, o nome aparece ao passar o mouse)
   e o principal (Recebido, Pagar, Aceitar) fica alinhado à direita, numa linha só */
.grade td.acoes-g .bt-boleto{padding-inline:8px}
.grade td.acoes-g .bt-boleto span{display:none}
/* painel do caso do CRM: as barrinhas das fases são botões (a fase muda com um clique); o nome da fase atual embaixo */
.passos-crm .ps{flex:1; height:6px; border-radius:3px; background:var(--line-2); border:0; padding:0; position:relative; cursor:pointer; transition:background .15s}
.passos-crm .ps::before{content:""; position:absolute; inset:-8px 0}
.passos-crm .ps:not(.at):not(:disabled):hover{background:color-mix(in srgb, var(--accent) 30%, transparent)}
.passos-crm .ps:disabled{cursor:default}
.passos-rot .acao{font-size:12.5px}
button.mes-saldo{border-radius:8px; padding:3px 8px; margin-right:-8px; transition:background .15s}
button.mes-saldo:hover{background:var(--preench)}
/* excluir, no pé do painel: discreto, em vermelho, só para quem pode */
.pe-exclui{margin-top:18px; padding-top:12px; border-top:1px solid var(--line-2); text-align:right}
.acao.perigo-t{color:var(--u4); font-size:13px}
/* Apuração: cada pessoa num cartão enxuto. O valor fica à direita, na mesma linha (a regra da lista estreita jogava o
   valor para baixo e dobrava a altura); a conta vem em letra menor, logo abaixo do nome do cliente. */
.apur-c{padding:12px 2px 8px}
.apur-c .lista{padding:2px 0}
.apur-c .ln{grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:10px; padding:8px 14px}
.apur-c .ln > .rr{grid-column:auto; align-items:flex-end; text-align:right; font-size:12px; gap:0}
.apur-c .ln > .rr b{font-size:14px}
.apur-c .ln .dot{margin-top:6px}
.apur-c .ln .tt{font-size:14px}
.apur-c .ln .ss{font-size:12px; line-height:1.4; margin-top:1px}
/* coluna com dois botões (ex.: "Não é nosso" e "Cadastrar"): não encolhe na planilha estreita */
@container (max-width:640px){ .grade col.acoes-dois{width:12.8rem !important} }
/* editor grande de texto longo (próximo passo, caso, origem, andamento): janela alta, letra de leitura */
.ed-grande{display:block; width:100%; min-height:min(60vh,560px); margin-top:12px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); font:inherit; font-size:14.5px; line-height:1.6; resize:vertical}
.ed-grande:focus{outline:2px solid var(--accent); outline-offset:1px}
.ed-grande-acoes{display:flex; align-items:center; gap:8px; margin-top:12px}

/* ---------- caixa de tratamento das publicações (12/10/2026) ---------- */
.tratas{display:grid; gap:10px}
.trata{min-width:0; background:var(--card); border-radius:14px; box-shadow:var(--shadow); padding:12px 16px 12px 14px; border-left:3px solid var(--g); display:grid; gap:8px}
.trata.no-painel{box-shadow:none; background:var(--card-2); margin:0 0 14px}
.trata-h{display:flex; align-items:center; gap:10px; min-width:0}
.trata-h .tt{flex:1; min-width:0; text-align:left; font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.trata-h .tt:hover{color:var(--accent)}
.trata-h .sec-t{white-space:nowrap}
.trata-t{margin:0; font-size:12.5px; line-height:1.45; color:var(--muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; cursor:pointer}
.trata-p{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.trata-p .t-tit{flex:1 1 200px; min-width:0; font:inherit; font-size:13px; padding:5px 10px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--ink)}
.trata-p .t-dias{display:inline-flex; align-items:center; gap:4px}
.trata-p .t-n{width:64px; font:inherit; font-size:12.5px; padding:4px 8px; border-radius:20px; border:1px solid var(--line); background:var(--card); color:var(--ink)}
.trata-p select{font:inherit; font-size:13px; padding:5px 8px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--ink)}
.trata-a{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px}
.trata-a .t-datas{margin-right:auto; display:inline-flex; gap:14px; font-size:13px; color:var(--ink-2)}
.trata-a .btn[disabled]{opacity:.45; cursor:default}
/* a leitura do ato e as ações extras da publicação (13/10/2026) */
.trata .t-leitura{margin:0 0 6px; font-size:12.5px; color:var(--muted)}
.t-extras{display:flex; flex-direction:column; gap:4px; margin-top:8px; padding-top:8px; border-top:1px solid var(--line)}
.t-extra{display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer}
.t-extra input{margin:0}
.t-extra .sec-t{margin-left:auto; font-size:12px}
.t-extra.existe{opacity:.55; cursor:default}


/* Régua do Escritório dentro do sistema: um quadrinho curto por caso (o texto inteiro abre no painel do caso) */
.crm-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:12px}
.crm-card{display:flex; flex-direction:column; gap:6px; text-align:left; background:var(--card); border:0; border-radius:16px; box-shadow:var(--shadow);
  padding:14px 16px; border-left:3px solid var(--g); cursor:pointer; color:var(--ink); font:inherit; min-width:0}
.crm-card:hover{box-shadow:var(--shadow-up)}
.crm-card.aberto{outline:2px solid var(--accent); outline-offset:-2px}
.crm-h{display:flex; gap:8px; align-items:baseline; justify-content:space-between}
.crm-h b{font-size:15px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crm-q{font-size:12.5px; font-weight:600; color:var(--g); white-space:nowrap}
/* a linha do caso no quadrinho da Régua (era .crm-c, a mesma classe dos cartões da esteira, que cortava o valor) */
.crm-caso{font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crm-r{font-size:13px; line-height:1.45; color:var(--ink-2, var(--ink)); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.crm-f{display:flex; flex-wrap:wrap; gap:5px; margin-top:2px}
.crm-f i{font-style:normal; font-size:11.5px; color:var(--muted); background:var(--preench, rgba(118,118,128,.12)); border-radius:10px; padding:2px 8px}

/* linha com ação ao lado (êxitos a acompanhar): a linha abre o item; os botões ficam à direita */
.ln-ac{display:flex; align-items:center; border-bottom:1px solid var(--line-2, rgba(0,0,0,.05))}
.ln-ac > .ln{flex:1; min-width:0; border-bottom:0}
.ln-ac-b{display:flex; gap:6px; padding:0 14px; flex-shrink:0}
@media (max-width:700px){ .ln-ac{flex-wrap:wrap} .ln-ac-b{padding:0 14px 10px; width:100%; justify-content:flex-end} }

/* ===================== verificação visual de 13/10/2026 ===================== */
/* (B3) cabeçalho de coluna quebra em duas linhas no celular, em vez de cortar */
/* (B11) o fundo do aviso novo não sai do canto arredondado da lista */
.lista > .ln.novo:first-child{border-top-left-radius:inherit; border-top-right-radius:inherit}
.lista > .ln.novo:last-child{border-bottom-left-radius:inherit; border-bottom-right-radius:inherit}
/* (B2) o caso no cartão da esteira em até duas linhas, com reticências */
.dm.crm-c .as{font-size:13px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
/* (M7)(A10)(A2) o que a coluna de apoio dizia vem embaixo, fino, quando ela sai (tela estreita e celular) */
.grade .ad-estreito, .grade .ad-cel{display:none}
@container (max-width:800px){ .grade .ad-estreito{display:block; font-size:12px; color:var(--muted); font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.3} }
@container (max-width:520px){
  .grade .ad-cel{display:block; font-size:12px; color:var(--muted); font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.3}
  .grade col.k-cliente{width:0 !important}
  .grade th.k-cliente, .grade td.k-cliente{font-size:0; padding:0 !important; border-right:0}
  .grade th.k-cliente > *, .grade td.k-cliente > *{display:none}
  .grade col.k-venc, .grade col.k-fatal{width:88px !important}
  .grade col.k-comb{width:96px !important}
}
/* o total da apuração abre o que ele soma (13/10/2026) */
.apur-tot{border-radius:10px; padding:2px 6px; margin:-2px -6px; text-align:right}
.apur-tot:hover{background:var(--card-2)}
button.nota.apur-tot{text-align:left; color:var(--muted)}
/* o perfil do cliente em abas (13/10/2026): Resumo | Mais dados; e o que falta informar */
.seg-cli{display:inline-flex; gap:2px; padding:2px; border-radius:10px; background:var(--card-2); align-self:flex-start}
.seg-cli button{font:inherit; font-size:13px; padding:5px 12px; border-radius:8px; color:var(--muted)}
.seg-cli button[aria-selected="true"]{background:var(--card); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08)}
.falta{font-size:12px; color:var(--u2); background:var(--u2-bg); padding:1px 8px; border-radius:999px}
.trata .t-novo{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 8px}
.trata .t-novo .sec-t{margin-right:4px}

/* busca de prospecção (Publicações › Acompanhar, 15/10/2026): a faixa de quem pediu, as encerradas, o que o campo reconheceu */
.b-faixa{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; margin:0; padding:6px 11px; border-radius:9px; background:var(--accent-bg); color:var(--ink-2); font-size:12.5px; line-height:1.45}
.b-faixa b{color:var(--accent); font-weight:600}
.b-faixa .b-rot{color:var(--muted)}
.b-faixa .acao{margin-left:auto; font-size:12.5px}
.painel-b > .b-faixa{margin:0 0 12px}
.b-sep{padding:12px 18px 6px; font-size:12px; font-weight:600; color:var(--muted); border-top:1px solid var(--line-2)}
.lista > .b-sep:first-child{border-top:0}
.b-acoes{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; padding:4px 18px 12px}
.ln.b-enc .tt, .ln.b-enc .ss{opacity:.62}
.acomp-rec{font-size:12.5px; line-height:1.45; color:var(--muted); min-height:18px; margin-top:-4px}
.acomp-rec b{color:var(--ink); font-weight:600}
.acomp-rec.erro{color:var(--u4)}


/* lance mínimo do leilão: as duas hastas lado a lado, cada percentual editável (13/10/2026) */
.minimos{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.minimos > span{display:inline-flex; align-items:center; gap:2px}
.minimos .cp{width:auto; min-height:30px; margin-left:0; padding:4px 22px 4px 6px}
.minimos .cp:hover::after{top:6px; right:6px}
/* marcar linhas da planilha para passar de uma vez (13/10/2026): discreta, à esquerda da bolinha; acende ao passar o mouse */
.grade td.pes{position:relative}
.grade thead th.pes{position:sticky}  /* o cabeçalho continua preso no alto (relative + top:57px descia o "Quem" sobre as linhas; 13/10/2026) */
.grade .marca-g{position:absolute; top:50%; transform:translateY(-50%); margin:0; width:13px; height:13px; accent-color:var(--accent); opacity:.3; cursor:pointer;
  left:9px}
.grade tr:hover .marca-g, .grade .marca-g:checked, .grade th .marca-g:hover{opacity:1}
.grade-marcados{display:inline-flex; align-items:center; gap:10px; font-size:13px}
.grade-marcados select{border:0; background:transparent; font-weight:600; color:var(--accent); font-size:13px}

/* resultado do leilão: três opções com a cor de cada uma, separadas, a escolhida com fundo suave (13/10/2026) */
.resultado-leil{display:inline-flex; align-items:center; padding:3px; border-radius:10px; background:var(--preench)}
.resultado-leil .op{--c:var(--accent); display:inline-flex; align-items:center; gap:7px; padding:5px 14px; border-radius:8px; font-size:13px; color:var(--ink-2); position:relative; transition:background .15s, color .15s}
.resultado-leil .op::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--c); opacity:.85}
.resultado-leil .op + .op{margin-left:1px}
.resultado-leil .op + .op::after{content:""; position:absolute; left:-1px; top:7px; bottom:7px; width:1px; background:var(--line)}
.resultado-leil .op[aria-pressed="true"]::after, .resultado-leil .op[aria-pressed="true"] + .op::after{display:none}
.resultado-leil .op.pos{--c:var(--u0)}
.resultado-leil .op.neg{--c:var(--u4)}
.resultado-leil .op.prop{--c:var(--u2)}
.resultado-leil .op:hover{background:color-mix(in srgb, var(--c) 9%, transparent); color:var(--ink)}
.resultado-leil .op[aria-pressed="true"]{background:color-mix(in srgb, var(--c) 15%, var(--card)); color:var(--c); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.06)}

/* a caixinha de marcar não fica mais por cima da bolinha de quem (Gabriel, 14/10/2026: "está se sobrepondo") */
.grade td:has(> .marca-g), .grade th:has(> .marca-g){padding-left:28px}

/* ===================== planilhas: refino (14/10/2026) =====================
   Gabriel, olhando a planilha de Processos: "sinto que falta algum refino em todas as planilhas; ... está meio bagunçado,
   já a Lista está maravilhosa. Talvez colocar uma cor intercalando ... congelar a primeira linha". No compasso da Lista:
   filete leve, cor intercalada bem sutil (opaca, para as colunas presas), cabeçalho discreto, números à direita, datas
   ao centro, linha de 44 px. */
.grade th:last-child, .grade td:last-child{border-right:0}
.grade thead th{position:sticky; text-align:left; background:var(--card); top:var(--alt-barra, 57px);
  height:40px; padding:0; color:var(--muted); font-size:12.5px; font-weight:500; letter-spacing:0; border-bottom:1px solid var(--g-cab-linha); z-index:3}
/* fundo sempre sólido (a coluna congelada não deixa ver o que passa por baixo); vence as regras antigas de linha par */
.grade tbody tr:nth-child(n) td{background:var(--card)}
/* a cor intercalada: uma linha sim, outra não, sem contar as faixas de grupo (o dia, no Controle financeiro; a fase, nos Leilões) */
.grade tbody tr:nth-child(even of :not(.g-grupo)) td{background:var(--g-zebra)}
.grade tbody tr.cl:hover td{background:var(--g-sobre)}
.grade tbody tr.aberto.aberto td{background:var(--g-aberto)}
.grade tbody tr:last-child td{border-bottom:0}
.grade tbody tr.g-grupo td{font-size:12px; background:var(--g-faixa); height:32px; padding:5px 14px; border-right:0; color:var(--ink-2)}
/* alinhamento: dinheiro e números à direita, datas ao centro (o adendo embaixo, centrado também), pessoa ao centro */
.grade td.num, .grade td.pct, .grade td.brl{text-align:right; font-variant-numeric:tabular-nums}
.grade thead th.num button, .grade thead th.pct button, .grade thead th.brl button{justify-content:flex-end; text-align:right}
.grade td.data{font-variant-numeric:tabular-nums; color:color-mix(in srgb, var(--ink) 80%, var(--muted)); text-align:center}
.grade thead th.data button{justify-content:center; text-align:center}
/* cabeçalho que não cabe na coluna quebra em duas linhas, em vez de sumir pela borda */
.grade thead th button{display:flex; align-items:center; gap:4px; width:100%; height:100%; padding:0 14px; font-weight:500; color:inherit;
  white-space:normal; line-height:1.15}
.grade .dt-s{margin-top:1px}
.grade .sit{overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display:inline-block; vertical-align:middle;
  font-weight:500; color:color-mix(in srgb, var(--g) 88%, var(--ink))}
/* a bolinha de quem: centrada; com a caixinha de marcar, a coluna cresce e a caixinha fica à esquerda, sem encostar */
.grade td.pes, .grade th.pes{text-align:center; padding-left:6px; padding-right:6px; text-overflow:clip}
.grade.com-marca col.pes{width:70px !important}
.grade.com-marca td.pes, .grade.com-marca th.pes{padding-left:28px; padding-right:4px}
.grade.com-marca thead th.pes button{padding:0 2px}
.grade .seta-o:empty{display:none}
/* janela média (até 800 px de grade): a data fica com 100 px e o cabeçalho dela na forma curta, para o nome ter espaço */
@container (max-width:800px){
  .grade col.t-data:not(.opc){width:100px !important}
  .grade th.data .r-l{display:none}
  .grade th.data .r-c{display:inline}
}
@container (max-width:520px){ .grade col.t-data:not(.opc){width:90px !important} }
@container (max-width:640px){
  .grade th, .grade td{padding-left:10px; padding-right:10px}
  .grade thead th button{white-space:normal; line-height:1.15; padding:0 10px}
  .grade td.pes, .grade th.pes{padding-left:4px; padding-right:4px}
  .grade.com-marca td.pes, .grade.com-marca th.pes{padding-left:28px}
}
/* grade larga (celular, painel aberto): só ela rola para o lado; a bolinha e o nome ficam presos à esquerda, a Situação à
   direita, com uma sombra fina do lado em que há mais. O cabeçalho acompanha a página pelo --cab-y (app/planilha.js). */
.grade-caixa.larga{overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; -webkit-mask-image:none; mask-image:none}
.grade-caixa.larga .grade thead th{top:0 !important; transform:translateY(var(--cab-y, 0px)); z-index:4}
.grade-caixa.larga .grade .fx{position:sticky; left:0; z-index:2}
.grade-caixa.larga .grade .fx2{left:var(--fx1, 56px)}
.grade-caixa.larga .grade .fxd{position:sticky; right:0; z-index:2}
.grade-caixa.larga .grade thead th.fx, .grade-caixa.larga .grade thead th.fxd{z-index:5}
.grade-caixa.larga.rola-esq .grade .fx-ult{box-shadow:inset -1px 0 0 var(--g-cab-linha), 8px 0 10px -8px var(--g-sombra)}
.grade-caixa.larga.rola-dir .grade .fxd{box-shadow:inset 1px 0 0 var(--g-cab-linha), -8px 0 10px -8px var(--g-sombra)}
.grade .g-rot{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.grade-caixa.larga tr.g-grupo td{overflow:visible}
.grade-caixa.larga tr.g-grupo .g-rot{position:sticky; left:14px; width:calc(var(--cx-w, 100%) - 28px)}
/* linha esmaecida (ex.: publicação para a outra parte): na grade que rola, esmaece o texto e não a linha, para o fundo
   da coluna presa continuar sólido */
.grade-caixa.larga tbody tr[style*="opacity"]{opacity:1 !important}
.grade-caixa.larga tbody tr[style*="opacity"] td{color:var(--muted)}
/* no celular, a grade que cabe não vira caixa de rolagem: o cabeçalho fica preso logo abaixo da barra, como no computador */
@media (max-width:520px){ .grade-caixa:not(.larga){overflow:clip} .grade-caixa:not(.larga) .grade thead th{top:var(--alt-barra, 57px) !important} }
/* demanda (14/10/2026): o tempo por fase, o envio à revisão e os outros responsáveis */
.fases-barra{display:flex; gap:2px; height:8px; border-radius:4px; overflow:hidden; margin:6px 0 2px; background:var(--card-2)}
.fases-barra i{display:block; min-width:3px; background:var(--fc)}
.fases-barra i.f-ajuste{background:color-mix(in srgb,var(--fc) 55%, transparent)}
.fases-barra i.f-espera{background:var(--line)}
.fases-barra i.f-semReg{background:repeating-linear-gradient(135deg, var(--line) 0 3px, transparent 3px 6px)}
.fases-barra i.aberta{background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 3px, transparent 3px 7px)}
.ln .fases-barra{height:5px; margin:5px 0 0; max-width:360px}
.fases-frase{font-size:13px; color:var(--ink-2); margin:8px 0 10px; line-height:1.45}
.f-ln{cursor:default}
.it.rev-chega{background:transparent; box-shadow:inset 0 0 0 1px var(--line)}
.mais-resp{display:inline-flex; margin-left:-7px}
.mais-resp .av{box-shadow:0 0 0 2px var(--card)}
.mais-resp .av + .av{margin-left:-5px}
.grade .mais-resp .av.sm{width:16px; height:16px; font-size:7.5px}
.ad-rev{display:block; font-size:11.5px; font-weight:500; color:var(--g, var(--muted)); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.resp-mais{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.dd-resp{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px}
.dd-resp > .cp{width:auto; flex:0 1 auto}
.dd-resp .resp-poe{-webkit-appearance:none; appearance:none; width:26px; height:26px; padding:0; border-radius:50%; text-align:center; text-align-last:center; font-size:16px; line-height:26px; cursor:pointer}
.dd-resp .resp-poe:hover{background:color-mix(in srgb,var(--accent) 12%, var(--card-2))}
.resp-tag{padding-left:3px}
.resp-poe{border:0; background:var(--card-2); border-radius:20px; padding:3px 8px; font-size:12.5px; color:var(--accent); font:inherit; font-size:12.5px}
.sugerida{font-size:11.5px; color:var(--faint); font-weight:500}
.na-rev.alem{color:var(--u4)}
.parte-ed{display:inline-flex; align-items:center; gap:4px; font-weight:600; color:var(--ink)}
.parte-ed input{width:58px; border:1px solid var(--line); border-radius:7px; padding:3px 6px; font:inherit; text-align:right; background:var(--card); color:var(--ink)}
.na-rev.selo.alem{border-color:color-mix(in srgb,var(--u4) 40%, transparent)}
/* as bolinhas dos envolvidos (15/10/2026): menores e mais claras que a do responsável */
.envs{display:inline-flex; align-items:center; gap:2px; margin-left:5px; vertical-align:-2px}
.envs .av.env{width:15px; height:15px; font-size:7.5px; opacity:.55; box-shadow:none}
.envs small{font-size:10px; color:var(--muted); margin-left:2px}

/* A planilha no celular vira cartões, um por linha, no desenho da Lista (P10, 15/10/2026): nada rola de lado. */
.grade-cel .lista{padding:4px 0}
.ln.gc{grid-template-columns:auto minmax(0,1fr); align-items:start; gap:12px; padding:12px 16px}
.ln.gc .gc-quem{display:flex; align-items:center; gap:8px; min-height:20px}
.ln.gc .gc-quem .pn{display:none}
.ln.gc .gc-quem .dot{margin-top:6px}
.gc-pares{display:flex; flex-wrap:wrap; gap:3px 14px; margin-top:4px; font-size:13px; color:var(--ink-2)}
.gc-par{display:block; min-width:0; max-width:100%}
.gc-par > i{font-style:normal; color:var(--muted); white-space:nowrap; margin-right:4px}
.ln.gc .gc-quem:empty{display:none}
.gc .ad-cel, .gc .ad-estreito{display:none}
.gc .etp-c, .gc .ad-rev{display:block; font-size:12px; color:var(--muted)}
.gc-acao{flex-basis:100%; margin-top:4px}
.gc-par .dt-a{display:inline-flex; gap:6px; align-items:baseline}
.gc-par .dt-s{margin-top:0}
.gc .s-c, .gc .r-c{display:none}
.gc-par .rs{font-size:.85em; color:var(--muted)}
.gc-grupo{padding:12px 16px 4px; font-size:12px; font-weight:600; color:var(--muted); text-transform:none}
.gc-grupo + .ln{border-top:0}
.gc-total{margin:0 4px}
@media (max-width:560px){ .tabela .emp-c{display:none} }
.ln.gc:has(> .gc-quem:empty){grid-template-columns:minmax(0,1fr)}
/* Na planilha, quem acompanha vira uma bolinha pequena no canto da bolinha do responsável: a coluna "Quem" não alarga nem
   invade a do lado (Gabriel, 15/10/2026: "estamos com o formato ruim"). O nome continua ao passar o mouse. */
.grade td.pes .envs{position:absolute; right:3px; bottom:5px; margin:0; gap:0; z-index:1}
.grade td.pes .envs .av.env{width:14px; height:14px; font-size:6.5px; opacity:1; box-shadow:0 0 0 1.5px var(--card)}
.grade td.pes .envs .av.env + .av.env{margin-left:-6px}
.grade td.pes .envs small{display:none}

/* O contrato da demanda, digitável (15/10/2026): o campo e as sugestões no desenho do campo de cliente */
.ctr-smart{position:relative; width:100%}
.ctr-smart input{width:100%; border:0; background:var(--card-2); border-radius:8px; padding:7px 10px; font:inherit; font-size:13.5px; color:var(--ink)}
.ctr-smart input:focus{outline:2px solid var(--accent); outline-offset:0; background:var(--card)}
.ctr-smart .sugestoes{max-height:320px}
.sug-cab{padding:9px 12px 4px; font-size:12px; font-weight:600; color:var(--muted)}

/* ===== A moldura das telas (P1 a P7, 15/10/2026): cabeçalho, números, uma barra, a lista e o fim =====
   Demandas, Prazos, Publicações, Clientes e a mesa. Código em app/paginas.js, app/planilha.js e app/publicacoes.js. */
/* cabeçalho: só o título; à direita, sempre nesta ordem, o botão cinza da tela, a troca de vista e o "+ Novo" */
.topo.tela-cab{margin-bottom:16px; gap:10px 14px; align-items:center}
.tela-cab h1{min-width:0}
.tela-acoes{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; margin-left:auto}
.topo.mesa-cab{margin:20px 0 16px}
.mesa-cab h1{font-size:clamp(22px,2.6vw,26px)}
/* a barra: o recorte, as pessoas em bolinhas, os menus e a busca à direita */
.barra-filtros.barra-tela{margin:22px 0 14px; gap:8px}
.barra-esp{flex:1 1 0; min-width:0}
.busca-barra{flex:0 1 280px; min-width:170px; height:33px; padding:0 12px; border:0; border-radius:10px; background:var(--preench); color:var(--ink); font:inherit; font-size:13.5px}
.busca-barra::placeholder{color:var(--muted)}
.busca-barra:focus{outline:2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:0; background:var(--card)}
.pessoas-b .chip-av{padding:3px 5px; display:inline-grid; place-items:center}
.pessoas-b .chip-av .av.sm{width:21px; height:21px; font-size:8.5px}
.pessoas-b .chip-av[aria-pressed="true"] .av{box-shadow:0 0 0 1.5px var(--card), 0 0 0 3px color-mix(in srgb, var(--pc) 65%, transparent)}
.pessoas-b .chip-av .av-vazio{box-shadow:inset 0 0 0 1.5px var(--u2)}
.pessoas-b .chip-av[aria-pressed="true"] .av-vazio{box-shadow:inset 0 0 0 1.5px var(--u2), 0 0 0 1.5px var(--card), 0 0 0 3px color-mix(in srgb, var(--u2) 55%, transparent)}
/* os outros filtros em menu ("Tipo: tudo", "Para quem: todas", "7 dias") */
.menu-f{position:relative; display:inline-flex; align-items:center; gap:4px; height:33px; padding:0 27px 0 12px; border-radius:10px; background:var(--preench); font-size:13px; color:var(--muted); cursor:pointer; white-space:nowrap; max-width:100%}
.menu-f select{appearance:none; -webkit-appearance:none; border:0; background:transparent; font:inherit; font-size:13px; color:var(--ink); padding:0; margin:0; cursor:pointer; field-sizing:content; min-width:0; max-width:230px; outline:none; text-overflow:ellipsis}
.menu-f::after{content:""; position:absolute; right:12px; top:50%; width:5px; height:5px; margin-top:-4px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); pointer-events:none}
.menu-f:hover{background:color-mix(in srgb,var(--accent) 8%, var(--preench))}
.menu-f:focus-within{outline:2px solid color-mix(in srgb, var(--accent) 55%, transparent)}
.barra-tela .chip.etq-fil:not(.on), .tela-acoes .chip.etq-fil:not(.on){position:relative; padding-right:25px}
.barra-tela .chip.etq-fil:not(.on)::after, .tela-acoes .chip.etq-fil:not(.on)::after{content:""; position:absolute; right:11px; top:50%; width:5px; height:5px; margin-top:-4px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(45deg)}
@media (max-width:560px){ .busca-barra{flex:1 1 100%; order:9} .barra-esp{display:none} .menu-f select{max-width:160px} }
/* P4: na planilha, um clique abre; o lápis edita a célula (aparece claro ao passar na linha e inteiro na célula) */
.grade .lapis{position:absolute; right:5px; top:50%; transform:translateY(-50%); width:24px; height:24px; display:grid; place-items:center; border-radius:7px; color:var(--muted); background:var(--card); box-shadow:0 0 0 1px var(--line), 0 1px 3px rgba(0,0,0,.08); opacity:0; transition:opacity .12s; z-index:3; cursor:pointer}
.grade .lapis svg{width:13px; height:13px; display:block}
.grade tr:hover .lapis{opacity:.4}
.grade tr:hover td.edt:hover .lapis, .grade .lapis:focus-visible{opacity:1}
.grade .lapis:hover{color:var(--accent); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%, transparent), 0 1px 3px rgba(0,0,0,.08)}
.grade td.edt:has(.lapis:hover){box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent)}
.grade td.pes .lapis{top:3px; right:2px; transform:none; width:18px; height:18px; border-radius:5px}
.grade td.pes .lapis svg{width:10px; height:10px}
@media (hover:none){ .grade .lapis{opacity:.6} }
/* a caixinha de marcar aparece ao passar o mouse na bolinha; com alguma marcada, todas à vista */
.grade.com-marca tr .marca-g{opacity:0; transition:opacity .12s}
.grade.com-marca tr td.pes:hover .marca-g, .grade.com-marca tr th.pes:hover .marca-g, .grade.com-marca tr .marca-g:checked, .grade.com-marca tr .marca-g:focus-visible, .grade.com-marca.tem-marca tr .marca-g{opacity:1}
/* Demandas › Quadro: as pessoas aparecem quando se pega o cartão, numa bandeja embaixo, sem empurrar a página */
.soltar-p.bandeja{position:fixed; left:50%; bottom:22px; transform:translate(-50%, 10px); z-index:20; margin:0; padding:8px 10px; border-radius:16px; background:var(--glass); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:var(--shadow-up), 0 0 0 1px var(--line); opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; max-width:calc(100vw - 32px); justify-content:center}
body:has(.kanban .dm.arrastando) .soltar-p.bandeja{opacity:1; transform:translate(-50%, 0); pointer-events:auto}
.soltar-p.bandeja .bandeja-r{font-size:12.5px; color:var(--muted); margin:0 4px}
.soltar-p.bandeja .alvo-p{background:var(--card)}
/* lista longa: "Mostrar mais 50" no pé da planilha */
.lista.mais-g{margin-top:8px}
/* um título fino dentro da lista que abre (ex.: "Tempo por fase" em cima da lista dos tempos das Demandas) */
.lista > .lista-sep{margin:0; padding:12px 18px 6px; font-size:12.5px; font-weight:600; color:var(--muted)}
.lista > .lista-sep + .ln{border-top:0}

/* Publicações, 15/10/2026: o Acompanhar nasce do escritório (o botão Prospecção, discreto, liga a prospecção), a marquinha da
   prospecção na faixa Acompanhando, e a ata ou o edital recortados no processo (cabeçalho, "…", a seção e a linha do número) */
.acomp-pe{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.acomp-esp{flex:1}
@media (max-width:480px){ .acomp-pe{justify-content:flex-end; row-gap:4px} .acomp-pe .acomp-modo{margin-right:auto} .acomp-esp{flex:1 0 100%; height:0} }
.acomp-modo{display:inline-flex; align-items:center; gap:6px; padding:6px 12px 6px 10px; border-radius:999px; font-size:13px; color:var(--muted); background:transparent; box-shadow:inset 0 0 0 1px var(--line); transition:background .15s, color .15s}
.acomp-modo svg{width:15px; height:15px; flex:none}
.acomp-modo:hover{color:var(--ink-2)}
.acomp-modo[aria-pressed="true"]{color:var(--accent); background:var(--accent-bg); box-shadow:none; font-weight:600}
.acomp-rec .acao{font-size:12.5px}
.b-marca{display:inline-flex; vertical-align:-2px; margin-left:6px; color:var(--accent)}
.b-marca svg{width:13px; height:13px}
.texto-pub .tp-cab{hyphens:auto}
.texto-pub .tp-reti{color:var(--faint, var(--muted)); margin:4px 0 6px; letter-spacing:.12em}
.texto-pub .tp-secao{font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.02em}
.texto-pub .tp-campos{white-space:normal; display:grid; grid-template-columns:minmax(96px,34%) minmax(0,1fr); gap:5px 12px}
.texto-pub .tp-campos > span{white-space:pre-line}
.texto-pub .tp-rot{color:var(--muted)}
.texto-pub .tp-todo{grid-column:1/-1}
.nota.tp-nota{margin:8px 0 0}

/* Painel da publicação em duas colunas (Gabriel, 15/10/2026: "a publicação abria do lado esquerdo e a opção de você escrever e tratar
   do lado direito… aqui ficou um rola e rola"). Estreito (ao lado, celular): uma coluna, o tratamento em cima, o texto logo depois e
   os dados e os comentários no fim. Com largura (o quadro no centro, que na publicação vai até 1200 px): o texto à esquerda e o
   tratamento à direita, cada um rolando por dentro, na altura do quadro. Só este painel muda de largura (data-k do #painel). */
.pub-b > .pub-dir{display:contents}
.pub-trat{order:1; display:flex; flex-direction:column; gap:12px; min-width:0}
.pub-txt{order:2; min-width:0}
.pub-dados{order:3; display:flex; flex-direction:column; gap:18px; min-width:0}
.pub-trat > .nota, .pub-trat > .b-faixa, .pub-trat .trata.no-painel{margin:0}
.pub-cli{margin:0; font-size:13px; line-height:1.5; color:var(--ink-2)}
.pub-l{display:flex; flex-direction:column; gap:7px; font-size:13px; line-height:1.5; color:var(--ink-2)}
.pub-l p{margin:0}
.pub-l b{color:var(--ink); font-weight:600}
.pub-l .pub-meio{font-size:12px; color:var(--faint)}
.pub-i{display:inline-grid; place-items:center; width:15px; height:15px; margin-left:2px; border-radius:50%; vertical-align:1px; font-size:10px; font-weight:700; font-style:normal; color:var(--muted); box-shadow:inset 0 0 0 1px var(--line); cursor:help}
.pub-txt .texto-pub{font-size:13.5px; line-height:1.6}
@media (min-width:960px){
  .painel.no-centro[data-k^="publicacao|"]{width:min(1200px, calc(100vw - 48px)); height:calc(100vh - 2 * var(--painel-topo)); height:calc(100dvh - 2 * var(--painel-topo))}
  .painel.no-centro .painel-b.pub-b{display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,430px); grid-template-rows:minmax(0,1fr); padding:0; gap:0; overflow:hidden}
  .painel.no-centro .pub-b > .pub-txt{grid-column:1; grid-row:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:18px 28px 40px}
  .painel.no-centro .pub-b > .pub-dir{grid-column:2; grid-row:1; min-height:0; display:flex; flex-direction:column; gap:20px; overflow-y:auto; overscroll-behavior:contain; padding:18px 24px 40px 22px; border-left:1px solid var(--line-2)}
  .painel.no-centro .pub-txt .texto-pub{font-size:14.5px; line-height:1.65; max-width:76ch; padding:18px 22px; color:var(--ink)}
  .painel.no-centro .pub-txt .tp-cab{text-align:justify}
}

/* ================= o cronômetro (15/10/2026; app/cronometro.js) =================
   A pílula na barra de cima (só para quem tem a marca), o quadro que abre dela, a linha discreta dos painéis e a janela dos
   trechos. Correndo, o ponto pulsa devagar na cor do sistema; no celular, a pílula fica só com o ponto e o tempo e o quadro
   ocupa a tela. */
.crono-lugar{display:flex; align-items:center}
.crono-pilula{position:relative; display:inline-flex; align-items:center; gap:6px; height:30px; min-width:30px; max-width:260px; padding:0 11px 0 10px; border-radius:15px; color:var(--muted); font-size:13px; line-height:1; white-space:nowrap; transition:background .15s, color .15s}
.crono-pilula.so-ico{width:30px; padding:0; justify-content:center}
.crono-pilula svg{width:18px; height:18px; flex:none}
.crono-pilula.pausa svg{width:11px; height:11px}
.crono-pilula:hover{background:var(--line-2); color:var(--ink)}
.crono-pilula.on{background:var(--accent-bg); color:var(--accent)}
.crono-pilula.pausa{background:var(--preench); color:var(--ink-2)}
.crono-pilula b{font-weight:600; font-variant-numeric:tabular-nums}
.crono-pilula .nm{font-weight:500; min-width:0; max-width:150px; overflow:hidden; text-overflow:ellipsis}
.crono-pilula .pt{width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; animation:crono-pulso 2.4s ease-in-out infinite}
.crono-pilula .av-c{position:absolute; top:2px; right:2px; width:7px; height:7px; border-radius:50%; background:var(--u3); box-shadow:0 0 0 2px var(--bg)}
@keyframes crono-pulso{0%,100%{opacity:1} 50%{opacity:.3}}
.barra-in.apertada .crono-pilula .nm{display:none}
@media (max-width:600px){ .crono-pilula .nm{display:none} .crono-pilula:not(.so-ico){padding:0 9px} }
/* o quadro: cerca de 360 px, logo abaixo da pílula */
.crono-q{position:fixed; z-index:29; width:360px; max-width:calc(100vw - 24px); max-height:calc(100vh - var(--alt-barra, 52px) - 20px); overflow-y:auto; overscroll-behavior:contain;
  background:var(--card); border-radius:18px; box-shadow:0 0 0 1px var(--line), var(--shadow-up); padding:14px 14px 8px}
.crono-q .cq-x{display:none}
.cq-rot{display:block; font-size:13px; font-weight:600; color:var(--ink); margin:0 2px 7px}
.cq-campo{width:100%; padding:9px 12px; border-radius:11px; border:1px solid transparent; background:var(--preench); font-size:14px; color:var(--ink)}
.cq-campo:focus{outline:2px solid var(--accent); outline-offset:0; background:var(--card); border-color:transparent}
.cq-sug:not(:empty){margin:6px -4px 2px}
.cq-cab{font-size:12.5px; color:var(--muted); font-weight:600; margin:12px 2px 4px}
.cq-sug .cq-cab{margin:8px 6px 3px}
.cq-s{display:flex; align-items:baseline; gap:10px; width:100%; padding:7px 8px; border-radius:9px; font-size:13.5px; text-align:left; color:var(--ink)}
.cq-s:hover, .cq-s.sel{background:var(--accent-bg)}
.cq-s-t{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cq-s-r{flex:none; font-size:12px; color:var(--muted)}
.cq-s.livre{color:var(--accent)}
.cq-fatal{color:var(--u4); font-weight:600}
.cq-vazio{font-size:13px; color:var(--muted); margin:6px 6px}
.cq-lista{display:flex; flex-direction:column}
.cq-ln{display:grid; align-items:center; gap:8px; border-top:1px solid var(--line-2); grid-template-columns:minmax(0,1fr) 30px; padding:3px 0}
.cq-lista > .cq-ln:first-child{border-top:0}
.cq-pt{width:7px; height:7px; border-radius:50%}
.cq-ln.on .cq-pt{background:var(--accent); animation:crono-pulso 2.4s ease-in-out infinite}
.cq-nome{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:500; text-align:left}
.cq-nome:hover{color:var(--accent)}
.cq-t{font-size:13.5px; font-variant-numeric:tabular-nums; color:var(--ink-2); padding:3px 7px; border-radius:7px}
.cq-t:hover{background:var(--preench); color:var(--ink)}
.cq-ln.on .cq-t{color:var(--accent); font-weight:600}
.cq-bt{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--muted)}
.cq-bt svg{width:12px; height:12px}
.cq-bt:hover{background:var(--preench); color:var(--accent)}
.cq-ln.on .cq-bt{background:var(--accent-bg); color:var(--accent)}
.cq-sub{font-size:12px; color:var(--muted); margin:-3px 0 5px 4px}
.cq-sub .acao{font-size:12px}
.cq-pe{display:flex; justify-content:space-between; gap:12px; margin-top:8px; padding:9px 3px 4px; border-top:1px solid var(--line-2)}
.cq-pe .acao{font-size:13px}
.cq-al{background:var(--card-2); box-shadow:inset 3px 0 0 var(--u3); border-radius:12px; padding:10px 12px 10px 14px; margin-bottom:10px}
.cq-al p{margin:0 0 8px; font-size:13px; line-height:1.45; color:var(--ink)}
.cq-al-bts{display:flex; gap:6px; flex-wrap:wrap}
.cq-form{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:2px}
.cq-form .cq-rot, .cq-form .cq-alvo, .cq-form .cq-bts{grid-column:1/-1}
.cq-form .cq-rot{margin-bottom:0}
.cq-alvo{display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:13.5px; font-weight:500; padding:8px 10px; border-radius:10px; background:var(--preench)}
.cq-alvo .acao{font-size:12.5px}
.cq-form label{display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--muted); font-weight:500; min-width:0}
.cq-form input{width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:9px; background:var(--card); min-width:0}
.cq-form input:focus{outline:2px solid var(--accent); outline-offset:0; border-color:transparent}
.cq-bts{display:flex; gap:8px; justify-content:flex-end; padding-bottom:6px}
@media (max-width:600px){
  .crono-q{left:0 !important; right:0 !important; top:var(--alt-barra, 52px) !important; bottom:0; width:auto; max-width:none; max-height:none; border-radius:0; box-shadow:none; border-top:1px solid var(--line-2); padding:16px 16px 24px}
  .crono-q .cq-x{display:block; margin:-4px -4px 6px 8px}
}
@media (prefers-reduced-motion:reduce){ .crono-pilula .pt, .cq-ln.on .cq-pt{animation:none} }
/* no alto do dia: o tempo abre o que foi cronometrado nele */
button.crono-dia{display:block; text-align:left; border-radius:6px}
button.crono-dia:hover{color:var(--accent)}
/* nos painéis da tarefa, da demanda, do processo e do cliente: uma linha pequena e cinza */
.crono-painel{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:-6px}
.crono-painel .crono{margin-top:0; padding:2px 9px 2px 7px; font-size:12.5px}
.crono-painel-t{font-size:12.5px; color:var(--muted); border-radius:6px}
.crono-painel-t:hover{color:var(--accent)}
/* a janela dos trechos */
.tr-lista .tr-ln .tt{display:flex; align-items:center; gap:7px; font-variant-numeric:tabular-nums}
.tr-aj{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--u2); flex:none}
.tr-form{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; padding:12px 18px 14px; background:var(--card); border-radius:14px; margin:4px 6px}
.tr-form label{display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--muted); font-weight:500; min-width:0}
.tr-form label.tr-so{grid-column:1/-1}
.tr-form input{width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:9px; background:var(--card); min-width:0; font-variant-numeric:tabular-nums}
.tr-form input:focus{outline:2px solid var(--accent); outline-offset:0; border-color:transparent}
.tr-bts{grid-column:1/-1; display:flex; align-items:center; gap:8px}
.tr-bts > span{flex:1}
.tr-tira{color:var(--u4); font-size:13px}
.tr-pe{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:12px; font-size:13px; color:var(--muted)}
.tr-pe b{color:var(--ink); font-weight:600}
.tr-acoes{display:flex; gap:8px; flex-wrap:wrap}
@media (max-width:600px){ .tr-form{grid-template-columns:1fr 1fr} .tr-form label:last-of-type:not(.tr-so){grid-column:1/-1} }

/* ===== P9 · o "+ Adicionar" nas listas e Equipe › Listas do escritório (15/10/2026) =====
   O campo de escolha (campoLista, app/base.js): as opções no desenho das sugestões do campo de cliente; a última linha,
   "+ Adicionar «…»", em azul. O "+ etiqueta" é um chip que vira campo ao tocar. */
.esc-l{position:relative; display:block; width:100%; min-width:0}
.esc-ops{position:absolute; left:0; right:0; top:calc(100% + 4px); background:var(--card); border-radius:12px; box-shadow:var(--shadow-up); z-index:6; overflow:hidden auto; max-height:280px; text-align:left}
.esc-ops button{display:block; width:100%; padding:9px 12px; text-align:left; font-size:14px; line-height:1.35; color:var(--ink); font-weight:400}
.esc-ops button:hover, .esc-ops button.sel{background:var(--accent-bg)}
.esc-ops small{display:block; color:var(--muted); font-size:12.5px; font-weight:400}
.esc-ops .esc-novo{color:var(--accent); font-weight:600}
.esc-ops button + .esc-novo{border-top:1px solid var(--line-2)}
.esc-cor{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--tc); margin-right:8px; vertical-align:1px}
.esc-atual{margin-left:8px; font-size:11.5px; color:var(--faint); font-weight:500}
.esc-l.esc-chip{display:inline-block; width:auto; vertical-align:middle}
.esc-l.esc-chip > input{width:auto; min-width:0; border:0; background:var(--card-2); border-radius:20px; padding:3px 10px; font:inherit; font-size:12.5px; line-height:1.4; color:var(--ink); transition:width .15s}
.esc-l.esc-chip > input::placeholder{color:var(--accent); opacity:1}
.esc-l.esc-chip > input:focus{width:200px; outline:2px solid var(--accent); outline-offset:0; background:var(--card)}
.esc-l.esc-chip > input:focus::placeholder{color:var(--faint)}
.esc-l.esc-chip > .esc-ops{right:auto; width:max-content; min-width:240px; max-width:min(320px, calc(100vw - 32px))}
.esc-l.esc-caixa > input{width:100%; border:0; background:var(--card-2); border-radius:10px; padding:8px 12px; font:inherit; font-size:14px; color:var(--ink)}
.esc-l.esc-caixa > input:focus{outline:2px solid var(--accent); outline-offset:0; background:var(--card)}
.rot-pe{display:flex; gap:8px; justify-content:flex-end; align-items:center; flex-wrap:wrap; margin-top:14px}
.rot-pe .esc-l{flex:1 1 220px; width:auto}
.rot-pe .esc-ops{top:auto; bottom:calc(100% + 4px)}
/* Listas do escritório: a lista, a opção e o que se faz com ela */
.modal .lst-g{margin:16px 4px 8px}
.modal .lst-g + .lista{margin-top:0}
.lst-volta{display:inline-block; margin:0 0 8px; font-size:13px}
.lst-acoes{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.form label.lst-junta, .lst-junta{display:inline-flex; flex-direction:row; align-items:center; gap:4px; padding:4px 6px 4px 14px; font-size:14px; font-weight:500; color:var(--ink)}
.lst-hist .de{color:var(--muted)}
.lst-hist li{align-items:start}
.lst-junta select{width:auto; max-width:180px; border:0; background:transparent; padding:0; font:inherit; font-weight:600; color:var(--accent)}
.lst-junta select:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
/* O dinheiro do cliente num bloco só (15/10/2026): o título "Dinheiro" e, dentro, a forma de pagamento, os lançamentos, os
   contratos e as comissões, com os títulos de dentro mais leves */
.painel .bloco-grupo{display:flex; flex-direction:column; gap:14px; padding-top:14px; border-top:1px solid var(--line-2)}
.painel .bloco-grupo > h3{font-size:13px; color:var(--muted); font-weight:600; margin:0}
.painel .bloco-grupo > .bloco > h3{font-size:12.5px; font-weight:500}
.painel .bloco-grupo > dl.campos{margin:0}

/* P8 (15/10/2026): o "novo" no item que chegou para a pessoa, e a linha "Chegaram para você" no alto da mesa */
.novo-tag{font-size:11px; font-weight:600; color:var(--accent); margin-left:4px; letter-spacing:.01em}
.chegaram{margin:-4px 2px 14px; font-size:13.5px}
.chegaram .acao{font-weight:600}

/* Vários clientes no processo (15/10/2026): cada um com o "Tirar" ao lado */
.ligado-ac{display:flex; align-items:center; gap:8px}
.ligado-ac .ligado{flex:1; min-width:0}
.ligado-ac .tira-cli{color:var(--muted); font-size:12.5px; flex:none}
.ligado-ac .tira-cli:hover{color:var(--u4)}

/* Feedback da semana e prazos judiciais × peças sem prazo (15/10/2026, noite; app/feedback.js) */
.fb-pessoas{align-items:start}
.dois .card.fb-p{padding:18px 6px 8px}
.fb-cab{display:flex; align-items:center; gap:12px; margin:0 14px 4px}
.dois .fb-cab h3{margin:0; font-size:17px}
.dois .fb-cab p{margin:1px 0 0; font-size:13px; color:var(--muted)}
.fb-ap{margin-left:auto; flex:none; display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; padding:4px 8px; border-radius:10px}
.fb-ap:hover{background:var(--card-2)}
.fb-ap b{font-size:26px; font-weight:700; letter-spacing:-.02em}
.fb-ap b small{font-size:.55em; font-weight:600}
.fb-ap span{font-size:12px; color:var(--muted)}
.dois .card.fb-p .fb-nums{margin:8px 14px 12px}
.dois .card.fb-p > p.fb-k{margin:12px 14px 2px; font-size:12.5px; font-weight:600; color:var(--muted)}
.dois .card.fb-p > p.fb-nada{margin:6px 14px 10px; font-size:13.5px; color:var(--muted)}
.fb-p .ln .tt.fb-frase{-webkit-line-clamp:3}
.ln .ss.fb-motivo{white-space:normal}
.jp-tab td .sub{font-weight:400}
.jp-tab .jp-atr{display:block; font-size:12px; margin-top:2px}
.jp-tab .jp-atr, .jp-tab .jp-atr .n-cel{color:var(--u4)}
.jp-tab td.jp-pes{white-space:nowrap}
@media (max-width:720px){ .tabela.vira.jp-tab td.n{text-align:left} .tabela.vira.jp-tab .jp-atr{display:inline; margin-left:6px} }
@media (max-width:560px){ .fb-p .lista .ln .rr{display:none} .fb-p .lista .ln{grid-template-columns:auto minmax(0,1fr)} }

/* Revisão (15/10/2026, noite; app/revisao.js): o Word com as revisões na devolução para correção, e o anexo para abrir */
.anexo-rev-campo{display:flex; flex-direction:column; gap:5px}
.anexo-rev-rot{font-size:12.5px; color:var(--muted); font-weight:500}
.anexo-rev-campo .soltar{margin-top:0; padding:12px}
.anexo-rev-campo .soltar.escolhido{border-style:solid; border-color:var(--accent); color:var(--ink); background:var(--accent-bg)}
.anexo-rev-campo .ed-dica{margin:0}
.anexo-rev{display:inline-flex; align-items:center; gap:8px; max-width:100%; margin-top:8px; padding:4px 12px 4px 4px; border-radius:10px; background:var(--card); box-shadow:0 0 0 1px var(--line); color:var(--ink); font-size:13px; font-weight:500; text-align:left; cursor:pointer}
.anexo-rev:hover{box-shadow:0 0 0 1px var(--accent); color:var(--accent)}
.anexo-rev .ext{flex:none; width:34px; height:24px; border-radius:6px; background:var(--accent-bg); color:var(--accent); font-size:9.5px; font-weight:700; display:grid; place-items:center; letter-spacing:.03em}
.anexo-rev-n{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ln .anexo-rev{margin-top:6px}
.anexo-rev-topo{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:10px 12px; border-radius:12px; background:var(--card-2)}
.anexo-rev-topo .sec-t{font-size:12.5px; color:var(--muted)}
.anexo-rev-topo .anexo-rev{margin-top:0}
dd .anexo-rev{margin-top:6px}

/* 15/10/2026 (noite) · banco de modelos (app/modelos.js): os botões lado a lado e o padrão que falta (os cartões dos modelos de
   e-mail saíram em 16/10/2026: viraram as mensagens de WhatsApp, no bloco do fim) */
.mdl-acoes{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.mdl-falta .dot{background:var(--u2)}
.mdl-texto{white-space:pre-wrap; background:var(--card-2); border-radius:12px; padding:14px 16px; font-size:14px; line-height:1.55; margin-top:12px}
@media (max-width:560px){ .mdl-bt{padding:8px 10px} .mdl-bt span{display:none} }

/* Matérias, função e plano de carreira (15/10/2026, noite; app/carreira.js) */
.carr-chips{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.carr-sel{border:0; background:var(--card-2); border-radius:20px; padding:3px 8px; font:inherit; font-size:12.5px; color:var(--accent); max-width:100%; cursor:pointer; field-sizing:content}
.carr-sel:hover{background:color-mix(in srgb,var(--accent) 10%, var(--card-2))}
.carr-sel:focus-visible{outline:2px solid var(--accent); outline-offset:0}
.carr-texto{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-line; text-align:left}
.carr-fora-l{margin-top:8px}
.carr-vazio{margin:0; font-size:13px; color:var(--muted)}
.carr-vazio .acao{font-size:13px; white-space:normal; text-align:left}
.carr-nivel{display:flex; align-items:flex-start; gap:12px; margin:2px 0 4px}
.carr-nivel .ss{font-size:12.5px; color:var(--muted); margin-top:2px}
.carr-nv-t{font-size:14px; display:flex; align-items:center; flex-wrap:wrap; gap:4px}
.carr-nv-t b{font-weight:600}
.carr-nv-t > span{color:var(--muted); font-size:13px}
.carr-sel-nv{font-size:13.5px; font-weight:600; color:var(--ink); padding:3px 10px}
.carr-pips{display:flex; gap:4px; padding-top:8px; flex:none}
.carr-pips i{width:7px; height:7px; border-radius:50%; background:color-mix(in srgb,var(--pc) 22%, var(--card-2))}
.carr-pips i.on{background:var(--pc)}
.carr-evol{white-space:normal}
.carr-para{font-size:12.5px; color:var(--muted); margin:12px 0 6px}
.carr-mot{color:color-mix(in srgb,var(--u2) 85%, var(--ink))}
.carr-n{color:var(--ink-2)}
.carr-cab{display:flex; align-items:center; gap:6px; padding-top:12px}
.carr-cab:first-child{padding-top:6px}
.carr-sug{display:block; font-size:12.5px; color:var(--muted); margin-top:3px}
.carr-sug .acao{font-size:12.5px; font-weight:600}
.carr-fora{display:inline-flex; align-items:center; gap:5px; font-size:12px; color:color-mix(in srgb,var(--u2) 85%, var(--ink)); margin-left:6px; cursor:default; white-space:nowrap}
.carr-fora::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--u2)}
.carr-bolas{display:inline-flex; gap:2px; vertical-align:middle; margin-left:4px}
.carr-bolas .av{width:18px; height:18px; font-size:8px}
.carr-resumo{margin-top:14px}
.carr-mats{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:14px 0 0; font-size:12.5px; color:var(--muted)}
.carr-mats > span:first-child{margin-right:2px}
.carr-pe{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:16px}
/* a janela do plano: níveis numa linha (nome, o que se espera, subir, tirar) e critérios em cartões com a meta de cada nível */
.carr-nvs{display:flex; flex-direction:column; gap:8px; margin-bottom:8px}
.carr-nv{display:grid; grid-template-columns:22px minmax(0,1fr) minmax(0,2fr) auto; gap:8px; align-items:center}
.carr-num{font-size:12.5px; color:var(--muted); text-align:center; font-variant-numeric:tabular-nums}
.carr-bts{display:flex; gap:2px}
.carr-bts > span{width:30px}
.carr-bts button, .carr-cr-l > button{width:30px; height:30px; border-radius:50%; color:var(--muted); font-size:16px; line-height:30px; text-align:center}
.carr-bts button:hover, .carr-cr-l > button:hover{background:var(--card-2); color:var(--ink)}
.carr-crs{display:flex; flex-direction:column; gap:10px; margin-bottom:8px}
.carr-cr{background:var(--card-2); border-radius:14px; padding:10px 12px; display:flex; flex-direction:column; gap:8px}
.carr-cr .ed-dica{margin:0}
.carr-cr-l{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:8px; align-items:center}
.carr-alvos{display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 10px; font-size:12.5px; color:var(--muted)}
.carr-alvos > span{flex-basis:100%}
.form .carr-alvos label{gap:3px; font-size:12px}
.form .carr-alvos input{width:92px; padding:6px 8px}
@media (max-width:560px){
  .carr-nv{grid-template-columns:22px minmax(0,1fr) auto; grid-template-areas:"n t b" ". d d"}
  .carr-nv > .carr-num{grid-area:n} .carr-nv > [name=nv-t]{grid-area:t} .carr-nv > [name=nv-d]{grid-area:d} .carr-nv > .carr-bts{grid-area:b}
  .carr-cr-l{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"t b" "m m"}
  .carr-cr-l > [name=cr-t]{grid-area:t} .carr-cr-l > select{grid-area:m} .carr-cr-l > button{grid-area:b}
}

/* Contato com o cliente e a procuração gerada do cadastro (15/10/2026, noite; app/contatos.js e app/procuracao.js) */
.ctt-ln{display:flex; align-items:center; gap:10px; min-height:38px; padding:5px 14px; border-radius:12px; background:var(--card-2); font-size:13px}
.ctt-abre{display:flex; align-items:center; gap:8px; flex:1; min-width:0; text-align:left; color:var(--ink-2); padding:3px 0}
.ctt-abre svg{width:15px; height:15px; flex:none; color:var(--muted)}
.ctt-abre span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ctt-ln.espera .ctt-abre span{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.ctt-abre:hover span{color:var(--accent)}
.ctt-ln .ctt-mais{font-size:13px; flex:none}
.ctt-topo{display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap; margin-top:8px}
.ctt-topo .nota{margin:0; flex:1 1 240px}
.ctt-it .acoes-ln{flex-wrap:nowrap}
.ctt-it .ctt-apaga{opacity:0}
.ctt-it:hover .ctt-apaga, .ctt-it .ctt-apaga:focus-visible{opacity:1}
@media (hover:none){ .ctt-it .ctt-apaga{opacity:1} }
.ctt-rot{display:block; font-size:12.5px; color:var(--muted); font-weight:500; margin-bottom:5px}
.ctt-form .segmento button{flex:1 1 auto}
.ctt-acoes, .prc-acoes{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}
.btn.prc-falta{white-space:normal; text-align:left}
.prc-form{margin-top:12px}
.prc-form .prc-g{margin:6px 2px -4px}
.prc-conta{color:var(--faint); font-weight:400}
.prc-form label.prc-falta-c{color:var(--u3)}
.prc-form label.prc-falta-c input, .prc-form label.prc-falta-c select{border-color:color-mix(in srgb, var(--u3) 45%, transparent); background:color-mix(in srgb, var(--u3-bg) 55%, var(--card))}
.prc-advs{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px}
.prc-adv{display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:12px; background:var(--card-2); text-align:left; border:1.5px solid transparent; min-width:0}
.prc-adv span{min-width:0}
.prc-adv b{display:block; font-weight:600; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prc-adv small{display:block; font-size:12px; color:var(--muted)}
.prc-adv[aria-pressed="false"]{opacity:.55}
.prc-adv[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-bg)}
.prc-trat .segmento{max-width:460px}
.prc-aviso{color:var(--u3)}
.prc-leg{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.prc-folha{margin-top:12px; background:var(--card-2); border-radius:14px; padding:clamp(16px, 4vw, 36px) clamp(16px, 5vw, 48px); font-size:14px; line-height:1.6; color:var(--ink); text-align:justify; hyphens:auto; overflow-wrap:anywhere}
.prc-folha p{margin:0 0 10px}
.prc-folha p.c{text-align:center}
.prc-folha p.b{font-weight:600}
mark.prc-mv, mark.prc-mb, mark.prc-mm{border-radius:4px; padding:0 2px; color:inherit}
mark.prc-mv{background:var(--accent-bg)}
mark.prc-mb{background:var(--u4-bg); color:var(--u4)}
mark.prc-mm{background:var(--u2-bg); color:var(--u2)}
.prc-leg mark{font-size:12.5px; padding:1px 6px}
.prc-acoes{margin-top:14px}
.prc-sobe{margin:14px 0 4px}
.prc-sobe .btn{cursor:pointer}
details.prc-dob{margin-top:12px; border-top:1px solid var(--line-2); padding-top:10px}
details.prc-dob summary{cursor:pointer; font-weight:600; font-size:14px; list-style:none; display:flex; align-items:center; gap:6px}
details.prc-dob summary::-webkit-details-marker{display:none}
details.prc-dob summary::after{content:"›"; margin-left:auto; color:var(--faint); font-size:17px; transform:rotate(90deg); transition:transform .2s}
details.prc-dob[open] summary::after{transform:rotate(-90deg)}
.prc-marcas{display:grid; background:var(--card-2); border-radius:12px; padding:2px 0}
.prc-mc{display:grid; grid-template-columns:minmax(120px, 170px) minmax(0,1fr); gap:12px; padding:7px 14px; font-size:13px; align-items:baseline}
.prc-mc + .prc-mc{border-top:1px solid var(--line)}
.prc-mc code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; color:var(--accent); overflow-wrap:anywhere}
.prc-mc small{display:block; color:var(--muted); font-size:12px; margin-top:1px}
@media (max-width:520px){ .prc-mc{grid-template-columns:1fr; gap:2px} .prc-advs{grid-template-columns:1fr} .prc-folha{text-align:left} }

/* Senhas do escritório (15/10/2026, noite; app/senhas.js): a linha com o usuário e a senha para copiar (a chave solta na barra
   saiu em 16/10/2026, noite: as Senhas são um módulo da barra, como os outros) */
.cofre-ln{grid-template-columns:auto minmax(0,1fr) auto}
.cofre-ln[hidden]{display:none}
.cofre-ini{width:34px; height:34px; border-radius:9px; background:var(--accent-bg); color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.02em; display:grid; place-items:center}
.cofre-nome{font-weight:500; text-align:left; color:var(--ink)}
.cofre-nome:hover{color:var(--accent)}
.cofre-ln .ss a{color:var(--muted); text-decoration:none}
.cofre-ln .ss a:hover{color:var(--accent)}
.cofre-dl a{color:var(--accent); text-decoration:none; word-break:break-all}
.cofre-erro{color:var(--u4)}
.cofre-campos{display:flex; gap:8px; align-items:center; justify-content:flex-end; flex-wrap:wrap; min-width:0}
.cofre-par{display:inline-flex; align-items:center; gap:2px; min-width:0}
.cofre-v{display:inline-flex; align-items:center; gap:7px; max-width:230px; min-width:0; padding:5px 10px; border-radius:10px; background:var(--preench); color:var(--ink); font-size:13px}
.cofre-v span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cofre-v svg{width:14px; height:14px; flex:none; opacity:.45}
button.cofre-v:hover{background:color-mix(in srgb,var(--accent) 12%, var(--preench))}
button.cofre-v:hover svg{opacity:1; color:var(--accent)}
.cofre-v.vazio{background:none; color:var(--faint)}
.cofre-s span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; letter-spacing:.06em}
.cofre-s.vista{box-shadow:inset 0 0 0 1px var(--accent)}
.cofre-olho{width:30px; height:30px; border-radius:50%; color:var(--muted); display:grid; place-items:center; flex:none}
.cofre-olho:hover{background:var(--line-2); color:var(--ink)}
.cofre-olho svg{width:17px; height:17px}
.cofre-alerta{color:var(--u4); margin:0 0 12px}
.cofre-mascara{-webkit-text-security:disc}
.cofre-sen{display:flex; align-items:center; gap:4px}
.cofre-sen input{flex:1}
.cofre-h3{font-size:13px; color:var(--muted); font-weight:600; margin:20px 0 6px}
.cofre-dl{margin-top:12px}
.cofre-dl dd{min-width:0}
.cofre-dl .cofre-v{max-width:100%}
.cofre-obs{font-size:14px; line-height:1.45}
@media (max-width:640px){
  .cofre-ln{grid-template-columns:auto minmax(0,1fr)}
  .cofre-campos{grid-column:1/-1; justify-content:flex-start}
  .cofre-v{max-width:calc(100vw - 120px)}
}

/* Estudo e revisão pela IA (15/10/2026, noite; app/ia.js): recolhido no painel da demanda, como o histórico */
.painel details.ia-bloco summary{list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:8px}
.painel details.ia-bloco summary::-webkit-details-marker{display:none}
.painel details.ia-bloco summary h3{margin:0}
.painel details.ia-bloco summary span{font-size:12.5px; color:var(--faint); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.painel details.ia-bloco summary::after{content:"›"; margin-left:auto; color:var(--faint); font-size:17px; line-height:1; transform:rotate(90deg); transition:transform .2s}
.painel details.ia-bloco[open] summary::after{transform:rotate(-90deg)}
.ia-corpo{display:flex; flex-direction:column; gap:12px; margin-top:10px}
.ia-temas{margin:0}
.ia-sec{background:var(--card-2); border-radius:14px; padding:12px 14px}
.ia-sec-h{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ia-sec-h .ia-t{margin:0 auto 0 0; font-size:14px; font-weight:600; color:var(--ink)}
.ia-peca{font-size:12.5px; color:var(--muted); max-width:260px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-flex; align-items:center; gap:6px}
.ia-peca select{max-width:200px; font-size:12.5px; padding:3px 6px; border:1px solid var(--line); border-radius:8px; background:var(--card)}
.ia-cab{display:flex; align-items:center; gap:6px 10px; flex-wrap:wrap; margin:10px 0 2px}
.ia-cab .btn{margin-left:auto}
.ia-marca{font-size:12px; font-weight:600; color:var(--u2); background:var(--u2-bg); padding:2px 9px; border-radius:10px}
.ia-marca.ok{color:var(--u0); background:var(--u0-bg)}
.ia-meta{font-size:12.5px; color:var(--muted)}
.ia-resumo{margin:6px 0 0; font-size:14px; line-height:1.5}
.ia-sec h4:not(.ia-t){font-size:12.5px; color:var(--muted); font-weight:600; margin:12px 0 5px}
.ia-l{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.ia-l li{font-size:13.5px; line-height:1.45}
.ia-l small{display:block; color:var(--muted); font-size:12.5px; line-height:1.4; margin-top:1px}
.ia-l b{font-weight:600}
.ia-p{position:relative; padding-left:15px}
.ia-p::before{content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--c, var(--ux))}
.ia-tag{display:inline-block; margin-left:6px; font-size:11.5px; font-weight:600; line-height:17px; color:var(--c, var(--u2)); background:color-mix(in srgb, var(--c, var(--u2)) 13%, transparent); padding:0 7px; border-radius:8px; vertical-align:1px}
.ia-tag.buscar{--c:var(--accent)}
.ia-ck .ia-tag{margin-left:0; min-width:58px; text-align:center}
.ia-onde{font-size:12px; color:var(--muted)}
.ia-termos{font-size:13px; text-align:left; color:var(--accent); background:var(--accent-bg); padding:1px 8px; border-radius:8px; line-height:1.5}
.ia-termos:hover{background:color-mix(in srgb, var(--accent) 18%, transparent)}
.ia-nota{margin:8px 0 0; font-size:13px; color:var(--muted)}
.ia-nota.erro{color:var(--u4)}
.ia-prep{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-2); margin:10px 0 0}
.ia-prep i{width:14px; height:14px; border-radius:50%; border:2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color:var(--accent); animation:rc-gira .9s linear infinite; flex:none}
@media (prefers-reduced-motion: reduce){ .ia-prep i{animation:none} }

/* ===== 15/10/2026 (noite) · Para dar baixa (app/baixa.js) e objetos por demanda (app/objetos.js) ===== */
.bx-ln .ss.bx-nao{color:var(--u4); white-space:normal}
.bx-nao-p{flex-basis:100%; color:var(--u4); font-size:13px}
.ln.bx-pes > .av{flex:none}
.obj-campo{gap:6px}
.tag.obj-tag{max-width:100%; background:var(--accent-bg); color:var(--ink-2); padding:2px 7px 2px 10px; gap:6px}
.tag.obj-tag .obj-nome{font:inherit; color:inherit; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:min(320px, 64vw); text-align:left}
.tag.obj-tag button.obj-nome:hover{color:var(--accent)}
.obj-novo{display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; max-width:100%}
.obj-pre{font-size:12.5px; color:var(--ink-2); font-weight:500; max-width:min(320px, 60vw); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.obj-cancela{color:var(--faint); font-size:15px; line-height:1; padding:0 2px}
.obj-cancela:hover{color:var(--u4)}
.ln .ss.obj-comum{font-size:12px; color:var(--accent)}
.form .obj-form{display:flex; flex-direction:column; gap:5px; min-width:0}
.obj-form-rot{font-size:12.5px; color:var(--muted); font-weight:500}
@media (max-width:560px){ .bx-ln, .obj-parecidas .ln.cl{grid-template-columns:auto minmax(0,1fr)} .bx-ln > .acoes-ln, .obj-parecidas .ln.cl > .acoes-ln{grid-column:2; justify-content:flex-start} }

/* ===== 15/10/2026 (noite) · Financeiro: conferência do extrato do banco (app/extrato.js) ===== */
.mes-cab:has(> .ext-pilula){justify-content:flex-start}
.mes-cab:has(> .ext-pilula) > .mes-nav{margin-right:auto}
.ext-sit{padding:3px 0}
.ext-sit.ok b{color:var(--u0)}
.ext-fonte{margin:-6px 0 14px; line-height:1.5}
.ext-solta{border:1.5px dashed var(--line-2); box-shadow:none; background:var(--card); transition:border-color .15s, background .15s}
.ext-solta.sobre{border-color:var(--accent); background:var(--accent-bg)}
.ext-solta h3{margin:0 0 8px; font-size:17px; font-weight:600}
.ext-solta p{margin:0 0 8px; color:var(--ink-2); font-size:14px; line-height:1.55; max-width:720px}
.ext-solta-b{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px}
.ext-fim{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:18px; flex-wrap:wrap}
.ext-fim b{font-weight:600}
.ext-fim.ok b{color:var(--u0)}
.ext-fim p{margin:3px 0 0; color:var(--muted); font-size:13.5px; line-height:1.45}
.ext-fim > div{min-width:0; flex:1 1 280px}

/* ===== 16/10/2026 (madrugada) · Cronômetro mais simples (app/cronometro.js) =====
   Começar · Parar · Continuar; a pílula só com o que corre; no quadro, o que conta no alto com "Parar" e os outros de hoje com
   ▶; cada linha abre o tempo dela (trechos, excluir). */
.cq-topo{display:none; align-items:center; justify-content:space-between; gap:10px; margin:0 2px 10px}
.cq-topo b{font-size:15px; font-weight:600; color:var(--ink)}
.crono-q .cq-topo .cq-x{display:none; position:static; margin:0}
.cq-ativo{display:grid; grid-template-columns:8px minmax(0,1fr) auto auto; align-items:center; gap:10px; padding:10px 10px 10px 12px; margin-bottom:12px; border-radius:14px; background:var(--accent-bg)}
.cq-ativo .cq-pt{background:var(--accent); animation:crono-pulso 2.4s ease-in-out infinite}
.cq-a-nome{display:flex; flex-direction:column; gap:2px; min-width:0; text-align:left; border-radius:8px}
.cq-a-nome b{font-size:13.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cq-a-nome span{font-size:12px; color:var(--muted)}
.cq-a-nome:hover b{color:var(--accent)}
.cq-a-nome span.cq-velho{color:var(--u3); font-weight:500}
.cq-a-t{font-size:15px; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums}
.cq-parar svg{width:10px; height:10px}
.cq-l{display:flex; align-items:center; gap:10px; min-width:0; padding:6px 6px 6px 4px; border-radius:9px; text-align:left}
.cq-l:hover{background:var(--preench)}
.cq-l .cq-nome{flex:1}
.cq-l:hover .cq-nome{color:var(--ink)}
.cq-l .cq-t{padding:0; flex:none}
.cq-l:hover .cq-t{background:none}
.cq-dica{font-size:13px; color:var(--muted); line-height:1.45; margin:12px 2px 2px}
.cq-ln .cq-bt{color:var(--accent); background:var(--accent-bg)}
.cq-ln .cq-bt:hover{background:var(--accent); color:#fff}
.tr-tot{display:flex; align-items:baseline; gap:8px; margin:10px 0 2px; font-size:22px; font-variant-numeric:tabular-nums}
.tr-tot b{font-weight:600; color:var(--ink)}
.tr-corre{font-size:12.5px; color:var(--accent); font-weight:500}
.tr-ajuda{font-size:12.5px; color:var(--muted); margin:6px 4px 0}
.tr-pe .btn svg{width:10px; height:10px}
@media (max-width:600px){ .cq-topo{display:flex} .crono-q .cq-topo .cq-x{display:block} .cq-ativo{grid-template-columns:8px minmax(0,1fr) auto} .cq-ativo .cq-parar{grid-column:2/-1; justify-self:start} }

/* ===== 16/10/2026 (madrugada) · Prazos e tarefas: fatal × interno nos quadros e os fatais em 15 dias (app/fatais.js) ===== */
.qd-fi .fi-num{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:14px; row-gap:0; font-size:clamp(22px,2.6vw,32px); white-space:normal}
.qd-fi .fi-p{display:inline-flex; align-items:baseline; gap:5px; font:inherit; letter-spacing:inherit; color:inherit; padding:0; border-radius:8px; white-space:nowrap; transition:opacity .15s}
.qd-fi .fi-p b{font-weight:700; font-variant-numeric:tabular-nums}
.qd-fi .fi-f b{color:var(--fi, var(--ink))}
.qd-fi .fi-i b{color:var(--fi-i, var(--ink)); font-weight:650}
.qd-fi .fi-p small{font-size:.45em; font-weight:600; color:var(--muted); letter-spacing:0}
.qd-fi .fi-f:not(.zero) small{color:color-mix(in srgb, var(--fi, var(--ink)) 70%, var(--muted))}
.qd-fi button.fi-p:hover small, .qd-fi button.fi-p:focus-visible small{color:var(--accent)}
.qd-fi button.fi-p:hover b{opacity:.82}
.qd-fi .fi-p.zero b{color:var(--faint); font-weight:500}
.qd-fi .sub .fi-s{font:inherit; color:inherit; padding:0}
.qd-fi .sub .fi-s:hover{color:var(--accent)}
.ln-fatal .rr b{color:var(--u4)}
.kicker.fx-pz{margin:16px 4px 8px}
.sec .kicker.fx-pz:first-of-type{margin-top:4px}
.matriz.com-fatal{grid-template-columns:minmax(110px,160px) repeat(5,minmax(0,1fr))}
.matriz .cab-fatal{color:var(--u4)}
.matriz .quem.tot-m{color:var(--muted); font-weight:600; font-size:13px; border-top:1px solid var(--line); padding-top:8px; margin-top:4px}
.matriz .quem.tot-m ~ .cel{margin-top:4px}
@media (max-width:900px){ .matriz.com-fatal{grid-template-columns:90px repeat(5,minmax(0,1fr))} }
@media (max-width:620px){ .matriz.com-fatal{grid-template-columns:repeat(5,minmax(0,1fr))} .qd-fi .fi-num{column-gap:10px} }

/* ================= Sua semana e o mês na mesa (16/10/2026, madrugada; app/semana.js) =================
   ‹ título › no alto, "Semana | Mês" à direita; cada item numa linha: o fio da cor do tipo, o nome e o ponto vermelho do fatal */
.sem-mesa .sm-tit{min-width:0}
.sem-mesa .sm-nav{gap:2px; flex-wrap:wrap}
.sem-mesa .sm-nav h2{margin:0 4px; white-space:nowrap}
.sem-mesa .sm-nav .btn{margin-left:8px}
.sem-mesa .sm-tit p{margin:3px 0 0 34px}
.semana.sm-sem{gap:8px}
@media (min-width:700px){ .semana.sm-sem{grid-template-columns:var(--cols, repeat(var(--n,6),minmax(0,1fr)))} }
.semana.sm-sem .dia{min-height:150px; padding:10px 8px 9px; gap:4px; border-radius:14px}
.semana.sm-sem .dia-h{padding:0 3px 3px}
.semana.sm-sem .dia-h b{font-size:14px}
.semana.sm-sem .dia-h span{font-size:12px}
.semana.sm-sem .dia.passou:not(.hoje){background:color-mix(in srgb, var(--card) 55%, transparent); box-shadow:none}
.semana.sm-sem .nada{font-size:12.5px; padding:4px 3px}
.semana.sm-sem .mais, .semana.mes-mesa .mais{font-size:12px; padding:1px 4px; align-self:flex-start}
.it.sm{display:flex; gap:6px; padding:5px 8px 5px 11px; border-radius:8px; min-height:27px; background:var(--card-2); align-items:flex-start}
.it.sm::before{top:6px; bottom:6px; width:3px}
.it.sm .nm{flex:1; min-width:0; font-size:12.5px; font-weight:500; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.it.sm .sm-fatal, .it.sm .sm-novo{flex:none; width:6px; height:6px; border-radius:50%; background:var(--u4)}
.it.sm .sm-novo{background:var(--accent)}
.it.sm.atras .nm{color:var(--u4)}
.it.sm.rev-chega{background:transparent; box-shadow:inset 0 0 0 1px var(--line)}   /* o que se acompanha: o contorno da cor do tipo, da casa (.it.acomp) */
.it.sm.acomp:hover, .it.sm.rev-chega:hover{background:color-mix(in srgb, var(--accent) 6%, transparent)}
.it.sm.feita{opacity:.55}
.it.sm.feita .nm{text-decoration:line-through}
.mes-mesa .it.sm{min-height:23px; padding:3px 6px 3px 9px; border-radius:7px; gap:4px; align-items:center}
.mes-mesa .it.sm::before{top:5px; bottom:5px; width:2.5px}
.mes-mesa .it.sm .nm{font-size:12px}
@media (min-width:700px) and (max-width:1100px){ .sem-mesa .semana.mes-mesa{grid-template-columns:repeat(5,minmax(0,1fr)) repeat(2,minmax(0,.5fr)); gap:5px} .sem-mesa .mes-mesa .dia{padding:7px 5px 6px} .semana.sm-sem{gap:6px} .semana.sm-sem .dia{padding:9px 6px 8px} .semana.sm-sem .it.sm{padding:5px 6px 5px 9px} .semana.sm-sem .it.sm .nm{font-size:12px} }
/* no celular, a semana é a lista dos dias, um embaixo do outro; o dia vazio fica numa linha, o que já passou vazio sai */
@media (max-width:699px){
  .sem-mesa .sm-tit p{margin-left:0}
  .semana.sm-sem, .sem-mesa .semana.mes-mesa{grid-template-columns:minmax(0,1fr); gap:8px}
  .sem-mesa .semana .dia{min-width:0}
  .semana.sm-sem .dia{min-height:0; padding:10px 10px 11px; gap:5px}
  .semana.sm-sem .dia.sem-itens{flex-direction:row; align-items:baseline; padding-top:9px; padding-bottom:9px}
  .semana.sm-sem .dia.sem-itens .dia-h{justify-content:flex-start; gap:8px; flex:1; padding-bottom:0}
  .semana.sm-sem .dia.sem-itens .nada{padding:0 3px}
  .semana.sm-sem .dia.passou.sem-itens{display:none}
  .semana.sm-sem .it.sm{min-height:34px}
  .semana.sm-sem .it.sm .nm{font-size:13.5px}
  .semana.mes-mesa .dia.hoje.sem-itens{display:flex}
}

/* ===== 16/10/2026 (madrugada) · O fatal: a conferência pela publicação e a contestação trabalhista (app/conferefatal.js, app/prazo.js) ===== */
.calc-fatal .so-aud{display:none}
.calc-fatal.modo-aud .so-aud{display:flex}
.calc-fatal.modo-aud label:has([name=fDisp]), .calc-fatal.modo-aud label:has([name=fDias]), .calc-fatal.modo-aud label:has([name=fDobro]), .calc-fatal.modo-aud .so-data{display:none}
.calc-fatal .calc-aud{display:flex; gap:8px}
.calc-fatal .calc-aud input{flex:1; min-width:0}
.ln.cf-ln .ss.cf-pub{white-space:normal; line-height:1.45; margin-top:2px}
.ln.cf-ln .rr{min-width:96px}
.cf-painel{margin:6px 0 0; white-space:normal}
.cf-bts{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}

/* ===== 16/10/2026 · O cronômetro completo (app/cronotela.js e app/cronometro.js) =====
   A tela #/cronometro (o que conta, grande; os modelos; o dia numa linha do tempo; a semana e o mês; o comparativo por peça; por
   cliente e por processo), os modelos de um clique, o modo regressivo, a janelinha que se arrasta para os cantos (cw-) e a de
   fora da página (Document Picture-in-Picture). */
.ct-de{color:var(--muted); font-weight:500}
.ct-agora{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px 28px; align-items:center; background:var(--card); border-radius:22px; box-shadow:var(--shadow); padding:22px 26px}
.ct-agora.on{background:linear-gradient(115deg, var(--accent-bg), transparent 62%), var(--card)}
.ct-ag-k{display:flex; align-items:center; gap:7px; margin:0 0 5px; font-size:13px; color:var(--muted); font-weight:500}
.ct-ag-k .pt, .cw-top .pt{width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; animation:crono-pulso 2.4s ease-in-out infinite}
.ct-ag-k .cq-velho{color:var(--u3)}
.ct-ag-nome{margin:0; font-size:clamp(20px,2.3vw,26px); font-weight:600; letter-spacing:-.018em; line-height:1.2; min-width:0}
.ct-ag-nome button{text-align:left; border-radius:8px; overflow-wrap:anywhere}
.ct-ag-nome button:hover{color:var(--accent)}
.ct-ag-sub{margin:7px 0 0; font-size:14px; color:var(--muted)}
.ct-ag-sub .acao{font-size:14px}
.ct-ag-dir{display:flex; align-items:center; gap:20px}
.ct-rel-caixa{display:flex; flex-direction:column; align-items:flex-end; gap:7px}
.ct-relogio{font-size:clamp(42px,5.2vw,60px); font-weight:300; letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums; color:var(--ink)}
.ct-relogio.zero{color:var(--faint)}
.ct-reg{width:100%; min-width:150px; height:4px; border-radius:2px; background:var(--preench); overflow:hidden}
.ct-reg i{display:block; height:100%; border-radius:2px; background:var(--accent); transition:width 1s linear}
.ct-falta{font-size:12px; color:var(--muted); margin-top:-3px}
.ct-agora .btn svg, .cw-parar svg{width:10px; height:10px}
.ct-modelos{margin-top:16px; padding:0 2px}
.ct-qds .qd .num{white-space:normal; line-height:1.15}
.ct-modelos-cab{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 2px 8px}
.ct-modelos-cab .kicker{margin:0}
.ct-modelos .acao{font-size:13px}
/* os modelos: botões de um clique; os da pessoa em azul-claro, os do escritório neutros */
.cm-chips{display:flex; flex-wrap:wrap; gap:7px}
.cm-chip{display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:17px; background:var(--card); box-shadow:0 0 0 1px var(--line); font-size:13.5px; font-weight:500; color:var(--ink); white-space:nowrap; transition:background .15s, color .15s, box-shadow .15s}
.cm-chip svg{width:12px; height:12px; flex:none; color:var(--muted)}
.cm-chip.seu{background:var(--accent-bg); box-shadow:none; color:var(--accent)}
.cm-chip.seu svg{color:var(--accent)}
.cm-chip:not(:disabled):hover{box-shadow:0 0 0 1px var(--accent); color:var(--accent)}
.cm-chip.on, .cm-chip.on:not(:disabled):hover{background:var(--accent); color:#fff; box-shadow:none}
.cq-mais{display:block; font-size:12.5px; margin:4px 4px 0}
.cm-chip.on svg{color:#fff}
.cm-chip:disabled{cursor:default; opacity:.75}
.cm-chip.cm-mais{color:var(--muted); box-shadow:none; background:var(--preench)}
.cm-modo{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:12px}
.cm-seg .chip{display:inline-flex; align-items:center; gap:5px}
.cm-seg .chip svg{width:11px; height:11px}
.cm-durs{display:flex; flex-wrap:wrap; align-items:center; gap:4px}
.cm-dur{padding:4px 10px; border-radius:13px; font-size:12.5px; color:var(--ink-2)}
.cm-dur:hover{background:var(--preench)}
.cm-dur[aria-pressed="true"]{background:var(--accent-bg); color:var(--accent); font-weight:600}
.cm-outro{width:74px; padding:4px 10px; border-radius:13px; border:1px solid transparent; background:var(--preench); font-size:12.5px; color:var(--ink)}
.cm-outro.on{background:var(--accent-bg); color:var(--accent); font-weight:600}
.cm-outro:focus{outline:2px solid var(--accent); outline-offset:0; background:var(--card)}
/* no quadro da pílula: menores, sem sombra */
.cm-bloco{margin:0 0 14px}
.cm-cab{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.cm-cab .cq-rot{margin-bottom:7px}
.cm-cab .acao{font-size:12.5px}
.cm-bloco .cm-chips{gap:5px}
.cm-bloco .cm-chip{padding:5px 11px; font-size:13px; background:var(--preench); box-shadow:none}
.cm-bloco .cm-chip.seu{background:var(--accent-bg)}
.cm-bloco .cm-chip.on{background:var(--accent)}
.cm-bloco .cm-modo{margin-top:10px}
.cm-bloco .cm-seg .chip{padding:4px 10px; font-size:12.5px}
/* a janela dos modelos */
.cm-k{margin:16px 4px 6px}
.cm-ln{grid-template-columns:auto minmax(0,1fr) auto}
.cm-amostra{pointer-events:none}
.cm-acoes{display:flex; align-items:center; gap:4px}
.cm-acoes:empty{display:none}
.cm-sobe{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:var(--muted); font-size:14px}
.cm-sobe:hover:not(:disabled){background:var(--preench); color:var(--accent)}
.cm-sobe:disabled{opacity:.3; cursor:default}
.cm-novo{margin:8px 2px 2px}
.cm-form{display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr) minmax(0,1fr); gap:10px; padding:12px 18px 14px}
.cm-form label{display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--muted); font-weight:500; min-width:0}
.cm-form input{width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:9px; background:var(--card); min-width:0}
.cm-form input:focus{outline:2px solid var(--accent); outline-offset:0; border-color:transparent}
.cm-bts{grid-column:1/-1; display:flex; align-items:center; gap:8px}
.cm-bts > span{flex:1}
/* o dia: a linha do tempo */
.ct-sec-acoes{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.ct-nav{display:flex; align-items:center; gap:2px}
.ct-nav-b{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--ink-2)}
.ct-nav-b svg{width:15px; height:15px}
.ct-nav-b:hover:not(:disabled){background:var(--preench); color:var(--accent)}
.ct-nav-b:disabled{opacity:.28; cursor:default}
.ct-hoje{background:var(--preench)}
.ct-tl{background:var(--card); border-radius:18px; box-shadow:var(--shadow); padding:18px 20px 8px; margin-bottom:12px}
.ct-tl-trilho{position:relative; height:36px; border-radius:10px; background:var(--preench)}
.ct-tl-b{position:absolute; top:5px; bottom:5px; min-width:4px; border-radius:6px; background:var(--g); opacity:.9; transition:opacity .15s, box-shadow .15s}
.ct-tl-b:hover, .ct-tl-b:focus-visible{opacity:1; box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--g); outline:none}
.ct-tl-b.on{animation:ct-corre 2.4s ease-in-out infinite}
@keyframes ct-corre{0%,100%{opacity:.95} 50%{opacity:.6}}
.ct-tl-agora{position:absolute; top:-4px; bottom:-4px; width:2px; margin-left:-1px; border-radius:1px; background:var(--u4); pointer-events:none}
.ct-tl-horas{position:relative; height:22px; margin-top:6px}
.ct-tl-h{position:absolute; top:0; transform:translateX(-50%); font-size:11.5px; color:var(--faint); font-variant-numeric:tabular-nums}
.ct-tl-h:first-child{transform:none}
.ct-tl-h:last-child{transform:translateX(-100%)}
.ct-mao{font-size:13px; color:var(--muted); margin:0 4px 12px}
.ct-mao .acao{font-size:13px}
/* a semana e o mês */
.ct-sm-g{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px}
.ct-card{background:var(--card); border-radius:18px; box-shadow:var(--shadow); padding:16px 18px 14px; min-width:0}
.ct-card-h{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px}
.ct-card-h h3{margin:0; font-size:15px; font-weight:600}
.ct-card-h span{font-size:13px; color:var(--muted)}
.ct-semana{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; height:176px}
.ct-sb{display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0; border-radius:10px; padding:2px 0}
.ct-sb-n{height:15px; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.ct-sb-col{flex:1; width:100%; max-width:30px; border-radius:8px; background:var(--preench); display:flex; align-items:flex-end; overflow:hidden}
.ct-sb-col i{display:block; width:100%; border-radius:8px; background:color-mix(in srgb, var(--accent) 55%, transparent); transition:height .3s}
.ct-sb-d{font-size:12px; color:var(--muted); font-weight:500}
.ct-sb:hover:not(:disabled) .ct-sb-col i{background:var(--accent)}
.ct-sb.sel .ct-sb-col i{background:var(--accent)}
.ct-sb.sel .ct-sb-d{color:var(--accent); font-weight:700}
.ct-sb.fut{opacity:.4; cursor:default}
.ct-cal{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px}
.ct-cal-c{text-align:center; font-size:11.5px; color:var(--faint); font-weight:600; padding-bottom:2px}
.ct-cal-d{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; height:38px; border-radius:9px; background:color-mix(in srgb, var(--accent) calc(var(--a, 0) * 100%), transparent); min-width:0}
.ct-cal-d b{font-size:12.5px; font-weight:500; color:var(--ink); line-height:1.1}
.ct-cal-d span{font-size:10.5px; color:var(--ink-2); line-height:1.1; font-variant-numeric:tabular-nums}
.ct-cal-d:hover:not(:disabled){box-shadow:inset 0 0 0 1.5px var(--accent)}
.ct-cal-d.hoje b{color:var(--accent); font-weight:700}
.ct-cal-d.sel{box-shadow:inset 0 0 0 2px var(--accent)}
.ct-cal-d.fut{opacity:.35; cursor:default}
/* o comparativo por peça */
.ct-cp{padding:0}
.ct-cp-cab, .ct-cp-l{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) 96px; gap:14px; align-items:center; padding:0 18px}
.ct-cp.eq .ct-cp-cab, .ct-cp.eq .ct-cp-l{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr) 96px}
.ct-cp-cab{padding-top:12px; padding-bottom:8px; font-size:12px; color:var(--muted); font-weight:500; border-bottom:1px solid var(--line-2)}
.ct-cp-cab > span:last-child, .ct-cp-l > .ct-tend{justify-self:end}
.ct-cp-l{width:100%; text-align:left; padding-top:12px; padding-bottom:12px; border-top:1px solid var(--line-2)}
.ct-cp-cab + .ct-cp-l{border-top:0}
.ct-cp-l:hover{background:color-mix(in srgb, var(--accent) 4%, transparent)}
.ct-cp-l:last-child{border-bottom-left-radius:18px; border-bottom-right-radius:18px}
.ct-cp-t{display:flex; flex-direction:column; min-width:0}
.ct-cp-t b{font-size:14.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ct-cp-t small{font-size:12px; color:var(--muted)}
.ct-cp-m{font-size:14.5px; font-weight:600; color:var(--ink)}
.ct-cp-e{font-size:14px; color:var(--ink-2)}
.ct-tend{display:inline-block; padding:2px 9px; border-radius:11px; font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.ct-tend.bom{color:var(--u0); background:var(--u0-bg)}
.ct-tend.mau{color:var(--u3); background:var(--u3-bg)}
.ct-tend.est{color:var(--muted); background:var(--preench); font-weight:500}
.ct-tend.nada{color:var(--faint); padding:2px 4px}
/* a janela do tempo: a que está ligado e o tipo de peça */
.tr-meta{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 16px; margin:12px 0 4px; font-size:13.5px}
.tr-meta dt{color:var(--muted)}
.tr-meta dd{margin:0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; min-width:0; color:var(--ink)}
.tr-meta dd > span{min-width:0; overflow-wrap:anywhere}
.tr-meta .acao{font-size:13px}
.tr-nada{color:var(--muted)}
.tr-peca{display:flex; gap:6px; flex-wrap:wrap; align-items:center; width:100%}
.tr-peca input{flex:1; min-width:160px; padding:6px 9px; border:1px solid var(--line); border-radius:9px; background:var(--card)}
.tr-peca input:focus{outline:2px solid var(--accent); outline-offset:0; border-color:transparent}
.cq-sug .cq-cab-t{margin:9px 6px 2px; font-size:11.5px; color:var(--faint); letter-spacing:.01em}
.crono-pilula.reg .pt{border-radius:2px}
.crono-pilula.fim, .crono-f.fim{animation:ct-fim 1.2s ease-in-out 2}
@keyframes ct-fim{0%,100%{box-shadow:0 0 0 0 transparent} 50%{box-shadow:0 0 0 5px var(--accent-bg)}}
/* a janelinha flutuante: arrasta e encaixa no canto mais perto (lembra); segue aberta ao trocar de tela */
.crono-f{position:fixed; z-index:26; width:252px; max-width:calc(100vw - 32px); padding:11px 12px 11px 14px; border-radius:18px; background:var(--card); box-shadow:0 0 0 1px var(--line), var(--shadow-up); cursor:grab; user-select:none; -webkit-user-select:none; touch-action:none}
.crono-f[hidden]{display:none}
.crono-f.cw-se{left:16px; top:calc(var(--alt-barra, 52px) + 12px)}
.crono-f.cw-sd{right:16px; top:calc(var(--alt-barra, 52px) + 12px)}
.crono-f.cw-ie{left:16px; bottom:16px}
.crono-f.cw-id{right:16px; bottom:16px}
.crono-f.arrasta{cursor:grabbing; box-shadow:0 0 0 1px var(--line), 0 24px 60px rgba(0,0,0,.22); transform:scale(1.02)}
.crono-f.encaixa{animation:ct-encaixa .25s ease-out}
@keyframes ct-encaixa{from{transform:scale(.96); opacity:.85} to{transform:none; opacity:1}}
.cw-top{display:flex; align-items:center; gap:7px; min-height:22px}
.cw-nome{flex:1; min-width:0; font-size:13px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cw-nome.cw-cinza{color:var(--muted); font-weight:500}
.cw-x{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; color:var(--faint); font-size:16px; line-height:1; flex:none}
.cw-x:hover{background:var(--preench); color:var(--ink)}
.cw-rel{font-size:34px; font-weight:300; letter-spacing:-.03em; line-height:1.15; font-variant-numeric:tabular-nums; color:var(--ink); margin:2px 0 6px}
.cw-rel.zero{color:var(--faint)}
.cw-reg{min-width:0; margin:-2px 0 8px}
.crono-f .cw-bts{display:flex; align-items:center; gap:4px; margin:0; flex-wrap:nowrap}
.cw-parar{display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:16px; background:var(--accent); color:#fff; font-size:13px; font-weight:600; margin-right:auto}
.cw-parar:hover{background:color-mix(in srgb, var(--accent) 88%, #000)}
.cw-b{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--ink-2); flex:none}
.cw-b svg{width:15px; height:15px}
.cw-b:hover, .cw-b[aria-expanded="true"]{background:var(--preench); color:var(--accent)}
.cw-menu{display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line-2)}
.cw-menu .cm-chip{padding:4px 10px; font-size:12.5px; background:var(--preench); box-shadow:none}
.cw-menu .cm-chip.seu{background:var(--accent-bg)}
.cw-menu .cw-outra{color:var(--muted)}
.cw-menu.cw-leve{border-top:0; padding-top:0; margin-top:9px}
/* fora da página (a janela do Chrome por cima das outras) */
body.cw-pip{margin:0; background:var(--card); overflow:hidden}
body.cw-pip .crono-f{position:static; width:auto; max-width:none; min-height:100vh; border-radius:0; box-shadow:none; cursor:default; padding:14px 16px; touch-action:auto}
@media (max-width:760px){ .ct-sm-g{grid-template-columns:1fr} }
@media (max-width:600px){
  .ct-agora{grid-template-columns:1fr; padding:18px 18px 16px; border-radius:20px}
  .ct-ag-dir{justify-content:space-between}
  .ct-rel-caixa{align-items:flex-start}
  .ct-tl{padding:14px 14px 6px}
  .ct-cp-cab{display:none}
  .ct-cp-l, .ct-cp.eq .ct-cp-l{grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; padding:11px 16px}
  .ct-cp-t b{white-space:normal}
  .ct-qds .qd .num{font-size:clamp(19px, 5.6vw, 30px); white-space:normal; line-height:1.15}
  .ct-cp-e{grid-column:1; font-size:12.5px; color:var(--muted)}
  .ct-cp-e::before{content:"Equipe: "}
  .ct-cp-l > .ct-tend{grid-column:2}
  .cm-form{grid-template-columns:1fr 1fr} .cm-form label:first-child{grid-column:1/-1}
  .cm-ln{grid-template-columns:auto minmax(0,1fr); row-gap:6px}
  .cm-acoes{grid-column:1/-1; justify-content:flex-end}
  .crono-f.cw-ie, .crono-f.cw-id{bottom:12px}
}
@media (prefers-reduced-motion:reduce){ .ct-ag-k .pt, .cw-top .pt, .ct-tl-b.on, .crono-pilula.fim, .crono-f.fim{animation:none} }

/* ===== A lista de escolha própria, no lugar do menu nativo do <select> (16/10/2026, madrugada; app/escolha.js) =====
   O desenho do campo Contrato da demanda (.sugestoes, 15/10): o cartão claro com sombra, a linha marcada em azul suave,
   o cinza embaixo do nome; o ✓ na opção escolhida e os grupos em cinza pequeno, como nos menus da Apple. */
select:not([multiple]):not([disabled]){cursor:pointer}
.lp-menu{position:fixed; z-index:62; display:flex; flex-direction:column; padding:5px; border-radius:12px; color:var(--ink); font-size:14px; line-height:1.3; text-align:left;
  background:rgba(255,255,255,.92); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 0 0 .5px rgba(0,0,0,.12), var(--shadow-up); outline:none; opacity:0; transform:translateY(-3px); transform-origin:top center; transition:opacity .12s ease, transform .12s ease}
.lp-menu.cima{transform:translateY(3px); transform-origin:bottom center}
.lp-menu.on{opacity:1; transform:none}
.lp-cab{flex:none; padding:6px 10px 4px 28px; font-size:12px; font-weight:600; color:var(--muted)}
.lp-busca{flex:none; padding:2px 2px 5px}
.lp-busca input{width:100%; border:0; border-radius:8px; padding:7px 10px 7px 30px; font:inherit; font-size:13.5px; color:var(--ink); outline:none; -webkit-appearance:none; appearance:none;
  background:var(--preench) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.5' fill='none' stroke='%238E8E93' stroke-width='1.6'/%3E%3Cpath d='M9.4 9.4 13 13' stroke='%238E8E93' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 10px 50%}
.lp-busca input:focus{box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent)}
.lp-busca input::-webkit-search-cancel-button{opacity:.5}
.lp-ops{overflow-y:auto; overscroll-behavior:contain; min-height:0; scrollbar-width:thin}
.lp-g{padding:9px 10px 3px 28px; font-size:11.5px; font-weight:600; color:var(--muted)}
.lp-g:first-child{padding-top:4px}
.lp-op{display:flex; align-items:baseline; gap:4px; padding:7px 10px 7px 6px; border-radius:7px; cursor:pointer; user-select:none; -webkit-user-select:none}
.lp-op .lp-v{flex:0 0 18px; text-align:center; font-size:12.5px; font-weight:700; color:var(--accent); visibility:hidden}
.lp-op[aria-selected="true"] .lp-v{visibility:visible}
.lp-op[aria-selected="true"] .lp-t{font-weight:600}
.lp-op .lp-t{min-width:0; overflow-wrap:anywhere}
.lp-op small{display:block; margin-top:1px; color:var(--muted); font-size:12px; font-weight:400}
.lp-op.ativo{background:var(--accent-bg)}
.lp-op.vazio .lp-t{color:var(--muted)}
.lp-op[aria-disabled="true"]{color:var(--faint); cursor:default}
.lp-nada{padding:10px 12px; color:var(--muted); font-size:13px}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .lp-menu{background:rgba(44,44,46,.94); box-shadow:0 0 0 .5px rgba(255,255,255,.14), var(--shadow-up)} }
:root[data-theme="dark"] .lp-menu{background:rgba(44,44,46,.94); box-shadow:0 0 0 .5px rgba(255,255,255,.14), var(--shadow-up)}
@media (pointer:coarse), (max-width:560px){ .lp-menu{font-size:15px} .lp-op{padding:10px 12px 10px 6px} .lp-busca input{font-size:16px; padding:9px 10px 9px 30px} }
@media (prefers-reduced-motion:reduce){ .lp-menu{transition:none} }

/* 16/10/2026 (madrugada) · banco de modelos (app/modelos.js): anexar a peça na tela, com arrastar e soltar, e as mensagens de WhatsApp */
body.mdl-solta::after{content:"Solte para anexar as peças (Word ou PDF)"; position:fixed; inset:12px; z-index:40; display:flex; align-items:center; justify-content:center; padding:24px; text-align:center; border:2px dashed var(--accent); border-radius:20px; background:var(--glass); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--accent); font-size:16px; font-weight:600; pointer-events:none}
.mdl-zap-ops{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.mdl-zap-ops button{padding:6px 12px; border-radius:20px; font-size:13px; background:var(--card-2); color:var(--ink-2)}
.mdl-zap-ops button:hover{color:var(--ink)}
.mdl-zap-ops button[aria-checked="true"]{background:var(--accent-bg); color:var(--accent); font-weight:600}
.mdl-zap-form .mdl-zap-txt{font-size:14.5px; line-height:1.5; color:var(--ink); resize:vertical; min-height:170px}
.mdl-zap-falta{color:var(--u3); margin-top:8px}
.mdl-zap-campos{display:flex; flex-wrap:wrap; gap:6px}
.mdl-zap-campos .tag{cursor:pointer}
.mdl-zap-campos .tag:hover{background:var(--accent-bg); color:var(--accent)}
.mdl-zap-ln .tt .tag{font-size:11.5px; padding:1px 8px; margin-left:4px; vertical-align:1px; font-weight:500}
@media (max-width:560px){ .mdl-zap-form .mdl-zap-txt{font-size:16px} }

/* 16/10/2026 (manhã) · Sherlock (app/sherlock.js): o formulário, o relatório e a folha do PDF */
.shk-card{margin-bottom:6px}
.shk-campo{display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--muted); font-weight:500; min-width:0}
.shk-campo .tag{align-self:flex-start; font-size:13px; padding:6px 10px; max-width:100%; white-space:normal}
.shk-pe{display:flex; align-items:center; gap:12px; justify-content:flex-end; flex-wrap:wrap}
.shk-lgpd{font-size:12.5px; color:var(--muted); margin-right:auto}
.shk-sub{margin-top:-6px}
.shk-sim{color:var(--u3)}
.shk-item .ss.shk-quebra, .shk-item .tt.shk-quebra{white-space:normal; display:block; -webkit-line-clamp:unset; overflow:visible}
.shk-item .rr{gap:4px}
.shk-fonte{font-size:12.5px; text-decoration:none}
.shk-cam{text-decoration:none; color:inherit}
.shk-cam:hover{background:var(--card-2)}
.shk-custo{margin-top:16px}
.shk-mais{display:none}
.shk-espera{display:flex; align-items:center; gap:14px; margin-top:18px}
.shk-roda{width:22px; height:22px; border-radius:50%; border:2.5px solid var(--accent-bg); border-top-color:var(--accent); animation:shk-gira 1s linear infinite; flex:none}
@keyframes shk-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .shk-roda{animation:none} }
@media (max-width:560px){ .shk-item{grid-template-columns:auto minmax(0,1fr)} .shk-item > .rr{grid-column:2; align-items:flex-start; flex-direction:row; flex-wrap:wrap; text-align:left} }
@media print{
  body.shk-imprime main > :not(.shk-folha){display:none !important}
  body.shk-imprime .shk-folha .tela-acoes{display:none !important}
  body.shk-imprime .lista, body.shk-imprime .card{box-shadow:none; border:1px solid #D2D2D7}
  body.shk-imprime .ln{break-inside:avoid}
  body.shk-imprime .shk-fonte::after{content:" " attr(href); font-size:10px; color:#6E6E73; word-break:break-all}
  body.shk-imprime .shk-roda, body.shk-imprime .shk-ver-todos{display:none}
  body.shk-imprime .shk-mais{display:block}
  body.shk-imprime .shk-mais .ln{border-top:1px solid var(--line-2)}
}

/* Sherlock · aviso de conectar o Claude (16/10/2026) */
.shk-conectar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.shk-conectar .nota{margin:2px 0 0}
.shk-falhou .nota{margin:4px 0 0}

/* Sherlock · só o que foi achado, os processos por dentro e o rodapé recolhido (16/10/2026, tarde; app/sherlock.js) */
.shk-trata{margin:0; font-size:15px; line-height:1.5}
.shk-importa{margin:0; font-size:14px; line-height:1.5; border-left:2px solid var(--accent); padding:2px 0 2px 12px}
.shk-importa b{display:block; font-size:12px; font-weight:600; color:var(--accent); margin-bottom:1px}
.shk-tempo{list-style:none; margin:2px 0 0; padding:0; border-top:1px solid var(--line-2)}
.shk-tempo li{display:grid; grid-template-columns:86px minmax(0,1fr) auto; gap:4px 12px; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--line-2); font-size:14px; line-height:1.45}
.shk-tempo time{color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums}
.shk-vazio{margin-top:18px}
.shk-vazio p{margin:0}
.shk-rodape{margin-top:clamp(30px,4vw,44px)}
.shk-rodape summary{font-weight:500; font-size:14px; color:var(--muted)}
.shk-rod{padding:0 16px 16px; border-top:1px solid var(--line-2)}
.shk-rod-t{margin:16px 4px 6px}
.shk-rod .lista{box-shadow:none; border:1px solid var(--line-2)}
@media (max-width:560px){
  .shk-tempo li{grid-template-columns:minmax(0,1fr) auto}
  .shk-tempo time{grid-column:1 / -1}
}
@media print{
  body.shk-imprime .shk-tempo li{break-inside:avoid; grid-template-columns:86px minmax(0,1fr)}
  body.shk-imprime .shk-tempo li > .shk-fonte{grid-column:2; min-width:0; overflow-wrap:anywhere}
}

/* Sherlock · o dossiê (16/10/2026, noite; app/sherlock.js): seções numeradas, fichas em duas colunas no desenho do painel do
   processo (rótulo cinza à esquerda, valor à direita), a tabela dos processos, a leitura estratégica, as fontes numeradas; e a
   folha do PDF (.shk-papel), clara, com a mesma hierarquia e muito respiro */
.shk-sec{margin-top:clamp(30px,4vw,44px)}
.shk-sec-h{display:flex; align-items:baseline; justify-content:space-between; gap:4px 14px; flex-wrap:wrap; margin:0 4px 12px}
.shk-sec-h h2{display:flex; align-items:baseline; gap:10px}
.shk-sec-n{font-size:14px; font-weight:600; color:var(--faint); font-variant-numeric:tabular-nums}
.shk-sec-h p{margin:0; color:var(--muted); font-size:13.5px}
.shk-ficha, .shk-itens, .shk-pagina, .shk-pagina-p, .shk-ponto, .shk-proc-f, .shk-fontes, .shk-tabela{background:var(--card); border-radius:18px; box-shadow:var(--shadow)}
.shk-ficha{padding:6px 24px}
.shk-dl{display:grid; grid-template-columns:minmax(120px,200px) minmax(0,1fr); margin:0; font-size:14.5px; line-height:1.45}
.shk-dl dt{color:var(--muted); padding:11px 12px 11px 0; border-top:1px solid var(--line-2)}
.shk-dl dd{margin:0; padding:11px 0; border-top:1px solid var(--line-2); min-width:0; overflow-wrap:anywhere}
.shk-dl dt:first-of-type, .shk-dl dt:first-of-type + dd{border-top:0}
.shk-nf{display:inline-block; min-width:16px; text-align:center; font-size:10.5px; font-weight:600; line-height:16px; color:var(--accent); background:var(--accent-bg); border-radius:6px; padding:0 4px; margin-left:6px; vertical-align:2px; text-decoration:none}
.shk-nf:hover{background:var(--accent); color:#fff}
.shk-alerta{color:var(--u4); font-weight:600}
.shk-ref-proc{white-space:normal; font-size:inherit; text-align:left; display:inline}
.shk-pagina{margin:0; padding:16px 24px 16px 42px; font-size:15.5px; line-height:1.5}
.shk-pagina li{padding:5px 0}
.shk-pagina li::marker{color:var(--faint)}
.shk-pagina-p{margin:0; padding:18px 24px; font-size:15.5px; line-height:1.55}
.shk-h3{font-size:15px; font-weight:600; letter-spacing:-.01em; margin:22px 4px 8px}
.shk-sec-h + .shk-h3{margin-top:4px}
.shk-itens{list-style:none; margin:0; padding:4px 24px}
.shk-itens li{padding:13px 0; border-top:1px solid var(--line-2); font-size:14.5px; line-height:1.45}
.shk-itens li:first-child{border-top:0}
.shk-itens li > b{font-weight:600}
.shk-itens li > span{display:block; font-size:13.5px; color:var(--muted); margin-top:3px}
.shk-itens li > p{margin:5px 0 0; font-size:14px; line-height:1.5; color:var(--ink-2)}
.shk-numeros{margin-bottom:14px}
.shk-tabela{padding:4px 0; overflow:hidden}
.shk-tr{display:grid; grid-template-columns:72px minmax(0,2.4fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr) 92px; gap:14px; align-items:baseline; width:100%; padding:11px 24px; border-top:1px solid var(--line-2); font-size:14px; text-align:left}
.shk-tr > span{min-width:0; overflow-wrap:anywhere}
.shk-th{border-top:0; font-size:12px; font-weight:500; color:var(--muted); padding-top:12px; padding-bottom:8px}
.shk-tabela > .shk-th + .shk-tr{border-top:1px solid var(--line)}
button.shk-tr:hover{background:var(--card-2)}
button.shk-tr:hover .shk-td-c{color:var(--accent)}
.shk-td-t{color:var(--muted); font-size:13px}
.shk-td-c{font-weight:500}
.shk-sec .shk-mais{display:none}
.shk-sec.shk-todos .shk-mais{display:block}
.shk-sec.shk-todos .shk-ver-todos{display:none}
.shk-ver-todos{padding:12px 4px 0}
.shk-proc-f{padding:24px 26px 20px; margin-top:16px}
.shk-pf-t{display:flex; align-items:baseline; gap:8px; width:100%; font-size:21px; font-weight:700; letter-spacing:-.018em; line-height:1.25; margin:0 0 10px; text-align:left}
.shk-pf-t span{color:var(--faint); font-weight:400}
button.shk-pf-t:hover{color:var(--accent)}
.shk-vs{display:flex; flex-wrap:wrap; gap:8px 22px}
.shk-v{display:flex; flex-direction:column}
.shk-v span{font-size:12px; color:var(--muted)}
.shk-v b{font-weight:600; font-variant-numeric:tabular-nums}
.shk-h4{font-size:12.5px; font-weight:600; color:var(--muted); margin:20px 0 6px}
.shk-proc-f .shk-trata{font-size:15px; line-height:1.55}
.shk-proc-f .shk-importa{margin-top:12px}
.shk-ponto{padding:2px 24px 18px; margin-top:12px}
.shk-ponto .shk-h3{margin:16px 0 6px}
.shk-ponto p{margin:0; font-size:15px; line-height:1.55}
.shk-ponto .shk-apoio{margin-top:10px; font-size:13px; color:var(--muted); line-height:1.5}
.shk-fontes{margin:0; padding:14px 24px 14px 48px; font-size:13.5px; line-height:1.45}
.shk-fontes li{padding:5px 0; overflow-wrap:anywhere}
.shk-fontes li::marker{color:var(--muted); font-variant-numeric:tabular-nums}
.shk-fontes li > span{color:var(--ink-2); margin-right:8px}
.shk-fontes a{text-decoration:none; color:var(--accent)}
.shk-chips{align-self:flex-start; margin-top:2px}
@media (max-width:560px){
  .shk-ficha, .shk-itens, .shk-ponto, .shk-fontes{padding-left:18px; padding-right:18px}
  .shk-fontes{padding-left:38px}
  .shk-pagina{padding:14px 18px 14px 34px}
  .shk-proc-f{padding:20px 18px 16px}
  .shk-pf-t{font-size:19px}
  .shk-dl{grid-template-columns:1fr}
  .shk-dl dt{padding:10px 0 0; font-size:12.5px}
  .shk-dl dd{border-top:0; padding:2px 0 10px}
  .shk-dl dt:first-of-type{padding-top:8px}
  .shk-tr.shk-th{display:none}
  .shk-tr{display:flex; flex-wrap:wrap; gap:2px 10px; padding:11px 18px; font-size:13px; color:var(--muted)}
  .shk-tr > .shk-td-c{order:-1; flex-basis:100%; font-size:14.5px; color:var(--ink)}
  .shk-tr > span:empty{display:none}
  .shk-tabela > .shk-th + .shk-tr{border-top:0}
}
/* a folha do PDF: papel claro, a mesma tipografia do painel, fios finos no lugar das caixas */
.shk-papel{color:#1D1D1F; font-size:10.5pt; line-height:1.5; --muted:#6E6E73; --faint:#A1A1A6; --ink-2:#424245; --accent:#0066CC; --line-2:#E8E8ED; --line:#D2D2D7}
.shk-papel a{color:#0066CC; text-decoration:none}
.shk-papel .shk-p-cab{padding:0 0 16pt; border-bottom:1.25pt solid #1D1D1F}
.shk-papel .shk-p-k{margin:0 0 8pt; font-size:8.5pt; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#6E6E73}
.shk-papel h1{font-size:25pt; line-height:1.12; letter-spacing:-.02em; margin:0}
.shk-papel .shk-p-sub{margin:8pt 0 0; font-size:10.5pt; color:#424245}
.shk-papel .shk-p-sub span{color:#A1A1A6}
.shk-papel .shk-sec{margin-top:24pt}
.shk-papel .shk-sec-h{margin:0 0 6pt; padding-bottom:6pt; border-bottom:.6pt solid #D2D2D7; break-after:avoid}
.shk-papel .shk-sec-h h2{font-size:15.5pt; gap:9pt}
.shk-papel .shk-sec-n{font-size:11pt; color:#A1A1A6}
.shk-papel .shk-sec-h p{font-size:9pt}
.shk-papel .shk-ficha, .shk-papel .shk-itens, .shk-papel .shk-pagina, .shk-papel .shk-pagina-p, .shk-papel .shk-ponto, .shk-papel .shk-proc-f, .shk-papel .shk-fontes, .shk-papel .shk-tabela{background:none; box-shadow:none; border-radius:0}
.shk-papel .shk-ficha, .shk-papel .shk-itens, .shk-papel .shk-ponto{padding-left:0; padding-right:0}
.shk-papel .shk-dl{grid-template-columns:30% 70%; font-size:10.5pt}
.shk-papel .shk-dl dt, .shk-papel .shk-dl dd{padding:5.5pt 0; border-top:.5pt solid #E8E8ED; break-inside:avoid}
.shk-papel .shk-dl dt{padding-right:10pt}
.shk-papel .shk-dl dt:first-of-type, .shk-papel .shk-dl dt:first-of-type + dd{border-top:0}
.shk-papel .shk-nf{background:none; color:#0066CC; padding:0; margin-left:2pt; min-width:0; font-size:7.5pt; line-height:1; vertical-align:super}
.shk-papel .shk-pagina{padding:4pt 0 0 16pt; font-size:11pt}
.shk-papel .shk-pagina li{padding:2.5pt 0}
.shk-papel .shk-pagina-p{padding:4pt 0 0; font-size:11pt}
.shk-papel .shk-h3{font-size:11pt; margin:14pt 0 2pt}
.shk-papel .shk-itens li{padding:6pt 0; font-size:10.5pt; break-inside:avoid}
.shk-papel .shk-itens li > span, .shk-papel .shk-itens li > p{font-size:9.5pt}
.shk-papel table.shk-tab{width:100%; border-collapse:collapse; font-size:9pt; line-height:1.35; margin-top:6pt}
.shk-papel .shk-tab th{text-align:left; font-weight:600; color:#6E6E73; font-size:8pt; padding:0 8pt 4pt 0; border-bottom:.75pt solid #1D1D1F}
.shk-papel .shk-tab td{padding:4.5pt 8pt 4.5pt 0; border-bottom:.5pt solid #E8E8ED; vertical-align:top}
.shk-papel .shk-tab td small{display:block; color:#6E6E73; font-size:7.5pt; margin-top:1pt}
.shk-papel .shk-tab tr{break-inside:avoid}
.shk-papel .shk-proc-f{padding:14pt 0 0; margin-top:18pt; border-top:.6pt solid #D2D2D7; break-inside:auto}
.shk-papel .shk-pf-t{font-size:14.5pt; margin:0 0 6pt; break-after:avoid}
.shk-papel .shk-v span{font-size:8pt}
.shk-papel .shk-h4{font-size:9pt; margin:12pt 0 3pt; break-after:avoid}
.shk-papel .shk-proc-f .shk-trata{font-size:10.5pt}
.shk-papel .shk-importa{font-size:10pt}
.shk-papel .shk-tempo li{grid-template-columns:58pt minmax(0,1fr) auto; font-size:9.5pt; padding:4pt 0; gap:2pt 10pt}
.shk-papel .shk-tempo time{font-size:9pt}
.shk-papel .shk-ponto{margin-top:4pt; padding-bottom:6pt; break-inside:avoid}
.shk-papel .shk-ponto p{font-size:10.5pt}
.shk-papel .shk-ponto .shk-apoio{font-size:9pt; margin-top:4pt}
.shk-papel .shk-fontes{padding:4pt 0 0 20pt; font-size:8.5pt}
.shk-papel .shk-fontes li{padding:2.5pt 0; break-inside:avoid}
.shk-papel .shk-fontes a{word-break:break-all}
.shk-papel .shk-nota{font-size:9pt; color:#6E6E73; margin:6pt 0 0}
.shk-papel .shk-nota-fim{margin-top:22pt; padding-top:6pt; border-top:.5pt solid #E8E8ED; font-size:8pt}
.shk-papel .sec-t{color:#6E6E73}
@media print{
  body.shk-imprime .shk-papel .shk-fonte::after{content:none}
  body.shk-imprime .shk-papel .shk-tempo li{grid-template-columns:58pt minmax(0,1fr) auto}
  body.shk-imprime .shk-papel .shk-tempo li > .shk-fonte{grid-column:auto}
}

/* Escritório por função · o Panorama, a bolinha de quem cuida e a linha do escritório inteiro (16/10/2026, tarde; app/escfuncao.js) */
.ef-pano .kicker{margin:0 4px 6px}
.ef-pano .quadros-m{margin-top:0}
.ef-dono{display:inline-flex; align-items:center; gap:0; margin-left:2px; align-self:center; flex:none}
.ef-dono .av{width:16px; height:16px; font-size:7px; letter-spacing:0}
.ef-dono .av + .av{margin-left:-4px; box-shadow:0 0 0 1.5px var(--bg)}
.qd .rot .ef-dono{margin-left:6px; vertical-align:middle}
.ef-inteiro{font-size:13px; color:var(--muted); margin:0 0 10px; display:flex; gap:6px; align-items:baseline; flex-wrap:wrap}
.ef-inteiro .acao{font-size:13px}

/* A mesa do Gabriel com as funções dele e a produção comercial (16/10/2026, tarde; app/prodcom.js) */
.tc-cards .dm{gap:8px; border-left:3px solid var(--g)}
.tc-cards .dm .as{font-size:15px}
.tc-r{font-size:13px; line-height:1.45; color:var(--ink-2, var(--ink)); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.tc-f{display:flex; flex-wrap:wrap; gap:5px; min-width:0}
.tc-f i{font-style:normal; font-size:11.5px; color:var(--muted); background:var(--preench, rgba(118,118,128,.12)); border-radius:10px; padding:2px 8px}
.tc-cards .dm .pe .dt-n{font-size:13px}
.pc-q{margin-top:0}
.pc-selo{position:absolute; left:10px; bottom:6px; font:inherit; font-size:11px; line-height:1; color:var(--muted); background:var(--card); border:0; border-radius:999px;
  padding:4px 8px; box-shadow:inset 0 0 0 1px var(--line); cursor:pointer; white-space:nowrap; z-index:2}
.pc-selo:hover{color:var(--accent)}
.pc-resumo{margin:14px 0 4px; padding:14px 16px; border-radius:14px; background:var(--card-2, var(--preench))}
.pc-resumo h3, .pc-h3{font-size:13px; color:var(--muted); font-weight:600; margin:0 0 8px; letter-spacing:.01em}
.pc-h3{margin:18px 4px 8px}
.pc-resumo p{margin:0 0 8px; font-size:14px; line-height:1.5}
.pc-resumo p.pc-sub{font-weight:600; margin:12px 0 4px}
.pc-resumo p:first-of-type.pc-sub{margin-top:0}
.pc-resumo ul{margin:0; padding-left:18px; font-size:14px; line-height:1.5}
.pc-resumo li{margin:0 0 6px}

/* As ideias da Milena (16/10/2026; app/acompanha.js): a linha com botão nas listas de Parados e Sem conferir, o resumo do processo,
   as medidas já tentadas, o visto e o ciente do comentário, os avisos de trás para frente pelo fatal e o fatal da demanda em espera */
.acp-ln{display:flex; align-items:center; gap:8px}
.acp-ln > .ln{flex:1; min-width:0}
.acp-bts{display:flex; gap:6px; flex:none; align-items:center}
.acp-kick{margin:14px 6px 6px}
.lista > .acp-kick:first-child{margin-top:2px}
.acp-discreto{font-size:12.5px; color:var(--muted)}
.acp-discreto:hover{color:var(--accent)}
.acp-prop{color:var(--ink-2, var(--ink))}
.acp-res-tx{font-size:14px; line-height:1.5; white-space:normal; overflow-wrap:anywhere}
.acp-res-pe{margin:8px 0 0; font-size:12.5px; color:var(--muted)}
.acp-res-pe .acao{font-size:12.5px}
.acp-resumo textarea{width:100%; min-height:110px; resize:vertical}
.acp-resumo .escreve{display:grid; gap:8px}
.acp-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.acp-chips .chip{font-size:12.5px}
.acp-visto{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; font-size:12px; color:var(--muted)}
.acp-visto .btn.mini{padding:2px 10px; font-size:12px}
.acp-visto .acao{font-size:12px}
.acp-avs{display:inline-flex; vertical-align:middle; margin-left:2px}
.acp-avs .av.env{width:16px; height:16px; font-size:7px; box-shadow:0 0 0 1.5px var(--card-2)}
.acp-avs .av.env + .av.env{margin-left:-4px}
.acp-sep{color:var(--faint)}
.acp-ci{color:var(--u0)}
.acp-av{display:block; margin-top:3px; font-size:12.5px; color:var(--u3)}
.acp-av.mau{color:var(--u4)}
.acp-fatal{display:block; margin-top:3px; font-size:12.5px; color:var(--muted)}
.acp-fatal.perto{color:var(--u3)}
@media (max-width:560px){ .acp-ln{flex-direction:column; align-items:stretch; gap:0} .acp-bts{margin:-4px 0 10px 34px; flex-wrap:wrap} }

/* Minhas configurações e a agenda por pessoa (16/10/2026; app/config.js): as seções recolhidas, a linha de cada escolha (o nome à
   esquerda, a escolha à direita; no celular, uma embaixo da outra), o aviso discreto da primeira entrada, o menu da bolinha e a
   linha "Na sua agenda" do painel do item */
.cfg-intro{margin:-6px 0 14px; color:var(--muted); font-size:14px}
.cfg-sec .cfg-corpo{border-top:1px solid var(--line-2); padding:12px 20px 16px}
.cfg-nota{margin:0 0 10px; font-size:13px; color:var(--muted); line-height:1.45}
.cfg-situ{color:var(--ink-2)}
.cfg-linha{display:flex; align-items:center; gap:16px; padding:10px 0; border-top:1px solid var(--line-2)}
.cfg-tipos .cfg-linha:first-child{border-top:0}
.cfg-rot{flex:1; min-width:0}
.cfg-rot b{font-weight:600; font-size:14px}
.cfg-rot small{display:block; font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.4}
.cfg-ctrl{flex:none; display:flex; align-items:center; gap:8px; max-width:62%}
.cfg-seg{flex-wrap:nowrap}
.cfg-seg button{white-space:nowrap}
.cfg-falta{display:inline-block; margin-left:8px; font-size:11.5px; font-weight:500; color:var(--u3); vertical-align:1px}
.cfg-ctrl input, .cfg-ctrl select{padding:7px 10px; border:1px solid var(--line); border-radius:10px; background:var(--card); min-width:0; font-size:14px}
.cfg-email input{width:260px; max-width:100%}
.cfg-pe{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line-2); font-size:13px; color:var(--muted)}
.cfg-erro{color:var(--u4)}
.cfg-so{margin-top:4px}
.cfg-sec .bloco{margin-top:12px}
.cfg-pergunta{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; background:var(--card-2); color:var(--ink-2); font-size:13px; padding:7px 14px; border-bottom:1px solid var(--line-2)}
.cfg-pergunta .acao{font-size:13px}
.cfg-menu{position:fixed; z-index:45; min-width:230px; background:var(--card); border-radius:14px; box-shadow:var(--shadow-up); padding:6px; display:flex; flex-direction:column}
.cfg-menu-quem{display:flex; align-items:center; gap:10px; padding:8px 12px 10px; border-bottom:1px solid var(--line-2); margin-bottom:4px}
.cfg-menu-quem small{display:block; font-size:12px; color:var(--muted)}
.cfg-menu button{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; font-size:14px; color:var(--ink); text-align:left}
.cfg-menu button svg{width:18px; height:18px; color:var(--ink-2)}
.cfg-menu button:hover, .cfg-menu button:focus-visible{background:var(--card-2); outline:none}
.cfg-item{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin:10px 0 2px; font-size:13px}
.cfg-item-rot{color:var(--muted); min-width:110px}
.cfg-item-tx{flex:1; min-width:0; color:var(--ink-2)}
@media (max-width:700px){
  .cfg-linha{flex-direction:column; align-items:stretch; gap:8px}
  .cfg-ctrl{max-width:none}
  .cfg-seg{flex-wrap:wrap; flex:1}
  .cfg-seg button{white-space:normal}
  .cfg-email .cfg-ctrl input{flex:1; width:auto}
  .cfg-sec .cfg-corpo{padding:10px 14px 14px}
}

/* ================= Sua semana (16/10/2026, noite; app/semana.js): ler melhor, criar no dia e arrastar para os próximos dias =================
   O nome em até 2 linhas, sem quebrar a palavra (o resto ao passar o mouse), e o cliente em letra menor; no mês, uma linha só.
   O "+" do dia aparece ao passar o mouse (no celular, sempre). Ao arrastar, o dia que passou esmaece e a seta › recebe. */
.it.sm .sm-tx{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.semana.sm-sem .it.sm .nm{white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:clip; overflow-wrap:break-word; line-height:1.32;
  /* a semana na janela estreita: a palavra que não cabe na coluna partia sem hífen ("Manifestaçã / o"); agora parte com hífen, pela
   regra do português */
  hyphens:auto; -webkit-hyphens:auto; hyphenate-limit-chars:12 5 5}
.it.sm .sm-cli{font-size:11px; line-height:1.3; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.semana.sm-sem .it.sm{padding-top:6px; padding-bottom:6px}
.semana.sm-sem .it.sm .sm-fatal, .semana.sm-sem .it.sm .sm-novo{margin-top:5px}
.mes-mesa .it.sm .sm-cli{display:none}
/* o cabeçalho do dia e o "+" */
.sm-cab{display:flex; align-items:center; min-width:0}
.sm-cab > .dia-h{flex:1; min-width:0}
.sm-cria{flex:none; width:0; height:22px; margin-left:0; border-radius:50%; display:grid; place-items:center; color:var(--accent); opacity:0; overflow:hidden; transition:width .15s, opacity .15s, margin .15s, background .15s}
.sm-cria svg{width:13px; height:13px}
.dia:hover .sm-cria, .sm-cria:focus-visible{width:22px; margin-left:4px; opacity:1}
.sm-cria:hover{background:color-mix(in srgb, var(--accent) 12%, transparent)}
.semana.arrastando .sm-cria{display:none}
@media (hover:none){ .sm-cria{width:22px; margin-left:4px; opacity:.8} }
/* com os dias da próxima semana: o que passou fica compacto (itens numa linha, sem o cliente), a largura vai para hoje e o que vem */
@media (min-width:700px){
  .semana.sm-sem.sm-longa{gap:6px}
  .semana.sm-sem.sm-longa .dia{padding-left:6px; padding-right:6px}
  .semana.sm-sem.sm-longa .dia.passou:not(.hoje) .it.sm{align-items:center; min-height:25px; padding-top:4px; padding-bottom:4px}
  .semana.sm-sem.sm-longa .dia.passou:not(.hoje) .it.sm .nm{display:block; white-space:nowrap; text-overflow:ellipsis}
  .semana.sm-sem.sm-longa .dia.passou:not(.hoje) .it.sm .sm-cli{display:none}
  .semana.sm-sem.sm-longa .dia.passou:not(.hoje) .it.sm .sm-fatal{margin-top:0}
}
.semana.sm-sem .dia.passou .dia-h{flex-wrap:wrap; column-gap:4px}
/* os dias da próxima semana, depois da sexta: um fio fino separa */
.semana.sm-sem .dia.sm-prox{position:relative}
.semana.sm-sem .dia.sm-prox::before{content:""; position:absolute; left:-4px; top:12px; bottom:12px; width:1.5px; border-radius:1px; background:var(--line)}
/* arrastando: o dia que passou não recebe (o aviso explica ao soltar); a seta "Próxima semana" leva para o mesmo dia da seguinte */
.semana.arrastando .dia[data-passou]:not(.hoje){opacity:.55}
.sem-mesa:has(.semana.sm-sem.arrastando) .seta-mes[data-sm-anda="1"]{color:var(--accent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent)}
.sem-mesa .seta-mes.alvo{color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); box-shadow:inset 0 0 0 2px var(--accent)}
/* tablet: com os dias da próxima semana, a grade passa a duas linhas, e o dia que passou vazio sai (como no celular) */
@media (min-width:700px) and (max-width:1100px){
  .semana.sm-sem.sm-longa{grid-template-columns:repeat(auto-fill, minmax(128px, 1fr))}
  .semana.sm-sem.sm-longa .dia.passou.sem-itens{display:none}
  .semana.sm-sem.sm-longa .dia.sm-prox::before{display:none}
}
@media (max-width:699px){
  .sm-cria{width:22px; margin-left:4px; opacity:.8}
  .semana.sm-sem .dia.sem-itens .sm-cab{display:contents}
  .semana.sm-sem .dia.sem-itens .sm-cria{order:9; align-self:center}
  .semana.sm-sem .dia.sm-prox::before{left:12px; right:12px; top:-5px; bottom:auto; width:auto; height:1.5px}
  .semana.sm-sem .it.sm .sm-cli{font-size:12px}
}
/* no celular, o Mais (…) agora mais comprido: o menu encosta na direita da barra, inteiro na tela (a regra antiga de 520 px perdia
   para a .menu-nav declarada depois e o menu saía pela esquerda) */
@media (max-width:520px){ .nav .menu-nav{position:fixed; top:58px; right:12px; left:auto; max-width:calc(100vw - 24px)} }
/* 16/10/2026, noite · a planta de quem não é sócio (app/planta.js, plantaPessoa): as salas ligadas ao trabalho da pessoa vivas;
   as outras, trancadas: a mesma sala, apagada, com um cadeado de traço fino, sem número, sem selo, sem abrir nada */
.sala[data-lugar="comercial"]{grid-column:1/4; grid-row:1}
.sala[data-lugar="gestao"]{grid-column:4/7; grid-row:1}
.sala[data-lugar="financeiro"]{grid-column:7/10; grid-row:1}
.sala[data-lugar="arquivo"]{grid-column:10/13; grid-row:1}
.sala[data-lugar="caio"]{grid-column:1/4; grid-row:3}
.sala[data-lugar="leandro"]{grid-column:4/8; grid-row:3}
.sala[data-lugar="nucleo"]{grid-column:8/13; grid-row:3}
.sala.trancada{cursor:default; background:color-mix(in srgb, var(--room) 52%, var(--floor)); box-shadow:0 0 0 1px var(--line-2)}
.sala.trancada:hover{transform:none; box-shadow:0 0 0 1px var(--line-2)}
.sala.trancada .sala-n{color:var(--muted); font-weight:500}
.sala.trancada .sala-c{opacity:.42; filter:saturate(.35)}
.sala.trancada .janela{opacity:.35}
.sala.trancada .cadeado{width:14px; height:14px; flex:none; fill:none; stroke:var(--faint); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; margin-right:2px}
.mesa.outra{cursor:default}
.mesa.outra:hover{background:none}
.planta.pessoal .mesa.sua .nm{color:var(--accent)}
/* no alto da mesa, um pouco mais baixa que a do Escritório: é a moldura, a mesa vem logo abaixo */
.planta.na-mesa .sala{min-height:clamp(150px,17cqw,205px)}
/* estreita: as salas da pessoa primeiro; as trancadas no fim, compactas (só quem senta ali), duas por linha também no celular */
@container (max-width:760px){
  /* duas por linha; a última de um grupo ímpar (vivas, trancadas) ocupa a linha inteira, para não sobrar buraco */
  .planta.pessoal .planta-g > .sala[data-sala], .planta.pessoal .planta-g > .sala[data-lugar]{grid-column:auto!important}
  .planta.pessoal .planta-g > .sala.linha-toda{grid-column:1/-1!important}
  .planta.pessoal .planta-g > .sala.trancada{order:2; min-height:0}
  .planta.pessoal .sala.trancada .sala-c{padding:2px 8px 12px; gap:2px 12px}
  .planta.pessoal .sala.trancada .tampo, .planta.pessoal .sala.trancada .est{display:none}
  .planta.pessoal .sala.trancada .pessoa{margin-top:0}
  .planta.pessoal .sala.trancada .pessoa .av{width:26px; height:26px; font-size:11px}
  .planta.pessoal .sala.trancada .mesa .nm{font-size:12px; margin-top:2px}
}
@container (max-width:440px){
  .planta.pessoal .planta-g{grid-template-columns:1fr 1fr; gap:8px}
  .planta.pessoal .planta-g > .sala.viva{grid-column:auto!important; min-height:0}
}

/* ---------- ícones no padrão Apple (16/10/2026, noite): o tema passa do caractere ◐ ao desenho, no tamanho da lupa e do sino ---------- */
.lado .tema svg{width:18px; height:18px}

/* ---------- as metas da revisão e da correção (16/10/2026, noite; app/metarev.js): em O que os sócios definem ---------- */
.mrev-nota{margin-top:18px}
.mrev-nota [data-explica]{border-bottom:1px dotted var(--line); cursor:help}

/* ---------- vistoria da mesa (16/10/2026, noite): o celular ---------- */
/* os cartões de demanda ("Com você") passavam da tela: a linha das atividades, sem quebra, alargava a coluna */
.dems{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
@media (max-width:560px){
  /* "Hoje pede atenção": o texto ficava com uma palavra ao lado dos botões; os botões descem para a linha de baixo, à direita */
  .alerta{flex-wrap:wrap; row-gap:8px}
  .alerta .tx{flex:1 1 calc(100% - 44px)}
  .alerta .tx + *{margin-left:auto}
  .alerta .ss{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
  /* "Quem está usando?": as sete pessoas cabem na tela do celular, sem rolar a janela */
  .escolha{gap:8px; margin-top:12px}
  .escolha button{padding:10px 6px; gap:5px}
  .escolha .av{width:44px; height:44px; font-size:16px}
}
/* a planta do Escritório no celular: duas salas por linha, mais baixas (eram 7 salas uma embaixo da outra, cerca de 1.350 px
   antes dos números); só o Núcleo técnico ocupa a linha inteira, como na janela estreita. A planta da equipe tem a regra dela. */
@container (max-width:440px){
  .planta:not(.pessoal) .planta-g{grid-template-columns:1fr 1fr; gap:8px}
  .planta:not(.pessoal) .sala{min-height:0}
  .planta:not(.pessoal) .sala-h{flex-wrap:wrap; row-gap:4px; padding:10px 10px 0}
  .planta:not(.pessoal) .sala-h .pill{font-size:11.5px}
  .planta:not(.pessoal) .sala-c{padding:4px 4px 12px}
  .planta:not(.pessoal) .estante{width:92%}
  .planta:not(.pessoal) .sala:has(.pc-selo) .sala-c{padding-bottom:28px}   /* o selo "N em outubro" fica no pé da sala */
}
   /* só a palavra longa, que de outro jeito partiria sem hífen */
/* busca geral: "e mais N" abre a lista inteira do grupo */
button.busca-mais{display:block; text-align:left; cursor:pointer}
button.busca-mais:hover, button.busca-mais:focus-visible{color:var(--accent)}
/* 16/10/2026 (vistoria · Equipe e Sherlock): as sugestões do "Ligar a" do Sherlock (no máximo 6) abrem inteiras, sem barra própria */
.shk-busca-liga .sugestoes{max-height:none; overflow:visible}

/* ---------- ajustes da mesa (17/10/2026) ---------- */
/* o quadro grande zerado desce para a faixa menor (quadrosPrincipais, app/ui.js): os que ficam guardam as colunas de antes, sem esticar */
.qds .quadros[data-desceu]{grid-template-columns:repeat(var(--qn),minmax(0,1fr))}
@container (max-width:660px){ .qds .quadros[data-desceu]{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* a sala no alto da mesa dos sócios, mais baixa (era cerca de 370 px): a altura e os móveis da planta da equipe no alto da mesa */
.planta.hero .sala{min-height:clamp(150px,17cqw,205px)}
.planta.hero .tampo{width:clamp(72px,9cqw,120px); height:clamp(38px,4.6cqw,60px)}
.planta.hero .pessoa .av{width:clamp(30px,3.4cqw,42px); height:clamp(30px,3.4cqw,42px); font-size:13px}
/* a planta de quem não é sócio, no celular: só as salas vivas, numa faixa baixa com o nome e o selo; as trancadas somem */
@container (max-width:440px){
  .planta.pessoal .planta-g > .sala.trancada{display:none}
  .planta.pessoal .planta-g > .sala.viva.linha-toda{grid-column:1/-1!important}
  .planta.pessoal .sala.viva .sala-c, .planta.pessoal .sala.viva .janela{display:none}
  .planta.pessoal .sala.viva .sala-h{flex-wrap:wrap; row-gap:4px; padding:10px 12px}
  .planta.pessoal .sala.viva .sala-h .pill{font-size:11.5px}
}

/* ---------- ajustes de clientes, equipe e sócios (17/10/2026) ---------- */
/* Equipe e apurações › Sócios: um quadro só, com o valor de cada sócio em colunas (blocoSociosJuntos, app/equipe.js) */
.soc1{padding:14px 2px 10px}
.soc1 .lista{box-shadow:none; padding:0}
.soc1 .soc1-cab{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; padding:0 14px 8px}
.soc1 .soc1-vs{display:grid; grid-template-columns:repeat(3, 112px); column-gap:8px; align-items:start}
.soc1 .soc1-p{display:flex; align-items:center; justify-content:flex-end; gap:6px; font-size:14px; border-radius:10px; padding:2px 4px; margin:-2px -4px; min-width:0}
.soc1 .soc1-p b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.soc1 .soc1-p:hover{background:var(--card-2)}
.soc1 .soc1-ln{grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:10px; padding:9px 14px}
.soc1 .soc1-ln .dot{margin-top:6px}
.soc1 .soc1-v{text-align:right; font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap}
.soc1 .soc1-tot{border-top:1px solid var(--line)!important; align-items:center}
.soc1 .soc1-tot > span:first-child{width:9px}
.soc1 .soc1-tot .tt{font-weight:600}
.soc1 .soc1-tot .apur-tot{margin:-2px -6px -2px 0}
.soc1 .soc1-pe{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 18px; margin:10px 14px 2px}
.soc1 .soc1-pg{display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap}
.soc1 .soc1-pn{font-size:13px; font-weight:500}
/* no celular, os valores descem para baixo da linha, nas mesmas três colunas do alto (a bolinha e o nome de cada sócio) */
@media (max-width:640px){
  .soc1 .soc1-cab{grid-template-columns:minmax(0,1fr); padding:0 14px 8px 33px}
  .soc1 .soc1-cab > span:first-child{display:none}
  .soc1 .soc1-vs{grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:6px}
  .soc1 .soc1-p{font-size:13px; gap:4px}
  .soc1 .soc1-p .av{width:20px; height:20px; font-size:9px}
  .soc1 .soc1-ln{grid-template-columns:auto minmax(0,1fr)}
  .soc1 .soc1-ln > .soc1-vs{grid-column:2/-1; margin-top:2px}
  .soc1 .soc1-v, .soc1 .soc1-v b{font-size:13px}
  .soc1 .soc1-pe{justify-content:flex-start}
}
/* Minhas configurações › O que os sócios definem: os três blocos do perfil (quem é, trabalho, o que pode) */
.cfg-grupo{margin:14px 0 2px; font-size:12.5px; font-weight:600; color:var(--muted)}

/* 17/10/2026 · login pelo e-mail: Minha conta › Acesso da equipe (app/acesso.js) — o aviso do envio não autorizado, o "Enviar a todos" e o e-mail inteiro no celular */
.acs-envio{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:4px 0 10px}
.acs-envio .nota{flex:1 1 260px; margin:0}
.acs-todos{display:flex; justify-content:flex-end; margin-top:10px}
#acs-lista .ss{white-space:normal; overflow-wrap:anywhere}

/* 17/10/2026 · documentos reservados (app/documentos.js): a marca discreta na linha e o "Quem vê" do sócio na janela do documento */
.doc-sig{color:var(--muted); font-weight:500; border-bottom:1px dotted currentColor; cursor:help}
.doc-sig-quem{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 12px}
.doc-sig-quem .sec-t{color:var(--muted); font-size:12.5px}
.doc-sig-nota{margin:0 0 12px}

/* 17/10/2026 · o autenticador e a sessão do dia todo: Minha conta › Aparelhos conectados e o "Zerar o autenticador" (app/acesso.js) */
.ln.acs-ap{grid-template-columns:minmax(0,1fr) auto}
.ln.acs-ap > .rr{grid-column:auto; align-items:flex-end}
.ln.acs-ap .ss{white-space:normal; overflow-wrap:anywhere}
.acs-este{display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; background:var(--accent-bg); color:var(--accent); font-size:11.5px; font-weight:600; vertical-align:1px}
#acs-lista .rr{flex-direction:row; flex-wrap:wrap; justify-content:flex-end; gap:6px}
@container (max-width:480px){ #acs-lista .rr{justify-content:flex-start} }