/* ============================================================
   Wiser APS — fundação visual compartilhada
   Traduz para: DaisyUI themes + utilitários Tailwind no Blazor.
   Dois temas customizados DaisyUI: "wiser" (claro) e "wiserdark".
   ============================================================ */

/* ---------- TEMA CLARO: wiser ---------- */
[data-theme="wiser"] {
  color-scheme: light;
  --p: 46% 0.072 245;      /* primary  — aço/azul sóbrio */
  --pc: 98% 0.005 245;
  --s: 45% 0.03 255;       /* secondary — grafite */
  --sc: 98% 0 0;
  --a: 52% 0.08 200;       /* accent — teal discreto */
  --ac: 98% 0 0;
  --n: 30% 0.015 255;      /* neutral */
  --nc: 95% 0.005 255;
  --b1: 100% 0 0;          /* base-100 — cartões brancos */
  --b2: 98% 0.002 250;     /* base-200 — fundo de página */
  --b3: 92% 0.004 250;     /* base-300 — bordas/linhas */
  --bc: 27% 0.02 255;      /* base-content — texto slate */
  --in: 52% 0.11 250;
  --inc: 98% 0 0;
  --su: 52% 0.10 155;
  --suc: 98% 0 0;
  --wa: 68% 0.13 75;
  --wac: 25% 0.05 75;
  --er: 53% 0.19 25;
  --erc: 98% 0 0;
  --rounded-box: 0.5rem;
  --rounded-btn: 0.375rem;
  --rounded-badge: 0.25rem;
  --border-btn: 1px;
  --tab-radius: 0.375rem;
  --animation-btn: 0.2s;
}

/* ---------- TEMA ESCURO: wiserdark ---------- */
[data-theme="wiserdark"] {
  color-scheme: dark;
  --p: 66% 0.09 245;
  --pc: 15% 0.02 245;
  --s: 62% 0.03 255;
  --sc: 15% 0 0;
  --a: 66% 0.09 200;
  --ac: 15% 0 0;
  --n: 26% 0.015 255;
  --nc: 88% 0.005 255;
  --b1: 17% 0.008 255;     /* base-100 — cartões */
  --b2: 14% 0.008 255;     /* base-200 — fundo */
  --b3: 24% 0.01 255;      /* base-300 — bordas */
  --bc: 88% 0.01 255;
  --in: 66% 0.11 250;
  --inc: 15% 0 0;
  --su: 64% 0.11 155;
  --suc: 15% 0 0;
  --wa: 74% 0.13 75;
  --wac: 20% 0.05 75;
  --er: 62% 0.19 25;
  --erc: 15% 0 0;
  --rounded-box: 0.5rem;
  --rounded-btn: 0.375rem;
  --rounded-badge: 0.25rem;
  --border-btn: 1px;
  --tab-radius: 0.375rem;
  --animation-btn: 0.2s;
}

/* ---------- Tipografia ---------- */
:root { --font-ui: "IBM Plex Sans", system-ui, sans-serif;
        --font-mono: "IBM Plex Mono", ui-monospace, monospace; }
html, body { font-family: var(--font-ui); }
.font-mono, .num { font-family: var(--font-mono); }
/* números tabulares alinhados */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.tabular { font-variant-numeric: tabular-nums; }

/* ============================================================
   ESCALA DE OCUPAÇÃO — 5 níveis (elemento visual central)
   Colorblind-safe: luminosidade varia + valor numérico sempre
   presente na célula. Verde→Amarelo→Laranja→Vermelho→Roxo(>100%).
   Nota UX (ver comentário no topo de cada tela): vermelho = "no
   limite" (95–100%), roxo = estouro (>100%). Vermelho continua
   reservado a perigo (atraso/estouro), nunca a botão comum.
   ============================================================ */
