/* ======================================================================
   Fatto — Design System (fonte única)
   Carregue DEPOIS do <style> da página: <link rel="stylesheet" href="design-system.css">
   Os TOKENS abaixo são a fonte de verdade — as páginas não precisam mais repetir
   o bloco :root. (Páginas podem definir tokens EXTRA próprios; não redefina os padrão.)
   ====================================================================== */

/* =========================== TOKENS (fonte única) =========================== */
:root{
  --azul:#003A66; --azul-600:#0A4E80; --azul-300:#5C9BD1; --azul-100:#C2DCEF; --azul-50:#E6F1F9;
  --laranja:#F16700; --laranja-600:#D85B00;
  --verde:#1E8E3E; --verde-bg:#E6F4EA; --verde-tx:#14692C;
  --ambar:#F5A800; --ambar-bg:#FEF6E0; --ambar-tx:#8A5A00;
  --vermelho:#D32F2F; --vermelho-bg:#FDE8E8; --vermelho-tx:#9B1C1C;
  --texto:#1D2939; --texto-2:#475569; --texto-3:#98A2B3; --borda:#E4E7EC; --bg:#F4F6F9;
  --sb:224px; --sb-col:86px;
  --font-ui:'Nunito',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --fs-label:10px; --fs-ph:10px; --fs-val:12px;
}

/* Letra inicial do numero da OS (ADR-029): C corretiva=azul · P preventiva=laranja · S serviço=verde */
.os-t{ font-weight:800 } .os-t-C{ color:var(--azul) } .os-t-P{ color:var(--laranja) } .os-t-S{ color:var(--verde) }

/* =========================== BASE: OVERLAY / TOAST / AVATAR =========================== */
/* overlay padrão (drawers, modais legados) — o modal novo usa .ui-modal-bk */
.backdrop{ position:fixed; inset:0; background:rgba(16,24,40,.45); opacity:0; visibility:hidden; transition:.2s; z-index:50 } .backdrop.open{ opacity:1; visibility:visible }
/* notificação transitória — use a função global toast(msg) */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--azul); color:#fff; padding:11px 18px; border-radius:10px; font-size:13px; font-weight:600; z-index:95; opacity:0; transition:.2s; pointer-events:none } .toast.show{ opacity:1 }
/* avatar de iniciais */
.avatar{ width:34px; height:34px; border-radius:50%; background:var(--azul-300); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13px } .avatar.sm{ width:28px; height:28px; font-size:11px; flex:none }

/* =========================== DROPDOWNS (PADRÃO OBRIGATÓRIO) ===========================
   NUNCA confie no popup NATIVO do <select>: no macOS ele abre COBRINDO o campo e fica inconsistente entre telas. O padrão do app é um PAINEL FLUTUANTE que abre ABAIXO do
   campo (cobre o conteúdo de baixo, nunca o gatilho), estilizado, com busca quando há
   muitas opções — como o tree picker da Nova OS / Planejamento.

   Como cumprir o padrão:
   • Dropdown de opção única → use `<select class="fld">`. O `fdrop.js` (carregado em
     todas as páginas via shell.js) faz o enhancement automático: vira o painel padrão,
     mantendo o <select> nativo como backing (valor do form + eventos `change`).
     Opt-out pontual: atributo `data-no-fdrop`. Selects `multiple` são ignorados.
   • Casos ricos (árvore cliente→local, multi-seleção com chips, busca custom) → use o
     componente `.dd` / `.ms` (ver os-list.html / planejamento.html). Mesmo visual.

   CAMPO DE BUSCA: dropdowns de lista VARIÁVEL (data-bound — clientes, técnicos,
   contratos… crescem) têm busca interna SEMPRE; enums FIXOS (status, prioridade) não.
   O fdrop detecta "variável" automaticamente (select vazio/só-placeholder preenchido por
   JS, ou cujas <option> mudam após o load, ou >8 itens). Force com `data-fdrop-search`
   (ON) ou `data-fdrop-nosearch` (OFF).

   MÚLTIPLA ESCOLHA: dropdown de multi-seleção = campo com CHIPS dos selecionados
   (cada um com ✕) + painel com BUSCA e opções marcáveis (checkbox) — o formato do
   "Responsável(is)" da Nova OS. Use `<select multiple>` (o `fmulti.js`, carregado via
   shell.js, faz o enhancement). NUNCA o `<select multiple>` nativo cru (listbox).
   Placeholder via `data-placeholder`; opt-out `data-no-fmulti`.

   Ao criar QUALQUER dropdown novo, siga isto — não introduza <select> nativo "cru" sem
   a classe `fld` esperando o popup do SO. Ver web/app/fdrop.js (single),
   web/app/fmulti.js (múltipla), web/app/fdate.js (data/hora).
   ===================================================================================== */

