/* =====================================================================
   Confecção ERP — estilos
   1) tokens de design  2) base e layout  3) menu lateral  4) cabeçalho das páginas
   5) botões  6) campos e formulários  7) tabelas  8) componentes  9) módulos
   Cores, espaços, raios e sombras vêm SEMPRE dos tokens abaixo.
   ===================================================================== */

/* ---------- 1) tokens ---------- */
:root {
  /* marca e ações */
  --cor-marinho: #173653;        /* menu lateral */
  --cor-marinho-2: #1e4468;      /* hover/ativo no menu */
  --cor-acao: #2563eb;           /* ação principal, links, foco */
  --cor-acao-esc: #1d4ed8;
  --cor-acao-clara: #e8effd;
  /* superfícies e texto */
  --cor-fundo: #f4f6f9;
  --cor-superficie: #ffffff;
  --cor-superficie-2: #f8fafc;   /* cabeçalho de tabela, rodapés */
  --cor-borda: #e2e8f0;
  --cor-borda-forte: #cbd5e1;
  --cor-texto: #1e293b;
  --cor-texto-2: #64748b;        /* secundário */
  --cor-texto-3: #94a3b8;        /* desabilitado / dicas */
  /* estados (sempre acompanhados de texto ou ícone) */
  --cor-sucesso: #16a34a; --cor-sucesso-fundo: #dcfce7; --cor-sucesso-texto: #14532d;
  --cor-erro: #dc2626;    --cor-erro-fundo: #fee2e2;    --cor-erro-texto: #7f1d1d;
  --cor-alerta: #d97706;  --cor-alerta-fundo: #fef3c7;  --cor-alerta-texto: #78350f;
  --cor-info-fundo: #e0ecfb; --cor-info-texto: #1e3a8a;
  --cor-neutro-fundo: #e2e8f0; --cor-neutro-texto: #334155;     /* selos sem cor, barras */
  --cor-laranja-fundo: #ffedd5; --cor-laranja-texto: #9a3412;
  /* forma */
  --raio-p: 6px; --raio: 8px; --raio-g: 12px;
  --sombra-1: 0 1px 2px rgba(15, 23, 42, .06);
  --sombra-2: 0 4px 14px rgba(15, 23, 42, .08);
  --anel-foco: 0 0 0 3px rgba(37, 99, 235, .28);
  /* espaços */
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px; --esp-6: 32px;
  /* tipografia */
  --fonte: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: "Cascadia Mono", "Consolas", "SFMono-Regular", Menlo, monospace;
  --tam-texto: 14px; --tam-pequeno: 12px;
  /* layout */
  --menu-largura: 248px; --menu-recolhido: 64px;
  --altura-controle: 36px;

  /* apelidos antigos (telas existentes continuam funcionando) */
  --fundo: var(--cor-fundo); --painel: var(--cor-superficie); --borda: var(--cor-borda); --texto: var(--cor-texto);
  --suave: var(--cor-texto-2); --marca: var(--cor-acao); --marca-esc: var(--cor-acao-esc);
  --ok: var(--cor-sucesso); --erro: var(--cor-erro); --alerta: var(--cor-alerta);
}

/* ---------- 2) base e layout ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--tam-texto)/1.5 var(--fonte); background: var(--cor-fundo); color: var(--cor-texto);
  display: flex; min-height: 100vh; -webkit-font-smoothing: antialiased; }
body.sem-menu { justify-content: center; align-items: flex-start; }
a { color: var(--cor-acao); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; line-height: 1.25; font-weight: 700; margin: 0 0 var(--esp-1); letter-spacing: -.01em; }
h2 { font-size: 16px; font-weight: 650; margin: var(--esp-5) 0 var(--esp-2); }
h3 { font-size: 14px; font-weight: 650; margin: var(--esp-3) 0 6px; }
.muted, small { color: var(--cor-texto-2); }
:focus-visible { outline: 2px solid var(--cor-acao); outline-offset: 2px; }
.ico { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.pular { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--cor-superficie); padding: 8px 12px;
  border-radius: var(--raio-p); box-shadow: var(--sombra-2); }
.pular:focus { left: 8px; }
main { flex: 1; padding: var(--esp-5) var(--esp-6) 60px; min-width: 0; }      /* ocupa toda a largura da tela */
main:focus { outline: none; }
body.sem-menu main { max-width: 440px; margin-top: 8vh; }
code, .codigo { font-family: var(--fonte-mono); font-size: 12.5px; }

/* ---------- 3) menu lateral ---------- */
.menu { width: var(--menu-largura); background: var(--cor-marinho); color: #fff; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; flex-shrink: 0; transition: width .18s ease; z-index: 10; }
.menu-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2);
  padding: var(--esp-4) var(--esp-3) var(--esp-3) var(--esp-4); }
.menu .marca { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 16px; min-width: 0; }
.menu .marca:hover { text-decoration: none; }
.marca-logo { width: 32px; height: 32px; border-radius: var(--raio); background: var(--cor-acao); display: grid; place-items: center;
  font-size: 13px; letter-spacing: .02em; flex: 0 0 auto; }
