/* ============================================================
   Compras · Clube Campestre de Varginha — v104
   Sistema administrativo institucional: verde do clube como cor
   de ação, superfícies brancas sobre cinza muito claro, Inter,
   bordas finas, raios discretos, sem gradientes nem brilhos.
   ============================================================ */
:root{
  --primary:#1f5c45; --primary-hover:#174936; --primary-soft:#eaf3ef;
  --bg:#f5f7f6; --surface:#ffffff; --surface-2:#f8faf9;
  --ink:#1f2933; --ink-2:#3e4c59; --mut:#667085; --mut-2:#98a2b3;
  --line:#dde3e0; --line-2:#eaeeec; --line-in:#cbd5d0;
  --ok:#2e7d52; --ok-soft:#eaf6ef;
  --warn:#9a6b14; --warn-soft:#fff6df;
  --err:#c0392b; --err-soft:#fdecea;
  --info:#3267a8; --info-soft:#eaf2fb;
  /* compatibilidade com nomes antigos usados pelas telas */
  --paper:var(--bg); --paper-2:var(--surface-2); --card:var(--surface);
  --accent:var(--primary); --accent-d:var(--primary-hover); --accent-soft:var(--primary-soft);
  --brass:#9a6b14; --brass-2:#b7791f; --brass-soft:var(--warn-soft);
  --gold:#9a6b14; --gold-soft:var(--warn-soft);
  --r:8px; --r-sm:6px; --r-lg:10px;
  --sh-1:0 1px 2px rgba(16,24,40,.04);
  --sh-2:0 2px 8px rgba(16,24,40,.08);
  --sh-pop:0 12px 32px rgba(16,24,40,.16);
  --ring:0 0 0 3px rgba(31,92,69,.14);
  --grad:var(--primary); --grad-brass:var(--warn); --grad-ink:var(--primary);
  --grad-hero:var(--surface);
  --font-display:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100dvh;color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:14px;line-height:1.5;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--primary);color:#fff}
main a:not([class]){color:var(--primary)}
h1,h2,.brand,.hero h1,.cockpit-hero h1,.melhor-badge,.login-logo,.ia-status h2{font-family:var(--font-display)}
h1{font-weight:600}
/* dados tabulares (qtd, datas, R$) alinham pelos dígitos */
.mono{font-variant-numeric:tabular-nums}
.kpi b,.pl-chip b,.rk-val,.melhor-grid b,.anom-val,.pend-val,.orc-tot{font-variant-numeric:tabular-nums}
.req-foot,.tl-meta,.li b,.leg,.sep-qtd-ro,.mp-qtd-chip,.ref-cel,.user-id small{font-variant-numeric:tabular-nums}

/* ---------- App shell ---------- */
main{
  width:100%;max-width:920px;margin:0 auto;
  padding:clamp(13px,3.5vw,24px);
  padding-bottom:calc(104px + env(safe-area-inset-bottom));
}

h1{font-size:clamp(1.3rem,4vw,1.5rem);line-height:1.2;margin:2px 0 14px;letter-spacing:-.01em}
h2{font-size:1.05rem;margin:2px 0 12px;font-weight:600;letter-spacing:-.005em}
h3{margin:6px 0;font-weight:600}
.muted{color:var(--mut);font-size:.9rem}
.empty{color:var(--mut);text-align:center;padding:30px 14px;background:var(--surface-2);border:1px dashed var(--line);border-radius:var(--r)}
.hidden{display:none!important}

/* ---------- Top bar (páginas públicas) ---------- */
.top{
  position:sticky;top:0;z-index:30;
  display:flex;justify-content:space-between;align-items:center;
  padding:calc(env(safe-area-inset-top) + 11px) clamp(14px,4vw,24px) 11px;
  background:var(--surface);
  border-bottom:1px solid var(--line-2);
}
.brand{color:var(--ink);text-decoration:none;font-weight:600;font-size:1rem;display:flex;align-items:baseline;gap:7px}
.brand small{display:block;font-weight:400;color:var(--mut);font-size:.72rem}
.sair{color:var(--mut);text-decoration:none;font-size:.82rem;font-weight:500;padding:7px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);transition:border-color .15s}
.sair:hover{border-color:var(--line-in)}