/* =========================== DATA / HORA (PADRÃO OBRIGATÓRIO) =========================
   Mesma regra dos dropdowns: NUNCA confie no calendário NATIVO do <input type=date>
   (não segue o visual do app). O `fdate.js` (carregado em todas as páginas via shell.js)
   transforma `<input type="date|time|datetime-local">` no seletor padrão "Clean":
     • DATA → calendário flutuante (abre abaixo), HOJE em anel azul, dia selecionado em
       laranja, rodapé Limpar/Hoje.
     • HORA → campo HH:MM editável (digita ou setas) + atalhos rápidos.
     • DATETIME-LOCAL → calendário + campo de hora juntos.
   O <input> nativo continua sendo o backing (valor + eventos `change`). Opt-out por campo:
   `data-no-fdate` (use em editores inline dentro de tabelas com overflow, onde o painel
   flutuante seria cortado). Ver web/app/fdate.js.
   ===================================================================================== */

/* =========================== BOTÕES =========================== */
/* base — vale para classes novas E legadas (todas autossuficientes) */
.btn,.colbtn,.act,.intelibot,.btn-novo,
[class*="btn-"]{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:38px; padding:0 16px; border-radius:9px;
  font-family:var(--font-ui,'Nunito',sans-serif); font-size:14px; font-weight:400; line-height:1;
  cursor:pointer; border:1px solid transparent; transition:.12s; white-space:nowrap; text-decoration:none;
}
.btn svg,.colbtn svg,.act svg,.intelibot svg,.btn-novo svg,[class*="btn-"] svg{ width:16px; height:16px; flex:none }
.btn:focus-visible,.colbtn:focus-visible,.act:focus-visible,.intelibot:focus-visible,.btn-novo:focus-visible,[class*="btn-"]:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--azul-50) }
.btn:active,.colbtn:active,.act:active,.intelibot:active,.btn-novo:active,[class*="btn-"]:active{ transform:translateY(1px) }
.btn:disabled,.is-disabled,[class*="btn-"]:disabled{ opacity:.45; cursor:not-allowed; transform:none }