.occ { --occ-fill:#e9edf1; --occ-ink:#334; --occ-edge:#cbd3db; }
.occ-1 { --occ-fill:#e3f3e8; --occ-ink:#1c6339; --occ-edge:#a6d9ba; } /* folga  <70%  */
.occ-2 { --occ-fill:#faedc2; --occ-ink:#6f5410; --occ-edge:#e4cf86; } /* saudável 70–84 */
.occ-3 { --occ-fill:#f5d3a2; --occ-ink:#7a3d0c; --occ-edge:#e0ab63; } /* cheio  85–94   */
.occ-4 { --occ-fill:#db3b2c; --occ-ink:#ffffff; --occ-edge:#b32a1d; } /* no limite 95–100 */
.occ-5 { --occ-fill:#5f2a86; --occ-ink:#ffffff; --occ-edge:#47205f;   /* estouro  >100    */
         background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.13) 0 3px, transparent 3px 7px); }
[data-theme="wiserdark"] .occ-1 { --occ-fill:#173d27; --occ-ink:#a7e0bd; --occ-edge:#245c3a; }
[data-theme="wiserdark"] .occ-2 { --occ-fill:#4a3d12; --occ-ink:#f0dc9b; --occ-edge:#6b591f; }
[data-theme="wiserdark"] .occ-3 { --occ-fill:#5c3410; --occ-ink:#f4c78e; --occ-edge:#824c1a; }
[data-theme="wiserdark"] .occ-4 { --occ-fill:#c0392b; --occ-ink:#fff; --occ-edge:#e05a4d; }
[data-theme="wiserdark"] .occ-5 { --occ-fill:#6b2d8f; --occ-ink:#fff; --occ-edge:#8a4caf; }

.occ-cell {
  background: var(--occ-fill); color: var(--occ-ink);
  border: 1px solid var(--occ-edge);
  font-variant-numeric: tabular-nums;
}
/* legenda swatch */
.occ-swatch { width:1rem; height:1rem; border-radius:3px; background:var(--occ-fill); border:1px solid var(--occ-edge); display:inline-block; }

/* ============================================================
   BADGES DE STATUS — vocabulário fixo
   daisy: badge  (cores semânticas dedicadas p/ não colidir c/ btn)
   ============================================================ */
.badge-status { font-size:.68rem; font-weight:600; letter-spacing:.01em; border:1px solid transparent; padding:.15rem .5rem; height:auto; border-radius:var(--rounded-badge); text-transform:none; gap:.3rem; }
.st-atrasada  { background:#fbe0dd; color:#a12318; border-color:#eeb4ac; }
.st-noprazo   { background:#e2f0e7; color:#1d6339; border-color:#b6d8c3; }
.st-congelada { background:#dfe8f4; color:#274b78; border-color:#b3c6e0; }
.st-externa   { background:transparent; color:#5a4a2a; border:1px solid #b79a5c; background-image: repeating-linear-gradient(45deg, rgba(150,120,50,.14) 0 4px, transparent 4px 8px); }
.st-revisar   { background:#fbedcf; color:#7a5410; border-color:#e6cd86; }
.st-estouro   { background:#ebdcf5; color:#5a2483; border-color:#cbb0e0; }
[data-theme="wiserdark"] .st-atrasada  { background:#48211c; color:#f2a99f; border-color:#7a382e; }
[data-theme="wiserdark"] .st-noprazo   { background:#1c3a28; color:#8fd6ab; border-color:#2f5c40; }
[data-theme="wiserdark"] .st-congelada { background:#22304a; color:#a6c2e6; border-color:#39527a; }
[data-theme="wiserdark"] .st-externa   { color:#d8c48a; border-color:#8a7440; }
[data-theme="wiserdark"] .st-revisar   { background:#443714; color:#e8cf8f; border-color:#6b571f; }
[data-theme="wiserdark"] .st-estouro   { background:#3a2450; color:#cba6e6; border-color:#5a3a7a; }

/* ============================================================
   BADGES DE ORIGEM DA CARGA — rastreabilidade do cálculo
   peso / lead-time / operação / sem dado
   ============================================================ */
.badge-origem { display:inline-flex; align-items:center; gap:.25rem; font-family:var(--font-mono); font-size:.6rem; font-weight:500; letter-spacing:.02em; text-transform:uppercase; padding:.05rem .35rem; border-radius:3px; border:1px solid; line-height:1.4; }
.badge-origem::before { content:""; width:6px; height:6px; border-radius:1px; }
.og-peso     { color:#1d6339; border-color:#b6d8c3; background:#eef7f1; }
.og-peso::before     { background:#2f855a; }
.og-lead     { color:#274b78; border-color:#b8caea; background:#eef3fa; }
.og-lead::before     { background:#3b6bb0; }
.og-operacao { color:#7a5410; border-color:#e2cd8e; background:#fbf4df; }
.og-operacao::before { background:#b7791f; }
.og-semdado  { color:#8a5a10; border-color:#e0b878; background:#fbeed6; border-style:dashed; }
.og-semdado::before  { background:#d68a1f; border-radius:50%; }
[data-theme="wiserdark"] .og-peso     { color:#8fd6ab; border-color:#2f5c40; background:#15281d; }
[data-theme="wiserdark"] .og-lead     { color:#a6c2e6; border-color:#39527a; background:#182335; }
[data-theme="wiserdark"] .og-operacao { color:#e8cf8f; border-color:#6b571f; background:#2e2712; }
[data-theme="wiserdark"] .og-semdado  { color:#e6bd7c; border-color:#7a5a28; background:#2e2410; }

/* ---------- razão crítica (indicador de urgência) ---------- */
.cr { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:600; }
.cr-neg { color:#c0392b; }              /* <1 → atrasada */
.cr-low { color:#b7791f; }              /* 1–1.3 apertado */
.cr-ok  { color:#2f855a; }              /* folga */
[data-theme="wiserdark"] .cr-neg { color:#f2a99f; }
[data-theme="wiserdark"] .cr-low { color:#e8cf8f; }
[data-theme="wiserdark"] .cr-ok  { color:#8fd6ab; }

/* ---------- densidade de tabela (planilha-like) ---------- */
.table-dense :where(th,td) { padding:.4rem .6rem; }
.table-dense thead th { font-size:.68rem; text-transform:uppercase; letter-spacing:.03em; font-weight:600; }
/* tela Terceiros: 7 colunas em 1024 px com o menu aberto — o respiro menor é o que faz o "Prazo da OP" caber */
.terc-tabela :where(th,td) { padding-left:.45rem; padding-right:.45rem; }
/* selo "devolvida pelo terceiro, aguardando apontamento": o tamanho é o do .badge-status (legível);
   só quebra em duas linhas, alinhado à esquerda, para caber na coluna da OST */
.terc-devolvida { display:flex; width:fit-content; max-width:200px; white-space:normal; text-align:left; line-height:1.25; }
/* "a emitir pelo APS no Aplicar" (piloto T16): a etapa que o APS mandou para terceiro, embaixo do serviço.
   Texto suave em itálico — sem a cor primária, que na tela clara se confundia com o link da OP */
.terc-aps { display:block; font-size:.7rem; line-height:1.3; font-style:italic; color:color-mix(in oklch, oklch(var(--bc)) 65%, transparent); white-space:normal; }
.row-late { box-shadow: inset 3px 0 0 0 #db3b2c; }
.row-frozen td:first-child { position:relative; }

/* ---------- shell ---------- */
.shell-nav a.active { background: oklch(var(--b3)); font-weight:600; }
.shell-nav a { border-left:2px solid transparent; }
.shell-nav a.active { border-left-color: oklch(var(--p)); }
.sync-dot { width:7px; height:7px; border-radius:50%; background:#2f855a; box-shadow:0 0 0 3px color-mix(in srgb,#2f855a 22%, transparent); }
.sync-dot.stale { background:#b7791f; box-shadow:0 0 0 3px color-mix(in srgb,#b7791f 22%, transparent); }

/* barra de rolagem discreta p/ ferramenta densa */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background: oklch(var(--b3)); border-radius:6px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-track { background:transparent; }

/* kbd hint */
.kbd-hint { font-family:var(--font-mono); font-size:.62rem; }

/* ---------- drawer lateral padrão (detalhe de etapa/célula/OP) ---------- */
/* daisy: drawer drawer-end  →  Drawer.razor */
/* a largura do painel é lida também pela bandeja do Quadro (recuo com a gaveta aberta): um
   número só, num lugar só */
:root{--wdrawer-largura:min(420px, 92vw)}
.wdrawer{position:fixed;inset:0;z-index:60;pointer-events:none;visibility:hidden}
.wdrawer.open{pointer-events:auto;visibility:visible}
.wdrawer-scrim{position:absolute;inset:0;background:rgba(15,20,28,.35);opacity:0;transition:opacity .2s}
.wdrawer.open .wdrawer-scrim{opacity:1}
.wdrawer-panel{position:absolute;top:0;right:0;height:100%;width:var(--wdrawer-largura);transform:translateX(100%);transition:transform .24s cubic-bezier(.4,0,.2,1);box-shadow:-8px 0 24px rgba(0,0,0,.14);display:flex;flex-direction:column}
.wdrawer.open .wdrawer-panel{transform:translateX(0)}
/* gaveta de inspeção (Drawer Modal="false"): sem véu, e a tela atrás continua clicável.
   Começa ABAIXO da barra do topo (h-14): Desfazer e Aplicar têm de continuar ao alcance
   com a OP aberta — é justamente com a gaveta aberta que se mexe no plano. */
.wdrawer.livre,.wdrawer.livre.open{pointer-events:none}
.wdrawer.livre .wdrawer-panel{pointer-events:auto;top:3.5rem;height:calc(100% - 3.5rem)}

/* ---------- painel inferior (board: baldes de dia) ---------- */
.wbottom{position:absolute;left:0;right:0;bottom:0;transform:translateY(100%);transition:transform .24s cubic-bezier(.4,0,.2,1);box-shadow:0 -8px 24px rgba(0,0,0,.12)}
.wbottom.open{transform:translateY(0)}

/* ============================================================
   QUADRO (Perfil Oficina) — Gantt por máquina
   Ferramenta densa de chão de fábrica: sem enfeite, sem jargão.
   O que carrega significado é a POSIÇÃO (quando) e a COR (de
   quem / quanto folga); todo o resto é cinza de grade.
   Geometria (96px dia útil, 18px fim de semana, 44px linha)
   vem do C# (GanttGeo) — aqui só pintura.
   ============================================================ */
.quadro{
  --q-linha:oklch(var(--b3));
  --q-fundo:oklch(var(--b1));
  --q-faixa:oklch(var(--b2));
  --q-suave:color-mix(in oklch, oklch(var(--bc)) 55%, transparent);
  --q-pri:oklch(var(--p));
  --q-gelo:#dfeafa;      /* zona congelada: já liberado para a fábrica */
  --q-hachura:#e6eaee;   /* fim de semana / feriado */
  --q-ink:#1e2a37;       /* texto dentro das barras */
  --q-tarde:#c0392b;     /* passa do prazo */
  --q-cam:#6b3fb5;       /* o caminho do "por que atrasa": nem o vermelho do prazo, nem o azul da grade */
  display:flex; flex-direction:column; flex:1; min-height:0; gap:.5rem;
}
/* modo "Lista por dia": do Gantt fica só a barra de ferramentas, e ela não pode esticar —
   quem ocupa a altura que sobra é a lista, logo abaixo */
.quadro.q-so-tools{flex:0 0 auto}
[data-theme="wiserdark"] .quadro{ --q-gelo:#1b2637; --q-hachura:#1d232e; --q-ink:#e9eff6; --q-tarde:#e4695a;
  --q-cam:#b79cf0; }

/* ---- barra de ferramentas ---- */
.q-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem}
/* com a legenda aberta a barra recua a largura do painel — nunca além de meia tela, como a
   bandeja faz com a gaveta da OP. Só a BARRA recua: o Gantt continua inteiro e rolando, que é
   como ele já lida com a gaveta. */
.quadro.com-legenda .q-tools{margin-right:min(var(--wdrawer-largura), 50vw);
  transition:margin-right .24s cubic-bezier(.4,0,.2,1)}
.q-lbl{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--q-suave);font-weight:600}
.q-seg{display:inline-flex;border:1px solid var(--q-linha);border-radius:.375rem;overflow:hidden}
.q-seg button{background:var(--q-fundo);border:0;padding:.22rem .7rem;font-size:.8rem;font-weight:500;color:var(--q-suave);cursor:pointer}
.q-seg button+button{border-left:1px solid var(--q-linha)}
.q-seg button[aria-pressed="true"]{background:color-mix(in oklch, oklch(var(--p)) 12%, oklch(var(--b1)));color:var(--q-pri);font-weight:600}
/* alternador solto (o "Mostrar por que atrasa"): mesma altura dos botões do "Cor por" */
.q-tog{border:1px solid var(--q-linha);border-radius:.375rem;background:var(--q-fundo);
  padding:.22rem .7rem;font-size:.8rem;font-weight:500;color:var(--q-suave);cursor:pointer}
.q-tog[aria-pressed="true"]{background:color-mix(in oklch, var(--q-cam) 14%, oklch(var(--b1)));
  border-color:var(--q-cam);color:var(--q-cam);font-weight:600}
/* o botão da Legenda ABRE UM PAINEL (aria-expanded), não liga um modo de desenho: o realce de
   "está aberto" é o azul do app — o roxo é a cor do "por que atrasa", e é outra conversa */
.q-tog[aria-expanded="true"]{background:color-mix(in oklch, oklch(var(--p)) 12%, oklch(var(--b1)));
  border-color:color-mix(in oklch, oklch(var(--p)) 45%, transparent);color:var(--q-pri);font-weight:600}
.q-legenda{display:flex;flex-wrap:wrap;gap:.25rem .85rem;font-size:.72rem;color:var(--q-suave);margin-left:auto}
.q-legenda span{display:inline-flex;align-items:center;gap:.35rem}
.q-sw{width:13px;height:11px;border-radius:2px;border:1.5px solid;display:inline-block}
.q-sw-tarde{border-color:var(--q-tarde);background:repeating-linear-gradient(135deg,var(--q-tarde) 0 3px,transparent 3px 6px)}
.q-sw-gelo{border-color:#9dbbe4;background:var(--q-gelo)}
.q-sw-losango{width:10px;height:10px;transform:rotate(45deg);background:oklch(var(--bc));display:inline-block;margin:0 2px}

/* ---- moldura rolável: o cabeçalho dos dias e a coluna das máquinas ficam parados ---- */
.q-wrap{flex:1;min-height:0;overflow:auto;border:1px solid var(--q-linha);border-radius:.5rem;background:var(--q-fundo);outline:none}
.q-gantt{position:relative}
.q-linha{display:flex;border-bottom:1px solid var(--q-linha)}
.q-linha:last-child{border-bottom:0}
.q-label{position:sticky;left:0;z-index:6;flex:0 0 auto;background:var(--q-fundo);border-right:1px solid var(--q-linha);
  box-shadow:6px 0 6px -6px rgba(15,23,32,.22);padding:0 .7rem;display:flex;flex-direction:column;justify-content:center;gap:1px;overflow:hidden}
/* nome de máquina longo (e eles são longos no ERP) quebra em duas linhas em vez de virar "..." */
.q-label b{font-weight:600;font-size:.78rem;line-height:1.12;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;overflow:hidden;word-break:break-word}
.q-hint{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--q-suave);font-weight:600}
.q-track{position:relative;flex:0 0 auto}

.q-head{position:sticky;top:0;z-index:8;background:var(--q-faixa);border-bottom:1px solid var(--q-linha)}
.q-head .q-label{background:var(--q-faixa);z-index:9}
.dayh{position:absolute;top:0;bottom:0;padding:.3rem .5rem;border-left:1px solid var(--q-linha);display:flex;flex-direction:column;justify-content:center;gap:1px}
.dayh b{font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;color:var(--q-suave);font-weight:600;line-height:1}
.dayh .num{font-size:.78rem;font-weight:600;line-height:1.1}
.dayh.nao-util{border-left:0;padding:0}
/* I8: dia não útil para a fábrica em que ALGUMA máquina trabalha. A coluna é cheia (a barra dessa
   máquina precisa caber), então o cabeçalho volta a ter a data e uma divisória — tracejada, e com
   a data apagada, porque o dia não é de todo mundo. Quem diz de quem ele é são as linhas: a
   hachura da grade fica onde não se trabalha e some onde se trabalha (.col-maq-util). */
.dayh.nao-util.so-maquinas{border-left:1px dashed var(--q-linha);padding:.3rem .5rem}
.dayh.nao-util.so-maquinas .num{color:var(--q-suave);font-weight:500}
.dayh.nao-util.so-maquinas.hoje .num{color:var(--q-pri)}
.dayh.hoje{background:color-mix(in oklch, oklch(var(--p)) 10%, transparent)}
.dayh.hoje b,.dayh.hoje .num{color:var(--q-pri)}

/* ---- faixa do centro de trabalho ---- */
.q-centro .q-label{background:var(--q-faixa);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;color:var(--q-suave);height:22px;justify-content:center}
.q-centro .q-track{background:var(--q-faixa);height:22px}

/* ---- grade: uma só camada por trás de todas as linhas ---- */
.q-corpo{position:relative}
.q-grade{position:absolute;top:0;bottom:0;z-index:0;pointer-events:none}
/* as linhas ficam acima da grade por ORDEM (elas vêm depois no DOM), não por z-index próprio: com
   um contexto de empilhamento em cada linha, a camada do caminho (§7.1) teria de ficar ou embaixo
   de todas as barras ou em cima da coluna fixa dos nomes — não existe meio-termo. Sem ele, cada
   peça se resolve no mesmo contexto: barra 3 < caminho 4 < barra escolhida 5 < nomes 6 < dias 8. */
.q-linha.row,.q-linha.q-centro{position:relative}
.col{position:absolute;top:0;bottom:0;border-left:1px solid var(--q-linha)}
.col.nao-util{border-left:0;background:repeating-linear-gradient(135deg,var(--q-hachura) 0 4px,transparent 4px 8px)}
.col.nao-util.so-maquinas{border-left:1px dashed var(--q-linha)}
.col.congelada{background:var(--q-gelo)}
/* dia em que SÓ esta máquina trabalha (sábado útil do centro no ERP): apaga a hachura da grade
   da fábrica na linha dela, senão a barra cai numa coluna marcada como "não se produz" */
.col-maq-util{position:absolute;top:0;bottom:0;z-index:0;background:var(--q-fundo)}
/* o contrário (I8): dia de coluna cheia em que SÓ OUTRAS máquinas trabalham. Hachura POR CIMA das
   barras: sem isso uma etapa que atravessa o dia esconderia a hachura da grade bem nos 96px em que
   esta máquina está parada. Quem põe por cima é o z-index 4, não a ordem no DOM — a ordem só
   desempata entre iguais, e .bar é z-index 3. Fica na régua do quadro entre a barra comum (3) e a
   escolhida/da cadeia, o losango do prazo e a barra arrastada (5, 5, 6, 7), que continuam por cima;
   a camada do caminho também é 4 e vence o empate por vir depois no DOM.
   Não recebe ponteiro — o arrasto e o clique continuam sendo da barra embaixo. */
.col-maq-parada{position:absolute;top:0;bottom:0;z-index:4;pointer-events:none;
  background:repeating-linear-gradient(135deg,var(--q-hachura) 0 4px,transparent 4px 8px)}
.q-agora{position:absolute;top:0;bottom:0;width:2px;background:var(--q-pri);opacity:.85}

/* ---- cabeçalho da linha da máquina ---- */
/* selo de gargalo + carga dividem UMA linha embaixo do nome: a linha tem 48px e o nome da máquina
   já pode ocupar duas delas. O que não couber encolhe com reticências, e a dica conta inteiro. */
.q-meta{display:flex;align-items:center;gap:.3rem;min-width:0}
.q-carga{display:flex;align-items:center;gap:.3rem;font-size:.68rem;color:var(--q-suave);white-space:nowrap;min-width:0}
.q-carga .num{overflow:hidden;text-overflow:ellipsis}
.q-medidor{width:38px;height:4px;border-radius:2px;background:var(--q-linha);overflow:hidden;flex:0 0 auto}
.q-medidor i{display:block;height:100%;background:oklch(var(--a))}
.q-carga.cheia{color:var(--q-tarde);font-weight:600}
.q-carga.cheia .q-medidor i{background:var(--q-tarde)}
/* selo das três máquinas que mais seguram a carteira (D7) */
.q-gargalo{flex:0 0 auto;font-size:.6rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  padding:.05rem .3rem;border-radius:.25rem;border:1px solid #b7791f;background:#faedc2;color:#7a5210}
[data-theme="wiserdark"] .q-gargalo{border-color:#c39a3a;background:#443714;color:#e6cd8c}
.q-vazio{position:absolute;left:.6rem;top:50%;transform:translateY(-50%);font-size:.72rem;color:var(--q-suave)}

/* ---- barras ---- */
.bar{position:absolute;top:13px;height:30px;border-radius:4px;border:1.5px solid;padding:0 .4rem;color:var(--q-ink);
  display:flex;align-items:center;gap:.3rem;overflow:hidden;white-space:nowrap;z-index:3;cursor:pointer;
  user-select:none;transition:opacity .12s,box-shadow .12s}
.bar .bl{font-size:.72rem;font-weight:600;letter-spacing:-.01em}
.bar .bs{font-size:.72rem;opacity:.72;overflow:hidden;text-overflow:ellipsis}
.bar .pin{width:11px;height:11px;flex:0 0 auto;margin-left:auto;fill:currentColor;opacity:.75}
.bar .prog{position:absolute;left:0;top:0;bottom:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(30,42,55,.20) 0 3px,transparent 3px 6px)}
[data-theme="wiserdark"] .bar .prog{background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 3px,transparent 3px 6px)}
.bar .alem-prazo{position:absolute;inset:0;pointer-events:none;opacity:.34;
  background:repeating-linear-gradient(135deg,var(--q-tarde) 0 3px,transparent 3px 7px)}
.bar.alem{border-color:var(--q-tarde)}   /* passa do prazo: o contorno vermelho diz na hora */
.bar.ext{border-style:dashed;background:transparent;border-color:color-mix(in oklch, oklch(var(--bc)) 35%, transparent);cursor:default}
/* mandada para terceiro pelo APS, ainda sem OST no Wiser+ (piloto T16): pontilhada, para distinguir da OST de verdade */
.bar.ext.pendente-aps{border-style:dotted;border-width:2px}
.bar.sel{box-shadow:0 0 0 2px var(--q-pri);z-index:5}
.bar.dim{opacity:.32}
.bar.fora-plano{opacity:.45}
.bar.fora-plano:hover{opacity:.8}
.bar:focus-visible{outline:2px solid var(--q-pri);outline-offset:1px}

/* losango do prazo prometido — um por OP, na faixa livre acima das barras da linha.
   z-index 5 (acima da camada do caminho, 4): a faixa livre é também onde ficam o alvo e o rótulo
   do segmento de fila, e embaixo deles o losango ficaria sem dica e sem ponteiro. */
.losango{position:absolute;top:0;width:11px;height:11px;transform:translateX(-50%) rotate(45deg);z-index:5;
  background:oklch(var(--bc));border:1.5px solid var(--q-fundo)}
.losango.atrasada{background:var(--q-tarde)}

/* paleta de 8 cores por cliente — mesma cor em todas as máquinas.
   As três paletas valem para a barra do Gantt E para o cartão da Lista por dia (§7.1): são dois
   jeitos de ver o mesmo quadro, e a mesma OP não pode mudar de cor ao trocar de modo. */
:is(.bar,.lpd-cartao,.plano-cartao).c1{background:#dbe8f7;border-color:#5b86b8} :is(.bar,.lpd-cartao,.plano-cartao).c2{background:#d5ece8;border-color:#3f8f85}
:is(.bar,.lpd-cartao,.plano-cartao).c3{background:#e4dcf4;border-color:#7a5fad} :is(.bar,.lpd-cartao,.plano-cartao).c4{background:#f2e7c7;border-color:#a3801f}
:is(.bar,.lpd-cartao,.plano-cartao).c5{background:#dfe1f7;border-color:#5f66bd} :is(.bar,.lpd-cartao,.plano-cartao).c6{background:#dcefdd;border-color:#4a8a52}
:is(.bar,.lpd-cartao,.plano-cartao).c7{background:#e1e6ec;border-color:#6d7a87} :is(.bar,.lpd-cartao,.plano-cartao).c8{background:#f6e1d2;border-color:#b06a3c}
[data-theme="wiserdark"] :is(.bar,.lpd-cartao,.plano-cartao).c1{background:#22334a;border-color:#6d97c9} [data-theme="wiserdark"] :is(.bar,.lpd-cartao,.plano-cartao).c2{background:#1c3733;border-color:#4fa094}
[data-theme="wiserdark"] :is(.bar,.lpd-cartao,.plano-cartao).c3{background:#2d2543;border-color:#9079c4} [data-theme="wiserdark"] :is(.bar,.lpd-cartao,.plano-cartao).c4{background:#3a3218;border-color:#bb9733}
[data-theme="wiserdark"] :is(.bar,.lpd-cartao,.plano-cartao).c5{background:#272a45;border-color:#7b83d4} [data-theme="wiserdark"] :is(.bar,.lpd-cartao,.plano-cartao).c6{background:#1e3722;border-color:#5da066}
[data-theme="wiserdark"] :is(.bar,.lpd-cartao,.plano-cartao).c7{background:#2a313a;border-color:#8695a3} [data-theme="wiserdark"] :is(.bar,.lpd-cartao,.plano-cartao).c8{background:#3d2a1e;border-color:#c68355}

/* cor por folga — régua da Demarchi (piloto §3.3): verde sobra mais de 3 dias, âmbar 3 dias ou menos, vermelho atrasa ou é hoje */
:is(.bar,.lpd-cartao,.plano-cartao).f-ok{background:#e3f3e8;border-color:#2f855a} :is(.bar,.lpd-cartao,.plano-cartao).f-warn{background:#faedc2;border-color:#b7791f}
:is(.bar,.lpd-cartao,.plano-cartao).f-err{background:#fbe0dd;border-color:#c0392b} :is(.bar,.lpd-cartao,.plano-cartao).f-sem{background:#eceff2;border-color:#98a2ad}
.q-sw.f-ok{background:#e3f3e8;border-color:#2f855a} .q-sw.f-warn{background:#faedc2;border-color:#b7791f}
.q-sw.f-err{background:#fbe0dd;border-color:#c0392b} .q-sw.f-sem{background:#eceff2;border-color:#98a2ad}
[data-theme="wiserdark"] :is(.bar,.lpd-cartao,.plano-cartao).f-ok,[data-theme="wiserdark"] .q-sw.f-ok{background:#1c3a28;border-color:#4f9e71}
[data-theme="wiserdark"] :is(.bar,.lpd-cartao,.plano-cartao).f-warn,[data-theme="wiserdark"] .q-sw.f-warn{background:#443714;border-color:#c39a3a}
[data-theme="wiserdark"] :is(.bar,.lpd-cartao,.plano-cartao).f-err,[data-theme="wiserdark"] .q-sw.f-err{background:#48211c;border-color:#d4604f}
[data-theme="wiserdark"] :is(.bar,.lpd-cartao,.plano-cartao).f-sem,[data-theme="wiserdark"] .q-sw.f-sem{background:#2b313a;border-color:#7e8b99}

/* cor por criticidade (D5) — o que a ETAPA pode escorregar sem mudar a data da OP.
   Escala de três: forte em cima ("não pode atrasar"), âmbar no meio, neutro embaixo. Deliberadamente
   sem verde: "tem folga" não é uma boa notícia sobre o prazo, é só uma etapa que pode esperar.
   Etapa sem análise (k-sem) fica no mesmo neutro — a tela não afirma folga que ninguém mediu. */
:is(.bar,.lpd-cartao,.plano-cartao).k-critica{background:#f7cfc8;border-color:#a32a18} .q-sw.k-critica{background:#f7cfc8;border-color:#a32a18}
:is(.bar,.lpd-cartao,.plano-cartao).k-quase{background:#faedc2;border-color:#b7791f} .q-sw.k-quase{background:#faedc2;border-color:#b7791f}
:is(.bar,.lpd-cartao,.plano-cartao).k-folga,:is(.bar,.lpd-cartao,.plano-cartao).k-sem{background:#eceff2;border-color:#98a2ad}
.q-sw.k-folga,.q-sw.k-sem{background:#eceff2;border-color:#98a2ad}
[data-theme="wiserdark"] :is(.bar,.lpd-cartao,.plano-cartao).k-critica,[data-theme="wiserdark"] .q-sw.k-critica{background:#5c2318;border-color:#e0705c}
[data-theme="wiserdark"] :is(.bar,.lpd-cartao,.plano-cartao).k-quase,[data-theme="wiserdark"] .q-sw.k-quase{background:#443714;border-color:#c39a3a}
[data-theme="wiserdark"] :is(.bar,.lpd-cartao,.plano-cartao).k-folga,[data-theme="wiserdark"] :is(.bar,.lpd-cartao,.plano-cartao).k-sem{background:#2b313a;border-color:#7e8b99}
[data-theme="wiserdark"] .q-sw.k-folga,[data-theme="wiserdark"] .q-sw.k-sem{background:#2b313a;border-color:#7e8b99}

/* ---- arrastar, esticar e fixar (§7.1) ---- */
/* touch-action:none só para quem edita: no perfil leitura o dedo continua rolando o quadro */
.quadro.editavel .bar:not(.ext){cursor:grab;touch-action:none}
/* ação do rascunho em voo: o módulo não deixa começar gesto novo, e o cursor conta isso */
.acao-em-voo .quadro.editavel .bar:not(.ext){cursor:progress}
/* a barra na mão passa por cima das outras e da coluna dos nomes, mas continua embaixo do
   cabeçalho dos dias (8) — ele é a régua que a planejadora está lendo enquanto arrasta */
.bar.arrastando{z-index:7;cursor:grabbing;opacity:1;transition:none;
  outline:2px solid var(--q-pri);outline-offset:0;box-shadow:0 7px 18px rgba(15,23,32,.38)}
[data-theme="wiserdark"] .bar.arrastando{box-shadow:0 7px 18px rgba(0,0,0,.6)}

/* alça de esticar: some até o mouse chegar na barra, senão o Gantt vira um monte de tracinhos */
.bar .rz{position:absolute;right:0;top:0;bottom:0;width:9px;cursor:ew-resize;z-index:4}
.bar .rz::after{content:"";position:absolute;right:3px;top:50%;transform:translateY(-50%);
  width:2px;height:13px;border-radius:1px;background:currentColor;opacity:0;transition:opacity .12s}
.bar:hover .rz::after,.bar:focus-visible .rz::after{opacity:.55}

/* alfinete: botão discreto, sempre visível quando a etapa está fixada */
.bar .fixar{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5;
  border:0;background:transparent;padding:2px;line-height:0;cursor:pointer;color:inherit;
  opacity:0;transition:opacity .12s}
.bar .fixar .pin{margin:0;opacity:1}
.bar:hover .fixar,.bar:focus-within .fixar,.bar .fixar.ativa{opacity:.85}
.bar .fixar:hover{opacity:1}
.bar .fixar:focus-visible{outline:2px solid var(--q-pri);outline-offset:1px;opacity:1}
/* com a barra na mão, alça e alfinete só atrapalhariam a leitura */
.bar.arrastando .rz::after,.bar.arrastando .fixar{opacity:0}

/* durante o arrasto vertical: só as máquinas do mesmo centro são alvo */
.row.permitida .q-track{background:color-mix(in oklch, oklch(var(--p)) 15%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in oklch, oklch(var(--p)) 45%, transparent)}
.row.permitida .q-label{background:color-mix(in oklch, oklch(var(--p)) 12%, oklch(var(--b1)))}
.row.bloqueada{opacity:.3}

@media (prefers-reduced-motion:reduce){ .bar,.bar .rz::after,.bar .fixar{transition:none} }

/* ---- "Mostrar por que atrasa" (§7.1) ---- */
/* Contorno na barra: forte no que determina a data da OP, fino no resto da OP. Vem depois do
   .bar.sel de propósito — com a OP escolhida, é a cadeia que a planejadora está olhando. */
.bar.cad{box-shadow:0 0 0 2px var(--q-cam);z-index:5}
.bar.cad-fraca{box-shadow:0 0 0 1px color-mix(in oklch, var(--q-cam) 60%, transparent)}
/* "esta OP estava na sua frente": aparece enquanto o ponteiro está no segmento da fila e vence o
   esmaecimento — a resposta é justamente sobre uma barra de OUTRA OP. Anel TRACEJADO na cor do
   caminho: é a mesma conversa das setas, e o vermelho aqui diria "passa do prazo", que é outra
   coisa. Sem subir de camada: acima do caminho a barra taparia o alvo do segmento e o ponteiro
   entraria e sairia dele sem parar. */
.bar.na-frente{outline:2px dashed var(--q-cam);outline-offset:1px;opacity:1}

/* ---- foco vindo do "por que esta data?" (gaveta da OP, §7.2, Task 17) ---- */
/* clicar num elo rola até a barra dele e pisca este anel — é o mesmo "achei" de quem clicou,
   sem depender de a barra já estar selecionada (o realce de .sel/.cad não muda com o clique). */
.bar.foco{animation:q-foco 1.2s ease-out 1;z-index:6}
@keyframes q-foco{
  0%,35%{box-shadow:0 0 0 3px var(--q-cam)}
  100%{box-shadow:0 0 0 3px transparent}
}
@media (prefers-reduced-motion:reduce){ .bar.foco{animation:none;box-shadow:0 0 0 3px var(--q-cam)} }

/* A camada é um SVG só, por cima de todas as linhas de máquina. pointer-events:none no conjunto:
   ela não pode roubar o clique da barra nem o arrasto — só os segmentos voltam a receber ponteiro. */
.q-caminho{position:absolute;top:0;z-index:4;pointer-events:none;overflow:visible}
.q-caminho marker path{fill:var(--q-cam)}
.cam-seta{fill:none;stroke:var(--q-cam);stroke-width:1.6;marker-end:url(#q-ponta)}
.cam-tracejado{stroke:var(--q-cam);stroke-width:2;stroke-dasharray:5 4;stroke-linecap:round}
/* só o alvo (a faixa livre acima das barras) e o rótulo recebem ponteiro; o tracejado corre por
   cima das barras das OPs que estavam na frente e não pode roubar o clique nem o arrasto delas */
.cam-alvo{fill:transparent;pointer-events:auto}
.cam-rotulo{pointer-events:auto}
.q-caminho text{font-size:.66rem;font-weight:600;fill:var(--q-cam);
  paint-order:stroke;stroke:var(--q-fundo);stroke-width:3px;stroke-linejoin:round}
.cam-pulo{font-weight:500}
.cam-fila:hover .cam-tracejado,.cam-fila:focus .cam-tracejado{stroke-width:3}
/* o anel nativo envolveria o segmento inteiro (às vezes a janela toda de largura); no lugar dele,
   o próprio alvo acende — é ele que diz onde o teclado está */
.cam-fila:focus{outline:none}
.cam-fila:focus-visible .cam-alvo{fill:color-mix(in oklch, var(--q-cam) 16%, transparent);
  stroke:var(--q-cam);stroke-width:1.5;rx:3}

/* ============================================================
   LEGENDA DO QUADRO (Perfil Oficina, §7.1)
   Painel lateral NÃO modal com a legenda completa: o que é cada
   cor, cada preenchimento e cada marca da tela. Fica aberto
   enquanto se usa o Quadro — mesmo padrão visual da gaveta da OP
   (.wdrawer.livre), e ocupa o mesmo lugar: uma substitui a outra.

   As amostras são os PRÓPRIOS elementos da tela (.bar, .col,
   .losango, .q-gargalo, .q-carga, .cam-tracejado…). Daqui sai só
   o CONTEXTO que eles precisam para existir fora do Gantt — a
   régua da linha da máquina (position/altura) e o fim do cursor
   de arrasto —, nunca uma segunda pintura. É isso que faz a
   amostra ser idêntica ao elemento ao lado por construção, e não
   envelhecer quando a tela muda. O painel vive DENTRO de .quadro
   justamente por isso: as variáveis (--q-gelo, --q-tarde,
   --q-cam, --q-ink) chegam por herança, sem cópia.
   ============================================================ */
.leg{outline:none}
.leg-corpo{display:flex;flex-direction:column;gap:1.1rem}
.leg-bloco{display:flex;flex-direction:column;gap:.55rem}
.leg-bloco>h4{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--q-suave);
  font-weight:700;margin:0}
.leg-bloco+.leg-bloco{border-top:1px solid var(--q-linha);padding-top:.9rem}
.leg-itens{display:flex;flex-direction:column;gap:.6rem;margin:0;padding:0;list-style:none}
.leg-item{display:flex;align-items:flex-start;gap:.65rem}
.leg-item>.leg-txt{min-width:0;display:flex;flex-direction:column;gap:.1rem;padding-top:.55rem}
/* item cuja amostra é larga demais para a coluna de 80px (a carga, o tracejado com rótulo): a
   amostra vai por cima do texto, e o texto começa na margem */
.leg-item.empilhada{flex-direction:column;align-items:stretch;gap:.25rem}
.leg-item.empilhada>.leg-txt{padding-top:0}
.leg-nome{font-size:.78rem;font-weight:600;line-height:1.25}
.leg-frase{font-size:.72rem;line-height:1.45;color:var(--q-suave)}

/* o invólucro é uma LINHA DE MÁQUINA do Gantt (44px, como GanttGeo.H): dentro dele o losango fica
   no topo e a barra a 13px, exatamente como na tela — inclusive dois losangos sobre a mesma barra */
.leg-amostra{position:relative;flex:0 0 auto;width:80px;height:44px}
.leg-amostra.larga{width:100%}
/* amostra que não é do Gantt (selo, medidor, chip): fluxo normal, e larga o quanto precisar —
   presa nos 80px da coluna, a carga "494% — 4,9×" saía com reticências (visto no navegador),
   que é justamente o número que a frase ao lado está explicando */
.leg-amostra.livre{width:auto;min-width:80px;height:auto;
  display:flex;align-items:center;gap:.35rem .9rem;flex-wrap:wrap}
.leg .q-carga,.leg .q-gargalo,.leg .bp-chip{flex:0 0 auto}
.leg-amostra.cartao{width:150px;height:auto}
/* a barra e o cartão não são pegadores aqui: nada de cursor de arrasto nem de clique */
.leg .bar,.leg .lpd-cartao{cursor:default;transition:none}
.leg .bar .rz,.leg .bar .fixar{display:none}
/* o chip do conflito lê as variáveis da bandeja "Com problema": o invólucro traz esse contexto e
   desfaz só a CAIXA dela (borda, fundo, coluna) — a pintura do chip continua sendo a de lá */
.leg .bandeja{display:inline-flex;flex:0 0 auto;border:0;background:transparent;border-radius:0;overflow:visible}

/* ---- bloco 1: as cores seguem o "Cor por" que está ligado ---- */
/* o modo ativo abre; os outros dois ficam recolhidos e secundários — quem olha a tela está vendo
   UMA das três escalas, e as outras duas não podem competir com ela */
.leg-cor{border:1px solid var(--q-linha);border-radius:.4rem;padding:.35rem .5rem}
.leg-cor>summary{font-size:.76rem;font-weight:600;cursor:pointer;color:var(--q-suave);list-style:none}
.leg-cor>summary::-webkit-details-marker{display:none}
.leg-cor>summary::before{content:"▸";display:inline-block;width:.8rem;color:var(--q-suave)}
.leg-cor[open]>summary{color:oklch(var(--bc))}
.leg-cor[open]>summary::before{transform:rotate(90deg)}
.leg-cor[open]{border-color:color-mix(in oklch, oklch(var(--p)) 35%, var(--q-linha));
  background:color-mix(in oklch, oklch(var(--p)) 4%, transparent)}
.leg-cor>summary:focus-visible{outline:2px solid var(--q-pri);outline-offset:1px}
.leg-cor .leg-itens{margin-top:.5rem}
/* na escala de cores a amostra não precisa da linha inteira: só da barra */
.leg-cor .leg-amostra{height:30px}
.leg-cor .leg-amostra .bar{top:0}
.leg-cor .leg-item>.leg-txt{padding-top:.4rem}

/* ============================================================
   LEGENDA CURTA EM LINHA (Prazos, indicadores da Fábrica)
   Uma linha discreta com as MESMAS marcas das células. Não é o
   painel do Quadro: aqui são duas ou três coisas, e um painel
   seria desproporcional.
   ============================================================ */
.leg-inline{display:flex;flex-wrap:wrap;gap:.25rem 1rem;font-size:.7rem;
  color:oklch(var(--bc)/.6);align-items:center}
.leg-inline>span{display:inline-flex;align-items:center;gap:.35rem}
/* as amostras são os elementos de verdade (.g-tag da folga, .st-revisar do selo, o cartão
   "sem dado"); daqui sai só o tamanho de amostra — nunca uma segunda pintura */
.leg-inline .fab-cartao{flex:0 0 auto;width:14px;height:12px;padding:0;border-radius:2px;gap:0}
.leg-inline .g-tag,.leg-inline .badge-status{font-size:.62rem;padding:.02rem .3rem;white-space:nowrap}

/* ============================================================
   LISTA POR DIA (Perfil Oficina, §7.1) — o outro modo do Quadro
   Uma máquina, uma coluna por dia útil, cartões na ordem da fila
   do dia. É a leitura do chão: "o que esta máquina faz amanhã,
   e em que ordem". Herda o vocabulário visual do Gantt (mesmas
   paletas de cor, mesmo cinza de grade, mesmo mono nos números);
   o que muda é a geometria — aqui a posição não é tempo, é FILA.
   ============================================================ */
.lista-dia{display:flex;flex-direction:column;flex:1;min-height:0;gap:.5rem;
  --q-linha:oklch(var(--b3));
  --q-fundo:oklch(var(--b1));
  --q-faixa:oklch(var(--b2));
  --q-suave:color-mix(in oklch, oklch(var(--bc)) 55%, transparent);
  --q-pri:oklch(var(--p));
  --q-gelo:#dfeafa;
  --q-ink:#1e2a37;
  --q-tarde:#c0392b;
}
[data-theme="wiserdark"] .lista-dia{--q-gelo:#1b2637;--q-ink:#e9eff6;--q-tarde:#e4695a}

/* ---- escolha da máquina ---- */
.lpd-topo{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;flex-shrink:0}
.lpd-maquina{border:1px solid var(--q-linha);border-radius:.375rem;background:var(--q-fundo);
  padding:.22rem .5rem;font-size:.8rem;font-weight:600;max-width:20rem}
.lpd-maquina:focus-visible{outline:2px solid var(--q-pri);outline-offset:1px}
.lpd-carga{display:inline-flex;align-items:center;font-size:.72rem;color:var(--q-suave);white-space:nowrap}
.lpd-carga.cheia{color:var(--q-tarde);font-weight:600}
.lpd-dica{font-size:.72rem;color:var(--q-suave);margin-left:auto}

/* ---- as colunas ---- */
/* rolagem horizontal quando os 10 dias não cabem; as colunas esticam juntas para os rodapés
   ficarem alinhados — é comparando "6h30 de 8h45" lado a lado que se enxerga o dia estourado */
.lpd{flex:1;min-height:0;display:flex;align-items:stretch;gap:.5rem;overflow:auto;padding-bottom:.25rem}
.lpd-col{flex:0 0 232px;display:flex;flex-direction:column;min-height:0;
  border:1px solid var(--q-linha);border-radius:.5rem;background:var(--q-fundo);overflow:hidden}
.lpd-col.congelada{background:var(--q-gelo)}
.lpd-col.hoje{border-color:var(--q-pri);box-shadow:0 0 0 1px var(--q-pri) inset}

.lpd-cab{display:flex;align-items:baseline;gap:.4rem;padding:.35rem .55rem;background:var(--q-faixa);
  border-bottom:1px solid var(--q-linha);flex:0 0 auto}
.lpd-cab b{font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;color:var(--q-suave);font-weight:600}
.lpd-cab .num{font-size:.8rem;font-weight:600}
.lpd-col.hoje .lpd-cab b,.lpd-col.hoje .lpd-cab .num{color:var(--q-pri)}
.lpd-gelo{margin-left:auto;font-size:.6rem;font-weight:600;letter-spacing:.02em;color:var(--q-suave)}

/* a fila do dia rola DENTRO da coluna: um dia com 12 cartões passava da altura da tela e os
   últimos ficavam escondidos atrás do rodapé, sem jeito de alcançá-los (visto na verificação) */
.lpd-cartoes{flex:1;min-height:2.5rem;display:flex;flex-direction:column;gap:.35rem;padding:.4rem;
  position:relative;overflow-y:auto}
.lpd-vazio{font-size:.72rem;color:var(--q-suave);padding:.2rem .1rem}

.lpd-rodape{flex:0 0 auto;padding:.3rem .55rem;border-top:1px solid var(--q-linha);background:var(--q-faixa);
  font-size:.74rem;font-weight:600;color:var(--q-suave);white-space:nowrap}

/* ---- o cartão ---- */
.lpd-cartao{position:relative;border:1.5px solid;border-radius:4px;padding:.3rem .4rem;color:var(--q-ink);
  display:flex;flex-direction:column;gap:1px;cursor:pointer;user-select:none;
  transition:opacity .12s,box-shadow .12s}
.lpd-l1{display:flex;align-items:baseline;gap:.35rem;font-size:.74rem;font-weight:600;min-width:0}
.lpd-item{opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lpd-l2{font-size:.72rem;opacity:.78;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lpd-l3{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;font-size:.72rem}
.lpd-horas{font-weight:600}
.lpd-selo{font-size:.6rem;font-weight:700;letter-spacing:.02em;padding:.02rem .28rem;border-radius:.25rem;
  border:1px solid currentColor;opacity:.85;white-space:nowrap}
.lpd-selo.alem{color:var(--q-tarde);opacity:1}
/* continuação: o pedaço de hoje de uma etapa que começou antes. Sem borda — ele não é um estado da
   OP como os outros selos, é um recado sobre ESTE cartão (aqui não se move a etapa). */
.lpd-selo.continua{border-color:transparent;font-weight:600;opacity:.7;padding-left:0}
.lpd-cartao.continuacao{border-style:dashed}
.lpd-cartao.alem{border-style:solid;box-shadow:inset 0 0 0 1px var(--q-tarde)}
/* em produção: a mesma faixa de progresso da barra do Gantt, partindo da esquerda. Hachurar o
   cartão inteiro deixava o texto listrado e quase ilegível (visto na verificação) — e a faixa
   ainda diz quanto já foi apontado, que a hachura não dizia. */
.lpd-prog{position:absolute;left:0;top:0;bottom:0;pointer-events:none;border-radius:2px 0 0 2px;
  background:repeating-linear-gradient(90deg,rgba(30,42,55,.20) 0 3px,transparent 3px 6px)}
[data-theme="wiserdark"] .lpd-prog{
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 3px,transparent 3px 6px)}
.lpd-cartao.sel{box-shadow:0 0 0 2px var(--q-pri)}
.lpd-cartao.dim{opacity:.34}
.lpd-cartao:focus-visible{outline:2px solid var(--q-pri);outline-offset:1px}

/* ---- mover: os quatro botões (as setas do teclado fazem o mesmo) ---- */
/* A régua fica em LINHA PRÓPRIA e sempre ocupa o espaço dela: flutuando sobre a última linha, ela
   cobria o selo "passa do prazo" (visto na verificação). Só a opacidade muda no hover/foco, então
   mostrar e esconder não empurra nada. */
.lpd-mover{display:flex;justify-content:flex-end;gap:1px;margin-top:1px;opacity:0;transition:opacity .12s}
.lpd-cartao:hover .lpd-mover,.lpd-cartao:focus-within .lpd-mover{opacity:1}
.lpd-mover button{border:1px solid var(--q-linha);background:var(--q-fundo);color:inherit;
  width:18px;height:18px;line-height:1;font-size:.7rem;border-radius:3px;cursor:pointer;padding:0}
.lpd-mover button:hover:not(:disabled){border-color:var(--q-pri);color:var(--q-pri)}
.lpd-mover button:disabled{opacity:.35;cursor:default}
.lpd-mover button:focus-visible{outline:2px solid var(--q-pri);outline-offset:1px;opacity:1}

/* ---- arrastar o cartão ---- */
.lista-dia.editavel .lpd-cartao{cursor:grab;touch-action:none}
.acao-em-voo .lpd-cartao{cursor:progress}
.lpd-cartao.arrastando{cursor:grabbing;opacity:1;transition:none;z-index:7;
  outline:2px solid var(--q-pri);box-shadow:0 7px 18px rgba(15,23,32,.38)}
[data-theme="wiserdark"] .lpd-cartao.arrastando{box-shadow:0 7px 18px rgba(0,0,0,.6)}
/* para onde ele vai: a coluna acende e uma linha marca a casa da fila */
.lpd-col.alvo{background:color-mix(in oklch, oklch(var(--p)) 10%, var(--q-fundo))}
.lpd-cartao.solta-antes{box-shadow:0 -3px 0 -1px var(--q-pri)}
.lpd-col.solta-fim .lpd-cartoes::after{content:"";position:absolute;left:.4rem;right:.4rem;bottom:.2rem;
  height:2px;border-radius:1px;background:var(--q-pri)}

@media (prefers-reduced-motion:reduce){ .lpd-cartao,.lpd-mover{transition:none} }

/* ============================================================
   SEQUÊNCIA (piloto §3.4) — a fila numerada de cada máquina,
   um bloco por máquina, como a aba de sequenciamento da
   planilha do PCP. Mesmo vocabulário visual da Lista por dia
   (cinza de grade, mono nos números, os mesmos selos); a cor
   da linha é a folga da OP na régua de 3 dias (Task 7): uma
   faixa na borda esquerda e o fundo levemente tingido (leve: na
   carteira real quase toda linha é vermelha, e tingir forte
   deixava a tela inteira cor-de-rosa).
   ============================================================ */
.seq{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:.75rem;padding-bottom:.5rem;
  --q-linha:oklch(var(--b3));
  --q-fundo:oklch(var(--b1));
  --q-faixa:oklch(var(--b2));
  --q-suave:color-mix(in oklch, oklch(var(--bc)) 55%, transparent);
  --q-pri:oklch(var(--p));
  --q-ink:#1e2a37;
  --q-tarde:#c0392b;
  /* Nº · OP/item · cliente · prazo · horas · término · folga · selos — cabe em 1024 px com o menu aberto */
  --seq-colunas:3rem minmax(7.5rem,1.4fr) minmax(5rem,1fr) 3.4rem 3.2rem 5.8rem 6.6rem minmax(6.5rem,1.2fr);
}
[data-theme="wiserdark"] .seq{--q-ink:#e9eff6;--q-tarde:#e4695a}

/* sem overflow:hidden no bloco (nem rolagem na tabela): a linha arrastada sai do bloco dela a
   caminho da máquina irmã e não pode ser cortada na borda (visto na verificação). Quem rola,
   inclusive na horizontal numa tela estreita, é a moldura .seq; os cantos se arredondam à mão. */
.seq-bloco{flex:0 0 auto;border:1px solid var(--q-linha);border-radius:.5rem;background:var(--q-fundo);
  transition:opacity .12s}
.seq-cab{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .7rem;padding:.4rem .7rem;
  background:var(--q-faixa);border-bottom:1px solid var(--q-linha);border-radius:.5rem .5rem 0 0}
.seq-bloco>.seq-vazio:last-child,.seq-tab>.seq-linha:last-child{border-radius:0 0 .5rem .5rem}
.seq-nome{display:flex;align-items:baseline;gap:.5rem;margin:0;min-width:0}
.seq-maquina{font-size:.88rem;font-weight:600}
.seq-centro{font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--q-suave)}
/* os números do bloco andam juntos: nome comprido empurra os dois para a linha de baixo, à direita */
.seq-numeros{margin-left:auto;display:flex;align-items:baseline;gap:.7rem}
.seq-resumo{font-size:.74rem;color:var(--q-suave);white-space:nowrap}
.seq-carga{font-size:.72rem;color:var(--q-suave);white-space:nowrap}
.seq-carga.cheia{color:var(--q-tarde);font-weight:600}
.seq-vazio{margin:0;padding:.45rem .7rem;font-size:.74rem;color:var(--q-suave)}

.seq-tit,.seq-linha{display:grid;grid-template-columns:var(--seq-colunas);column-gap:.4rem;align-items:center;
  padding:.28rem .7rem;min-width:640px}
.seq-tit{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--q-suave);
  padding-top:.35rem;padding-bottom:.25rem}

.seq-linha{position:relative;border-top:1px solid var(--q-linha);font-size:.8rem;color:var(--q-ink);cursor:pointer;
  user-select:none;background:var(--seq-fundo, var(--q-fundo));box-shadow:inset 4px 0 0 var(--seq-cor, transparent);
  transition:opacity .12s}
.seq-linha.f-ok  {--seq-cor:#2f855a;--seq-fundo:color-mix(in oklch, #e3f3e8 30%, var(--q-fundo))}
.seq-linha.f-warn{--seq-cor:#b7791f;--seq-fundo:color-mix(in oklch, #faedc2 35%, var(--q-fundo))}
.seq-linha.f-err {--seq-cor:#c0392b;--seq-fundo:color-mix(in oklch, #fbe0dd 35%, var(--q-fundo))}
.seq-linha.f-sem {--seq-cor:#98a2ad}
[data-theme="wiserdark"] .seq-linha.f-ok  {--seq-cor:#4f9e71;--seq-fundo:color-mix(in oklch, #1c3a28 35%, var(--q-fundo))}
[data-theme="wiserdark"] .seq-linha.f-warn{--seq-cor:#c39a3a;--seq-fundo:color-mix(in oklch, #443714 40%, var(--q-fundo))}
[data-theme="wiserdark"] .seq-linha.f-err {--seq-cor:#d4604f;--seq-fundo:color-mix(in oklch, #48211c 40%, var(--q-fundo))}
[data-theme="wiserdark"] .seq-linha.f-sem {--seq-cor:#7e8b99}
.seq-linha:hover{background:color-mix(in oklch, var(--seq-fundo, var(--q-fundo)) 88%, oklch(var(--bc)))}
.seq-linha.sel{outline:2px solid var(--q-pri);outline-offset:-2px}
.seq-linha:focus-visible{outline:2px solid var(--q-pri);outline-offset:-2px}

.seq-n .num{display:inline-block;min-width:2.4rem;text-align:center;font-weight:700}
.seq-num{width:2.4rem;padding:.08rem .2rem;border:1px solid var(--q-linha);border-radius:4px;background:var(--q-fundo);
  color:inherit;text-align:center;font-size:.8rem;font-weight:700}
.seq-num:hover:not(:disabled){border-color:var(--q-pri)}
.seq-num:focus{outline:2px solid var(--q-pri);outline-offset:0;border-color:var(--q-pri)}
.seq-num:disabled{opacity:.5;cursor:progress}
.seq-op{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.seq-item{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seq-produto{font-size:.68rem;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seq-cliente{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seq-prazo,.seq-horas,.seq-termino{white-space:nowrap}
.seq-folga{font-size:.7rem;padding:.04rem .36rem}
.seq-selos{display:flex;flex-wrap:wrap;gap:.2rem;min-width:0}
.seq-crit{font-size:.6rem;font-weight:700;letter-spacing:.02em;padding:.02rem .28rem;border-radius:.25rem;
  border:1px solid;white-space:nowrap}
.seq-crit.k-critica{background:#f7cfc8;border-color:#a32a18;color:#7d1f11}
.seq-crit.k-quase{background:#faedc2;border-color:#b7791f;color:#7a5210}
[data-theme="wiserdark"] .seq-crit.k-critica{background:#5c2318;border-color:#e0705c;color:#f3b9ad}
[data-theme="wiserdark"] .seq-crit.k-quase{background:#443714;border-color:#c39a3a;color:#e6cd8c}

/* ---- arrastar a linha: o mesmo gesto da Lista por dia ---- */
.seq.editavel .seq-linha{cursor:grab;touch-action:none}
.seq.editavel .seq-linha.em-producao{cursor:pointer}
.seq.acao-em-voo .seq-linha{cursor:progress}
.seq-linha.arrastando{cursor:grabbing;z-index:7;transition:none;background:var(--seq-fundo, var(--q-fundo));
  outline:2px solid var(--q-pri);box-shadow:0 7px 18px rgba(15,23,32,.38)}
[data-theme="wiserdark"] .seq-linha.arrastando{box-shadow:0 7px 18px rgba(0,0,0,.6)}
/* para onde ela vai: o bloco acende e uma linha marca a casa da fila; outro centro se apaga */
.seq-bloco.alvo{border-color:var(--q-pri);box-shadow:0 0 0 1px var(--q-pri)}
.seq-linha.solta-antes{box-shadow:inset 4px 0 0 var(--seq-cor, transparent),inset 0 3px 0 0 var(--q-pri)}
.seq-bloco.solta-fim .seq-tab::after{content:"";display:block;height:3px;margin:0 .7rem .25rem;border-radius:1px;
  background:var(--q-pri)}
.seq-bloco.outro-centro{opacity:.4}
.seq-bloco.recusa{opacity:.55;outline:2px dashed var(--q-tarde);outline-offset:-2px}

@media (prefers-reduced-motion:reduce){ .seq-linha,.seq-bloco{transition:none} }

/* ---- depois das máquinas: só-prazo e terceiros (Task 10) ----
   NUNCA .seq-bloco nem .seq-linha aqui: o gesto conta os .seq-bloco da moldura como as máquinas
   e arrasta as .seq-linha[data-etapa]. flex:0 0 auto pelo mesmo motivo do .seq-bloco: na coluna
   que rola, um bloco com overflow encolheria até sumir. */
.seq-bloco-fixo{flex:0 0 auto}
.seq-soprazo{border:1px solid var(--q-linha);border-radius:.5rem;background:var(--q-fundo);overflow:hidden}
.seq-fixo-titulo{font-size:.88rem;font-weight:600}
/* OP/item · cliente · até · folga · selos */
.seq-sp-tit,.seq-sp-linha{display:grid;column-gap:.4rem;align-items:center;padding:.28rem .7rem;min-width:520px;
  grid-template-columns:minmax(7.5rem,1.2fr) minmax(5rem,1.4fr) 6.4rem 7.2rem minmax(6.5rem,1.2fr)}
.seq-sp-tit{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--q-suave);
  padding-top:.35rem;padding-bottom:.25rem}
.seq-sp-linha{border-top:1px solid var(--q-linha);font-size:.8rem;color:var(--q-ink)}
.seq-sp-linha.clicavel{cursor:pointer}
.seq-sp-linha.clicavel:hover{background:color-mix(in oklch, var(--q-fundo) 88%, oklch(var(--bc)))}
.seq-sp-linha.sel,.seq-sp-linha:focus-visible{outline:2px solid var(--q-pri);outline-offset:-2px}
.seq-terceiros .terc-tabela tr.sel{outline:2px solid var(--q-pri);outline-offset:-2px}
.seq-ate{font-size:.7rem;padding:.04rem .36rem;white-space:nowrap}
.seq-sp-folga{font-size:.74rem;color:var(--q-suave);white-space:nowrap}
.seq-terceiros{flex:0 0 auto;display:flex;flex-direction:column;gap:.75rem}
.seq-grupo{margin:.4rem 0 0;font-size:.88rem;font-weight:600}
.seq-grupo span{font-weight:400;color:var(--q-suave)}

/* ---- modo TV (?tv=1): a televisão da reunião, de longe e sem mouse ----
   tudo maior de uma vez (zoom): o app mede em rem, e mexer no rem da raiz mexeria no layout
   inteiro; nada se arrasta nem se clica, então a mão de "pegar" e o realce somem. */
.seq-tv{zoom:1.25}
/* kanban do dia (V2): um cartão por máquina, cada etapa em 2 linhas. Pensado para 12 máquinas de 5 etapas
   em 1920x1080 (3 fileiras); se não couber, a moldura rola sozinha (tv.js), com rolagem curta. */
.tv-moldura,.tv-maquinas-canto{
  --q-linha:oklch(var(--b3));--q-fundo:oklch(var(--b1));--q-faixa:oklch(var(--b2));
  --q-suave:color-mix(in oklch, oklch(var(--bc)) 55%, transparent);--q-pri:oklch(var(--p));--q-tarde:#c0392b}
[data-theme="wiserdark"] .tv-moldura,[data-theme="wiserdark"] .tv-maquinas-canto{--q-tarde:#e4695a}
.tv-moldura{flex:1;min-height:0;overflow:auto;position:relative}
.tv-kanban{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));grid-auto-rows:max-content;gap:.5rem;
  align-content:start;padding-bottom:.4rem}
.tv-kanban.tv-quatro{grid-template-columns:repeat(4,minmax(0,1fr))}
.tv-cartao{display:flex;flex-direction:column;min-width:0;border:1px solid var(--q-linha);border-radius:.5rem;
  background:var(--q-fundo);overflow:hidden}
.tv-cab{display:flex;align-items:baseline;gap:.6rem;padding:.25rem .6rem;background:var(--q-faixa);
  border-bottom:1px solid var(--q-linha)}
.tv-nome{margin:0;font-size:1rem;font-weight:700;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-carga{margin-left:auto;font-size:.8rem;color:var(--q-suave);white-space:nowrap}
.tv-carga.cheia{color:var(--q-tarde);font-weight:600}
.tv-vazio,.tv-sem-escolha{margin:0;padding:.6rem;font-size:.9rem;color:var(--q-suave)}
.tv-fila{list-style:none;margin:0;padding:0}
.tv-linha{display:grid;grid-template-columns:1.8rem minmax(0,1fr);column-gap:.5rem;align-items:center;
  padding:.2rem .6rem;border-top:1px solid var(--q-linha);font-size:.85rem;line-height:1.25}
.tv-linha:first-child{border-top:0}
.tv-linha.em-producao{background:color-mix(in oklch, oklch(var(--p)) 14%, var(--q-fundo));
  box-shadow:inset 4px 0 0 oklch(var(--p))}
.tv-n{font-weight:700;text-align:center}
.tv-corpo{display:flex;flex-direction:column;min-width:0}
.tv-l1,.tv-l2{display:flex;align-items:baseline;gap:.5rem;min-width:0;white-space:nowrap}
.tv-item{font-weight:600;flex:0 0 auto}
.tv-cliente,.tv-produto{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tv-produto{font-size:.8rem;opacity:.72}
.tv-prazo{flex:0 0 auto;font-size:.8rem;padding:.0rem .34rem}
.tv-termino{flex:0 0 auto;font-size:.8rem;color:var(--q-suave)}
.tv-selo{flex:0 0 auto}
.tv-mais{margin:0;padding:.15rem .6rem;font-size:.8rem;color:var(--q-suave);border-top:1px solid var(--q-linha)}
/* o botão e o painel ficam presos à tela (fora da moldura que rola) e o painel abre por cima de tudo */
.tv-maquinas-canto{position:fixed;top:.4rem;right:.6rem;z-index:50}
.tv-maquinas-botao{font-size:.8rem;padding:.05rem .5rem;border-radius:.25rem;opacity:.3;
  border:1px solid var(--q-linha);background:var(--q-fundo)}
.tv-maquinas-botao:hover,.tv-maquinas-botao:focus-visible{opacity:1}
.tv-painel{position:absolute;top:1.7rem;right:0;min-width:15rem;max-height:70vh;overflow:auto;padding:.5rem .6rem;
  border:1px solid var(--q-linha);border-radius:.4rem;background:var(--q-fundo);box-shadow:0 6px 18px rgba(0,0,0,.35);
  font-size:.85rem}
.tv-painel-acoes{display:flex;gap:.5rem;margin-bottom:.35rem}
.tv-painel-acoes button{text-decoration:underline;color:var(--q-pri)}
.tv-painel-item{display:flex;align-items:center;gap:.4rem;padding:.12rem 0;cursor:pointer}
/* lido do outro lado da sala: é o sinal de que a TV está viva, então nada de letra miúda e clara */
.seq-atualizado{flex:0 0 auto;margin:0;text-align:right;font-size:.85rem;font-weight:600;
  color:color-mix(in oklch, oklch(var(--bc)) 78%, transparent)}

/* ============================================================
   GAVETA DA OP (Perfil Oficina, §7.2) — dentro do Drawer.razor
   Três números e uma lista: prometi para quando, vai sair
   quando, quanta folga — e o roteiro que leva a essa data.
   Mesmo vocabulário visual do Quadro (cor da folga, mono nos
   números), só que empilhado numa coluna estreita.
   ============================================================ */
.gaveta{
  --g-linha:oklch(var(--b3));
  --g-suave:color-mix(in oklch, oklch(var(--bc)) 55%, transparent);
  --g-tarde:#c0392b;
  --g-warn:#b7791f;      /* aviso de previsão otimista — mesmo tom do âmbar da folga */
  --g-fila:#6b3fb5;      /* mesma cor do "por que atrasa" no Quadro (--q-cam): é a MESMA fila */
  --g-proc:oklch(var(--p));
  --g-espera:#98a2ad;    /* neutro (mesmo cinza do "sem pedido"): não é alerta, é tempo parado */
  display:flex; flex-direction:column; gap:.85rem;
}
[data-theme="wiserdark"] .gaveta{ --g-tarde:#e4695a; --g-warn:#c39a3a; --g-fila:#b79cf0; --g-espera:#7e8b99; }

/* ---- cabeçalho: de quem é e o que é ---- */
.g-cab{display:flex;flex-direction:column;gap:.1rem}
.g-cab .g-cli{font-weight:600;font-size:.92rem;line-height:1.2}
.g-cab .g-prod{font-size:.8rem;color:var(--g-suave)}
.g-cab .g-meta{font-size:.72rem;color:var(--g-suave)}

/* ---- o trio: prazo prometido · previsão · folga ---- */
.g-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;
  border:1px solid var(--g-linha);border-radius:.5rem;padding:.6rem .7rem}
.g-trio>div{display:flex;flex-direction:column;gap:.2rem;min-width:0}
/* só o rótulo vira versalete — "atrasa 3 dias" é frase, e em caixa alta vira grito */
.g-trio>div>span{font-size:.63rem;text-transform:uppercase;letter-spacing:.06em;color:var(--g-suave);font-weight:600}
.g-trio b{font-size:.86rem;font-weight:600}
.g-tag{display:inline-block;padding:.1rem .42rem;border-radius:.3rem;border:1.5px solid;
  font-size:.76rem;font-weight:600;white-space:nowrap}
.g-tag.f-ok{background:#e3f3e8;border-color:#2f855a;color:#1f5c3d}
.g-tag.f-warn{background:#faedc2;border-color:#b7791f;color:#7a5210}
.g-tag.f-err{background:#fbe0dd;border-color:#c0392b;color:#8f2418}
.g-tag.f-sem{background:#eceff2;border-color:#98a2ad;color:#5b656f}
[data-theme="wiserdark"] .g-tag.f-ok{background:#1c3a28;border-color:#4f9e71;color:#a8dcbf}
[data-theme="wiserdark"] .g-tag.f-warn{background:#443714;border-color:#c39a3a;color:#e6cd8c}
[data-theme="wiserdark"] .g-tag.f-err{background:#48211c;border-color:#d4604f;color:#f0b3a8}
[data-theme="wiserdark"] .g-tag.f-sem{background:#2b313a;border-color:#7e8b99;color:#c0c8d0}

/* prazo que a planejadora mudou à mão não pode parecer o do pedido */
.g-selo{align-self:flex-start;font-size:.68rem;font-weight:600;letter-spacing:.02em;
  padding:.1rem .45rem;border-radius:.3rem;border:1px dashed var(--g-linha);color:var(--g-suave)}

/* ---- seções ---- */
.g-secao{display:flex;flex-direction:column;gap:.45rem;border-top:1px solid var(--g-linha);padding-top:.7rem}
.g-secao h4{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--g-suave);font-weight:700;margin:0}
.g-nota{font-size:.72rem;color:var(--g-suave);line-height:1.45;margin:0}

/* ---- etapas do roteiro ---- */
.g-etapas{display:flex;flex-direction:column;gap:.35rem;margin:0;padding:0;list-style:none}
.g-etapa{border:1px solid var(--g-linha);border-radius:.4rem;padding:.4rem .55rem;
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:.5rem}
.g-etapa-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.g-etapa .g-linha{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.g-etapa .g-linha b{font-size:.8rem;font-weight:600}
.g-etapa .g-maq{font-size:.8rem;color:var(--g-suave)}
.g-etapa .g-sub{font-size:.72rem;color:var(--g-suave)}
/* o "até" da só-prazo é um selo com a cor da régua de prazo (piloto §3.3), no corpo da linha */
.g-etapa .g-ate{font-size:.68rem;padding:0 .32rem;border-width:1px}
.g-etapa .js-fixar{flex:0 0 auto}
.g-mini{font-style:normal;font-size:.63rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;
  padding:.05rem .35rem;border-radius:.25rem;border:1px solid var(--g-linha);color:var(--g-suave)}
.g-mini.producao{border-color:oklch(var(--p));color:oklch(var(--p))}
.g-mini.fixada{border-color:oklch(var(--bc));color:oklch(var(--bc));opacity:.8}
.g-mini.trocado{border-style:dashed;border-color:oklch(var(--bc));color:oklch(var(--bc));opacity:.8}
.g-roteiro{font-size:.72rem;color:var(--g-suave)}
/* "terceiro: METAL DIAS · até 21/07" — a etapa que o APS mandou para terceiro (piloto T16) */
.g-terceiro{font-size:.72rem;font-weight:600;color:oklch(var(--bc))}
.g-terceiro .g-tag{margin-left:.3rem;font-size:.68rem;padding:0 .32rem;border-width:1px;font-weight:600}

/* ---- botões da etapa: Fixar e o menu "⋯" (Fazer em outro centro…, piloto T12) ---- */
.g-etapa-btns{flex:0 0 auto;display:flex;align-items:center;gap:.15rem;position:relative}
.g-menu{position:absolute;top:100%;right:0;z-index:20;margin:.2rem 0 0;padding:.25rem;list-style:none;
  min-width:12rem;background:oklch(var(--b1));border:1px solid var(--g-linha);border-radius:.4rem;
  box-shadow:0 6px 18px rgb(0 0 0 / .18)}
.g-menu button{display:block;width:100%;text-align:left;font-size:.76rem;padding:.35rem .5rem;border-radius:.3rem;
  background:transparent;border:0;color:oklch(var(--bc));cursor:pointer}
.g-menu button:hover,.g-menu button:focus-visible{background:color-mix(in oklch, oklch(var(--bc)) 8%, transparent)}
/* no escuro a gaveta é base-100: o menu sobe um tom (base-300) e a borda clareia, senão some nela */
[data-theme="wiserdark"] .g-menu{background:oklch(var(--b3));border-color:color-mix(in oklch, oklch(var(--bc)) 28%, transparent);
  box-shadow:0 8px 22px rgb(0 0 0 / .55)}
[data-theme="wiserdark"] .g-menu button:hover,[data-theme="wiserdark"] .g-menu button:focus-visible{
  background:color-mix(in oklch, oklch(var(--bc)) 12%, transparent)}
/* clique fora fecha o menu: um fundo transparente logo abaixo dele (cobre a gaveta) */
.g-menu-fundo{position:fixed;inset:0;z-index:19;background:transparent}

/* ---- os painéis "Fazer em outro centro…" e "Mandar para terceiro…" (.tc.mt): abrem debaixo da etapa, na largura dela ---- */
.tc{flex:1 0 100%;display:flex;flex-direction:column;gap:.4rem;border-top:1px dashed var(--g-linha);padding-top:.45rem}
.tc-campo{display:flex;flex-direction:column;gap:.2rem;font-size:.72rem;color:var(--g-suave)}
.tc-aviso{font-size:.72rem;color:var(--g-suave);margin:0}
.tc-acoes{display:flex;flex-wrap:wrap;gap:.4rem}
.g-ajuste{font-size:.72rem;color:var(--g-suave)}
.g-problema{font-size:.72rem;color:var(--g-tarde);font-weight:600}
.g-link{border:0;background:transparent;padding:0;font:inherit;color:oklch(var(--p));
  text-decoration:underline;cursor:pointer}
.g-link:disabled{opacity:.5;cursor:default}

/* ---- formulário do prazo ---- */
.g-campo{display:flex;flex-direction:column;gap:.2rem;font-size:.72rem;color:var(--g-suave)}
.g-acoes{display:flex;flex-wrap:wrap;gap:.4rem}

/* ---- histórico: uma decisão por linha, em português ---- */
.g-hist{display:flex;flex-direction:column;gap:.3rem;margin:0;padding:0;list-style:none}
.g-hist li{font-size:.73rem;line-height:1.4;color:var(--g-suave);
  border-left:2px solid var(--g-linha);padding-left:.5rem}
.g-hist b{font-weight:600;color:oklch(var(--bc));opacity:.75}
.g-hist .g-autor{font-weight:600}

/* ---- ainda não aplicadas: o que o ERP ainda não sabe, destacado do histórico ---- */
.g-pendentes{display:flex;flex-direction:column;gap:.3rem;margin:0;padding:0;list-style:none}
.g-pendentes li{font-size:.73rem;line-height:1.4;color:oklch(var(--bc));
  border-left:2px solid oklch(var(--p));padding-left:.5rem}

/* ---- "por que esta data?" (§7.2, Task 17): o resumo, a barra fila×processamento×espera e os elos ---- */
.pq-resumo{font-size:.82rem;line-height:1.45;font-weight:500;margin:0}
.pq-otimista{font-size:.72rem;font-weight:600;color:var(--g-warn);margin:0}
.pq-barra{display:flex;width:100%;height:10px;border-radius:.3rem;overflow:hidden;background:var(--g-linha)}
.pq-seg+.pq-seg{border-left:1px solid oklch(var(--b1) / 40%)}
.pq-seg.pq-fila{background:var(--g-fila)}
.pq-seg.pq-proc{background:var(--g-proc)}
.pq-seg.pq-espera{background:var(--g-espera)}
.pq-legenda{display:flex;flex-wrap:wrap;gap:.2rem .85rem;margin:0;padding:0;list-style:none;font-size:.72rem;color:var(--g-suave)}
.pq-legenda li{display:inline-flex;align-items:center;gap:.3rem}
.pq-sw{width:9px;height:9px;border-radius:2px;display:inline-block;flex:0 0 auto}
.pq-sw.pq-fila{background:var(--g-fila)}
.pq-sw.pq-proc{background:var(--g-proc)}
.pq-sw.pq-espera{background:var(--g-espera)}
.pq-elos{display:flex;flex-direction:column;gap:.3rem;margin:0;padding:0;list-style:none}
.pq-elo{font-size:.76rem;line-height:1.4;color:oklch(var(--bc))}
.pq-elo-btn{border:0;background:transparent;padding:0;font:inherit;text-align:left;color:inherit;
  text-decoration:underline;text-decoration-color:transparent;cursor:pointer}
.pq-elo-btn:hover,.pq-elo-btn:focus-visible{text-decoration-color:currentColor}

/* ============================================================
   APLICAR (Perfil Oficina, §7.6) — o modal do impacto
   Última tela antes de o rascunho virar plano. Pouca coisa,
   grande: quantas OPs mudam, quem passa a atrasar (vermelho),
   quem deixa de atrasar (verde) e para onde vão os dois
   indicadores da carteira. Véu de verdade — aqui o modal É modal.
   ============================================================ */
/* O véu do daisy (#0006) é claro demais para o peso desta decisão. Ele vem de um seletor com
   :not(...) que vale 0,2,1 — daí o :not(dialog) aqui (este modal é uma div): sem ele a regra
   perde e o véu fica no tom do daisy (medido no navegador). */
.modal.mod-aplicar:not(dialog){background:rgba(15,20,28,.55)}
.ap{
  --ap-linha:oklch(var(--b3));
  --ap-suave:color-mix(in oklch, oklch(var(--bc)) 55%, transparent);
  --ap-err:#c0392b;
  --ap-ok:#2f855a;
  max-width:34rem; display:flex; flex-direction:column; gap:.75rem;
  /* no tema escuro a caixa e o véu têm quase o mesmo tom: sem borda, o modal some no fundo
     (visto no navegador) */
  border:1px solid var(--ap-linha); box-shadow:0 18px 50px rgba(0,0,0,.45);
}
[data-theme="wiserdark"] .ap{ --ap-err:#e4695a; --ap-ok:#5fb283; }
/* sentinelas da laçada de foco: existem só para receber o Tab que sairia do modal */
.ap-guarda{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ap-titulo{font-size:1rem;font-weight:600;margin:0}
.ap-lista{display:flex;flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none;font-size:.82rem;line-height:1.45}
.ap-nada{color:var(--ap-suave)}
.ap-pior{color:var(--ap-err)}
.ap-melhor{color:var(--ap-ok)}
.ap-sem-pior{color:var(--ap-suave)}
/* fixação que o motor não respeitou: é aviso, tem a cor do que piora */
.ap-conflitos{color:var(--ap-err)}
.ap-centros ul,.ap-osts ul{margin:.15rem 0 0;padding-left:1.1rem;list-style:disc}
.ap-centros li,.ap-osts li{font-size:.8rem}
/* os indicadores fecham o bloco, separados do que é lista de OPs */
.ap-ind{border-top:1px solid var(--ap-linha);padding-top:.4rem;color:var(--ap-suave)}
.ap-ind+.ap-ind{border-top:0;padding-top:0}
.ap-var{font-weight:600}
.ap-var.va-melhor{color:var(--ap-ok)}
.ap-var.va-pior{color:var(--ap-err)}
.ap-var.va-igual{color:oklch(var(--bc))}
.ap-rodape{font-size:.76rem;color:var(--ap-suave);margin:0;border-top:1px solid var(--ap-linha);padding-top:.6rem}
/* modo sombra não é aviso de erro: é o estado normal da fase 1 da virada (§11) */
.ap-rodape.sombra b{color:oklch(var(--bc))}
.ap-erro{font-size:.78rem;line-height:1.45;border-radius:.4rem;padding:.5rem .65rem;
  background:#fbe0dd;border:1px solid #c0392b;color:#8f2418;font-weight:500}
[data-theme="wiserdark"] .ap-erro{background:#48211c;border-color:#d4604f;color:#f0b3a8}

/* ============================================================
   BANDEJA "COM PROBLEMA" (Perfil Oficina, §7.5)
   Rodapé do Quadro: nada que o motor não conseguiu programar
   some em silêncio. Recolhida, é só um contador; aberta, uma
   linha por problema com o motivo e o que fazer. Fica no fluxo
   da coluna (não flutua): assim nunca cobre a última máquina
   do Gantt nem a gaveta da OP.
   ============================================================ */
.bandeja{
  --bp-linha:oklch(var(--b3));
  --bp-suave:color-mix(in oklch, oklch(var(--bc)) 55%, transparent);
  --bp-err:#c0392b;
  flex:0 0 auto; display:flex; flex-direction:column; min-height:0;
  border:1px solid var(--bp-linha); border-radius:.5rem; background:oklch(var(--b1)); overflow:hidden;
}
[data-theme="wiserdark"] .bandeja{ --bp-err:#e4695a; }
.bp-cab{display:flex;align-items:center;gap:.5rem;width:100%;border:0;background:transparent;
  padding:.4rem .7rem;font:inherit;font-size:.8rem;text-align:left;cursor:pointer;color:inherit}
.bp-cab:hover{background:oklch(var(--b2))}
/* seta desenhada em CSS: o glifo ▸/▾ sai como um tracinho na IBM Plex (visto no navegador) */
.bp-seta{flex:0 0 auto;width:0;height:0;border:5px solid transparent;border-left-color:var(--bp-suave);
  margin-left:2px;transition:transform .15s}
.bandeja.aberta .bp-seta{transform:rotate(90deg)}
.bp-titulo{font-weight:600}
.bp-hint{font-size:.7rem;color:var(--bp-suave);margin-left:auto}
/* chips do filtro por motivo (Task 21): filtro de TELA, uma linha que envolve quando não couber —
   numa carteira grande são seis ou sete motivos, e uma barra rolável esconderia justamente o
   último chip. A nota no fim explica por que os conflitos continuam na lista. */
.bp-filtros{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;padding:.35rem .7rem;
  border-top:1px solid var(--bp-linha)}
.bp-chip{border:1px solid var(--bp-linha);border-radius:999px;background:oklch(var(--b1));
  padding:.1rem .55rem;font:inherit;font-size:.72rem;color:var(--bp-suave);cursor:pointer;
  display:inline-flex;align-items:baseline;gap:.3rem}
.bp-chip:hover{background:oklch(var(--b2))}
.bp-chip .num{font-weight:600}
.bp-chip[aria-pressed="true"]{background:color-mix(in oklch, oklch(var(--p)) 12%, oklch(var(--b1)));
  border-color:color-mix(in oklch, oklch(var(--p)) 40%, transparent);color:oklch(var(--p));font-weight:600}
.bp-chip-conflito{color:var(--bp-err);border-color:color-mix(in oklch, var(--bp-err) 35%, transparent)}
.bp-chip-conflito[aria-pressed="true"]{background:color-mix(in oklch, var(--bp-err) 12%, oklch(var(--b1)));
  border-color:color-mix(in oklch, var(--bp-err) 45%, transparent);color:var(--bp-err)}
.bp-nota{font-size:.68rem;color:var(--bp-suave);margin-left:auto}

/* teto de 40% da tela: a bandeja informa, o Quadro é que trabalha */
.bp-lista{max-height:40vh;overflow:auto;margin:0;padding:0;list-style:none;border-top:1px solid var(--bp-linha)}
.bp-linha{border-bottom:1px solid var(--bp-linha)}
.bp-linha:last-child{border-bottom:0}
.bp-alvo{display:flex;align-items:baseline;gap:.5rem;width:100%;border:0;background:transparent;
  padding:.32rem .7rem;font:inherit;font-size:.78rem;text-align:left;color:inherit}
button.bp-alvo{cursor:pointer}
/* linha que não abre nada (problema sem OP, ou OP fora do quadro) não pode parecer clicável */
.bp-sem-op{opacity:.62}
button.bp-alvo:hover{background:oklch(var(--b2))}
.bp-op{font-weight:600;flex:0 0 auto}
.bp-txt{flex:1;min-width:0}
/* a ação vem pronta do servidor e tem sigla dentro (ERP, OP): nada de text-transform aqui */
.bp-acao{flex:0 0 auto;font-size:.7rem;color:var(--bp-suave)}
/* conflito de fixação: o único problema desta lista que a planejadora causou e pode desfazer */
/* Com a gaveta da OP aberta a bandeja encolhe (o painel cobriria a ação sugerida de cada
   linha), mas nunca abaixo de meia tela: num monitor estreito ela viraria uma tira ilegível
   de 30px em vez de uma lista. */
.bandeja.com-gaveta{margin-right:min(var(--wdrawer-largura), 50vw)}
.bp-conflito{border-left:3px solid var(--bp-err)}
.bp-conflito .bp-txt{color:var(--bp-err);font-weight:500}

/* ============================================================
   FÁBRICA (§7.4) — cartões de indicador, mapa de carga, ranking
   ------------------------------------------------------------
   A escala do mapa tem TRÊS ESTADOS (ok | cheia | transbordo),
   não um gradiente: o nível vem da API, e "transbordo" não é
   "passou de 100%" — é trabalho PRONTO esperando a máquina, que
   pode acontecer com a célula em 70%. Por isso a cor nunca
   decide sozinha: a célula sempre mostra o número (é ele que
   separa ok de cheia, no 85%), o transbordo ganha "!" + hachura
   a 45° (o que o número não conta) e o aria-label/title diz o
   estado por extenso. Cegueira de cor, impressão em cinza e
   forced-colors continuam lendo a célula.
   Escala validada com o validador da skill dataviz (ΔE OKLab×100,
   Machado 2009 severidade 1, all-pairs): claro CVD 18,5 / visão
   normal 19,5; escuro CVD 10,2 / visão normal 16,5. Os pares
   pálidos do app (.occ-1/.occ-2) davam 5,1 — indistinguíveis numa
   grade densa —, daí a escada de luminosidade própria aqui.
   Texto dentro do preenchimento (exceção da regra "texto não
   veste a cor do dado"): ink escolhido por luminância, todos
   >= 4,9:1.
   ============================================================ */
/* com a gaveta da célula aberta a página recua, como a bandeja do Quadro faz com a gaveta da OP:
   a gaveta é de INSPEÇÃO (sem véu), então o mapa atrás tem de continuar inteiro e clicável. */
.fab-pagina{transition:margin-right .24s cubic-bezier(.4,0,.2,1)}
.fab-pagina.com-gaveta{margin-right:min(var(--wdrawer-largura), 50vw)}
.fab-bloco{background:oklch(var(--b1));border:1px solid oklch(var(--b3));border-radius:.5rem;padding:.9rem 1rem}
.fab-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.6rem}

/* ---- cartões de indicador (§8.3) ---- */
.fab-grade{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.fab-cartao{border:1px solid oklch(var(--b3));border-radius:.45rem;padding:.6rem .7rem;
  display:flex;flex-direction:column;gap:.25rem;background:oklch(var(--b1))}
.fab-titulo{font-size:.72rem;font-weight:600;color:oklch(var(--bc)/.62);line-height:1.2}
/* o valor é uma FIGURA, não uma coluna: figuras proporcionais (tabular deixa "121" frouxo) */
.fab-valor{font-size:1.45rem;font-weight:600;line-height:1.1;letter-spacing:-.01em}
.fab-exp{font-size:.7rem;line-height:1.35;color:oklch(var(--bc)/.55);margin:0}
/* tendência: seta (para onde o número foi) + palavra (se isso é bom) + o valor de antes.
   A palavra é que carrega o estado; a cor só reforça. */
.fab-tend{display:flex;align-items:baseline;gap:.3rem;font-size:.72rem;font-weight:600}
.fab-tend .fab-antes{font-weight:400;color:oklch(var(--bc)/.5);font-variant-numeric:tabular-nums}
.t-melhorou{color:#1c6339} .t-piorou{color:#a12318} .t-igual{color:oklch(var(--bc)/.55);font-weight:500}
[data-theme="wiserdark"] .t-melhorou{color:#8fd6ab} [data-theme="wiserdark"] .t-piorou{color:#f2a99f}
/* "sem dado ainda" não some da grade: recolhe. O cartão fica esmaecido, com a borda tracejada,
   e a explicação (o que falta medir) vira a coisa mais importante dele. */
.fab-cartao.sem-dado{border-style:dashed;opacity:.72;background:transparent}
.fab-cartao.sem-dado .fab-valor{font-size:.9rem;font-weight:500;color:oklch(var(--bc)/.5)}

/* ---- mapa de carga: 3 estados, nunca só a cor ---- */
.nv-ok{--nv-fill:#e3f3e8;--nv-ink:#1c6339;--nv-edge:#a6d9ba}
.nv-cheia{--nv-fill:#edb64a;--nv-ink:#4a3306;--nv-edge:#c9942f}
.nv-transbordo{--nv-fill:#c92d1c;--nv-ink:#ffffff;--nv-edge:#9e2315;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.22) 0 3px,transparent 3px 7px)}
.nv-vazia{--nv-fill:transparent;--nv-ink:oklch(var(--bc)/.45);--nv-edge:oklch(var(--b3));
  background-image:repeating-linear-gradient(135deg,oklch(var(--b3)) 0 3px,transparent 3px 7px)}
[data-theme="wiserdark"] .nv-ok{--nv-fill:#1c3a28;--nv-ink:#a7e0bd;--nv-edge:#2f5c40}
[data-theme="wiserdark"] .nv-cheia{--nv-fill:#a37c1b;--nv-ink:#141006;--nv-edge:#c6982c}
[data-theme="wiserdark"] .nv-transbordo{--nv-fill:#f08070;--nv-ink:#2a0a06;--nv-edge:#d4604f;
  background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.18) 0 3px,transparent 3px 7px)}

.fab-legenda{display:flex;flex-wrap:wrap;gap:.25rem 1rem;font-size:.7rem;color:oklch(var(--bc)/.6);margin-bottom:.5rem}
.fab-legenda span{display:inline-flex;align-items:center;gap:.35rem}
.fab-legenda b{font-weight:700}
.fab-sw{width:14px;height:12px;border-radius:2px;display:inline-block;flex:0 0 auto;
  background-color:var(--nv-fill);border:1px solid var(--nv-edge)}
.fab-aviso{font-size:.7rem;color:oklch(var(--bc)/.6);margin:0 0 .5rem}

/* cabeçalho dos dias e coluna da máquina parados ao rolar (o mapa é largo e alto) */
.fab-wrap{overflow:auto;max-height:calc(100vh - 22rem);border:1px solid oklch(var(--b3));border-radius:.4rem;
  width:max-content;max-width:100%}
/* largura exatamente do conteúdo, e a moldura acompanha (ver .fab-wrap): esticar a tabela dava a
   sobra inteira da visão por SEMANA (4 colunas) à coluna dos nomes — 490px de nada ao lado de
   células estreitas —, e não há dado nenhum para pôr no meio. */
.fab-mapa{border-collapse:separate;border-spacing:0;width:max-content}
.fab-mapa thead th{position:sticky;top:0;z-index:2;background:oklch(var(--b2));
  border-bottom:1px solid oklch(var(--b3));padding:.25rem .4rem;font-weight:600;
  display:table-cell;text-align:center;white-space:nowrap}
.fab-mapa thead th b{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;
  color:oklch(var(--bc)/.5);font-weight:600;line-height:1.1}
.fab-mapa thead th .num{font-size:.72rem;font-weight:600;line-height:1.2}
.fab-parcial{display:block;font-size:.58rem;color:oklch(var(--bc)/.5);font-weight:500;line-height:1.1}
.fab-mapa td{padding:2px;vertical-align:middle}
/* o nome da máquina fica preso à esquerda; no cabeçalho ele é o canto e fica preso nos dois eixos */
.fab-mapa .fab-maq{position:sticky;left:0;z-index:3;background:oklch(var(--b1));text-align:left;
  font-weight:600;font-size:.74rem;padding:.25rem .55rem;white-space:nowrap;
  border-right:1px solid oklch(var(--b3))}
/* nome de máquina do ERP é longo; 240px comporta os da Demarchi inteiros e põe um teto nos demais */
.fab-maq-nome{display:block;max-width:240px;overflow:hidden;text-overflow:ellipsis}
.fab-mapa thead .fab-maq{z-index:4;background:oklch(var(--b2))}

.fab-cel{width:100%;min-width:58px;height:30px;border-radius:3px;border:1px solid var(--nv-edge);
  background-color:var(--nv-fill);color:var(--nv-ink);font-size:.72rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:.15rem;font-variant-numeric:tabular-nums}
button.fab-cel{cursor:pointer}
button.fab-cel:hover{outline:2px solid oklch(var(--p));outline-offset:-2px}
button.fab-cel:focus-visible{outline:2px solid oklch(var(--p));outline-offset:1px}
.fab-sinal{font-weight:800;line-height:1}

/* link para uma OP (número clicável que leva ao Quadro) — a cor primária como classe, e não
   como style inline repetido em cada tela */
.link-op{color:oklch(var(--p))}

/* texto que só o leitor de tela lê. O `title` é do ponteiro: quando o que ele diz é necessário
   para entender a tela — o motivo de um botão estar cinza, por exemplo (Task 21) — a mesma frase
   precisa chegar a quem não tem mouse. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- ranking de gargalos ---- */
.fab-sem-gargalo{font-size:.76rem;margin:.6rem 0 0;color:oklch(var(--bc)/.75);font-variant-numeric:tabular-nums}
.fab-nota{font-size:.7rem;margin:.25rem 0 0;color:oklch(var(--bc)/.5)}

/* ---- tela Prazos ---- */
/* A coluna da OP fica presa na rolagem horizontal (é por ela que se volta depois de rolar até
   "Quem mais segura", a razão de ser da tela). Sem MARCA de separação, a coluna vizinha desliza
   por baixo dela e o que sobra na tela é "OP DIDO" no cabeçalho e "1678 :0" na linha — parece
   dado corrompido, e 1024–1366px é a tela de um notebook comum (defeito B3 da aceitação da F2).
   Fundo opaco + filete e sombra à direita: é a marca que o olho procura. */
.prz-tabela{border-collapse:separate;border-spacing:0}
.prz-op{position:sticky;left:0;z-index:10;background:oklch(var(--b1));
  box-shadow:1px 0 0 oklch(var(--bc)/.22),9px 0 10px -6px oklch(0% 0 0/.45);
  padding-right:1.1rem;white-space:nowrap}
/* o cabeçalho é o canto: fica preso nos dois eixos e por cima das células do corpo */
.prz-tabela thead .prz-op{z-index:30;background:oklch(var(--b1))}
/* a linha inteira muda de cor no hover; a coluna presa tem de acompanhar, senão ela fica
   flutuando com a cor antiga por cima da linha destacada */
.prz-tabela tbody tr:hover .prz-op{background:oklch(var(--b2))}

/* ---- tela Plano: duas colunas com arrastar e soltar ---- */
.plano-col{min-height:8rem;padding:.5rem;border:1px dashed oklch(var(--bc)/.18);border-radius:.5rem}
.plano-cartao{border:1px solid;border-left-width:4px;border-radius:.4rem;padding:.4rem .6rem}
.plano-cartao.arrastavel{cursor:grab}
.plano-cartao.arrastavel:active{cursor:grabbing}
.plano-alvo{outline:2px solid oklch(var(--p));outline-offset:-2px;background:oklch(var(--p)/.06)}