/* BAO LAB App — tons acolhedores, sem branco puro, sem modo escuro (decisão 18/08/2026) */
:root{
  color-scheme: light;   /* sem isso, o iPhone no modo escuro pinta os campos nativos de preto */
  --ground:#efe8dc; --panel:#faf5ec; --panel-2:#f2ebde; --panel-3:#e8dfcf;
  --ink:#3b3730; --ink-2:#6f685d; --ink-3:#a49b8c; --line:#e2d9c8;
  --slate:#4a6474; --slate-soft:#e6eef1; --slate-line:#bcd0d8;
  --mint:#2e7a5b; --mint-soft:#e4f3ea; --mint-line:#a9d8bf;
  --butter:#8a6f2b; --butter-soft:#f8eed6; --butter-line:#e6d09b;
  --rose:#a35f74; --rose-soft:#f9e8ea; --rose-line:#eec3c9;
  --sombra:0 1px 2px rgba(70,58,40,.05), 0 10px 30px rgba(70,58,40,.06);
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3{margin:0;line-height:1.15;text-wrap:balance}
p{margin:0}
button{font:inherit}

/* ---------- entrada ---------- */
.entrada{min-height:100vh;display:grid;place-items:center;padding:24px}
.entrada-caixa{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;max-width:320px}
.marca-grande{width:140px;height:auto}
.traco{fill:none;stroke:var(--ink);stroke-width:9;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000;animation:tracar 2.4s ease-in-out forwards}
.cheio{fill:var(--ink);opacity:0;animation:preencher 2.4s ease-in-out forwards}
@keyframes tracar{0%{stroke-dashoffset:1000}72%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes preencher{0%,62%{opacity:0}92%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.traco{animation:none;opacity:0}.cheio{animation:none;opacity:1}}
.entrada h1{font-size:1.15rem;font-weight:700;letter-spacing:.02em;margin-top:8px}
.entrada .txt{font-size:.85rem;color:var(--ink-3);margin-bottom:12px}
.quem-botoes{display:flex;gap:10px}
[hidden]{display:none !important}
.campo-senha{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:4px}
.campo-senha input{
  font:inherit;font-size:1rem;text-align:center;padding:11px;border-radius:11px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);
}
.campo-senha input:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
.erro{color:var(--rose);font-size:.85rem;text-align:center;min-height:1.2em}

/* ---------- moldura ---------- */
.app{max-width:1120px;margin:0 auto;padding:18px 16px 60px;display:none;flex-direction:column;gap:16px}
.app[data-on="1"]{display:flex}
.topo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.topo .marca{width:30px;height:auto;flex:none}
.topo b{font-size:.98rem;font-weight:700;letter-spacing:-.01em}
.topo .quem{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--ink-2)}
.av{width:28px;height:28px;border-radius:99px;background:var(--mint-soft);color:var(--mint);display:grid;place-items:center;font-weight:700;font-size:.78rem}
.sair{all:unset;cursor:pointer;font-size:.78rem;color:var(--ink-3);text-decoration:underline}
.sair:focus-visible{outline:2px solid var(--slate);outline-offset:2px}

nav.abas{display:flex;gap:4px;overflow-x:auto;padding-bottom:2px}
nav.abas button{
  all:unset;box-sizing:border-box;cursor:pointer;white-space:nowrap;
  padding:8px 13px;border-radius:9px;font-size:.89rem;color:var(--ink-2);
}
nav.abas button:hover{background:var(--panel-2)}
nav.abas button[aria-current="true"]{background:var(--panel);color:var(--ink);font-weight:600;box-shadow:var(--sombra)}
nav.abas button:focus-visible{outline:2px solid var(--slate);outline-offset:1px}