/* PRIMÁRIA — laranja (CTA). Bare .btn / .btn-novo / .intelibot já são primárias. */
.btn,.btn-novo,.intelibot,.btn-primary,.act.primary{ background:var(--laranja); color:#fff; border-color:transparent }
.btn:hover,.btn-novo:hover,.intelibot:hover,.btn-primary:hover,.act.primary:hover{ background:var(--laranja-600) }

/* SECUNDÁRIA — azul sólido */
.btn-secondary{ background:var(--azul); color:#fff } .btn-secondary:hover{ background:var(--azul-600) }
/* CONTORNO — azul */
.btn-outline{ background:#fff; border-color:var(--azul-100); color:var(--azul) } .btn-outline:hover{ background:var(--azul-50) }
/* NEUTRA / utilitário — branco + borda cinza (estilo "Expandir"). Legado: .colbtn / .act */
.btn-ghost,.colbtn,.act{ background:#fff; border-color:var(--borda); color:var(--texto-2) }
.btn-ghost:hover,.colbtn:hover,.act:hover{ border-color:var(--azul-300); color:var(--azul); background:var(--azul-50) }
/* SUAVE — azul-50 */
.btn-soft{ background:var(--azul-50); color:var(--azul) } .btn-soft:hover{ background:var(--azul-100) }
/* TEXTO / link */
.btn-text{ background:transparent; color:var(--azul); padding:0 6px } .btn-text:hover{ text-decoration:underline }
/* SUCESSO — verde (pontual) */
.btn-success{ background:var(--verde); color:#fff } .btn-success:hover{ filter:brightness(.94) }
/* ATENÇÃO — âmbar */
.btn-warning{ background:var(--ambar-bg); color:var(--ambar-tx); border-color:#F3E1B0 }
/* PERIGO — vermelho. Contorno (Excluir) e sólido (irreversível). Legado: .act.danger */
.btn-danger,.act.danger{ background:#fff; border-color:#F3C2C2; color:var(--vermelho) } .btn-danger:hover,.act.danger:hover{ background:var(--vermelho-bg) }
.btn-danger-solid{ background:var(--vermelho); color:#fff } .btn-danger-solid:hover{ filter:brightness(.94) }

/* TAMANHOS / variações (sempre aplicadas DEPOIS, vencem a base) */
.btn-sm{ height:32px; padding:0 12px; font-size:13px } .btn-sm svg{ width:14px; height:14px }
.btn-lg{ height:46px; padding:0 22px; font-size:15px }
.btn-icon{ width:38px; height:38px; padding:0 } .btn-icon.btn-sm{ width:32px; height:32px }
.btn-block{ width:100%; }

/* =========================== CAMPOS / DROPDOWNS =========================== */
/* padrão único de campo: input, textarea e select (.fld) + gatilho do dropdown custom (.dd-trig) */
.fld{ font-family:var(--font-ui,'Nunito',sans-serif); font-size:var(--fs-val,12px); color:var(--texto); background:#fff;
  border:1px solid var(--borda); border-radius:9px; height:40px; padding:0 11px; outline:none; width:100% }
textarea.fld{ height:auto; min-height:84px; padding:9px 11px; resize:vertical }
.fld:focus{ border-color:var(--azul-300); box-shadow:0 0 0 3px var(--azul-50) }
.fld::placeholder{ font-size:var(--fs-ph,10px); color:var(--texto-3) }
/* select com chevron padrão (mesmo do dropdown custom) */
select.fld{ -webkit-appearance:none; appearance:none; padding-right:32px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center }
/* gatilho do dropdown custom (os-list) alinhado ao mesmo visual */
.dd-trig{ height:40px; border-radius:9px }

/* =========================== PAGINADOR (rodapé de tabela) =========================== */
.pager{ display:flex; align-items:center; gap:14px; padding:12px 16px; border-top:1px solid var(--borda); font-size:13px; color:var(--texto-2); flex-wrap:wrap }
.pager .spacer{ flex:1 }
.pages{ display:flex; gap:4px }
.pages button{ min-width:32px; height:32px; border:1px solid var(--borda); background:#fff; border-radius:8px; cursor:pointer; font-size:13px; color:var(--texto-2) }
.pages button:hover{ border-color:var(--azul-300) } .pages button.cur{ background:var(--azul); color:#fff; border-color:var(--azul) } .pages button:disabled{ opacity:.4; cursor:default }
.pager select{ height:32px; border:1px solid var(--borda); border-radius:8px; padding:0 8px; background:#fff }

/* =========================== MOTOR DE TABELA (RT) =========================== */
.rtbar{ display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap } .rtbar .spacer{ flex:1 }
.tsearch{ display:flex; align-items:center; gap:6px; border:1px solid var(--borda); border-radius:9px; padding:0 10px; height:38px; width:280px; max-width:60vw; background:#fff } .tsearch input{ border:none; outline:none; width:100%; font-size:13px } .tsearch svg{ width:15px; height:15px; color:var(--texto-3) }
.colbtn{ display:flex; align-items:center; gap:6px; border:1px solid var(--borda); border-radius:9px; height:38px; padding:0 12px; color:var(--texto-2); cursor:pointer; font-size:13px; font-weight:600; background:#fff; position:relative } .colbtn:hover{ border-color:var(--azul-300); color:var(--azul) } .colbtn svg{ width:15px; height:15px }
.rtmenu{ position:relative } .rtview svg.star{ color:var(--laranja) }
.rtdrop{ position:absolute; top:42px; left:0; background:#fff; border:1px solid var(--borda); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); width:230px; padding:8px; z-index:25; display:none } .rtdrop.open{ display:block }
.rtdrop .it{ display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:7px; font-size:13px; cursor:pointer; color:var(--texto) } .rtdrop .it:hover{ background:var(--bg) } .rtdrop .it svg{ width:16px; height:16px; color:var(--texto-2) } .rtdrop .it.cur{ color:var(--azul); font-weight:700 }
.colmenu{ position:absolute; top:42px; right:0; background:#fff; border:1px solid var(--borda); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.1); width:220px; padding:8px; z-index:25; display:none; max-height:320px; overflow:auto } .colmenu.open{ display:block } .colmenu label{ display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:7px; font-size:13px; cursor:pointer; color:var(--texto) } .colmenu label:hover{ background:var(--bg) }
.bulk{ display:none; align-items:center; gap:8px; padding:10px 14px; background:var(--azul); color:#fff; border-radius:12px; margin-bottom:12px } .bulk.show{ display:flex } .bulk .spacer{ flex:1 } .bulk button{ display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.14); color:#fff; border:none; border-radius:8px; height:34px; padding:0 12px; font-size:13px; cursor:pointer } .bulk button svg{ width:16px; height:16px } .bulk button:hover{ background:rgba(255,255,255,.26) } .bulk .cancelar{ background:transparent }
.filtbar{ display:none; align-items:center; gap:8px; padding:0 0 12px; flex-wrap:wrap } .filtbar.show{ display:flex } .filtbar .spacer{ flex:1 } .flink{ color:var(--azul); font-weight:600; cursor:pointer; font-size:13px }
.fchip{ display:flex; align-items:center; gap:7px; background:var(--azul-50); color:var(--azul); border:1px solid var(--azul-100); border-radius:20px; padding:4px 6px 4px 12px; font-size:12px; font-weight:500 } .fchip b{ font-weight:600 } .fchip .fx{ width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer } .fchip .fx:hover{ background:var(--azul-100) } .fchip.sortchip{ background:#fff } .fchip.groupchip{ background:var(--ambar-bg,#FEF6E0); color:var(--ambar-tx,#8A5A00); border-color:#F3E1B0 }
.hdrmenu{ position:fixed; background:#fff; border:1px solid var(--borda); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.14); width:240px; padding:6px; z-index:80; display:none } .hdrmenu.open{ display:block }
.hm-item{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:7px; font-size:13px; cursor:pointer; color:var(--texto) } .hm-item:hover{ background:var(--bg) } .hm-item svg{ width:16px; height:16px; color:var(--texto-2) }
.hm-sep{ border-top:1px solid var(--borda); margin:5px 0 } .hm-label{ font-size:11px; color:var(--texto-3); text-transform:uppercase; letter-spacing:.04em; padding:6px 10px 4px }
.hm-search{ display:flex; align-items:center; gap:6px; border:1px solid var(--borda); border-radius:8px; padding:0 10px; height:34px; margin:0 6px 6px } .hm-search input{ border:none; outline:none; width:100%; font-size:13px } .hm-search svg{ width:15px; height:15px; color:var(--texto-3) }
.hm-vals{ max-height:170px; overflow:auto; padding:0 4px } .hm-vals label{ display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:7px; font-size:13px; cursor:pointer; color:var(--texto) } .hm-vals label:hover{ background:var(--bg) }
.rtcard{ background:#fff; border:1px solid var(--borda); border-radius:14px; overflow:hidden; width:100% }
/* Múltiplos responsáveis: +N e popover */
.respmore{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:var(--laranja); color:#fff; font-size:11px; font-weight:700; cursor:pointer; margin-left:5px; vertical-align:middle } .respmore:hover{ filter:brightness(1.08) }
.respmenu{ position:fixed; z-index:90; display:none; background:#fff; border:1px solid var(--borda); border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.16); min-width:170px; padding:6px } .respmenu.open{ display:block }
.respmenu .rm-h{ font-size:11px; font-weight:700; color:var(--texto-3); padding:4px 8px } .respmenu .rm-i{ display:flex; align-items:center; gap:8px; padding:7px 8px; font-size:13px; border-radius:7px } .respmenu .rm-i:hover{ background:var(--bg) }
.respmenu .rm-av{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--azul); color:#fff; font-size:11px; font-weight:700 }
/* scroll dentro da tabela: cabeçalho da tabela fixo, toolbar/busca/botões e paginador permanecem visíveis */
.twrap{ overflow:auto; max-height:calc(100vh - 290px); min-height:180px }
.twrap thead th{ position:sticky; top:0; z-index:3; background:#fff }
/* BUGFIX: o cabeçalho sticky (camada de composição no Chrome) intercepta o hit-testing
   do menu Colunas/Visões que fica por cima dele → o clique "cai na tabela" e o 1º item
   não seleciona. Enquanto um desses menus estiver aberto, o cabeçalho deixa de ser sticky. */
body:has(.colmenu.open, .rtdrop.open) .twrap thead th{ position:static }
.atbl{ border-collapse:collapse; width:100%; white-space:nowrap } .atbl th{ font-size:12px; font-weight:600; color:var(--texto-3); text-align:left; padding:0; border-bottom:1px solid var(--borda); background:#fff }
.atbl .th-in{ display:flex; align-items:center; gap:6px; padding:12px 14px; cursor:pointer; user-select:none } .atbl .th-in:hover{ background:var(--bg) } .atbl .th-in .ind{ display:flex; gap:3px; color:var(--laranja) } .atbl .th-in .ind svg{ width:14px; height:14px }
.atbl td{ padding:12px 14px; border-bottom:1px solid var(--borda); font-size:13px; color:var(--texto-2) } .atbl tbody tr:last-child td{ border-bottom:none }
.atbl tbody tr{ cursor:pointer } .atbl tbody tr:hover{ background:var(--bg) } .atbl tbody tr.sel{ background:var(--azul-50) } .atbl tr.grouprow td{ background:#F3F6F9; font-weight:600; color:var(--azul); font-size:12px }

/* =========================== MODAL / DIÁLOGO (PADRÃO) ===========================
   Substitui confirm()/prompt() nativos do navegador. Use SEMPRE via ui.js (carregado
   em todas as páginas pelo shell.js): uiConfirm({...})->Promise<bool>, uiPrompt({...}).
   Modelo: ícone à esquerda (cor por intenção) + título/mensagem + botões à direita.
   Ação destrutiva → passar `danger:true` (ícone + botão primário vermelho). */
.ui-modal-bk{ position:fixed; inset:0; background:rgba(16,24,40,.45); z-index:9000;
  display:none; align-items:center; justify-content:center; padding:20px;
  opacity:0; transition:opacity .18s }
.ui-modal-bk.open{ opacity:1 }
.ui-modal{ background:#fff; border-radius:14px; width:400px; max-width:100%; padding:22px;
  box-shadow:0 20px 50px rgba(16,24,40,.25); font-family:var(--font-ui,'Nunito',sans-serif);
  color:var(--texto,#1D2939); transform:translateY(6px); transition:transform .18s }
.ui-modal-bk.open .ui-modal{ transform:none }
.ui-modal-row{ display:flex; gap:14px; margin-bottom:20px }
.ui-modal-ico{ width:42px; height:42px; flex:none; border-radius:50%;
  background:var(--azul-50,#E6F1F9); color:var(--azul,#003A66);
  display:flex; align-items:center; justify-content:center }
.ui-modal-ico.danger{ background:var(--vermelho-bg,#FDE8E8); color:var(--vermelho,#D32F2F) }
.ui-modal-ico svg{ width:22px; height:22px }
.ui-modal-body{ flex:1; min-width:0 }
.ui-modal-t{ font-size:15px; font-weight:700; margin:0 0 4px }
.ui-modal-m{ font-size:13.5px; color:var(--texto-2,#475569); line-height:1.5 }
.ui-modal-lbl{ display:block; font-size:var(--fs-label,11px); font-weight:600; color:var(--texto-2,#475569); margin:14px 0 5px }
.ui-modal-in{ margin-top:6px }
.ui-modal-ft{ display:flex; gap:10px; justify-content:flex-end }

/* =========================== FILTRO: CHIPS (.fchip) =========================== */
.fchip{ display:flex; align-items:center; gap:7px; background:var(--azul-50); color:var(--azul); border:1px solid var(--azul-100); border-radius:20px; padding:4px 6px 4px 12px; font-size:12px; font-weight:500 }
.fchip.sortchip{ background:#fff }
.fchip.groupchip{ background:var(--ambar-bg); color:var(--ambar-tx); border-color:#F3E1B0 }
.fchip b{ font-weight:600 }
.fchip .fx{ width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--azul-600) } .fchip .fx:hover{ background:var(--azul-100) }

/* =========================== ABAS / TABS (sublinhado) ===========================
   Canônico: sublinhado; ativa = texto azul + sublinhado laranja (2px); inativa cinza.
   Aceita a classe ativa `.active` OU `.on`. Container = `.tabs`.
   (Abas do drawer de OS usam `.dr-tab` — variante compacta; pílulas kanban usam
   `.ktab`/`.subtab` — ainda inline, ver a referência abaixo.) */
.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--borda); margin-bottom:18px; overflow-x:auto }
.tab{ background:none; border:none; border-bottom:2px solid transparent; font-family:var(--font-ui); padding:11px 15px; font-size:14px; font-weight:400; color:var(--texto-2); cursor:pointer; white-space:nowrap }
.tab:hover{ color:var(--texto) }
.tab.active, .tab.on{ color:var(--azul); font-weight:700; border-bottom-color:var(--laranja) }

/* =========================== CARDS (conteúdo) ===========================
   Card de conteúdo padrão: branco, borda, raio 14, padding 16. Cobre as variantes de
   conteúdo .kpi / .ccard / .os-card / .exsec (extras próprios — cursor, margem, hover —
   ficam na página). NÃO inclui .card / .panel (nomes sobrecarregados: wrappers de auth
   em login/signup/etiqueta), nem .treecard (contêiner sem padding) / .kcard (kanban). */
.kpi, .ccard, .os-card, .exsec{ background:#fff; border:1px solid var(--borda); border-radius:14px; padding:16px }

/* =========================== STATUS / PILLS ===========================
   Badge de status canônico: font 11, peso 700, raio 14, padding 3×10. Cor por intenção.
   Use `.slachip` + `.ok`/`.warn`/`.danger`/`.info`/`.neutral` (legados `.g`/`.a`/`.v`).
   Os pills de status/prioridade da lista de OS usam `.chip` + `.c-*` (mesmo visual;
   base fica local no os-list por colisão do nome `.chip` com o chip inline do
   planejamento). Prioridade (`.prchip`, `.critchip`) é variante própria. */
.slachip{ font-size:11px; font-weight:700; border-radius:14px; padding:3px 10px; white-space:nowrap }
.slachip.ok,    .slachip.g{ background:var(--verde-bg);     color:var(--verde-tx) }
.slachip.warn,  .slachip.a{ background:var(--ambar-bg);     color:var(--ambar-tx) }
.slachip.danger,.slachip.v{ background:var(--vermelho-bg);  color:var(--vermelho-tx) }
.slachip.info{    background:var(--azul-50); color:var(--azul-600) }
.slachip.neutral{ background:#F1F5F9; color:var(--texto-2) }

/* =========================== DRAWER (painel lateral direito) ===========================
   Base única (fixo à direita, desliza, sombra). A LARGURA vem das variantes responsivas
   .sm/.md/.lg/.full (min vw×px): a tela escolhe a classe semântica em vez de cravar px.
   Em ≤640px todo drawer vira tela cheia. Overlay = .backdrop. O os-list é exceção (largura
   via JS/inline + handle de resize); 2º nível (os-list) usa .subdrawer, ainda inline. */
.drawer{ position:fixed; top:0; right:0; bottom:0; max-width:94vw; background:var(--bg); transform:translateX(100%); transition:transform .25s; z-index:60; display:flex; flex-direction:column; box-shadow:-12px 0 40px rgba(0,0,0,.12) }
.drawer.open{ transform:translateX(0) }
/* Variantes: teto confortável no desktop, cresce ao encolher (min vw×px) */
.drawer.sm{ width:min(92vw, 440px) }   /* painel auxiliar estreito */
.drawer.md{ width:min(92vw, 500px) }   /* form/detalhe padrão */
.drawer.lg{ width:min(94vw, 720px) }   /* workspace amplo */
.drawer.full{ width:100vw; max-width:100vw }
/* Mobile: qualquer drawer vira tela cheia. Ancorar nas duas bordas (left+right:0)
   com width:auto faz o browser calcular a largura = viewport exato, sem incluir a
   barra de rolagem (evita overflow lateral). As variantes são listadas para igualar
   a especificidade de .drawer.md e zerar o width fixo; max-width clampa inline (os-list). */
@media (max-width:640px){
  .drawer{ left:0; right:0; max-width:100% }
  .drawer, .drawer.sm, .drawer.md, .drawer.lg, .drawer.full{ width:auto }
}

/* =========================== KANBAN (board) ===========================
   Vocabulário do quadro: colunas, cards e arraste. Estava só no oslist-content.css,
   que carrega apenas na tela de OS — mudou de casa quando Propostas ganhou board.
   O que é DA lista de OS (#kanban, .kfilt, .kload/.lw — painel planejado × realizado)
   continua lá. Quem consome: lista de OS e Propostas & Cotações. */
.ktabs{display:inline-flex; gap:3px; background:var(--bg); border:1px solid var(--borda); border-radius:10px; padding:4px; margin-bottom:12px} .ktab{border:none; background:transparent; border-radius:7px; height:32px; padding:0 16px; font-size:13px; font-weight:600; color:var(--texto-2); cursor:pointer} .ktab.on{background:var(--azul); color:#fff}
.kboard{display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; align-items:flex-start}
.kcol{flex:0 0 290px; background:#F3F6F9; border:1px solid var(--borda); border-radius:12px; display:flex; flex-direction:column; max-height:72vh} .kcol.over{outline:2px dashed var(--azul-300); outline-offset:-2px}
.kcol-h{display:flex; align-items:center; gap:8px; padding:12px 14px; font-weight:700; font-size:13px; border-bottom:1px solid var(--borda); position:relative; cursor:pointer} .kcol-h:hover{background:#EAEFF4} .kcol-h .ct{margin-left:auto; background:#fff; border:1px solid var(--borda); border-radius:20px; min-width:24px; height:22px; padding:0 7px; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--texto-2)} .kcol-h .dt{width:10px; height:10px; border-radius:3px} .kcol-h .fi{width:13px; height:13px; color:var(--texto-3)} .kcol-h .fi.act{color:var(--laranja)}
.kcolmenu{position:absolute; top:40px; left:10px; right:10px; background:#fff; border:1px solid var(--borda); border-radius:9px; box-shadow:0 8px 24px rgba(0,0,0,.14); padding:8px; z-index:15; display:none; cursor:default; font-weight:400} .kcolmenu.open{display:block} .kcolmenu input{width:100%; height:34px; border:1px solid var(--borda); border-radius:8px; padding:0 9px; font-size:12px; outline:none} .kcolmenu input:focus{border-color:var(--azul-300); box-shadow:0 0 0 3px var(--azul-50)} .kcolmenu .clr{font-size:11px; color:var(--azul); font-weight:600; cursor:pointer; margin-top:7px; display:inline-block}
.kcards{padding:10px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; flex:1; min-height:0}
.kcard{background:#fff; border:1px solid var(--borda); border-radius:10px; padding:11px 12px; cursor:grab; border-left:4px solid var(--azul-300)} .kcard:hover{box-shadow:0 4px 14px rgba(0,0,0,.06)} .kcard.drag{opacity:.5}
.kcard .os{font-size:12px; font-weight:700; color:var(--azul)} .kcard .ds{font-size:13px; color:var(--texto); margin:3px 0 6px; font-weight:600} .kcard .me{font-size:11px; color:var(--texto-3)} .kcard .ft{display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap} .kcard .av{width:22px; height:22px; border-radius:50%; background:var(--azul-300); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-left:auto}
.kempty{padding:18px; text-align:center; color:var(--texto-3); font-size:12px}

/* =========================== COMPONENTES — REFERÊNCIA CANÔNICA (para código NOVO) ===========================
   Estes padrões ainda vivem inline em várias páginas com pequenas divergências (drift) e
   colisões de nome — NÃO foram unificados à força para não mudar o visual atual. Ao criar
   componente NOVO, siga estes valores; a migração das páginas legadas é incremental
   (revisar cada uma, pois a aparência muda um pouco).

   CARD (superfície branca): background:#fff; border:1px solid var(--borda);
     border-radius:14px; padding:14px 16px.  Legado equivalente: .os-card, .kpi, .ccard,
     .panel, .exsec, .kcard (radius 12–16 / padding 16–18 variam por página).

   TAB (aba sublinhada): padding:11px 15px; font-size:14px; color:var(--texto-2);
     cursor:pointer; border-bottom:2px solid transparent. Ativa: color:var(--azul);
     font-weight:700; border-bottom-color:var(--laranja). Legado: .tab / .dr-tab / .dtab
     (drift: 2px vs 3px; classe .active vs .on; planejamento sublinha em azul). Variante
     "pílula" (kanban): fundo var(--azul) quando ativa — legado .ktab.

   PILL / STATUS (badge): font-size:11px; font-weight:700; border-radius:14px;
     padding:3px 10px; white-space:nowrap. Cor por intenção com os pares de token:
       ok  → var(--verde-bg)/var(--verde-tx) · aviso → var(--ambar-bg)/var(--ambar-tx)
       erro→ var(--vermelho-bg)/var(--vermelho-tx) · info → var(--azul-50)/var(--azul-600)
     Legado: .slachip(.g/.a/.v), .prchip, .critchip, .c-pendente/.c-agendada/…

   DRAWER (painel lateral direito): position:fixed; inset com right/top/bottom:0;
     background:var(--bg); transform:translateX(100%) → .open translateX(0);
     box-shadow:-12px 0 40px rgba(0,0,0,.12). Largura por variante: sm ~480px, md ~500px,
     lg 40vw (min 420px). Overlay = .backdrop (já no design-system).
   ===================================================================================== */