/* ---------- Cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);
  padding:clamp(15px,4vw,20px);margin-bottom:14px;box-shadow:var(--sh-1);
}
.hero{
  text-align:center;padding:clamp(24px,6vw,36px) 18px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line-2);color:var(--ink);margin-bottom:16px;
}
.hero h1{color:var(--ink)}
.hero .muted{color:var(--mut)}
.hero .btn.big{max-width:340px;margin-inline:auto}
.links{display:grid;gap:10px;margin-top:18px}
.links a{
  display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:14px 16px;text-decoration:none;color:var(--ink);font-weight:500;transition:border-color .15s
}
.links a:hover{border-color:var(--primary)}

/* ---------- Formulários ---------- */
label{display:block;font-weight:500;margin:14px 0 6px;font-size:.88rem;color:var(--ink-2)}
label .muted{font-weight:400}
label .obrig{color:#dc2626;font-weight:700}
/* checkbox e radio ficam FORA desta regra (31/07/2026): com width:100%, min-height:42px e
   appearance:none eles viravam caixas vazias de largura total — o navegador nem desenha o "check".
   Cada tela vinha contornando por conta própria (.orc-cb com 19px, .lg-lembrar com width:auto no
   login) e algumas nem isso (.forn-cb, .u-ativo). Excluir na origem conserta todas de uma vez e
   preserva quem já tinha tamanho próprio. */
input:not([type=checkbox]):not([type=radio]),select,textarea{
  width:100%;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line-in);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);min-height:42px;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none
}
input[type=checkbox],input[type=radio]{accent-color:var(--primary);flex:none;margin:0;cursor:pointer}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23667085' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:36px}
textarea{min-height:84px;resize:vertical;line-height:1.45}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring)}
input::placeholder,textarea::placeholder{color:var(--mut-2)}
input[disabled],select[disabled],textarea[disabled],input[readonly]{background:var(--surface-2);color:var(--mut)}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--primary);color:#fff;border:1px solid var(--primary);text-decoration:none;text-align:center;
  font-weight:500;font-size:.92rem;padding:10px 18px;border-radius:var(--r-sm);min-height:42px;cursor:pointer;
  transition:background .15s,border-color .15s
}
.btn:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn:active{background:var(--primary-hover)}
.btn.big{display:flex;width:100%;margin-top:16px;font-size:.98rem;padding:12px}
.btn[disabled]{opacity:.55;cursor:default}
.btn.cotar{width:100%;margin-top:10px}
.link-btn{background:none;border:none;color:var(--primary);padding:10px 0;font-size:.9rem;font-weight:500;cursor:pointer;min-height:42px;box-shadow:none}
.voltar{color:var(--primary);text-decoration:none;font-size:.85rem;font-weight:500}
.mini{
  display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:500;padding:7px 12px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--ink-2);text-decoration:none;transition:border-color .15s,background .15s;min-height:36px
}
.mini:hover{border-color:var(--line-in);background:var(--surface-2)}
.mini.wa{background:var(--ok-soft);border-color:#bfe3cd;color:#166534}
.mini.ok{background:var(--primary-soft);border-color:var(--line-2);color:var(--primary);cursor:default}
.mini.sem{color:var(--mut-2);cursor:default}

/* ---------- Urgência (segmentado) ---------- */
.urg{display:flex;gap:6px;background:var(--surface-2);padding:4px;border-radius:var(--r-sm);border:1px solid var(--line-2)}
.urg button{flex:1;background:transparent;border:none;border-radius:5px;padding:10px 4px;font-weight:500;cursor:pointer;min-height:40px;color:var(--mut);transition:.15s;font-size:.88rem}
.urg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);border:1px solid var(--line)}
.urg button.on[data-v=urgente]{color:var(--warn);background:var(--warn-soft);border-color:#eadcae}
.urg button.on[data-v=emergencia]{color:var(--err);background:var(--err-soft);border-color:#f2cdc8}

/* ---------- Autocomplete ---------- */
.sugestoes{border:1px solid var(--line);border-radius:var(--r-sm);margin-top:6px;max-height:260px;overflow:auto;display:none;box-shadow:var(--sh-pop);background:var(--surface)}
.sugestoes.show{display:block}
.sugestoes div{padding:11px 13px;border-bottom:1px solid var(--line-2);cursor:pointer}
.sugestoes div:last-child{border-bottom:none}
.sugestoes div:hover{background:var(--primary-soft)}
.chip{background:var(--primary-soft);border:1px solid var(--line-2);color:var(--primary);border-radius:var(--r-sm);padding:11px 13px;margin-top:8px;display:flex;justify-content:space-between;align-items:center;font-weight:500}
.chip button{background:none;border:none;color:var(--primary);font-size:1.2rem;cursor:pointer;min-width:40px;min-height:40px}

/* ---------- Mensagens ---------- */
.msg{padding:11px 13px;border-radius:var(--r-sm);margin-top:13px;font-size:.9rem}
.msg.erro{background:var(--err-soft);color:#8f2b20;border:1px solid #f2cdc8}
.sucesso{background:var(--ok-soft)!important;border-color:#cfe8d8!important}
.sucesso h2{color:var(--ok);margin:0 0 8px}

/* ---------- KPIs ---------- */
.kpis{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.kpi{flex:1;min-width:88px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:13px 12px;text-align:center}
.kpi b{display:block;font-size:clamp(1.2rem,4vw,1.45rem);font-weight:600;line-height:1.15}
.kpi span{color:var(--mut);font-size:.74rem}
.kpi.alerta{border-color:#f2cdc8;background:var(--err-soft)}.kpi.alerta b{color:var(--err)}

/* ---------- Cards de requisição ---------- */
.req{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:15px;margin-bottom:12px}
.req-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:8px}
.urg-badge{font-size:.7rem;font-weight:600;padding:3px 9px;border-radius:999px}
.u-n{background:var(--surface-2);color:var(--mut);border:1px solid var(--line-2)}.u-u{background:var(--warn-soft);color:var(--warn)}.u-e{background:var(--err-soft);color:var(--err)}
.status{font-size:.7rem;color:var(--mut);font-weight:600;padding:3px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-2)}
.status.s-respondida,.status.s-aprovada{background:var(--ok-soft);color:#1f6b41;border-color:#cfe8d8}
.status.s-cot{background:var(--info-soft);color:var(--info);border-color:#d3e2f4}
.status.s-apr{background:var(--warn-soft);color:var(--warn);border-color:#eadcae}
.status.s-ok{background:var(--ok-soft);color:#1f6b41;border-color:#cfe8d8}
.status.s-rej{background:var(--err-soft);color:var(--err);border-color:#f2cdc8}
.status.s-emp{background:#f1eefb;color:#5b4a9e;border-color:#e0d8f5}
.status.s-fim{background:var(--surface-2);color:var(--mut);border-color:var(--line-2)}
.status.s-bloqueada{background:var(--err-soft);color:var(--err);border-color:#f2cdc8}
[data-theme="dark"] .status.s-cot{background:#16243a;color:#93c5fd;border-color:#1f3354}
[data-theme="dark"] .status.s-apr{background:#33290e;color:#e3c56b;border-color:#4a3d18}
[data-theme="dark"] .status.s-ok{background:#12291b;color:#7fce9f;border-color:#1d3f2a}
[data-theme="dark"] .status.s-rej{background:#331715;color:#f0a29a;border-color:#4d2320}
[data-theme="dark"] .status.s-bloqueada{background:#331715;color:#f0a29a;border-color:#4d2320}
.li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:.88rem;color:var(--mut)}
.li b{color:var(--ink);font-weight:500;text-align:right}
.just{font-style:italic;color:var(--ink-2);background:var(--surface-2);padding:10px 12px;border-radius:var(--r-sm);margin:9px 0 0;border-left:3px solid var(--primary)}
.req-foot{margin-top:8px;font-size:.74rem;color:var(--mut-2);text-align:right}
.tag-novo{font-size:.66rem;background:var(--info-soft);color:var(--info);padding:2px 7px;border-radius:5px;vertical-align:middle;font-weight:600}
.cot-badge{font-size:.66rem;background:var(--ok-soft,#dcfce7);color:#166534;padding:2px 7px;border-radius:5px;vertical-align:middle;font-weight:600;white-space:nowrap}
.req-resumo{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:13px;margin:10px 0}

/* ---------- Contatos ---------- */
.contatos{display:flex;flex-direction:column;gap:10px}
.contato-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:13px}
.contato-row .cn{grid-column:1/3;display:flex;justify-content:space-between;align-items:baseline}
.contato-row .cn small{color:var(--mut-2)}
.contato-row button{grid-column:1/3;background:var(--primary);color:#fff;border:none;border-radius:var(--r-sm);padding:11px;font-weight:500;cursor:pointer;min-height:42px}
.contato-row button:hover{background:var(--primary-hover)}
.contato-row.ok{border-color:#cfe8d8;background:var(--ok-soft)}
.contato-row .ct-obs-lbl{grid-column:1/3;font-size:.78rem;color:var(--mut-2);margin-bottom:-4px}
.contato-row .ct-obs-interna{grid-column:1/3;resize:vertical;min-height:38px;font-size:.86rem;background:var(--warn-soft, #fff7e6);border:1px dashed var(--line-2)}
.contato-row .ct-categ-row{grid-column:1/3;display:flex;align-items:center;gap:10px}
.contato-row .ct-categoria{flex:1}
.contato-row .ct-ativo-lbl{display:flex;align-items:center;gap:6px;font-size:.84rem;color:var(--mut);white-space:nowrap}
.contato-row.inativo{opacity:.6}
.tag-inativo{font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--err-soft);color:var(--err)}

/* ---------- Tabelas / comparativo ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-sm);border:1px solid var(--line-2)}
table.cmp{width:100%;border-collapse:collapse;font-size:.86rem}
table.cmp th,table.cmp td{padding:10px 12px;border-bottom:1px solid var(--line-2);text-align:left;white-space:nowrap}
table.cmp tr:last-child td{border-bottom:none}
table.cmp th,table.cmp tr.hdr td{color:var(--mut);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;background:var(--surface-2);font-weight:600}
table.cmp tbody tr:hover>td{background:var(--surface-2)}
table.cmp td.best{background:var(--ok-soft);font-weight:600;color:#1f6b41}
table.cmp td.eco-pos{color:#1f6b41;font-weight:600}
table.cmp td.eco-neg{color:var(--err);font-weight:600}
/* Prazo + pagamento sob o nome do fornecedor no cabeçalho do comparativo (20/08/2026, pedido da
   compradora). O cabeçalho é UPPERCASE e .7rem para os rótulos; a condição precisa do oposto —
   caixa normal (o dado já vem em maiúscula do fornecedor: "PAGTO A VISTA VIA PIX") e legível. */
table.cmp tr.hdr td .cmp-cond{
  display:block;margin-top:3px;font-size:.72rem;font-weight:500;
  text-transform:none;letter-spacing:0;color:var(--ink-2)
}
table.cmp tr.hdr td .cmp-cond .melhor{color:#1f6b41;font-weight:700}   /* menor prazo, como o menor preço */
table.cmp tr.hdr td .cmp-cond .falta{color:#b45309}                    /* não informou: some não é opção */
/* As mesmas duas informações como LINHAS, no "Comparativo detalhado" das telas de aprovar/assinar e
   do PDF (27/08/2026). Lá não há cabeçalho com a condição — o diretor decide olhando estas linhas,
   então elas vêm logo abaixo do subtotal, com o texto inteiro (a célula pode quebrar). */
table.cmp tr.cmp-cond-row td{font-size:.8rem;white-space:normal}
table.cmp tr.cmp-cond-row .melhor{color:#1f6b41;font-weight:700}
table.cmp tr.cmp-cond-row .falta{color:#b45309}
.sugerir-desc-box{white-space:normal;margin-top:6px}
.sugestao-desc{background:var(--surface-2);border:1px dashed var(--line-2);border-radius:var(--r-sm);padding:8px 10px;font-size:.82rem}
.sugestao-desc-nome{margin:5px 0;color:var(--ink)}
table.cmp td.best-soft{background:var(--warn-soft)}
table.cmp td.best.blue{background:var(--info-soft);color:var(--info)}
table.cmp td.lbl,table.cmp .lbl{background:var(--surface-2);font-weight:600}
table.cmp tr.pend td{color:var(--mut-2)}
/* congela a 1ª coluna (nome do item) ao rolar a matriz no celular. width/min-width/max-width no <td>
   NÃO é confiável em table-layout:auto — com muitas colunas de fornecedor concorrendo por espaço, o
   navegador espreme essa coluna até quase sumir (confirmado visualmente). Por isso o texto do item vai
   dentro de um <div class="item-cell"> com largura fixa DE VERDADE (div respeita width, <td> não) —
   o resto da tabela rola horizontal (.tbl-wrap) normalmente, sem afetar essa coluna. */
table.cmp th:first-child,table.cmp td:first-child{position:sticky;left:0;z-index:2;background:var(--surface-2);white-space:normal;padding:0}
table.cmp th:first-child{padding:10px 12px}
table.cmp .item-cell{width:220px;box-sizing:border-box;padding:10px 12px;line-height:1.4;word-break:break-word}
/* congela o cabeçalho (nomes dos fornecedores) ao rolar a matriz. #cmp-tableview .tbl-wrap tem SUA
   PRÓPRIA caixa de rolagem (max-height+overflow-y abaixo) em vez de grudar no scroll da PÁGINA inteira
   — sticky relativo ao scroll da página é frágil (depende de onde a tabela cai na página, pode acabar
   sobrepondo a 1ª linha de produto numa zona de transição ruim, confirmado com screenshot real). Com
   caixa própria, top:0 é sempre exato e não tem essa zona cinzenta. */
#cmp-tableview .tbl-wrap{max-height:60vh;overflow-y:auto}
table.cmp.cmp-sticky tr.hdr td{position:sticky;top:0;z-index:3;box-shadow:0 1px 0 var(--line-2)}
table.cmp.cmp-sticky tr.hdr td:first-child{z-index:4}
/* Este comparativo tem uma coluna "Num" antes de "Item" (numeração das linhas) — as DUAS colam juntas
   ao rolar horizontal (não só a 1ª), senão o número fica visível mas perde-se qual item é. A regra
   genérica acima (:first-child, usada por ~8 outras tabelas do sistema) grudaria só o "Num"; aqui a
   sobrescrevemos: "Num" vira largura fixa DE VERDADE via <div class="cmp-num"> (mesma técnica do
   .item-cell — width em <td> não é confiável nesse layout, no comentário acima), e "Item" (2ª coluna)
   cola logo depois, em left = largura do Num. Escopado a #cmp-tableview. */
#cmp-tableview table.cmp td:first-child{padding:0}
#cmp-tableview table.cmp th:first-child{width:auto;text-align:center;padding:10px 6px}
#cmp-tableview table.cmp .cmp-num{width:34px;box-sizing:border-box;padding:10px 6px;text-align:center;line-height:1.4}
#cmp-tableview table.cmp td:nth-child(2),#cmp-tableview table.cmp th:nth-child(2){position:sticky;left:34px;z-index:2;background:var(--surface-2);white-space:normal;padding:0}
#cmp-tableview table.cmp th:nth-child(2){padding:10px 12px}
#cmp-tableview table.cmp.cmp-sticky tr.hdr td:nth-child(2){z-index:4}
/* rótulos "Num"/"Item" centralizados no cabeçalho (a descrição embaixo continua alinhada à esquerda,
   só o título da coluna fica centralizado) — escopado a este comparativo, não mexe nas outras
   tabelas do sistema que reaproveitam table.cmp para outros conteúdos. */
#cmp-tableview table.cmp tr.hdr td:first-child,#cmp-tableview table.cmp tr.hdr td:nth-child(2){text-align:center}
.cmp-num{color:var(--mut-2);font-variant-numeric:tabular-nums}
/* "Histórico de negociação" também numerado — tabela simples, sem a complicação de 2 colunas coladas
   do comparativo principal; só restaura o padding/centralização que o :first-child genérico zera. */
#neg-tableview table.cmp td:first-child,#neg-tableview table.cmp th:first-child{padding:10px 6px;text-align:center;width:auto}
/* o código do produto, junto da descrição do item */
.item-cod{color:var(--mut-2);font-weight:400;white-space:nowrap;margin-left:2px}
.leg{font-size:.74rem;margin-top:9px;color:var(--mut)}
.tot,.tot-compra{font-weight:600;font-size:1rem}
.tot-compra{background:var(--warn-soft);padding:11px 13px;border-radius:var(--r-sm);margin-top:10px;border:1px solid #eadcae}

/* ---------- Comparativo: tela cheia + ver por item ---------- */
.cmp-acts{display:flex;gap:6px;flex-wrap:wrap}
#cmp-card.cmp-fullscreen{position:fixed;inset:0;z-index:95;margin:0;border-radius:0;overflow:auto;padding:16px;box-shadow:none;-webkit-overflow-scrolling:touch;background:var(--surface)}
#cmp-card.cmp-fullscreen table.cmp{font-size:1rem}
/* em tela cheia a caixa própria vira o card inteiro — sem o teto de 60vh */
#cmp-card.cmp-fullscreen #cmp-tableview .tbl-wrap{max-height:none;overflow-y:visible}
body.cmp-lock{overflow:hidden}

/* ---------- Fornecedores (cotação) ---------- */
.forn-lista{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.forn-opt{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px;cursor:pointer;background:var(--surface);transition:border-color .15s}
.forn-opt:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.forn-opt input{width:20px;height:20px;min-height:auto;flex:none;accent-color:var(--primary)}
.forn-opt .fn{display:flex;flex-direction:column;flex:1}
.forn-opt .fn small{color:var(--mut);font-size:.8rem}
.sem{color:var(--mut-2)}

/* ---------- Descoberta de fornecedor (Fase 2 do Portal) ---------- */
.cat-filtro{margin:0 0 10px;font-size:.86rem}
.cat-filtro summary{cursor:pointer;color:var(--ink-2);padding:4px 0}
.cat-ops{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px;margin-top:6px}
.cat-op{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.85rem}
.cat-op input{width:17px;height:17px;min-height:auto;flex:none;accent-color:var(--primary)}
.desc-painel{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-bottom:12px;overflow:hidden}
.desc-head{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:11px 13px;border-bottom:1px solid var(--line-2);background:var(--surface-2)}
.desc-head span{color:var(--mut);font-size:.82rem}
.desc-lista{max-height:52vh;overflow-y:auto}
.desc-row{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;cursor:pointer;border-bottom:1px solid var(--line-2)}
.desc-row:last-child{border-bottom:0}
.desc-row:has(input:checked){background:var(--primary-soft)}
.desc-row input{width:20px;height:20px;min-height:auto;flex:none;margin-top:2px;accent-color:var(--primary)}
.desc-info{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.desc-info small{color:var(--mut);font-size:.8rem}
.desc-cobre{align-self:flex-start;font-size:.72rem;font-weight:600;color:var(--primary);background:var(--primary-soft);border-radius:99px;padding:1px 8px}
.desc-motivos{margin:0;padding-left:16px;color:var(--ink-2);font-size:.81rem;line-height:1.45}
.desc-acoes{display:flex;gap:12px;align-items:center;padding:11px 13px;border-top:1px solid var(--line-2)}

/* correção do cadastro na fila de triagem */
.fp-edit{margin:8px 0 4px;border-top:1px solid var(--line-2);padding-top:8px}
.fp-edit > summary{cursor:pointer;color:var(--primary);font-size:.85rem;font-weight:600}
.fe-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-top:8px}
.fe-c{display:flex;flex-direction:column;gap:3px;min-width:0}
.fe-c > span{font-size:.76rem;color:var(--mut)}
/* 16px (20/08/2026): abaixo disso o iPhone dá zoom ao focar e a tela "estoura" — mesma correção
   feita no portal do fornecedor. Estas são telas internas, mas o comprador também usa no celular. */
.fe-c input,.fe-c textarea{font-size:16px}
.fe-cats{margin:8px 0}
.fe-cats > summary{cursor:pointer;font-size:.82rem;color:var(--ink-2)}
.fe-cats .cat-ops{max-height:180px;overflow-y:auto;padding:6px 2px}
.fp-edit .fe-salvar{margin-top:8px}
.link-box{display:flex;gap:6px;align-items:center}
.link-box input{font-size:16px;background:var(--surface-2);text-overflow:ellipsis}

/* ---------- Gestão (hub) ---------- */
.ges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.ges-card{display:flex;flex-direction:column;gap:3px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:16px;text-decoration:none;color:var(--ink);transition:border-color .15s;position:relative;overflow:hidden}
.ges-card:hover{border-color:var(--primary)}
.ges-card .ic{font-size:1.5rem;margin-bottom:2px}
.ges-card b{font-weight:600}
.ges-card small{color:var(--mut);font-size:.78rem;line-height:1.4}
.ges-num{position:absolute;right:9px;bottom:7px;font-size:.7rem;font-weight:600;color:var(--mut-2);font-variant-numeric:tabular-nums}

/* ---------- Gráficos (barras CSS) ---------- */
.bars{display:flex;flex-direction:column;gap:9px}
.bar-row{display:grid;grid-template-columns:40% 1fr auto;gap:10px;align-items:center;font-size:.82rem}
.bl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.bt{background:var(--surface-2);border-radius:4px;height:12px;overflow:hidden;border:1px solid var(--line-2)}
.bf{display:block;height:100%;border-radius:3px;background:var(--primary)}
.bv{font-weight:600;white-space:nowrap;font-size:.8rem;font-variant-numeric:tabular-nums}
.insight{background:var(--info-soft);border:1px solid #d3e2f4;color:#27528a;border-radius:var(--r-sm);padding:11px 13px;margin:8px 0;font-size:.9rem;line-height:1.45}

/* ---------- Relatórios ---------- */
.rel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.rel-exp,.exp-acts{display:flex;gap:6px}
.rel-filtro{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.rel-filtro div{flex:1;min-width:130px}
.rel-filtro label{margin:0 0 5px}
.ct-busca-form{display:flex;gap:8px;margin:10px 0}
.ct-busca-form input{flex:1;min-width:0}

/* ---------- Pedir material: importar de foto/arquivo ---------- */
.rm-import{margin:6px 0 14px;border:1px dashed var(--line);border-radius:var(--r);padding:10px 12px;background:var(--surface-2)}
.rm-import summary{cursor:pointer;font-weight:500;color:var(--primary)}
.rm-import-btns{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.btn.ghost{background:transparent;border:1px solid var(--primary);color:var(--primary)}
.btn.ghost:hover{background:var(--primary-soft)}
.impr{display:flex;gap:7px;align-items:center;margin-bottom:7px}
.impr .impr-qtd{max-width:78px;text-align:right}
.impr .impr-rm{background:var(--err-soft);color:var(--err);border:none}
.impr.sem-match .impr-busca{border-color:#d8b45a;background:var(--warn-soft)}
/* Pedido de cotação: chips de cabeçalho */
.cab-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.cab-chip{font-size:.8rem;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:4px 10px}
.cab-obs{margin-top:6px}
.reabrir-prazo{margin-top:8px}
.rp-box{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;padding:10px;border:1px dashed var(--line-2);border-radius:var(--r-sm);background:var(--warn-soft,#fff7e6)}
.rp-box label{font-size:.8rem;color:var(--mut)}
.rp-box input[type=date]{width:auto}
.cond-pag{display:flex;gap:8px}
.cond-pag select{flex:1}
/* aprovações necessárias (regra por valor) */
.aprov-req{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.aprov-req .ar-tit{font-weight:600}
.ar-chip{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 10px;font-weight:500;font-size:.8rem;color:var(--ink-2)}
.aprov-req small{flex-basis:100%;color:var(--mut)}
/* linha do tempo */
.timeline{position:relative;margin:8px 0 2px;padding-left:4px}
.tl-item{display:flex;gap:12px;align-items:flex-start;padding:0 0 16px 4px;position:relative}
.tl-item::before{content:"";position:absolute;left:16px;top:26px;bottom:-1px;width:2px;background:var(--line)}
.tl-item:last-child::before{display:none}
.tl-ic{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--primary);color:#fff;font-size:.76rem;z-index:1}
.tl-item:last-child .tl-ic{background:var(--primary)}
.tl-item.tl-rej .tl-ic{background:var(--err)}
.tl-item.tl-rej::before{background:var(--err);opacity:.4}
.tl-c{flex:1;min-width:0;padding-top:2px}
.tl-c b{font-weight:600}
.tl-d{color:var(--ink-2)}
.tl-meta{color:var(--mut);font-size:.78rem;margin-top:2px}
.tl-toggle{margin:6px 0}
.tl-toggle summary{cursor:pointer;color:var(--primary);font-weight:500;font-size:.86rem}
/* pré-visualização de NF-e */
.nfe-prev{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.nfe-pv{border:1px solid var(--line-2);border-radius:var(--r);padding:11px 13px;background:var(--surface)}
.nfe-pv.dup{opacity:.7}
.nfe-pv.erro{border-color:#f2cdc8}
.nfe-pv-h{font-weight:600;margin-bottom:6px}
.pv-flags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.pv-flag{font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--mut)}
.pv-flag.f-ok{background:var(--ok-soft);color:#1f6b41;border-color:#cfe8d8}
.pv-flag.f-no{background:var(--err-soft);color:var(--err);border-color:#f2cdc8}
.pv-flag.f-dup{background:var(--warn-soft);color:var(--warn);border-color:#eadcae}
.pv-flag.f-ia{background:var(--info-soft);color:var(--info);border-color:#d3e2f4}
.pv-flag.f-div{background:var(--err-soft);color:var(--err);border-color:#f2cdc8}
.nfe-pv .cmp td.r{text-align:right;white-space:nowrap}
/* editar/excluir fornecedor no comparativo */
.forn-blk{border:1px solid var(--line-2);border-radius:var(--r);padding:10px 12px;margin-bottom:8px;background:var(--surface)}
.forn-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.forn-edit,.forn-contato{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px}
.fe-item{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:5px 0}
.fe-item span{flex:1;min-width:0}
.fe-item .fe-preco{max-width:110px;text-align:right}
.fe-item .fe-desc-com{flex-basis:100%;font-size:.82rem;color:var(--mut-2);margin-top:2px}
.fe-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0}
@media(max-width:480px){.fe-cols{grid-template-columns:1fr}}
.fe-cols label{display:flex;flex-direction:column;font-size:.78rem;color:var(--mut);gap:3px}
.fe-mot-lbl{display:flex;flex-direction:column;font-size:.78rem;color:var(--mut);gap:3px;margin:8px 0}
.mp-cab{margin:10px 0 16px;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.mpc-row{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line-2)}
.mpc-row:last-child{border-bottom:none}
.mpc-row span{color:var(--mut)}
.mpc-row.venceu b{color:var(--err)}
.mp-ident{margin:0 0 14px;border:1px solid var(--primary);border-radius:var(--r);overflow:hidden;background:var(--ok-soft, #eaf6ee)}
.mpi-row{display:flex;justify-content:space-between;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line-2)}
.mpi-row:last-child{border-bottom:none}
.mpi-row span{color:var(--mut)}
.mp-desc-com{flex-basis:100%;font-size:.86rem;color:var(--ink-2);margin-top:4px}
.mp-contato{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface-2)}
.mp-contato p{margin:0 0 8px}
/* Cotações & comparativos: grade — cards de altura idêntica (stretch + rodapé no fim)
   e um leve tom de fundo conforme o estágio (ver .mapa-row[data-status] mais abaixo). */
.mapas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;align-items:stretch}
.mapas-grid > .req{margin:0;display:flex;flex-direction:column}
.mapas-grid .mapa-row .mapa-acts{margin-top:auto;padding-top:8px}
/* /respostas usa o mesmo grid: prende o botão no rodapé para todos alinharem */
.mapas-grid > .req > .btn:last-child{margin-top:auto}
/* título com até 2 linhas: o cabeçalho mede igual em todos os cards */
.mapa-row .req-head{align-items:flex-start;min-height:2.7em}
.mapa-row .req-head b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.32}
.mapa-row .req-head .status{flex:none}
.item-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:7px}
.item-row .it-ref{flex-basis:100%;font-size:.78rem;color:var(--mut);margin:-2px 0 4px}
.item-row .it-ref:empty{display:none}
.item-row .it-ref b{color:var(--ok)}
/* saldo do almoxarifado na linha do item (01/10/2026): mesma faixa do preço de referência, cor
   própria para não se confundir com ele — um fala de preço, o outro de quantidade que já temos */
.item-row .it-estoque{flex-basis:100%;font-size:.78rem;color:var(--mut);margin:-2px 0 4px}
.item-row .it-estoque:empty{display:none}
.item-row .it-estoque b{color:var(--txt)}
.item-row .it-desc{flex:1}
.item-row .it-qtd{max-width:84px}.item-row .it-und{max-width:76px}
.item-row .it-marca{flex:1;min-width:160px}
.item-row .rm,.forn-opt .rm{background:var(--err-soft);color:var(--err);border:none;border-radius:var(--r-sm);padding:0 13px;cursor:pointer;font-weight:600;min-height:42px}
.mp-item{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line-2)}
.mp-d{flex:1}.mp-d small{display:block;color:var(--mut)}
.mp-preco{max-width:140px}
.badge-wait{background:var(--warn-soft);color:var(--warn);border:1px solid #eadcae;border-radius:999px;padding:6px 12px;display:inline-block;font-weight:500;font-size:.84rem}

/* ---------- Páginas públicas ---------- */
body.pub main{padding-bottom:calc(28px + env(safe-area-inset-bottom))}

/* ---------- Desktop ---------- */
@media (min-width:760px){
  .kpi b{font-size:1.55rem}
}
@media (max-width:430px){
  main{padding-left:12px;padding-right:12px}
  .li b{font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Impressão ---------- */
@media print{.top,.sb,.ap-bar,.help,.no-print,.rel-exp,.exp-acts,.voltar{display:none!important}body{background:#fff}.ap,.ap-main{display:block}main,.ap-main main{padding:0;max-width:none}.card{box-shadow:none;break-inside:avoid}}

/* estoque: validade & alertas */
.pt-min,.pt-val{max-width:120px;min-height:38px;padding:7px 10px;font-size:.85rem}
.row-alerta{background:var(--err-soft)}
.row-venc{background:var(--warn-soft)}
.alert-card.a-rep{border-color:#f2cdc8}
.alert-card.a-venc{border-color:#eadcae}
.venc-list{display:flex;flex-direction:column;gap:8px}
.venc-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 13px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface)}
.venc-i{display:flex;flex-direction:column;min-width:0}
.venc-i b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.venc-i small{color:var(--mut);font-size:.78rem}
.venc-pill{font-size:.72rem;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap}
.v-vencido{border-color:#f2cdc8}.v-critico{border-color:#f2cdc8}.v-alerta{border-color:#eadcae}.v-atencao{border-color:#eee4c0}
.p-vencido{background:var(--err);color:#fff}
.p-critico{background:var(--err-soft);color:var(--err)}
.p-alerta{background:var(--warn-soft);color:var(--warn)}
.p-atencao{background:var(--warn-soft);color:#8a6d1f}

/* ---------- Cockpit (cabeçalho da visão geral) ---------- */
.cockpit-hero{background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r);padding:clamp(16px,4vw,22px);margin-bottom:14px}
.cockpit-hero h1{color:var(--ink);margin:0}
.cockpit-hero .muted{color:var(--mut)}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px;position:relative;z-index:1}
.quick a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 4px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);color:var(--ink-2);text-decoration:none;font-size:.74rem;font-weight:500;transition:border-color .15s}
.quick a:hover{border-color:var(--primary);color:var(--primary)}
.quick a span{font-size:.74rem}
.pend-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line-2);border-radius:var(--r-sm);margin-bottom:8px;text-decoration:none;color:var(--ink);background:var(--surface);transition:border-color .15s}
.pend-row:hover{border-color:var(--primary)}
.pend-row small{display:block;color:var(--mut);font-size:.78rem}
.pend-val{font-weight:600;white-space:nowrap;color:var(--primary)}
.pl-row{display:flex;gap:9px;flex-wrap:wrap}
.pl-chip{flex:1;min-width:84px;text-align:center;border:1px solid var(--line-2);border-left:3px solid var(--c);border-radius:var(--r-sm);padding:10px 8px;background:var(--surface)}
.pl-chip b{display:block;font-size:1.3rem;font-weight:600;color:var(--c)}
.pl-chip span{font-size:.72rem;color:var(--mut)}

/* gastos: atalhos de período */
.chips-range{display:flex;gap:7px;flex-wrap:wrap;margin-top:6px}
.chip-range{font-size:.8rem;font-weight:500;padding:7px 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);text-decoration:none;transition:border-color .15s}
.chip-range:hover{border-color:var(--line-in)}
.chip-range.on{background:var(--primary);color:#fff;border-color:var(--primary)}

/* importar: dropzone */
.dropzone{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;cursor:pointer;
  border:1px dashed var(--line-in);border-radius:var(--r);padding:24px 16px;background:var(--surface-2);transition:border-color .15s,background .15s;margin:0}
.dropzone:hover{border-color:var(--primary);background:var(--primary-soft)}
.dropzone.over{border-color:var(--primary);background:var(--primary-soft)}
.dropzone.has{border-style:solid;border-color:var(--primary);background:var(--primary-soft)}
.dropzone .dz-ic{font-size:1.6rem}
.dropzone b{font-weight:600}
.dropzone small{color:var(--mut)}
.dz-name{font-weight:600;color:var(--primary);margin-top:4px}

/* pipeline clicável */
.pl-chip{text-decoration:none;display:block;transition:border-color .15s}
.pl-chip:hover{border-color:var(--line-in)}

/* ---------- Header actions / conta ---------- */
.topacts{display:flex;align-items:center;gap:8px}
.icon-btn{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);width:36px;height:36px;font-size:1rem;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;transition:border-color .15s;color:var(--ink-2)}
.icon-btn:hover{border-color:var(--line-in)}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;background:var(--primary);color:#fff;font-weight:600;font-size:.88rem}
.acct{position:relative}
.acct summary{list-style:none;cursor:pointer}
.acct summary::-webkit-details-marker{display:none}
.acct-menu{position:absolute;right:0;top:42px;min-width:210px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-pop);padding:6px;z-index:50}
.acct-hd{padding:9px 11px;border-bottom:1px solid var(--line-2);margin-bottom:5px}
.acct-hd small{display:block;color:var(--mut)}
.acct-it{display:block;padding:10px 11px;border-radius:5px;text-decoration:none;color:var(--ink);font-weight:500}
.acct-it:hover{background:var(--surface-2)}
.login-logo{font-size:2.4rem}

/* usuários */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.form-grid .form-wide{grid-column:1/-1}
.testar-box{margin:-2px 0 12px;padding:11px 13px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm)}
.testar-box p{margin:0 0 8px}
.ped-itens{margin:8px 0 4px}
.ped-item{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line-2)}
.ped-item:last-child{border-bottom:none}
.ped-item b{white-space:nowrap}
/* pedido entregue */
.entregue-badge{display:inline-flex;align-items:center;gap:5px;background:var(--ok-soft);color:#1f6b41;font-weight:600;padding:4px 10px;border-radius:999px;font-size:.8rem}
.entregue-badge svg{width:14px;height:14px;stroke-width:2.6}
.req.entregue{border-left:3px solid var(--ok)}
.req.entregue .ped-item{opacity:.78}
.ped-check{width:14px;height:14px;color:var(--ok);vertical-align:-2px;stroke-width:2.6}
.req.recusado{opacity:.72;border-left:3px solid #d8a7a0}
[data-theme="dark"] .entregue-badge{background:#12291b;color:#7fce9f}
.ia-out{margin-top:10px}
/* Colar contato com IA */
#cia-texto{width:100%;margin-bottom:10px}
.cia-res{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.cia-card{border:1px solid var(--line-2);border-radius:var(--r);padding:13px;background:var(--surface-2)}
.cia-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.cia-grid label{display:flex;flex-direction:column;font-size:.74rem;color:var(--mut);gap:3px}
.cia-forn{margin-top:10px;position:relative}
.cia-sel{font-size:.92rem;margin-bottom:6px}
.cia-cands{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.cia-pick{cursor:pointer}
.cia-ok{margin-left:10px;color:var(--ok);font-weight:600}
.cia-wabadge:not(:empty){margin-top:6px}
/* selo provável WhatsApp / inválido */
.wa-badge{display:inline-block;font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:999px}
.wa-badge.wa-ok{background:var(--ok-soft);color:#1f6b41}
.wa-badge.wa-no{background:var(--err-soft);color:var(--err)}
.contato-row .row-wabadge{grid-column:1/3}
.contato-row .row-wabadge:empty{display:none}
[data-theme="dark"] .wa-badge.wa-ok{background:#12291b;color:#7fce9f}
[data-theme="dark"] .wa-badge.wa-no{background:#331715;color:#f0a29a}
/* verificação de WhatsApp */
.contato-row .row-verif{grid-column:1/3;display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.vf{font-size:.76rem;font-weight:600;padding:2px 8px;border-radius:999px}
.vf-ok{background:var(--ok-soft);color:#1f6b41}
.vf-nao{background:var(--err-soft);color:var(--err)}
.vf-pend{background:var(--warn-soft);color:var(--warn)}
.vf-sem{background:var(--surface-2);color:var(--mut);border:1px solid var(--line-2)}
.vf-btn{cursor:pointer}
.vf-btn.vf-sim{background:var(--ok-soft);color:#1f6b41;border-color:#a9d8bb}
.vf-btn.vf-no{background:var(--err-soft);color:var(--err);border-color:#eeb4ad}
.vtabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.vtab{cursor:pointer;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:8px 14px;min-height:38px;display:inline-flex;align-items:center;font-weight:500;font-size:.85rem;color:var(--ink)}
.vtab b{margin-left:3px}
.vtab.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.vtab.v-pend.on{background:#a06a12;border-color:#a06a12}
.vtab.v-ok.on{background:var(--ok);border-color:var(--ok)}
.vtab.v-nao.on{background:var(--err);border-color:var(--err)}
.vtab.v-com.on{background:var(--info);border-color:var(--info)}
.vtab.v-sem.on{background:#64707d;border-color:#64707d}
.vbar{display:flex;align-items:center;gap:10px;margin:6px 0 4px}
.vbar-track{flex:1;height:8px;background:var(--line-2);border-radius:4px;overflow:hidden}
.vbar-fill{display:block;height:100%;background:var(--ok);border-radius:4px;transition:width .3s}
.vbar small{color:var(--mut);white-space:nowrap}
[data-theme="dark"] .vf-ok{background:#12291b;color:#7fce9f}
[data-theme="dark"] .vf-nao{background:#331715;color:#f0a29a}
[data-theme="dark"] .vf-pend{background:#33290e;color:#e3c56b}
.ia-card{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r);padding:14px 16px;line-height:1.55}
.ia-card ul{margin:6px 0;padding-left:20px}
.ia-card li{margin:3px 0}
/* subtítulo do grupo concluído */
.ped-sub{display:flex;align-items:center;gap:7px;margin:22px 0 10px;font-size:.95rem;color:var(--ok);border-top:1px dashed var(--line-2);padding-top:16px}
.ped-sub-ic{width:16px;height:16px;stroke-width:2.6}
.user-list{display:flex;flex-direction:column;gap:10px}
.user-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:12px;background:var(--surface)}
.user-id{display:flex;align-items:center;gap:11px}
.user-id small{display:block;color:var(--mut);font-size:.78rem}
.user-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.user-ctl .u-papel{min-height:38px;width:auto}
.switch{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--mut)}
.switch input{width:17px;height:17px;min-height:auto;accent-color:var(--primary)}
.perm-help summary{cursor:pointer;font-weight:500;color:var(--primary)}
.perm-list{margin:8px 0 0;padding-left:18px;color:var(--ink-2);font-size:.9rem;line-height:1.7}

/* ---------- DESKTOP: sidebar + tela cheia ---------- */
@media (min-width:1024px){
  .ges-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}
/* (.shell e a regra de largura em "main" cru eram do layout antigo, pré .ap/.ap-main — a
   página real usa .ap-main main; a progressão de largura para telas grandes está lá embaixo,
   junto da regra base, pra vencer a cascata corretamente.) */

/* ---------- TEMA ESCURO ---------- */
[data-theme="dark"]{
  --primary:#3e8a67; --primary-hover:#4d9f79; --primary-soft:rgba(62,138,103,.16);
  --bg:#111613; --surface:#181f1b; --surface-2:#1e2621;
  --ink:#e8ece9; --ink-2:#c2cbc5; --mut:#8d998f; --mut-2:#67736a;
  --line:#2c352f; --line-2:#242d27; --line-in:#3a453e;
  --ok:#4da777; --ok-soft:rgba(77,167,119,.14);
  --warn:#d0a13e; --warn-soft:rgba(208,161,62,.13);
  --err:#e07b6e; --err-soft:rgba(224,123,110,.14);
  --info:#6f9fd8; --info-soft:rgba(111,159,216,.14);
  --accent-d:var(--primary-hover);
  --brass:#d0a13e; --brass-2:#ddb45f; --brass-soft:var(--warn-soft);
  --gold:#d0a13e; --gold-soft:var(--warn-soft);
  --sh-1:0 1px 2px rgba(0,0,0,.3); --sh-2:0 2px 10px rgba(0,0,0,.35); --sh-pop:0 14px 40px rgba(0,0,0,.5);
  --ring:0 0 0 3px rgba(62,138,103,.25);
}
[data-theme="dark"] body{background:var(--bg)}
[data-theme="dark"] .top{background:var(--surface);border-bottom-color:var(--line-2)}
[data-theme="dark"] .icon-btn,[data-theme="dark"] .sair{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .empty{background:var(--surface-2)}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:var(--mut-2)}
[data-theme="dark"] .mini{border-color:var(--line)}
[data-theme="dark"] :is(input,select,textarea,.sugestoes,.mini,.forn-opt,.venc-row,.pl-chip,.pend-row,.user-row,.link-box input,.contato-row,.req,.kpi,.ges-card){background:var(--surface);color:var(--ink)}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{border-color:var(--line-in)}
[data-theme="dark"] .urg{background:var(--surface-2)}
[data-theme="dark"] .urg button.on{background:var(--surface)}
[data-theme="dark"] .bl{color:var(--ink-2)}
[data-theme="dark"] .bt{background:var(--surface-2)}
[data-theme="dark"] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238d998f' d='M1 1l5 5 5-5'/%3E%3C/svg%3E")}
[data-theme="dark"] table.cmp td.best{color:#7fce9f}
[data-theme="dark"] .insight{color:#a8c4e6}
[data-theme="dark"] .tot-compra{color:var(--warn)}
[data-theme="dark"] table.cmp td.best-soft{color:#e3c56b}

/* importar: linha de preview com preço */
.imp-row,.imp-head{display:grid;grid-template-columns:1fr 64px 50px 96px 104px;gap:6px;margin-bottom:6px;align-items:center}
.imp-head{margin-bottom:4px;font-size:.7rem;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:0 2px}
.it-total{background:var(--surface-2);font-weight:600;text-align:right}
@media (max-width:560px){.imp-head{display:none}.imp-row{grid-template-columns:1fr 1fr;gap:5px}}

/* mapa: melhor proposta + coluna recomendada */
.card.melhor{border:1px solid var(--primary);background:var(--surface);position:relative;overflow:hidden}
.melhor-badge{display:inline-block;background:var(--primary);color:#fff;font-weight:600;font-size:.72rem;padding:4px 10px;border-radius:999px;letter-spacing:.02em;margin-bottom:6px}
.card.melhor h2{margin:2px 0 12px}
.melhor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.melhor-grid div{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:12px;text-align:center}
.melhor-grid b{display:block;font-size:1.08rem;font-weight:600;line-height:1.2}
.melhor-grid span{font-size:.74rem;color:var(--mut)}
.melhor-grid .eco b{color:var(--ok)}
table.cmp td.rec-col{background:var(--primary-soft);font-weight:600;color:var(--ink)}
table.cmp tr.hdr td.rec-col{background:var(--primary);color:#fff}

/* importar: cartões de proposta (multi-fornecedor) */
.prop-card{border:1px solid var(--line-2);border-radius:var(--r-sm);padding:14px;margin:12px 0;background:var(--surface-2)}
.prop-card .prop-nome{font-weight:600}
.prop-rows{margin-top:6px}

/* ranking de orçamentos */
.rk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.rk-grid .rk-row{margin-bottom:0}
@media(max-width:700px){.rk-grid{grid-template-columns:1fr}}
.rk-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);margin-bottom:8px;background:var(--surface)}
.rk-row.rk-1{border-color:var(--primary);background:var(--primary-soft)}
.rk-pos{font-size:1rem;min-width:34px;text-align:center;font-weight:600;color:var(--mut)}
.rk-row.rk-1 .rk-pos{color:var(--primary)}
.rk-nome{flex:1;display:flex;flex-direction:column;min-width:0}
.rk-nome b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-nome small{color:var(--mut);font-size:.78rem}
.rk-val{text-align:right;font-weight:600;white-space:nowrap}
.rk-val small{display:block;font-weight:500;font-size:.72rem}
.rk-best{color:var(--ok)}
.rk-delta{color:var(--err)}
.rk-parcial{background:var(--warn-soft);color:var(--warn);font-size:.66rem;font-weight:600;padding:2px 7px;border-radius:999px;white-space:nowrap;margin-left:6px}
.ri-row{padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r);margin-bottom:10px;background:var(--surface);transition:border-color .15s}
.ri-row.ri-1{border-color:var(--primary);background:var(--primary-soft)}
.ri-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.ri-head:has(+ .ri-body.hidden){margin-bottom:0}
.ri-toggle{cursor:pointer;user-select:none}
.ri-pos{font-size:1.05rem;min-width:26px;text-align:center;font-weight:700;color:var(--mut-2)}
.ri-row.ri-1 .ri-pos{color:var(--primary)}
.ri-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.ri-badge{background:var(--primary);color:#fff;font-size:.64rem;font-weight:700;padding:3px 10px;border-radius:999px;letter-spacing:.02em;white-space:nowrap;text-transform:uppercase}
.ri-warn-dot{font-size:.85rem}
.ri-chevron{color:var(--mut-2);font-size:.8rem;width:14px;text-align:center}
.ri-score{font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums;color:var(--primary);white-space:nowrap}
.ri-score small{font-weight:500;font-size:.68rem;color:var(--mut);margin-left:2px}
.ri-detalhe{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:9px 18px}
.ri-bar{display:grid;grid-template-columns:auto 1fr 24px;align-items:center;gap:8px;font-size:.74rem;color:var(--mut)}
.ri-lbl small{color:var(--mut-2);font-weight:400;margin-left:1px}
.ri-track{height:6px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.ri-fill{display:block;height:100%;background:var(--primary);border-radius:4px}
.ri-bar .ri-pct{text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ri-aviso{background:var(--warn-soft);color:var(--warn);font-size:.74rem;font-weight:600;padding:6px 10px;border-radius:var(--r-sm);margin:10px 0 0}
.ri-bar.ri-alta .ri-fill{background:var(--ok)}
.ri-bar.ri-media .ri-fill{background:var(--warn)}
.ri-bar.ri-baixa .ri-fill{background:var(--err)}
[data-theme="dark"] table.cmp td.rec-col{color:var(--ink)}

/* kpi clicável (cockpit) */
a.kpi{text-decoration:none;color:inherit;display:block;transition:border-color .15s}
a.kpi:hover{border-color:var(--primary)}

/* ranking: botão escolher */
.rk-escolher{flex:none;background:var(--primary);color:#fff;border:none}
.rk-escolher:hover{background:var(--primary-hover)}

/* biblioteca de orçamentos */
.orc-card{display:flex;align-items:center;gap:12px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:12px;margin-bottom:8px;cursor:pointer;background:var(--surface)}
.orc-card:has(.orc-cb:checked){border-color:var(--primary);background:var(--primary-soft)}
.orc-cb{width:19px;height:19px;min-height:auto;flex:none;accent-color:var(--primary)}
.orc-body{flex:1;min-width:0}
.orc-top{display:flex;justify-content:space-between;gap:8px}
.orc-top b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orc-tot{font-weight:600;color:var(--primary);white-space:nowrap}
.orc-barra{position:fixed;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(80px + env(safe-area-inset-bottom));max-width:680px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--primary);border-radius:var(--r);padding:12px 16px;box-shadow:var(--sh-pop);z-index:35}
@media(min-width:1024px){.orc-barra{bottom:24px;left:260px;right:40px}}

/* agenda de e-mails */
.ag-lista{display:flex;flex-direction:column;gap:10px}
.ag-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:12px;background:var(--surface)}
.ag-info{flex:1;min-width:160px}
.ag-info small{display:block;color:var(--mut);font-size:.78rem}
.ag-pick{position:relative;flex:1;min-width:220px}
.ag-sug{position:absolute;left:0;right:0;top:100%;z-index:20}
.ag-ignorar{background:var(--surface-2);border:none}

/* cotações multi-item: ações */
.mapa-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}

/* contatos: destaque do que falta */
.contato-row.falta-email input[name=email]{border-color:#d8b45a;background:var(--warn-soft)}
.contato-row.falta-tel input[name=whatsapp]{border-color:#d8b45a;background:var(--warn-soft)}

/* preço de referência / alerta */
.ref-cel{color:var(--mut);font-weight:500}
.ref-alerta{background:var(--warn-soft);color:var(--warn);font-size:.7rem;font-weight:600;padding:2px 7px;border-radius:999px;white-space:nowrap}

/* marca / logo */
.brand{align-items:center;gap:9px}
.brand small{color:var(--mut);font-weight:400}
.brand .logo{flex:none;display:block}
.login-logo{display:flex;justify-content:center;margin-bottom:8px}
.brand-tx{display:flex;flex-direction:column;line-height:1.04;font-size:1rem}
.brand-tx small{font-size:.7rem}

/* ---------- Anomalias de compras ---------- */
.anom-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid var(--line-2);border-left-width:3px;border-radius:var(--r-sm);margin-top:8px;background:var(--surface)}
.anom-row.sev-alta{border-left-color:var(--err)}
.anom-row.sev-media{border-left-color:var(--warn)}
.anom-row.sev-baixa{border-left-color:var(--info)}
.anom-main{min-width:0}
.anom-main b{display:block;font-weight:600}
.anom-main small{color:var(--mut);font-size:.8rem}
.anom-val{white-space:nowrap;font-weight:600}
.anom-pct{font-size:.72rem;font-weight:600;color:var(--err);background:var(--err-soft);padding:2px 7px;border-radius:999px;font-style:normal;margin-left:4px}

/* ---------- Ícones Lucide ---------- */
.ic{display:inline-block;vertical-align:-.15em;width:1.1em;height:1.1em;flex:none}
.quick a .ic{width:22px;height:22px}
.ges-card .ic.ges-ic{width:22px;height:22px;margin-bottom:6px;color:var(--primary)}
.icon-btn .ic{width:18px;height:18px}
.acct-it .ic{width:17px;height:17px;margin-right:8px;color:var(--mut);vertical-align:-.22em}
/* alterna lua/sol conforme o tema */
.ic-sun{display:none}
[data-theme="dark"] .ic-moon{display:none}
[data-theme="dark"] .ic-sun{display:inline-block}

/* ---------- Logo oficial do clube ---------- */
.brand-logo{width:32px;height:32px;object-fit:contain;flex:none;display:block}
.login-oficial{display:flex;justify-content:center;margin-bottom:14px}
.login-oficial img{width:min(220px,70%);height:auto}
[data-theme="dark"] .login-oficial{background:#fff;border-radius:var(--r);padding:14px 18px}

/* ---------- Requisição de material / separação / saldo ---------- */
.rm-add{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.rm-lista{display:flex;flex-direction:column;gap:7px;margin:10px 0}
.rm-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2)}
.sep-card .req-foot{color:var(--primary);font-weight:500}
.sep-item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.sep-item:last-child{border-bottom:none}
.sep-d small{display:block;color:var(--mut);font-size:.8rem}
.sep-qtd{max-width:110px;text-align:right}
.sep-qtd-ro{color:var(--mut);font-size:.85rem;white-space:nowrap}
.sep-estoque{flex-basis:100%;display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:.85rem;color:var(--mut);background:var(--surface-2);padding:8px 10px;border-radius:var(--r-sm)}
.sep-estoque .sep-saldo-in{max-width:90px}
.sep-falta{font-size:.78rem}
.saldo-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.saldo-row.baixo .saldo-d b{color:var(--err)}
.saldo-d{flex:1;min-width:0}
.saldo-in{max-width:110px;text-align:right}
.mv-out{color:var(--err);font-weight:600}
.mv-in{color:var(--ok);font-weight:600}

/* ---------- Separação: fila em cards ---------- */
.sep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.sep-card{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line-2);border-left:3px solid var(--primary);border-radius:var(--r-sm);padding:13px 14px;text-decoration:none;color:var(--ink);transition:border-color .15s}
.sep-card:hover{border-color:var(--primary)}
.sep-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sep-card-top b{font-weight:600}
.sep-count{font-size:.72rem;font-weight:600;color:var(--primary);background:var(--primary-soft);padding:2px 8px;border-radius:999px;white-space:nowrap}
.sep-peek{font-size:.82rem;color:var(--mut);line-height:1.35}
.sep-card-foot{display:flex;align-items:center;justify-content:space-between;font-size:.76rem;color:var(--mut);margin-top:2px}
.sep-go{display:inline-flex;align-items:center;gap:2px;color:var(--primary);font-weight:600}
.sep-go .ic{width:14px;height:14px}
.sl-tag{font-size:.68rem;font-weight:600;padding:1px 7px;border-radius:999px;margin-left:6px;white-space:nowrap}
.t-zero{background:var(--err-soft);color:var(--err)}
.t-baixo{background:var(--warn-soft);color:var(--warn)}
.saldo-row.zero .saldo-in{border-color:#d8b45a;background:var(--warn-soft)}

/* ============ GRADE DE CARDS (padrão do projeto) ============
   Vale para toda tela de lista: /minhas, /pedidos, /auditoria, /comprador,
   /modelos, /recorrentes, /notas, /aprovar-setor.
   - stretch iguala a altura dos cards na linha;
   - o card vira coluna flex e o rodapé (botão, .req-foot, .emp-acoes) vai para o fim,
     então as ações alinham entre os cards;
   - min-width:0 permite a trilha 1fr encolher (sem isso a grade transborda na horizontal);
   - título e valores longos param em 2 linhas, com o texto inteiro no title.
   O card pode ser .req ou .emp-card — as duas classes existem no projeto. */
.meus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}
.meus-grid .ped-sub,.meus-grid .empty{grid-column:1/-1}
.meus-grid > :is(.req,.emp-card){margin:0;display:flex;flex-direction:column;min-width:0}
/* line-height e min-height casados => 1 linha ou 2 linhas ocupam exatamente o mesmo espaço */
.meus-grid > :is(.req,.emp-card) > h3,.aprov-grid > .emp-card > h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;min-height:2.6em}
.meus-grid > :is(.req,.emp-card) > :is(.btn,.req-foot):last-child{margin-top:auto}
.meus-grid > :is(.req,.emp-card) > :is(.emp-acoes,.mapa-acts){margin-top:auto}
/* valores longos (razão social, lista de itens) param em 2 linhas — o texto inteiro
   fica no title. Sem isso um fornecedor de 4 linhas descompassa o card inteiro. */
.meus-grid > :is(.req,.emp-card) > .li > b,.aprov-grid .req-resumo .li > b{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0;
}
.meus-grid > :is(.req,.emp-card) > .li > span,.aprov-grid .req-resumo .li > span{flex:none}
/* .li-2l reserva SEMPRE 2 linhas: é o que faz todos os cards fecharem na mesma altura */
.li-2l > b{min-height:2.64em;line-height:1.32}
/* fila do comprador: justificativa com 2 linhas fixas (mostra "sem justificativa" em
   tom apagado quando não há), para os cards fecharem na mesma altura */
.meus-grid > :is(.req,.emp-card) > .just{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  line-height:1.35;min-height:4.15em;   /* 2 linhas + o padding (box-sizing:border-box) */
}
.meus-grid > :is(.req,.emp-card) > .just-vazia{color:var(--mut-2);font-style:normal;border-left-color:var(--line-2)}
/* Cards intercalados (zebra): a cor indica POSIÇÃO na grade, NÃO status. Tom levíssimo
   do verde da casa, nos dois temas. Ativa com a classe .zebra-grid no container. */
.zebra-grid > :is(.req,.emp-card,.sep-card):nth-child(even){
  background:color-mix(in srgb, var(--primary) 4%, var(--surface));
  border-color:color-mix(in srgb, var(--primary) 12%, var(--line-2));
}
/* cabeçalho: número/data nunca quebram; onde há vários chips reservamos 2 linhas,
   senão um card com 2 chips fica mais alto que os demais */
.meus-grid > :is(.req,.emp-card) > .req-head,.aprov-grid > .emp-card > .req-head{align-items:flex-start;flex-wrap:wrap;min-height:3.6em}
/* /separacao: a prévia dos itens ocupa sempre 2 linhas, senão um card com prévia
   curta fica mais baixo que os demais */
.sep-grid > .sep-card > .sep-peek{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  line-height:1.35;min-height:2.7em;
}
/* nome do solicitante e o rodapé (setor · data) podem ir a 2 linhas: reservamos */
.sep-grid > .sep-card > .sep-card-top{min-height:2.9em;align-items:flex-start}
/* /auditoria pode ter 3 selos (situação + ⚠ justificada + 🔀 dividida), que em coluna
   estreita ocupam 3 linhas: reservamos as 3 para não desalinhar. Preferi a folga a
   encurtar rótulos de auditoria, que precisam ser legíveis sem passar o mouse. */
.aud-grid > .req > .req-head{min-height:5.1em}
/* /respostas: o cabeçalho é a RAZÃO SOCIAL do fornecedor. Em coluna estreita ia a 3
   linhas; alargar a coluna faz o nome caber em 2 e evita reservar espaço vazio em
   todos os cards. Mesma escolha da fila do comprador. */
.meus-grid.resp-grid,.main-largo .meus-grid.resp-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.resp-grid > .req > .req-head{min-height:5.4em}   /* razão social + selo: até 3 linhas */
/* Fila do comprador: cards mais largos que as outras grades. Os rótulos são longos
   ("Fornecedor sugerido") e o valor fica ao lado — com 5/6 colunas sobrava uma faixa
   estreita e o texto quebrava feio. Aqui a coluna manda o número de colunas. */
.meus-grid.fila-grid,.main-largo .meus-grid.fila-grid{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.meus-grid > .req > .req-head .status{white-space:nowrap}
@media(max-width:1200px){.meus-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.meus-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.meus-grid{grid-template-columns:1fr}}

/* Avisos do almoxarife */
.alert-card{border-left:3px solid var(--err)}
.alert-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-2)}
.alert-row:last-child{border-bottom:0}
.impr.estoque-zero{background:var(--err-soft);border-radius:var(--r-sm);padding:4px 6px}
.impr-nota{display:block;margin-top:3px;font-size:.8rem}
.impr-nota.erro{color:var(--err)}

/* Cards em destaque na Gestão */
.ges-card.ges-feat{background:var(--surface);border:1px solid var(--primary)}
.ges-card.ges-feat .ges-ic{color:var(--primary)}
.ges-card.ges-feat b{color:var(--primary)}

/* Cotação pública: qtd em destaque + total ao vivo */
.mp-qtd-chip{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink-2);font-size:.8rem;font-weight:600;white-space:nowrap}
.mp-vals{display:flex;align-items:center;gap:10px;flex-shrink:0}
.mp-preco{max-width:120px}
.mp-total{font-weight:600;color:var(--primary);white-space:nowrap;min-width:84px;text-align:right}
.mp-item{flex-wrap:wrap}
.mp-obs{flex-basis:100%;font-size:.86rem;min-height:38px;color:var(--ink-2)}
.mp-obs:disabled,.mp-preco:disabled{opacity:.65;cursor:not-allowed}
.mp-lock{font-weight:500}
/* Observação do fornecedor no comparativo */
.cmp-obs{font-size:.78rem;font-weight:400;color:var(--mut);white-space:normal;max-width:230px;margin-top:2px}
.cmp-desc-com{font-size:.78rem;font-weight:400;font-style:italic;color:var(--mut-2);white-space:normal;max-width:230px;margin-top:2px}

/* Assistente de IA */
.ia-ask{display:flex;gap:8px;margin:8px 0}
.ia-ask input{flex:1}

/* Selo de fornecedor externo (fora do ERP) */
.forn-ext-tag{display:inline-block;padding:0 6px;border-radius:999px;background:var(--warn-soft);color:var(--warn);font-size:.7rem;font-weight:600}

/* Assinaturas (multi-alçada) na aprovação do mapa */
/* seção "Pedido de compra" no final da página do mapa aprovado — 1 card por pedido */
.pe-lista{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.pe-item{border:1px solid var(--line-2);border-radius:var(--r-sm);padding:12px 14px;background:var(--surface)}
.pe-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.pe-status-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pe-acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.pe-item .btn{width:auto;margin-top:0}
.assinaturas{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.assina{border:1px solid var(--line-2);border-radius:var(--r-sm);padding:10px 12px;background:var(--surface)}
.assina-link{border:1px solid var(--line-2);border-radius:var(--r-sm);padding:10px 12px;margin-top:8px}
.assina-link b{display:block;margin-bottom:6px}
.assina-ok{background:var(--ok-soft);border-color:#cfe8d8}
.assina-pend b{display:block;margin-bottom:6px}
.assina-form{display:flex;gap:8px;flex-wrap:wrap}
.assina-form input{flex:1;min-width:140px}
.assina-codigo{flex:0 0 auto!important;max-width:170px;letter-spacing:3px;text-align:center;font-weight:600}
#otp-dest{flex-basis:100%;font-size:.82rem}
.rj-area{margin-top:16px;border-top:1px solid var(--line-2);padding-top:12px}
.msg-ok{background:var(--ok-soft);color:#1f6b41;border:1px solid #cfe8d8}

/* ============================================================
   App shell — sidebar clara + header + ajuda
   ============================================================ */
.ap{display:flex;min-height:100dvh;width:100%}
.sb{position:sticky;top:0;height:100dvh;width:240px;flex:none;display:flex;flex-direction:column;
    background:var(--surface);color:var(--ink);border-right:1px solid var(--line-2);z-index:40}
.sb-brand{display:flex;align-items:center;gap:11px;padding:18px 18px 14px;text-decoration:none;color:inherit;border-bottom:1px solid var(--line-2)}
.sb-logo{width:38px;height:38px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.sb-logo img{width:28px;height:28px;object-fit:contain}
.sb-brand-tx{display:flex;flex-direction:column;line-height:1.1}
.sb-brand-tx .nm{font-weight:600;font-size:15px;color:var(--ink)}
.sb-brand-tx small{font-size:11px;color:var(--mut);margin-top:2px}
.sb-nav{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:1px;padding:10px 10px}
.sb-nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-sm);text-decoration:none;
    color:var(--ink-2);font-weight:500;font-size:.9rem;transition:background .12s,color .12s;position:relative}
.sb-nav a:hover{background:var(--surface-2);color:var(--ink)}
.sb-nav a.on{background:var(--primary-soft);color:var(--primary);font-weight:600}
.sb-nav a.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--primary)}
.sb-nav a .ic{width:18px;height:18px;flex:none}
.nav-label{flex:1;min-width:0}
.nav-badge{background:var(--primary);color:#fff;font-weight:600;font-size:.7rem;border-radius:999px;min-width:19px;height:19px;display:flex;align-items:center;justify-content:center;padding:0 6px}
.sb-user{display:flex;align-items:center;gap:10px;padding:13px 16px;border-top:1px solid var(--line-2);background:var(--surface-2)}
.sb-user .avatar{width:34px;height:34px;font-size:.92rem}
.sb-user-tx{min-width:0}
.sb-user-tx b{display:block;font-size:.86rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user-tx small{color:var(--mut);font-size:.74rem}

.ap-main{flex:1;min-width:0;display:flex;flex-direction:column}
.ap-bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:14px;
    min-height:58px;padding:8px clamp(16px,3vw,28px);
    background:var(--surface);border-bottom:1px solid var(--line-2)}
.ap-bar-l{min-width:0}
.crumb{font-size:.7rem;letter-spacing:.02em;color:var(--mut-2)}
.ap-title{font-weight:600;font-size:1.05rem;margin:1px 0 0;line-height:1.15;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
.ap-bar-r{display:flex;align-items:center;gap:8px;flex:none}
.ap-main main{max-width:1280px;width:100%;margin:0 auto;padding:20px clamp(16px,3vw,28px) 44px}
/* progressão de largura em telas grandes (restaura a intenção original, que tinha ficado
   morta num seletor "main" cru que não bate com o .ap-main atual — nunca disparava) */
@media(min-width:1440px){.ap-main main{max-width:1560px}}
/* páginas "largas" (ex.: comparativo de cotação) usam ainda mais da tela em monitores grandes —
   opt-in via layout($titulo,$corpo,$ativo,largo:true), classe .main-largo no <main> */
@media(min-width:1440px){.ap-main main.main-largo{max-width:1900px}}
@media(min-width:1900px){.ap-main main.main-largo{max-width:2300px}}
.icon-btn.bell{text-decoration:none;color:var(--ink-2)}
.bell{position:relative}

/* banner de ajuda por tela */
.help{display:flex;align-items:flex-start;gap:10px;background:var(--info-soft);border:1px solid #d3e2f4;color:#27528a;
    border-radius:var(--r-sm);padding:11px 13px;margin-bottom:16px;font-size:.88rem;line-height:1.45}
.help .ic{width:17px;height:17px;flex:none;color:var(--info);margin-top:2px}
[data-theme="dark"] .help{background:var(--info-soft);border-color:#1f3354;color:#a8c4e6}

/* avatar por papel (mesma cor institucional para todos) */
.avatar.r-requisitante,.avatar.r-comprador{background:var(--primary)}
.avatar.r-gestor{background:var(--primary)}.avatar.r-almoxarife{background:var(--primary)}.avatar.r-admin{background:#3e4c59}

/* MOBILE (≤860): sidebar vira barra de navegação inferior */
@media(max-width:860px){
  .sb{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;height:auto;flex-direction:row;
      border-right:none;border-top:1px solid var(--line-2);box-shadow:0 -2px 12px rgba(16,24,40,.06)}
  .sb-brand,.sb-user{display:none}
  .sb-nav{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:5px 6px calc(5px + env(safe-area-inset-bottom));gap:2px}
  .sb-nav a{flex:1 0 auto;min-width:60px;flex-direction:column;gap:3px;padding:7px 6px;justify-content:center;text-align:center;border-radius:var(--r-sm);font-size:10px}
  .sb-nav a.on::before{display:none}
  .sb-nav a .ic{width:20px;height:20px}
  .nav-label{flex:none;font-size:10px;line-height:1.1;white-space:nowrap}
  .nav-badge{position:absolute;top:2px;right:9px;transform:scale(.82)}
  .ap-main main{padding:14px 14px calc(86px + env(safe-area-inset-bottom))}
  .ap-bar{padding:8px 14px}
  .ap-title{font-size:1rem;max-width:52vw}
}

/* ---- Visão geral: métricas e colunas ---- */
.cockpit-hero .hero-in{position:relative;z-index:1}
.quick .q-primary{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}
.quick .q-primary:hover{background:var(--primary-hover);color:#fff}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.metric{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:15px 17px;text-decoration:none;color:inherit;display:block;transition:border-color .15s}
a.metric:hover{border-color:var(--primary)}
.m-ic{width:30px;height:30px;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--mc,var(--mut))}
.m-ic .ic{width:16px;height:16px}
.m-eyebrow{margin-top:10px;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);font-weight:600}
.m-val{font-weight:600;font-size:1.5rem;line-height:1.15;margin-top:4px;color:var(--ink);font-variant-numeric:tabular-nums}
.m-hint{color:var(--mut);font-size:.8rem;margin-top:3px}
.metric.alerta{border-color:#eadcae}.metric.alerta .m-val{color:var(--warn)}
.dash-2col{display:grid;grid-template-columns:2fr 1fr;gap:12px;align-items:start;margin-bottom:14px}
.dash-2col-even{grid-template-columns:1fr 1fr}
.dash-2col .card{margin-bottom:0}
@media(max-width:860px){.dash-2col,.dash-2col-even{grid-template-columns:1fr}}
.ia-promo{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:16px}
.ia-promo-h{font-weight:600;font-size:.98rem;display:flex;align-items:center;gap:8px;color:var(--ink)}
.ia-promo-h .ic{width:18px;height:18px;color:var(--primary)}
.ia-promo p{color:var(--mut);font-size:.88rem;line-height:1.5;margin:8px 0 14px}
/* botão dourado — ação que precisa se destacar do verde padrão (ex.: enviar pedido de compra ao fornecedor) */
.btn-gold{background:var(--warn);border-color:var(--warn);color:#fff}
.btn-gold:hover{background:#7a5510;border-color:#7a5510}
[data-theme="dark"] .btn-gold:hover{background:#e0b25a;border-color:#e0b25a}
[data-theme="dark"] .ia-promo{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
[data-theme="dark"] .ia-promo p{color:var(--mut)}
[data-theme="dark"] .ia-promo-h{color:var(--ink)}

/* ---- Wizard de Novo pedido (stepper) ---- */
.wizard{max-width:780px;margin-inline:auto}
.wz-stepper{display:flex;list-style:none;gap:4px;padding:0;margin:6px 0 22px}
.wz-stepper li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;color:var(--mut);font-size:.72rem;font-weight:500;text-align:center;cursor:pointer}
.wz-stepper li::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:var(--line-2)}
.wz-stepper li:first-child::before{display:none}
.wz-num{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line);font-weight:600;color:var(--mut);z-index:1;transition:.15s}
.wz-stepper li.done .wz-num{background:var(--primary);border-color:var(--primary);color:#fff}
.wz-stepper li.done::before{background:var(--primary)}
.wz-stepper li.cur .wz-num{background:var(--surface);border-color:var(--primary);color:var(--primary)}
.wz-stepper li.cur{color:var(--ink)}
@media(max-width:560px){.wz-stepper li{font-size:.62rem}.wz-num{width:25px;height:25px}}
.wz-step h2{margin-top:0}
.tipo-cards{display:grid;gap:12px;margin-top:8px}
.tipo-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;cursor:pointer;text-decoration:none;color:var(--ink);transition:border-color .15s;font:inherit}
.tipo-card:hover:not(.disabled){border-color:var(--primary)}
.tipo-card .ic{width:22px;height:22px;color:var(--primary);margin-bottom:2px}
.tipo-card b{font-weight:600;font-size:.95rem}
.tipo-card small{color:var(--mut)}
.tipo-card.disabled{opacity:.55;cursor:not-allowed}
.wz-nav{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
.wz-resumo{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:13px 15px;margin-bottom:8px}
.wz-itens{margin:4px 0}
.wz-fluxo{margin-top:12px;background:var(--primary-soft);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:10px 13px;color:var(--primary);font-weight:500;font-size:.88rem}

/* ---- Almoxarifado: abas com contador ---- */
.amox-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.amox-tab{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  border-radius:var(--r-sm);padding:8px 14px;min-height:38px;font:inherit;font-size:.86rem;font-weight:500;cursor:pointer;transition:border-color .15s}
.amox-tab:hover{border-color:var(--primary)}
.amox-tab b{font-weight:600;font-size:.76rem;background:var(--surface-2);color:var(--mut);border-radius:999px;min-width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.amox-tab.on{background:var(--primary);border-color:var(--primary);color:#fff}
.amox-tab.on b{background:rgba(255,255,255,.22);color:#fff}
[data-theme="dark"] .amox-tab.on{color:#fff}

/* ---- Scrim + Drawer + Modal ---- */
.scrim{position:fixed;inset:0;background:rgba(31,41,51,.4);opacity:0;transition:opacity .18s;z-index:80;pointer-events:none}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100dvh;width:min(420px,92vw);background:var(--surface);
  box-shadow:var(--sh-pop);z-index:90;transform:translateX(100%);transition:transform .2s ease-out;
  display:flex;flex-direction:column;gap:10px;padding:20px clamp(16px,4vw,22px);overflow:auto}
.drawer.on{transform:translateX(0)}
.drawer-h{display:flex;align-items:center;justify-content:space-between}
.drawer-h b{font-size:1.05rem;font-weight:600}
.drawer-ta{min-height:150px}
.drawer-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:auto;padding-top:8px}
.modal-wrap{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;pointer-events:none;transition:opacity .18s;background:rgba(31,41,51,.4)}
.modal-wrap.on{opacity:1;pointer-events:auto}
.modal{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh-pop);max-width:560px;width:100%;max-height:88dvh;overflow:auto;padding:20px}
.modal-wrap.on .modal{transform:none}

/* ---- Empréstimo de equipamento ---- */
.head-card{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.head-card h1{margin:0}
.kpis-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 4px}
.kpi-card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:13px;text-align:center}
.kpi-card b{display:block;font-size:1.4rem;font-weight:600;color:var(--primary)}
.kpi-card span{font-size:.72rem;color:var(--mut);text-transform:uppercase;letter-spacing:.03em}
.kpi-alerta{background:var(--err-soft);border-color:#f2cdc8}
.kpi-alerta b{color:var(--err)}
.emp-card h3{margin:.2rem 0 .5rem}
.emp-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.eqp-lista{display:flex;flex-direction:column;gap:8px}
.eqp-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:10px 12px;background:var(--surface)}
.eqp-row.eqp-off{opacity:.55}
.eqp-acoes{display:flex;gap:8px;flex-wrap:wrap}
.chip-inline{display:inline-block;background:var(--primary-soft);color:var(--primary);border-radius:999px;padding:1px 9px;font-size:.72rem;font-weight:600}
.tl-details{margin-top:10px}
.tl-details>summary{cursor:pointer;color:var(--primary);font-weight:500;font-size:.85rem;min-height:40px;display:flex;align-items:center}
@media(max-width:560px){.kpis-4{grid-template-columns:repeat(2,1fr)}}

.ped-acoes{margin-top:8px}

/* ---- Checklist de recebimento ---- */
.checklist{border:1px solid var(--line-2);border-radius:var(--r);padding:12px 14px;margin:12px 0}
.checklist legend{font-weight:600;padding:0 6px;color:var(--primary)}
.ck-item{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line-2)}
.ck-item:last-child{border-bottom:none}
.ck-item>span{flex:1;min-width:180px}
.ck-opts{display:flex;gap:8px}
.ck-opts label{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 13px;min-height:38px;cursor:pointer;font-weight:500;font-size:.85rem}
.ck-sim:has(input:checked){background:var(--ok-soft);border-color:#a9d8bb;color:#1f6b41}
.ck-nao:has(input:checked){background:var(--err-soft);border-color:#eeb4ad;color:var(--err)}

/* ---- Líder de setor ---- */
.lider-setores{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-2);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lider-setores label{flex-basis:100%;font-size:.8rem;color:var(--mut)}
.lider-setores .ls-sel{min-width:200px;flex:1}
.ls-msg{font-size:.82rem;color:var(--primary);font-weight:500}

/* ---- Pedidos recorrentes ---- */
.mp-acts{display:flex;gap:8px;flex-wrap:wrap}
.rec-wrap{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
.rec-opts{display:inline-flex;gap:6px}

/* ---- Concentrar × dividir ---- */
.cenarios .cen-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0}
.cen-col{border:1px solid var(--line-2);border-radius:var(--r);padding:12px;background:var(--surface)}
.cen-col>b{display:block;font-size:1.3rem;font-weight:600;color:var(--primary);margin:2px 0}
.cen-col small{display:block;color:var(--mut);font-size:.8rem;line-height:1.5;margin-top:3px}
.cen-tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;font-weight:600;color:var(--mut)}
.cen-dif{margin:8px 0}
.cen-veredito{border-radius:var(--r-sm);padding:10px 13px;margin-top:8px;background:var(--surface-2);border:1px solid var(--line-2)}
.cen-veredito.cen-dividir{background:var(--info-soft);border-color:#d3e2f4}
.cen-veredito.cen-concentrar{background:var(--ok-soft);border-color:#cfe8d8}
@media(max-width:560px){.cenarios .cen-grid{grid-template-columns:1fr}}

/* ---- Importar patrimônio do ERP ---- */
.pat-lista{max-height:340px;overflow-y:auto;border:1px solid var(--line-2);border-radius:var(--r);margin-top:8px}
.pat-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line-2)}
.pat-row:last-child{border-bottom:none}
.pat-row>div{min-width:0}
#pat-busca{margin-top:6px}

/* ---- "Não achei meu item" (fora do catálogo) ---- */
.fc-box{border:1px dashed var(--line);border-radius:var(--r);padding:10px 14px;margin-top:10px}
.fc-box>summary{cursor:pointer;font-weight:500;color:var(--primary);min-height:40px;display:flex;align-items:center}

/* ---- Recebimento por item ---- */
.rec-itens{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px}
.rec-item{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:9px 12px;background:var(--surface)}
.rec-item-i{flex:1;min-width:180px}
.rec-item-i small{display:block;color:var(--mut)}
.rec-item-in{display:flex;gap:8px}
.rec-item-in input{max-width:130px}

/* ============================================================
   v105 — Cockpit "centro de controle", sidebar agrupada/recolhível,
   filtro segmentado, tendências, atenção imediata, acessibilidade
   ============================================================ */

/* foco visível em toda a interface (teclado) */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
.btn:focus-visible,.mini:focus-visible,.icon-btn:focus-visible{outline-offset:1px}

/* estados de botão */
.btn:active{transform:translateY(1px)}
.btn[aria-busy="true"],.btn.loading{pointer-events:none;opacity:.7}

/* ---------- Cabeçalho compacto do Cockpit ---------- */
.ck-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ck-head-l b{display:block;font-weight:600;font-size:.95rem}
.ck-head-l small{color:var(--mut);font-size:.78rem}
.ck-head-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ck-head-r .chips-range{margin-top:0}

/* filtro de período: controle segmentado único */
.chips-range.seg{display:inline-flex;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px;overflow-x:auto;max-width:100%}
.chips-range.seg .chip-range{border:none;border-radius:5px;background:transparent;padding:6px 11px;font-size:.78rem;white-space:nowrap;color:var(--mut)}
.chips-range.seg .chip-range:hover{color:var(--ink);background:var(--surface-2)}
.chips-range.seg .chip-range.on{background:var(--primary);color:#fff;font-weight:600}

/* ---------- Ações rápidas (faixa compacta) ---------- */
.qa{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.qa-it{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);text-decoration:none;color:var(--ink);transition:border-color .15s,background .15s;min-height:52px}
.qa-it:hover{border-color:var(--primary)}
.qa-it:active{transform:translateY(1px)}
.qa-it .ic{width:19px;height:19px;color:var(--primary);flex:none}
.qa-tx{display:flex;flex-direction:column;line-height:1.25}
.qa-tx b{font-weight:600;font-size:.88rem}
.qa-tx small{color:var(--mut);font-size:.74rem}
.qa-pri{background:var(--primary);border-color:var(--primary);color:#fff}
.qa-pri:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.qa-pri .ic{color:#fff}
.qa-pri .qa-tx small{color:rgba(255,255,255,.75)}
@media(max-width:700px){.qa{display:grid;grid-template-columns:1fr 1fr}.qa-it{padding:10px 12px}}

/* ---------- Indicadores: cabeçalho + tendência ---------- */
.m-top{display:flex;align-items:center;gap:9px}
.m-top .m-eyebrow{margin-top:0}
.m-ic.mt-fin{background:var(--primary-soft);color:var(--primary)}
.m-ic.mt-op{background:var(--surface-2);color:var(--mut)}
.m-ic.mt-warn{background:var(--warn-soft);color:var(--warn)}
.m-ic.mt-err{background:var(--err-soft);color:var(--err)}
.m-trend{margin-top:4px}
.trend{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;font-weight:600;padding:2px 8px;border-radius:999px}
.trend .ic{width:13px;height:13px}
.t-up{background:var(--err-soft);color:var(--err)}       /* gasto subiu = atenção */
.t-down{background:var(--ok-soft);color:#1f6b41}          /* gasto caiu = positivo */
.t-flat{background:var(--surface-2);color:var(--mut);border:1px solid var(--line-2)}

/* ---------- Precisa da sua atenção ---------- */
.att-row{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);margin-bottom:8px;text-decoration:none;color:var(--ink);background:var(--surface);transition:border-color .15s}
.att-row:hover{border-color:var(--primary)}
.att-row:hover .att-act{color:var(--primary)}
.att-prio{flex:none;width:4px;align-self:stretch;border-radius:2px}
.ap-1{background:var(--err)}.ap-2{background:var(--warn)}.ap-3{background:var(--line-in)}
.att-row .status{flex:none}
.att-main{flex:1;min-width:0}
.att-main b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att-main small{color:var(--mut);font-size:.78rem}
.att-act{flex:none;font-size:.8rem;font-weight:500;color:var(--mut);white-space:nowrap}
.att-mais{margin:4px 0 0;font-size:.8rem}
.att-vazio{display:flex;align-items:center;gap:12px;padding:22px 16px;border:1px dashed var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.att-vazio .ic{width:26px;height:26px;color:var(--ok);flex:none}
@media(max-width:560px){.att-row{flex-wrap:wrap}.att-row .status{order:1}.att-main{order:2;flex-basis:100%}.att-act{order:3;margin-left:auto}}

/* ---------- Inteligência de Compras ---------- */
.ia-sug{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.ia-q{font-size:.76rem;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line-2);border-radius:999px;padding:4px 10px}

/* ---------- Painel financeiro ---------- */
.fin-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.fin-kpi span{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);font-weight:600}
.fin-kpi b{display:block;font-size:1.25rem;font-weight:600;margin:2px 0;font-variant-numeric:tabular-nums}
.fin-sub{font-size:.82rem;font-weight:600;color:var(--ink-2);margin:14px 0 8px;text-transform:uppercase;letter-spacing:.04em}
.fin-2col{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:6px}
@media(max-width:760px){.fin-2col{grid-template-columns:1fr}}
.aprov-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
.aprov-grid > .emp-card{margin:0;display:flex;flex-direction:column}
.aprov-grid .emp-acoes{margin-top:auto;padding-top:10px}
@media(max-width:860px){.aprov-grid{grid-template-columns:1fr}}
@media(min-width:1440px){.main-largo .aprov-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1900px){.main-largo .aprov-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1440px){.main-largo .meus-grid{grid-template-columns:repeat(5,1fr)}}
@media(min-width:1900px){.main-largo .meus-grid{grid-template-columns:repeat(6,1fr)}}
.bar-row.bar-cur .bf{background:var(--primary)}
.bar-row:not(.bar-cur) .bf{opacity:.55}
.bl-cur{font-style:normal;font-size:.68rem;font-weight:600;color:var(--primary);background:var(--primary-soft);border-radius:4px;padding:0 5px;margin-left:4px}
.fin-2col .bf{opacity:1!important}

/* ---------- Sidebar: grupos ---------- */
.nav-grp{display:flex;flex-direction:column;gap:1px;padding-bottom:10px}
.nav-grp+.nav-grp{border-top:1px solid var(--line-2);padding-top:10px}
.nav-grp-lbl{font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--mut-2);padding:0 12px 4px}
@media(max-width:860px){
  .nav-grp{flex-direction:row;padding-bottom:0;gap:2px}
  .nav-grp+.nav-grp{border-top:none;padding-top:0}
  .nav-grp-lbl{display:none}
}

/* ---------- Sidebar recolhível (desktop) ---------- */
.sb-min-btn{display:flex;align-items:center;gap:11px;margin:0 10px 6px;padding:8px 12px;border:none;background:transparent;border-radius:var(--r-sm);color:var(--mut);font:inherit;font-size:.8rem;cursor:pointer}
.sb-min-btn:hover{background:var(--surface-2);color:var(--ink)}
.sb-min-btn .ic{width:17px;height:17px}
.ic-sb-open{display:none}
@media(max-width:860px){.sb-min-btn{display:none}}
@media(min-width:861px){
  html[data-sbmin="1"] .sb{width:64px}
  html[data-sbmin="1"] .sb .nav-label,html[data-sbmin="1"] .sb-brand-tx,html[data-sbmin="1"] .sb-user-tx,html[data-sbmin="1"] .nav-grp-lbl{display:none}
  html[data-sbmin="1"] .sb-nav a{justify-content:center;padding:10px}
  html[data-sbmin="1"] .sb-nav a.on::before{top:6px;bottom:6px}
  html[data-sbmin="1"] .sb-brand{justify-content:center;padding:16px 8px 12px}
  html[data-sbmin="1"] .sb-user{justify-content:center;padding:12px 8px}
  html[data-sbmin="1"] .sb-min-btn{justify-content:center;padding:8px}
  html[data-sbmin="1"] .ic-sb-close{display:none}
  html[data-sbmin="1"] .ic-sb-open{display:inline-block}
  html[data-sbmin="1"] .nav-badge{position:absolute;top:3px;right:6px;transform:scale(.85)}
}

/* ---------- Skeleton de carregamento ---------- */
.skel{position:relative;overflow:hidden;background:var(--line-2);border-radius:6px;min-height:14px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:skel 1.2s infinite}
@keyframes skel{to{transform:translateX(100%)}}
[data-theme="dark"] .skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}

/* ---------- v105.1: prioridade propagada (Comprador e Separação) ---------- */
.req-pri-1{border-left:3px solid var(--err)}
.req-pri-2{border-left:3px solid var(--warn)}
.req-pri-3{border-left:3px solid var(--line-2)}
.sep-card.sep-pri-1{border-left-color:var(--err)}
.sep-card.sep-pri-2{border-left-color:var(--warn)}
.sep-grid .att-vazio{grid-column:1/-1}
.meus-grid .att-vazio{grid-column:1/-1}
.emp-card.req-pri-3{border-left:3px solid var(--line-2)}

/* ---------- Cotações: tom de fundo por estágio (bem discreto) ----------
   O fundo fica a poucos por cento da cor do estágio sobre a superfície, e a
   borda ganha um tingimento leve da mesma cor. Funciona nos dois temas porque
   as cores base (--info/--warn/--ok/--err/--mut/--surface) já trocam no dark.
   Navegador sem color-mix mantém o card branco/escuro padrão (degradação ok). */
.req.mapa-row[data-status="cotacao"]{
  background:color-mix(in srgb, var(--info) 5%, var(--surface));
  border-color:color-mix(in srgb, var(--info) 20%, var(--line-2));
}
.req.mapa-row[data-status="aprovacao"]{
  background:color-mix(in srgb, var(--warn) 7%, var(--surface));
  border-color:color-mix(in srgb, var(--warn) 24%, var(--line-2));
}
.req.mapa-row[data-status="aprovada"]{
  background:color-mix(in srgb, var(--ok) 6%, var(--surface));
  border-color:color-mix(in srgb, var(--ok) 22%, var(--line-2));
}
.req.mapa-row[data-status="rejeitada"]{
  background:color-mix(in srgb, var(--mut) 7%, var(--surface));
  border-color:color-mix(in srgb, var(--mut) 20%, var(--line-2));
}
/* atrasada manda no visual, independente do estágio */
.req.mapa-row[data-atrasada="1"]{
  background:color-mix(in srgb, var(--err) 7%, var(--surface));
  border-color:color-mix(in srgb, var(--err) 24%, var(--line-2));
}
/* a barra de prioridade continua sendo o sinal forte — não deixar a borda tingida apagá-la */
.req.mapa-row.req-pri-1{border-left-color:var(--err)}
.req.mapa-row.req-pri-2{border-left-color:var(--warn)}

/* ---------- v109: Inteligência de Compras legível ---------- */
.ia-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ia-step{display:flex;gap:11px;align-items:flex-start}
.ia-step-n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--primary-soft);color:var(--primary);font-weight:600;font-size:.82rem;display:grid;place-items:center;margin-top:2px}
.ia-step b{display:block;font-size:.88rem}
.ia-step small{color:var(--mut);font-size:.78rem;line-height:1.35;display:block}
@media(max-width:700px){.ia-steps{grid-template-columns:1fr;gap:12px}}
.ia-ask-card .ia-ask input{min-height:46px;font-size:1rem}
.ia-chip{cursor:pointer;font:inherit;font-size:.78rem;transition:border-color .15s,background .15s}
.ia-chip:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.ia-sec{margin:20px 0 10px;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);font-weight:600}
.ia-hd{display:flex;gap:13px;align-items:flex-start}
.ia-hd .m-ic{flex:none;margin-top:2px}
.ia-hd-tx{flex:1;min-width:0}
.ia-hd-tx h2{margin:0 0 2px}
.ia-hd-tx .muted{margin:0;font-size:.86rem}
.ia-recebe{margin:4px 0 0;font-size:.8rem;color:var(--primary)}
.ia-hd .btn{flex:none}
@media(max-width:620px){.ia-hd{flex-wrap:wrap}.ia-hd .btn{flex-basis:100%}}
.ia-nunca{margin:10px 0 0;padding:12px 14px;border:1px dashed var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.ia-res{margin-top:12px}
.ia-res-hd{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ia-card p{margin:.45em 0}
.ia-card ul{margin:.45em 0}
.ia-card .ia-h{font-weight:600;color:var(--ink);margin-top:1em;font-size:.95rem}
.ia-card .ia-h:first-child{margin-top:0}

/* busca de CNPJ no form de novo fornecedor */
.nf-cnpj-linha{display:flex;gap:8px;align-items:center}
.nf-cnpj-linha input{flex:1;min-width:0}
#nf-cnpj-info{display:block;margin-top:4px}
#nf-cnpj-info.hidden{display:none}

/* ajuste de quantidades / embalagem fechada (atacadista) */
.qtd-edit>summary{cursor:pointer;color:var(--primary,#1f5c45);font-weight:600;padding:10px 0}
.div-toggle-lbl{display:flex;gap:8px;align-items:center;background:var(--ok-soft,#eaf3ef);color:var(--ok,#1f5c45);border-radius:var(--r-sm,8px);padding:10px 12px;margin-bottom:12px;font-size:.9rem;cursor:pointer}

/* escolha explícita concentrar × dividir (sempre visível quando há ≥2 fornecedores e ≥2 itens) */
.modo-escolha{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.modo-opt{position:relative;display:flex;align-items:center;gap:10px;border:1.5px solid var(--line-2);border-radius:var(--r);padding:12px 14px 12px 12px;cursor:pointer;background:var(--surface);transition:border-color .15s,background .15s}
.modo-opt:hover{border-color:var(--line-in)}
.modo-opt input{position:absolute;opacity:0;pointer-events:none}
.modo-opt.modo-sel{border-color:var(--primary);background:var(--primary-soft)}
.modo-ico{font-size:1.3rem;line-height:1}
.modo-txt{display:flex;flex-direction:column;gap:2px}
.modo-txt>b{font-size:.95rem}
.modo-txt>small{color:var(--mut);font-size:.78rem;line-height:1.4}
.modo-badge{position:absolute;top:-9px;right:10px;background:var(--warn);color:#fff;font-size:.65rem;font-weight:700;letter-spacing:.02em;border-radius:999px;padding:2px 8px;box-shadow:var(--sh-1)}
@media(max-width:560px){.modo-escolha{grid-template-columns:1fr}}
.div-item{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line,#dde3e0)}
.div-item:last-of-type{border-bottom:none}
.div-item-desc{flex:1;min-width:140px}
.div-forn{max-width:280px}
.qe-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line,#dde3e0)}
.qe-row:last-of-type{border-bottom:none}
.qe-desc{flex:1;min-width:180px}
.qe-un{font-size:.85rem}
.qe-row label{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted,#64707d)}
.qe-qtd,.qe-mult{width:90px;text-align:right}
.qe-marca{width:160px}
.qe-hint{flex-basis:100%;color:var(--muted,#64707d)}
.qe-row.qe-erro .qe-hint{color:#b91c1c}
.qe-row.qe-erro input{border-color:#b91c1c}
.emb-tag{display:inline-block;background:var(--soft,#eaf3ef);color:var(--primary,#1f5c45);border-radius:10px;padding:0 7px;font-size:.72rem;white-space:nowrap}
.marca-tag{display:inline-block;background:#fef3c7;color:#92400e;border-radius:10px;padding:0 7px;font-size:.72rem;white-space:nowrap}
.mat-ok{display:inline-block;background:var(--ok-soft);color:var(--ok);border-radius:10px;padding:0 7px;font-size:.72rem;white-space:nowrap}
.mail-badge{display:inline-block;border-radius:10px;padding:1px 8px;font-size:.75rem;white-space:nowrap}
.mail-badge.mail-ok{background:var(--ok-soft,#dcfce7);color:#166534}
.mail-badge.mail-pend{background:#fef3c7;color:#92400e}
.item-del{background:#fee2e2;color:#b91c1c;border:none;padding:1px 7px;font-size:.85rem;line-height:1.4}

/* qtd própria por fornecedor (caixa fechada) */
.qtd-forn{font-size:.72rem;color:var(--muted,#64707d);white-space:nowrap}
.fe-item .fe-qtd{width:110px;text-align:right}
.fe-item.fe-head{border-bottom:1px dashed var(--line,#dde3e0);padding-bottom:2px}
.fe-item.fe-head small{width:110px;text-align:center}
.fe-item.fe-head small:last-child{flex:0 0 auto;min-width:110px}

/* ===== Recomendação da IA — leitura executiva em seções ===== */
.ia-card{padding:0!important;border:1px solid var(--line,#dde3e0);border-radius:12px;overflow:hidden;background:var(--surface,#fff)}
.iax-sec{padding:14px 18px;border-top:1px solid var(--line,#dde3e0)}
.iax-sec:first-child{border-top:none}
.iax-sec .ia-h{margin:0 0 10px;font-size:.88rem;font-weight:700;color:var(--muted,#64707d);display:flex;align-items:center;gap:8px}
.iax-sec .ia-h::before{content:'';width:9px;height:9px;border-radius:3px;background:var(--muted,#94a3ad);flex:none}
.iax-sec p{margin:.35em 0}
.iax-sec ul{margin:.3em 0 .3em 20px;line-height:1.65}
/* Recomendação = veredito em destaque */
.iax-rec{background:var(--soft,#eaf3ef);border-left:4px solid var(--primary,#1f5c45)}
.iax-rec .ia-h{color:var(--primary,#1f5c45)}.iax-rec .ia-h::before{background:var(--primary,#1f5c45)}
.iax-rec p:not(.ia-h){font-size:1.06rem;font-weight:600;color:var(--ink,#1f2933);line-height:1.55}
/* Comparação = tabela zebrada com cabeçalho verde-suave */
.iax-cmp .cmp{margin:4px 0 2px}
.iax-cmp .cmp th{background:var(--soft,#eaf3ef);color:var(--primary,#1f5c45);font-weight:700;white-space:nowrap}
.iax-cmp .cmp tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--soft,#eaf3ef) 45%,transparent)}
.iax-cmp .cmp td:first-child{font-weight:600}
.iax-cmp .cmp td:nth-child(2){font-variant-numeric:tabular-nums;white-space:nowrap}
/* Concentrar ou dividir = neutro com marcador azul */
.iax-cen .ia-h{color:#2e6ed9}.iax-cen .ia-h::before{background:#2e6ed9}
/* Atenção = âmbar */
.iax-warn{background:#fff8ec;border-left:4px solid #d97706}
.iax-warn .ia-h{color:#b45309}.iax-warn .ia-h::before{background:#d97706}
.iax-warn ul li::marker{color:#d97706}
/* Para a aprovação = citação com dourado + copiar */
.iax-aprov{background:var(--bg,#f5f7f6);border-left:4px solid #c9a23e}
.iax-aprov .ia-h{color:#8a6d1f}.iax-aprov .ia-h::before{background:#c9a23e}
.iax-aprov p:not(.ia-h){font-style:italic;color:var(--ink,#1f2933)}
.iax-aprov .ia-copy{margin-top:8px}
/* tema escuro */
[data-theme=dark] .iax-rec{background:#14261e}
[data-theme=dark] .iax-warn{background:#2a1f0d;border-left-color:#b45309}
[data-theme=dark] .iax-aprov{background:#1b2320}
[data-theme=dark] .iax-cmp .cmp th{background:#14261e}
[data-theme=dark] .iax-cmp .cmp tbody tr:nth-child(even) td{background:#161d19}

/* Portal de Fornecedores (31/07/2026) */
.hp-wrap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cat-arvore{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.cat-grupo{border:1px solid var(--line,#dde3e0);border-radius:10px;min-width:0;background:#fff}
.cat-grupo>summary{font-weight:600;font-size:.92rem;color:var(--primary,#14532d);padding:13px 12px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;min-height:46px}
.cat-grupo>summary::-webkit-details-marker{display:none}
.cat-grupo>summary::before{content:"▸";font-size:.8rem;opacity:.55;transition:transform .15s}
.cat-grupo[open]>summary::before{transform:rotate(90deg)}
.cat-grupo[open]>summary{border-bottom:1px solid var(--line,#dde3e0)}
.cat-grupo .cat-itens{padding:6px 12px 10px}
.cat-n{margin-left:auto;font-size:.78rem;font-weight:600;color:#fff;background:var(--primary,#14532d);border-radius:999px;padding:2px 9px}
.cat-n:empty{display:none}
/* alvo de toque: quem preenche isso está no celular, vindo de um link do WhatsApp.
   O checkbox nativo tem ~13px, então a área clicável é o label inteiro, com folga vertical. */
.cat-op{display:flex;align-items:center;gap:8px;font-size:.92rem;padding:7px 4px;cursor:pointer;border-radius:6px}
.cat-op:hover{background:var(--surface-2)}
.cat-op input{width:18px;height:18px}
.form-chk label{display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer}
.form-chk input{width:18px;height:18px}
/* aceite da LGPD: frase longa, então NÃO é flex — flex vira cada trecho de texto num item e a
   frase quebra em pedaços (a vírgula depois do link caía sozinha numa linha). */
.form-aceite{display:block;margin:12px 0;padding:8px 0;line-height:1.5;font-size:.92rem;cursor:pointer}
.form-aceite input{width:18px;height:18px;vertical-align:-4px;margin-right:8px}
.form-chk{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0;font-size:.92rem}
.fp-acoes{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fp-msg{margin-top:6px}

/* ---- Portal de Fornecedores: formulário em etapas, pensado para o celular (31/07/2026) ---- */
.pf h1{margin-bottom:6px}
.pf-intro{color:var(--mut);font-size:.95rem;line-height:1.55;margin-bottom:18px}
.pf-etapa{display:flex;gap:12px;padding:16px 0;border-top:1px solid var(--line-2)}
.pf-etapa:first-of-type{border-top:none;padding-top:4px}
.pf-num{flex:none;width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.82rem;margin-top:2px}
.pf-corpo{flex:1;min-width:0}
.pf-titulo{display:block;font-weight:600;margin-bottom:2px}
.pf-cnpj-linha{display:flex;gap:8px;align-items:stretch}
.pf-cnpj-linha input{font-size:18px;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.pf-cnpj-linha .btn{width:auto;white-space:nowrap;margin:0}
.pf-dica{font-size:.82rem;margin-top:8px}
.pf-abas{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.pf-aba{flex:1 1 auto;min-width:110px;padding:9px 10px;border:1px solid var(--line-2);background:var(--surface);
  border-radius:var(--r-sm);font-size:.86rem;cursor:pointer;color:var(--mut)}
.pf-aba.on{border-color:var(--primary);color:var(--primary);background:var(--primary-soft);font-weight:600}
.pf-drop{display:grid;place-items:center;gap:4px;text-align:center;padding:22px 14px;cursor:pointer;
  border:2px dashed var(--line-2);border-radius:var(--r-sm);background:var(--surface-2)}
.pf-drop:hover,.pf-drop.arrasta{border-color:var(--primary);background:var(--primary-soft)}
.pf-drop small{color:var(--mut);font-size:.8rem}
.pf-cat-topo{display:flex;justify-content:space-between;align-items:center;margin:12px 0 6px}
/* LINHA DE PRODUTO — grade, não flex (20/08/2026, relato da presidência: campo da descrição
   pequeno "que não aceita digitar" e o do preço estourando a tela).
   Por que grade: no flex, os campos de unidade e preço tinham largura FIXA e a descrição era o
   único que encolhia — quando a largura disponível chegava perto da soma dos fixos, a descrição
   virava um filete de poucos pixels (parece campo que não aceita digitar) e o preço saía da tela.
   Agora a descrição TEM LINHA PRÓPRIA até 760px, e as faixas usam minmax(0,…): sem esse minmax, a
   largura intrínseca de um <input> (~170px) vira o mínimo da faixa e transborda de novo.
   Unidade e preço também encolheram, a pedido dele — o que se digita ali é curto ("UN", "18,90"). */
.pf-cat-item{
  display:grid;gap:8px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line-2);
  grid-template-columns:56px minmax(0,1fr) 30px;
  grid-template-areas:"desc desc desc" "un preco rm";
}
.pf-cat-item>*{min-width:0}                      /* trava: nada empurra a faixa além do container */
.pf-cat-item input{min-height:38px;padding:6px 9px;font-size:16px}   /* 16px: menos que isso, iPhone dá zoom ao focar */
.pf-cat-item .cd{grid-area:desc}
.pf-cat-item .cu{grid-area:un;text-align:center}
.pf-cat-item .cp{grid-area:preco;text-align:right}
.pf-cat-item .rm{grid-area:rm;border:none;background:none;color:var(--err);cursor:pointer;
  font-size:18px;padding:0;line-height:1;min-height:38px}
@media (min-width:761px){
  /* tela larga: cabe tudo em uma linha, e aí a descrição fica com a sobra */
  .pf-cat-item{grid-template-columns:minmax(0,1fr) 56px 92px 30px;
    grid-template-areas:"desc un preco rm"}
}
.pf-fim{text-align:center}
.pf-ok{width:56px;height:56px;margin:6px auto 10px;border-radius:50%;background:var(--ok-soft,#dcfce7);
  color:var(--primary);display:grid;place-items:center;font-size:30px;font-weight:700}
.pf-rodape{font-size:.82rem;margin-top:10px}
@media (max-width:520px){
  .pf-etapa{gap:9px}
  .pf-cnpj-linha{flex-direction:column}
  .pf-cnpj-linha .btn{width:100%}
}

/* Lista de produtos do fornecedor na triagem (31/07) */
.fp-cat{margin:8px 0;border:1px solid var(--line,#dde3e0);border-radius:8px;background:#fbfcfb}
.fp-cat>summary{padding:9px 11px;cursor:pointer;font-size:.86rem;min-height:40px;display:flex;align-items:center;gap:6px}
.fp-cat>summary b{background:var(--primary,#14532d);color:#fff;border-radius:999px;padding:1px 8px;font-size:.76rem}
.fp-cat .tab-min{width:100%;border-collapse:collapse;font-size:.82rem}
.fp-cat .tab-min td{padding:5px 11px;border-top:1px solid var(--line,#eef1ef);vertical-align:top}
.fp-cat .tab-min td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.fp-cat p{padding:0 11px 9px;margin:6px 0 0}

/* Contador de cadastros do portal esperando análise, no item Fornecedores do menu (31/07) */
.sb-nav a .nav-badge{margin-left:auto;background:#b45309;color:#fff;border-radius:999px;padding:1px 7px;font-size:.72rem;font-weight:700;line-height:1.5}
.sb-min .sb-nav a .nav-badge{position:absolute;top:4px;right:4px;margin:0;padding:0 5px;font-size:.66rem}
.sb-min .sb-nav a{position:relative}

/* Item que veio do portal de fornecedores, na busca de produto da cotação (31/07) */
.prod-portal{color:#b45309;font-weight:600}

/* ===== Portal de fornecedores: hero, ajuda por campo e manual (31/07) ===== */
.pf-hero{margin-bottom:6px}
.pf-hero h1{margin-bottom:6px}
.pf-selos{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 10px}
.pf-selo{background:var(--accent-soft,#eaf3ef);color:var(--primary,#14532d);border-radius:999px;padding:5px 12px;font-size:.79rem;font-weight:600;white-space:nowrap}
.pf-ajuda-topo{margin:10px 0 0;font-size:.88rem;color:var(--mut)}
.pf-ajuda-topo a{font-weight:600}
/* ajuda logo abaixo do rótulo: a dica só serve onde a dúvida aparece */
.pf small.dica{display:block;color:var(--mut,#64748b);font-size:.79rem;line-height:1.45;margin:-2px 0 6px}
.pf .form-grid small.dica{margin:4px 0 0}
.pf-porque{background:var(--accent-soft,#f2f7f4);border-left:3px solid var(--primary,#14532d);border-radius:0 8px 8px 0;padding:9px 12px;margin:2px 0 12px;font-size:.85rem;line-height:1.5;color:var(--ink)}
.pf-oque{background:#fbfcfb;border:1px solid var(--line,#dde3e0);border-radius:10px;padding:11px 13px;margin-top:10px;font-size:.85rem;line-height:1.55}
.pf-oque ul{margin:6px 0 8px;padding-left:18px}
.pf-oque li{margin:3px 0}
.pf-fim-prox{background:var(--accent-soft,#f2f7f4);border-radius:10px;padding:14px 16px;margin:16px 0;text-align:left}
.pf-fim-prox ol{margin:8px 0 0;padding-left:20px;line-height:1.6;font-size:.9rem}

/* manual */
.aj-hero h1{margin-bottom:8px}
.aj-hero .btn{margin-top:12px}
.aj-indice{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;font-size:.88rem}
.aj-indice b{width:100%;margin-bottom:2px}
.aj-indice a{font-weight:600}
.aj-bloco{scroll-margin-top:14px}
.aj-bloco h2{margin:0 0 10px;font-size:1.12rem;color:var(--primary,#14532d)}
.aj-bloco p{line-height:1.65;margin:0 0 10px}
.aj-passos{margin:6px 0 10px;padding-left:20px;line-height:1.7}
.aj-passos li{margin:5px 0}
.aj-nota{background:#fff8ec;border:1px solid #f0dcb4;border-radius:8px;padding:9px 12px;font-size:.85rem;color:#7a4f10;line-height:1.55}
.aj-campos{margin:0}
.aj-campos dt{font-weight:700;color:var(--ink);margin-top:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.aj-campos dt:first-child{margin-top:0}
.aj-campos dt .obrig{background:#fef3e2;color:#b45309;border-radius:999px;padding:1px 8px;font-size:.7rem;font-weight:700;text-transform:uppercase}
.aj-campos dd{margin:4px 0 0;color:var(--mut);line-height:1.6;font-size:.9rem}
.aj-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:12px 0}
.aj-card{border:1px solid var(--line,#dde3e0);border-radius:10px;padding:13px;background:#fbfcfb;min-width:0}
.aj-card>b{display:block;margin-bottom:6px;color:var(--primary,#14532d)}
.aj-card p{font-size:.86rem;margin:0 0 8px}
.aj-card ul{margin:0 0 8px;padding-left:18px;font-size:.86rem;line-height:1.6}
.aj-ex{background:#0f172a;color:#e2e8f0;border-radius:8px;padding:10px;font-size:.76rem;line-height:1.6;overflow-x:auto;white-space:pre;margin:0 0 8px}
.aj-seg{margin:0;padding-left:18px;line-height:1.7}
.aj-seg li{margin:7px 0}
.aj-fim{text-align:center}
.aj-fim b{display:block;margin-bottom:10px;font-size:1.05rem}
.aj-fim .btn{width:auto}
@media(max-width:520px){
  .aj-indice{flex-direction:column;align-items:flex-start;gap:7px}
  .pf-selo{font-size:.75rem}
}
/* link do manual: é chamada de ação, precisa de alvo de dedo (>=44px), não de link no meio do texto */
.pf-ajuda-topo a{display:inline-block;padding:11px 0;min-height:44px;line-height:22px}
/* etapa opcional recolhida: encurta a página sem esconder ajuda de campo obrigatório */
.pf-op>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:44px;padding:4px 0}
.pf-op>summary::-webkit-details-marker{display:none}
.pf-op>summary::before{content:"▸";opacity:.55;font-size:.8rem;transition:transform .15s}
.pf-op[open]>summary::before{transform:rotate(90deg)}
.pf-op>summary .pf-titulo{margin:0}

/* Cabeçalho só do impresso: o @media print esconde .top/.sb, e sem isto o PDF sai sem identificação */
.print-head{display:none}
@media print{
  .print-head{display:flex!important;align-items:center;gap:12px;border-bottom:2.5px solid #1f5c45;
    padding:0 0 9px;margin:0 0 14px;break-inside:avoid;break-after:avoid}
  .print-head img{width:42px;height:42px;flex:none}
  .print-head div{display:flex;flex-direction:column;min-width:0;flex:1}
  .print-head b{font-family:Georgia,"Times New Roman",serif;font-size:15px;color:#122a1f;line-height:1.2}
  .print-head span{font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:#5c7a6c;margin-top:2px}
  .print-head em{font-size:10px;color:#5c7a6c;font-style:normal;white-space:nowrap}
}

/* ---------- Recebimento: fila "aguardando recebimento" (corte 11/08/2026) ---------- */
.rec-fila{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin:6px 0 4px}
.rec-pend{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  padding:10px 14px;border:1px solid var(--line,#dde7e2);border-radius:10px;background:var(--surface,#fff);
  cursor:pointer;font:inherit;transition:border-color .15s, box-shadow .15s}
.rec-pend:hover{border-color:var(--primary,#1f5c45);box-shadow:0 2px 8px rgba(31,92,69,.12)}
.rec-pend b{color:var(--primary,#1f5c45)}
.rec-pend .rp-tit{font-weight:600}
.rec-pend small{color:var(--mut-2,#6b7f76)}

/* ---------- BARRAS VERTICAIS (série no tempo — /relatorios) ----------
   Marca fina, topo arredondado ancorado na base, respiro de 2px entre colunas, grade recessiva.
   Tooltip em CSS puro (hover E foco por teclado) — a página não carrega biblioteca de gráfico. */
.vbars{display:flex;align-items:flex-end;gap:2px;height:190px;padding:26px 2px 0;
  border-bottom:1px solid var(--line);position:relative;overflow-x:auto}
.vb-col{flex:1 1 0;min-width:22px;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;position:relative;outline:none}
.vb-fill{width:100%;max-width:46px;background:var(--primary);border-radius:4px 4px 0 0;
  transition:filter .12s}
.vb-col:hover .vb-fill,.vb-col:focus-visible .vb-fill{filter:brightness(1.12)}
.vb-col:focus-visible{box-shadow:0 0 0 2px var(--primary-soft)}
.vb-x{font-size:11px;color:var(--mut);margin-top:4px;white-space:nowrap;transform:translateY(2px)}
.vb-top{position:absolute;top:-22px;font-size:11px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.vb-tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--surface);font-size:12px;line-height:1.35;padding:6px 9px;
  border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:5}
.vb-col:hover .vb-tip,.vb-col:focus-visible .vb-tip{opacity:1}
.rel-gran{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:2px 0 10px}
.rel-gran a{font-size:12px;padding:3px 10px;border:1px solid var(--line);border-radius:999px;
  color:var(--ink-2);text-decoration:none}
.rel-gran a.on{background:var(--primary);border-color:var(--primary);color:#fff}
@media print{.vb-tip{display:none}}
/* KPI com valor abreviado (R$ 316,8 mil) não pode quebrar em duas linhas */
.kpi b{white-space:nowrap}
.vb-zero .vb-fill{background:none}

/* ---------- Categorias de fornecedor ---------- */
.cat-novo{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.cat-novo input{flex:1;min-width:260px}
.cat-lista .cat-g{border:1px solid var(--line);border-radius:8px;margin-bottom:10px;overflow:hidden}
.cat-lista .cat-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 12px;background:var(--surface-2)}
.cat-lista .cat-s{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 12px 7px 28px;border-top:1px solid var(--line-2)}
.cat-lista .cat-nome{color:var(--ink)}
.cat-lista small.muted{margin-left:auto;white-space:nowrap}
.cat-acoes{display:flex;gap:4px;flex-wrap:wrap}
.cat-off{opacity:.55}
.cat-off .cat-nome{text-decoration:line-through}

/* Quem está logado, visível na barra de cima (computador compartilhado) */
.ap-quem{display:flex;align-items:center;gap:6px;margin-left:auto;margin-right:10px;font-size:12px;
  padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);white-space:nowrap}
.ap-quem-n{font-weight:700;color:var(--ink)}
.ap-quem small{color:var(--mut)}
.ap-quem-sair{color:var(--err);text-decoration:none;border-left:1px solid var(--line);padding-left:8px}
.ap-quem-sair:hover{text-decoration:underline}
@media (max-width:720px){.ap-quem small,.ap-quem-sair{display:none}}
@media print{.ap-quem{display:none}}

/* Recebimento no celular do almoxarifado (18/08/2026): leitura da chave da NF-e pela câmera e
   atalho do caso normal na conferência guiada. */
.nfe-chave-in { display: flex; gap: 8px; align-items: center; }
.nfe-chave-in input { flex: 1 1 auto; min-width: 0 }
.nfe-chave-in .mini { flex: 0 0 auto; white-space: nowrap }
.nfe-cam { margin: 8px 0 4px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: #000 }
.nfe-cam video { display: block; width: 100%; max-height: 46vh; object-fit: cover }
.nfe-cam-foot { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 10px; background: var(--surface-2) }
.nfe-cam-st { font-size: .85rem; color: var(--ink-2) }
.nfe-cam-x { border: 0; background: none; color: var(--ink-2); text-decoration: underline; cursor: pointer; font-size: .85rem }
.ck-tudo { margin-left: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--primary);
  border-radius: 999px; padding: 3px 11px; font-size: .78rem; font-weight: 600; cursor: pointer; vertical-align: middle }
.ck-tudo:hover { background: var(--primary); color: #fff; border-color: var(--primary) }
@media (max-width: 520px) {
  .nfe-chave-in { flex-wrap: wrap }
  .nfe-chave-in .mini { width: 100%; justify-content: center }
}

/* Abertura do ranking: o que compõe o total de cada proposta (pedido do diretor, 18/09/2026).
   <details> nativo — a tela de aprovação é pública e precisa funcionar sem JS. */
.rk-item { border-radius: 10px; }
.rk-item > summary { list-style: none; cursor: pointer; }
.rk-item > summary::-webkit-details-marker { display: none; }
.rk-abrir { flex: none; margin-left: 10px; font-size: 12px; color: #1f5c45; white-space: nowrap; }
.rk-abrir::after { content: " ▾"; }
.rk-item[open] .rk-abrir::after { content: " ▴"; }
.rk-item[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.rkd-abre { padding: 2px 10px 12px; }
table.rkd { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.rkd td { padding: 7px 8px; border-bottom: 1px solid #eef1ed; vertical-align: top; }
.rkd-hdr td { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #6b7a70; }
.rkd-n { width: 28px; color: #6b7a70; }
.rkd-q { width: 96px; white-space: nowrap; }
.rkd-u, .rkd-t { width: 104px; text-align: right; white-space: nowrap; }
.rkd-sem td { color: #98a39b; font-style: italic; }
.rkd-frete td { color: #4b5a51; }
.rkd-tot td { border-bottom: none; font-weight: 700; padding-top: 10px; }

/* Reposição: linha confirmada depois de salvar o mínimo */
tr.row-ok td { background: #f0fdf4; }
.rep-ok.ok, .rep-todos.ok { background: #16a34a; color: #fff; border-color: #16a34a; }

/* Balcão do almoxarifado */
.balcao-topo { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-bottom: .9rem; }
.balcao-topo select { width: 100%; }
.bc-busca { position: relative; }
.bc-busca input { width: 100%; }
.bc-sug { position: absolute; z-index: 30; left: 0; right: 0; background: #fff; border: 1px solid #d7ded9;
  border-radius: .5rem; box-shadow: 0 8px 24px rgba(0,0,0,.09); max-height: 17rem; overflow: auto; }
.bc-sug.hidden { display: none; }
.bc-opt { display: block; width: 100%; text-align: left; padding: .55rem .7rem; border: 0; background: none;
  cursor: pointer; font-size: .92rem; border-bottom: 1px solid #f0f3f1; }
.bc-opt:hover { background: #f0f7f3; }
.bc-nada { padding: .6rem .7rem; color: #6e7873; font-size: .9rem; }
.bc-tabela { margin-top: .9rem; }
.bc-qtd { width: 5.5rem; }
.bc-acoes { display: flex; align-items: center; gap: .9rem; margin-top: .9rem; }
@media (max-width: 640px) { .balcao-topo { grid-template-columns: 1fr; } }