/* F3 — camada COMPARTILHADA do v2: badge, KPI, tabela, alerta, banner, filtros,
   paginação, erro-box, modal genérico e o detalhe do pedido (F4/WF-03).
   HANDOFF-049/F1: components.css foi dividido por domínio (era 732 linhas, a 68 do
   teto de 800 do CI). A ORDEM dos <link> em index.html é significativa —
   cadastros.css DEVE vir antes de pedido.css: ambos definem .dw/.dw-head/.dw-body
   (drawer 540px do cadastro × drawer 820px do pedido) e o do pedido precisa vencer. */
/* F3 — componentes compartilhados (badge, kpi, tabela, alerta, banner, filtros) */
section{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:14px}
section>h2{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:0 0 10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* HANDOFF-041 B1: colunas de grid encolhíveis — sem min-width:0 uma tabela
   dentro de uma coluna estoura a faixa e corta o conteúdo (visualização). */
.grid2>*,.grid3>*{min-width:0}
@media (max-width:1000px){.grid2{grid-template-columns:1fr}}
.banner{background:var(--u-inverso,#263238);color:var(--u-inverso-ink,#eceff1);border-radius:8px;padding:10px 14px;margin-bottom:14px;font-size:13px}
.banner b{color:var(--u-inverso-ink,#fff)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
@media (max-width:1000px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.kpi .n{font-size:24px;font-weight:700}
.kpi .l{font-size:12px;color:var(--muted)}
.kpi .d{font-size:11px;color:var(--muted)}
.badge{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:600;border:1px solid;white-space:nowrap}
.b-ok{color:var(--ok);border-color:var(--ok);background:var(--u-verde-fundo,#e8f5e9)}
.b-warn{color:var(--warn);border-color:var(--warn);background:var(--u-ambar-fundo,#fff8e1)}
.b-block{color:var(--block);border-color:var(--block);background:var(--u-erro-fundo,#ffebee)}
.b-info{color:var(--u-tinte-ink,var(--info));border-color:var(--u-tinte-ink,var(--info));background:var(--u-hover,#f5f5f5)}
/* NAV-V1V2 — marcação padronizada de link que abre a versão antiga (v1) */
.tag-legacy{display:inline-block;padding:0 6px;border-radius:8px;font-size:10px;font-weight:600;line-height:15px;vertical-align:1px;color:var(--warn);border:1px solid var(--warn);background:var(--u-ambar-fundo,#fff8e1);white-space:nowrap}
.btn.pri .tag-legacy{color:var(--u-marca-ink,#fff);border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.15)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:2px solid var(--line);padding:6px 8px}
td{border-bottom:1px solid var(--line);padding:7px 8px;vertical-align:top}
tr:hover td{background:var(--u-hover,#fafcfd)}
.listrow{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13px}
.listrow:last-child{border-bottom:0}
.btn{display:inline-block;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:6px;padding:6px 12px;font-size:13px;cursor:pointer}
.btn.pri{background:var(--u-verde-marca,var(--accent));border-color:var(--u-verde-marca,var(--accent));color:var(--u-marca-ink,#fff);font-weight:600}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;font-size:12px;align-items:center}
.filtros select,.filtros input{border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:5px 10px;color:var(--ink);font:inherit;font-size:12px}
.alerta{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--block);border-radius:6px;padding:8px 12px;margin-bottom:8px;font-size:13px}
.alerta.warn{border-left-color:var(--warn)}
.legenda{font-size:11px;color:var(--muted);margin-top:4px}
.pag{display:flex;gap:8px;align-items:center;justify-content:flex-end;font-size:12px;color:var(--muted);margin-top:8px}
.erro-box{background:var(--u-erro-fundo,#ffebee);border:1px solid var(--block);border-radius:8px;padding:14px;color:var(--block)}
/* F4 — detalhe do pedido (WF-03) + modal de conferência (WF-04) */
/* auto-fit: colapsa colunas conforme a LARGURA DO CONTAINER (não do viewport) —
   corrige o truncamento quando .grid3 vive na coluna estreita do hub-grid. */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;font-size:13px}
.steps{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.step{border:1px solid var(--line);border-radius:14px;padding:3px 10px;font-size:11px;background:var(--panel);color:var(--muted)}
.step.done{border-color:var(--ok);color:var(--ok);background:var(--u-verde-fundo,#e8f5e9)}
.step.ativo{border-color:var(--warn);color:var(--warn);background:var(--u-ambar-fundo,#fff8e1);font-weight:700}
.step.err{border-color:var(--block);color:var(--block);background:var(--u-erro-fundo,#ffebee);font-weight:700}
.step.block{border-color:var(--line);color:var(--u-tinte-ink,var(--muted));background:var(--u-hover,#f5f5f5)}
tr.clicavel{cursor:pointer}
.modal-back{position:fixed;inset:0;background:rgba(31,42,51,.55);z-index:50;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:30px 16px}
.modal{background:var(--bg);border-radius:10px;max-width:900px;width:100%;padding:18px 20px;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.modal .origem{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 14px}
.modal .origem h3{font-size:12px;margin:0 0 8px;color:var(--muted)}
.modal details summary{cursor:pointer}