.bloco{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.cap{font-family:var(--mono);font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.bloco-head{display:flex;justify-content:space-between;align-items:center;gap:10px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 14px;display:flex;flex-direction:column;gap:2px}
.kpi .l{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.kpi .v{font-size:1.7rem;font-weight:680;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi .s{font-size:.8rem;color:var(--ink-2)}
.kpi.slate{background:var(--slate-soft);border-color:var(--slate-line)}
.kpi.mint{background:var(--mint-soft);border-color:var(--mint-line)}
.kpi.butter{background:var(--butter-soft);border-color:var(--butter-line)}


/* ================= BANCADA — o painel como uma superfície só =================
   Nada de cartões soltos: um bloco grande com fios de separação por dentro,
   os pedaços encaixados em bento, e o filamento correndo por cima do funil. */
.bancada{
  background:var(--panel-2);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--sombra);padding:9px;
  display:grid;grid-template-columns:1.35fr 1fr;gap:9px;
}
/* cada peça é demarcada — fundo mais claro e canto próprio — mas todas moram
   dentro da mesma bandeja, encaixadas. Não é cartão solto nem quadradão único. */
.bancada > *{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.faixa{grid-column:1/-1;display:flex;flex-direction:column;gap:14px}
.rodape-bancada{grid-column:1/-1;background:transparent;border:none;padding:2px 8px 4px;
  display:flex;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.68rem;color:var(--ink-3)}
.rodape-bancada b{color:var(--ink-2);font-weight:600}
@media(max-width:780px){ .bancada{grid-template-columns:1fr} }

/* herói: o número que manda na tela */
.heroi{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.heroi .num{font-size:3.1rem;font-weight:720;letter-spacing:-.045em;line-height:.95;font-variant-numeric:tabular-nums}
.heroi .txt{display:flex;flex-direction:column}
.heroi .txt b{font-size:.95rem;font-weight:640}
.heroi .txt span{font-size:.82rem;color:var(--ink-2)}
.heroi .lado{margin-left:auto;display:flex;gap:20px}
.heroi .lado div{display:flex;flex-direction:column}
.heroi .lado .v{font-size:1.15rem;font-weight:660;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.heroi .lado .l{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* fita do funil: um filamento contínuo, sem espaço entre as etapas */
.fita{display:flex;width:100%;border-radius:99px;overflow:hidden;background:var(--panel-2);
  border:1px solid var(--line);position:relative;isolation:isolate}
.fita .seg{all:unset;box-sizing:border-box;cursor:pointer;position:relative;
  height:34px;display:grid;place-items:center;overflow:hidden;
  border-right:1px solid var(--panel);transition:filter .2s ease}
.fita .seg:last-child{border-right:none}
.fita .seg:hover{filter:brightness(.96)}
.fita .seg:focus-visible{outline:2px solid var(--slate);outline-offset:-3px}
.fita .seg span{font-family:var(--mono);font-size:.72rem;font-weight:700;color:var(--ink);
  mix-blend-mode:multiply;white-space:nowrap;padding:0 6px}
.fita .seg.vazio span{color:var(--ink-3);font-weight:500}
.fita .seg.orc{background:var(--slate-soft)}
.fita .seg.prod{background:var(--butter-soft)}
.fita .seg.feito{background:var(--mint-soft)}
.fita .seg.perd{background:var(--rose-soft)}
.fita .seg.vazio{background:var(--panel-2)}
/* o brilho que corre pela fita — mesma faixa única da barra da jornada (a nota
   sobre o tranco do gradiente repetido está lá embaixo, em `.pi-barra::after`).
   Aqui roda em 9s contra os 8s da jornada: os dois brilhos nunca batem juntos,
   e a tela respira em vez de pulsar. `passar` é definida junto com a jornada. */
.fita::after{
  content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;
  pointer-events:none;z-index:2;will-change:transform,opacity;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.5) 50%,rgba(255,255,255,0));
  animation:passar 9s linear infinite;
}
/* ainda usada pela `.puxada` dos cartões de máquina, na aba Imprimir */
@keyframes puxar{from{transform:translateX(-260px)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.fita::after{animation:none;opacity:0}}

.legenda-fita{display:flex;gap:14px;flex-wrap:wrap;font-size:.76rem;color:var(--ink-2)}
.legenda-fita i{font-style:normal;color:var(--ink-3);font-family:var(--mono);font-size:.68rem}
.legenda-fita .ponto{width:8px;height:8px;border-radius:99px;display:inline-block;margin-right:5px;vertical-align:middle}

/* listas dentro da bancada: linhas com fio, não caixinhas */
.itens{display:flex;flex-direction:column}
.item-linha{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.item-linha:last-child{border-bottom:none}
.item-linha .t{font-size:.89rem;font-weight:570}
.item-linha .d{font-family:var(--mono);font-size:.68rem;color:var(--ink-3)}
.titulo-caixa{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}

/* pilha de números da carteira */
.pilha{display:flex;flex-direction:column}
.pilha .l{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.pilha .l:last-child{border-bottom:none}
.pilha .k{font-size:.85rem;color:var(--ink-2)}
.pilha .v{font-size:1.05rem;font-weight:640;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pilha .l.forte .v{color:var(--mint)}
.pilha .l.fraco .v{color:var(--ink-3);font-weight:500}

/* trilha do funil (etapa 1, guardada) */
.trilha{display:flex;overflow-x:auto;padding-bottom:6px}
.passo{flex:1 1 0;min-width:104px;display:flex;flex-direction:column;gap:5px;padding:0 5px}
.passo .barra{height:5px;border-radius:99px;background:var(--panel-3)}
.passo.on .barra{background:var(--slate-line)}
.passo.prod .barra{background:var(--butter-line)}
.passo.feito .barra{background:var(--mint-line)}
.passo button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:1px;padding:7px 4px 2px}
.passo button:focus-visible{outline:2px solid var(--slate);outline-offset:1px;border-radius:7px}
.passo .q{font-size:1.35rem;font-weight:680;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.passo.off .q{color:var(--ink-3);font-weight:500}
.passo .nm{font-size:.78rem;color:var(--ink-2)}
.passo .rs{font-family:var(--mono);font-size:.66rem;color:var(--ink-3)}
.perdido-lado{display:flex;align-items:center;border-left:1px dashed var(--line);padding-left:12px;margin-left:4px}

.linha{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.linha .t{font-size:.9rem;font-weight:560}
.linha .d{font-size:.78rem;color:var(--ink-3);font-family:var(--mono)}
.pill{font-family:var(--mono);font-size:.66rem;padding:3px 9px;border-radius:99px;border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.pill.mint{background:var(--mint-soft);border-color:var(--mint-line);color:var(--mint)}
.pill.butter{background:var(--butter-soft);border-color:var(--butter-line);color:var(--butter)}
.pill.rose{background:var(--rose-soft);border-color:var(--rose-line);color:var(--rose)}

.btn{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;padding:10px 16px;border-radius:11px;font-size:.9rem;font-weight:600;border:1px solid var(--line);background:var(--panel-2);color:var(--ink)}
.btn:hover{background:var(--panel-3)}
.btn:focus-visible{outline:2px solid var(--slate);outline-offset:2px}
.btn.mint{background:var(--mint-soft);border-color:var(--mint-line);color:var(--mint)}
.btn.slate{background:var(--slate-soft);border-color:var(--slate-line);color:var(--slate)}
.btn[disabled]{opacity:.55;cursor:default}

.aviso{font-size:.85rem;color:var(--ink-2)}
.emconstrucao{border:1px dashed var(--line);border-radius:12px;padding:22px 16px;text-align:center;color:var(--ink-3);font-size:.9rem}
.tela{display:none;flex-direction:column;gap:16px}
.tela[data-on="1"]{display:flex}

/* ================= PROJETOS ================= */
.barra-lista{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#busca{
  flex:1 1 240px;font:inherit;font-size:.92rem;padding:10px 14px;border-radius:11px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);
}
#busca:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chip{all:unset;box-sizing:border-box;cursor:pointer;font-size:.8rem;padding:6px 12px;
  border-radius:99px;border:1px solid var(--line);color:var(--ink-2);background:var(--panel)}
.chip[aria-current="true"]{background:var(--slate-soft);border-color:var(--slate-line);color:var(--slate);font-weight:600}
.chip:focus-visible{outline:2px solid var(--slate);outline-offset:1px}

.lista-gaveta{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:14px;align-items:start}
@media(max-width:820px){.lista-gaveta{grid-template-columns:1fr}}
.coluna-lista{display:flex;flex-direction:column;gap:7px;min-width:0}
#lista{display:flex;flex-direction:column;gap:7px}
.cartao-proj{all:unset;box-sizing:border-box;cursor:pointer;display:flex;width:100%;flex-direction:column;gap:3px;
  padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}
.cartao-proj:hover{background:var(--panel-2)}
.cartao-proj:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
.cartao-proj[aria-current="true"]{background:var(--slate-soft);border-color:var(--slate-line)}
.cartao-proj .n{font-size:.89rem;font-weight:600;line-height:1.3}
.cartao-proj .m{font-family:var(--mono);font-size:.68rem;color:var(--ink-3)}
.mostrar-mais{all:unset;cursor:pointer;font-family:var(--mono);font-size:.7rem;color:var(--ink-3);padding:8px 4px}
.mostrar-mais:hover{color:var(--ink-2)}
.mostrar-mais:focus-visible{outline:2px solid var(--slate);outline-offset:2px}

.gaveta{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;
  display:flex;flex-direction:column;gap:14px;min-width:0;box-shadow:var(--sombra)}
.gaveta-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.gaveta-topo h2{font-size:1.15rem;font-weight:700}
.gaveta-topo .assinatura{font-family:var(--mono);font-size:.68rem;color:var(--ink-3);margin-top:3px}
.linhas-campos{display:flex;flex-direction:column}
.campo-l{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:.9rem;min-height:44px}
.campo-l:last-child{border-bottom:none}
.campo-l .k{color:var(--ink-3);flex:0 0 auto}
.campo-l .v{font-weight:560;text-align:right;font-variant-numeric:tabular-nums;word-break:break-word}
.campo-l .v.vazio{color:var(--ink-3);font-weight:400}
.campo-l input,.campo-l select,.campo-l textarea{
  font:inherit;font-size:.88rem;padding:7px 10px;border-radius:9px;text-align:right;
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink);max-width:62%;flex:1 1 auto}
.campo-l textarea{text-align:left;min-height:70px;resize:vertical}
.campo-l input:focus-visible,.campo-l select:focus-visible,.campo-l textarea:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
/* briefing solto: a caixa de captura, acima dos campos estruturados.
   Superfície própria (não é mais uma linha da lista) porque é a porta de entrada
   do projeto — e ganha tarja âmbar enquanto o texto ainda não virou campo. */
.briefing-solto{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:12px;padding:12px 13px;display:flex;flex-direction:column;gap:9px}
.briefing-solto.cheio{background:var(--slate-soft);border-color:var(--slate-line);border-left-color:var(--slate)}
.briefing-solto.cru{background:var(--butter-soft);border-color:var(--butter-line);border-left-color:var(--butter)}
.briefing-topo{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.briefing-topo .k{font-size:.9rem;font-weight:560;color:var(--ink)}
.selo-briefing{font-family:var(--mono);font-size:.66rem;color:var(--ink-3);text-align:right}
.briefing-solto.cru .selo-briefing{color:var(--butter)}
.briefing-solto textarea{font:inherit;font-size:.88rem;line-height:1.45;padding:9px 11px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);min-height:88px;resize:vertical;width:100%}
.briefing-solto textarea:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
.briefing-acoes{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.briefing-acoes .btn{min-height:44px;display:inline-flex;align-items:center}
.briefing-acoes .btn:disabled{opacity:.45;cursor:default}
.acoes-gaveta{display:flex;gap:9px;flex-wrap:wrap}
.salvando{font-family:var(--mono);font-size:.7rem;color:var(--mint)}
.vazio-gaveta{color:var(--ink-3);font-size:.9rem;text-align:center;padding:40px 12px}

.form-novo{display:flex;gap:9px;flex-wrap:wrap;align-items:center;
  background:var(--panel);border:1px solid var(--mint-line);border-radius:12px;padding:11px}
.form-novo input{flex:1 1 220px;font:inherit;font-size:.92rem;padding:9px 12px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink)}
.form-novo input:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
.btn.perigo{background:var(--rose-soft);border-color:var(--rose-line);color:var(--rose)}
.confirma{display:flex;gap:9px;align-items:center;flex-wrap:wrap;
  background:var(--rose-soft);border:1px solid var(--rose-line);border-radius:11px;padding:10px 12px}
.confirma p{font-size:.85rem;color:var(--rose)}
.acoes-gaveta{margin-top:2px}

/* ================= CORPO DA PÁGINA =================
   O painel de quantificação nasce no Notion (script do fatiador). Aqui ele é
   redesenhado com os tons do app, mas mantendo emoji, cor e colunas. */
.abas-gaveta{display:flex;gap:5px;flex-wrap:wrap}
.abas-gaveta button{all:unset;box-sizing:border-box;cursor:pointer;padding:7px 14px;border-radius:9px;
  font-size:.85rem;color:var(--ink-2);border:1px solid var(--line)}
.abas-gaveta button[aria-current="true"]{background:var(--butter-soft);border-color:var(--butter-line);color:var(--butter);font-weight:600}
.abas-gaveta button:focus-visible{outline:2px solid var(--slate);outline-offset:1px}

.corpo{display:flex;flex-direction:column;gap:10px}
.corpo h2,.corpo h3,.corpo h4{letter-spacing:-.01em}
.corpo h2{font-size:1.05rem;font-weight:700;margin-top:6px}
.corpo h3{font-size:.95rem;font-weight:660;margin-top:4px}
.corpo h4{font-size:1.5rem;font-weight:700;letter-spacing:-.03em}
.corpo p{font-size:.89rem;color:var(--ink-2);line-height:1.55}
.corpo .risco{text-decoration:line-through;color:var(--ink-3)}
.corpo code{font-family:var(--mono);font-size:.85em;background:var(--panel-2);padding:1px 5px;border-radius:5px}
.corpo a{color:var(--slate)}
.corpo hr{border:none;border-top:1px solid var(--line);margin:6px 0}
.corpo ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:4px}
.corpo li{font-size:.86rem;color:var(--ink-2)}
.corpo img{max-width:100%;border-radius:10px;border:1px solid var(--line)}

.chamada{display:flex;gap:10px;padding:12px 13px;border-radius:11px;border:1px solid var(--line);background:var(--panel-2)}
.chamada .ico{font-size:1.05rem;line-height:1.3;flex:none}
.chamada .dentro{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.chamada.c-azul{background:var(--slate-soft);border-color:var(--slate-line)}
.chamada.c-verde{background:var(--mint-soft);border-color:var(--mint-line)}
.chamada.c-laranja,.chamada.c-amarelo{background:var(--butter-soft);border-color:var(--butter-line)}
.chamada.c-vermelho,.chamada.c-rosa{background:var(--rose-soft);border-color:var(--rose-line)}
.chamada.c-cinza{background:var(--panel-2)}
.chamada.c-nenhuma{background:var(--panel)}
.colunas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.tarefa{display:flex;gap:8px;align-items:flex-start;font-size:.88rem;color:var(--ink-2)}

.composer{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.composer textarea{flex:1 1 220px;font:inherit;font-size:.88rem;padding:9px 11px;border-radius:10px;min-height:44px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink);resize:vertical}
.composer textarea:focus-visible{outline:2px solid var(--slate);outline-offset:1px}

/* ---- celular: lista e projeto são DUAS telas, não uma rolagem só ----
   No computador seguem lado a lado; abaixo de 820px, abrir um projeto
   troca a lista pelo projeto e um "voltar" desfaz. */
.voltar-lista{display:none}
@media(max-width:820px){
  /* a marca fica na TELA, não na grade — assim a busca e os chips,
     que vêm antes na página, também saem de cena ao abrir um projeto */
  .tela.detalhe #em-linha,
  .tela.detalhe .barra-lista,
  .tela.detalhe #chips,
  .tela.detalhe .form-novo,
  .tela.detalhe .coluna-lista{display:none}
  .voltar-lista{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;font-size:.85rem}
  .gaveta{padding:15px}
}

/* ---- correções de usabilidade (auditoria 18/08/2026) ---- */
.so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* iPhone com faixa inferior: o conteúdo não pode terminar embaixo do indicador */
body{padding-bottom:env(safe-area-inset-bottom)}
.app{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}

/* alvo de toque: nada clicável abaixo de 44px no celular */
@media(max-width:820px){
  .chip,.abas-gaveta button,.mostrar-mais,.acoes-gaveta .btn,nav.abas button{min-height:44px}
  .chip,.abas-gaveta button{display:inline-flex;align-items:center}
  .mostrar-mais{display:inline-flex;align-items:center;padding:12px 4px}
}

/* imagem do corpo reserva espaço antes de carregar (evita o pulo do layout) */
.corpo img{min-height:140px;background:var(--panel-2);object-fit:contain}

/* o campo de cliente novo nasce junto do seletor, sem caixa do sistema */
.cliente-novo{display:flex;gap:8px;padding:8px 0 2px}
.cliente-novo input{flex:1;font:inherit;font-size:.88rem;padding:7px 10px;border-radius:9px;
  border:1px solid var(--mint-line);background:var(--panel-2);color:var(--ink)}
.cliente-novo input:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
#gaveta h2:focus-visible{outline:2px solid var(--slate);outline-offset:3px;border-radius:6px}

/* ---- fotos do projeto e edição do corpo ---- */
.fotos{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 0 2px}
.fotos img{width:78px;height:78px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:var(--panel-2)}
.subir-foto{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:.85rem;font-weight:600;
  padding:10px 14px;border-radius:11px;border:1px dashed var(--mint-line);background:var(--mint-soft);color:var(--mint);min-height:44px}
.subir-foto:focus-within{outline:2px solid var(--slate);outline-offset:2px}
.subir-foto input{position:absolute;width:1px;height:1px;opacity:0}
.aviso-foto{font-family:var(--mono);font-size:.7rem;color:var(--ink-3)}

.corpo [data-editavel]{cursor:text;border-radius:7px;padding:2px 5px;margin:0 -5px;transition:background .15s ease}
.corpo [data-editavel]:hover{background:var(--panel-2)}
.corpo [data-editavel]:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
.editor-bloco{width:100%;font:inherit;font-size:.89rem;padding:9px 11px;border-radius:10px;
  border:1px solid var(--slate-line);background:var(--panel);color:var(--ink);resize:vertical;min-height:60px}
.editor-bloco:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
.editor-acoes{display:flex;gap:7px;margin-top:6px}
.corpo .tarefa input{width:20px;height:20px;cursor:pointer;accent-color:var(--mint)}
.corpo .tarefa{cursor:pointer;padding:3px 0}
.dica-edicao{font-family:var(--mono);font-size:.66rem;color:var(--ink-3);padding-bottom:4px}

.acoes-proposta{display:flex;gap:9px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.acoes-proposta .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

/* ---- material: tenho / acabando / comprar ---- */
.materiais{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:9px}
.mat{border:1px solid var(--line);border-radius:12px;padding:11px;display:flex;flex-direction:column;gap:9px;background:var(--panel)}
.mat.e-tenho{background:var(--mint-soft);border-color:var(--mint-line)}
.mat.e-acabando{background:var(--butter-soft);border-color:var(--butter-line)}
.mat.e-comprar{background:var(--rose-soft);border-color:var(--rose-line)}
.mat .topo-mat{display:flex;justify-content:space-between;align-items:flex-start;gap:6px}
.mat .nm{font-size:.87rem;font-weight:620;line-height:1.25}
.mat .qm{font-family:var(--mono);font-size:.62rem;color:var(--ink-3)}
.mat .tirar{all:unset;cursor:pointer;color:var(--ink-3);font-size:.9rem;line-height:1;padding:2px 4px;border-radius:6px}
.mat .tirar:hover{color:var(--rose);background:var(--panel)}
.mat .tirar:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
.estados{display:flex;gap:4px}
.estados button{all:unset;box-sizing:border-box;cursor:pointer;flex:1;text-align:center;min-height:38px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.02em;border-radius:8px;
  border:1px solid var(--line);color:var(--ink-3);background:var(--panel)}
.estados button[aria-pressed="true"]{font-weight:700;border-width:2px}
.mat.e-tenho .estados button[aria-pressed="true"]{color:var(--mint);border-color:var(--mint-line)}
.mat.e-acabando .estados button[aria-pressed="true"]{color:var(--butter);border-color:var(--butter-line)}
.mat.e-comprar .estados button[aria-pressed="true"]{color:var(--rose);border-color:var(--rose-line)}
.estados button:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
.bolinha{width:13px;height:13px;border-radius:99px;border:1px solid rgba(0,0,0,.14);flex:none;display:inline-block}
.linha-repor{display:flex;align-items:center;gap:10px;padding:11px 2px;border-bottom:1px solid var(--line)}
.linha-repor:last-child{border-bottom:none}
.linha-repor .nm{font-size:.9rem;font-weight:560;flex:1}
@media(max-width:820px){ .estados button{min-height:44px} }

/* ---- o que cada obra pede até a entrega ---- */
.obra{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;
  display:flex;flex-direction:column;gap:12px;box-shadow:var(--sombra);margin-bottom:14px}
.obra.aperta{border-color:var(--butter-line)}
.obra.atrasada{border-color:var(--rose-line)}
.obra-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.obra-topo h3{font-size:1rem;font-weight:680}
.obra-topo .qm{font-family:var(--mono);font-size:.68rem;color:var(--ink-3);margin-top:2px}
.obra-numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}
.obra-numeros div{background:var(--panel-2);border-radius:10px;padding:9px 11px;display:flex;flex-direction:column}
.obra-numeros .v{font-size:1.15rem;font-weight:680;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.obra-numeros .l{font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.cores-obra{display:flex;flex-direction:column;gap:6px}
.cor-linha{display:flex;align-items:center;gap:9px;font-size:.86rem}
.cor-linha .nome{flex:1;color:var(--ink-2)}
.cor-linha .g{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.82rem}
.cor-linha .barra{height:6px;border-radius:99px;background:var(--panel-3);flex:0 0 84px;overflow:hidden}
.cor-linha .barra span{display:block;height:100%;background:var(--slate-line);border-radius:99px}
.ritmo{font-size:.85rem;color:var(--ink-2);border-top:1px solid var(--line);padding-top:10px}
.ritmo b{color:var(--ink)}

/* ================= QUADRO DE PRODUÇÃO =================
   Movimento só onde ele informa: a barra que anda, o número que pulsa quando
   você conta, e um brilho de fundo lento. Tudo em transform/opacity (o
   compositor resolve, não repinta layout) e nada roda se o sistema pedir calma. */
.quadro{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--butter-line);
  border-radius:18px;padding:18px;margin-bottom:14px;box-shadow:var(--sombra)}
.quadro::before{content:"";position:absolute;inset:-40% -10%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side, rgba(230,208,155,.30), transparent 70%);
  animation:respira 9s ease-in-out infinite}
.quadro > *{position:relative;z-index:1}
@keyframes respira{0%,100%{transform:translate3d(-14%,0,0) scale(1)}50%{transform:translate3d(14%,0,0) scale(1.12)}}

.quadro-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.quadro-topo h3{font-size:1.1rem;font-weight:700}
.quadro-topo .qm{font-family:var(--mono);font-size:.68rem;color:var(--ink-3);margin-top:3px}

/* --- peças: duas linhas empilhadas, cada uma com sua cor --- */
/* ⚠️ Eram TRÊS colunas (`auto 1fr auto`) para DOIS itens — a terceira nunca
   existiu. Como a contagem é `nowrap` e comprida ("96 / 100 · 96% · 1 perdida ·
   2 mesas de 48 + 1 de 4"), o `1fr` dela espremia a coluna `auto` do nome até
   ZERO; o nome continuava sendo desenhado e caía POR CIMA da contagem, e a
   linha inteira estourava 408px numa tela de 375. No celular a linha empilha:
   nome, contagem e trilho, cada um com a largura toda. */
.peca{display:grid;grid-template-columns:1fr;gap:5px 10px;align-items:center;
  padding:9px 0;border-top:1px solid var(--line)}
.peca:first-of-type{border-top:none;padding-top:2px}
.peca .nome{font-size:.9rem;font-weight:620;display:flex;align-items:center;gap:7px;min-width:0}
.peca .nome .marca{width:11px;height:11px;border-radius:99px;flex:none}
.peca .conta{font-family:var(--mono);font-size:.78rem;color:var(--ink-3);font-variant-numeric:tabular-nums;
  justify-self:start;line-height:1.55}
.peca .conta b{font-size:1.05rem;color:var(--ink);display:inline-block}
.peca .trilho-prod{grid-column:1/-1;height:10px;border-radius:99px;background:var(--panel-3);overflow:hidden}
.peca .trilho-prod span{display:block;height:100%;border-radius:99px;transform-origin:left center;
  transition:transform .55s cubic-bezier(.25,.9,.3,1)}
.peca.cheia .nome::after{content:"✓";color:var(--mint);font-weight:700}
.p-slate .marca,.p-slate .trilho-prod span{background:var(--slate-line)}
.p-butter .marca,.p-butter .trilho-prod span{background:var(--butter-line)}
.p-mint .marca,.p-mint .trilho-prod span{background:var(--mint-line)}
.p-rose .marca,.p-rose .trilho-prod span{background:var(--rose-line)}
.pulsa{animation:pulo .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes pulo{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}

/* --- área única de controle: a cor diz de qual peça é o botão --- */
.controles{border-top:1px solid var(--line);margin-top:12px;padding-top:12px;display:flex;flex-direction:column;gap:9px}
.mesas{display:flex;gap:8px;flex-wrap:wrap}
.mesas button{all:unset;box-sizing:border-box;cursor:pointer;min-height:46px;padding:0 16px;flex:1 1 130px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:12px;
  font-size:.88rem;font-weight:650;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);
  transition:transform .12s ease}
.mesas button:active{transform:scale(.96)}
.mesas button:focus-visible{outline:2px solid var(--slate);outline-offset:2px}
.mesas button .marca{width:11px;height:11px;border-radius:99px;flex:none}
.mesas .m-slate{background:var(--slate-soft);border-color:var(--slate-line);color:var(--slate)}
.mesas .m-butter{background:var(--butter-soft);border-color:var(--butter-line);color:var(--butter)}
.mesas .m-mint{background:var(--mint-soft);border-color:var(--mint-line);color:var(--mint)}
.mesas .m-rose{background:var(--rose-soft);border-color:var(--rose-line);color:var(--rose)}

.ajuste{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.ajuste .escolha{display:flex;gap:5px}
.ajuste .escolha button{all:unset;box-sizing:border-box;cursor:pointer;min-height:40px;padding:0 11px;
  display:inline-flex;align-items:center;gap:6px;border-radius:10px;font-size:.8rem;
  border:1px solid var(--line);color:var(--ink-3);background:var(--panel)}
.ajuste .escolha button[aria-pressed="true"]{border-width:2px;color:var(--ink);font-weight:640}
.ajuste .escolha button .marca{width:9px;height:9px;border-radius:99px}
.ajuste .escolha button:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
.ajuste input{width:78px;min-height:44px;font:inherit;font-size:.92rem;text-align:center;
  border-radius:11px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink)}
.ajuste input:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
.ajuste .acao{all:unset;box-sizing:border-box;cursor:pointer;min-height:44px;padding:0 13px;
  display:inline-flex;align-items:center;border-radius:11px;font-size:.85rem;font-weight:620;border:1px solid var(--line)}
.ajuste .acao:focus-visible{outline:2px solid var(--slate);outline-offset:2px}
.ajuste .somar{background:var(--mint-soft);border-color:var(--mint-line);color:var(--mint)}
.ajuste .tirar{background:var(--panel-2);color:var(--ink-2)}
.ajuste .perder{background:var(--rose-soft);border-color:var(--rose-line);color:var(--rose)}

.resumo-prod{font-size:.85rem;color:var(--ink-2);border-top:1px solid var(--line);padding-top:11px;margin-top:13px}
.resumo-prod b{color:var(--ink)}
.descartes{font-family:var(--mono);font-size:.68rem;color:var(--rose)}

@media (prefers-reduced-motion: reduce){
  .quadro::before{animation:none;opacity:.5}
  .trilho-prod span{transition:none}
  .pulsa{animation:none}
}

/* ---------- minitots: folha de contato (peças encaixadas, uma superfície só) ---------- */
.conta-mini{margin-left:auto;font-size:.8rem;color:var(--ink-3);font-family:var(--mono)}
.contato{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;box-shadow:var(--sombra);
}
.mini{all:unset;box-sizing:border-box;cursor:pointer;background:var(--panel);
  display:flex;flex-direction:column;position:relative;min-height:44px}
.mini:focus-visible{outline:2px solid var(--slate);outline-offset:-2px;z-index:1}
/* recorte transparente: assenta direto no tom quente da peça, sem branco */
.mini .foto{aspect-ratio:1/1;width:100%;height:auto;object-fit:contain;display:block;
  padding:6px;opacity:0;transition:opacity .45s ease}
.mini .foto.veio{opacity:1}
@media (prefers-reduced-motion:reduce){.mini .foto{transition:none}}
.mini .sem{aspect-ratio:1/1;display:grid;place-items:center;background:var(--panel-2);
  color:var(--ink-3);font-size:.72rem;text-align:center;padding:8px;line-height:1.3}
.mini .rodape{display:flex;align-items:baseline;gap:6px;padding:7px 9px 9px;border-top:1px solid var(--line)}
/* Duas linhas, não uma. Em nome de uma linha só, 30 dos 78 cartões cortavam — e
   "TOT Camaleão" e "TOT Camarão" viravam os dois "TOT Cama…", indistinguíveis.
   No celular não há hover pra salvar com title, então o nome tem que caber na tela. */
.mini .nm{font-size:.76rem;font-weight:600;line-height:1.25;flex:1;min-width:0;
  overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow-wrap:anywhere}
.mini .qt{font-family:var(--mono);font-size:.85rem;font-weight:700;color:var(--mint)}
.mini[data-zero="1"] .qt{color:var(--rose)}
.mini[data-zero="1"] .foto{filter:saturate(.3) opacity(.75)}
.vazio-mini{padding:28px;text-align:center;color:var(--ink-3);font-size:.9rem;background:var(--panel);grid-column:1/-1}

/* ficha: substitui a grade, em qualquer largura */
.ficha{display:flex;flex-direction:column;gap:14px}
.ficha .voltar{all:unset;cursor:pointer;color:var(--ink-2);font-size:.9rem;
  align-self:flex-start;padding:10px 2px;min-height:44px;display:flex;align-items:center}
.ficha .voltar:focus-visible{outline:2px solid var(--slate);outline-offset:2px;border-radius:8px}
.ficha-corpo{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:16px;box-shadow:var(--sombra)}
@media (min-width:720px){.ficha-corpo{grid-template-columns:300px minmax(0,1fr);align-items:start}}
.ficha-foto{width:100%;height:auto;border-radius:11px;
  border:1px solid var(--line);display:block;background:var(--panel-2);
  aspect-ratio:1/1;object-fit:cover}
.ficha-foto.quadro{aspect-ratio:1/1;display:grid;place-items:center;color:var(--ink-3);font-size:.85rem;text-align:center;padding:16px}
.ficha h2{font-size:1.3rem;font-weight:700}
.ficha .preco{font-family:var(--mono);font-size:1.05rem;color:var(--mint);font-weight:700;margin-top:2px}
.ficha .desc{font-size:.88rem;color:var(--ink-2);margin-top:8px}
.ficha .atributos{font-size:.85rem;color:var(--ink-2);margin-top:10px;line-height:1.5}
.ficha .carimbo{font-size:.75rem;color:var(--ink-3);font-family:var(--mono);margin-top:10px}
.ficha .colecoes{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
.ficha .colecoes span{font-size:.72rem;padding:3px 9px;border-radius:999px;
  background:var(--slate-soft);border:1px solid var(--slate-line);color:var(--slate)}

/* controle de estoque: um lugar só, grande o bastante pro dedo */
.estoque{display:flex;align-items:center;gap:10px;margin-top:16px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:8px}
.estoque .rot{font-size:.78rem;color:var(--ink-2);flex:1;padding-left:6px}
.estoque button{all:unset;box-sizing:border-box;cursor:pointer;width:46px;height:46px;
  display:grid;place-items:center;border-radius:11px;font-size:1.3rem;font-weight:700;
  background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.estoque button:focus-visible{outline:2px solid var(--slate);outline-offset:2px}
.estoque input{font:inherit;font-family:var(--mono);font-size:1.15rem;font-weight:700;
  width:68px;height:46px;text-align:center;border-radius:11px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);padding:0}
.estoque input:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
.acoes-mini{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.acoes-mini .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.recado{font-size:.8rem;color:var(--ink-2);min-height:1.2em;margin-top:8px}
.recado[data-erro="1"]{color:var(--rose)}
.chip b{margin-left:5px}
/* 13 coleções em chips que quebram comem 5 linhas da tela do celular:
   no estreito viram uma fita que rola, e a grade sobe pra cima da dobra */
@media(max-width:720px){
  #chips-mini{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;padding-bottom:2px;margin:0 -16px;padding-left:16px;padding-right:16px}
  #chips-mini::-webkit-scrollbar{display:none}
  #chips-mini .chip{flex:0 0 auto;scroll-snap-align:start}
}

/* com a ficha aberta, busca e chips somem: é a mesma mestre-detalhe de Projetos */
.tela[data-tela="minitots"].ficha-aberta .barra-lista,
.tela[data-tela="minitots"].ficha-aberta #chips-mini{display:none}
/* no desktop, 11 colunas de 104px picotam os nomes: peças maiores a partir de 720px */
@media(min-width:720px){.contato{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}

/* auditoria da etapa 5 (skill web-design-guidelines) */
.mini,.estoque button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.mini:hover{background:var(--panel-2)}
.estoque button:hover{background:var(--panel-3)}
.mini .qt,.conta-mini{font-variant-numeric:tabular-nums}
/* 138 peças com imagem: o navegador só monta as que entram na tela.
   contain-intrinsic-size evita a barra de rolagem pular enquanto rola. */
.mini{content-visibility:auto;contain-intrinsic-size:auto 190px}
@media(max-width:720px){#chips-mini{overscroll-behavior-x:contain}}


/* ============================================================================
   BAO LAB — patch de tom: oliva escuro & cobre sobre a areia
   ----------------------------------------------------------------------------
   Os NOMES das variáveis continuam os mesmos — por isso o app inteiro muda de
   cor sem uma linha de markup nova. O papel de cada cor também não muda:

     --slate   em jogo / negociação   ardósia (igual, só mais fechado)
     --mint    fechado / feito        era hortelã, agora OLIVA
     --butter  material / máquina     era manteiga, agora COBRE
     --rose    atenção / perdido      era rosa, agora TERRACOTA

   Animação só em transform/opacity, e tudo desliga em prefers-reduced-motion.
   (--sans e --mono do patch original foram omitidos de propósito: o app roda
   pela Tailscale, muitas vezes sem rede boa, e não vale depender do Google
   Fonts. A pilha do sistema continua valendo.)
   ========================================================================== */


/* ============================== 1. TOM ==================================== */

:root{
  /* a areia continua o chão — só um fio mais fria pra aguentar o oliva */
  --ground:#efe8dc; --panel:#faf5ec; --panel-2:#f2ebde; --panel-3:#e8dfcf;
  --ink:#332f27; --ink-2:#6f685d; --ink-3:#a49b8c; --line:#e2d9c8;

  /* em jogo / negociação */
  --slate:#41586a; --slate-soft:#e4ecf0; --slate-line:#b6ccd6;
  /* fechado / feito — OLIVA */
  --mint:#4e5b34; --mint-soft:#e8ebdc; --mint-line:#b9c29e;
  /* material / máquina — COBRE (é o único tom que grita) */
  --butter:#b5652f; --butter-soft:#f7e6d6; --butter-line:#e3b98f;
  /* atenção / perdido — TERRACOTA */
  --rose:#94452f; --rose-soft:#f6e3dc; --rose-line:#e0b3a2;

  /* superfície de acento: NÃO é modo escuro, é uma testeira dentro da tela clara */
  --oliva-fundo:#2e3722;
  --oliva-ink:#faf5ec;      /* texto sobre o oliva */
  --oliva-ink-2:#a9b292;    /* etiqueta sobre o oliva */
  --oliva-cobre:#e3b98f;    /* número que precisa saltar sobre o oliva */
  --oliva-fio:rgba(250,245,236,.16);
  /* estado da máquina sobre o oliva. O broto é a única cor nova da casa: contra
     o #2e3722 dá 8:1, que é o que se pede de um painel lido de longe. A terracota
     clara é a MESMA que o relógio da pausada já usava — barra e número agora
     combinam em vez de discordar. */
  --oliva-broto:#c3d97a;
  --oliva-terracota:#e9a992;

  --sombra:0 1px 2px rgba(70,58,40,.05), 0 10px 30px rgba(70,58,40,.06);
}

/* hierarquia: número e título apertados, etiqueta espaçada */
h1,h2,h3{letter-spacing:-.02em}
.kpi .v,.heroi .num,.passo .q,.obra-numeros .v,.pilha .v,.corpo h4{letter-spacing:-.04em}
.cap,.kpi .l,.heroi .lado .l,.passo .rs,.obra-numeros .l{letter-spacing:.14em}

/* a aba ativa era marfim sobre areia (pouco contraste). Agora é oliva cheio. */
nav.abas button[aria-current="true"]{
  background:var(--oliva-fundo);color:var(--oliva-ink);font-weight:600;box-shadow:none;
}
/* 5 abas não cabem em 390px: vira fita que rola, sem quebrar linha */
nav.abas{overflow-x:auto;scroll-snap-type:x proximity}
nav.abas button{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}

/* a fita do funil ganha cor cheia (era pastel sobre pastel) */
.fita .seg.orc{background:var(--slate)}
.fita .seg.prod{background:var(--butter)}
.fita .seg.feito{background:#7a8a55}
.fita .seg.perd{background:var(--rose)}
.fita .seg.vazio{background:var(--panel-3)}
.fita .seg span{color:var(--oliva-ink);mix-blend-mode:normal;font-weight:600}
.fita .seg.vazio span{color:var(--ink-3)}


/* ======================= 2. TESTEIRA (herói em oliva) =====================
   Markup: envolva o herói + a fita da .bancada numa div class="testeira". */

.testeira{
  position:relative;overflow:hidden;background:var(--oliva-fundo);
  border-radius:12px;padding:16px;margin:0;
}
.testeira::before{                      /* o brilho lento que já existia, em cobre */
  content:"";position:absolute;inset:-40% -10%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(181,101,47,.5),transparent 70%);
  animation:respira 9s ease-in-out infinite;
}
.testeira > *{position:relative;z-index:1}
.testeira .num,.testeira .v,.testeira b{color:var(--oliva-ink)}
.testeira .l,.testeira .txt span,.testeira .legenda-fita{color:var(--oliva-ink-2)}
.testeira .destaque{color:var(--oliva-cobre)}   /* use em atrasados/custo */
.testeira .fita{border-color:transparent;background:rgba(250,245,236,.14)}
.testeira .legenda-fita i,.testeira .cap{color:var(--oliva-ink-2)}


/* =================== 3. MEDIDA NO LUGAR DE FRASE ========================= */

/* --- 3.1 anel de progresso — <div class="anel" style="--p:64"><span>64%</span></div> */
.anel{
  width:58px;height:58px;border-radius:99px;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--anel-cor,var(--butter)) calc(var(--p,0) * 3.6deg), var(--panel-3) 0);
  transition:none;
}
.anel > span{
  width:44px;height:44px;border-radius:99px;background:var(--panel);
  display:flex;align-items:center;justify-content:center;white-space:nowrap;
  font:600 13px var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;
}
.anel.a-slate{--anel-cor:var(--slate)}
.anel.a-butter{--anel-cor:var(--butter)}
.anel.a-mint{--anel-cor:var(--mint)}
.anel.a-rose{--anel-cor:var(--rose)}

/* --- 3.2 prazo: o número manda, a palavra "dias" sai ---------------------- */
.prazo{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.prazo .d{font:600 17px var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.prazo .l{font:500 8.5px var(--mono);letter-spacing:.1em;color:var(--ink-3)}
.prazo.p-aperta .d{color:var(--rose)}    /* <= 2 dias */
.prazo.p-perto  .d{color:var(--butter)}  /* <= 5 dias */
.prazo.p-folga  .d{color:var(--mint)}

/* --- 3.3 tarja de prazo no cartão da lista de Projetos ------------------- */
.cartao-proj{position:relative;overflow:hidden;padding-left:17px}
.cartao-proj::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--line)}
.cartao-proj.t-aperta::before{background:var(--rose)}
.cartao-proj.t-perto::before{background:var(--butter)}
.cartao-proj.t-folga::before{background:var(--mint)}
.cartao-proj.t-orc::before{background:var(--slate)}

/* --- 3.4 filamento como colunas ------------------------------------------
   <div class="tubos"><i style="--p:74;--c:#332f27" data-sig="PRT"></i> … */
.tubos{display:flex;gap:7px;align-items:flex-end;height:62px}
.tubos > i{
  flex:1;height:44px;border-radius:6px;background:var(--panel-3);
  position:relative;overflow:hidden;display:block;
}
.tubos > i::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:calc(var(--p,0) * 1%);background:var(--c,var(--ink-3));
  box-shadow:inset 0 1px 0 rgba(51,47,39,.28);   /* pro filamento branco aparecer */
  transition:height .6s ease;
}
.tubos > i::before{
  content:attr(data-sig);position:absolute;left:0;right:0;bottom:-14px;
  text-align:center;font:500 8px var(--mono);color:var(--ink-2);
}

/* --- 3.5 trilho de contagem mais grosso: dá pra ver da bancada ----------- */
.peca .trilho-prod{height:14px;border-radius:4px}
.peca .trilho-prod span{border-radius:4px}
.p-slate .marca,.p-slate .trilho-prod span{background:var(--slate)}
.p-butter .marca,.p-butter .trilho-prod span{background:var(--butter)}
.p-mint .marca,.p-mint .trilho-prod span{background:#7a8a55}
.p-rose .marca,.p-rose .trilho-prod span{background:var(--rose)}

/* --- 3.6 área de controle única, em oliva; cor = de qual peça é o botão ---
   Markup: envolva os .mesas + .ajuste existentes numa div.controles-oliva. */
.controles-oliva{
  background:var(--oliva-fundo);border-radius:12px;padding:14px 15px 16px;
  display:flex;flex-direction:column;gap:9px;margin-top:12px;border:none;
}
.controles-oliva .cap{color:var(--oliva-ink-2)}
.controles-oliva .mesas button{color:var(--oliva-ink);border-color:transparent;font-weight:600}
.controles-oliva .mesas .m-slate{background:var(--slate)}
.controles-oliva .mesas .m-butter{background:var(--butter)}
.controles-oliva .mesas .m-mint{background:#7a8a55}
.controles-oliva .mesas .m-rose{background:var(--rose)}
.controles-oliva .ajuste .escolha button{border-color:var(--oliva-fio);color:var(--oliva-ink-2);background:transparent}
.controles-oliva .ajuste .escolha button[aria-pressed="true"]{color:var(--oliva-ink);border-color:currentColor}
.controles-oliva .ajuste input{background:var(--panel);border-color:transparent;font-weight:700}
.controles-oliva .ajuste .somar{background:#7a8a55;border-color:transparent;color:var(--oliva-ink)}
.controles-oliva .ajuste .tirar{background:transparent;border-color:var(--oliva-fio);color:var(--oliva-ink-2)}
.controles-oliva .ajuste .perder{background:var(--rose);border-color:transparent;color:var(--oliva-ink)}


/* ===================== 4. AJUSTES FINOS QUE VALEM ========================= */

/* o que estava vivo ficava igual ao que estava parado: um ponto que pisca */
.rodando{display:inline-flex;align-items:center;gap:6px;font:500 9.5px var(--mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--butter)}
.rodando::before{content:"";width:7px;height:7px;border-radius:99px;background:currentColor;
  animation:pisca 2s ease-in-out infinite}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.3}}

/* números grandes nunca quebram linha por causa do "mil" */
.pilha .v,.kpi .v,.heroi .lado .v,.obra-numeros .v{white-space:nowrap}

/* a folha de contato dos Minitots e a fita do funil agora conversam */
.contato,.fita{box-shadow:var(--sombra)}

@media (prefers-reduced-motion:reduce){
  .testeira::before{animation:none;opacity:.5}
  .rodando::before{animation:none}
  .tubos > i::after{transition:none}
}


/* ============================ 5. DESKTOP ================================= */

@media (min-width:1000px){

  .app{max-width:1240px;padding:22px 24px 72px;gap:18px}

  /* a barra de abas acompanha a rolagem: no desktop a página é longa */
  .topo{position:sticky;top:0;z-index:20;background:var(--ground);padding:10px 0 6px;margin:-10px 0 0}
  nav.abas{position:sticky;top:52px;z-index:19;background:var(--ground);padding:6px 0 8px;overflow:visible}
  nav.abas button{padding:9px 15px;font-size:.92rem}

  /* a bancada em três colunas: o herói atravessa, o resto encaixa ao lado */
  .bancada{grid-template-columns:1.5fr 1fr 1fr;gap:10px;padding:10px;border-radius:20px}
  .bancada > *{padding:18px 20px}
  .faixa{grid-column:1/-1}
  .testeira{padding:20px 22px}
  .testeira .num{font-size:3.6rem}

  .kpis{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
  .kpi .v{font-size:2rem}
  .heroi .lado{gap:28px}

  /* Projetos: lista larga e gaveta que acompanha a rolagem */
  .lista-gaveta{grid-template-columns:minmax(300px,380px) 1fr;gap:18px}
  .gaveta{position:sticky;top:112px;padding:22px 24px}
  .campo-l{min-height:40px}
  .campo-l input,.campo-l select,.campo-l textarea{max-width:52%}

  /* Produção: números da obra numa linha só, peças com trilho longo */
  .obra{padding:20px 22px}
  .obra-numeros{grid-template-columns:repeat(4,1fr)}
  .quadro{padding:22px 24px}
  .peca{grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;padding:11px 0}
  .peca .conta{justify-self:end;white-space:nowrap}
  .peca .trilho-prod{height:16px}
  .materiais{grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
  .mesas button{flex:0 1 200px}

  /* Minitots: a folha de contato respira em 7 colunas */
  .contato{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .mini .nm{font-size:.8rem}
  .ficha-corpo{grid-template-columns:340px minmax(0,1fr);padding:22px 24px;gap:22px}
  .tubos{height:84px}
  .tubos > i{height:62px}
}

/* estados de mouse: no celular isso não existe, no desktop a falta deles é
   o que faz a tela parecer morta */
@media (hover:hover) and (pointer:fine){
  .cartao-proj{transition:transform .12s ease,background .15s ease}
  .cartao-proj:hover{transform:translateX(2px);background:var(--panel-2)}
  .mini{transition:transform .12s ease}
  .mini:hover{transform:translateY(-2px);z-index:1}
  .item-linha,.linha{transition:background .15s ease}
  .item-linha:hover,.linha:hover{background:var(--panel-2)}
  .chip,.btn,.mesas button{transition:transform .12s ease,filter .15s ease}
  .chip:hover,.btn:hover,.mesas button:hover{filter:brightness(.97)}
  .mesas button:hover{transform:translateY(-1px)}
}

/* --- 5.9 OPCIONAL: trilho lateral em vez de abas no topo -----------------
   Sem <aside class="trilho"> no markup, este bloco não faz nada. */
@media (min-width:1000px){
  .app:has(.trilho){display:grid;grid-template-columns:84px minmax(0,1fr);gap:22px;align-items:start;max-width:1300px}
  .trilho{position:sticky;top:22px;background:var(--oliva-fundo);border-radius:16px;
    padding:18px 0;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:520px}
  .trilho .marca{width:30px;margin-bottom:14px;filter:invert(1) brightness(1.6)}
  .trilho nav.abas{position:static;flex-direction:column;background:transparent;padding:0;gap:5px;overflow:visible}
  .trilho nav.abas button{width:52px;height:52px;padding:0;border-radius:13px;display:grid;place-items:center;
    font:500 10px var(--mono);letter-spacing:.06em;color:var(--oliva-ink-2)}
  .trilho nav.abas button[aria-current="true"]{background:var(--mint);color:var(--oliva-ink);font-weight:600}
  .trilho .quem{margin-top:auto;flex-direction:column;gap:6px;font-size:.7rem;color:var(--oliva-ink-2)}
  .trilho .av{background:var(--butter);color:var(--oliva-ink)}
  .trilho .sair{color:var(--oliva-ink-2)}
}

/* --- ajustes do passo 2 ---------------------------------------------------
   A .faixa continua sendo a célula da bancada, mas quando ela guarda a
   testeira ela vira só um invólucro: sem fundo, sem fio, sem padding. Senão
   fica cartão dentro de cartão — exatamente o que ele não gosta. */
.faixa:has(.testeira){background:transparent;border-color:transparent;padding:0}

/* a fita de abas rola, mas a barra de rolagem clássica do desktop suja o topo
   (no iPhone ela é overlay e nunca aparece). As abas cortadas já avisam que
   tem mais coisa à direita. */
nav.abas{scrollbar-width:none}
nav.abas::-webkit-scrollbar{display:none}

/* --- ajustes do passo 3 ---------------------------------------------------
   1) A etiqueta do tubo (data-sig) mora FORA da caixa, e o .tubos > i do patch
      tem overflow:hidden — ela era clipada e nunca aparecia. Tiro o overflow e
      arredondo o próprio preenchimento. */
.tubos > i{overflow:visible}
.tubos > i::after{border-radius:0 0 6px 6px}
.tubos{margin-bottom:6px}

/* 2) A tarja do cartão só existe em quem está em jogo. Sem classe de estado,
      nada é desenhado — 22 dos 28 projetos estão encerrados. */
.cartao-proj::before{background:transparent}
.cartao-proj:not([class*="t-"]){padding-left:14px}

/* 3) Anel + prazo no topo do quadro, lado a lado */
.medida-topo{display:flex;align-items:center;gap:12px;flex:none}

/* 4) Material é cobre, não ardósia: a barra de filamento da obra estava com a
      cor de "em jogo/negociação". */
.cor-linha .barra span{background:var(--butter-line)}

/* Filamento claro (branco #faf7f0, marfim, bege) somia contra o tubo vazio.
   Escurecer o tubo não resolve: aí o bege cheio vira tubo vazio. O que separa
   os dois em QUALQUER cor é o contorno do preenchimento — é a linha dele que
   diz até onde tem. */
.tubos > i{box-shadow:inset 0 0 0 1px var(--line)}
.tubos > i::after{box-shadow:inset 0 0 0 1px rgba(51,47,39,.32)}

/* --- ajustes do passo 4 ---------------------------------------------------
   Os chips de escolha de peça tinham 40px de altura — abaixo do alvo de toque
   de 44px. O app é box-sizing:border-box, então min-height resolve sem inflar. */
.controles-oliva .ajuste .escolha button{min-height:44px}
.controles-oliva .ajuste input,
.controles-oliva .ajuste .acao{min-height:44px}

/* "+ mesa de 48" quebrava em duas linhas depois que o botão virou oliva cheio */
.controles-oliva .mesas button{white-space:nowrap}
/* o pontinho da peça dentro do botão virou branco e ficou redundante: quem diz
   de que peça é o botão é a COR do botão, não um ponto. */
.controles-oliva .mesas button .marca{display:none}
/* texto marfim sobre o verde/cobre claros dava 3,4:1 e 4,0:1 — dois tons mais
   fechados levam pra 5,3:1 e 5,0:1 sem perder o papel da cor */
.controles-oliva .mesas .m-mint,
.controles-oliva .ajuste .somar{background:#5d6b3d}
.controles-oliva .mesas .m-butter{background:#a4551f}

/* --- ajuste do passo 5 ----------------------------------------------------
   O patch pôs a bancada em três colunas, mas fora a testeira só existem dois
   blocos (prazos e carteira) — a terceira coluna ficava vazia no desktop. */
@media (min-width:1000px){
  .bancada{grid-template-columns:1.6fr 1fr}
}

/* --- quadro de produção: fechado por padrão ------------------------------
   Os botões de contar só aparecem quando ele abre. Fechado, o quadro é um
   resumo: nome, anel, prazo, peças e o ritmo. */
.quadro{cursor:pointer}
.quadro .controles{cursor:auto}
.abrir-quadro{
  all:unset;box-sizing:border-box;cursor:pointer;flex:none;
  min-height:44px;display:flex;align-items:center;padding:0 14px;border-radius:11px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink-2);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.quadro.aberto .abrir-quadro{background:var(--oliva-fundo);border-color:transparent;color:var(--oliva-ink)}
.abrir-quadro:focus-visible{outline:2px solid var(--slate);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .quadro:not(.aberto):hover .abrir-quadro{background:var(--panel-3);color:var(--ink)}
}

/* ---------- Imprimir: a fila da máquina (etapa 5d) ----------
   uma superfície só, linhas encaixadas — nada de cartão solto por bicho.
   a cor do número é o identificador da urgência: terracota=zerado, cobre=1–2,
   ardósia=3–5, oliva=6+. */
.fila-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fila-topo .chips{flex:1 1 auto}

.fila{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:var(--sombra)}
.fl{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;
  width:100%;min-height:56px;padding:7px 12px;border-top:1px solid var(--line);
  content-visibility:auto;contain-intrinsic-size:auto 56px;scroll-margin-bottom:190px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.fl:first-child{border-top:0}
.fl:hover{background:var(--panel-2)}
.fl:focus-visible{outline:2px solid var(--slate);outline-offset:-2px}
.fl img,.fl .semft{width:42px;height:42px;flex:none;border-radius:9px;background:var(--panel-2);object-fit:contain}
.fl .nm{flex:1 1 auto;min-width:0;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl .obs{display:block;font-style:normal;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.fl .qt{flex:none;min-width:38px;text-align:right;font-size:1.15rem;font-weight:680;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fl .qt.f0{color:var(--rose)} .fl .qt.f1{color:var(--butter)}
.fl .qt.f2{color:var(--slate)} .fl .qt.f3{color:var(--mint)}
.fl .mk{flex:none;width:30px;height:30px;border-radius:99px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink-3);font-size:.9rem;line-height:1}
.fl[data-marcado="1"]{background:var(--mint-soft)}
.fl[data-marcado="1"] .mk{background:var(--mint);border-color:var(--mint);color:var(--panel)}
.fl[data-marcado="1"] .nm{font-weight:600}
.fl[data-marcado="1"] .mk{animation:marcou .22s ease-out}
@keyframes marcou{0%{transform:scale(.6)}60%{transform:scale(1.14)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.fl[data-marcado="1"] .mk{animation:none}}

.leva{background:var(--mint-soft);border:1px solid var(--mint-line);border-radius:14px;
  padding:14px 16px;display:flex;flex-direction:column;gap:10px;
  position:sticky;bottom:max(12px, env(safe-area-inset-bottom));z-index:2;
  box-shadow:0 -2px 10px rgba(70,58,40,.05), 0 14px 34px rgba(70,58,40,.14)}
.somas{max-height:44vh;overflow-y:auto;overscroll-behavior-y:contain}
.leva .cap{color:var(--mint)}
.leva .pill{background:var(--mint);border-color:var(--mint);color:var(--panel);font-weight:600}
.nomes-leva{display:flex;flex-wrap:wrap;gap:6px}
.nomes-leva span{font-size:.78rem;background:var(--panel);border:1px solid var(--mint-line);
  border-radius:99px;padding:3px 10px}
.somas{display:flex;flex-direction:column;gap:6px}
.tela[data-tela="imprimir"]{padding-bottom:8px}
.soma{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--mint-line);
  border-radius:10px;padding:6px 10px;min-height:56px}
.soma .nm{flex:1 1 auto;min-width:0;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soma .tem{font-family:var(--mono);font-size:.66rem;color:var(--ink-3);white-space:nowrap}
.soma input{font:inherit;width:78px;min-height:44px;flex:none;text-align:center;
  font-variant-numeric:tabular-nums;touch-action:manipulation;
  padding:7px;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink)}
.leva .btn{min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.soma input:focus-visible{outline:2px solid var(--mint);outline-offset:1px}
.leva .btn[disabled]{opacity:.6;cursor:default}

@media(max-width:720px){
  #chips-fila{display:flex;overflow-x:auto;overscroll-behavior-x:contain;gap:6px}
  #chips-fila .chip{flex:0 0 auto}
  .fl .nm{font-size:.88rem}
}

/* ---------- leva ordenável: a sequência que vai pra máquina ---------- */
.ordem{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;
  max-height:42vh;overflow-y:auto;overscroll-behavior-y:contain}
.lv{display:flex;align-items:center;gap:10px;background:var(--panel);
  border:1px solid var(--mint-line);border-radius:10px;padding:6px 10px;min-height:56px;
  transition:transform .16s ease;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent}
.lv img,.lv .semft{width:34px;height:34px;flex:none;border-radius:8px;background:var(--panel-2);object-fit:contain}
.lv .nm{flex:1 1 auto;min-width:0;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv .pos{flex:none;min-width:18px;font-family:var(--mono);font-size:.72rem;color:var(--mint);
  font-variant-numeric:tabular-nums;font-weight:700}
.alca,.tirar{all:unset;box-sizing:border-box;cursor:pointer;flex:none;display:grid;place-items:center;
  width:44px;min-height:44px;border-radius:9px;color:var(--ink-3);
  -webkit-tap-highlight-color:transparent}
.alca{cursor:grab;touch-action:none;font-size:1.1rem;letter-spacing:-.1em}
.alca:hover,.tirar:hover{background:var(--panel-2);color:var(--ink)}
.alca:focus-visible,.tirar:focus-visible{outline:2px solid var(--mint);outline-offset:-2px}
.tirar{font-size:1.25rem;touch-action:manipulation}
/* enquanto arrasta: a peça sobe e os vizinhos abrem espaço */
.lv.arrastando{transition:none;z-index:3;position:relative;cursor:grabbing;
  box-shadow:0 8px 22px rgba(70,58,40,.18);border-color:var(--mint)}
.ordem.arrastavel{user-select:none;-webkit-user-select:none}
.ordem.arrastavel .lv{will-change:transform}
@media (prefers-reduced-motion:reduce){.lv{transition:none}}

/* como as mesas se dividem: uma linha discreta, não um número grande a mais */
.mesas-obra{font-family:var(--mono);font-size:.7rem;color:var(--ink-3);letter-spacing:.02em}
.mesas-obra b{color:var(--ink-2);font-weight:600}

/* a barra do quadro só existe dentro de .peca; aqui a máquina tem a sua */
.maq-meio .trilho-prod{height:5px;border-radius:99px;background:var(--panel-3);overflow:hidden}
.maq-meio .trilho-prod span{display:block;height:100%;border-radius:99px;background:var(--mint);
  transform-origin:left center;transition:transform .5s ease}
@media (prefers-reduced-motion:reduce){.maq-meio .trilho-prod span{transition:none}}

/* ---------- central de controle: uma superfície, um cartão por máquina ---------- */
.central{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:14px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--sombra)}
.central-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.central-topo .cap{flex:1 1 auto}
/* cartão mais apertado, com cara de controle de produção (pedido dele em 31/08/2026):
   cabem mais na tela e o olho varre o parque inteiro sem rolar */
.grade-maq{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}

.cartao-maq{position:relative;overflow:hidden;background:var(--panel-2);border:1px solid var(--line);
  border-radius:12px;padding:9px 10px;display:flex;flex-direction:column;gap:7px;min-width:0}
.cartao-maq.viva{background:var(--mint-soft);border-color:var(--mint-line)}
.cartao-maq.confere{background:var(--butter-soft);border-color:var(--butter-line)}
.cartao-maq.com-erro{background:var(--rose-soft);border-color:var(--rose-line)}

/* o filamento sendo puxado: a mesma metáfora da fita do painel, agora dizendo
   "esta máquina está andando agora" */
.puxada{position:absolute;inset:0 auto 0 0;width:100%;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(115deg,transparent 0 130px,var(--panel) 130px 190px,transparent 190px 260px);
  animation:puxar 3.4s linear infinite}
@media (prefers-reduced-motion:reduce){.puxada{animation:none;opacity:.22}}

.cartao-maq header{display:flex;align-items:center;gap:7px;position:relative;z-index:1}
.cartao-maq header b{font-size:.9rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cartao-maq header i{font-style:normal;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-left:auto;flex:none}
.cartao-maq .luz{width:8px;height:8px;border-radius:99px;background:var(--panel-3);flex:none}
.cartao-maq.viva .luz{background:var(--mint);animation:pisca 2.6s ease-in-out infinite}
.cartao-maq.confere .luz{background:var(--butter)}
.cartao-maq.com-erro .luz{background:var(--rose)}
@media (prefers-reduced-motion:reduce){.cartao-maq.viva .luz{animation:none}}

.corpo-maq{display:flex;align-items:center;gap:11px;position:relative;z-index:1}
.corpo-maq .anel{width:44px;height:44px;transition:background .6s ease}
.corpo-maq .anel > span{width:33px;height:33px;font-size:11px}
.dados-maq{display:flex;flex-direction:column;gap:2px;min-width:0}
.linha-grande{font-size:.78rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linha-grande b{font-size:1.12rem;font-weight:680;color:var(--ink);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.linha-grande b.ocioso{font-size:.95rem;font-weight:600;color:var(--ink-3)}
.linha-grande i{font-style:normal;font-size:.68rem;color:var(--ink-3)}
.linha-media{font-size:.7rem;color:var(--ink-2);white-space:nowrap}
.linha-peq{font-family:var(--mono);font-size:.6rem;color:var(--ink-3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

.mesa-maq{display:flex;flex-direction:column;gap:5px;position:relative;z-index:1;min-width:0}
.mesa-maq .arq{font-size:.72rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vinculo{all:unset;box-sizing:border-box;cursor:pointer;font-size:.73rem;padding:5px 9px;min-height:32px;
  display:flex;align-items:center;border-radius:8px;border:1px dashed var(--line);color:var(--ink-2);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.vinculo.firme{border-style:solid;border-color:var(--mint-line);background:var(--panel);color:var(--mint);font-weight:600}
.vinculo.palpite{border-color:var(--butter-line);color:var(--butter);background:var(--panel)}
.vinculo.vazio{justify-content:center;color:var(--ink-3)}
.vinculo:hover{background:var(--panel-3)}
.vinculo:focus-visible{outline:2px solid var(--slate);outline-offset:1px}

.cartao-maq .ams{display:flex;gap:3px;position:relative;z-index:1}
.cartao-maq .ams .tray{width:100%;height:8px;border-radius:3px;border:1px solid var(--line);
  background:var(--panel);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.ams .tray.vazio{background:repeating-linear-gradient(45deg,var(--panel),var(--panel) 2px,var(--panel-3) 2px,var(--panel-3) 4px)}
.ams .tray.usando{outline:2px solid var(--mint);outline-offset:1px}

/* conferência: o número já vem pronto, o toque é só pra dizer que saiu */
.conferir{width:100%;justify-content:center;position:relative;z-index:1}
.conferencia{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;
  background:var(--panel);border:1px solid var(--butter-line);border-radius:10px;padding:10px}
.cf-pergunta{font-size:.8rem;color:var(--ink-2)}
/* a referência da mesa: dado, não pergunta — fica menor e em tabular pra ler de relance */
.cf-gasto{font-size:.72rem;color:var(--ink-2);margin-top:2px;
  font-variant-numeric:tabular-nums}
/* A peça vem antes do número: o projeto sozinho não diz onde a contagem entra —
   LuxPower é inversor E bateria, e cada um tem a sua linha de Produção 3D. Alvo de
   44px porque isso é decidido de pé, na oficina, com a mesa ainda quente. */
.cf-peca{display:flex;flex-direction:column;gap:6px;padding-bottom:8px;
  border-bottom:1px solid var(--line)}
.conferencia .opcoes{display:flex;flex-wrap:wrap;gap:5px}
.conferencia .chip{font-size:.74rem;min-height:44px;display:inline-flex;align-items:center}
.conferencia .mint-chip{border-color:var(--mint-line);color:var(--mint);background:var(--mint-soft)}
/* "trocar" é escape, não caminho principal: cabe no fim da frase sem virar botão */
.cf-trocar{all:unset;cursor:pointer;font-size:.7rem;color:var(--mint);
  text-decoration:underline;padding:6px;margin:-6px}
.cf-linha{display:flex;gap:6px}
.cf-linha input{font:inherit;width:100%;min-height:44px;text-align:center;font-variant-numeric:tabular-nums;
  border-radius:9px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink)}
.cf-tots{display:flex;flex-direction:column;gap:5px;max-height:34vh;overflow-y:auto;overscroll-behavior-y:contain}
.cf-tot{display:flex;align-items:center;gap:8px;font-size:.78rem}
.cf-tot span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-tot input{font:inherit;width:70px;min-height:40px;flex:none;text-align:center;
  font-variant-numeric:tabular-nums;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink)}
.cf-botoes{display:flex;gap:6px;flex-wrap:wrap}
.cf-botoes .btn{flex:1 1 auto;min-width:96px;justify-content:center;min-height:44px}
/* com o "Não contei" são três, e três não cabem em 375px. Confirmar toma a primeira
   linha inteira pra continuar sendo o botão óbvio; os dois secundários dividem a
   segunda. Com dois botões (a conferência dos minitots) nada disso vale. */
.cf-botoes:has(.btn:nth-child(3)) .btn.mint{flex:1 1 100%}

.escolher{position:relative;z-index:1;border-top:1px solid var(--line);padding-top:8px;
  display:flex;flex-direction:column;gap:6px}
.escolher .opcoes{display:flex;flex-wrap:wrap;gap:5px}
.escolher .chip{font-size:.72rem}
.escolher .mint-chip{border-color:var(--mint-line);color:var(--mint);background:var(--mint-soft)}
.escolher .dica{font-size:.68rem;color:var(--ink-3)}
.escolher .busca-tot{font:inherit;font-size:.82rem;min-height:44px;padding:0 11px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink);width:100%;box-sizing:border-box}
/* a lista rola dentro da caixa: 138 bichos não podem empurrar o cartão da máquina
   pra fora da tela do celular */
.escolher .tots-lista{max-height:32vh;overflow-y:auto;overscroll-behavior-y:contain;align-content:flex-start}
.escolher .chip{min-height:40px;display:inline-flex;align-items:center;gap:5px}
/* marcado precisa gritar: o chip mint sozinho quase some no verde do cartão vivo */
.escolher .mint-chip{border-color:var(--mint);box-shadow:inset 0 0 0 1px var(--mint);font-weight:640}
.escolher .mint-chip::before{content:"✓";font-weight:700;margin-right:1px}
.est-tot{font-style:normal;font-family:var(--mono);font-size:.6rem;color:var(--ink-3);
  background:var(--panel-2);border-radius:99px;padding:1px 5px}
.escolher .mint-chip .est-tot{color:var(--mint)}

/* ---------- prévia no painel ---------- */
.previa{display:flex;gap:9px;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:2px}
.mini-maq{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:9px;flex:0 0 auto;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 13px 8px 9px;
  box-shadow:var(--sombra)}
.mini-maq .anel{width:42px;height:42px}
.mini-maq .anel > span{width:32px;height:32px;font-size:10.5px}
.mini-maq b{display:block;font-size:.82rem;font-weight:650;white-space:nowrap}
.mini-maq i{display:block;font-style:normal;font-family:var(--mono);font-size:.6rem;color:var(--ink-3);white-space:nowrap}
.mini-maq.espera{cursor:pointer;background:var(--butter-soft);border-color:var(--butter-line);
  touch-action:manipulation}
.mini-maq.espera:hover{background:var(--panel)}
.mini-maq.espera:focus-visible{outline:2px solid var(--butter);outline-offset:1px}

/* pausada: a máquina está esperando gente, e isso tem que saltar */
.cartao-maq.pausa{background:var(--rose-soft);border-color:var(--rose-line)}
.cartao-maq.pausa .luz{background:var(--rose);animation:pisca 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.cartao-maq.pausa .luz{animation:none}}
.linha-grande b.parada{color:var(--rose);font-size:.95rem;letter-spacing:.06em}
.mini-maq.parada{background:var(--rose-soft);border-color:var(--rose-line)}

/* ================= QUANTIFICAÇÃO DE MATERIAL =================
   O painel é UMA superfície com divisões internas — não uma pilha de cartões.
   Espelha o vocabulário das obras (números em faixa, barras de cor) para quem
   vem da aba Produção reconhecer na hora. */
.quant{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;
  display:flex;flex-direction:column;gap:14px;box-shadow:var(--sombra);margin-bottom:14px}
.quant-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.quant-topo h3{font-size:1rem;font-weight:680}
.quant-topo .qm{font-family:var(--mono);font-size:.68rem;color:var(--ink-3);margin-top:2px}
.quant.vazia{gap:8px}

/* a fita: o custo inteiro numa linha só, cada pedaço no tamanho do que pesa */
.fita-custo{display:flex;height:12px;border-radius:99px;overflow:hidden;background:var(--panel-3)}
.fita-custo span{display:block;min-width:3px}
.f-fil{background:var(--slate-line)}
.f-ins{background:var(--butter-line)}
.f-maq{background:var(--mint-line)}
.legenda-custo{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.82rem;color:var(--ink-2);margin-top:-6px}
.legenda-custo span{display:inline-flex;align-items:center;gap:6px}
.legenda-custo i{width:9px;height:9px;border-radius:3px;display:inline-block;flex:none}
.legenda-custo b{font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.legenda-custo em{font-style:normal;font-family:var(--mono);font-size:.68rem;color:var(--ink-3)}

.quant-secao{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:13px}
.quant .cor-linha .rolos{font-family:var(--mono);font-size:.7rem;color:var(--ink-3);
  white-space:nowrap;flex:0 0 auto;font-variant-numeric:tabular-nums}
.quant .cor-linha .nome{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quant .cor-linha .g{flex:0 0 auto}

.linha-peca,.linha-insumo{background:var(--panel-2);border-radius:10px;padding:9px 12px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.linha-peca b,.linha-insumo b{font-size:.9rem;font-weight:650}
.linha-peca .mesas-obra{font-family:var(--mono);font-size:.72rem;color:var(--slate);
  background:var(--slate-soft);border-radius:99px;padding:1px 9px}
.linha-peca .detalhe,.linha-insumo .detalhe{flex:1 1 100%;font-size:.8rem;color:var(--ink-2)}
.linha-insumo .valor{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:650;font-size:.88rem}
.linha-insumo .valor.falta{color:var(--rose);font-weight:500;font-size:.8rem}
.linha-insumo .detalhe{flex:0 1 auto}

.quant-rodape{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:11px;
  font-family:var(--mono);font-size:.65rem;color:var(--ink-3)}

/* ---------- prints do fatiador ---------- */
.fatiamento .prints{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.fatiamento .print{position:relative;display:inline-block;line-height:0}
.fatiamento .print img{width:96px;height:72px;object-fit:cover;border-radius:9px;
  border:1px solid var(--line);background:var(--panel-2)}
.tira-print{all:unset;box-sizing:border-box;position:absolute;top:-6px;right:-6px;cursor:pointer;
  width:22px;height:22px;border-radius:99px;background:var(--panel);border:1px solid var(--line);
  color:var(--ink-2);display:grid;place-items:center;font-size:.9rem;line-height:1;box-shadow:var(--sombra)}
.tira-print:hover{background:var(--rose-soft);border-color:var(--rose-line);color:var(--rose)}
.tira-print:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
.tira-print[disabled]{opacity:.4;cursor:default}
.fatiamento .campo-l{border-bottom:none;padding:0}
.fatiamento .campo-l input{flex:1 1 auto;text-align:left}
/* no celular o campo respira em duas linhas: o rótulo em cima, o campo inteiro embaixo */
@media (max-width:560px){
  .fatiamento .campo-l{flex-direction:column;align-items:stretch;gap:5px}
  .fatiamento .campo-l input{width:100%}
}

/* o 5º é o carretel externo: separado do AMS por um respiro e marcado por baixo */
.cartao-maq .ams .tray.externo{margin-left:7px;position:relative;flex:0 0 26px}
.cartao-maq .ams .tray.externo::after{content:"EXT";position:absolute;left:0;right:0;top:10px;
  font:600 5.5px/1 var(--mono);letter-spacing:.09em;text-align:center;color:var(--ink-3)}
/* no celular a linha da cor vira duas: nome e peso em cima, barra e compra embaixo —
   truncar o nome da cor pra caber tudo numa linha só deixava "Ver…" */
@media (max-width:560px){
  .quant .cor-linha{display:grid;grid-template-columns:13px 1fr auto;
    grid-template-areas:"bolinha nome peso" ". barra rolos";column-gap:9px;row-gap:3px;align-items:center}
  .quant .cor-linha .bolinha{grid-area:bolinha}
  .quant .cor-linha .nome{grid-area:nome;white-space:normal;overflow:visible}
  .quant .cor-linha .g{grid-area:peso}
  .quant .cor-linha .barra{grid-area:barra;flex:none;width:100%}
  .quant .cor-linha .rolos{grid-area:rolos;font-size:.66rem}
}

/* projeto em produção que ainda não foi quantificado: mesmo quadro, menos peso */
.obra.sem-quant{border-style:dashed;background:var(--panel-2)}
.obra.sem-quant .ritmo{border-top:none;padding-top:0}
.recado-leva{background:var(--butter-soft);border:1px solid var(--butter-line);color:var(--butter);
  border-radius:11px;padding:9px 13px;font-size:.84rem;margin-bottom:12px}

/* ---------- Imprimir: a mesa (20/08, redesenhada no mesmo dia) ----------
   Eixo invertido a pedido dele: as IMPRESSORAS são a superfície principal e o
   catálogo virou quadradinho numa gaveta fechada. O motivo é de uso, não de
   gosto — a fila se monta abrindo a máquina e pegando da sugestão; escolher um
   tot na mão é exceção (bicho específico ou cor mal identificada). */
.sug-porque{margin:0;font-size:.78rem;color:var(--ink-2);line-height:1.45}
.sug-porque:empty{display:none}
.alerta-cor{color:var(--rose);font-weight:700}

.parque{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:9px}
.maq-mesa{all:unset;box-sizing:border-box;cursor:pointer;position:relative;overflow:hidden;
  display:grid;grid-template-rows:auto auto 1fr auto auto;gap:5px;
  padding:12px 13px 11px;border-radius:14px;border:1px solid var(--line);
  background:var(--panel);box-shadow:var(--sombra);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.maq-mesa:hover{background:var(--panel-2)}
.maq-mesa:focus-visible{outline:2px solid var(--slate);outline-offset:2px}
.maq-mesa header{display:flex;align-items:center;gap:6px;min-width:0}
.maq-mesa header b{font-size:.82rem;font-weight:650;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.maq-mesa header i{font-style:normal;font-family:var(--mono);font-size:.56rem;
  letter-spacing:.08em;color:var(--ink-3);flex:none}
.maq-mesa .luz{width:8px;height:8px;border-radius:99px;background:var(--ink-3);opacity:.4;flex:none}
.maq-mesa.viva .luz{background:var(--mint);opacity:1}
.maq-mesa.pausa .luz{background:var(--rose);opacity:1}
.maq-mesa.pausa{border-color:var(--rose-line)}
.maq-mesa .tira{display:flex;gap:3px}
.maq-mesa .tira i{flex:1 1 0;max-width:38px;height:10px;border-radius:3px;background:var(--c);
  border:1px solid rgba(0,0,0,.22)}
.maq-mesa .tira i.ext{border-style:dashed;border-color:var(--ink-3)}
.maq-mesa .tira i.duv{box-shadow:0 0 0 1px var(--butter) inset}
.maq-mesa .numero{font-size:2rem;font-weight:700;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;margin-top:3px}
.numero.n-fila{color:var(--mint)}
.numero.n-cabe{color:var(--ink-2)}
.numero.n-trava{color:var(--rose)}
.maq-mesa .rot{font-family:var(--mono);font-size:.58rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.3}
.maq-mesa .estado-mesa{font-size:.68rem;color:var(--ink-3);border-top:1px solid var(--line);
  padding-top:6px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.maq-mesa.viva .estado-mesa{color:var(--mint)}
.maq-mesa.pausa .estado-mesa{color:var(--rose);font-weight:600}

/* o catálogo, fechado por padrão */
.gaveta-cat{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--sombra);overflow:hidden}
.gaveta-cat > summary{cursor:pointer;list-style:none;min-height:52px;display:flex;
  align-items:center;gap:8px;padding:0 14px;font-size:.86rem;font-weight:600;
  color:var(--ink-2);-webkit-tap-highlight-color:transparent}
.gaveta-cat > summary::-webkit-details-marker{display:none}
.gaveta-cat > summary::after{content:"▾";margin-left:auto;color:var(--ink-3);font-size:.8rem}
.gaveta-cat[open] > summary::after{content:"▴"}
.gaveta-cat > summary:hover{background:var(--panel-2)}
.gaveta-cat > summary:focus-visible{outline:2px solid var(--slate);outline-offset:-2px}
.gaveta-cat .chips{padding:0 12px;margin-top:8px}
.gaveta-cat .conta-mini{display:block;padding:8px 14px 10px;font-size:.72rem;color:var(--ink-3)}
.gaveta-cat .contato{border:0;border-radius:0;box-shadow:none;border-top:1px solid var(--line)}

/* quadradinho do catálogo: o mesmo da folha de contato, com o selo da máquina */
.na-mesa-mini{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  touch-action:manipulation;scroll-margin-bottom:190px}
.na-mesa-mini .qt.f0{color:var(--rose)} .na-mesa-mini .qt.f1{color:var(--butter)}
.na-mesa-mini .qt.f2{color:var(--slate)} .na-mesa-mini .qt.f3{color:var(--mint)}
.na-mesa-mini[data-posto="1"]{background:var(--mint-soft)}
.selo{position:absolute;top:5px;left:5px;max-width:calc(100% - 10px);
  font-family:var(--mono);font-size:.53rem;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 6px;border-radius:99px;background:var(--mint);color:var(--panel);
  font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selo.falta{background:var(--rose-soft);color:var(--rose);border:1px solid var(--rose-line)}
.selo.fora{background:var(--panel-2);color:var(--ink-3);border:1px solid var(--line)}

/* a folha que sobe do rodapé quando se toca num tot: numa grade, abrir a fileira
   embaixo do quadradinho quebrava a linha e empurrava o alvo do toque seguinte */
.folha{position:fixed;left:8px;right:8px;bottom:max(8px, env(safe-area-inset-bottom));
  z-index:40;background:var(--panel);border:1px solid var(--mint-line);border-radius:16px;
  padding:12px 12px 14px;box-shadow:0 -2px 12px rgba(70,58,40,.06), 0 18px 44px rgba(70,58,40,.22);
  max-height:66vh;overflow-y:auto;overscroll-behavior:contain}
.fh-topo{display:flex;align-items:baseline;gap:9px;margin-bottom:10px}
.fh-topo b{font-size:.95rem}
.fh-obs{flex:1 1 auto;min-width:0;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fh-fechar{all:unset;cursor:pointer;flex:none;width:44px;min-height:44px;margin:-10px -6px -10px 0;
  display:grid;place-items:center;border-radius:10px;color:var(--ink-3);font-size:1.3rem;
  -webkit-tap-highlight-color:transparent}
.fh-fechar:hover{background:var(--panel-2);color:var(--ink)}
.fh-fechar:focus-visible{outline:2px solid var(--slate);outline-offset:-2px}

/* a fileira das máquinas: o caminho que nunca falha — alvo de 44px, senão ela
   falha justamente quando o arrasto já falhou */
.picker{display:flex;flex-wrap:wrap;gap:6px}
.picker .chip{font-size:.78rem;min-height:44px;display:inline-flex;align-items:center;gap:5px}
.picker .chip.fraco{opacity:.62}
.picker .chip .falta{font-style:normal;font-family:var(--mono);font-size:.58rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--rose)}
/* cabe, mas não na cor de referência — é ressalva, não impedimento: ardósia, não terracota */
.picker .chip .troca{font-style:normal;font-family:var(--mono);font-size:.58rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--slate)}
.picker.cores{padding:10px 12px;border-radius:12px;background:var(--panel-2);
  border:1px solid var(--line);align-items:center}
.picker.cores .chip{min-height:44px;display:inline-flex;align-items:center}
.picker.cores .dica{flex:1 1 100%;margin:0}
.amostra{display:inline-block;width:13px;height:13px;border-radius:4px;background:var(--c);
  border:1px solid rgba(0,0,0,.25);vertical-align:-2px}

/* ---------- alvos do arrasto: só existem enquanto o dedo está arrastando ---------- */
.alvos{position:fixed;left:8px;right:8px;bottom:max(8px, env(safe-area-inset-bottom));
  z-index:50;display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;
  padding:9px;background:var(--panel);border:1px solid var(--mint);border-radius:14px;
  box-shadow:0 18px 44px rgba(70,58,40,.24);
  opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none}
.soltando .alvos{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mesa{all:unset;box-sizing:border-box;position:relative;flex:1 0 84px;min-height:58px;
  display:grid;grid-template-rows:auto auto;gap:3px;align-content:center;
  padding:7px 9px;border-radius:11px;border:1px solid var(--line);background:var(--panel-2)}
.mesa b{font-size:.74rem;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mesa .pontos{display:flex;gap:3px}
.mesa .pontos i{width:9px;height:9px;border-radius:3px;background:var(--c);
  border:1px solid rgba(0,0,0,.22)}
.mesa .pontos i.ext{border-style:dashed;border-color:var(--ink-3)}
.mesa .cont{position:absolute;right:9px;top:7px;font-size:.9rem;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ink-3)}
.mesa .cont.tem{color:var(--mint)}
/* alvo sob o dedo: cresce e acende, pra saber onde vai cair */
.mesa.alvo{background:var(--mint-soft);border-color:var(--mint);
  box-shadow:0 0 0 2px var(--mint) inset}

/* o fantasma que segue o dedo */
.fantasma{position:fixed;left:0;top:0;z-index:60;pointer-events:none;
  display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:99px;
  background:var(--panel);border:1px solid var(--mint);color:var(--ink);
  font-size:.82rem;font-weight:600;box-shadow:0 10px 26px rgba(70,58,40,.26);
  will-change:transform}
.fantasma img{width:34px;height:auto;aspect-ratio:1;border-radius:8px;
  object-fit:contain;background:var(--panel-2)}
.saindo-da-lista{opacity:.4}

/* ---------- a fila de uma máquina, aberta por cima ---------- */
.caixa-aberta .sug-porque,.caixa-aberta .parque,.caixa-aberta .gaveta-cat{display:none}
.caixa-fila{display:flex;flex-direction:column;gap:11px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:13px 14px;box-shadow:var(--sombra)}
.caixa-fila .dica{font-size:.78rem;color:var(--ink-2);margin:0;line-height:1.5}
.cx-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cx-topo b{font-size:1rem}
.voltar-cx{all:unset;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;
  padding-right:6px;color:var(--slate);font-size:.86rem;font-weight:600;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.voltar-cx:focus-visible{outline:2px solid var(--slate);outline-offset:2px;border-radius:8px}
.cx-estado{margin-left:auto;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}

.cx-cores{display:flex;flex-wrap:wrap;gap:6px}
.rolo{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;
  gap:6px;min-height:44px;padding:0 11px;border-radius:99px;border:1px solid var(--line);
  background:var(--panel-2);font-size:.76rem;color:var(--ink-2);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.rolo:hover{background:var(--panel)}
.rolo:focus-visible{outline:2px solid var(--slate);outline-offset:2px}
.rolo i{width:13px;height:13px;border-radius:4px;background:var(--c);
  border:1px solid rgba(0,0,0,.25)}
.rolo em{font-style:normal;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;
  color:var(--ink-3)}
.rolo.duvida{border-color:var(--butter-line);background:var(--butter-soft);color:var(--butter)}
.rolo.ok{border-color:var(--mint-line)}
.cor-dica{margin:-4px 0 0;font-size:.72rem;color:var(--ink-3)}

.caixa-fila .ordem{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
/* o aviso de cor vai EMBAIXO do nome: inline ele comia o nome do bicho */
.lv .obs{display:block;font-style:normal;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv .obs.alerta{color:var(--rose)}
.lv .obs.livre{color:var(--slate)}
.lv.travada{background:var(--slate-soft);border-color:var(--slate-line)}
.lv.travada .nm{font-weight:600}
.lv.sem-cor{border-color:var(--rose-line)}
.alca.fixa{display:grid;place-items:center;width:34px;min-height:44px;color:var(--slate);
  font-size:.7rem}

.sug-head{margin-top:2px}
/* Rola com a página. A caixa aberta esconde o parque e o catálogo, então ela É a
   tela — e desde que a sugestão saiu inteira (e em dois grupos), dois scrollers
   próprios de 46vh dentro de uma página que já rola davam três superfícies de
   rolagem competindo pelo mesmo dedo. */
.sugestoes{display:flex;flex-direction:column;gap:5px}
.sg{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;
  min-height:52px;padding:5px 10px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel-2);content-visibility:auto;contain-intrinsic-size:auto 52px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.sg:hover{background:var(--panel)}
.sg,.caixa-fila .lv{scroll-margin-bottom:190px}
.sg:focus-visible{outline:2px solid var(--slate);outline-offset:-2px}
.sg img,.sg .semft{width:36px;height:auto;aspect-ratio:1;flex:none;
  border-radius:8px;background:var(--panel);object-fit:contain}
.sg .nm{flex:1 1 auto;min-width:0;font-size:.86rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sg .qt{flex:none;min-width:30px;text-align:right;font-size:1rem;font-weight:680;
  font-variant-numeric:tabular-nums}
.sg .qt.f0{color:var(--rose)} .sg .qt.f1{color:var(--butter)}
.sg .qt.f2{color:var(--slate)} .sg .qt.f3{color:var(--mint)}
.sg .serve{flex:none;font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);max-width:96px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sg .serve.livre{color:var(--slate)}

@media (min-width:760px){
  .parque{grid-template-columns:repeat(auto-fill,minmax(184px,1fr))}
  .sugestoes{display:grid;grid-template-columns:repeat(2,1fr)}
  .folha,.alvos{left:auto;right:16px;width:min(520px,calc(100% - 32px))}
}
@media (prefers-reduced-motion:no-preference){
  .maq-mesa{transition:background .14s ease,transform .12s ease}
  .maq-mesa:active{transform:scale(.985)}
  .mesa{transition:background .14s ease,box-shadow .14s ease,transform .12s ease}
  .mesa.alvo{transform:translateY(-3px)}
  .alvos{transition:opacity .16s ease,transform .18s ease,visibility 0s}
  .folha{animation:subir .2s ease-out}
  @keyframes subir{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
}

/* a fila que a mesa mandou, no cartão da máquina */
.fila-maq{display:flex;align-items:baseline;gap:8px;padding:7px 10px;border-radius:10px;
  background:var(--mint-soft);border:1px solid var(--mint-line);min-width:0}
.cap-fila{flex:none;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mint)}
.cap-fila b{font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums}
.fila-maq .prox{flex:1 1 auto;min-width:0;font-size:.76rem;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cor-dica{margin:-4px 0 0;font-size:.72rem;color:var(--ink-3)}
.caixa-fila .dica{font-size:.78rem;color:var(--ink-2);margin:0;line-height:1.5}


/* ============================================================================
   PAINEL — a mesa de controle  (20/08/2026)
   ----------------------------------------------------------------------------
   A bancada continua sendo UMA superfície com fios por dentro. O que mudou é o
   que ela guarda: em cima, o parque inteiro numa linha de tempo; embaixo, o que
   pede decisão. Nada de cartão solto empilhado.

   A JORNADA é o elemento novo. Cada máquina é uma pista na MESMA escala de
   tempo. A barra já foi pintada com a cor do rolo engatado, mas a casa roda preto
   fixo em quase toda carga: quase toda barra saía preta (L* 10 contra L* 22 do
   oliva, ou seja, invisível) e a branca estourava — a cor não informava nada.
   Desde 21/08/2026 são DUAS coisas: a barra é a CONDIÇÃO (broto rodando, cobre
   esperando conferência, terracota pausada) e o chip da ponta esquerda é o ROLO.
   Cada elemento com um trabalho só. Régua e pistas compartilham
   `--cols`: são grids irmãos, e é isso que faz as marcas de hora caírem em cima
   do lugar certo da barra.

   Animação: só transform/opacity, e tudo cai no prefers-reduced-motion.
   ========================================================================== */

#jornada{grid-column:1/-1;border-color:transparent}
.cela.larga{grid-column:1/-1}
/* se o Notion não respondeu, a célula fica vazia — e célula vazia é um retângulo
   à toa, não um bloco carregando */
.bancada > .cela:empty,.atalhos:empty{display:none}

/* o "/6" ao lado do número grande: mesmo peso ótico, um terço do tamanho */
.heroi .num .sufixo{font-size:.4em;font-weight:600;letter-spacing:0;color:var(--oliva-ink-2)}

/* --- a jornada ------------------------------------------------------------ */
.jornada{--cols:minmax(88px,116px) 1fr minmax(62px,86px);margin-top:14px}
.regua,.pista{display:grid;grid-template-columns:var(--cols);column-gap:10px}

.regua{align-items:end;padding-bottom:3px}
.regua .rot{font-family:var(--mono);font-size:.55rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--oliva-ink-2)}
.regua .rot.fim{text-align:right}
.regua .marcas{position:relative;height:13px;border-bottom:1px solid var(--oliva-fio)}
.regua .marcas i{position:absolute;top:0;bottom:0;border-left:1px solid var(--oliva-fio)}
.regua .marcas i b{position:absolute;left:4px;bottom:0;font-family:var(--mono);font-weight:500;
  font-size:.6rem;letter-spacing:.06em;color:var(--oliva-ink-2);white-space:nowrap}
.regua .marcas i.virada{border-left-color:var(--oliva-cobre)}
.regua .marcas i.virada b{color:var(--oliva-cobre)}

.pista{align-items:center;row-gap:4px;padding:8px 0;border-top:1px solid var(--oliva-fio)}
.pista .pi-nome{grid-column:1;grid-row:1/3;display:flex;flex-direction:column;min-width:0;
  font-size:.85rem;font-weight:620;color:var(--oliva-ink);letter-spacing:-.01em}
.pista .pi-nome i{font-style:normal;font-family:var(--mono);font-size:.55rem;
  letter-spacing:.12em;color:var(--oliva-ink-2)}
.pista .pi-obra{grid-column:2;grid-row:1;min-width:0;font-size:.72rem;color:var(--oliva-ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pista .pi-tempo{grid-column:3;grid-row:1/3;display:flex;flex-direction:column;align-items:flex-end;
  text-align:right;min-width:0;overflow:hidden}
.pista .pi-tempo b{font-size:.92rem;font-weight:650;color:var(--oliva-ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.pista .pi-tempo i{font-style:normal;font-family:var(--mono);font-size:.56rem;
  color:var(--oliva-ink-2);white-space:nowrap}

/* a pista vazia não some: fica pontilhada, dizendo que há tempo disponível ali */
.pista .pi-trilha{grid-column:2;grid-row:2;position:relative;height:10px;border-radius:99px;
  background:rgba(250,245,236,.10);overflow:hidden}
.pista.pi-livre .pi-trilha{
  background-image:repeating-linear-gradient(90deg,rgba(250,245,236,.17) 0 2px,transparent 2px 9px)}
/* A barra diz a CONDIÇÃO, não o material — ver a nota grande lá em cima.
   `overflow:hidden` existe pro brilho ficar preso dentro da barra: o reflexo é
   da barra, não da pista vazia. */
.pista .pi-barra{position:absolute;left:0;top:0;bottom:0;border-radius:99px;overflow:hidden;
  /* piso de 34px: o chip ocupa 16 da ponta, e a barra da leva esperando conferência
     tem só 5% — sem isso o chip cobria a cor do estado inteira e a barra sumia. */
  min-width:34px;
  background-color:var(--oliva-broto);
  box-shadow:inset 0 0 0 1px rgba(250,245,236,.32)}

/* O CHIP é o rolo. Mora na ponta esquerda, por cima da barra E por cima da pista
   vazia — dá pra varrer a coluna e ver o que está engatado em cada máquina,
   inclusive nas paradas. O anel claro é o que salva os dois extremos: sem ele o
   preto some no oliva e o branco estoura. */
.pista .pi-chip{position:absolute;left:0;top:0;bottom:0;width:16px;border-radius:99px;z-index:1;
  box-shadow:inset 0 0 0 1px rgba(250,245,236,.45)}

/* O brilho passa UMA vez e descansa: ~3,4s atravessando, ~4,6s parado.
   Antes era um gradiente repetido arrastado sem parar, e engasgava a cada volta:
   o passo do desenho (260px) só fecha o laço se medido NO EIXO do gradiente, e a
   100° um translate de 260px em X anda 260·sen(100°) = 256px. Sobravam 4px por
   volta — o tranco. Agora é uma faixa só atravessando, sem laço pra fechar, e a
   opacidade acende e apaga nas pontas pra ninguém ver a faixa nascer nem morrer. */
.pista.pi-rodando .pi-barra::after{
  content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;pointer-events:none;
  will-change:transform,opacity;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.42) 50%,rgba(255,255,255,0));
  animation:passar 8s linear infinite;
}
/* -40% -> 100% da barra = 140% da barra = 350% da própria faixa */
@keyframes passar{
  0%  {transform:translateX(0);opacity:0}
  4%  {opacity:0}
  14% {opacity:1}
  32% {opacity:1}
  42% {transform:translateX(350%);opacity:0}
  100%{transform:translateX(350%);opacity:0}
}
@media (prefers-reduced-motion:reduce){.pista.pi-rodando .pi-barra::after{animation:none;opacity:0}}

/* pausada: terracota clara com hachura ESCURA — a hachura antiga era clara
   porque a barra era escura; inverteu junto com a cor. */
.pista.pi-pausada .pi-barra{background-color:var(--oliva-terracota);
  background-image:repeating-linear-gradient(115deg,transparent 0 5px,rgba(46,55,34,.24) 5px 10px)}
.pista.pi-pausada .pi-tempo b{color:var(--oliva-terracota)}
.pista.pi-confere .pi-barra{background-color:var(--oliva-cobre)}
.pista.pi-confere .pi-tempo b{color:var(--oliva-cobre)}
.pista.pi-livre .pi-tempo b{color:var(--oliva-ink-2);font-weight:500}

/* --- precisa de você -------------------------------------------------------
   O nível é um fio na lateral, igual à tarja de prazo do cartão de projeto —
   a mesma gramática, então não precisa de legenda. */
.chamado{position:relative;display:grid;grid-template-columns:1fr auto;gap:2px 10px;
  align-items:center;padding:11px 0 11px 15px;border-bottom:1px solid var(--line)}
.chamado:last-child{border-bottom:none}
.chamado::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;
  border-radius:99px;background:var(--ink-3)}
.chamado.urgente::before{background:var(--rose)}
.chamado.atencao::before{background:var(--butter)}
.chamado.chance::before{background:var(--slate)}
.chamado .txt{min-width:0}
.chamado .t{font-size:.88rem;font-weight:580;line-height:1.32}
/* terracota e cobre são vizinhos demais pra separar níveis só pelo fio da
   lateral: o urgente leva o título junto, e nunca são muitos de uma vez */
.chamado.urgente .t{color:var(--rose)}
.chamado .d{font-size:.75rem;color:var(--ink-2);line-height:1.4}
.chamado .conferencia{grid-column:1/-1;margin-top:9px}
.mais{font-family:var(--mono);font-size:.65rem;color:var(--ink-3);padding-top:9px}

.btn.curto{padding:8px 13px;font-size:.8rem;border-radius:9px}
.seta{all:unset;box-sizing:border-box;cursor:pointer;width:34px;height:34px;border-radius:9px;
  display:grid;place-items:center;color:var(--ink-3);font-size:.95rem}
.seta:hover{background:var(--panel-2);color:var(--ink)}
.seta:focus-visible{outline:2px solid var(--slate);outline-offset:1px}

.link-aba{all:unset;box-sizing:border-box;cursor:pointer;font-size:.72rem;color:var(--ink-3);
  padding:4px 6px;border-radius:7px;white-space:nowrap}
.link-aba:hover{background:var(--panel-2);color:var(--ink)}
.link-aba:focus-visible{outline:2px solid var(--slate);outline-offset:1px}

/* --- em produção ---------------------------------------------------------- */
.obra-linha{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:6px;width:100%;
  padding:11px 0;border-bottom:1px solid var(--line)}
.obra-linha:last-child{border-bottom:none}
.obra-linha:focus-visible{outline:2px solid var(--slate);outline-offset:2px;border-radius:9px}
.obra-linha .cab{display:grid;grid-template-columns:auto 1fr auto;gap:7px;align-items:baseline}
.obra-linha .cab b{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;color:var(--ink);
  background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:1px 5px}
.obra-linha .cab > span{font-size:.86rem;font-weight:560;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prazo-min{font-style:normal;font-family:var(--mono);font-size:.63rem;letter-spacing:.05em;white-space:nowrap}
.prazo-min.p-aperta{color:var(--rose)}
.prazo-min.p-perto{color:var(--butter)}
.prazo-min.p-folga{color:var(--mint)}
.andamento{height:12px;border-radius:5px;background:var(--panel-3);overflow:hidden}
.andamento > span{display:block;height:100%;background:var(--mint);transform-origin:left center}
.obra-linha .det{font-size:.76rem;color:var(--ink-2)}
.obra-linha .det b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}
.obra-linha .pecas-obra{font-family:var(--mono);font-size:.63rem;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.obra-linha.vaga .cab b{border-style:dashed}
.soma-obras{font-size:.78rem;color:var(--ink-2);padding-top:11px;border-top:1px solid var(--line);margin-top:2px}
.soma-obras b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}

/* --- funil, carteira, estoque: duas colunas dentro da mesma célula --------- */
.duas{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:start}
.det{font-size:.75rem;color:var(--ink-2);line-height:1.45}
.tres-estados{display:flex;gap:7px;flex-wrap:wrap;margin:4px 0 9px}
.est{display:inline-flex;align-items:baseline;gap:5px;font-size:.75rem;color:var(--ink-2);
  background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:6px 10px}
.est b{font-size:1rem;font-weight:660;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.est.tenho{background:var(--mint-soft);border-color:var(--mint-line)}
.est.tenho b{color:var(--mint)}
.est.acabando{background:var(--butter-soft);border-color:var(--butter-line)}
.est.acabando b{color:var(--butter)}
.est.comprar,.est.zerado{background:var(--rose-soft);border-color:var(--rose-line)}
.est.comprar b,.est.zerado b{color:var(--rose)}

/* --- de onde se sai daqui -------------------------------------------------- */
.atalhos{grid-column:1/-1;background:transparent;border:none;box-shadow:none;padding:4px 4px 0;
  display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.atalho{all:unset;box-sizing:border-box;cursor:pointer;font-size:.78rem;color:var(--ink-2);
  padding:8px 14px;border-radius:99px;border:1px solid var(--line);background:var(--panel)}
.atalho:hover{background:var(--panel-2);color:var(--ink)}
.atalho:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
.atalhos .lido{margin-left:auto;font-family:var(--mono);font-size:.63rem;color:var(--ink-3)}
.atalhos .lido b{color:var(--ink-2);font-weight:600}

@media(max-width:820px){
  .duas{grid-template-columns:1fr;gap:16px}
  /* alvo de dedo: 44px é o piso, aqui e em todo o resto do app */
  .seta{width:44px;height:44px}
  .btn.curto{padding:12px 15px}
  .atalho{padding:11px 16px}
  .atalhos .lido{margin-left:0;width:100%;padding-top:2px}
  .link-aba{padding:13px 8px}   /* 44 px de alvo, o piso da casa */
}
@media(max-width:780px){
  /* no celular o negócio espera: primeiro a oficina, depois o estoque, depois o funil */
  #estoque-painel{order:1}
  #funil-painel{order:2}
  #atalhos{order:3}
}

/* Numa tela de 375 px, três colunas deixavam 105 px pra linha do tempo — pista
   curta demais pra ler quando a máquina libera. No celular a pista desce pra
   uma faixa inteira embaixo do nome, e a régua acompanha. */
@media(max-width:620px){
  .pista{grid-template-columns:1fr auto;column-gap:10px;row-gap:5px;padding:9px 0}
  .pista .pi-nome{grid-column:1;grid-row:1;flex-direction:row;align-items:baseline;gap:7px;font-size:.85rem}
  .pista .pi-obra{grid-column:1;grid-row:2}
  .pista .pi-tempo{grid-column:2;grid-row:1/3;justify-content:center}
  .pista .pi-trilha{grid-column:1/-1;grid-row:3;height:11px}

  .regua{grid-template-columns:1fr auto;row-gap:3px}
  .regua .rot{grid-column:1;grid-row:1}
  .regua .rot.fim{grid-column:2;grid-row:1}
  .regua .marcas{grid-column:1/-1;grid-row:2}

  /* máquina livre não precisa de duas linhas: o que ela imprimiu por último é
     assunto da Produção. Uma linha só, e as três livres deixam de empurrar o
     "precisa de você" pra fora da tela. */
  .pista.pi-livre{grid-template-columns:auto 1fr auto;row-gap:0;padding:7px 0}
  .pista.pi-livre .pi-nome{grid-column:1;grid-row:1}
  .pista.pi-livre .pi-obra{display:none}
  .pista.pi-livre .pi-trilha{grid-column:2;grid-row:1;height:8px}
  .pista.pi-livre .pi-tempo{grid-column:3;grid-row:1;flex-direction:row;align-items:baseline;gap:6px}

  /* botão ao lado do texto espremia o recado em cinco linhas de duas palavras;
     no celular ele desce pra linha de baixo. A seta continua ao lado: 44 px
     não atrapalham ninguém. */
  .chamado:has(.btn){grid-template-columns:1fr}
  .chamado .btn{justify-self:start;margin-top:8px}
}

/* acesso à Bambu vencido: o dado da tela continua desenhado, mas datado — mentir de
   cara limpa é pior que dizer que a leitura é velha (mesma regra da pausa) */
.central .venceu{margin:0 0 10px;padding:9px 12px;border-radius:10px;
  background:color-mix(in srgb, var(--rose) 16%, var(--panel-2));
  border:1px solid color-mix(in srgb, var(--rose) 34%, transparent);color:var(--ink)}
.central .venceu code{font-family:var(--mono, ui-monospace, monospace);font-size:.8em;
  background:color-mix(in srgb, var(--ink) 8%, transparent);padding:1px 5px;border-radius:5px;
  white-space:nowrap}

/* ============================================================================
   FILAMENTO QUE SAIU  (20/08/2026)
   O peso não vem da máquina, vem do fatiador — então esta peça é leitura, não
   controle: número grande da semana, as semanas anteriores como medida, e a cor
   identificando o rolo (o mesmo papel que ela tem no resto do app).
   ========================================================================== */
.fil{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:14px;align-items:end}
.fil-agora{display:flex;flex-direction:column;gap:2px;min-width:0}
.fil-numero{font-size:2.1rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--mint)}
.fil-cap{font-size:.82rem;color:var(--ink-2)}
.fil-var{font-size:.72rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em}
.fil-var.sobe{color:var(--butter)}
.fil-var.desce{color:var(--mint)}
.fil-curso{font-size:.78rem;color:var(--mint);font-variant-numeric:tabular-nums}
.fil-mes{font-size:.8rem;color:var(--ink-2);margin-top:4px}
.fil-mes b{font-variant-numeric:tabular-nums;color:var(--ink)}

/* as semanas: medida, não gráfico — por isso sem eixo, sem grade, sem rótulo */
.fil-semanas{display:flex;align-items:flex-end;gap:4px;height:64px}
.fil-barra{flex:1 1 0;min-width:6px;height:max(3px, var(--h));border-radius:3px 3px 2px 2px;
  background:var(--slate-line);transform-origin:bottom;animation:sobe .5s ease-out both}
.fil-barra.hoje{background:var(--mint)}
@keyframes sobe{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.fil-legenda{display:block;margin-top:5px;font-size:.68rem;color:var(--ink-3);
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em}

.fil-cores{display:grid;grid-template-columns:repeat(auto-fit, minmax(118px, 1fr));gap:8px 12px;margin-top:12px}
.fil-cor{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;
  gap:1px 7px;align-items:center}
.fil-ponto{grid-row:1 / span 2;width:15px;height:15px;border-radius:50%;
  border:1px solid var(--ink-3)}
.fil-cor b{font-variant-numeric:tabular-nums;font-size:.92rem}
.fil-nome{grid-column:2;font-size:.72rem;color:var(--ink-2);text-transform:lowercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fil-medida{grid-column:1 / -1;height:3px;border-radius:2px;
  background:var(--panel-3);position:relative;overflow:hidden}
.fil-medida::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:2px;
  background:var(--slate)}

.fil-precos{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.fil-preco{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--ink-2)}
.fil-preco input{width:96px;min-height:44px;padding:6px 9px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink);
  font-family:var(--mono);font-size:.85rem}
.fil-preco input[aria-invalid="true"]{border-color:var(--rose)}

@media (max-width: 720px){
  .fil{grid-template-columns:1fr;align-items:stretch;gap:10px}
  .fil-semanas{height:52px}
  .fil-numero{font-size:1.8rem}
}
@media (prefers-reduced-motion: reduce){
  .fil-barra{animation:none}
}

/* =================== OPERAÇÃO — a contagem geral =========================
   Reusa a bandeja (.bancada) e a testeira do Painel: é a mesma casa, não uma
   tela nova com regras próprias. O que nasce aqui é só a série e a régua.
   ========================================================================== */
#op-heroi{grid-column:1/-1}
.op-heroi{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:6px}
.op-heroi .num{font-size:2.4rem;line-height:1;font-variant-numeric:tabular-nums}
.op-heroi .l{font-size:.85rem}
.op-heroi-linha{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;
  font-family:var(--mono);font-size:.72rem;color:var(--oliva-ink-2)}
.op-heroi-linha b{color:var(--oliva-ink);font-variant-numeric:tabular-nums}
.op-heroi-linha .destaque b{color:var(--oliva-cobre)}

/* a FAIXA é o alvo do toque (76px de altura, largura toda), não a barra: no
   celular uma barra de dia tem ~10px e 44 é o mínimo pra um dedo */
.op-barras{display:flex;align-items:flex-end;gap:3px;height:76px;margin-top:10px;
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.op-barras:focus-visible{outline:2px solid var(--slate);outline-offset:3px;border-radius:4px}
.op-barra{flex:1 1 0;min-width:3px;height:max(3px,var(--h));border-radius:3px 3px 2px 2px;
  background:var(--slate-line);transform-origin:bottom;animation:sobe .45s ease-out both}
.op-barra.on{background:var(--mint)}

.op-regua{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px}
.op-regua b{font-family:var(--mono);font-size:.75rem;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.05em;min-width:13ch;text-align:center}
.op-passo{all:unset;box-sizing:border-box;cursor:pointer;min-width:44px;min-height:44px;
  display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;
  color:var(--ink-2);font-size:1.1rem;touch-action:manipulation}
.op-passo:hover{background:var(--panel-2)}
.op-passo:disabled{opacity:.35;cursor:default}
.op-passo:focus-visible{outline:2px solid var(--slate);outline-offset:1px}

.op-numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:12px;margin-top:10px}
.op-medida{display:flex;flex-direction:column;gap:2px}
.op-medida b{font-size:1.15rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.op-medida i{font-style:normal;font-family:var(--mono);font-size:.65rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.op-medida.ruim b{color:var(--rose)}

/* ⚠️ o nome é a coluna que encolhe (minmax(0,1fr) + ellipsis); as outras são `auto`
   com conteúdo nowrap. O contrário — `auto` do lado de um `1fr` nowrap — é a coluna
   que vai a zero e faz texto sobrepor, que já mordeu esta base uma vez. */
.op-maqs{display:flex;flex-direction:column;gap:9px;margin-top:10px}
.op-maq{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(48px,80px) auto auto;
  align-items:center;gap:10px}
.op-maq-nome{font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-maq-kg,.op-maq-h{font-family:var(--mono);font-size:.72rem;color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.op-maq-trilha{height:8px;border-radius:99px;background:var(--panel-2);
  border:1px solid var(--line);overflow:hidden}
.op-maq-trilha i{display:block;height:100%;width:var(--w);background:var(--mint);
  transform-origin:left;animation:enche .5s ease-out both}
.op-maq-f{font-family:var(--mono);font-size:.7rem;color:var(--ink-3);min-width:2ch;text-align:right}
.op-maq-f.ruim{color:var(--rose)}
@keyframes enche{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (max-width: 560px){
  .op-heroi .num{font-size:2rem}
  .op-barras{height:64px}
  .op-heroi-linha{gap:12px;font-size:.68rem}
}
@media (prefers-reduced-motion: reduce){
  .op-barra,.op-maq-trilha i{animation:none}
}
/* título + chips lado a lado só quando cabe; em 375px o título quebrava em duas
   linhas e os chips em duas fileiras, com um vão no meio */
@media (max-width: 560px){
  .op-topo{flex-direction:column;align-items:flex-start;gap:8px}
  .op-topo .chips{width:100%}
}

/* a tarja de versão nova: grudada embaixo, acima da safe-area do iPhone, e larga
   o suficiente pra ser tocada sem mirar */
#tarja-versao{all:unset;box-sizing:border-box;cursor:pointer;position:fixed;z-index:60;
  left:12px;right:12px;bottom:max(12px, env(safe-area-inset-bottom));
  min-height:48px;display:grid;place-items:center;text-align:center;padding:10px 14px;
  border-radius:12px;background:var(--oliva-fundo);color:var(--oliva-ink);
  font-size:.85rem;font-weight:600;box-shadow:var(--sombra);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  animation:subiu .3s ease-out both}
#tarja-versao:focus-visible{outline:2px solid var(--oliva-cobre);outline-offset:2px}
@keyframes subiu{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){ #tarja-versao{animation:none} }

/* ---------- a gaveta de coringas ----------
   Herda o quadradinho do catálogo (.contato/.mini): é a mesma folha de contato,
   com outro conteúdo. O que muda é o rodapé — no catálogo o número é estoque,
   aqui é tempo de impressão — e a fileira de máquinas embaixo. */
.mini.coringa .qt{color:var(--ink-2);font-size:.78rem}
/* `contain`, não `cover`: a miniatura da Bambu é a placa inteira vista de cima,
   com margem; cortar as bordas comia as peças da ponta. O fundo mais escuro é
   pra a renderização cinza não sumir no bege do painel. */
.mini.coringa .foto{object-fit:contain;background:var(--panel-3)}
.mini.coringa[aria-expanded="true"]{background:var(--slate-soft);box-shadow:inset 0 0 0 2px var(--slate)}
.selo.livre{background:var(--mint-soft);color:var(--mint);border:1px solid var(--mint-line)}

/* A fileira fica SEMPRE aqui embaixo, nunca dentro da grade: abrir sob o
   quadradinho quebra a linha e empurra o alvo do toque seguinte. */
.tira-envio{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
.tira-titulo{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin:0 0 8px}
.tira-titulo span{font-family:var(--mono);font-size:.78rem;color:var(--ink-3)}
.tira-maqs{display:flex;gap:8px;flex-wrap:wrap}

.alvo-maq{all:unset;box-sizing:border-box;cursor:pointer;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:2px;min-width:118px;min-height:44px;
  padding:8px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.alvo-maq:hover{background:var(--panel-2)}
.alvo-maq:focus-visible{outline:2px solid var(--slate);outline-offset:-2px}
.alvo-maq b{font-size:.82rem}
.alvo-maq span{font-family:var(--mono);font-size:.72rem;color:var(--ink-3)}
.alvo-maq.subindo{background:var(--slate-soft);border-color:var(--slate-line);cursor:default}
.alvo-maq.pronto{background:var(--mint-soft);border-color:var(--mint-line)}
.alvo-maq.pronto span{color:var(--mint)}
.alvo-maq.erro{background:var(--rose-soft);border-color:var(--rose-line)}
.alvo-maq.erro span{color:var(--rose)}

/* o enchimento corre por baixo do rótulo, como o fio sendo puxado da fita do funil */
.alvo-maq .enchendo{position:absolute;left:0;bottom:0;height:3px;width:var(--p,0%);
  background:var(--slate);transition:width .6s linear}

.pronto-msg,.erro-msg{margin:9px 0 0;font-size:.84rem;line-height:1.45}
.pronto-msg{color:var(--mint)}
.erro-msg{color:var(--rose)}
.tira-rotulo{margin:0 0 6px;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3)}

/* ================= TAREFAS =================
   Duas pessoas mexendo na mesma lista: a linha tem que dizer de quem é a tarefa
   sem virar tabela. Daí a bolinha com a inicial na ponta direita — ardósia é o
   Bernardo, hortelã é a Aline, e o traço cinza é o que ainda não tem dono. */

/* contador na aba: só aparece quando é SEU e está vencendo */
.aba-conta{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;margin-left:5px;
  border-radius:99px;font-family:var(--mono);font-size:.64rem;font-weight:700;vertical-align:middle}
.aba-conta.rose{background:var(--rose-soft);color:var(--rose);border:1px solid var(--rose-line)}
.aba-conta.butter{background:var(--butter-soft);color:var(--butter);border:1px solid var(--butter-line)}

/* anotar é um campo só, e ele é o primeiro elemento da tela de propósito */
.form-captura{display:flex;gap:9px;align-items:center;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--mint-line);border-radius:12px;padding:11px;box-shadow:var(--sombra)}
.form-captura input{flex:1 1 260px;font:inherit;font-size:.95rem;padding:11px 13px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink)}
.form-captura input:focus-visible{outline:2px solid var(--mint);outline-offset:1px}
#aviso-tarefa{min-height:1.1em;color:var(--ink-3)}
#busca-tarefa{flex:1 1 240px;font:inherit;font-size:.92rem;padding:10px 14px;border-radius:11px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink)}
#busca-tarefa:focus-visible{outline:2px solid var(--slate);outline-offset:1px}

#lista-tarefas{display:flex;flex-direction:column;gap:16px}
.tf-grupo{display:flex;flex-direction:column;gap:6px}
.tf-grupo-cab{display:flex;align-items:center;gap:8px;padding:0 3px}

.tf{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tf.aberta{border-color:var(--slate-line);box-shadow:var(--sombra)}
.tf.feita{opacity:.6}
.tf-linha{display:flex;align-items:center;gap:10px;padding:9px 12px}

/* o círculo de marcar: alvo de 24px num toque só, sem virar checkbox nativo */
.tf-marca{all:unset;box-sizing:border-box;cursor:pointer;flex:none;width:22px;height:22px;border-radius:99px;
  border:1.5px solid var(--ink-3);transition:background .15s ease,border-color .15s ease}
.tf-marca:hover{border-color:var(--mint);background:var(--mint-soft)}
.tf-marca[aria-pressed="true"]{background:var(--mint);border-color:var(--mint)}
.tf-marca:focus-visible{outline:2px solid var(--slate);outline-offset:2px}

.tf-txt{all:unset;box-sizing:border-box;cursor:pointer;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;padding:2px 0}
.tf-txt .t{font-size:.92rem;font-weight:570;line-height:1.35;overflow-wrap:anywhere}
.tf-txt .m{font-family:var(--mono);font-size:.66rem;color:var(--ink-3)}
.tf-txt:focus-visible{outline:2px solid var(--slate);outline-offset:2px;border-radius:6px}
.tf.feita .tf-txt .t{text-decoration:line-through;color:var(--ink-2)}
.tf-fogo{font-style:normal;font-size:.72rem;vertical-align:1px}

.tf-quem{flex:none;width:26px;height:26px;border-radius:99px;display:grid;place-items:center;
  font-size:.72rem;font-weight:700;border:1px solid var(--line)}
.tf-quem.bernardo{background:var(--slate-soft);border-color:var(--slate-line);color:var(--slate)}
.tf-quem.aline{background:var(--mint-soft);border-color:var(--mint-line);color:var(--mint)}
.tf-quem.ninguem{background:var(--panel-2);color:var(--ink-3)}

/* ---------- a ficha da tarefa ----------
   Mesma moldura da gaveta dos Projetos: a lista é o índice, a ficha é o trabalho. */
#ficha-tarefa{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;
  display:flex;flex-direction:column;gap:12px;min-width:0;box-shadow:var(--sombra)}
.ficha-cab{display:flex;flex-direction:column;gap:7px}
.ficha-corpo{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:10px}
#ficha-corpo{display:flex;flex-direction:column;gap:10px}
.composer-tf{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.composer-tf textarea{width:100%;font:inherit;font-size:.89rem;padding:10px 12px;border-radius:10px;min-height:70px;
  resize:vertical;border:1px solid var(--line);background:var(--panel-2);color:var(--ink)}
.composer-tf textarea:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
.composer-acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* anexo: uma linha que se lê de relance e abre num toque */
.anexo{display:flex;align-items:center;gap:9px;text-decoration:none;padding:9px 11px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink)}
.anexo:hover{background:var(--panel-3)}
.anexo:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
.anexo .ico{font-size:1rem;flex:none}
.anexo .n{flex:1 1 auto;min-width:0;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anexo .baixar{flex:none;font-family:var(--mono);font-size:.63rem;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase}
.anexo-video{width:100%;max-height:60vh;border-radius:10px;border:1px solid var(--line);background:var(--ink)}
.anexo-audio{width:100%}
.legenda-anexo{font-family:var(--mono);font-size:.66rem;color:var(--ink-3);margin-top:-4px}
.corpo .lupa{display:block;line-height:0}

.tf-titulo{font:inherit;font-size:.92rem;padding:9px 11px;border-radius:9px;resize:vertical;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);width:100%}
.tf-titulo:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
.tf-fila{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.tf-fila .cap{flex:0 0 62px}
.tf-op{all:unset;box-sizing:border-box;cursor:pointer;font-size:.78rem;padding:6px 11px;border-radius:99px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink-2)}
.tf-op:hover{background:var(--panel-3)}
.tf-op.on{background:var(--slate-soft);border-color:var(--slate-line);color:var(--slate);font-weight:600}
.tf-op:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
.tf-data{font:inherit;font-size:.8rem;padding:5px 9px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink)}
.tf-data:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
.tf-pe{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding-top:7px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.65rem;color:var(--ink-3)}
.tf-pe b{color:var(--ink-2);font-weight:600}
.tf-pe-acoes{display:flex;gap:6px;align-items:center}
.link-aba.perigo{color:var(--rose)}
.link-aba.perigo:hover{background:var(--rose-soft);color:var(--rose)}
#rodape-tarefas{display:flex;gap:14px;flex-wrap:wrap}

/* dedo no celular: nada de alvo menor que 44px */
@media(hover:none){
  .tf-linha{padding:11px 12px}
  .tf-marca{width:26px;height:26px}
  .tf-op{min-height:38px;display:inline-flex;align-items:center}
}


/* ---------- câmera da mesa ---------- */
#tela-cam:empty{display:none}
.cam-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 8px}
.cam-cab .link-aba{margin-left:auto}
.cam-moldura{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#161412;line-height:0}
.cam-moldura img{width:100%;display:block;min-height:180px}
.cam-selo{position:absolute;top:9px;left:9px;display:flex;align-items:center;gap:6px;
  background:rgba(22,20,18,.62);color:#f4efe6;font-family:var(--mono);font-size:.63rem;
  letter-spacing:.08em;padding:4px 9px;border-radius:99px}
.cam-selo i{width:6px;height:6px;border-radius:99px;background:#7ee0a8;
  box-shadow:0 0 0 0 rgba(126,224,168,.7);animation:cam-pulsa 2s infinite}
@keyframes cam-pulsa{70%{box-shadow:0 0 0 7px rgba(126,224,168,0)}100%{box-shadow:0 0 0 0 rgba(126,224,168,0)}}
@media (prefers-reduced-motion:reduce){.cam-selo i{animation:none}}
#tela-cam .det{margin-top:8px}


/* ---------- ações do cartão de máquina ---------- */
.acoes-maq{display:flex;gap:6px;flex-wrap:wrap;position:relative;z-index:1}
.acao-maq{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:8px;border:1px solid var(--line);background:var(--panel);
  font-size:.74rem;font-weight:600;color:var(--ink-2)}
.acao-maq:hover{background:var(--panel-3);color:var(--ink)}
.acao-maq:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
@media(hover:none){.acao-maq{min-height:34px}}

/* a foto da mesa no alto da conferência: é ela que ajuda a contar */
.cf-foto{width:100%;border-radius:9px;border:1px solid var(--line);background:#161412;display:block}

/* ---------- a lente: a câmera por cima de tudo ---------- */
.lente{position:fixed;inset:0;z-index:60;background:rgba(40,33,22,.55);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:16px}
.lente-caixa{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:13px;
  width:min(760px,100%);max-height:92vh;overflow:auto;display:flex;flex-direction:column;gap:9px;box-shadow:var(--sombra)}
.lente-topo{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.lente-topo b{font-size:.95rem;font-weight:660}
.lente-topo i{font-style:normal;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.lente-x{all:unset;box-sizing:border-box;cursor:pointer;margin-left:auto;width:34px;height:34px;
  border-radius:9px;display:grid;place-items:center;color:var(--ink-3);font-size:1rem}
.lente-x:hover{background:var(--panel-2);color:var(--ink)}
.lente-x:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
.lente-moldura{border-radius:11px;overflow:hidden;border:1px solid var(--line);background:#161412;line-height:0;min-height:200px}
.lente-moldura img{width:100%;display:block}

/* ---------- a marca trabalhando ----------
   Mesmo traço de filamento da tela de entrada (`.traco`/`.cheio`), agora em laço: o
   contorno se extruda, o corpo preenche, some e recomeça. É o sinal de "estou rodando"
   do app inteiro — pedido dele em 31/08/2026. Reusa a assinatura da marca em vez de um
   círculo girando, que não diria de quem é o app. */
.bao-carga{display:block;overflow:visible}
.bc-traco{fill:none;stroke:var(--ink-2);stroke-width:14;stroke-linecap:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;animation:bc-tracar 1.9s ease-in-out infinite}
.bc-cheio{fill:var(--ink);opacity:0;animation:bc-preencher 1.9s ease-in-out infinite}
@keyframes bc-tracar{
  0%{stroke-dashoffset:1000;opacity:1}
  60%{stroke-dashoffset:0;opacity:1}
  82%,100%{stroke-dashoffset:0;opacity:0}
}
@keyframes bc-preencher{
  0%,52%{opacity:0}
  74%{opacity:1}
  92%,100%{opacity:0}
}

/* bloco de espera: a marca com uma linha dizendo o que está sendo esperado. Dizer O QUE
   demora é metade do conforto — "carregando" sozinho não diz se vale esperar. */
.carga{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:26px 12px;color:var(--ink-3);font-size:.83rem;text-align:center}

/* o pulso do topo: a marca do cabeçalho respira enquanto há pedido em voo. Discreto de
   propósito — é canto de olho, não aviso. */
.topo .marca{transition:opacity .25s ease}
.topo[data-carregando="1"] .marca{animation:bc-respira 1.9s ease-in-out infinite}
@keyframes bc-respira{0%,100%{opacity:.28}50%{opacity:1}}

/* espera curta embutida em botão ou aviso */
.aviso-foto .bao-carga,.aviso-pdf .bao-carga{display:inline-block;vertical-align:-5px;margin-right:5px}

@media (prefers-reduced-motion:reduce){
  .bc-traco,.bc-cheio,.topo[data-carregando="1"] .marca{animation:none}
  .bc-traco{opacity:0}.bc-cheio{opacity:1}
}


/* ============================================================================
   PALETA DO FINANCEIRO (18/09/2026) — a cara do relatório da Feira Motiro
   ----------------------------------------------------------------------------
   Pedido dele: "gostei muito da paleta do relatório financeiro, vamos aplicar
   no app". Mesma jogada do patch oliva: os NOMES das variáveis ficam, o tom
   muda. Papel de cada cor intacto:
     --slate   em jogo / negociação   → ROXO  #5E43B7 (a cor-mãe do relatório)
     --mint    fechado / feito        → VERDE #008000 (o "resultado" do relatório)
     --butter  material / máquina     → ÂMBAR #D9912B (texto num tom mais fechado)
     --rose    atenção / perdido      → TIJOLO #B5472F (o negativo do relatório)
   Superfície de acento (a antiga testeira oliva) → tinta #2B2340.
   Creme #FFF9F0 é o papel do relatório: aqui ele vira o cartão, e o chão da
   tela fica um tom abaixo pra os cartões saltarem. Continua sem branco puro.
   Fredoka (títulos e números) vem do próprio app — nada de Google Fonts.
   ========================================================================== */
@font-face{font-family:Fredoka;src:url(/fonts/Fredoka-SemiBold.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:Fredoka;src:url(/fonts/Fredoka-Bold.ttf) format("truetype");font-weight:700;font-display:swap}

:root{
  --ground:#f5ede2; --panel:#fff9f0; --panel-2:#faf1e6; --panel-3:#eee4d5;
  --ink:#2b2340; --ink-2:#6e6684; --ink-3:#958ca8; --line:#e8dfd2;

  --slate:#5e43b7; --slate-soft:#efe9fb; --slate-line:#d8cfea;
  --mint:#008000; --mint-soft:#e5f3e2; --mint-line:#b6dcae;
  --butter:#a8641a; --butter-soft:#fcecd4; --butter-line:#efc78c;
  --rose:#b5472f; --rose-soft:#f9e4dd; --rose-line:#e9b9ab;

  --roxo:#5e43b7; --roxo-claro:#9a84e6; --ambar:#d9912b; --azul:#2e86c1;

  --oliva-fundo:#2b2340;
  --oliva-ink:#fff9f0;
  --oliva-ink-2:#b9afd6;
  --oliva-cobre:#f2b866;
  --oliva-fio:rgba(255,249,240,.16);
  --oliva-broto:#9fe39a;
  --oliva-terracota:#f3a592;

  --sombra:0 1px 2px rgba(43,35,64,.05), 0 10px 30px rgba(43,35,64,.07);
  --sans:"Nunito Sans","Avenir Next",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:Fredoka,"Nunito Sans","Avenir Next",system-ui,sans-serif;
}

/* Fredoka com parcimônia: títulos, números grandes e as abas */
h1,h2,h3,.topo b,.heroi .num,.kpi .v,.passo .q,.obra-numeros .v,.pilha .v,
nav.abas button,.ficha-nome,.gc-id,.ficha-sigla{font-family:var(--display);letter-spacing:0}
h1,h2,h3{font-weight:700}
nav.abas button{font-weight:600}
nav.abas button[aria-current="true"]{background:var(--roxo);color:var(--oliva-ink)}

.testeira::before{background:radial-gradient(closest-side,rgba(94,67,183,.6),transparent 70%)}
.fita .seg.feito{background:#3f9a4b}
.btn.primario{background:var(--roxo);border-color:var(--roxo);color:var(--oliva-ink)}
.btn.primario:hover{background:#4f37a3}
.btn.butter{background:var(--butter-soft);border-color:var(--butter-line);color:var(--butter)}
.pill.slate{background:var(--slate-soft);border-color:var(--slate-line);color:var(--slate)}
*:focus-visible{outline-color:var(--roxo)}


/* ================= PROJETOS — grade de fichas + gaveta à direita ==========
   Pedido 18/09: "os projetos mais imponentes na tela, e quando clicar abre um
   quadro na direita, tipo o kit nas cotações do SOLMAB". A lista estreita com
   a gaveta ao lado virou grade de fichas; a gaveta flutua por cima. */
.grade-proj{display:flex;flex-direction:column;gap:10px}
#lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;flex-direction:initial}
#lista .aviso{grid-column:1/-1}

.ficha{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  position:relative;box-shadow:var(--sombra);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.ficha:hover{transform:translateY(-3px);border-color:var(--slate-line);
  box-shadow:0 2px 4px rgba(43,35,64,.06),0 16px 34px rgba(43,35,64,.12)}
.ficha:focus-visible{outline:3px solid var(--roxo);outline-offset:2px}
.ficha[aria-current="true"]{border-color:var(--roxo);box-shadow:0 0 0 2px var(--roxo),var(--sombra)}
@media (prefers-reduced-motion:reduce){.ficha{transition:none}.ficha:hover{transform:none}}

/* a tarja do prazo virou a borda de cima da ficha */
.ficha::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;z-index:1;background:var(--line)}
.ficha.t-orc::before{background:var(--roxo)}
.ficha.t-folga::before{background:var(--mint)}
.ficha.t-perto::before{background:var(--ambar)}
.ficha.t-aperta::before{background:var(--rose)}
.ficha.t-fim{opacity:.82}

.ficha-foto{display:grid;place-items:center;aspect-ratio:16/10;background:var(--panel-2);
  border-bottom:1px solid var(--line);overflow:hidden}
.ficha-foto img{width:100%;height:100%;object-fit:cover;display:block}
/* sem foto: o código do projeto em letra grande, como etiqueta de caixa */
.ficha-sigla{font-weight:700;font-size:2.6rem;line-height:1;color:var(--slate-line)}
.ficha.t-orc .ficha-foto{background:var(--slate-soft)}
.ficha.t-orc .ficha-sigla{color:#c7b9ef}
.ficha.t-folga .ficha-foto{background:var(--mint-soft)}
.ficha.t-folga .ficha-sigla{color:var(--mint-line)}
.ficha.t-perto .ficha-foto{background:var(--butter-soft)}
.ficha.t-perto .ficha-sigla{color:var(--butter-line)}
.ficha.t-aperta .ficha-foto{background:var(--rose-soft)}
.ficha.t-aperta .ficha-sigla{color:var(--rose-line)}

.ficha-corpo{display:flex;flex-direction:column;gap:4px;padding:13px 15px 15px;min-width:0}
.ficha-topo{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ficha-id{font-family:var(--mono);font-size:.7rem;color:var(--ink-3);letter-spacing:.06em}
.ficha-nome{font-size:1.18rem;font-weight:600;line-height:1.2;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ficha-cli{font-size:.86rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ficha-cli.vazio{color:var(--ink-3);font-style:italic}
.ficha-numeros{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-top:6px;
  padding-top:9px;border-top:1px dashed var(--line);font-size:.8rem;color:var(--ink-2)}
.ficha-numeros b{font-family:var(--display);font-weight:600;font-size:1rem;color:var(--ink)}
.ficha-prazo{margin-left:auto;font-family:var(--mono);font-size:.7rem;font-weight:600}
.ficha-prazo.p-aperta{color:var(--rose)}
.ficha-prazo.p-perto{color:var(--butter)}
.ficha-prazo.p-folga{color:var(--mint)}

/* ---- a gaveta ---- */
.veu-gaveta{position:fixed;inset:0;z-index:40;background:rgba(43,35,64,.38);
  animation:veu-entra .18s ease}
@keyframes veu-entra{from{opacity:0}}
html:has(.tela[data-tela="projetos"][data-on="1"] #gaveta.aberta){overflow:hidden}
#gaveta:not(.aberta){display:none}
.gaveta.aberta{position:fixed;top:0;right:0;bottom:0;z-index:41;width:min(600px,100vw);
  margin:0;padding:0;border:0;border-radius:0;gap:0;
  background:var(--panel);box-shadow:-18px 0 44px rgba(43,35,64,.2);
  display:flex;flex-direction:column;overscroll-behavior:contain;
  animation:gaveta-entra .22s cubic-bezier(.2,.8,.2,1)}
@keyframes gaveta-entra{from{transform:translateX(40px);opacity:0}}
@media (prefers-reduced-motion:reduce){.gaveta.aberta,.veu-gaveta{animation:none}}

.gaveta-cabeca{background:var(--oliva-fundo);color:var(--oliva-ink);
  padding:16px 22px 0;padding-top:max(16px,env(safe-area-inset-top));flex:none}
.gc-linha{display:flex;align-items:center;gap:10px}
.gc-id{font-weight:600;font-size:.95rem;color:var(--oliva-cobre)}
.gaveta-cabeca .pill{background:rgba(255,249,240,.1);border-color:rgba(255,249,240,.2);color:var(--oliva-ink)}
.gc-fechar{all:unset;box-sizing:border-box;cursor:pointer;margin-left:auto;width:44px;height:44px;
  display:grid;place-items:center;border-radius:12px;font-size:1.1rem;color:var(--oliva-ink)}
.gc-fechar:hover{background:rgba(255,249,240,.1)}
.gc-fechar:focus-visible{outline:2px solid var(--oliva-cobre);outline-offset:-2px}
.gaveta-cabeca h2{font-size:1.6rem;line-height:1.12;margin-top:4px;color:var(--oliva-ink)}
#gaveta .gaveta-cabeca h2:focus-visible{outline:2px solid var(--oliva-cobre)}
.gc-sub{font-size:.9rem;color:var(--oliva-ink-2);margin-top:4px}
.gaveta-cabeca .abas-gaveta{margin-top:14px;gap:2px;flex-wrap:nowrap}
.gaveta-cabeca .abas-gaveta button{border:0;border-radius:10px 10px 0 0;padding:10px 16px;
  color:var(--oliva-ink-2);font-weight:600;background:transparent}
.gaveta-cabeca .abas-gaveta button:hover{color:var(--oliva-ink)}
.gaveta-cabeca .abas-gaveta button[aria-current="true"]{background:var(--panel);color:var(--ink)}

.gaveta-corpo{flex:1;overflow-y:auto;padding:18px 22px 24px;display:flex;flex-direction:column;gap:18px;
  overscroll-behavior:contain}
.gaveta-corpo > .assinatura{font-family:var(--mono);font-size:.68rem;color:var(--ink-3)}
.secao-gaveta{display:flex;flex-direction:column;gap:6px}
.secao-gaveta > .cap{color:var(--roxo);font-weight:700;padding-bottom:6px;border-bottom:1px solid var(--slate-line)}

/* leitura: cada linha é um botão — tocar já abre a alteração naquele campo */
.linhas-campos .campo-l{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:14px;padding:10px 8px;margin:0 -8px;border-radius:9px;
  border-bottom:1px solid var(--line);font-size:.92rem;min-height:44px}
.linhas-campos .campo-l:last-child{border-bottom:none}
.linhas-campos .campo-l:hover{background:var(--panel-2)}
.linhas-campos .campo-l:focus-visible{outline:2px solid var(--roxo);outline-offset:-2px}
.linhas-campos .campo-l.longo{flex-direction:column;align-items:flex-start;gap:4px}
.linhas-campos .campo-l.longo .v{text-align:left;font-weight:450;line-height:1.5}
.linhas-campos .campo-l .v.vazio{color:var(--ink-3);font-weight:400;font-style:italic}
.linhas-campos .campo-l:hover .v.vazio{color:var(--roxo)}

/* alteração: rótulo em cima, campo inteiro, curtos lado a lado */
.form-grade{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;padding-top:6px}
.campo-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.campo-f.largo{grid-column:1/-1}
.campo-f .k{font-size:.8rem;font-weight:700;color:var(--ink-2)}
.campo-f input,.campo-f select,.campo-f textarea{font:inherit;font-size:1rem;width:100%;
  padding:11px 12px;border-radius:11px;border:1.5px solid var(--line);background:var(--panel-2);
  color:var(--ink);min-height:46px}
.campo-f textarea{min-height:92px;resize:vertical;line-height:1.45}
.campo-f input:focus,.campo-f select:focus,.campo-f textarea:focus{outline:none;border-color:var(--roxo);
  background:var(--panel);box-shadow:0 0 0 3px var(--slate-soft)}
.gaveta .cliente-novo{grid-column:1/-1}
@media(max-width:480px){.form-grade{grid-template-columns:1fr}}

/* a barra de ação fica SEMPRE à vista, embaixo — antes o Concluir morava
   no fim de 15 campos e era preciso rolar até ele */
.gaveta.aberta .acoes-gaveta{flex:none;margin:0;display:flex;gap:9px;flex-wrap:wrap;align-items:center;
  padding:12px 22px;padding-bottom:max(12px,env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--panel-2)}
.gaveta.aberta .acoes-gaveta[hidden]{display:none}
.gaveta.aberta .acoes-gaveta .btn{min-height:44px;display:inline-flex;align-items:center}
.gaveta.aberta .acoes-gaveta .salvando{flex:1 1 100%;order:9}
.gaveta.aberta .acoes-gaveta .salvando:empty{display:none}
.gaveta.aberta .acoes-gaveta .perigo{margin-left:auto}
.gaveta.aberta .fotos{padding-top:4px}

/* restos do oliva que estavam escritos direto no CSS */
.p-mint .marca,.p-mint .trilho-prod span,.controles-oliva .mesas .m-mint{background:#3f9a4b}
.controles-oliva .ajuste .somar{background:var(--roxo)}
.controles-oliva .mesas .m-butter{background:#b8731f}

/* excluir foto do projeto: ✕ no canto da miniatura; 1º toque vira "Excluir?" */
.foto-proj{position:relative;display:inline-block;line-height:0}
.tirar-foto{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;top:-8px;right:-8px;
  min-width:28px;height:28px;padding:0 7px;border-radius:99px;display:grid;place-items:center;
  font-size:.75rem;font-weight:700;line-height:1;background:var(--oliva-fundo);color:var(--oliva-ink);
  box-shadow:0 1px 4px rgba(43,35,64,.3)}
.tirar-foto::after{content:"";position:absolute;inset:-8px}   /* alvo de toque de 44px */
.tirar-foto:hover{background:var(--rose)}
.tirar-foto.armado{background:var(--rose);font-size:.7rem;white-space:nowrap}
.tirar-foto:focus-visible{outline:2px solid var(--roxo);outline-offset:2px}
.tirar-foto[disabled]{opacity:.6;cursor:default}

/* mesa que terminou antes da atual e ainda não foi contada (23/09/2026) */
.mesa-anterior{margin-top:10px;padding-top:10px;border-top:1px dashed var(--butter-line)}
.mesa-anterior .cap-fila{display:block;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ================= Quantificador (27/09/2026) =================
   Outra gaveta na tela de Projetos, com a mesma pele da gaveta do projeto. */
#gaveta-quant:not(.aberta){display:none}
html:has(#gaveta-quant.aberta){overflow:hidden}
#gaveta-quant .gaveta-cabeca{padding-bottom:16px}
#gaveta-quant.q-arrastando .q-solta{border-color:var(--roxo);background:var(--slate-soft)}

/* Testes no lugar da grade de projetos */
.grade-testes{display:none;flex-direction:column;gap:10px}
.vendo-testes .grade-testes{display:flex}
.vendo-testes .grade-proj,.vendo-testes #chips,.vendo-testes #em-linha,.vendo-testes #novo-projeto,.vendo-testes #form-novo{display:none}
#lista-testes{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
#lista-testes .aviso{grid-column:1/-1}
#ver-testes b{margin-left:4px;font-family:var(--mono);font-size:.78rem;color:var(--roxo)}
.ficha-numeros .q-m{font-family:var(--mono);font-weight:700;font-size:.75rem}
.ficha-numeros .q-m.mint{color:var(--mint)}
.ficha-numeros .q-m.butter{color:var(--ambar)}
.ficha-numeros .q-m.rose{color:var(--rose)}

/* entrada */
.q-solta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  min-height:150px;padding:22px;border:2px dashed var(--slate-line);border-radius:14px;background:var(--panel-2);cursor:pointer}
.q-solta:hover{border-color:var(--roxo)}
.q-solta:focus-within{outline:2px solid var(--roxo);outline-offset:2px}
.q-solta-t{font-size:1rem;color:var(--ink)}
.q-solta-s{font-family:var(--mono);font-size:.7rem;color:var(--ink-3)}
.q-dicas{display:flex;flex-direction:column;gap:10px;font-size:.88rem;color:var(--ink-2);line-height:1.5}
.q-dicas .q-erro{display:block;margin-top:4px}
.q-ocupado{font-family:var(--mono);font-size:.78rem;color:var(--roxo)}
.q-erro{font-size:.86rem;color:var(--rose)}
.q-rodape,.q-dica{font-family:var(--mono);font-size:.68rem;color:var(--ink-3);line-height:1.5}
.link-q{all:unset;cursor:pointer;color:var(--roxo);font-size:.86rem;font-weight:600;padding:6px 0}
.link-q:hover{text-decoration:underline}
.link-q:focus-visible{outline:2px solid var(--roxo);outline-offset:2px;border-radius:4px}
.q-avisos{background:var(--butter-soft);border:1px solid var(--butter-line);border-radius:11px;padding:10px 12px;
  display:flex;flex-direction:column;gap:4px;font-size:.84rem;color:var(--ink-2)}
.q-aviso-projeto{background:var(--butter-soft);border:1px solid var(--butter-line);border-radius:11px;padding:10px 12px;font-size:.84rem;color:var(--ink-2)}

/* mesas */
.q-mesa{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.q-mini{width:84px;height:84px;object-fit:contain;border-radius:10px;background:var(--panel-2);flex:none}
.q-mesa-campos{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.q-mesa-topo{display:flex;gap:8px;align-items:center}
.q-peca{font:inherit;font-size:1rem;font-weight:650;flex:1;min-width:0;border:0;border-bottom:1.5px solid var(--line);
  background:transparent;color:var(--ink);padding:6px 2px}
.q-peca:focus{outline:none;border-color:var(--roxo)}
.form-grade.q-tres{grid-template-columns:repeat(3,minmax(0,1fr));padding-top:0}
.form-grade.q-tres input:placeholder-shown{border-color:var(--butter-line);background:var(--butter-soft)}
@media(max-width:480px){.form-grade.q-tres{grid-template-columns:1fr 1fr}.q-mini{width:60px;height:60px}}
.q-fils,.q-insumos{display:flex;flex-direction:column;gap:6px}
.q-fil,.q-ins{display:flex;align-items:center;gap:8px;min-width:0}
.q-fil .bolinha{width:14px;height:14px;border-radius:99px;border:1px solid var(--line);flex:none}
.q-fil input,.q-ins input{font:inherit;font-size:.92rem;padding:8px 10px;border-radius:9px;border:1.5px solid var(--line);
  background:var(--panel-2);color:var(--ink);min-height:40px;min-width:0}
.q-fil input:focus,.q-ins input:focus{outline:none;border-color:var(--roxo);background:var(--panel)}
.q-cor,.q-ins-nome{flex:1}
.q-g{width:78px;flex:none;text-align:right;font-variant-numeric:tabular-nums}
.q-un{font-family:var(--mono);font-size:.7rem;color:var(--ink-3)}
.q-perda{font-family:var(--mono);font-size:.66rem;color:var(--ink-3);white-space:nowrap}
.q-x{all:unset;box-sizing:border-box;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;
  border-radius:8px;color:var(--ink-3);font-size:.8rem;flex:none}
.q-x:hover{background:var(--rose-soft);color:var(--rose)}
.q-x:focus-visible{outline:2px solid var(--roxo)}
.q-mais summary{cursor:pointer;color:var(--roxo);font-size:.86rem;font-weight:600;padding:6px 0;list-style:none}
.q-mais summary::-webkit-details-marker{display:none}
.q-mais[open]{display:flex;flex-direction:column;gap:8px}
.q-check{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--ink-2);cursor:pointer;padding:4px 0}
.q-check input{width:20px;height:20px;accent-color:var(--roxo);margin-top:1px;flex:none}
.q-rapidos{display:flex;gap:6px;flex-wrap:wrap}

/* resultado */
.q-resultado{gap:14px}
.q-precos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.q-preco-btn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:10px 12px;
  border-radius:11px;border:1.5px solid var(--line);background:var(--panel-2)}
.q-preco-btn:hover{border-color:var(--roxo)}
.q-preco-btn:focus-visible{outline:2px solid var(--roxo);outline-offset:2px}
.q-preco-btn.atual{border-color:var(--roxo);background:var(--slate-soft)}
.q-preco-btn .l{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.q-preco-btn .v{font-size:1.05rem;font-weight:680;font-variant-numeric:tabular-nums}
.q-curva{width:100%;border-collapse:collapse;font-size:.86rem;font-variant-numeric:tabular-nums}
.q-curva th{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  font-weight:500;text-align:right;padding:4px 6px;border-bottom:1px solid var(--line)}
.q-curva td{text-align:right;padding:6px;border-bottom:1px solid var(--line)}
.q-curva th:first-child,.q-curva td:first-child{text-align:left}
.q-curva tr.atual td{font-weight:700;color:var(--roxo);background:var(--slate-soft)}
.q-resultado .cor-linha .bolinha{width:12px;height:12px;border-radius:99px;border:1px solid var(--line);flex:none}
.q-resultado .cor-linha .rolos{font-family:var(--mono);font-size:.7rem;color:var(--ink-3);min-width:64px;text-align:right}
.q-pergunta{font-size:.88rem;color:var(--ink-2);flex:1 1 100%}