.marca-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-alternar { background: transparent; border: 0; color: #a9bdd3; padding: 6px; border-radius: var(--raio-p); line-height: 0; }
.menu-alternar:hover { background: var(--cor-marinho-2); color: #fff; }
.menu-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 0 var(--esp-2) var(--esp-3);
  scrollbar-width: thin; scrollbar-color: #3a5a7c transparent; }
.menu-nav a { display: flex; align-items: center; gap: 11px; color: #c8d6e5; padding: 7px 10px; border-radius: var(--raio-p);
  margin: 1px 0; position: relative; white-space: nowrap; }
.menu-nav a .ico { color: #8fa9c4; }
.menu-nav a:hover { background: var(--cor-marinho-2); color: #fff; text-decoration: none; }
.menu-nav a:hover .ico { color: #fff; }
.menu-nav a.ativo { background: rgba(37, 99, 235, .22); color: #fff; font-weight: 600; }
.menu-nav a.ativo .ico { color: #93b4ff; }
.menu-nav a.ativo::before { content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0;
  background: #60a5fa; }
.menu-nav .rotulo { overflow: hidden; text-overflow: ellipsis; }
.menu .grupo { display: block; padding: var(--esp-4) 10px 6px; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: #7f9ab6; white-space: nowrap; }
/* grupos do menu: clicar no título encolhe/expande (lembrado no cookie menu_fechados) */
.menu button.grupo { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none;
  border: 0; border-radius: var(--raio-p); cursor: pointer; font-family: inherit; text-align: left; margin: 0; }
.menu button.grupo:hover { color: #fff; }
.menu button.grupo:focus-visible { outline: 2px solid #93b4ff; outline-offset: -2px; }
.menu .seta-grupo { width: 12px; height: 12px; flex: 0 0 auto; transition: transform .15s ease; }
.menu button.grupo[aria-expanded="false"] .seta-grupo { transform: rotate(-90deg); }
.grupo-itens.fechado { display: none; }
body.menu-recolhido .grupo-itens.fechado { display: block; }       /* só ícones: mostra tudo */
body.menu-recolhido .menu .seta-grupo { display: none; }
.menu .usuario { flex: 0 0 auto; border-top: 1px solid rgba(255, 255, 255, .1); padding: var(--esp-3) var(--esp-3) var(--esp-3) var(--esp-4);
  background: rgba(0, 0, 0, .12); }
.usuario-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #2f5479; color: #fff; display: grid; place-items: center;
  font-weight: 700; flex: 0 0 auto; }
.usuario-nome { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.usuario-nome strong, .usuario-nome small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario-nome small { color: #9fb3c8; }
.usuario-acoes { display: flex; gap: var(--esp-1); margin-top: var(--esp-2); }
.usuario-acoes a, .usuario-acoes button.link { display: inline-flex; align-items: center; gap: 6px; color: #b8c9da; font-size: 13px;
  padding: 4px 8px; border-radius: var(--raio-p); text-decoration: none; }
.usuario-acoes a:hover, .usuario-acoes button.link:hover { background: var(--cor-marinho-2); color: #fff; }
.usuario-acoes .ico { width: 16px; height: 16px; }
.usuario-acoes form { margin: 0; }
.menu .so-recolhido, .menu .so-celular { display: none; }
/* modo recolhido: só ícones (o nome aparece como dica ao passar o mouse) */
body.menu-recolhido .menu { width: var(--menu-recolhido); }
body.menu-recolhido .menu .so-recolhido { display: inline; }
body.menu-recolhido .menu .so-expandido { display: none; }
body.menu-recolhido .menu-topo { flex-direction: column; padding: var(--esp-3) 0; gap: var(--esp-2); }
body.menu-recolhido .marca-nome, body.menu-recolhido .menu-nav .rotulo, body.menu-recolhido .usuario-nome,
body.menu-recolhido .usuario-acoes .rotulo { display: none; }
body.menu-recolhido .menu-nav { padding: 0 var(--esp-2); }
body.menu-recolhido .menu-nav a { justify-content: center; padding: 9px 0; }
body.menu-recolhido .menu .grupo { padding: 10px 0 4px; text-align: center; }
body.menu-recolhido .menu .grupo span { display: none; }
body.menu-recolhido .menu .grupo::after { content: ""; display: block; height: 1px; margin: 0 10px; background: rgba(255, 255, 255, .14); }
body.menu-recolhido .menu .usuario { padding: var(--esp-3) 0; }
body.menu-recolhido .usuario-id { justify-content: center; }
body.menu-recolhido .usuario-acoes { flex-direction: column; align-items: center; }

/* ---------- 4) cabeçalho das páginas ---------- */
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--cor-texto-2); margin: -6px 0 var(--esp-2); }
.breadcrumb .sep { color: var(--cor-texto-3); }
.breadcrumb a { color: var(--cor-texto-2); }
.topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--esp-3) var(--esp-4); flex-wrap: wrap;
  margin-bottom: var(--esp-5); }
.topo > div:first-child { min-width: 0; flex: 1 1 320px; }
.topo > .acoes, .topo > .btn, .topo > div:last-child:not(:first-child) { flex: 0 1 auto; max-width: 100%; }
.topo p.muted, .topo > div > .muted { margin: 2px 0 0; max-width: 820px; }
.acoes { display: flex; gap: var(--esp-2); flex-wrap: wrap; align-items: center; }
.painel { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-g);
  padding: var(--esp-4) var(--esp-5); margin-bottom: var(--esp-4); box-shadow: var(--sombra-1); }
.painel > h2:first-child { margin-top: 0; }

/* ---------- 5) botões ---------- */
.btn, button { font: inherit; font-weight: 550; cursor: pointer; border-radius: var(--raio-p); border: 1px solid var(--cor-borda-forte);
  background: var(--cor-superficie); padding: 7px 14px; min-height: var(--altura-controle); color: var(--cor-texto);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.2;
  transition: background .12s, border-color .12s, box-shadow .12s; }
.btn:hover, button:hover { background: var(--cor-superficie-2); border-color: var(--cor-texto-3); text-decoration: none; }
.btn:focus-visible, button:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.btn.primario, button.primario { background: var(--cor-acao); border-color: var(--cor-acao); color: #fff; }
.btn.primario:hover, button.primario:hover { background: var(--cor-acao-esc); border-color: var(--cor-acao-esc); }
.btn.perigo, button.perigo { color: var(--cor-erro); border-color: #f5c2c2; background: var(--cor-superficie); }
.btn.perigo:hover, button.perigo:hover { background: var(--cor-erro-fundo); border-color: var(--cor-erro); }
.btn.fantasma, button.fantasma { border-color: transparent; background: transparent; color: var(--cor-texto-2); }
.btn.fantasma:hover, button.fantasma:hover { background: #eef2f7; color: var(--cor-texto); }
.btn.pequeno, button.pequeno { padding: 3px 10px; min-height: 28px; font-size: 12.5px; }
button:disabled, .btn[aria-disabled=true] { opacity: .55; cursor: not-allowed; }
button.enviando { position: relative; color: transparent !important; pointer-events: none; }
button.enviando::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-color: #fff #fff transparent transparent; animation: girar .7s linear infinite; }
button:not(.primario).enviando::after { border-color: var(--cor-acao) var(--cor-acao) transparent transparent; }
@keyframes girar { to { transform: rotate(360deg); } }
button.link { background: none; border: 0; padding: 0; min-height: 0; color: var(--cor-acao); text-decoration: underline; font-weight: 400; }
form.em-linha { display: inline; }

/* ---------- 6) campos e formulários ---------- */
.grade-form { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--esp-3) var(--esp-4); }
.campo { display: flex; flex-direction: column; gap: 5px; grid-column: span 4; }
.campo.c2 { grid-column: span 2; } .campo.c3 { grid-column: span 3; } .campo.c6 { grid-column: span 6; }
.campo.c8 { grid-column: span 8; } .campo.c12 { grid-column: span 12; }
/* textos, títulos e blocos soltos dentro do formulário ocupam a linha toda */
.grade-form > .c12, .grade-form > p, .grade-form > h2, .grade-form > h3 { grid-column: 1 / -1; margin: 0; }
.campo > span { font-size: var(--tam-pequeno); color: var(--cor-texto-2); font-weight: 600; }
.obrig { color: var(--cor-erro); font-weight: 700; }
input[type=text], input[type=number], input[type=date], input[type=password], input[type=email], input[type=search],
input[type=file], select, textarea {
  font: inherit; padding: 7px 10px; min-height: var(--altura-controle); border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-p); background: var(--cor-superficie); color: var(--cor-texto); width: 100%; min-width: 0;
  transition: border-color .12s, box-shadow .12s; }
input[type=file] { padding: 5px; }
input:hover, select:hover, textarea:hover { border-color: var(--cor-texto-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cor-acao); box-shadow: var(--anel-foco); }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--cor-erro); }
input:user-invalid:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .22); }
input[readonly], input:disabled, select:disabled, textarea:disabled { background: #f1f5f9; color: var(--cor-texto-2); }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; accent-color: var(--cor-acao); }
textarea { min-height: 72px; resize: vertical; }
::placeholder { color: var(--cor-texto-3); }
.marcar { display: inline-flex; gap: 7px; align-items: center; margin-right: var(--esp-4); cursor: pointer; }
.marcar input { width: auto; }
.linha-marcar { grid-column: span 12; display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1); }
.erro-texto { color: var(--cor-erro); }

/* barra de filtros (compacta, acima das listas) */
.filtros { display: flex; gap: var(--esp-2) var(--esp-3); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--esp-4);
  padding: var(--esp-3) var(--esp-4); background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-radius: var(--raio-g); box-shadow: var(--sombra-1); }
.filtros .campo { grid-column: auto; min-width: 150px; flex: 0 1 180px; }
.filtros .campo:has(input[type=search]) { flex: 1 1 240px; }
.filtros .marcar { margin: 0 var(--esp-2) 8px 0; }
.filtros-acoes { display: flex; gap: var(--esp-2); align-items: center; margin-left: auto; }
.barra { background: #e2e8f0; border-radius: 99px; height: 8px; min-width: 90px; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--cor-sucesso); }

/* avisos (sucesso/erro/alerta) — com ícone de texto para não depender só da cor */
.aviso { padding: 10px 14px 10px 38px; border-radius: var(--raio); margin-bottom: var(--esp-4); border: 1px solid; position: relative; }
.aviso::before { position: absolute; left: 13px; top: 9px; font-weight: 700; width: 16px; text-align: center; }
.aviso.ok { background: var(--cor-sucesso-fundo); border-color: #86efac; color: var(--cor-sucesso-texto); }
.aviso.ok::before { content: "✓"; }
.aviso.erro { background: var(--cor-erro-fundo); border-color: #fca5a5; color: var(--cor-erro-texto); }
.aviso.erro::before { content: "!"; }
.aviso.alerta { background: var(--cor-alerta-fundo); border-color: #fcd34d; color: var(--cor-alerta-texto); }
.aviso.alerta::before { content: "!"; }

/* ---------- 7) tabelas ---------- */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--cor-superficie); }
.painel table { background: none; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--cor-borda); vertical-align: middle; }
th { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--cor-texto-2);
  background: var(--cor-superficie-2); white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover > td, table > tr:hover > td { background: #f8fafd; }
tr:last-child > td { border-bottom: 0; }
tfoot td, tfoot th { font-weight: 700; background: var(--cor-superficie-2); border-top: 1px solid var(--cor-borda); }
tr.inativo td { color: var(--cor-texto-3); }
td input[type=number], td select, td input[type=text] { padding: 5px 8px; min-height: 32px; }
td input.qtd { width: 90px; text-align: right; } td input.preco { width: 110px; text-align: right; }
td.acoes { display: table-cell; white-space: nowrap; text-align: right; }
td.acoes > * + * { margin-left: var(--esp-1); }
/* sem rolagem vertical própria (só a da página); tabela mais larga que a tela rola para o lado. Quando cabe, o JS
   marca .cabe e o cabeçalho fica fixo no topo da página enquanto rola */
.tabela-rolavel { overflow-x: auto; background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-radius: var(--raio-g); box-shadow: var(--sombra-1); }
.tabela-rolavel.cabe { overflow: visible; }
tr.linha-clicavel { cursor: pointer; }
.tabela-rolavel.cabe > table { border-radius: var(--raio-g); }
.tabela-rolavel table { border: 0; }
.tabela-rolavel > table > thead th, .tabela-rolavel > table > tbody > tr:first-child > th,
.tabela-rolavel > table > tr:first-child > th { position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px 0 var(--cor-borda); }
.painel .tabela-rolavel { box-shadow: none; max-height: none; }
.vazio { padding: var(--esp-6) var(--esp-4); text-align: center; color: var(--cor-texto-2); }
.paginacao { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: var(--esp-3) 0; }
.paginacao a, .paginacao .atual { min-width: 32px; height: 32px; padding: 0 8px; display: inline-grid; place-items: center;
  border: 1px solid var(--cor-borda); border-radius: var(--raio-p); background: var(--cor-superficie); color: var(--cor-texto); }
.paginacao a:hover { border-color: var(--cor-acao); color: var(--cor-acao); text-decoration: none; }
.paginacao .atual { background: var(--cor-acao); color: #fff; border-color: var(--cor-acao); font-weight: 600; }
.paginacao small { margin-left: var(--esp-2); }
.paginacao-barra { display: flex; align-items: center; gap: var(--esp-2) var(--esp-4); flex-wrap: wrap; margin: var(--esp-3) 0; }
.paginacao-barra .paginacao { margin: 0; }
.por-pagina { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
.por-pagina a, .por-pagina b { padding: 2px 8px; border-radius: var(--raio); border: 1px solid var(--cor-borda); font-size: 13px; }
.por-pagina b { background: var(--cor-acao-clara); border-color: var(--cor-acao); }

/* ---------- 8) componentes ---------- */
.selo { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 99px; font-size: 12px; font-weight: 600;
  background: var(--cor-neutro-fundo); color: var(--cor-neutro-texto); white-space: nowrap; }
.selo.aberto, .selo.aberta { background: var(--cor-info-fundo); color: var(--cor-info-texto); }
.selo.em_producao { background: var(--cor-laranja-fundo); color: var(--cor-laranja-texto); }
.selo.finalizado, .selo.finalizada, .selo.pago { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); }
.selo.cancelado, .selo.cancelada { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); }
.selo.saida { background: var(--cor-laranja-fundo); color: var(--cor-laranja-texto); } .selo.retorno { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); }
.selo.cor-cinza { background: var(--cor-neutro-fundo); color: var(--cor-neutro-texto); } .selo.cor-azul { background: var(--cor-info-fundo); color: var(--cor-info-texto); }
.selo.cor-amarelo { background: var(--cor-alerta-fundo); color: var(--cor-alerta-texto); } .selo.cor-laranja { background: var(--cor-laranja-fundo); color: var(--cor-laranja-texto); }
.selo.cor-verde { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); } .selo.cor-vermelho { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); }
.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--cor-borda); margin: var(--esp-2) 0 var(--esp-4); flex-wrap: wrap; }
.abas a { padding: 9px 14px; color: var(--cor-texto-2); font-weight: 550; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.abas a:hover { text-decoration: none; color: var(--cor-texto); }
.abas a.ativa { color: var(--cor-acao); border-bottom-color: var(--cor-acao); }
.abas a .contagem { margin-left: 6px; font-size: 11.5px; padding: 0 7px; border-radius: 99px; background: #e2e8f0; color: var(--cor-texto-2); }
.abas a.ativa .contagem { background: var(--cor-acao-clara); color: var(--cor-acao); }
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--esp-3); margin-bottom: var(--esp-5); }
.cartao { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-g); padding: 14px 16px; box-shadow: var(--sombra-1); }
.cartao b { display: block; font-size: 24px; margin-top: 2px; }
.resumo { display: flex; gap: var(--esp-5) var(--esp-6); flex-wrap: wrap; margin: var(--esp-1) 0 6px; }
.resumo div small { display: block; } .resumo div b { font-size: 16px; }
.dois { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-4); } @media (max-width: 900px) { .dois { grid-template-columns: 1fr; } }
.barra-add { display: flex; gap: var(--esp-2); align-items: flex-end; margin-bottom: 10px; flex-wrap: wrap; }
.barra-add .campo { grid-column: auto; min-width: 280px; }
.destaque-total { font-size: 18px; font-weight: 700; }
/* Pix: QR Code + copia e cola (pedido e PDV) */
.pix-corpo { display: flex; gap: var(--esp-5); flex-wrap: wrap; align-items: flex-start; }
.pix-qr svg { width: 220px; height: 220px; display: block; background: #fff; padding: 8px; border-radius: var(--raio); }
.pix-dados { flex: 1 1 280px; min-width: 0; }
.pix-dados p { margin: 0 0 var(--esp-2); }
.pix-codigo { width: 100%; font-family: monospace; font-size: 12px; word-break: break-all; }
.campo.acoes { flex-direction: row; gap: var(--esp-2); }
main > .painel + .painel, .tabela-rolavel + .painel { margin-top: var(--esp-4); }
.linha-tempo { list-style: none; margin: 0; padding: 0; } .linha-tempo li { padding: 6px 0; border-bottom: 1px solid var(--cor-borda); }
.linha-tempo li:last-child { border: 0; }
.acoes input[type=number] { width: 110px; padding: 4px 7px; }
td.neg, .neg { color: var(--cor-erro); font-weight: 600; }
td.pos, .pos { color: var(--cor-sucesso); font-weight: 600; }
/* painéis financeiros: cartões de indicador (cada um leva aos registros), gráficos SVG e barras de proporção */
h2.secao { margin: var(--esp-5) 0 var(--esp-3); font-size: 16px; } h2.secao small { font-weight: 400; font-size: 13px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--esp-3); margin-bottom: var(--esp-3); }
.kpis-2 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kpi { display: flex; flex-direction: column; gap: 2px; background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-radius: var(--raio-g); padding: 12px 16px; box-shadow: var(--sombra-1); color: var(--cor-texto); }
a.kpi[href]:hover { text-decoration: none; border-color: var(--cor-acao); box-shadow: 0 0 0 3px var(--cor-acao-clara); }
.kpi small { color: var(--cor-texto-2); font-size: 12.5px; }
.kpi b { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.kpi.pos b { color: var(--cor-sucesso); } .kpi.neg b { color: var(--cor-erro); }
.kpi .kpi-nota { font-size: 12px; color: var(--cor-texto-3); }
.grafico { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-g); padding: 14px 16px; }
.grafico svg { width: 100%; height: 190px; display: block; }
.grafico .eixo { stroke: var(--cor-borda); stroke-width: .3; }
.barra-ent { fill: var(--cor-sucesso); } .barra-sai { fill: var(--cor-erro); opacity: .8; }
.linha-saldo-graf { fill: none; stroke: var(--cor-acao); stroke-width: .6; vector-effect: non-scaling-stroke; }
.area-negativa { fill: var(--cor-erro-fundo); }
.grafico .zero { stroke: var(--cor-erro); stroke-width: .3; stroke-dasharray: 1 1; }
.grafico-area { position: relative; }
.faixa-ponto { fill: transparent; cursor: crosshair; }
.grafico-guia { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--cor-acao); pointer-events: none; }
.grafico-dica { position: absolute; z-index: 5; pointer-events: none; display: flex; flex-direction: column; gap: 1px;
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 6px 9px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .15); font-size: 12.5px; white-space: nowrap; }
.grafico-dica small { color: var(--cor-texto-2); }
.grafico-dica[hidden], .grafico-guia[hidden] { display: none; }
.abas.abas-sub { margin-top: 0; }
.abas.abas-sub a { padding: 6px 12px; font-size: 13px; }
.grafico-rotulos { display: flex; margin-top: 6px; }
.grafico-rotulos a { flex: 1; display: flex; flex-direction: column; align-items: center; font-size: 11.5px; color: var(--cor-texto-2); padding: 4px 2px; border-radius: var(--raio-p); }
.grafico-rotulos a:hover { background: var(--cor-acao-clara); text-decoration: none; }
.grafico-rotulos .pos, .grafico-rotulos .neg { font-weight: 500; }
.legenda { font-size: 12px; color: var(--cor-texto-2); margin-top: 6px; }
.legenda span { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 10px; vertical-align: middle; }
.legenda .cor-ent { background: var(--cor-sucesso); } .legenda .cor-sai { background: var(--cor-erro); }
.legenda .cor-saldo { background: var(--cor-acao); }
.proporcao { display: inline-block; width: calc(100% - 50px); min-width: 60px; height: 8px; background: var(--cor-superficie-2); border-radius: 99px; overflow: hidden; vertical-align: middle; }
.proporcao > span { display: block; height: 100%; background: var(--cor-acao); border-radius: 99px; }
.proporcao.atraso > span { background: var(--cor-erro); }
main.carregando > *:not(.topo):not(.abas):not(.filtros):not(.breadcrumb) { opacity: .4; pointer-events: none; transition: opacity .15s; }
[data-so-personalizado][hidden] { display: none; }
table.dre .dre-subtotal td { background: var(--cor-superficie-2); font-weight: 600; border-top: 1px solid var(--cor-borda); }
table.dre .dre-resultado td { background: var(--cor-acao-clara); font-weight: 700; border-top: 2px solid var(--cor-acao); }
table.dre .dre-sinal { display: inline-block; width: 14px; color: var(--cor-texto-3); font-weight: 600; }
tr.nao-confiavel td { background: #fffbeb; }
/* escolher/ordenar colunas das consultas (app.js, tabelas data-colunas) */
.col-oculta { display: none !important; }
.valor-retorno { display: inline-flex; gap: 4px; align-items: center; }
.valor-retorno input { width: 90px; padding: 3px 6px; text-align: right; }
.colunas-barra { position: relative; display: flex; justify-content: flex-end; margin-bottom: 6px; }
.colunas-painel { position: absolute; right: 0; top: 100%; z-index: 30; background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-radius: var(--raio-g); box-shadow: var(--sombra-2, 0 8px 24px rgba(15, 23, 42, .15)); padding: 10px 12px; min-width: 280px; max-height: 70vh; overflow: auto; }
.colunas-painel p { margin: 0 0 6px; font-size: 12.5px; }
.colunas-painel ul { list-style: none; margin: 0 0 8px; padding: 0; }
.colunas-painel li { display: flex; align-items: center; gap: 4px; padding: 3px 0; border-bottom: 1px solid var(--cor-borda); }
.colunas-painel li label { flex: 1; cursor: pointer; }
.colunas-painel li button { padding: 1px 7px; }
table.orcamento input[type=number] { width: 92px; padding: 4px 6px; text-align: right; }
table.orcamento td { padding: 4px 6px; }
/* financeiro: anexos, conciliação de extrato, fluxo de caixa por categoria */
.lista-anexos { list-style: none; margin: 0 0 var(--esp-3); padding: 0; }
.lista-anexos li { padding: 6px 0; border-bottom: 1px solid var(--cor-borda); display: flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap; }
.conciliar-item { margin-bottom: var(--esp-3); }
.conciliar-cab { display: flex; justify-content: space-between; gap: var(--esp-3); flex-wrap: wrap; align-items: center; }
.linha-sugestao { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-2); padding: 5px 8px; border: 1px solid var(--cor-borda); border-radius: var(--raio); margin-bottom: 4px; flex-wrap: wrap; }
.conciliar-item details { margin-top: var(--esp-2); }
.conciliar-item details summary { cursor: pointer; color: var(--cor-acao); font-weight: 550; }
.conciliar-item details form { margin-top: var(--esp-2); }
.arvore-fluxo .linha-categoria td { background: var(--cor-superficie-2, #f8fafc); }
.arvore-fluxo .alternar { border: 0; background: none; padding: 0 4px; min-width: 20px; cursor: pointer; font-size: 13px; color: var(--cor-texto-2); }
.arvore-fluxo .alternar-vazio { display: inline-block; width: 24px; }
/* categorias × dias: a coluna da categoria fica parada ao rolar para o lado */
.arvore-fluxo td, .arvore-fluxo th { white-space: nowrap; }
.arvore-fluxo .fixa { position: sticky; left: 0; z-index: 1; background: var(--cor-superficie); min-width: 260px; max-width: 360px; white-space: normal; box-shadow: 1px 0 0 var(--cor-borda); }
.tabela-rolavel > table.arvore-fluxo tr:first-child > th.fixa { z-index: 3; background: var(--cor-superficie-2); }
.arvore-fluxo .linha-categoria td.fixa, .arvore-fluxo .linha-saldo td.fixa { background: var(--cor-superficie-2, #f8fafc); }
.arvore-fluxo .linha-saldo td { background: var(--cor-superficie-2, #f8fafc); border-top: 1px solid var(--cor-borda); }
tr.destaque td { background: var(--cor-acao-clara); }
.cel-titulo { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.cel-titulo small { font-size: 12px; }
.cel-titulo .nome { font-weight: 600; color: var(--cor-texto); }
.cel-produto { display: flex; align-items: center; gap: 10px; }
.cel-produto .mini-img { width: 34px; height: 34px; }
a.codigo { font-family: var(--fonte-mono); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- responsivo e impressão ---------- */
@media (max-width: 1100px) { main { padding: var(--esp-4) var(--esp-5) 48px; } }
@media (max-width: 800px) {
  body { flex-direction: column; }
  .menu, body.menu-recolhido .menu { width: auto; height: auto; position: sticky; top: 0; z-index: 20; }
  /* no celular o menu começa fechado: o botão ☰ abre a lista (o modo recolhido do computador não vale aqui) */
  body.menu-recolhido .menu-topo { flex-direction: row; padding: var(--esp-3) var(--esp-4); }
  body.menu-recolhido .marca-nome { display: inline; }
  .menu .so-expandido, .menu .so-recolhido, body.menu-recolhido .menu .so-recolhido { display: none; }
  .menu .so-celular { display: inline; }
  .menu-nav, .menu .usuario { display: none; }
  body.menu-celular-aberto .menu-nav { display: block; max-height: 65vh; }
  body.menu-celular-aberto .menu .usuario { display: block; }
  body.menu-recolhido.menu-celular-aberto .menu-nav .rotulo, body.menu-recolhido.menu-celular-aberto .usuario-nome,
  body.menu-recolhido.menu-celular-aberto .menu .grupo span { display: inline; }
  body.menu-recolhido.menu-celular-aberto .menu-nav a { justify-content: flex-start; padding: 7px 10px; }
  main { padding: var(--esp-3); }
  .campo, .campo.c2, .campo.c3, .campo.c6, .campo.c8 { grid-column: span 12; }
  .filtros .campo { flex: 1 1 100%; }
  .tabela-rolavel > table > thead th, .tabela-rolavel > table > tbody > tr:first-child > th,
  .tabela-rolavel > table > tr:first-child > th { position: static; }
  table.compacta th, table.compacta td { padding: 6px 5px; font-size: 13px; } table.compacta th { white-space: normal; }
}
@media print {
  .menu, .acoes, .abas, .nao-imprimir, .aviso, .breadcrumb, .filtros, .pular { display: none !important; }
  body { background: #fff; display: block; } main { padding: 0; max-width: none; }
  .painel, .tabela-rolavel, .filtros { border: 0; padding: 0; box-shadow: none; max-height: none; overflow: visible; }
  tbody tr:hover > td { background: none; }
}

/* ---------- 9) módulos ---------- */
/* ---------- grade cor × tamanho ---------- */
table.grade { width: auto; min-width: 260px; border-collapse: collapse; }
table.grade th, table.grade td { border: 1px solid var(--borda, #d9dee5); padding: .3rem .55rem; }
table.grade thead th, table.grade tfoot th, table.grade tfoot td { background: #f1f4f8; }
table.grade tbody th { text-align: left; white-space: nowrap; background: #fafbfc; }
table.grade td.num { text-align: right; min-width: 3.6rem; }
table.grade td.nada, table.grade .nada { color: #c3c9d1; text-align: center; background: #f6f7f9; }
table.grade.entrada input { width: 4.6rem; padding: .25rem .35rem; text-align: right; }
table.grade tfoot td { font-weight: 600; }
table.grade small.mm { display: block; font-size: .72rem; white-space: nowrap; }
table.grade td.inativo { opacity: .5; text-decoration: line-through; }
.bloco-produto { border: 1px solid #d9dee5; border-radius: 6px; padding: .7rem .9rem; margin-bottom: .9rem; background: #fff; }
.bloco-cab { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; flex-wrap: wrap; }
.bloco-cab button { margin-left: auto; }
.bloco-rodape { margin: .5rem 0 0; }
.preco-linha { max-width: 14rem; }
.grades-lado { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start; }
.grades-lado > div > small { display: block; font-weight: 600; margin-bottom: .2rem; }
details > summary { cursor: pointer; font-size: .85rem; color: #2a5db0; }

/* ---------- kanban ---------- */
.kanban { display: flex; gap: .8rem; overflow-x: auto; padding-bottom: .8rem; align-items: flex-start; }
.kb-coluna { flex: 0 0 270px; background: #eef1f5; border-radius: 8px; padding: .55rem; min-height: 120px; }
.kb-coluna h2 { font-size: 1rem; margin: .1rem .2rem .55rem; display: flex; justify-content: space-between; align-items: center; }
.kb-qtd { background: #fff; border-radius: 999px; padding: 0 .55rem; font-size: .8rem; }
.kb-card { background: #fff; border: 1px solid #d9dee5; border-left: 4px solid #3b82c4; border-radius: 6px; padding: .5rem .6rem; margin-bottom: .55rem; font-size: .88rem; }
.kb-card header { display: flex; justify-content: space-between; gap: .4rem; font-weight: 700; }
.kb-card .kb-produto { margin: .15rem 0; }
.kb-card .kb-linha { color: #444; }
.kb-card.atrasada { background: #fdeaea; border-color: #e0a0a0; border-left-color: #c62828; }
.kb-card.atrasada .kb-atraso { color: #c62828; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.kb-card.pronta { border-left-color: #2e7d32; }
.kb-vazio { color: #8a94a1; text-align: center; font-size: .85rem; }
.setor-grade { margin: .5rem 0 .8rem; }
.img-produto { max-width: 160px; max-height: 160px; border: 1px solid #d9dee5; border-radius: 6px; object-fit: contain; background: #fff; }
.barra-img { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.mini-img { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; border: 1px solid #d9dee5; background: #fff; flex: 0 0 auto; }
.kb-card .kb-topo { display: flex; gap: .5rem; }
.kb-card .kb-topo > div { flex: 1; min-width: 0; }
.com-img { display: flex; gap: 1rem; align-items: center; }
.com-img .img-produto { max-width: 90px; max-height: 90px; }
.ajuste { display: flex; flex-direction: column; gap: .35rem; padding: .4rem 0; min-width: 240px; }
.ajuste label { display: flex; gap: .4rem; align-items: center; }
td.neg, .neg { color: #c62828; font-weight: 600; }
/* ---------- PDV ---------- */
.pdv-topo { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 14px; align-items: end; }
.pdv-topo > .campo { grid-column: auto; }
.pdv-topo:has(.pdv-vendedor) { grid-template-columns: minmax(200px, 1fr) minmax(180px, 1fr) 2fr; }
@media (max-width: 800px) { .pdv-topo, .pdv-topo:has(.pdv-vendedor) { grid-template-columns: 1fr; } }
.pdv-busca-caixa { position: relative; }
#pdv-busca { font-size: 18px; padding: 10px 12px; }
.pdv-sugestoes { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 0; list-style: none;
  background: #fff; border: 1px solid var(--borda); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.12);
  max-height: 360px; overflow-y: auto; }
.pdv-sugestoes li { padding: 7px 10px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid #f0f2f5; }
.pdv-sugestoes li.ativo, .pdv-sugestoes li:hover { background: #e0ecf8; }
.pdv-sugestoes small { white-space: nowrap; }
.pdv-itens td input { width: 90px; text-align: right; }
.pdv-itens tr.sem-estoque td.est { color: var(--erro); font-weight: 600; }
.pdv-rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pdv-grande { font-size: 16px; padding: 10px 20px; }
.pdv-acoes { justify-content: space-between; }
.pdv-pagamentos select { min-width: 200px; } .pdv-pagamentos input { width: 120px; text-align: right; }
.pdv-fim { text-align: center; padding: 30px; } .pdv-fim .acoes { justify-content: center; }

/* ---------- marcadores ---------- */
.marcadores-escolha { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: 13px;
  cursor: pointer; border: 1px solid transparent; opacity: .55; }
.chip:has(input:checked) { opacity: 1; border-color: currentColor; font-weight: 600; }
.chip input { width: auto; margin: 0; }
.chip.cor-azul { background: #e0ecf8; color: #17436d; } .chip.cor-verde { background: #dcf3e5; color: #14532d; }
.chip.cor-amarelo { background: #fdf3c8; color: #6b5200; } .chip.cor-laranja { background: #fff1d6; color: #8a4b08; }
.chip.cor-vermelho { background: #fde4e1; color: #7a1c13; } .chip.cor-cinza { background: #e5e7eb; color: #374151; }
.selo.marcador { font-size: 11px; padding: 0 7px; }
tr.linha-grupo td { background: #f1f4f8; padding-top: 10px; }

/* ---------- portal: produção agrupada ---------- */
.segmentos { display: inline-flex; gap: 2px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.segmentos .muted { margin-right: 8px; }
.segmentos a { padding: 6px 14px; border: 1px solid var(--borda); background: #fff; color: var(--texto); }
.segmentos a:first-of-type { border-radius: 6px 0 0 6px; } .segmentos a:last-of-type { border-radius: 0 6px 6px 0; }
.segmentos a.ativo { background: var(--marca); border-color: var(--marca); color: #fff; }
.segmentos a:hover { text-decoration: none; }
.barra-setores { display: flex; height: 12px; border-radius: 99px; overflow: hidden; margin-top: 8px; background: #e5e7eb; gap: 2px; }
.barra-setores .seg { display: block; min-width: 4px; }
.barra-setores .cor-cinza { background: #9ca3af; } .barra-setores .cor-azul { background: #3b82c4; }
.barra-setores .cor-amarelo { background: #e0b100; } .barra-setores .cor-laranja { background: #e07b00; }
.barra-setores .cor-verde { background: #2e7d32; }
@media print { .barra-setores, .barra-setores .seg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .grupo-producao { break-inside: avoid; margin-bottom: 14px; } }

/* ---------- ordenação pelo cabeçalho ---------- */
th.ordenavel a, th[data-ordenar] { color: inherit; cursor: pointer; user-select: none; }
th.ordenavel a:hover, th[data-ordenar]:hover { color: var(--marca); text-decoration: none; }
th .seta { margin-left: 4px; font-size: 10px; color: var(--marca); }
@media print { th .seta { display: none; } }
.config-item { padding: 6px 0 10px; border-bottom: 1px solid var(--borda); }
.config-item:last-child { border-bottom: 0; }
.config-item p { margin: 4px 0 0 26px; max-width: 760px; }
.config-escolha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-left: 26px; }
.config-escolha select { width: auto; min-width: 240px; }
td.pos, .pos { color: var(--ok); font-weight: 600; }
/* ---------- romaneio de envio para terceiro (impresso) ---------- */
.romaneio { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px 22px; max-width: 900px; }
.rm-cab { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--texto); padding-bottom: 10px; }
.rm-nome { font-size: 18px; }
.rm-doc { text-align: right; }
.rm-titulo { font-weight: 700; font-size: 16px; letter-spacing: .04em; }
.rm-bloco { margin-top: 14px; }
.rm-bloco small, .rm-datas small { display: block; color: var(--suave); font-size: 11px; text-transform: uppercase; }
.rm-bloco h3 { margin: 0 0 6px; }
.rm-duas { display: flex; justify-content: space-between; gap: 16px; }
.rm-datas { display: flex; gap: 22px; }
table.rm-tabela { width: 100%; border-collapse: collapse; }
table.rm-tabela th, table.rm-tabela td { border: 1px solid #9aa3ae; padding: 5px 7px; font-size: 13px; }
table.rm-tabela th { background: #f1f4f8; color: var(--texto); }
table.rm-tabela .rm-retorno { width: 120px; }
table.rm-tabela td:first-child { white-space: nowrap; }
.rm-assinaturas { display: flex; gap: 20px; justify-content: space-between; margin-top: 34px; font-size: 13px; text-align: center; }
@media print {
  .romaneio { border: 0; padding: 0; max-width: none; }
  table.rm-tabela th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { margin: 12mm; }
}
[data-acao=variacoes] { white-space: nowrap; }
#corpo-mp select.sel-mp { min-width: 340px; }
tr.sub-variacao td { background: var(--cor-superficie-2); font-size: 13px; padding-top: 4px; padding-bottom: 4px; }

/* ---------- CRM: central de atendimento (lista | conversa | contato) ---------- */
main:has(.central) { padding: var(--esp-3) var(--esp-4) var(--esp-3); }
.central { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) minmax(240px, 300px);
  height: calc(100vh - 70px); min-height: 480px; background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-radius: var(--raio-g); box-shadow: var(--sombra-1); overflow: hidden; }
.central:not(.com-conversa) { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
.central-lista { display: flex; flex-direction: column; border-right: 1px solid var(--cor-borda); min-height: 0; }
.central-busca { padding: var(--esp-3) var(--esp-3) var(--esp-2); }
.central-busca input { width: 100%; }
.central-filtros { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 var(--esp-3) var(--esp-2); border-bottom: 1px solid var(--cor-borda); }
.central-filtros a { font-size: 12px; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--cor-borda); color: var(--cor-texto-2); }
.central-filtros a:hover { text-decoration: none; background: var(--cor-superficie-2); }
.central-filtros a.ativo { background: var(--cor-acao-clara); border-color: var(--cor-acao); color: var(--cor-acao-esc); font-weight: 600; }
.central-itens { overflow-y: auto; flex: 1; }
.lista-conversas { list-style: none; margin: 0; padding: 0; }
.lista-conversas .vazio { padding: var(--esp-4); color: var(--cor-texto-2); }
.item-conversa { display: flex; gap: var(--esp-2); padding: 10px var(--esp-3); border-bottom: 1px solid var(--cor-borda);
  color: var(--cor-texto); }
.item-conversa:hover { background: var(--cor-superficie-2); text-decoration: none; }
.item-conversa.ativa { background: var(--cor-acao-clara); box-shadow: inset 3px 0 0 var(--cor-acao); }
.avatar { flex: 0 0 36px; height: 36px; border-radius: 50%; background: #dbe4f0; color: var(--cor-marinho); font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.item-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.item-linha { display: flex; align-items: center; gap: 6px; min-width: 0; }
.item-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-hora { flex: 0 0 auto; }
.item-previa { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cor-texto-2); }
.item-conversa.nao-lida .item-previa { color: var(--cor-texto); font-weight: 600; }
.item-info { font-size: 11.5px; color: var(--cor-texto-3); }
.item-info .selo { font-size: 10.5px; padding: 0 6px; }
.central .contagem { background: var(--cor-acao); color: #fff; border-radius: 99px; font-size: 11px; font-weight: 700;
  padding: 0 6px; min-width: 18px; text-align: center; }
.prioridade { font-weight: 800; color: var(--cor-alerta); } .prioridade.p-urgente { color: var(--cor-erro); }

.central-conversa { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--cor-fundo); }
.central-cabecalho { display: flex; align-items: center; gap: var(--esp-3); padding: 10px var(--esp-4);
  background: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); }
.central-titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.central-titulo small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.central-cabecalho .acoes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.central-voltar { display: none; }
.central-mensagens { flex: 1; overflow-y: auto; padding: var(--esp-3) var(--esp-4); display: flex; flex-direction: column; }
.central-mensagens:focus { outline: none; }
.central-anteriores { text-align: center; margin-bottom: var(--esp-2); }
.divisor-dia { align-self: center; font-size: 11.5px; color: var(--cor-texto-2); background: var(--cor-superficie);
  border: 1px solid var(--cor-borda); border-radius: 99px; padding: 1px 10px; margin: var(--esp-2) auto; width: fit-content; }
.msg { max-width: min(72%, 620px); padding: 6px 10px 4px; border-radius: var(--raio); margin: 2px 0; box-shadow: var(--sombra-1);
  display: flex; flex-direction: column; width: fit-content; }
.msg.entrada { background: var(--cor-superficie); border: 1px solid var(--cor-borda); align-self: flex-start; margin-right: auto; }
.msg.saida { background: #dcf3e3; border: 1px solid #bfe5cb; align-self: flex-end; margin-left: auto; }
.msg.msg-pendente { opacity: .8; border-style: dashed; }
.msg.msg-erro { background: var(--cor-erro-fundo); border-color: #fca5a5; }
.msg-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-tipo { font-style: italic; color: var(--cor-texto-2); font-size: 13px; }
.msg-meta { align-self: flex-end; font-size: 11px; color: var(--cor-texto-2); margin-top: 2px; white-space: nowrap; }
.msg-status { margin-left: 3px; } .msg-status.st-lida { color: var(--cor-acao); font-weight: 700; }
.msg-status.st-erro { color: var(--cor-erro); font-weight: 700; }
.msg-falha { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.msg-falha small { color: var(--cor-erro-texto); flex-basis: 100%; }
.central-aviso { margin: 0; padding: 6px var(--esp-4); background: var(--cor-alerta-fundo); color: var(--cor-alerta-texto); font-size: 13px; }
.central-compor { display: flex; gap: var(--esp-2); align-items: flex-end; flex-wrap: wrap; padding: 10px var(--esp-4);
  background: var(--cor-superficie); border-top: 1px solid var(--cor-borda); }
.central-compor textarea { flex: 1; min-height: 44px; max-height: 180px; resize: vertical; }
.central-compor p { flex-basis: 100%; margin: 0; }
.compor-anexo { flex-basis: 100%; display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 8px;
  background: var(--cor-acao-clara); border-radius: var(--raio-p); width: fit-content; }
[data-gravar].gravando { background: var(--cor-erro-fundo); border-color: var(--cor-erro); color: var(--cor-erro); }
.msg-anexo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 2px; }
.msg-img { max-width: 260px; max-height: 320px; border-radius: var(--raio-p); display: block; }
.msg-video { max-width: 300px; max-height: 320px; border-radius: var(--raio-p); }
.msg-anexo audio { width: 260px; max-width: 100%; height: 36px; }
.msg-doc { display: inline-flex; gap: 4px; align-items: center; padding: 6px 10px; border-radius: var(--raio-p);
  background: rgba(255, 255, 255, .6); border: 1px solid var(--cor-borda); }
.central-vazia { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--cor-texto-2); }
.central-vazia .ico { width: 40px; height: 40px; }

.central-painel { border-left: 1px solid var(--cor-borda); overflow-y: auto; padding: var(--esp-2) var(--esp-3); }
.painel-bloco { border-bottom: 1px solid var(--cor-borda); padding-bottom: var(--esp-2); }
.painel-bloco:last-child { border-bottom: 0; }
.painel-bloco p { margin: 4px 0; }
.painel-form { display: flex; flex-direction: column; gap: 6px; margin-top: var(--esp-2); }
.painel-form .campo { grid-column: auto; }
.painel-form button { align-self: flex-start; }
.painel-form.em-linha-campos { flex-direction: row; align-items: flex-end; }
.painel-historico { list-style: none; margin: 0; padding: 0; }

.resultado-busca { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 0;
  border-bottom: 1px dashed var(--cor-borda); }
.sugestao-vinculo { background: var(--cor-alerta-fundo); border-radius: var(--raio-p); padding: 6px 8px; margin: 4px 0; }
.resultado-produto { padding: 6px 0; border-bottom: 1px dashed var(--cor-borda); display: flex; flex-direction: column; gap: 2px; }
.resultado-produto .acoes { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.central-painel .campo input, .central-painel .campo select, .central-painel .campo textarea { width: 100%; }

/* funil de leads (uma coluna por etapa) */
.funil { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: var(--esp-3);
  overflow-x: auto; padding-bottom: var(--esp-2); align-items: start; }
.funil-coluna { background: var(--cor-superficie-2); border: 1px solid var(--cor-borda); border-radius: var(--raio);
  padding: var(--esp-2); display: flex; flex-direction: column; gap: var(--esp-2); min-height: 120px; }
.funil-cab { display: flex; flex-direction: column; padding: 2px 4px 6px; border-bottom: 3px solid var(--cor-borda-forte); }
.funil-cab.cor-borda-azul { border-color: var(--cor-acao); } .funil-cab.cor-borda-verde { border-color: var(--cor-sucesso); }
.funil-cab.cor-borda-amarelo { border-color: var(--cor-alerta); } .funil-cab.cor-borda-laranja { border-color: #ea580c; }
.funil-cab.cor-borda-vermelho { border-color: var(--cor-erro); } .funil-cab.cor-borda-cinza { border-color: var(--cor-texto-3); }
.funil-cartao { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-p);
  padding: 8px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--sombra-1); }
.funil-mover select { width: 100%; font-size: 12px; min-height: 28px; margin-top: 4px; }
.funil .vazio { color: var(--cor-texto-3); text-align: center; margin: 0; }

/* respostas rápidas (caixa acima do campo de mensagem) e tarefas */
.central-compor { position: relative; }
.respostas-caixa { position: absolute; left: var(--esp-4); right: var(--esp-4); bottom: 100%; max-height: 320px; overflow-y: auto;
  background: var(--cor-superficie); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio); box-shadow: var(--sombra-2);
  padding: var(--esp-2); z-index: 20; }
.respostas-caixa input { width: 100%; margin-bottom: 6px; }
.respostas-cat { font-size: 11px; text-transform: uppercase; color: var(--cor-texto-3); margin: 6px 0 2px; }
.resposta-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left;
  border: 0; border-radius: var(--raio-p); background: none; padding: 6px 8px; font-weight: 400; min-height: 0; }
.resposta-item:hover { background: var(--cor-acao-clara); }
.lista-tarefas { list-style: none; margin: 0; padding: 0; }
.lista-tarefas.painel { padding: var(--esp-2) var(--esp-3); }
.tarefa { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; }
.tarefa span { display: flex; flex-direction: column; }
.tarefa.vencida a { color: var(--cor-erro); font-weight: 600; }
.tarefa.feita a { text-decoration: line-through; color: var(--cor-texto-3); }
.tarefa-detalhe { padding: 0 0 6px 40px; border-bottom: 1px solid var(--cor-borda); }
.item-conversa.atrasada .item-hora { color: var(--cor-erro); font-weight: 700; }
.alerta-parado { color: var(--cor-alerta-texto); background: var(--cor-alerta-fundo); border-radius: 4px; padding: 0 5px; width: fit-content; }

.formulas { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 6px 16px; margin: var(--esp-3) 0 0; }
.formulas dt { font-weight: 600; } .formulas dd { margin: 0; color: var(--cor-texto-2); }
@media (max-width: 700px) { .formulas { grid-template-columns: 1fr; } .formulas dd { margin-bottom: 6px; } }

.diagnostico { list-style: none; margin: 0 0 var(--esp-2); padding: 0; }
.diagnostico li { padding: 3px 0; } .diagnostico li.ok b { color: var(--cor-sucesso-texto); }
.diagnostico li.falha b { color: var(--cor-erro); }

/* configurações: menu de módulos à esquerda */
.config-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--esp-4); align-items: start; }
.config-menu { display: flex; flex-direction: column; gap: 2px; background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-radius: var(--raio-g); padding: var(--esp-2); position: sticky; top: var(--esp-3); }
.config-menu a { padding: 8px 12px; border-radius: var(--raio-p); color: var(--cor-texto); }
.config-menu a:hover { background: var(--cor-superficie-2); text-decoration: none; }
.config-menu a.ativo { background: var(--cor-acao-clara); color: var(--cor-acao-esc); font-weight: 600; }
.config-atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--esp-3); margin-bottom: var(--esp-4); }
.config-atalho { display: flex; flex-direction: column; gap: 4px; color: var(--cor-texto); margin: 0; }
.config-atalho:hover { border-color: var(--cor-acao); text-decoration: none; }
@media (max-width: 760px) { .config-layout { grid-template-columns: 1fr; } .config-menu { position: static; flex-direction: row; flex-wrap: wrap; } }

.central-ver-painel { display: none; }
@media (max-width: 1100px) {
  .central.com-conversa { grid-template-columns: 240px minmax(0, 1fr) 240px; }
}
@media (max-width: 900px) {   /* o painel do contato vira uma gaveta aberta pelo botão "Dados" */
  .central.com-conversa { grid-template-columns: 240px minmax(0, 1fr); }
  .central-painel { display: none; }
  .central.ver-painel .central-painel { display: block; position: fixed; top: 0; right: 0; bottom: 0; z-index: 40;
    width: min(320px, 92vw); background: var(--cor-superficie); box-shadow: var(--sombra-2); }
  .central-ver-painel { display: inline-flex; }
}
@media (max-width: 760px) {   /* celular: ou a lista, ou a conversa */
  main:has(.central) { padding: 0; }
  .central, .central.com-conversa, .central:not(.com-conversa) { grid-template-columns: 1fr; height: calc(100vh - 56px);
    border-radius: 0; border-left: 0; border-right: 0; }
  .central.com-conversa .central-lista { display: none; }
  .central:not(.com-conversa) .central-conversa { display: none; }
  .central-voltar { display: inline-flex; }
  .msg { max-width: 88%; }
}

/* Consultas: barra de seleção / ações em massa / exportar / imprimir (macro m.consulta) */
.consulta-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); margin: var(--esp-2) 0; }
.consulta-sel { color: var(--cor-texto-2); font-size: 13px; }
.consulta-massa { display: inline-flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
.consulta-massa[hidden], .consulta-campo[hidden] { display: none; }
.consulta-massa select, .consulta-massa input { width: auto; min-width: 0; max-width: 260px; }
.consulta-saida { margin-left: auto; display: inline-flex; gap: var(--esp-2); }
th.col-sel, td.col-sel { width: 32px; text-align: center; padding-left: 6px; padding-right: 6px; }
tr.selecionada > td { background: var(--cor-acao-clara); }
#impressao-consulta { display: none; }
@media print {
  body.imprimindo-consulta > :not(#impressao-consulta) { display: none !important; }
  body.imprimindo-consulta #impressao-consulta { display: block; }
  #impressao-consulta table { width: 100%; border-collapse: collapse; font-size: 10px; }
  #impressao-consulta th, #impressao-consulta td { border: 1px solid #999; padding: 2px 4px; text-align: left; }
  #impressao-consulta h1 { font-size: 16px; margin: 0 0 4px; }
}
@media (max-width: 800px) { .consulta-saida { margin-left: 0; } }
/* Etiquetas: editor (prévia em escala) e página de impressão */
.et-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 40%); gap: var(--esp-4); align-items: start; }
.et-previa-box { position: sticky; top: var(--esp-3); }
.et-previa { background: var(--cor-fundo); border: 1px dashed var(--cor-borda-forte); border-radius: var(--raio); padding: var(--esp-4); overflow: auto; }
.et-previa .etiqueta { transform-origin: top left; box-shadow: 0 0 0 1px var(--cor-borda-forte); }
.et-itens input, .et-itens select { width: 100%; min-width: 60px; }
.et-itens td:first-child select { min-width: 150px; }
.et-itens td:nth-child(2) input { min-width: 200px; }
.et-itens td:nth-child(8) select { min-width: 100px; }
.et-itens .marcar { white-space: nowrap; display: block; }
.etiqueta { position: relative; overflow: hidden; background: #fff; color: #000; font-family: Arial, sans-serif; box-sizing: border-box; }
.et-el { position: absolute; overflow: hidden; line-height: 1.1; white-space: pre-wrap; word-break: break-word; }
.et-el svg { display: block; width: 100%; height: 100%; }
.et-qr svg { width: auto; max-width: 100%; height: 100%; }
.et-linha { border-top: 0.3mm solid #000; height: 0 !important; }
.et-erro { font-size: 7pt; color: #b91c1c; }
.et-previa .et-el { cursor: move; outline: 1px dotted rgba(37, 99, 235, .45); }
.et-previa .et-el.arrastando { outline: 1px solid var(--cor-acao); }
body.et-impressao { background: #fff; margin: 0; }
.et-aviso { padding: 8px 12px; background: var(--cor-info-fundo); color: var(--cor-info-texto); font-size: 13px; }
.et-folha-linha { display: flex; box-sizing: border-box; break-after: page; page-break-after: always; }
.et-folha-a4 { display: grid; }
.et-folha-a4 .etiqueta { break-inside: avoid; }
@media print { .et-aviso { display: none; } }
@media (max-width: 900px) { .et-layout { grid-template-columns: 1fr; } .et-previa-box { position: static; } }
/* Painel de estoque */
.painel-atencao { border-left: 4px solid var(--cor-alerta); }
.lista-atencao { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.kpi.kpi-alerta { border-color: var(--cor-alerta); background: var(--cor-alerta-fundo); }
details.formula { margin: 0 0 var(--esp-3); }
details.formula summary { cursor: pointer; color: var(--cor-acao); font-size: 13px; }
details.formula p { margin: 6px 0 0; max-width: 980px; }
/* Lista de marcação com busca (cores da grade) */
.filtro-lista-busca { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; margin-bottom: var(--esp-2); }
.filtro-lista-busca input[type=search] { flex: 1 1 220px; }
.filtro-lista-itens { max-height: 260px; overflow-y: auto; border: 1px solid var(--cor-borda); border-radius: var(--raio);
  padding: var(--esp-2); display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px var(--esp-2); }
.filtro-lista-itens label.marcada { font-weight: 600; color: var(--cor-acao-esc); }.filtro-lista-itens label[hidden] { display: none; }

/* Pedido: disponível em estoque embaixo da quantidade */
.grade.entrada small.disp { display: block; font-size: 11px; color: var(--cor-texto-2); white-space: nowrap; }
.grade.entrada small.disp.falta { color: var(--cor-erro); font-weight: 600; }

/* Compras: histórico de custo do item */
.compra-hist { margin-top: var(--esp-2); background: var(--cor-fundo); font-size: 13px; }
.compra-hist table { font-size: 13px; }

/* Perfis de acesso: tabela de módulos */
.modulos-acesso td.centro, .modulos-acesso th.centro { text-align: center; }

/* Metas e desempenho */
.metas-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--esp-3); }
.meta-cartao { margin: 0; border-left: 4px solid var(--cor-borda-forte); }
.meta-cartao.st-atingida, .meta-cartao.st-no_ritmo { border-left-color: var(--cor-sucesso); }
.meta-cartao.st-atencao { border-left-color: var(--cor-alerta); }
.meta-cartao.st-risco, .meta-cartao.st-nao_atingida { border-left-color: var(--cor-erro); }
.meta-cab { display: flex; justify-content: space-between; gap: var(--esp-2); align-items: flex-start; }
.meta-numeros { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); margin: var(--esp-2) 0; }
.meta-numeros small { display: block; color: var(--cor-texto-2); font-size: 12px; }
.meta-numeros b { font-size: 16px; }
.meta-explica { font-size: 13px; margin: 6px 0; }
.meta-evolucao { display: flex; align-items: flex-end; gap: 3px; height: 36px; margin: 6px 0; }
.meta-evolucao .barra-mini { flex: 1; min-height: 2px; background: var(--cor-borda-forte); border-radius: 2px 2px 0 0; }
.meta-evolucao .st-atingida, .meta-evolucao .st-no_ritmo { background: var(--cor-sucesso); }
.meta-evolucao .st-atencao { background: var(--cor-alerta); }
.meta-evolucao .st-risco, .meta-evolucao .st-nao_atingida { background: var(--cor-erro); }
.proporcao.ok > span { background: var(--cor-sucesso); }
/* etiqueta de composição: aba do produto e impressão pela OP */
.comp-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 30%); gap: var(--esp-4); align-items: start; }
.comp-previa { position: sticky; top: var(--esp-3); }
.comp-texto { white-space: pre-line; font-weight: 600; }
.comp-rolar { overflow-x: auto; max-width: 100%; }
.comp-layout > div { min-width: 0; }
.comp-tabela { width: auto; }
.acesso-parcial { margin-top: var(--esp-1); }
.acesso-parcial summary { cursor: pointer; font-size: 13px; color: var(--cor-acao); }
.acesso-parcial table { margin-top: var(--esp-1); width: auto; }
.acesso-parcial td { padding: 3px 6px; font-size: 13px; }
.comp-tabela select, .comp-tabela input[type=text] { width: 100%; min-width: 100px; max-width: 200px; }
.comp-tabela .comp-pct { width: 80px; }
.comp-simbolos { height: 34px; margin: var(--esp-2) 0; }
.comp-simbolos svg { height: 100%; width: auto; max-width: 100%; }
.cons-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--esp-3); }
.cons-grupo { border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: var(--esp-2) var(--esp-3); margin: 0; }
.cons-grupo legend { font-weight: 600; padding: 0 var(--esp-1); }
.cons-grupo .marcar { display: flex; align-items: center; gap: var(--esp-2); margin: 2px 0; }
.cons-icone { display: inline-block; width: 22px; height: 26px; flex: none; }
.cons-icone svg { width: 100%; height: 100%; }
.comp-resumo .comp-texto { margin: 0 0 var(--esp-2); }
.et-simbolos svg { width: 100%; height: 100%; }
@media (max-width: 900px) { .comp-layout { grid-template-columns: 1fr; } .comp-previa { position: static; } }
/* separação: leitor de código de barras, progresso, impressos e etiqueta de volume */
.sep-leitor { border: 2px solid var(--cor-acao); }
.sep-campo { font-size: 22px !important; padding: 12px 14px !important; letter-spacing: .5px; }
.sep-msg { margin: var(--esp-2) 0; padding: 10px 12px; border-radius: var(--raio); font-size: 16px; font-weight: 600;
  background: var(--cor-fundo); }
.sep-msg.ok { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); }
.sep-msg.erro { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); }
.sep-msg.alerta { background: var(--cor-alerta-fundo); color: var(--cor-alerta-texto); }
.sep-progresso { display: flex; align-items: center; gap: var(--esp-3); }
.sep-barra { flex: 1; height: 12px; background: var(--cor-fundo); border-radius: 6px; overflow: hidden; border: 1px solid var(--cor-borda); }
.sep-barra span { display: block; height: 100%; background: var(--cor-acao); transition: width .2s; }
.sep-itens tr.sep-ok td { background: var(--cor-sucesso-fundo); }
.sep-itens tr.sep-pisca td { background: var(--cor-acao-clara); }
.sep-mais summary { cursor: pointer; font-size: 13px; color: var(--cor-acao); }
.sep-mini { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0; justify-content: flex-end; }
.sep-mini input { width: 160px; }
.sep-destino { white-space: nowrap; display: inline-block; margin-right: 8px; }
.sep-barras svg { width: 45mm; height: 9mm; display: block; }
.sep-pedido { break-inside: avoid; }
.rm-chave { font-family: monospace; font-size: 10px; word-break: break-all; }
.rm-linhas { min-height: 18mm; border-bottom: 1px dashed var(--cor-borda-forte); }
.vol-etiqueta { width: 100mm; height: 70mm; box-sizing: border-box; border: 1px solid #000; padding: 3mm; margin: 0 0 6mm;
  background: #fff; color: #000; display: grid; grid-template-rows: auto auto 1fr auto; gap: 1.5mm; font-size: 10pt; }
.vol-topo { display: flex; justify-content: space-between; border-bottom: 1px solid #000; padding-bottom: 1mm; }
.vol-topo span b { font-size: 16pt; }
.vol-dest small { display: block; font-size: 7pt; text-transform: uppercase; }
.vol-dest b { font-size: 13pt; }
.vol-info { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3mm; font-size: 9pt; }
.vol-codigos { display: flex; align-items: flex-end; justify-content: space-between; gap: 2mm; }
.vol-barras svg { width: 70mm; height: 18mm; display: block; }
.vol-qr svg { width: 20mm; height: 20mm; display: block; }
@media print { .vol-etiqueta { margin: 0; break-after: page; page-break-after: always; border: 0; } }
/* filtro rápido (situações) acima das listas */
.filtro-rapido { display: flex; gap: var(--esp-2); flex-wrap: wrap; margin: 0 0 var(--esp-3); }
.fr-item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--cor-borda);
  background: var(--cor-superficie); color: var(--cor-texto); text-decoration: none; font-size: 14px; }
.fr-item:hover { border-color: var(--cor-acao); }
.fr-item.ativo { background: var(--cor-acao); border-color: var(--cor-acao); color: #fff; font-weight: 600; }
.fr-n { font-size: 12px; padding: 0 7px; border-radius: 99px; background: var(--cor-fundo); color: var(--cor-texto-2); }
.fr-item.ativo .fr-n { background: rgba(255, 255, 255, .25); color: #fff; }.doc-acoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--esp-3); margin: var(--esp-3) 0; }
.doc-acao { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-3); padding: var(--esp-3);
  border: 1px dashed var(--cor-borda-forte); border-radius: var(--raio); }
.doc-acao button[disabled] { opacity: .55; cursor: not-allowed; }
.sep-proximo { max-width: 640px; }.sep-folha + .sep-folha { margin-top: var(--esp-4); }
.sep-cod-pedido { text-align: right; }
.sep-cod-pedido svg { width: 60mm; height: 14mm; display: inline-block; }
.sep-cod-pedido small { display: block; font-size: 9px; }
@media print { .sep-folha { break-after: page; page-break-after: always; margin: 0; } .sep-folha:last-child { break-after: auto; } }.config-busca { margin: 0 0 var(--esp-2); }
.config-busca input { width: 100%; }
.config-resultado { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--esp-2); text-decoration: none; }
.config-item:target { outline: 2px solid var(--cor-acao); outline-offset: 6px; border-radius: var(--raio); background: var(--cor-acao-clara); }
/* faixa de ambiente (ERP_AMBIENTE, ex.: "TESTE ONLINE — cópia dos dados") */
.faixa-ambiente { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; padding: 4px 12px; text-align: center;
  font-size: 12px; font-weight: 700; letter-spacing: .5px; background: var(--cor-alerta-fundo); color: var(--cor-alerta-texto);
  border-top: 1px solid var(--cor-alerta); }.sep-mais1 { min-width: 48px; height: 38px; font-size: 16px; font-weight: 700; }.abc-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--esp-3); margin: var(--esp-3) 0; }
.abc-classe { display: flex; align-items: center; gap: var(--esp-3); margin: 0; }
.abc-letra { font-size: 28px; font-weight: 800; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--raio);
  background: var(--cor-fundo); color: var(--cor-texto-2); flex: none; }
.abc-a .abc-letra { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); }
.abc-b .abc-letra { background: var(--cor-alerta-fundo); color: var(--cor-alerta-texto); }
/* ---------- tema escuro (escolhido no menu; cookie "tema"). Só na tela: a impressão continua clara ---------- */
@media screen {
  html[data-tema="escuro"] {
    color-scheme: dark;
    --cor-marinho: #0b1626; --cor-marinho-2: #17283d;
    --cor-acao: #4f8cff; --cor-acao-esc: #3b78f0; --cor-acao-clara: #1a2b47;
    --cor-fundo: #0f1722; --cor-superficie: #172131; --cor-superficie-2: #1c2839;
    --cor-borda: #2a3a50; --cor-borda-forte: #3a4d66;
    --cor-texto: #e2e8f0; --cor-texto-2: #9fb0c6; --cor-texto-3: #6b7d94;
    --cor-sucesso: #22c55e; --cor-sucesso-fundo: #12321f; --cor-sucesso-texto: #86efac;
    --cor-erro: #f87171;    --cor-erro-fundo: #3a1618;    --cor-erro-texto: #fca5a5;
    --cor-alerta: #f59e0b;  --cor-alerta-fundo: #3a2a0c;  --cor-alerta-texto: #fcd34d;
    --cor-info-fundo: #16294a; --cor-info-texto: #a5c4ff;
    --cor-neutro-fundo: #2a3a50; --cor-neutro-texto: #cbd5e1; --cor-laranja-fundo: #3d2410; --cor-laranja-texto: #fdba74;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .4); --sombra-2: 0 4px 14px rgba(0, 0, 0, .45);
  }
  /* cores fixas das telas mais antigas (claras) → equivalentes escuras */
  html[data-tema="escuro"] input, html[data-tema="escuro"] select, html[data-tema="escuro"] textarea {
    background: var(--cor-superficie-2); color: var(--cor-texto); border-color: var(--cor-borda-forte); }
  html[data-tema="escuro"] input[readonly], html[data-tema="escuro"] input:disabled,
  html[data-tema="escuro"] select:disabled, html[data-tema="escuro"] textarea:disabled { background: #111a27; color: var(--cor-texto-2); }
  html[data-tema="escuro"] tbody tr:hover > td, html[data-tema="escuro"] table > tr:hover > td { background: #1e2c40; }
  html[data-tema="escuro"] .btn.fantasma:hover, html[data-tema="escuro"] button.fantasma:hover { background: #22324a; }
  html[data-tema="escuro"] .btn.perigo, html[data-tema="escuro"] button.perigo { border-color: #6b2a2d; }
  html[data-tema="escuro"] .barra, html[data-tema="escuro"] .abas a .contagem { background: #2a3a50; color: #cbd5e1; }
  html[data-tema="escuro"] .aviso.ok { border-color: #1f6b3a; } html[data-tema="escuro"] .aviso.erro { border-color: #7a2c2f; }
  html[data-tema="escuro"] .aviso.alerta { border-color: #7a5a14; }
  html[data-tema="escuro"] tr.nao-confiavel td { background: #2a2410; }
  html[data-tema="escuro"] tr.linha-grupo td, html[data-tema="escuro"] table.rm-tabela th { background: var(--cor-superficie-2); }
  html[data-tema="escuro"] .segmentos a { background: var(--cor-superficie); }
  html[data-tema="escuro"] table.grade thead th, html[data-tema="escuro"] table.grade tfoot th,
  html[data-tema="escuro"] table.grade tfoot td { background: var(--cor-superficie-2); }
  html[data-tema="escuro"] table.grade tbody th { background: #18233a; }
  html[data-tema="escuro"] table.grade th, html[data-tema="escuro"] table.grade td { border-color: var(--cor-borda); }
  html[data-tema="escuro"] table.grade td.nada, html[data-tema="escuro"] table.grade .nada { background: #131c2a; color: #4b5d75; }
  html[data-tema="escuro"] .bloco-produto { background: var(--cor-superficie); border-color: var(--cor-borda); }
  html[data-tema="escuro"] details > summary { color: var(--cor-acao); }
  html[data-tema="escuro"] .kb-coluna { background: #141e2d; }
  html[data-tema="escuro"] .kb-card, html[data-tema="escuro"] .kb-qtd { background: var(--cor-superficie); border-color: var(--cor-borda); color: var(--cor-texto); }
  html[data-tema="escuro"] .kb-card .kb-linha { color: var(--cor-texto-2); }
  html[data-tema="escuro"] .kb-card.atrasada { background: #3a1618; }
  html[data-tema="escuro"] .chip.cor-azul { background: #16294a; color: #a5c4ff; } html[data-tema="escuro"] .chip.cor-verde { background: #12321f; color: #86efac; }
  html[data-tema="escuro"] .chip.cor-amarelo { background: #3a2a0c; color: #fcd34d; } html[data-tema="escuro"] .chip.cor-laranja { background: #3d2410; color: #fdba74; }
  html[data-tema="escuro"] .chip.cor-vermelho { background: #3a1618; color: #fca5a5; } html[data-tema="escuro"] .chip.cor-cinza { background: #2a3a50; color: #cbd5e1; }
  /* códigos de barras, QR e prévias de etiqueta continuam em fundo branco (precisam de contraste para leitura) */
  html[data-tema="escuro"] .pix-qr svg, html[data-tema="escuro"] .et-previa .etiqueta, html[data-tema="escuro"] .vol-etiqueta,
  html[data-tema="escuro"] .sep-barras svg, html[data-tema="escuro"] .sep-cod-pedido svg { background: #fff; color: #000; }
  html[data-tema="escuro"] .romaneio { background: var(--cor-superficie); }
}
/* campo de busca dos <select data-buscavel> e barra fixa de totais do formulário do pedido */
.busca-select { margin-bottom: 4px; }
.busca-select.sem-resultado { border-color: var(--cor-erro); }
.campo-produto { min-width: min(520px, 100%); flex: 1 1 360px; }
.form-rodape { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  gap: var(--esp-4); padding: var(--esp-3) var(--esp-4); margin: var(--esp-4) calc(-1 * var(--esp-2)) 0;
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-g); box-shadow: var(--sombra-2); }
.form-rodape b { font-size: 16px; }
/* tela do pedido: resumo + situação lado a lado */
.pedido-topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: var(--esp-3); align-items: stretch; }
.pedido-topo > .painel { margin: 0; }
.pedido-situacao form { display: flex; flex-direction: column; gap: 6px; margin-top: var(--esp-2); }
.pedido-situacao > div { margin: 2px 0 0; }
@media (max-width: 900px) { .pedido-topo { grid-template-columns: 1fr; } }
/* cadastro do tecido: conversão kg ↔ metros */
.tecido-conv { border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--esp-2) var(--esp-3); margin: 0; }
.tecido-conv legend { padding: 0 var(--esp-1); font-weight: 600; }

/* relatório da ordem de corte (usa o estilo do romaneio) */
table.rm-tabela .rm-real .rm-retorno { width: auto; height: 26px; }
table.rm-tabela.rm-rolos { width: auto; min-width: 60%; margin-top: var(--esp-2); }
table.rm-tabela.rm-rolos td { height: 26px; }
.rm-linha-dados { margin: var(--esp-1) 0 var(--esp-2); }
.rm-linhas { height: 64px; border-bottom: 1px solid var(--borda); }

/* prévia da NF-e: JSON enviado ao emissor */
pre.json-previa { max-height: 420px; overflow: auto; background: var(--cor-neutro-fundo); color: var(--cor-texto); padding: var(--esp-3); border-radius: var(--raio); font-size: 12px; white-space: pre-wrap; }

/* manifestação: uma opção por linha, com o significado */
label.opcao-bloco { display: block; margin: var(--esp-1) 0; }

/* CEP (erp/cep.py): aviso ao lado do formulário e lista da pesquisa por logradouro */
.cep-status.aviso { margin: 0 0 var(--esp-2); }
.cep-lista { list-style: none; padding: 0; margin: var(--esp-2) 0 0; display: grid; gap: var(--esp-1); }
.cep-lista button { text-align: left; white-space: normal; }
.cep-painel table { margin-top: var(--esp-2); }

/* NF-e: menu "Emitir DANFE" e painéis lado a lado (carta de correção / cancelamento) */
.menu-danfe { position: relative; display: inline-block; }
.menu-danfe > summary { list-style: none; cursor: pointer; }
.menu-danfe > summary::-webkit-details-marker { display: none; }
.menu-danfe-opcoes { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 260px;
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio);
  box-shadow: var(--sombra-2); display: flex; flex-direction: column; padding: var(--esp-1); }
.menu-danfe-opcoes a { padding: var(--esp-2) var(--esp-3); border-radius: var(--raio); color: var(--cor-texto); text-decoration: none; }
.menu-danfe-opcoes a:hover { background: var(--cor-fundo); }
.grade-paineis { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--esp-4); }

/* Lista de pedidos: símbolos de origem, conta, OP, nota, embalagem e transportadora (cada um é um link) */
.sinais { display: inline-flex; gap: 2px; vertical-align: middle; margin-left: 4px; }
.sinal { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--raio-p);
  color: var(--cor-texto-3); border: 1px solid transparent; }
.sinal .ico { width: 15px; height: 15px; }
.sinal:hover { background: var(--cor-superficie-2); border-color: var(--cor-borda); text-decoration: none; }
.sinal.origem { color: var(--cor-texto-2); }
.sinal.ok { color: var(--cor-sucesso); }
.sinal.erro { color: var(--cor-erro); }

/* Filtro de datas (macro m.filtro_data): botão + painel com o período */
.filtros .campo.filtro-data { flex: 0 1 auto; min-width: 0; position: relative; }
.fd { position: relative; }
.fd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  border-radius: 99px; border-color: var(--cor-acao); color: var(--cor-acao); }
.fd > summary::-webkit-details-marker { display: none; }
.fd > summary .ico { width: 16px; height: 16px; }
.fd-painel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 330px; max-width: calc(100vw - 32px);
  background: var(--cor-superficie); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio);
  box-shadow: var(--sombra-2); padding: var(--esp-3); display: grid; gap: var(--esp-3); }
.fd-painel .campo { min-width: 0; flex: none; }
.fd-titulo { font-size: 13px; color: var(--cor-texto-2); }
.fd-modos { display: flex; flex-wrap: wrap; gap: 6px; }
.fd-modos button { border-radius: 99px; padding: 4px 12px; min-height: 30px; font-size: 13px; font-weight: 400;
  background: var(--cor-superficie); color: var(--cor-texto); border: 1px solid var(--cor-borda-forte); }
.fd-modos button.ativo { color: var(--cor-acao); border-color: var(--cor-acao); background: var(--cor-acao-clara); }
.fd-nav { display: flex; align-items: center; gap: 6px; border: 1px solid var(--cor-borda-forte); border-radius: var(--raio);
  padding: 4px; }
.fd-nav[hidden] { display: none; }
.fd-nav input { flex: 1; min-width: 0; border: 0; text-align: center; background: transparent; }
.fd-nav [data-fd-texto] { flex: 1; text-align: center; font-size: 14px; }
.fd-nav [data-fd-texto]:empty { display: none; }
.fd-nav button { border-radius: 99px; width: 32px; min-height: 32px; padding: 0; font-size: 18px; line-height: 1;
  background: var(--cor-superficie); color: var(--cor-texto); border: 1px solid var(--cor-borda); }
.fd-intervalo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-2); }
.fd-intervalo[hidden] { display: none; }
.fd-acoes { display: flex; gap: var(--esp-3); align-items: center; }
@media (max-width: 600px) { .fd-painel { position: fixed; left: 16px; right: 16px; top: auto; width: auto; } }
@media print { .filtro-data { display: none; } }

/* Movimentações: total de cada dia */
tr.total-dia td { background: var(--cor-superficie-2); font-weight: 600; border-top: 1px solid var(--cor-borda-forte); }
.rodape-saldos { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: var(--esp-2) var(--esp-5, 24px); padding: var(--esp-3) var(--esp-4); margin-top: var(--esp-3);
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: var(--sombra-2); }
.rodape-saldos div { display: grid; text-align: right; }
.rodape-saldos b { font-size: 16px; }
.rodape-saldos small { color: var(--cor-texto-2); }
.rodape-saldos .neg, td.neg { color: var(--cor-erro); }