/* ==================================================================
   ARMAZEMX — EVOLUÇÃO VISUAL (v10.10.20)
   Camada carregada DEPOIS de styles.css. Não troca a identidade (menu
   azul-marinho, logo AX, cores de status das etiquetas): acerta o que está
   em volta para que a COR DO STATUS carregue o significado e o resto fique
   calmo. Para voltar ao visual anterior basta tirar o <link> desta folha.

   Princípios:
   - Um padrão de botão só (principal sólido, secundário com borda, fantasma).
   - Números alinhados (NF, quantidade, placa) em fonte de engenharia.
   - Mostrar que o sistema está trabalhando (barra no topo, botão ocupado).
   - Avisos que informam sem tapar a tela.
   ================================================================== */

/* ---------- Fonte (embutida, sem internet; SIL Open Font License) ---------- */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/css/fonts/plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('/css/fonts/plex-sans-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/css/fonts/plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/css/fonts/plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/css/fonts/plex-sans-700.woff2') format('woff2'); }

/* ---------- Tokens novos (claro) ---------- */
:root {
  --primaria: #1f6fe0;          /* o azul do logo AX: ação principal */
  --primaria-forte: #1557b8;
  --primaria-suave: #e8f1fd;
  --foco: 0 0 0 3px rgba(31, 111, 224, 0.30);
  --borda-campo: #cfd8e3;
  --superficie-2: #f7f9fc;      /* cabeçalho de tabela, faixas */
  --linha-hover: #f2f7fe;
  --ambar: #b87700;             /* atenção (placa amarela do galpão) */
  --ambar-fundo: #fff5d6;
  --ambar-borda: #f1d27a;
  --sombra-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --sombra-2: 0 10px 28px rgba(16, 24, 40, 0.16);
  --raio-controle: 8px;
  --fonte: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
}
:root[data-tema='escuro'] {
  --primaria: #4b8ff0;
  --primaria-forte: #6aa4f5;
  --primaria-suave: #16304f;
  --foco: 0 0 0 3px rgba(75, 143, 240, 0.40);
  --borda-campo: #2f4057;
  --superficie-2: #121c2a;
  --linha-hover: #1a2739;
  --ambar: #f3c24f;
  --ambar-fundo: #2b2410;
  --ambar-borda: #5a4815;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sombra-2: 0 12px 30px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --primaria: #4b8ff0;
    --primaria-forte: #6aa4f5;
    --primaria-suave: #16304f;
    --foco: 0 0 0 3px rgba(75, 143, 240, 0.40);
    --borda-campo: #2f4057;
    --superficie-2: #121c2a;
    --linha-hover: #1a2739;
    --ambar: #f3c24f;
    --ambar-fundo: #2b2410;
    --ambar-borda: #5a4815;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --sombra-2: 0 12px 30px rgba(0, 0, 0, 0.5);
  }
}

/* ---------- Base ---------- */
body, button, input, select, textarea { font-family: var(--fonte); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* números que se comparam em coluna (quantidade, NF, valores) ficam alinhados */
table, .kpi-card .val, .badge, .aviso-qr-rod { font-variant-numeric: tabular-nums; }

:where(a, button, [role='button'], [tabindex], summary):focus-visible {
  outline: 2px solid var(--primaria);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Botões: um padrão só ---------- */
.btn {
  border-radius: var(--raio-controle);
  font-weight: 600;
  line-height: 1.2;
  transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s;
}
.btn-primary {
  background: var(--primaria);
  color: #fff;
  border: 1px solid var(--primaria);
  box-shadow: var(--sombra-1);
}
.btn-primary:hover { background: var(--primaria-forte); border-color: var(--primaria-forte); filter: none; }
.btn-secondary {
  background: var(--card);
  color: var(--titulo);
  border: 1px solid var(--borda-campo);
  box-shadow: var(--sombra-1);
}
.btn-secondary:hover { border-color: var(--primaria); color: var(--primaria); }
.btn-ghost:hover { background: var(--primaria-suave); }
.btn-danger { border: 1px solid transparent; }
.btn-danger:hover { filter: brightness(.94); }
.btn-sm { padding: 6px 12px; min-height: 32px; font-size: 13px; border-radius: 7px; }
.btn:focus-visible { outline: none; box-shadow: var(--foco); }

/* Botão principal NÃO estica quando está numa barra de ações */
.topbar .btn, .toolbar .btn, .modal-actions .btn, .card h3 .btn { width: auto; }

/* ---------- Estado "trabalhando" (ver js/fluidez.js) ---------- */
.btn.is-ocupado, button.is-ocupado {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  opacity: 1;
  filter: none;
}
.btn.is-ocupado::after, button.is-ocupado::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-color: rgba(127, 140, 160, 0.35);
  border-top-color: var(--primaria);
  animation: axGira .7s linear infinite;
}
.btn-primary.is-ocupado::after, .btn-danger.is-ocupado::after { border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; }
@keyframes axGira { to { transform: rotate(360deg); } }

#axBarraProgresso {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
  background: linear-gradient(90deg, transparent 0 30%, var(--primaria) 30% 70%, transparent 70%) 0 0 / 200% 100%;
}
#axBarraProgresso.ativa { opacity: 1; animation: axCorre 1s linear infinite; }
@keyframes axCorre { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- Campos ---------- */
:where(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']), select, textarea) {
  border-color: var(--borda-campo);
  border-radius: var(--raio-controle);
  transition: border-color .15s, box-shadow .15s;
}
:where(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']), select, textarea):focus {
  outline: none;
  border-color: var(--primaria);
  box-shadow: var(--foco);
}
.field input, .field select, .field textarea { border-width: 1px; }
.field label { font-weight: 500; }
.toolbar input, .toolbar select {
  min-height: 36px;
  border: 1px solid var(--borda-campo);
  background-color: var(--card);
  color: var(--text);
  font-size: 13.5px;
}
::placeholder { color: #8a97aa; opacity: 1; }

/* ---------- Topo da página ---------- */
.topbar { padding: 14px 26px; box-shadow: var(--sombra-1); position: relative; z-index: 5; }
.topbar h2 { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.topbar .sub { font-size: 12.5px; }
.topbar-direita #topbarActions { align-items: center; row-gap: 6px; }

/* ---------- Menu lateral ---------- */
.nav-item { border-radius: 8px; transition: background-color .12s, color .12s; }
.nav-item.active { background: rgba(41, 182, 246, 0.16); box-shadow: inset 3px 0 0 var(--sky); font-weight: 600; }

/* ---------- Cartões e indicadores ---------- */
.card { box-shadow: var(--sombra-1); }
.card h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.005em; }
.kpi-card { box-shadow: var(--sombra-1); }
.kpi-card .val { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.kpi-card .lbl { font-size: 12.5px; line-height: 1.3; margin-top: 4px; }

/* ---------- Tabelas ---------- */
th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--superficie-2);
}
th, td { padding: 10px 12px; }
tbody tr { transition: background-color .1s; }
tbody tr:hover { background: var(--linha-hover); }
.table-wrap, .table-wrap-fixa { border-radius: 10px; }

/* ---------- Etiquetas de status ---------- */
.badge { border-radius: 6px; font-weight: 600; letter-spacing: 0.01em; padding: 3px 8px; }

/* ---------- Janelas, avisos rápidos, vazio ---------- */
.modal-backdrop { background: rgba(5, 11, 20, 0.5); backdrop-filter: blur(2px); }
.modal { border-radius: 14px; box-shadow: var(--sombra-2); border: 1px solid var(--border); }
.modal-backdrop.show .modal { animation: axAbre .16s ease-out; }
@keyframes axAbre { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: none; } }
.toast { border-radius: 10px; font-weight: 500; box-shadow: var(--sombra-2); max-width: min(440px, calc(100vw - 32px)); line-height: 1.4; }
.empty-state { color: var(--text-muted); line-height: 1.5; }

/* ---------- Faixas de aviso no topo (cadastro incompleto, som da portaria) ---------- */
.faixa-aviso {
  display: block;
  width: 100%;
  background: var(--ambar-fundo);
  color: var(--text);
  border: 0;
  border-bottom: 1px solid var(--ambar-borda);
  padding: 8px 26px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  line-height: 1.4;
  flex-shrink: 0;
}
.faixa-aviso strong, .faixa-aviso u { color: var(--ambar); font-weight: 600; }
button.faixa-aviso { cursor: pointer; }
button.faixa-aviso:hover { filter: brightness(.98); }
.faixa-aviso--som u { text-decoration: none; border-bottom: 1px solid currentColor; }

/* ---------- Avisos flutuantes (QR lido, carga despachada...) ----------
   Antes: cartões grandes empilhados cobriam a lateral inteira da tela (e o
   celular todo). Agora: cartão menor, só os 2 mais novos aparecem, o resto
   vira "+N avisos" (clicar mostra todos, com rolagem). */
.avisos-qr { width: 330px; gap: 8px; max-height: calc(100vh / var(--z, 1) - 32px); }
.avisos-qr.aberta { overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.aviso-qr {
  border: 1px solid var(--border);
  border-left: 4px solid #1f6fe0;
  border-radius: 10px;
  box-shadow: var(--sombra-2);
  padding: 10px 12px;
  background: var(--card);
}
.aviso-qr.carga { border-left-color: #1a7f37; border-color: var(--border); border-left-color: #1a7f37; }
.aviso-qr.docs { border-color: var(--border); border-left-color: #6a2fa8; }
.aviso-qr.folga { border-color: var(--border); border-left-color: #0f766e; }
.aviso-qr.troca { border-color: var(--border); border-left-color: #c2410c; }
.aviso-qr-tit { font-size: 14px; font-weight: 700; line-height: 1.3; }
.aviso-qr-txt { font-size: 13px; font-weight: 500; color: var(--text); margin-top: 3px; }
.aviso-qr-rod { margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.aviso-qr-rod .btn { width: auto; min-height: 28px; padding: 4px 10px; font-size: 12.5px; }
.avisos-qr.recolhida > .aviso-qr:nth-of-type(n + 3) { display: none; }
.avisos-qr-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--navy);
  color: #fff;
  border-radius: 10px;
  padding: 6px 6px 6px 12px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--sombra-2);
}
.avisos-qr-barra span { margin-right: auto; }
.avisos-qr-barra button {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 0;
  border-radius: 7px;
  padding: 5px 10px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.avisos-qr-barra button:hover { background: rgba(255, 255, 255, 0.22); }

/* ---------- Tela de entrada ---------- */
.auth-card { border-radius: 16px; }

/* ---------- Celular ---------- */
@media (max-width: 760px) {
  .topbar { padding: 10px 14px; }
  .topbar h2 { font-size: 18px; }
  .faixa-aviso { padding: 8px 14px; font-size: 13px; }
  .avisos-qr { left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; max-height: 60vh; }
  .avisos-qr.recolhida > .aviso-qr:nth-of-type(n + 2) { display: none; }
  .aviso-qr { padding: 9px 11px; }
  .aviso-qr-tit { font-size: 13.5px; }
  .toast { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

/* ---------- Quem pediu menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  #axBarraProgresso.ativa { opacity: 1; }
}

/* ---------- App do conferente (celular) ---------- */
/* O botão de tema fica fixo no canto de cima e cobria o "Sair". */
body .conf-topbar { padding-right: 64px; }
@media (max-width: 480px) {
  /* busca com o texto inteiro visível; os botões vão para a linha de baixo */
  .conf-wrap .toolbar #buscaManual { flex: 1 1 100%; min-height: 42px; font-size: 16px; } /* v10.10.31: era 15px — no iPhone, abaixo de 16px a tela amplia ao tocar */
  .conf-wrap .toolbar #btnBuscarManual, .conf-wrap .toolbar #btnLerQrTopo { flex: 1 1 0; min-height: 40px; }
}

/* ---------- Tema escuro: caixas com cor clara fixa no código ----------
   Vários quadros de destaque têm o fundo claro escrito direto no código
   (ex.: "Aguardando um conferente aceitar"). No escuro o texto clareava e
   sumia em cima do fundo claro. Agora, dentro dessas caixas, as variáveis de
   texto voltam a ser escuras: destaque claro com tinta escura, legível nos
   dois temas. Títulos com azul-escuro fixo fora dessas caixas clareiam. */
:root[data-tema='escuro'] :is([style*='background:#f'], [style*='background: #f'], [style*='background:#e'], [style*='background: #e'], [style*='background:white'], [style*='background: white']) {
  --text: #101828; --text-muted: #46536b; --titulo: #0b1f3a; --border: #d5dde8; --card: #ffffff; --bg: #f2f5f9;
  color: #101828;
}
:root[data-tema='escuro'] :is([style*='color:#12408f'], [style*='color:#1b5e8a'], [style*='color:#0b1f3a'], [style*='color:#0d2b52'], [style*='color: #12408f'], [style*='color: #1b5e8a']) { color: var(--titulo) !important; }
:root[data-tema='escuro'] .aviso-qr-tit { color: #8fbaff; }
:root[data-tema='escuro'] .btn-primary { background: #2a6bd1; border-color: #2a6bd1; }
:root[data-tema='escuro'] .btn-primary:hover { background: #3a7de6; border-color: #3a7de6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) :is([style*='background:#f'], [style*='background: #f'], [style*='background:#e'], [style*='background: #e'], [style*='background:white'], [style*='background: white']) {
    --text: #101828; --text-muted: #46536b; --titulo: #0b1f3a; --border: #d5dde8; --card: #ffffff; --bg: #f2f5f9;
    color: #101828;
  }
  :root:not([data-tema='claro']) :is([style*='color:#12408f'], [style*='color:#1b5e8a'], [style*='color:#0b1f3a'], [style*='color:#0d2b52'], [style*='color: #12408f'], [style*='color: #1b5e8a']) { color: var(--titulo) !important; }
  :root:not([data-tema='claro']) .aviso-qr-tit { color: #8fbaff; }
  :root:not([data-tema='claro']) .btn-primary { background: #2a6bd1; border-color: #2a6bd1; }
  :root:not([data-tema='claro']) .btn-primary:hover { background: #3a7de6; border-color: #3a7de6; }
}

/* ---------- v10.10.21 — trilha da carga fracionada (janela do recebimento) ---------- */
.trilha-rec { margin: -2px 0 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--superficie-2); padding: 10px 12px; }
.trilha-rec ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; counter-reset: passo; }
.trilha-rec-passo { position: relative; padding: 8px 8px 8px 30px; border-radius: 8px; font-size: 12.5px; color: var(--text-muted); counter-increment: passo; min-width: 0; }
.trilha-rec-passo::before {
  content: counter(passo); position: absolute; left: 6px; top: 8px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; border: 1.5px solid var(--borda-campo); color: var(--text-muted); background: var(--card);
}
.trilha-rec-passo.feita { color: var(--text); }
.trilha-rec-passo.feita::before { content: '✓'; background: #1a7f37; border-color: #1a7f37; color: #fff; }
.trilha-rec-passo.atual { background: var(--primaria-suave); color: var(--titulo); font-weight: 600; }
.trilha-rec-passo.atual::before { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.trilha-rec-nome { display: block; line-height: 1.25; }
.trilha-rec-quem { display: block; font-size: 11.5px; font-weight: 400; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trilha-rec-acao { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 13px; }
.trilha-rec-acao.ok { color: #1a7f37; }
@media (max-width: 640px) { .trilha-rec ol { grid-template-columns: 1fr 1fr; } }

/* ---------- v10.10.21 — formulário do recebimento em blocos ---------- */
.form-secao { border: 0; margin: 18px 0 8px; padding: 0; min-width: 0; }
.form-secao:first-of-type { margin-top: 4px; }
.form-secao legend {
  display: block; width: 100%; padding: 0 0 6px; font-size: 14.5px; font-weight: 600; color: var(--titulo);
  border-bottom: 1px solid var(--border);
}
.form-secao-dica { margin: 6px 0 0; font-size: 12.5px; color: var(--text-muted); }
.rotulo-dica { font-weight: 400; color: var(--text-muted); font-size: 12px; }

/* ---------- v10.10.22 — tipo da compra (com pedido / direta) ---------- */
.tipo-compra { display: flex; gap: 8px; flex-wrap: wrap; }
.tipo-compra label {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--borda-campo); border-radius: var(--raio-controle); background: var(--card); font-weight: 500; color: var(--text);
}
.tipo-compra label:has(input:checked) { border-color: var(--primaria); background: var(--primaria-suave); color: var(--titulo); font-weight: 600; }
.tipo-compra input { width: auto; margin: 0; }

/* ---------- v10.10.25 — entrada da nota (janela do recebimento e quadro de pendentes) ---------- */
.entrada-nota-rec { margin: 0 0 14px; border: 1px solid var(--ambar-borda); background: var(--ambar-fundo); border-radius: 10px; padding: 10px 12px; }
.entrada-nota-rec.ok { border-color: #b7e4c7; background: #effaf3; }
.entrada-nota-tit { font-weight: 600; color: var(--titulo); margin-bottom: 6px; }
.entrada-nota-selo { font-size: 12px; font-weight: 600; color: #1a7f37; margin-left: 6px; }
.entrada-nota-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 6px 0; font-size: 13.5px; border-top: 1px dashed var(--ambar-borda); }
.entrada-nota-rodape { font-size: 12px; margin-top: 4px; }
.notas-pendentes { margin-bottom: 12px; border: 1px solid var(--ambar-borda); background: var(--ambar-fundo); border-radius: 10px; overflow: hidden; }
.notas-pendentes-cab { width: 100%; display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: transparent; border: 0; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; text-align: left; }
.notas-pendentes-cab span { color: var(--text-muted); font-size: 13px; }
.notas-pendentes-seta { margin-left: auto; }
.notas-pendentes .table-wrap { background: var(--card); border-top: 1px solid var(--ambar-borda); border-radius: 0; }
.chip-falta { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--card); border: 1px solid var(--ambar-borda); color: var(--ambar); margin: 1px 0; white-space: nowrap; }
.entrada-do-rec { font-size: 13px; background: var(--primaria-suave); border-radius: 8px; padding: 8px 10px; }

/* ---------- v10.10.28 — janelas no CELULAR em tela cheia ----------
   Antes: cartão flutuante com margem e borda, o título e o ✕ sumiam ao rolar,
   o botão de tema (◐) ficava por cima do ✕ e o "Enviar" só aparecia no fim.
   Agora: a janela ocupa a tela, título e ✕ ficam presos no topo e os botões
   (Cancelar / Enviar / Salvar) ficam presos embaixo. Vale para o app do
   conferente, a portaria e o painel. */
@media (max-width: 600px) {
  .modal-backdrop.show { padding: 0; align-items: stretch; justify-content: stretch; }
  body .modal-backdrop .modal {
    width: 100%; max-width: none !important; height: 100%; height: calc(100dvh / var(--z, 1)); max-height: none;
    border-radius: 0; border: 0; box-shadow: none;
    padding: 0 16px calc(12px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  .modal-backdrop.show .modal { animation: axSobe .18s ease-out; }
  @keyframes axSobe { from { transform: translateY(16px); opacity: .6; } to { transform: none; opacity: 1; } }
  /* título preso no topo, com espaço para o ✕ */
  body .modal-backdrop .modal > h3 {
    position: sticky; top: 0; z-index: 4; background: var(--card);
    margin: 0 -16px 10px; padding: calc(14px + env(safe-area-inset-top, 0px)) 60px 12px 16px;
    font-size: 19px; line-height: 1.25; border-bottom: 1px solid var(--border);
  }
  body .modal-backdrop .modal > .modal-fechar-x { position: sticky; top: calc(8px + env(safe-area-inset-top, 0px)); z-index: 6; margin: 8px -4px 0 8px; }
  /* o botão de tema não fica por cima do ✕ enquanto a janela está aberta */
  body:has(.modal-backdrop.show) #slotTema { display: none; }
  /* botões presos embaixo, sempre à mão */
  body .modal-backdrop .modal .modal-actions {
    position: sticky; bottom: calc(-12px - env(safe-area-inset-bottom, 0px)); z-index: 4; background: var(--card);
    margin: 14px -16px 0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border); flex-wrap: nowrap;
  }
  body .modal-backdrop .modal .modal-actions .btn { flex: 1 1 0; min-height: 46px; font-size: 15.5px; }
  /* menos espaço morto entre os campos */
  body .modal-backdrop .modal .field { margin-bottom: 12px; }
  body .modal-backdrop .modal .form-grid { gap: 8px 12px; }
  body .modal-backdrop .modal .entrada-dica, body .modal-backdrop .modal .rotulo-dica { font-size: 12px; }
}

/* ---------- v10.10.29 — nada passa da largura da tela (iPhone/Safari/WebKit) ----------
   No iPhone a janela "Novo recebimento" do conferente rolava para os lados e
   cortava o formulário. Causa: a grade do formulário usava coluna "1fr", que
   não encolhe abaixo do conteúdo mais largo — e o WebKit (Safari e o Chrome do
   iPhone) conta a largura das caixas de seleção e dos botões maior que o
   Chrome do computador. Agora a coluna encolhe até a tela, os campos nunca
   passam de 100% e a janela não rola de lado. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.form-grid > *, .field, .foto-campo, .foto-botoes, .linha-mais > *, .escolha-tipo > * { min-width: 0; }
.field input, .field select, .field textarea, .modal input:not([type='checkbox']):not([type='radio']), .modal select, .modal textarea { max-width: 100%; }
.modal select, .field select { text-overflow: ellipsis; }
.modal .btn { white-space: normal; }
@media (max-width: 860px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  body .modal-backdrop .modal { overflow-x: hidden; }
  body .modal-backdrop .modal > * { max-width: 100%; }
  .escolha-tipo label { min-width: 0 !important; }
}

/* ---------- v10.10.29 — caixa de seleção com busca (js/seletorBusca.js) ---------- */
.sel-busca-original { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; clip: rect(0 0 0 0); border: 0 !important; padding: 0 !important; margin: 0 !important; }
.sel-busca {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 44px; text-align: left; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--borda-campo); border-radius: var(--raio-controle); background: var(--card); color: var(--text);
  font: inherit; font-size: 16px; line-height: 1.25;
}
.sel-busca:focus-visible { outline: none; border-color: var(--primaria); box-shadow: var(--foco); }
.sel-busca.vazio .sel-busca-txt { color: var(--text-muted); }
.sel-busca.sel-busca-invalido { border-color: #d43f3f; box-shadow: 0 0 0 3px rgba(212, 63, 63, .2); }
.sel-busca:disabled { opacity: .55; cursor: not-allowed; }
.sel-busca-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-busca-seta { flex: 0 0 auto; color: var(--text-muted); font-size: 13px; }
.linha-mais .sel-busca { flex: 1 1 auto; width: auto; }
.sel-busca-fundo { position: fixed; inset: 0; z-index: 12000; background: rgba(5, 11, 20, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.sel-busca-painel {
  width: 100%; max-width: 460px; max-height: min(620px, 80vh); display: flex; flex-direction: column;
  background: var(--card); color: var(--text); border-radius: 14px; box-shadow: var(--sombra-2); overflow: hidden;
}
.sel-busca-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 8px; font-size: 15.5px; color: var(--titulo); }
.sel-busca-fechar { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--titulo); font-size: 16px; cursor: pointer; flex: 0 0 auto; }
.sel-busca-campo {
  margin: 0 14px 8px; padding: 11px 12px; font-size: 16px !important; border: 1px solid var(--borda-campo); border-radius: 10px;
  background: var(--superficie-2); color: var(--text); width: auto; min-width: 0;
}
.sel-busca-campo:focus { outline: none; border-color: var(--primaria); box-shadow: var(--foco); background: var(--card); }
.sel-busca-lista { list-style: none; margin: 0; padding: 0 6px 8px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sel-busca-item { display: flex; align-items: center; gap: 8px; padding: 12px 10px; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1.3; }
.sel-busca-item:hover, .sel-busca-item.foco { background: var(--primaria-suave); }
.sel-busca-item.atual { font-weight: 600; color: var(--titulo); }
.sel-busca-item.vazio { color: var(--text-muted); }
.sel-busca-item.off { opacity: .45; cursor: not-allowed; }
.sel-busca-ok { margin-left: auto; color: var(--primaria); font-weight: 700; }
.sel-busca-grupo { padding: 10px 10px 4px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.sel-busca-nada { padding: 18px 12px; color: var(--text-muted); font-size: 14px; text-align: center; }
@media (max-width: 600px) {
  .sel-busca-fundo { align-items: flex-end; padding: 0; }
  .sel-busca-painel { max-width: none; max-height: 85vh; max-height: 85dvh; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); animation: axSobe .18s ease-out; }
}

/* ---------- v10.10.30 — valores do carregamento (janela do pedido) ---------- */
.carregamento-box { margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--superficie-2); padding: 10px 12px; }
.carregamento-tit { font-weight: 600; color: var(--titulo); margin-bottom: 6px; }
.carregamento-tab th, .carregamento-tab td { padding: 6px 8px; font-size: 13px; }
.carregamento-tab td { background: var(--card); }
.carregamento-sem { color: var(--text-muted); font-style: italic; }
.carregamento-totais { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 13.5px; }
.carregamento-nota { margin-top: 6px; font-size: 12.5px; color: var(--text-muted); }
.carregamento-aviso { margin-top: 8px; font-size: 13px; background: var(--ambar-fundo); border: 1px solid var(--ambar-borda); border-radius: 8px; padding: 7px 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- v10.10.31 — a tela do iPhone não amplia mais sozinha ----------
   (1) Campo com letra MENOR QUE 16 px: ao tocar, o iPhone amplia a tela e não
   volta — e tudo o que abre depois (ex.: "Novo recebimento") já abre ampliado.
   Era o caso da busca do conferente (15 px) e do login (14 px). Agora nenhum
   campo fica abaixo de 16 px no celular.
   (2) Toque duplo rápido num botão também ampliava: "touch-action:
   manipulation" desliga só o zoom do toque duplo (rolar e o zoom com dois
   dedos continuam). */
html { touch-action: manipulation; }
@media (max-width: 600px) {
  #buscaManual, #buscaPedidosConf,
  .field input:not([type='checkbox']):not([type='radio']):not([type='file']), .field select, .field textarea,
  .toolbar input, .toolbar select,
  .auth-card input, .auth-card select { font-size: 16px; }
}

/* ---------- v10.10.35 — colar foto ou print em qualquer campo de anexo (js/colarArquivos.js) ---------- */
.ax-colar { width: auto !important; }
.ax-colado { outline: 2px solid var(--primaria); outline-offset: 3px; border-radius: 8px; transition: outline-color .6s; }

/* ---------- v10.10.40 — conferência da carga: por pallet e liberar sem bipar ---------- */
.cc-prods { display: grid; gap: 8px; margin: 8px 0; }
.cc-prod { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: var(--card); }
.cc-prod.ok { border-color: #b7e4c7; }
.cc-prod.lib { border-color: var(--ambar-borda); background: var(--ambar-fundo); }
.cc-prod-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.cc-prod-top span { display: block; font-size: 12px; color: var(--text-muted); }
.cc-prod-n { font-size: 16px; font-weight: 600; color: var(--titulo); white-space: nowrap; }
.cc-barra.fina { height: 5px; margin: 5px 0; }
.cc-prod-acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.cc-prod-lib { font-size: 12.5px; color: var(--ambar); margin-top: 4px; }
.cc-mini { font: inherit; font-size: 12.5px; padding: 5px 9px; border-radius: 7px; border: 1px solid var(--borda-campo); background: var(--card); color: var(--text); cursor: pointer; }
.cc-mini.aviso { border-color: var(--ambar-borda); color: var(--ambar); }
.cc-tag { font-size: 12px; color: var(--primaria); }
.cc-sb { color: var(--ambar); font-weight: 600; }
.cc-painel { border: 1.5px solid var(--primaria); border-radius: 10px; padding: 10px; margin: 8px 0; background: var(--card); display: grid; gap: 6px; }
.cc-painel.aviso { border-color: var(--ambar-borda); background: var(--ambar-fundo); }
.cc-painel-txt { font-size: 13px; }
.cc-painel-rot { font-size: 12.5px; font-weight: 600; margin: 2px 0 0; }
.cc-painel-linha { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cc-painel-linha input { width: 110px; }
.cc-painel-erro { font-size: 13px; color: #c0392b; min-height: 1px; }
/* v10.10.40 — volumes, peso e valor em destaque no cartão do pedido (conferente) */
.carga-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 6px; margin: 6px 0 8px; }
.carga-num { background: var(--superficie-2); border-radius: 10px; padding: 7px 6px; text-align: center; min-width: 0; }
.carga-num b { display: block; font-size: 24px; line-height: 1.1; color: var(--titulo); }
.carga-num span { display: block; font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carga-num.destaque { background: var(--primaria-suave); }
.carga-num.destaque b, .carga-num.destaque span { color: var(--primaria); }

/* ---------- v10.10.41 — histórico do conferente ---------- */
.hist-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.hist-meus { display: flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 400; margin: 0; }
.hist-meus input { width: auto; }
.hist-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.hist-chip { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borda-campo); background: var(--card); color: var(--text); cursor: pointer; }
.hist-chip.on { background: var(--primaria-suave); border-color: var(--primaria); color: var(--primaria); font-weight: 600; }
.hist-busca { width: 100%; margin: 4px 0 8px; }
.hist-mets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
.hist-met { background: var(--superficie-2); border-radius: 8px; padding: 6px 4px; text-align: center; min-width: 0; }
.hist-met b { display: block; font-size: 19px; }
.hist-met span { display: block; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-dia { font-size: 12.5px; font-weight: 700; color: var(--text-muted); margin: 12px 0 4px; text-transform: capitalize; }
.hist-item { display: block; width: 100%; text-align: left; font: inherit; border: 1px solid var(--border); border-radius: 10px; background: var(--card); padding: 9px 11px; margin-top: 6px; cursor: pointer; color: var(--text); }
.hist-l1 { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.hist-hora { font-size: 12.5px; color: var(--text-muted); }
.hist-l2 { font-size: 13.5px; margin-top: 2px; }
.hist-l2 span { color: var(--text-muted); }
.hist-l3 { font-size: 12px; color: var(--text-muted); margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.hist-flag { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 6px; background: var(--ambar-fundo); color: var(--ambar); }
.hist-mais { font-size: 12px; color: var(--text-muted); text-align: center; margin: 10px 0; }
.hist-det { display: grid; gap: 6px; font-size: 14px; }
.hist-div { color: var(--ambar); }
.hist-fotos-tit { font-weight: 600; margin-top: 6px; }
.hist-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.hist-fotos a { display: block; text-decoration: none; color: var(--text-muted); font-size: 11px; }
.hist-fotos img { width: 100%; height: 86px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
.hist-fotos span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v11.3.1 — detalhe completo do histórico do conferente */
.hist-det { grid-template-columns: minmax(0, 1fr); }
.hist-det > *, .hd-sec, .hd-box, .hd-l b, .hd-doc-t { min-width: 0; }
.hd-l b { overflow-wrap: anywhere; }
.hd-sec .hist-fotos { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.hist-fotos .hd-foto { display: block; padding: 0; border: 0; background: none; text-align: left; color: var(--text-muted); font-size: 11px; cursor: pointer; }
.hd-res { font-size: 15px; }
.hd-box { border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; background: var(--card); }
.hd-l { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.hd-l:last-child { border-bottom: 0; }
.hd-l span { color: var(--text-muted); white-space: nowrap; }
.hd-l b { text-align: right; font-weight: 700; }
.hd-q { color: var(--text-muted); font-size: 12px; font-weight: 500; }
.hd-obs { background: #fff8e1; border-left: 4px solid #d69e2e; border-radius: 6px; padding: 6px 9px; font-size: 13px; color: #5f4300; }
.hd-sec { border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; }
.hd-sec > summary { font-weight: 800; cursor: pointer; padding: 3px 0; list-style-position: inside; }
.hd-sec[open] > summary { margin-bottom: 6px; }
.hd-doc { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 5px; background: #eef3fb; border: 1px solid #c7d6ef; border-radius: 8px; color: #12304f; cursor: pointer; }
.hd-doc-i { font-size: 20px; }
.hd-doc-t { flex: 1; min-width: 0; }
.hd-doc-t b { display: block; font-size: 13.5px; }
.hd-doc-t span { display: block; font-size: 11.5px; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-doc-v { font-size: 13px; font-weight: 800; white-space: nowrap; }
.hd-tot { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; margin-top: 6px; }
.hd-tot div { border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; }
.hd-tot b { display: block; font-size: 15px; }
.hd-tot span { font-size: 11px; color: var(--text-muted); }
.hd-itens { display: grid; gap: 6px; max-height: 340px; overflow: auto; }
.hd-item { border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; font-size: 13px; }
.hd-item-l1 { display: flex; justify-content: space-between; gap: 8px; }
.hd-item-q { font-weight: 800; white-space: nowrap; }
.hd-item-d { color: var(--text); margin: 1px 0 2px; }
.hd-vazio { color: var(--text-muted); font-size: 13px; }
.hd-tl { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 3px solid var(--border); font-size: 12.5px; }
.hd-tl li { padding: 2px 0 5px 6px; }
.hist-so-leitura { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ---------- v10.10.41 — visualizador rápido de fotos do pedido ---------- */
.vf-fundo { position: fixed; inset: 0; z-index: 11000; background: rgba(5, 11, 20, .72); display: flex; align-items: center; justify-content: center; padding: 16px; }
.vf-caixa { width: 100%; max-width: 980px; max-height: calc(100dvh / var(--z, 1) - 32px); display: flex; flex-direction: column; gap: 8px; background: var(--card); color: var(--text); border-radius: 14px; padding: 12px 14px; box-shadow: var(--sombra-2); }
.vf-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--titulo); }
.vf-acoes { display: flex; gap: 6px; align-items: center; }
.vf-acoes .btn { width: auto; }
.vf-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--titulo); font-size: 16px; cursor: pointer; }
.vf-abas { display: flex; gap: 6px; flex-wrap: wrap; }
.vf-aba { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borda-campo); background: var(--card); color: var(--text); cursor: pointer; }
.vf-aba.on { background: var(--primaria-suave); border-color: var(--primaria); color: var(--primaria); font-weight: 600; }
.vf-palco { position: relative; flex: 1 1 auto; min-height: 220px; display: flex; align-items: center; justify-content: center; background: #0b1220; border-radius: 10px; overflow: hidden; }
.vf-palco img { max-width: 100%; max-height: calc(100dvh / var(--z, 1) - 300px); object-fit: contain; cursor: zoom-in; }
.vf-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); color: #0b1f3a; font-size: 26px; line-height: 1; cursor: pointer; }
.vf-nav.esq { left: 10px; }
.vf-nav.dir { right: 10px; }
.vf-leg { font-size: 13px; color: var(--text-muted); }
.vf-tira { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.vf-tira img { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; border: 2px solid transparent; cursor: pointer; flex: 0 0 auto; }
.vf-tira img.on { border-color: var(--primaria); }
.vf-dica { font-size: 11.5px; color: var(--text-muted); }
@media (max-width: 600px) { .vf-fundo { padding: 0; } .vf-caixa { max-height: calc(100dvh / var(--z, 1)); height: calc(100dvh / var(--z, 1)); border-radius: 0; } .vf-palco img { max-height: calc(100dvh / var(--z, 1) - 280px); } }

/* ---------- v10.10.43 — tarja dos totais dos itens e aviso de produto repetido ---------- */
.tarja-itens { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; background: var(--primaria-suave); color: var(--primaria); border-radius: 8px; padding: 8px 12px; font-size: 13px; margin: 8px 0 6px; position: sticky; top: 0; z-index: 3; }
.tarja-itens b { font-size: 17px; }
.tarja-itens-dir { margin-left: auto; font-size: 12px; }
.tarja-rodape { margin-right: auto; font-size: 13px; color: var(--primaria); align-self: center; }
.aviso-repetido { border: 1.5px solid var(--ambar-borda); background: var(--ambar-fundo); border-radius: 10px; padding: 10px 12px; margin: 6px 0; }
.aviso-repetido-tit { font-weight: 600; color: var(--ambar); }
.aviso-repetido-txt { font-size: 13px; margin: 4px 0 8px; }
.aviso-repetido-bts { display: flex; gap: 6px; flex-wrap: wrap; }
.aviso-repetido-bts .btn { width: auto; }

/* ---------- v10.10.44 — painel ao vivo ---------- */
.ao-vivo-ind { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); margin-right: 8px; white-space: nowrap; }
.ao-vivo-ind .pt { width: 8px; height: 8px; border-radius: 50%; background: #1a9e6f; box-shadow: 0 0 0 3px rgba(26, 158, 111, .18); }
.ao-vivo-ind .pt.amb { background: #d68a00; box-shadow: 0 0 0 3px rgba(214, 138, 0, .2); }
.ao-vivo-flash, .ao-vivo-flash td { background: var(--ambar-fundo) !important; transition: background .8s; }
.ao-vivo-presenca { font-size: 13px; background: var(--primaria-suave); color: var(--primaria); border-radius: 8px; padding: 7px 10px; margin: 4px 0 10px; }
.ao-vivo-versao { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 12500; background: var(--titulo); color: #fff; padding: 10px 14px; border-radius: 10px; font-size: 14px; box-shadow: var(--sombra-2); display: flex; gap: 10px; align-items: center; }
.ao-vivo-versao button { font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 7px; border: 0; background: #fff; color: var(--titulo); cursor: pointer; }
@media (max-width: 700px) { .ao-vivo-ind { display: none; } }

/* ---------- v10.10.45 — prioridade e posição de carregamento do item ---------- */
.item-marcas, .item-sep-marcas { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.marca-pri { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: #fde8e8; color: #b42318; }
.marca-pos { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--primaria-suave); color: var(--primaria); }
.item-carreg-bts { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 5px; }
.item-carreg-rot { font-size: 11px; color: var(--text-muted); margin-left: 4px; }
.bt-carreg { font: inherit; font-size: 11.5px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--borda-campo); background: var(--card); color: var(--text); cursor: pointer; }
.bt-carreg.on { background: var(--primaria-suave); border-color: var(--primaria); color: var(--primaria); font-weight: 600; }
.bt-carreg.on-pri { background: #fde8e8; border-color: #f0a3a3; color: #b42318; font-weight: 600; }
.aviso-prioridade { background: #fde8e8; color: #b42318; font-weight: 700; border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.ordem-carregar { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ---------- v10.10.45 — etiquetas: escolhidos em VERDE, "já saiu" em cinza com ✓ ---------- */
.etqp-linha { cursor: pointer; }
.etqp-linha.imp-on { border: 2px solid #1d9e75 !important; background: #e1f5ee !important; }
.etqp-imp { width: 30px; height: 30px; min-width: 30px; padding: 0 !important; border-radius: 8px !important; font-size: 16px !important; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.etqp-imp.on { background: #1d9e75 !important; border-color: #1d9e75 !important; color: #fff !important; }
.etqp-imp-ordem { color: #0f6e56; }
.etqp-grupo-sel { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 4px 0 8px; font-size: 12px; color: var(--text-muted); }
.etqp-grupo-sel button { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 600; cursor: pointer; }
.etqp-grupo-sel button:hover { border-color: #1d9e75; color: #0f6e56; }
.etqp-grupo-dica { font-size: 11.5px; }
.etqp-leg i.sel, .etqp-q.sel { background: #1d9e75 !important; border-color: #1d9e75 !important; color: #fff !important; }
.etqp-leg i.saiu, .etqp-q.saiu { background: var(--superficie-2) !important; border-color: var(--border) !important; color: var(--text-muted) !important; }
.etqp-q.saiu::after { content: ' ✓'; font-size: 9px; }
.etqp-q.saiu.sel::after { content: ''; }

/* ---------- v10.10.52 — notas pela lista, placas ---------- */
.btn-anexar-nf { font: inherit; font-size: 12px; padding: 2px 9px; border-radius: 999px; border: 1px dashed var(--primaria); background: transparent; color: var(--primaria); cursor: pointer; white-space: nowrap; }
.btn-anexar-nf:hover { background: var(--primaria-suave); }
.placa-lista { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; background: var(--superficie-2); border: 1px solid var(--border); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.zona-nota { border: 2px dashed var(--primaria); border-radius: 10px; padding: 12px; text-align: center; background: var(--primaria-suave); color: var(--primaria); cursor: pointer; display: grid; gap: 3px; font-size: 13px; min-height: 64px; align-content: center; }
.zona-nota span { color: var(--text-muted); font-size: 12px; }
.zona-nota.arrastando { background: var(--primaria); color: #fff; }
.zona-nota.enviando { opacity: .7; }
.zona-nota.ok { border-style: solid; border-color: #1e8a5a; background: #e8f6ef; color: #1e8a5a; }
.zona-nota.ok span { color: #1e8a5a; }
.zona-nota.erro { border-color: #c0392b; background: #fdecea; color: #c0392b; }
.zona-nota.erro span { color: #c0392b; }
.lote-nota-linha { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
@media (max-width: 700px) { .lote-nota-linha { grid-template-columns: 1fr; } }
.previsto-tag { font-size: 10.5px; font-weight: 600; color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; white-space: nowrap; }
.vf-ped { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--text-muted); margin-left: auto; margin-right: 8px; }
@media (max-width: 700px) { .fd-zonas { grid-template-columns: 1fr !important; } }

/* ---------- v10.10.61 — Expedição compacta ---------- */
.exp-filtros { padding: 10px 12px !important; margin-bottom: 10px; display: grid; gap: 8px; }
.exp-l1 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.exp-l1 > #fBusca { flex: 1 1 320px; min-width: 220px; }
.exp-l1 > #fCliente { flex: 0 1 220px; width: auto; }
.exp-l1 > label { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-muted); margin: 0; }
.exp-l1 input[type=date] { width: auto; }
.exp-l1 .btn { width: auto; }
.exp-menu { position: relative; display: inline-flex; }
.exp-menu-pop { position: absolute; top: calc(100% + 4px); right: 0; z-index: 60; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--sombra-2, 0 8px 24px rgba(0,0,0,.15)); padding: 6px; display: grid; gap: 4px; min-width: 220px; }
.exp-menu-pop[hidden] { display: none; }
.exp-menu-pop > .btn { width: 100%; justify-content: flex-start; text-align: left; }
.exp-menu-pop[data-vazio]::after { content: 'Nada disponível para os marcados.'; font-size: 12px; color: var(--text-muted); padding: 4px 6px; }
.exp-painel { min-width: 300px; padding: 10px; gap: 6px; }
.exp-painel select { width: 100%; }
.exp-painel-tit { font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 4px; }
.exp-campo { display: grid; gap: 2px; font-size: 12px; color: var(--text-muted); margin: 0; font-weight: 400; }
.exp-cnt { background: var(--primaria); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 11px; margin-left: 4px; }
.exp-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.exp-chips:empty { display: none; }
.exp-chips-rot { font-size: 12px; color: var(--text-muted); }
.exp-chip { font: inherit; font-size: 12px; font-weight: 600; border: 0; border-radius: 999px; padding: 3px 10px; background: var(--primaria-suave); color: var(--primaria); cursor: pointer; }
.exp-abas { margin-bottom: 0 !important; }
.exp-abas .btn, .exp-abas button { padding: 4px 10px !important; font-size: 12.5px !important; }
#despDiasChips { margin: 0 !important; }
#despDiasChips .btn { padding: 3px 9px !important; font-size: 12px !important; }
.exp-barra { position: sticky; bottom: 8px; z-index: 40; box-shadow: 0 6px 20px rgba(0,0,0,.14); }
.exp-barra-l { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.exp-barra-l .btn { width: auto; }
.exp-barra .exp-menu-pop { top: auto; bottom: calc(100% + 4px); right: auto; left: 0; }
.exp-barra .exp-mais .exp-menu-pop { left: auto; right: 0; }
/* quadros de "em preparação" / "aguardando liberação" / "aceite": no máximo ~5 linhas, rolagem dentro */
#boxLiberacaoSep > .card { max-height: 230px; overflow-y: auto; }
.exp-oculto { display: none !important; }

/* ---------- v10.10.62 — páginas do cliente: logotipo da empresa em cima, ARMAZEMX no rodapé ---------- */
.rodape-armazemx { text-align: center; font-size: 12px; color: #8a96a6; padding: 18px 10px 26px; display: flex; gap: 8px; align-items: center; justify-content: center; }
.rodape-armazemx img { height: 30px; width: auto; vertical-align: middle; opacity: .9; }
/* v10.10.64 — rodapé "Desenvolvido por" nas telas de login do conferente e da portaria (fundo escuro) */
/* telas de login (fundo escuro): o rodapé cai ABAIXO do cartão, na largura toda, com o logotipo claro */
.auth-page { flex-wrap: wrap; align-content: center; }
.auth-page > .rodape-login { flex-basis: 100%; width: 100%; color: rgba(255,255,255,.72); padding: 14px 10px 0; }
.auth-page > .rodape-login img { height: 34px; }
.rodape-painel[hidden] { display: none; }
.empresa-dica.empresa-aviso { color: #b45309; font-weight: 600; }

/* ---------- v10.10.68 — marcas dos itens ---------- */
.marca-comp, .marca-novo, .marca-red { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .03em; padding: 2px 8px; border-radius: 4px; color: #fff; }
.marca-comp { background: #92400e; } .marca-novo { background: #166534; } .marca-red { background: #991b1b; }
.marca-det { font-size: 12px; color: var(--text-muted); }
.bt-carreg.on-comp { background: #fef3c7; border-color: #d97706; color: #92400e; font-weight: 700; }
.item-marcas-68 { display: grid; gap: 6px; margin: 6px 0; }
.comp-coube { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.comp-coube label { font-size: 12px; font-weight: 600; margin: 0; }
.comp-coube input { width: 90px; min-height: 36px; }

/* ---------- v10.10.72 — cancelamento com motivo ---------- */
.motivo-cancel { font-size: 11px; color: #991b1b; margin-top: 3px; max-width: 190px; line-height: 1.25; white-space: normal; }
.mc-chip.on { background: #fee2e2; border-color: #991b1b; color: #991b1b; font-weight: 700; }
.btn-danger { background: #991b1b; color: #fff; border: 1px solid #7f1d1d; }
.btn-danger:hover { background: #7f1d1d; }
.cancelados-bloco { margin-top: 14px; }
.cancelados-tit { font-weight: 700; font-size: 14px; color: #991b1b; margin-bottom: 6px; }
.cancelado-card { background: #fff5f5; border: 1px solid #fecaca; border-left: 4px solid #991b1b; border-radius: 10px; padding: 9px 10px; margin-bottom: 6px; font-size: 13px; }
.cancelado-motivo { color: #7f1d1d; margin-top: 3px; }
.cancelado-dica { color: var(--text-muted); font-size: 12px; margin-top: 3px; }
.btn-danger-ghost { background: #fff; color: #991b1b; border: 1px solid #991b1b; font-weight: 700; }
.btn-danger-ghost:hover { background: #fee2e2; }
.motivo-reat { color: #1e40af; }
.hist-cancel { margin-top: 6px; font-size: 12px; color: var(--text-muted); background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px 8px; }
.hist-cancel div { margin-top: 2px; }
.bloco-reativado { background: #eff6ff; border: 1px solid #bfdbfe; border-left: 4px solid #1e40af; border-radius: 10px; padding: 8px 10px; margin: 6px 0; color: #1e3a8a; font-size: 13px; }

/* ---------- v10.10.78 — recebimento com o layout da Expedição ---------- */
.exp-l1 > .exp-busca { flex: 1 1 320px; min-width: 220px; }
.exp-l1 > .exp-l1-sel { flex: 0 1 220px; width: auto; }
.rec-periodo { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12.5px; }
.rec-periodo .btn { width: auto; padding: 3px 9px !important; font-size: 12px !important; }
.rec-periodo-rot { color: var(--text-muted); margin-left: 6px; }
.rec-periodo-rot:first-child { margin-left: 0; }
.rec-transp { font-size: 12.5px; line-height: 1.35; min-width: 120px; }
.rec-transp .placa-lista { font-size: 11.5px; }
.rec-transp-mot { color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.rec-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.rec-chip { font: inherit; font-size: 11.5px; border: 1px solid var(--border); background: var(--superficie-2); color: var(--text); border-radius: 999px; padding: 0 7px; cursor: pointer; white-space: nowrap; }
.rec-chip:hover { border-color: var(--primaria); color: var(--primaria); }
.rec-chip.aviso { background: #fff8e1; color: #8a5a00; border-color: #f2d59b; }
.rec-chip.ruim { background: #fff3e0; color: #9a4b00; border-color: #f2c48a; }
.docs-capa-tipo { font-size: 12px; padding: 2px 4px; min-height: 0; width: auto; max-width: 210px; }
.docs-lote-res { font-size: 12px; margin-top: 4px; display: grid; gap: 2px; }
.docs-lote-res .ok { color: #1a7f37; } .docs-lote-res .aviso { color: #b45309; } .docs-lote-res .erro { color: #c53030; }
.fotos-capa-item img { cursor: zoom-in; }

/* v11.2.1 — logo da empresa no canto direito do topo do painel */
.logo-empresa-topo { height: 40px; width: auto; max-width: 150px; object-fit: contain; background: #fff; border-radius: 8px; padding: 3px 8px; box-shadow: 0 1px 3px rgba(0,0,0,.12); margin-left: 4px; }
.logo-empresa-topo[hidden] { display: none; }
@media (max-width: 700px) { .logo-empresa-topo { height: 30px; max-width: 90px; } }

/* ==================================================================
   v12.0.0 — busca, favoritos e recentes no menu lateral (menuBusca.js)
   O menu é escuro nos dois temas: as cores aqui são as do próprio menu.
   ================================================================== */
.mb-caixa { margin: -6px 0 12px; }
.mb-campo { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 9px; padding: 0 8px; transition: border-color .12s, background .12s; }
.mb-campo:focus-within { border-color: var(--sky); background: rgba(255,255,255,0.12); }
.mb-campo span { font-size: 13px; opacity: .75; }
.mb-campo input { flex: 1; min-width: 0; border: 0 !important; outline: 0; background: transparent !important; color: #fff !important; font-size: 13.5px; padding: 9px 0 !important; box-shadow: none !important; }
.mb-campo input::placeholder { color: rgba(255,255,255,0.55); }
.mb-campo input::-webkit-search-cancel-button { filter: invert(1); }
.mb-campo kbd { font-family: inherit; font-size: 9.5px; font-weight: 600; line-height: 1; color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.22); border-radius: 5px; padding: 3px 5px; cursor: pointer; white-space: nowrap; }
.mb-res { margin-top: 6px; max-height: 55vh; overflow-y: auto; background: rgba(0,0,0,0.22); border-radius: 9px; padding: 4px; }
.mb-vazio { padding: 10px; font-size: 12.5px; color: rgba(255,255,255,0.6); }
.mb-sec:empty { display: none; }
.mb-sec { margin-top: 10px; }
.mb-titulo { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: 0; padding: 4px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,0.5); text-align: left; cursor: default; }
button.mb-titulo { cursor: pointer; }
button.mb-titulo:hover { color: #fff; }
.mb-linha { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; color: rgba(255,255,255,0.82); font-size: 13px; }
.mb-linha:hover, .mb-linha.mb-marcado { background: rgba(41,182,246,0.18); color: #fff; }
.mb-ico { width: 18px; text-align: center; flex: 0 0 auto; }
.mb-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.mb-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-cam { font-size: 10.5px; color: rgba(255,255,255,0.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-registros { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 3px; }
.mb-acoes { display: none; gap: 2px; }
.mb-linha:hover .mb-acoes { display: flex; }
.mb-mini { background: none; border: 0; color: rgba(255,255,255,0.55); font-size: 9px; padding: 2px 3px; cursor: pointer; border-radius: 4px; }
.mb-mini:hover { color: #fff; background: rgba(255,255,255,0.1); }
.mb-estrela { margin-left: auto; background: none; border: 0; padding: 0 2px; font-size: 15px; line-height: 1; color: rgba(255,255,255,0.45); cursor: pointer; opacity: 0; transition: opacity .12s, color .12s, transform .12s; flex: 0 0 auto; }
.mb-linha .mb-estrela { margin-left: 0; }
.nav-item:hover > .mb-estrela, .nav-subitem:hover > .mb-estrela, .mb-linha:hover .mb-estrela, .mb-estrela:focus-visible, .mb-estrela.on { opacity: 1; }
.mb-estrela:hover { color: #ffd54a; transform: scale(1.15); }
.mb-estrela.on { color: #ffc93c; }
.nav-item .nav-caret + .mb-estrela { margin-left: 4px; }
/* durante a busca o menu normal some — só ficam os resultados */
.sidebar.mb-buscando .mb-sec, .sidebar.mb-buscando .nav-item, .sidebar.mb-buscando .nav-submenu { display: none; }
/* ⭐ ao lado do título da tela */
.mb-fav-topo { background: none; border: 0; font-size: 20px; line-height: 1; vertical-align: middle; margin-left: 6px; color: var(--text-muted); cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.mb-fav-topo:hover { color: #e0a800; background: var(--bg); }
.mb-fav-topo.on { color: #f0b400; }
@media (hover: none) { .mb-campo kbd { display: none; } .nav-item > .mb-estrela, .nav-subitem > .mb-estrela { opacity: .55; } }

/* ==================================================================
   v12.0.0 — RH e folha de pagamento (public/js/rh.js)
   ================================================================== */
:root { --rh-ok-bg: #e7f6ec; --rh-ok-tx: #14532d; --rh-av-bg: #fff4dc; --rh-av-tx: #92400e; --rh-er-bg: #fde8e8; --rh-er-tx: #991b1b; --rh-in-bg: #e0f2fe; --rh-in-tx: #075985; --rh-rx-bg: #f3e8ff; --rh-rx-tx: #6b21a8; --rh-nt-bg: #eef2f7; --rh-nt-tx: #475569; --rh-ativa: #0b1f3a; }
:root[data-tema='escuro'] { --rh-ok-bg: #12351f; --rh-ok-tx: #86efac; --rh-av-bg: #3a2a0a; --rh-av-tx: #fcd34d; --rh-er-bg: #3b1212; --rh-er-tx: #fca5a5; --rh-in-bg: #0c2a3d; --rh-in-tx: #7dd3fc; --rh-rx-bg: #2a1640; --rh-rx-tx: #d8b4fe; --rh-nt-bg: #1e2a3b; --rh-nt-tx: #b6c3d4; --rh-ativa: #29b6f6; }
@media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) { --rh-ok-bg: #12351f; --rh-ok-tx: #86efac; --rh-av-bg: #3a2a0a; --rh-av-tx: #fcd34d; --rh-er-bg: #3b1212; --rh-er-tx: #fca5a5; --rh-in-bg: #0c2a3d; --rh-in-tx: #7dd3fc; --rh-rx-bg: #2a1640; --rh-rx-tx: #d8b4fe; --rh-nt-bg: #1e2a3b; --rh-nt-tx: #b6c3d4; --rh-ativa: #29b6f6; } }
.rh-abas { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 12px; }
.rh-abas button { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 13px; cursor: pointer; }
.rh-abas button.ativa { background: var(--rh-ativa); border-color: var(--rh-ativa); color: #fff; }
:root[data-tema='escuro'] .rh-abas button.ativa { color: #04121f; }
.rh-abas-mini button { padding: 5px 11px; font-size: 12px; }
.rh-kpi { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.rh-kpi div { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--card); min-width: 0; }
.rh-kpi b { display: block; font-size: 19px; color: var(--titulo); overflow-wrap: anywhere; }
.rh-kpi span { font-size: 11.5px; color: var(--text-muted); }
@media (max-width: 1200px) { .rh-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rh-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rh-tag { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 9px; white-space: nowrap; background: var(--rh-nt-bg); color: var(--rh-nt-tx); }
.rh-tag-ok { background: var(--rh-ok-bg); color: var(--rh-ok-tx); } .rh-tag-aviso { background: var(--rh-av-bg); color: var(--rh-av-tx); } .rh-tag-erro { background: var(--rh-er-bg); color: var(--rh-er-tx); } .rh-tag-info { background: var(--rh-in-bg); color: var(--rh-in-tx); } .rh-tag-roxo { background: var(--rh-rx-bg); color: var(--rh-rx-tx); }
.rh-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rh-cab h3 { margin: 0; }
.rh-cab > .btn, .rh-cab > select { width: auto; }
.card.rh-cab { margin-bottom: 12px; }
.rh-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.rh-acoes .btn, .rh-docs .btn { width: auto; }
.rh-acoes a.btn, .rh-tab a.btn { text-decoration: none; }
.rh-acoes input, .rh-acoes select { margin: 0; }
.rh-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rh-g2 > .card, .rh-g2 > div > .card { margin-bottom: 12px; }
.rh-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 12px; }
.rh-g3 .field { margin: 0 0 8px; }
.rh-s2 { grid-column: span 2; }
@media (max-width: 900px) { .rh-g2, .rh-g3 { grid-template-columns: 1fr; } .rh-s2 { grid-column: auto; } }
.rh-mini { font-size: 11.5px; color: var(--text-muted); }
.rh-rolar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rh-tab { width: 100%; font-size: 13px; border-collapse: collapse; }
.rh-tab th { text-align: left; font-size: 11.5px; color: var(--text-muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.rh-tab td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
.rh-rolar .rh-tab td { overflow-wrap: normal; }
.rh-tab tfoot td { border-top: 2px solid var(--border); border-bottom: 0; }
.rh-tab .dir, .rh-tab th.dir { text-align: right; white-space: nowrap; }
.rh-tab .btn { width: auto; white-space: nowrap; overflow-wrap: normal; }
.rh-folha .rh-in { width: 66px; padding: 5px 6px; text-align: right; margin: 0; }
.rh-fx input { width: 96px; padding: 4px 6px; margin: 0; }
.rh-alertas { list-style: none; margin: 0; padding: 0; max-height: 330px; overflow: auto; }
.rh-alertas li { padding: 6px 2px; border-bottom: 1px solid var(--border); font-size: 13px; }
.rh-alertas li:last-child { border-bottom: 0; }
.rh-barra { display: grid; grid-template-columns: 150px 1fr 110px; gap: 8px; align-items: center; font-size: 12.5px; margin: 6px 0; }
.rh-barra > div { height: 10px; background: var(--rh-nt-bg); border-radius: 6px; overflow: hidden; }
.rh-barra i { display: block; height: 100%; background: #29b6f6; border-radius: 6px; }
.rh-barra b { text-align: right; }
.rh-barra span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-fs { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px 2px; margin: 4px 0 10px; }
.rh-fs legend { font-weight: 800; font-size: 12.5px; padding: 0 6px; }
.rh-chk { display: flex; gap: 6px; align-items: center; font-weight: 600; font-size: 13px; margin: 0 0 8px; }
.rh-chk input { width: auto; margin: 0; }
.rh-linha-dep { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.rh-linha-dep input, .rh-linha-dep select { margin: 0; flex: 1 1 120px; }
.rh-linha-dep .btn { width: auto; }
.rh-docs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.rh-total { font-size: 14px; }
.rh-aviso { background: var(--rh-av-bg); color: var(--rh-av-tx); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin: 8px 0; }
.rh-previa { border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin-top: 10px; max-height: 60vh; overflow: auto; font-family: Georgia, 'Times New Roman', serif; font-size: 13.5px; line-height: 1.5; }
.rh-previa h4 { text-align: center; margin: 0 0 10px; }
.rh-clausula { display: grid; grid-template-columns: 1fr auto; gap: 4px 6px; border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin-bottom: 8px; }
.rh-clausula input, .rh-clausula textarea { margin: 0; grid-column: 1; }
.rh-clausula .btn { grid-column: 2; grid-row: 1; width: auto; }
.rh-pre { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px; font-size: 11.5px; overflow-x: auto; max-height: 180px; white-space: pre; }
.rh-dp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 14px; margin-bottom: 10px; }
.rh-dp label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; border-bottom: 1px dashed var(--border); padding: 3px 0; }
.rh-dp input { width: 80px; margin: 0; padding: 4px 6px; }
@media (max-width: 900px) { .rh-dp { grid-template-columns: 1fr; } .rh-barra { grid-template-columns: 110px 1fr 90px; } }
.rh-ret { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }

/* v12.2.0 — JORNADA DO MOTORISTA (tela do gestor). Usa os tokens do RH. */
.jr-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.jr-grade .card { margin: 0; }
.jr-cartao { border-left: 5px solid var(--rh-nt-tx); }
.jr-cartao.jr-direcao { border-left-color: var(--rh-ok-tx); } .jr-cartao.jr-trabalho { border-left-color: var(--rh-in-tx); } .jr-cartao.jr-espera { border-left-color: var(--rh-av-tx); } .jr-cartao.jr-fora { border-left-color: var(--rh-rx-tx); }
.jr-num { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; margin-top: 8px; }
.jr-barra { height: 8px; border-radius: 6px; background: var(--rh-nt-bg); overflow: hidden; margin-top: 4px; }
.jr-barra > i { display: block; height: 100%; }
.jr-ev { display: inline-block; white-space: nowrap; font-size: 12px; background: var(--rh-nt-bg); color: var(--rh-nt-tx); border-radius: 6px; padding: 1px 6px; margin: 1px 0; }
.jr-ev a { color: var(--rh-er-tx); text-decoration: none; font-weight: 700; margin-left: 2px; }
.rh-aviso.rh-aviso-erro { background: var(--rh-er-bg); color: var(--rh-er-tx); }
.rh-s3 { grid-column: 1 / -1; }

.jr-fotos { display: flex; gap: 4px; margin-top: 4px; }
.jr-fotos img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--rh-nt-bg); display: block; }

/* v12.4.0 — ROTEIRIZADOR: formulário/resultado à esquerda, mapa à direita (empilha no celular) */
.rt-grade { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 1100px) { .rt-grade { grid-template-columns: 1fr; } }
.rt-esq { min-width: 0; display: grid; gap: 10px; }
.rt-esq .card { margin: 0; }
.rt-dir { position: sticky; top: 8px; min-width: 0; }
.rt-mapa { height: min(72vh, 720px); min-height: 360px; border-radius: 12px; border: 1px solid var(--border); background: var(--rh-nt-bg); z-index: 0; }
.rt-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 4px; font-size: 12.5px; }
.rt-leg { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.rt-pino { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 800; color: #fff; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); flex: none; }
.rt-pino.rt-mini { width: 14px; height: 14px; font-size: 0; border-width: 1px; }
.rt-origem { background: #15803d; } .rt-destino { background: #b91c1c; } .rt-parada { background: #1d64b5; }
.rt-ped { background: #e08a0b; border-radius: 4px; } .rt-semvalor { background: #6b7280; border-radius: 4px; } .rt-posto { background: #0f766e; font-size: 11px; } .rt-pol { background: #1e3a8a; font-size: 11px; } .rt-bal { background: #6d28d9; font-size: 11px; }
.rt-ponto { display: grid; grid-template-columns: 28px minmax(0, 1.2fr) minmax(0, 1.3fr) 96px auto; gap: 8px; align-items: end; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.rt-ponto .rt-pino { margin-bottom: 8px; }
.rt-ponto .field { margin: 0; }
.rt-acoes-ponto { display: flex; gap: 2px; padding-bottom: 4px; }
.rt-acoes-ponto .btn { width: auto; padding: 4px 8px; }
@media (max-width: 640px) { .rt-ponto { grid-template-columns: 28px minmax(0, 1fr); } .rt-ponto > .field, .rt-ponto > .rt-acoes-ponto { grid-column: 2; } }
.rt-linha1 { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.rt-linha1 .field { margin: 0; }
.rt-opcoes { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0; }
.rt-mais { margin-top: 8px; }
.rt-mais summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.rt-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin: 6px 0; }
.rt-seg label { padding: 6px 14px; cursor: pointer; font-size: 13px; font-weight: 600; }
.rt-seg label:has(input:checked) { background: var(--rh-ativa); color: #fff; }
.rt-seg input { position: absolute; opacity: 0; pointer-events: none; }
.rt-seg label:focus-within { outline: 2px solid var(--rh-ativa); outline-offset: -2px; }
.rt-titulo { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; margin-bottom: 6px; }
.rt-alerta { color: var(--rh-av-tx); }
.rt-saida { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.rt-saida > div { display: grid; gap: 1px; min-width: 0; }
.rt-saida b { font-size: 15px; font-variant-numeric: tabular-nums; }
.rt-seta { font-size: 22px; color: var(--rh-nt-tx); }
.rt-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0 4px; }
@media (max-width: 760px) { .rt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rt-cards > div { border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: grid; gap: 2px; }
.rt-cards b { font-size: 18px; font-variant-numeric: tabular-nums; }
.rt-cards span { font-size: 12px; color: var(--rh-nt-tx); }
.rt-card-ped { background: var(--rh-av-bg); border-color: transparent !important; }
.rt-card-ped b, .rt-card-ped span { color: var(--rh-av-tx); }
.rt-card-total { background: #d97706; border-color: transparent !important; }
.rt-card-total b, .rt-card-total span { color: #fff; }
.rt-linha-ped td { background: var(--rh-av-bg); }
.rt-valor { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer; font-variant-numeric: tabular-nums; }
.rt-valor.sel { background: var(--rh-ativa); border-color: var(--rh-ativa); color: #fff; }
.rt-lista { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.rt-lista li { display: flex; gap: 8px; align-items: center; }
/* v12.5.2 — campo da chave do OpenRouteService (texto mascarado, sem autopreenchimento) e resultado do teste */
.rt-chave { display: flex; gap: 6px; align-items: center; }
.rt-chave input { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; }
.rt-chave input.rt-oculto { -webkit-text-security: disc; text-security: disc; }
.rt-teste { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--bg-soft, #f1f5f9); font-size: 13.5px; line-height: 1.4; }
.rt-teste.rt-ok { background: var(--rh-ok-bg, #e7f6ec); color: var(--rh-ok-tx, #14532d); }
.rt-teste.rt-erro { background: var(--rh-er-bg, #fdecec); color: var(--rh-er-tx, #7f1d1d); }
.rt-teste.rt-aviso { background: var(--rh-av-bg, #fff6e0); color: var(--rh-av-tx, #713f12); }
.rt-ok-txt { color: var(--rh-ok-tx, #15803d); }
.rt-erro-txt { color: var(--rh-er-tx, #b91c1c); }
/* v12.5.4 — sugestões de cidade do roteirizador (aceita digitar sem acento) */
.rt-cidwrap { position: relative; }
.rt-sug { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 50; background: var(--card, #fff); border: 1px solid var(--border, #d5dbe3); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); max-height: 260px; overflow-y: auto; }
.rt-sug-it { padding: 8px 12px; cursor: pointer; font-size: 14px; }
.rt-sug-it.ativo, .rt-sug-it:hover { background: var(--rh-in-bg, #e0f2fe); color: var(--rh-in-tx, #075985); }
.rt-sug-vazio { padding: 8px 12px; font-size: 13px; color: var(--text-muted, #64748b); }
/* v12.5.5 — anexo do pedido que o sistema não identificou: pergunta o tipo */
.doc-classificar { flex-basis: 100%; margin: 4px 0 6px; padding: 8px 10px; border-radius: 8px; background: var(--rh-av-bg, #fff4dc); color: var(--rh-av-tx, #92400e); font-size: 12.5px; }
.doc-classificar-bts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
/* v12.5.5 — conferente: pedidos livres para aceitar no topo da aba Em separação */
.conf-livres { background: var(--rh-rx-bg, #f3e8ff); border: 2px solid #8b5cf6; border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.conf-livres-tit { font-weight: 800; color: var(--rh-rx-tx, #6b21a8); margin-bottom: 6px; font-size: 15px; }
.conf-livre { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 8px 0; border-top: 1px dashed rgba(107, 33, 168, .25); }
.conf-livre:first-of-type { border-top: 0; }
.conf-livre-info { font-size: 14px; min-width: 0; flex: 1 1 220px; }
.conf-livre-info span { display: block; font-size: 12px; color: var(--text-muted, #64748b); margin-top: 2px; }
.conf-livre-bts { display: flex; gap: 6px; }
.conf-livre-bts .btn { width: auto; padding: 10px 16px; }
.conf-aviso-lista { background: var(--rh-er-bg, #fde8e8); color: var(--rh-er-tx, #991b1b); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; font-size: 13px; }
#livresConfTopo:empty { display: none; }
body:not(.op-desk) .conf-livres-nos-cards { display: none; }
body.op-desk #livresConfTopo { display: none; }
/* v12.5.6 — escolha do veículo no roteirizador (categorias + eixos + veículos comuns) */
.rt-vei { position: relative; }
.rt-vei-bt { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 12px; min-height: 44px; border: 1px solid var(--border, #d5dbe3); border-radius: 10px; background: var(--card, #fff); color: inherit; cursor: pointer; text-align: left; font: inherit; }
.rt-vei-bt:hover, .rt-vei-bt[aria-expanded="true"] { border-color: #3b82f6; }
.rt-vei-ico { font-size: 24px; width: 34px; text-align: center; flex: none; }
.rt-vei-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.rt-vei-txt b { font-size: 14px; }
.rt-vei-txt small { font-size: 12px; color: var(--text-muted, #64748b); }
.rt-vei-seta { color: var(--text-muted, #64748b); }
.rt-vei-painel { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; width: min(680px, calc(100vw - 32px)); background: var(--card, #fff); border: 1px solid var(--border, #d5dbe3); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); overflow: hidden; }
.rt-vei-cat { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border, #e5e7eb); cursor: pointer; }
.rt-vei-cat:hover { background: var(--rh-nt-bg, #eef2f7); }
.rt-vei-cat.ativo { background: var(--rh-in-bg, #e0f2fe); }
.rt-vei-eix { display: flex; align-items: center; gap: 4px; flex: none; min-width: 112px; justify-content: flex-end; }
.rt-vei-eix button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #10b981; background: transparent; color: #10b981; font-size: 18px; line-height: 1; cursor: pointer; }
.rt-vei-eix b { min-width: 22px; text-align: center; font-size: 17px; }
.rt-vei-eix small { font-size: 11px; color: var(--text-muted, #64748b); margin-left: 2px; }
.rt-vei-mod { padding: 10px 14px; max-height: 260px; overflow-y: auto; }
.rt-vei-modtit { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.rt-vei-modtit small { font-weight: 400; color: var(--text-muted, #64748b); }
.rt-vei-grupo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.rt-vei-grupo > span { font-size: 11.5px; font-weight: 700; color: var(--text-muted, #64748b); width: 100%; text-transform: uppercase; letter-spacing: .03em; }
.rt-vei-chip { border: 1px solid var(--border, #d5dbe3); background: transparent; color: inherit; border-radius: 999px; padding: 5px 11px; font-size: 12.5px; cursor: pointer; }
.rt-vei-chip:hover { border-color: #3b82f6; }
.rt-vei-chip.ativo { background: #2563eb; border-color: #2563eb; color: #fff; }
.rt-vei-rod { display: flex; justify-content: flex-end; padding: 8px 14px; border-top: 1px solid var(--border, #e5e7eb); }
@media (max-width: 560px) { .rt-vei-cat { flex-wrap: wrap; } .rt-vei-eix { width: 100%; justify-content: flex-start; padding-left: 44px; } }
/* v12.5.7 — sugestões ao digitar (motorista, placas) */
.sug-wrap { position: relative; }
.sug-lista { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 80; background: var(--card, #fff); border: 1px solid var(--border, #d5dbe3); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.16); max-height: 280px; overflow-y: auto; }
.sug-it { padding: 7px 11px; cursor: pointer; display: flex; flex-direction: column; line-height: 1.3; }
.sug-it b { font-size: 13.5px; }
.sug-it small { font-size: 11.5px; color: var(--text-muted, #64748b); }
.sug-it.ativo, .sug-it:hover { background: var(--rh-in-bg, #e0f2fe); }
.sug-it.sug-novo { border-top: 1px solid var(--border, #e5e7eb); }
.sug-it.sug-novo b { color: #2563eb; font-weight: 700; }
/* v12.6.0 — Gestão de Transporte (/transporte) */
.portal-transp-selo { display: inline-block; margin: 6px auto 2px; padding: 5px 14px; border-radius: 999px; background: #0f766e; color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .02em; }
.auth-card .portal-transp-selo { display: table; }
#permArvore .perm-fora-portal { display: none !important; }

/* v12.7.1 — campo padrão de cadastro (transportadora, motorista, placa) */
.cad-campo { display: flex; gap: 4px; align-items: stretch; }
.cad-campo .cad-busca { flex: 1 1 auto; min-width: 0; }
.cad-campo .cad-busca input { width: 100%; padding-right: 30px; }
.cad-campo .cad-seta { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--text-muted, #64748b); font-size: 14px; cursor: pointer; padding: 4px 6px; line-height: 1; }
.cad-campo .cad-mais { width: auto; padding: 4px 12px; font-weight: 900; }
.sug-vazio { padding: 8px 11px; font-size: 12.5px; color: var(--text-muted, #64748b); }

/* v12.8.0 — Financeiro (public/js/financeiro.js) */
.fn-bar { display: flex; height: 10px; background: var(--rh-nt-bg); border-radius: 6px; overflow: hidden; }
.fn-bar i { display: block; height: 100%; }
.modal .rh-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.modal .rh-kpi b { font-size: 15px; white-space: nowrap; }
@media (max-width: 640px) { .modal .rh-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* v12.9.0 — Gestão: quadro kanban, help desk, GED (public/js/gestao2.js) */
.g2-quadro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 800px) { .g2-quadro { grid-template-columns: 1fr; } }
.g2-col { background: var(--rh-in-bg, #f8fafc); border: 1px solid var(--border); border-radius: 10px; padding: 8px; min-height: 120px; }
.g2-col-t { display: flex; justify-content: space-between; margin-bottom: 6px; }
.g2-card { background: var(--card, #fff); border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin-bottom: 6px; font-size: 13px; }
.g2-card.atrasada { border-left: 4px solid #dc2626; }
.g2-mover { display: flex; justify-content: space-between; margin-top: 4px; }
.g2-mover .btn { width: auto; padding: 2px 10px; }
.g2-msgs { max-height: 280px; overflow: auto; margin: 8px 0; }
.g2-msg { border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; margin-bottom: 6px; font-size: 13px; }
.g2-msg.interna { background: var(--rh-av-bg); }
.g2-ged { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; }
@media (max-width: 800px) { .g2-ged { grid-template-columns: 1fr; } }
.g2-pastas div[data-g2-pasta] { padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; display: flex; justify-content: space-between; }
.g2-pastas div[data-g2-pasta]:hover { background: var(--rh-in-bg); }
.g2-pastas div.ativa { background: var(--rh-ativa, #2563eb); color: #fff; font-weight: 700; }
.g2-pastas div.ativa .rh-mini { color: #fff; }

/* v12.10.0 — Importação e frete embarcador (public/js/comex.js) */
.cx-canal { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 700; color: #fff; vertical-align: middle; }
.cx-canal-verde { background: #15803d; } .cx-canal-amarelo { background: #ca8a04; } .cx-canal-vermelho { background: #b91c1c; } .cx-canal-cinza { background: #64748b; }
.cx-etapas { display: flex; gap: 2px; min-width: 110px; }
.cx-etapas i { flex: 1; height: 6px; border-radius: 3px; background: var(--border, #e2e8f0); }
.cx-etapas i.feita { background: #16a34a; } .cx-etapas i.atual { background: #2563eb; }
.cx-linha-tempo { display: flex; margin: 10px 0 6px; overflow-x: auto; }
.cx-linha-tempo > div { flex: 1; min-width: 70px; text-align: center; position: relative; font-size: 10.5px; color: var(--text-muted, #64748b); }
.cx-linha-tempo > div::before { content: ''; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: var(--border, #e2e8f0); }
.cx-linha-tempo > div.feita::before, .cx-linha-tempo > div.atual::before { background: #16a34a; }
.cx-linha-tempo i { position: relative; display: block; width: 14px; height: 14px; margin: 0 auto 3px; border-radius: 50%; background: var(--card-bg, #fff); border: 2px solid var(--border, #cbd5e1); }
.cx-linha-tempo .feita i { background: #16a34a; border-color: #16a34a; }
.cx-linha-tempo .atual i { background: #2563eb; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); }
.cx-linha-tempo .atual span { color: inherit; font-weight: 700; }
.cx-alertas { margin: 6px 0; display: grid; gap: 4px; }
.cx-alertas > div { padding: 5px 9px; border-radius: 6px; font-size: 12.5px; }
.cx-al-critico { background: rgba(185, 28, 28, .1); color: #b91c1c; } .cx-al-alerta { background: rgba(202, 138, 4, .12); color: #92400e; } .cx-al-info { background: rgba(37, 99, 235, .08); }
.cx-canais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cx-canais > div { display: flex; flex-direction: column; gap: 3px; }
.cx-canais b { font-size: 22px; }
.cx-dados > div { font-size: 13px; padding: 6px 0; }
.cx-lote { flex-wrap: wrap; align-items: center; }
.cx-cntr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; padding: 8px; margin-bottom: 8px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; }
.cx-cf { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--text-muted, #64748b); min-width: 0; }
.cx-cf input, .cx-cf select { min-width: 0; width: 100%; }
@media (max-width: 760px) { .cx-cntr { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* v12.11.0 — Caixa de documentos (public/js/caixaDocs.js) */
.cxd-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 18px; margin: 0 0 12px; border: 2px dashed var(--border, #cbd5e1); border-radius: 14px; background: var(--card, #fff); transition: border-color .15s, background .15s; }
.cxd-drop.on { border-color: #2563eb; background: rgba(37, 99, 235, .06); }
.cxd-dados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; font-size: 13px; }
.cxd-dados b { word-break: break-all; }
.cxd-dest { display: grid; gap: 6px; }
.cxd-op { display: flex; align-items: baseline; gap: 6px; padding: 7px 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; cursor: pointer; font-weight: 400; }
.cxd-op input { width: auto; }
.cxd-op.off { opacity: .55; cursor: default; }
@media (max-width: 760px) { .cxd-dados { grid-template-columns: 1fr 1fr; } }

/* v12.12.0 — painel de integrações */
.int-mon-geral { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px; margin-bottom: 10px; border: 1px solid var(--border, #e2e8f0); }
.int-mon-geral.int-mon-ok { background: rgba(22, 163, 74, .08); } .int-mon-geral.int-mon-aviso { background: rgba(202, 138, 4, .1); } .int-mon-geral.int-mon-erro { background: rgba(185, 28, 28, .08); }
.int-mon { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.int-mon-card { margin: 0 !important; border-left: 4px solid var(--border, #e2e8f0); }
.int-mon-card.int-mon-ok { border-left-color: #16a34a; } .int-mon-card.int-mon-aviso { border-left-color: #ca8a04; } .int-mon-card.int-mon-erro { border-left-color: #b91c1c; } .int-mon-card.int-mon-neutro { opacity: .75; }
.int-mon-falha { margin-top: 6px; font-size: 12px; color: #b91c1c; background: rgba(185, 28, 28, .06); border-radius: 6px; padding: 4px 8px; }
.lote-passos { margin: 0 0 10px 18px; padding: 0; font-size: 13px; } .lote-passos li { margin: 3px 0; }

/* v12.13.0 — "✕" da pilha de avisos (fecha todos e guarda no sino) e os guardados no sino */
.avisos-qr-barra button.avisos-qr-x { font-size: 18px; line-height: 1; padding: 6px 12px; font-weight: 700; }
.avisos-qr-barra button[hidden] { display: none; }
.alerta-guardados { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; margin: 2px 0 4px; font-size: 12.5px; background: var(--bg-soft, #f1f5f9); border-radius: 8px; }
.alerta-item-linha { display: flex; align-items: stretch; gap: 6px; }
.alerta-item-linha .alerta-item { flex: 1 1 auto; min-width: 0; }
.alerta-item-linha .alerta-ok { width: auto; align-self: center; flex: 0 0 auto; }

/* v12.13.0 — painel de resultados da automação (Integrações → Resultados) */
.res-topo { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.res-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 12px; }
.res-num { background: var(--card-bg, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.res-num span { font-size: 12.5px; color: var(--text-muted); }
.res-num b { font-size: 28px; line-height: 1.15; color: var(--text, inherit); }
.res-num small { font-size: 12px; color: var(--text-muted); }
.res-barras { display: flex; align-items: flex-end; gap: 10px; height: 190px; padding: 8px 4px 0; border-bottom: 1px solid var(--border, #e2e8f0); }
.res-col { flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; outline: none; }
.res-barra { width: min(46px, 70%); background: #2563eb; border-radius: 4px 4px 0 0; }
.res-col:hover .res-barra, .res-col:focus .res-barra { background: #1d4ed8; }
.res-val { font-size: 12px; color: var(--text-muted); }
.res-mes { font-size: 12px; color: var(--text-muted); transform: translateY(18px); height: 0; }
.res-barras + * { margin-top: 24px; }
.card .res-barras { margin-bottom: 22px; }
.res-grupo td { background: var(--bg-soft, #f1f5f9); font-weight: 700; font-size: 12.5px; }
@media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .res-barra { background: #60a5fa; } }
:root[data-tema='escuro'] .res-barra { background: #60a5fa; }
/* v12.13.0 — carta de crédito no processo de importação */
.cx-carta-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px 12px; font-size: 13px; }
.cx-carta-docs label { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.cx-carta-docs input[type="checkbox"] { width: auto; }
/* v12.13.0 — SPED / DeSTDA (Fiscal) */
.sped-pend { background: rgba(185, 28, 28, .07); border-left: 4px solid #b91c1c; border-radius: 6px; padding: 8px 12px; font-size: 13px; margin: 8px 0; }
.sped-pend ul, .sped-avisos ul { margin: 4px 0 0 18px; }
.sped-ok { background: rgba(22, 163, 74, .08); border-left: 4px solid #16a34a; border-radius: 6px; padding: 8px 12px; font-size: 13.5px; margin: 10px 0 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sped-avisos { background: rgba(202, 138, 4, .1); border-left: 4px solid #ca8a04; border-radius: 6px; padding: 8px 12px; font-size: 13px; margin-top: 8px; }
.sped-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.sped-res > div { border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; }
.sped-res b { font-size: 22px; }
.sped-res span, .sped-res small { font-size: 12px; color: var(--text-muted); }
.sped-apur { margin-top: 8px; max-width: 520px; }
.sped-apur .sped-tot td { font-weight: 700; border-top: 2px solid var(--border, #e2e8f0); }

/* v12.14.0 — caixas da tela de pedidos que minimizam (aguardando aceite, em preparação) */
.caixa-min-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.caixa-min-bt { width: auto !important; flex: 0 0 auto; font-size: 12.5px; }
.caixa-min .caixa-min-corpo { display: none; }
.caixa-min { padding-top: 8px !important; padding-bottom: 8px !important; }

/* v12.14.1 — aviso de senha inicial (não bloqueia) */
.aviso-senha-inicial { position: fixed; inset: 0; z-index: 9600; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.aviso-senha-caixa { background: var(--card-bg, #fff); color: var(--text, #0f172a); border-radius: 14px; max-width: 460px; width: 100%; padding: 18px 20px; display: flex; gap: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.aviso-senha-caixa p { margin: 6px 0 12px; font-size: 13.5px; color: var(--text-muted); }
.aviso-senha-bts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.aviso-senha-bts .btn { width: auto; }
/* v12.14.2 — janela de ETIQUETAS com duas rolagens independentes: a lista de
 * etiquetas (esquerda) e a prévia + impressão (direita). A janela fica do
 * tamanho da tela e só as colunas rolam — o botão "Imprimir direto na Zebra"
 * não fica mais cortado embaixo. No celular (uma coluna) continua como antes. */
@media (min-width: 901px) {
  .modal.modal-xl:has(> .etqp) { height: calc(90vh / var(--z, 1)); max-height: calc(90vh / var(--z, 1)); overflow: hidden; display: flex; flex-direction: column; }
  .modal.modal-xl > .etqp { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .modal.modal-xl > .etqp > .etqp-corpo { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  .modal.modal-xl:has(> .etqp) > .modal-fechar-x { position: absolute; top: 12px; right: 12px; float: none; margin: 0; }
  .modal.modal-xl > .etqp > .etqp-cab { padding-right: 48px; }
  .modal.modal-xl > .etqp > .etqp-corpo > .etqp-esq,
  .modal.modal-xl > .etqp > .etqp-corpo > .etqp-dir { min-height: 0; height: 100%; overflow-y: auto; overscroll-behavior: contain; position: static; padding-right: 6px; scrollbar-gutter: stable; }
}

/* v12.15.0 — formulários das abas ERP e Escala (Integrações): campos com a mesma altura e largura */
.int-form label > input:not([type="checkbox"]):not([type="radio"]), .int-form label > select { display: block; width: 100%; box-sizing: border-box; min-height: 36px; padding: 6px 10px; margin-top: 3px; border: 1px solid var(--border, #cbd5e1); border-radius: 8px; font-size: 13.5px; background: var(--card, #fff); color: inherit; }
.int-form label > input[name="ocHora"], .int-form label > input[name="ocCodigo"] { display: inline-block; width: auto; min-height: 30px; margin-top: 0; }
.int-form .rh-mini select, .int-form select[name="ocFreq"] { min-height: 30px; padding: 3px 8px; border: 1px solid var(--border, #cbd5e1); border-radius: 8px; background: var(--card, #fff); color: inherit; }
.int-form label > .ax-olho-wrap { display: block; width: 100%; margin-top: 3px; }
.int-form label > .ax-olho-wrap > input { width: 100%; box-sizing: border-box; min-height: 36px; padding: 6px 34px 6px 10px; border: 1px solid var(--border, #cbd5e1); border-radius: 8px; font-size: 13.5px; background: var(--card, #fff); color: inherit; }
/* v12.15.1 — quadro da carta de correção: arrastar o arquivo para dentro */
#cceForm.cce-arrastando { background: #e8f0ff; border-color: #1d4ed8 !important; border-style: solid !important; }
/* v12.16.0 — campo padrão de cadastro também na portaria e no conferente: ocupa a linha toda */
.cad-espelho { width: 100%; }
.linha-mais > .cad-espelho { flex: 1 1 auto; min-width: 0; }
.cad-espelho .cad-busca { flex: 1 1 auto; min-width: 0; }
/* v12.16.1 — "+" ao lado do campo de busca (motorista, placa, transportadora digitada) */
.linha-mais { display: flex; gap: 6px; align-items: center; }
.linha-mais > .sug-wrap, .linha-mais > input { flex: 1 1 auto; min-width: 0; }
.linha-mais > .cad-mais { flex: 0 0 auto; font-size: 20px; font-weight: 700; min-width: 40px; }
/* v12.17.0 — mapa dos pneus (cavalo + carretas vistos de cima) */
.pn-mapa { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 6px 0; }
.pn-veic { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 14px 12px; border: 1px solid var(--border, #d6dde8); border-radius: 14px; background: var(--card, #fff); min-width: 260px; }
.pn-reboque { border-style: dashed; }
.pn-cab { font-size: 13px; }
.pn-chassi { display: flex; flex-direction: column; gap: 12px; position: relative; padding: 4px 0; }
.pn-eixo { display: flex; align-items: center; gap: 0; }
.pn-lado { display: flex; gap: 3px; }
.pn-barra { width: 64px; height: 8px; background: #334155; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.pn-barra i { font-style: normal; font-size: 9px; color: #fff; background: #334155; padding: 0 5px; border-radius: 6px; line-height: 14px; }
.pn-pneu { width: 60px; height: 70px; border-radius: 10px; border: 2px solid transparent; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; padding: 2px; font: inherit; line-height: 1.1; box-shadow: inset 0 0 0 3px rgba(0,0,0,.12); }
.pn-pneu b { font-size: 10px; letter-spacing: -.2px; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-pneu small { font-size: 9px; opacity: .95; }
.pn-pneu span { font-size: 9px; opacity: .85; }
.pn-pneu:hover, .pn-pneu:focus-visible { outline: none; border-color: var(--primaria, #2563eb); transform: translateY(-1px); }
.pn-ok { background: #16a34a; } .pn-perto { background: #d97706; } .pn-limite { background: #dc2626; } .pn-sem { background: #94a3b8; }
.pn-vazio { background: transparent; color: var(--text-muted, #64748b); border: 2px dashed #94a3b8; box-shadow: none; }
.pn-vazio:disabled { cursor: default; }
.pn-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin-top: 10px; font-size: 12px; color: var(--text-muted, #64748b); }
.pn-legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.pn-leg-vazio { border: 2px dashed #94a3b8; }
@media (max-width: 520px) { .pn-pneu { width: 42px; height: 60px; } .pn-barra { width: 28px; } .pn-veic { min-width: 0; padding: 8px; } .pn-pneu b { font-size: 8.5px; max-width: 40px; } }
/* v12.17.0 — cartões "top" do painel de custos da frota */
.fc-top { padding: 6px 0; border-bottom: 1px solid var(--border, #e5e9f0); }
.fc-top:last-child { border-bottom: 0; }
.fc-top-l { display: flex; gap: 8px; align-items: baseline; }
.fc-pos { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 700; align-items: center; justify-content: center; flex: 0 0 auto; }
.fc-top-b { height: 6px; background: var(--fundo-suave, #eef2f7); border-radius: 3px; margin: 4px 0 2px; overflow: hidden; }
.fc-top-b i { display: block; height: 100%; border-radius: 3px; }
/* v12.17.0 — acerto de viagem e simulador de lucro */
.av-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
.av-resumo > div { border: 1px solid var(--border, #e5e9f0); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.av-resumo span { font-size: 12px; color: var(--text-muted, #64748b); }
.av-saldo { grid-column: 1 / -1; background: #ecfdf3; border-color: #86efac !important; }
.av-saldo b { font-size: 22px; color: #15803d; }
.av-saldo.neg { background: #fef2f2; border-color: #fca5a5 !important; }
.av-saldo.neg b { color: #b91c1c; }
.sm-topo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 4px; }
.sm-topo > div { border: 1px solid var(--border, #e5e9f0); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.sm-topo span { font-size: 12px; color: var(--text-muted, #64748b); }
.sm-topo b { font-size: 19px; }
.sm-topo small { font-size: 11px; color: var(--text-muted, #64748b); }
.sm-lucro { border-width: 2px !important; }
.sm-item { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto !important; gap: 8px; align-items: center; font-size: 13px; margin: 5px 0; }
.sm-item i { display: block; height: 10px; border-radius: 0 4px 4px 0; background: #2563eb; }
.sm-item > span:first-child small { display: block; font-size: 11px; color: var(--text-muted, #64748b); }
.sm-ref { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--fundo-suave, #f1f5f9); font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 560px) { .sm-topo { grid-template-columns: 1fr; } .sm-item { grid-template-columns: 1fr !important; } }
/* v12.18.0 — bipar a nota (código de barras do DANFE) */
.bip-nota { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 8px; }
.bip-nota label { font-weight: 700; }
.bip-nota-in { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: .5px; border: 2px dashed #94a3b8 !important; background: #f8fafc; }
.bip-nota-in:focus { border-style: solid !important; border-color: var(--primaria, #2563eb) !important; background: #fff; }
.bip-nota-info { font-size: 12.5px; line-height: 1.4; min-height: 0; }
.bip-nota-info:empty { display: none; }
.bip-ok { color: #166534; } .bip-ok small { color: var(--text-muted, #64748b); }
.bip-erro { color: #b91c1c; font-weight: 600; } .bip-espera { color: #1d4ed8; } .bip-aviso { color: #92400e; }
@media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .bip-nota-in { background: transparent; } }
:root[data-tema='escuro'] .bip-nota-in { background: transparent; }
.md-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 6px 0; }
.md-kpi > div { border: 1px solid var(--border, #e5e9f0); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; }
.md-kpi b { font-size: 20px; } .md-kpi span { font-size: 12px; color: var(--text-muted, #64748b); }
.bip-nota-in::placeholder { font-family: inherit; letter-spacing: 0; }
.md-kpi-c { border: 1px solid var(--border, #e5e9f0); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; }
.md-kpi-c b { font-size: 17px; } .md-kpi-c span { font-size: 12px; color: var(--text-muted, #64748b); }
.md-campos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(160px, 1fr); gap: 12px; margin-top: 8px; }
.md-campos label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.md-campos input { width: 100%; box-sizing: border-box; padding: 9px 11px; font-size: 15px; }
@media (max-width: 640px) { .md-campos { grid-template-columns: 1fr; } }

/* v12.19.0 — COLETA COM CÓDIGO POR PEDIDO */
.cc-bloco { border: 3px solid #6a2fa8; border-radius: 12px; margin: 8px 0 12px; background: #f7f1ff; overflow: hidden; }
.cc-bloco-tit { background: #6a2fa8; color: #fff; font-weight: 900; padding: 6px 10px; font-size: 13.5px; border-radius: 8px; }
.cc-bloco > .cc-bloco-tit { border-radius: 0; }
.cc-grupo { margin: 6px 8px; }
.cc-linha { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.cc-veic { color: #1a5e33; font-weight: 600; }
.cc-falta, .cc-falta-n { color: #b3261e; font-weight: 800; }
.cc-incompleto { background: #fff0ee; border-left: 4px solid #b3261e; padding-left: 6px; }
.cc-resp { padding: 2px 0; font-size: 14px; }
.cc-resp a { color: inherit; }
.cc-quem { border: 2px solid #6a2fa8; background: #f7f1ff; border-radius: 10px; padding: 8px 10px; margin: 0 0 8px; }
.transp-card.cc-card { border-color: #6a2fa8; background: #f7f1ff; }
.transp-card.cc-card small { font-weight: 600; color: #6a2fa8; margin-left: 4px; }
.cc-tab { width: 100%; border-collapse: collapse; }
.cc-tab td, .cc-tab th { padding: 5px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 13px; text-align: left; }
.cc-tab input { width: 100%; min-width: 90px; }
.cc-aviso-painel { border: 2px solid #6a2fa8; background: #f7f1ff; color: #3d1a66; border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .cc-bloco, :root:not([data-tema='claro']) .cc-quem, :root:not([data-tema='claro']) .transp-card.cc-card, :root:not([data-tema='claro']) .cc-aviso-painel { background: #241536; color: #e9dcff; }
  :root:not([data-tema='claro']) .cc-incompleto { background: #3a1714; }
}
:root[data-tema='escuro'] .cc-bloco, :root[data-tema='escuro'] .cc-quem, :root[data-tema='escuro'] .transp-card.cc-card, :root[data-tema='escuro'] .cc-aviso-painel { background: #241536; color: #e9dcff; }
:root[data-tema='escuro'] .cc-incompleto { background: #3a1714; }
.cc-clicavel { cursor: pointer; }
.cc-clicavel:hover { outline: 2px solid #6a2fa8; outline-offset: -2px; }
.cc-pedido .cc-sub { font-size: 13px; font-weight: 600; color: #3d1a66; }
.cc-pedido[disabled] { opacity: .55; cursor: not-allowed; }

/* v12.20.0 — eTracking */
.et-box { grid-column: 1 / -1; }
.et-res { font-size: 12.5px; padding: 5px 8px; border-radius: 8px; margin-top: 4px; line-height: 1.5; }
.et-res .btn { width: auto; margin-left: 6px; }
.et-ok { background: #e7f6ec; color: #14532d; border: 1px solid #9fd8b0; }
.et-info { background: #eef2f7; color: #334155; border: 1px solid #cbd5e1; }
.et-aviso { background: #fff7e6; color: #7a4b00; border: 1px solid #f3c77a; }
.et-erro { background: #fdecec; color: #8a1c1c; border: 1px solid #f2b0b0; }
.et-preenchido { outline: 2px solid #34a853; outline-offset: -2px; }
@media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .et-ok { background: #12301e; color: #c9f0d6; } :root:not([data-tema='claro']) .et-info { background: #1e2633; color: #d4dbe6; } :root:not([data-tema='claro']) .et-aviso { background: #33260e; color: #f6dca8; } :root:not([data-tema='claro']) .et-erro { background: #3a1616; color: #f6c4c4; } }
:root[data-tema='escuro'] .et-ok { background: #12301e; color: #c9f0d6; } :root[data-tema='escuro'] .et-info { background: #1e2633; color: #d4dbe6; } :root[data-tema='escuro'] .et-aviso { background: #33260e; color: #f6dca8; } :root[data-tema='escuro'] .et-erro { background: #3a1616; color: #f6c4c4; }

/* v12.21.0 — Rastreio de contêineres */
.ras-busca-linha { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.ras-busca-linha textarea { flex: 1; min-width: 220px; font-family: monospace; }
.ras-busca-linha .btn { width: auto; }
.ras-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.ras-filtros input { flex: 1; min-width: 200px; }
.ras-filtros select { width: auto; }
.ras-item { border: 1px solid var(--border); border-radius: 10px; margin: 6px 0; overflow: hidden; }
.ras-item.aberto { border-color: #2a78d6; box-shadow: 0 0 0 2px rgba(42,120,214,.15); }
.ras-cab { display: grid; grid-template-columns: 1.3fr 1.2fr 1.6fr 1.4fr 1.4fr 32px; gap: 8px; padding: 8px 10px; cursor: pointer; align-items: center; font-size: 13px; }
.ras-cab:hover { background: var(--bg); }
.ras-num b { font-family: monospace; font-size: 14px; }
.ras-tag { font-size: 11px; background: #eef2f7; color: #334155; border-radius: 6px; padding: 1px 6px; margin-left: 4px; white-space: nowrap; }
.ras-rota span { color: var(--text-muted); }
.ras-sit { font-size: 12px; color: var(--text-muted); }
.ras-det { padding: 8px 10px 10px; border-top: 1px dashed var(--border); background: var(--bg); }
.ras-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px 14px; margin-bottom: 8px; }
.ras-grade span { display: block; font-size: 11px; color: var(--text-muted); }
.ras-linha-tempo { font-size: 12.5px; margin: 6px 0; }
.ras-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.ras-acoes .btn { width: auto; }
@media (max-width: 760px) { .ras-cab { grid-template-columns: 1fr 1fr; } }
@media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .ras-tag { background: #1e2633; color: #d4dbe6; } }
:root[data-tema='escuro'] .ras-tag { background: #1e2633; color: #d4dbe6; }
/* v12.22.0 — programar coleta a partir do rastreio */
.ras-sel { margin-right: 8px; width: 16px; height: 16px; vertical-align: middle; cursor: pointer; }
.ras-selbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; margin: 0 0 8px; border: 1px solid #bfdbfe; background: #eff6ff; border-radius: 10px; font-size: 13px; }
.ras-op { display: flex; gap: 6px; align-items: center; padding: 4px 0; cursor: pointer; }
.ras-prog-linha { display: grid; grid-template-columns: 1.2fr .6fr 1fr 1fr; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed #e2e8f0; font-size: 13px; }
.ras-prog-linha input, .ras-prog-linha select { width: 100%; }
@media (max-width: 640px) { .ras-prog-linha { grid-template-columns: 1fr 1fr; } }
[data-tema='escuro'] .ras-selbar { background: #0f2540; border-color: #1e40af; }

.ras-x { text-align: right; }
.ras-tirar { border: 0; background: transparent; color: #94a3b8; font-size: 15px; line-height: 1; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; }
.ras-tirar:hover { background: #fee2e2; color: #b91c1c; }
#rasLimparTudo { width: auto; margin-left: auto; }
/* v12.22.0 — demurrage no rastreio */
.ras-dem { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; margin-bottom: 2px; white-space: nowrap; }
.ras-dem.ok { background: #dcfce7; color: #166534; }
.ras-dem.atencao { background: #fef9c3; color: #854d0e; }
.ras-dem.perto { background: #ffedd5; color: #9a3412; }
.ras-dem.venc { background: #fee2e2; color: #991b1b; }
.ras-dem.sem { background: #f1f5f9; color: #64748b; font-weight: 500; }
.ras-dem-ed { display: flex; gap: 6px; margin-top: 4px; }
.ras-dem-ed input { width: auto; }
[data-tema='escuro'] .ras-dem.sem { background: #1e293b; color: #94a3b8; }
.ras-selbar .btn, .ras-acoes .btn, #rasTrocar, .ras-dem-ed .btn { width: auto; }
.ras-prog-linha { font-size: 14px; }
.ras-prog-linha b { font-family: ui-monospace, monospace; }
.ras-prog-linha select, .ras-prog-linha input { padding: 6px 8px; font-size: 14px; }
#rasComp { width: auto; margin-left: 6px; }
.ras-op { font-size: 14px; }
/* v12.22.1 — programação de transporte: janela maior e campos maiores */
.modal.modal-xl:has(.pg-editor-marca) { max-width: min(1480px, 96vw); width: 96vw; }
.modal:has(.pg-editor-marca) .tr-fs input, .modal:has(.pg-editor-marca) .tr-fs select, .modal:has(.pg-editor-marca) .tr-fs textarea { font-size: 15px; padding: 10px 12px; min-height: 44px; }
.modal:has(.pg-editor-marca) .tr-fs label { font-size: 13.5px; }
.modal:has(.pg-editor-marca) .pg-cont { grid-template-columns: 1.4fr 1fr 1fr 1fr !important; gap: 10px; }
.modal:has(.pg-editor-marca) .pg-cont label.tr-mini { font-size: 13px; }
.modal:has(.pg-editor-marca) .pg-cont input[type="date"], .modal:has(.pg-editor-marca) .pg-cont select[data-c="carreta"] { min-height: 40px; }
@media (max-width: 900px) { .modal:has(.pg-editor-marca) .pg-cont { grid-template-columns: 1fr 1fr !important; } }
/* v12.22.1 — janelas grandes e campos espaçosos em todo o sistema (openModal marca .modal-grande / .modal-campos) */
.modal.modal-grande { max-width: min(1480px, 96vw); width: 96vw; max-height: calc(94vh / var(--z, 1)); }
.modal.modal-campos input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]),
.modal.modal-campos select,
.modal.modal-campos textarea { font-size: 15px; padding: 10px 12px; min-height: 44px; }
.modal.modal-campos textarea { min-height: 84px; }
.modal.modal-campos .field { margin-bottom: 14px; }
.modal.modal-campos label { font-size: 14px; }
.modal.modal-grande .tr-g4, .modal.modal-grande .tr-g3 { gap: 6px 16px; }
.modal.modal-grande .tr-fs { padding: 12px 16px 6px; margin-bottom: 14px; }
@media (max-width: 640px) { .modal.modal-grande { width: 100%; max-width: 100%; } }

/* v12.27.0 — ↩️ DEVOLUÇÃO (janela, selo na lista, faixa no recebimento) */
.rec-chip.dev { background: #f3ecfb; color: #5b2a91; border-color: #d6c2ef; }
.dev-intro { font-size: 12.5px; color: var(--text-muted); margin: -4px 0 10px; }
.dev-origem { border-left: 4px solid #6a2fa8; background: var(--superficie-2); border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 10px; display: grid; gap: 3px; }
.dev-ok { border: 1px solid #b7e4c7; background: #effaf3; color: #14532d; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; font-size: 13.5px; }
.dev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 14px; margin-bottom: 8px; }
.dev-grid .field.full { grid-column: 1 / -1; }
.dev-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.dev-tipo { display: flex; gap: 10px; align-items: flex-start; border: 2px solid var(--border); border-radius: 12px; padding: 10px 12px; cursor: pointer; background: var(--superficie-2); font-weight: 400; margin: 0; }
.dev-tipo input { width: auto; margin-top: 4px; }
.dev-tipo.on { border-color: #6a2fa8; background: #f6f0fd; }
.dev-tipo-ic { font-size: 24px; line-height: 1; }
.dev-tipo b { display: block; font-size: 14.5px; }
.dev-tipo small { display: block; color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.dev-bloco { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 12px; margin: 0 0 12px; min-width: 0; }
.dev-bloco legend { font-weight: 800; padding: 0 6px; }
.dev-nota-resumo { font-size: 13.5px; margin-bottom: 8px; }
.dev-nota-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.dev-mini { display: flex; flex-direction: column; font-size: 12px; color: var(--text-muted); margin: 0; font-weight: 400; }
.dev-mini input { min-width: 120px; }
.dev-chave input { min-width: 330px; }
.dev-det { font-size: 12.5px; margin-top: 4px; }
.dev-det.ok { color: #1a7f37; }
.dev-det.aviso { color: #9a5b00; }
.dev-det.ruim { color: #b02a2a; }
.dev-pedido-linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 6px 0 8px; }
.dev-pedido-linha select { flex: 1 1 380px; min-width: 0; }
.dev-tab { width: 100%; font-size: 13px; }
.dev-tab td, .dev-tab th { vertical-align: top; }
.dev-itens select, .dev-itens input { min-height: 34px; }
.dev-itens td:nth-child(2) select { width: 100%; min-width: 260px; }
.dev-linha-ruim td { background: #fff5f5; }
.dev-linha-msg td { border-top: 0; padding-top: 0; }
.dev-previa { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 4px 0 8px; font-size: 13.5px; display: grid; gap: 4px; }
.dev-previa.ok { border-color: #b7e4c7; background: #effaf3; }
.dev-previa.ruim { border-color: #f2c48a; background: #fff8ee; }
.dev-banner { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px solid #d6c2ef; background: #f6f0fd; color: #3e1d66; border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; font-size: 13.5px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .dev-tipo.on, :root:not([data-tema='claro']) .dev-banner, :root:not([data-tema='claro']) .rec-chip.dev { background: #2d2140; color: #e9dcfb; border-color: #6a4b95; }
  :root:not([data-tema='claro']) .dev-ok, :root:not([data-tema='claro']) .dev-previa.ok { background: #12301f; color: #c9f1d6; border-color: #2f6b45; }
  :root:not([data-tema='claro']) .dev-previa.ruim, :root:not([data-tema='claro']) .dev-linha-ruim td { background: #3a2a14; }
}
:root[data-tema='escuro'] .dev-tipo.on, :root[data-tema='escuro'] .dev-banner, :root[data-tema='escuro'] .rec-chip.dev { background: #2d2140; color: #e9dcfb; border-color: #6a4b95; }
:root[data-tema='escuro'] .dev-ok, :root[data-tema='escuro'] .dev-previa.ok { background: #12301f; color: #c9f1d6; border-color: #2f6b45; }
:root[data-tema='escuro'] .dev-previa.ruim, :root[data-tema='escuro'] .dev-linha-ruim td { background: #3a2a14; }
@media (max-width: 640px) { .dev-chave input { min-width: 0; width: 100%; } .dev-itens td:nth-child(2) select { min-width: 200px; } }

/* v12.28.0 — Expedição, abas Aguardando coleta e Despachados: estado, cidade e tempo */
.aba-local-tempo { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 2px; font-size: 13px; }
.aba-local-tempo .alt-linha { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.aba-local-tempo .alt-rot { color: var(--text-muted); font-weight: 700; min-width: 108px; }
.aba-local-tempo select { width: auto; min-width: 170px; max-width: 100%; padding: 4px 8px; font-size: 13px; }
.aba-local-tempo .alt-alerta.btn-secondary { border-color: #d68a00; color: #8a5a00; font-weight: 800; }
@media (max-width: 640px) {
  .aba-local-tempo .alt-rot { min-width: 0; width: 100%; }
  .aba-local-tempo select { flex: 1 1 100%; width: 100%; min-width: 0; }
}

/* v12.30.0 — relatório das coletas em aberto com o mapa do Brasil (botão na faixa da aba Aguardando coleta + janela) */
.aba-local-tempo .alt-relmapa { width: auto; margin-left: auto; white-space: nowrap; }
.relcol { --relcol-zero: #f0efec; --relcol-borda: #c9c6bf; --relcol-sel: #e8590c; min-width: 0; }
.relcol h3 { margin-bottom: 4px; }
.relcol-dica { font-size: 12.5px; color: var(--text-muted); margin: 0 0 10px; }
.relcol-corpo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.relcol-esq, .relcol-dir { min-width: 0; }
.relcol-dir { display: flex; flex-direction: column; gap: 10px; }
.relcol-totais { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.relcol-tot { border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; background: var(--card); min-width: 0; }
.relcol-tot span { display: block; font-size: 11.5px; color: var(--text-muted); }
.relcol-tot b { display: block; font-size: 19px; color: var(--titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.relcol-tot-obs { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-muted); }
.relcol-mapa { position: relative; }
.relcol-svg { display: block; width: 100%; height: auto; max-height: 62vh; }
.relcol-uf { fill: var(--relcol-zero); stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; cursor: pointer; transition: opacity .15s; outline: none; }
.relcol-uf.zero { fill: var(--relcol-zero) !important; stroke: var(--relcol-borda); }
.relcol-uf:hover, .relcol-uf:focus-visible { stroke: var(--titulo); stroke-width: 2; }
.relcol-uf.sel { stroke: var(--relcol-sel); stroke-width: 3; }
.relcol-svg.tem-sel .relcol-uf:not(.sel) { opacity: .38; }
.relcol-n { font: 700 15px/1 system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.relcol-numeros .fora { opacity: .45; }
.relcol-contorno { fill: none; stroke: var(--relcol-sel); stroke-width: 3; vector-effect: non-scaling-stroke; pointer-events: none; }
/* o balão dos estados pequenos marca/desmarca como o estado (data-uf); a linha cruza vizinhos: sem clique */
.relcol-chamada { cursor: pointer; }
.relcol-chamada line { stroke: #5b6472; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.relcol-chamada:hover rect { stroke: var(--titulo); stroke-width: 2; }
.relcol-chamada.sel rect { stroke: var(--relcol-sel); stroke-width: 2.5; }
.relcol-chamada circle { fill: #33404f; }
.relcol-chamada rect { stroke: #8a93a0; stroke-width: 1; vector-effect: non-scaling-stroke; }
.relcol-tip { position: absolute; z-index: 5; display: flex; flex-direction: column; gap: 2px; max-width: 260px; padding: 6px 9px; border-radius: 8px; background: #0b1f3a; color: #fff; font-size: 12.5px; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.relcol-tip span { font-size: 11.5px; opacity: .85; }
.relcol-legenda { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 12px; margin-top: 4px; }
.relcol-leg-tit { font-weight: 700; color: var(--text-muted); }
.relcol-leg { display: inline-flex; align-items: center; gap: 5px; }
.relcol-sw { display: inline-block; width: 13px; height: 13px; border-radius: 3px; }
.relcol-sw.zero { background: var(--relcol-zero); border: 1px solid var(--relcol-borda); }
.relcol-credito { font-size: 10.5px; color: var(--text-muted); margin-top: 4px; }
.relcol-bloco { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.relcol-bloco-cab { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; font-size: 13.5px; color: var(--titulo); }
.relcol-bloco-acoes { display: inline-flex; gap: 4px; }
.relcol-bloco-acoes .btn { width: auto; margin: 0; padding: 2px 8px; }
.relcol-busca { width: 100%; margin: 0 0 6px; min-height: 32px; padding: 4px 8px; }
.relcol-lista { max-height: 168px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; }
.relcol-item { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 6px; border-radius: 7px; font-size: 13px; font-weight: 500; cursor: pointer; min-width: 0; }
.relcol-item:hover { background: rgba(57, 135, 229, .08); }
.relcol-item.on { background: rgba(57, 135, 229, .16); }
.relcol-item.sem .relcol-item-nome { font-style: italic; color: var(--text-muted); }
.relcol-item input { width: auto; margin: 0; flex: 0 0 auto; }
.relcol-item-nome { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.relcol-item-nome small { color: var(--text-muted); font-weight: 400; }
.relcol-item-n { flex: 0 0 auto; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.relcol-vazio { font-size: 12.5px; color: var(--text-muted); padding: 4px 6px; }
.relcol-linha { display: flex; flex-wrap: wrap; gap: 8px; }
.relcol-linha select { flex: 1 1 160px; min-width: 0; width: auto; margin: 0; }
.relcol-grupos label { display: flex; flex-direction: column; gap: 3px; flex: 1 1 130px; min-width: 0; margin: 0; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.relcol-grupos select { width: 100%; flex: 0 0 auto; } /* dentro do rótulo em coluna: sem o flex-basis de 160px virar altura */
.relcol-acoes { flex-wrap: wrap; align-items: center; }
.relcol-acoes .btn { width: auto; }
.relcol-aviso { margin-right: auto; font-size: 12.5px; color: #b45309; font-weight: 700; }
@media (max-width: 900px) {
  .relcol-corpo { grid-template-columns: minmax(0, 1fr); }
  .relcol-svg { max-height: none; }
}
@media (max-width: 640px) {
  .relcol-totais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .relcol-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .relcol-acoes .btn { margin: 0; width: 100%; }
  .relcol-acoes #relcolZip, .relcol-acoes #relcolPdf, .relcol-aviso { grid-column: 1 / -1; }
  .relcol-aviso:empty { display: none; }
  .aba-local-tempo .alt-relmapa { margin-left: 0; flex: 1 1 100%; }
}
/* modo escuro do sistema (tema.js: data-tema): o cinza dos estados sem nota e a divisa acompanham o fundo */
:root[data-tema='escuro'] .relcol { --relcol-zero: #2a3342; --relcol-borda: #4a5568; }
:root[data-tema='escuro'] .relcol-uf { stroke: #151f2e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .relcol { --relcol-zero: #2a3342; --relcol-borda: #4a5568; }
  :root:not([data-tema='claro']) .relcol-uf { stroke: #151f2e; }
}

/* v12.29.0 — Etiquetas: as etiquetas prontas do próprio cliente (.prn/.zpl do NiceLabel) — só quantidade e imprimir */
/* prefixo etqcli- (não etqp-): etqp- é da janela "Etiquetas do pedido" (styles.css), e este arquivo carrega depois */
.etqcli-envio { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--text-muted); }
.etqcli-envio .btn { width: auto; margin: 0; }
.etqcli-explica { font-size: 12.5px; color: var(--text-muted); margin: -2px 0 8px; }
.etqcli-card { border-color: #9cc3f5; }
/* v12.29.0 — a PRÉVIA do desenho no lugar da placa neutra (clique = a etiqueta grande, só para ver) */
.etqcli-previa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 120px; margin: 0; padding: 10px; border: 0; border-radius: 0; background: #e9edf3; color: #33507a; cursor: zoom-in; }
.etqcli-previa canvas, .etqcli-previa img { display: block; max-width: 100%; max-height: 220px; width: auto; height: auto; background: #fff; border: 1px solid #b9c0ca; border-radius: 2px; box-shadow: 0 3px 10px rgba(0, 0, 0, .14); }
.etqcli-previa:not(.ok) canvas { display: none; }
.etqcli-previa-msg { font-size: 12px; color: var(--text-muted); text-align: center; overflow-wrap: anywhere; }
.etqcli-aprox { font-size: 11.5px; padding: 4px 12px; background: #fff6e0; color: #6b4a00; border-top: 1px solid #f0d9a8; }
.etqcli-nota { font-size: 11.5px; padding: 4px 12px; color: var(--text-muted); border-top: 1px solid var(--border); } /* arquivo com várias etiquetas: a prévia é a 1ª */
.etqcli-grande { display: flex; justify-content: center; align-items: flex-start; overflow: auto; max-height: 70vh; padding: 12px; border-radius: 8px; background: #e9edf3; }
.etqcli-grande canvas, .etqcli-grande img { display: block; max-width: 100%; max-height: 65vh; width: auto; height: auto; background: #fff; border: 1px solid #b9c0ca; box-shadow: 0 3px 12px rgba(0, 0, 0, .16); }
/* importação por PDF: opções, prévia de cada página (como vai imprimir) e o resultado */
.etqcli-pdf { margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; }
.etqcli-pdf-info { font-size: 13.5px; margin-bottom: 8px; overflow-wrap: anywhere; }
.etqcli-pdf-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 12px; }
.etqcli-pdf-opcoes label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12.5px; font-weight: 700; }
.etqcli-pdf-opcoes label small { font-weight: 500; color: var(--text-muted); }
.etqcli-pdf-opcoes select { margin: 0; min-width: 0; width: 100%; }
.etqcli-pdf-aviso { margin-top: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid #f0d9a8; background: #fff6e0; color: #6b4a00; font-size: 12.5px; }
.etqcli-pdf-status { margin-top: 8px; font-size: 12.5px; color: var(--text-muted); }
.etqcli-pdf-paginas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 10px; margin-top: 8px; }
.etqcli-pdf-pag { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--card); }
.etqcli-pdf-pag.feita { border-color: #2f9e5b; }
.etqcli-pdf-pag.erro { border-color: var(--danger, #c53030); } /* depois da .feita: o erro vence */
.etqcli-pdf-img { display: flex; justify-content: center; align-items: center; min-height: 90px; padding: 8px; background: #e9edf3; cursor: zoom-in; }
.etqcli-pdf-img img { display: block; max-width: 100%; height: auto; background: #fff; border: 1px solid #b9c0ca; }
.etqcli-pdf-img.real { justify-content: flex-start; align-items: flex-start; max-height: 60vh; overflow: auto; cursor: zoom-out; }
.etqcli-pdf-img.real img { max-width: none; image-rendering: pixelated; }
.etqcli-pdf-pag figcaption { padding: 6px 8px; font-size: 12px; overflow-wrap: anywhere; }
.etqcli-pdf-pag-st { display: block; font-weight: 700; }
.etqcli-pdf-resultado { margin-top: 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid #f3b9b9; background: #fdecec; color: #6b1d1d; font-size: 13px; }
.etqcli-pdf-resultado ul { margin: 4px 0; padding-left: 18px; }
.etqcli-prod { font-size: 12.5px; margin-top: 3px; overflow-wrap: anywhere; }
.etqcli-card .etqh-info b { overflow-wrap: anywhere; }
.etqcli-impressas { font-weight: 700; }
.etqcli-acoes { display: flex; gap: 6px; padding: 6px 12px 12px; flex-wrap: wrap; align-items: center; }
.etqcli-acoes .btn { width: auto; margin: 0; text-decoration: none; }
.etqcli-qtd { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; margin: 0; flex: 1 1 100%; }
.etqcli-qtd input { width: 86px; min-height: 32px; padding: 4px 8px; margin: 0; }
.etqcli-qtd input.etqcli-qtd-ruim { border-color: var(--danger, #c53030); }
.etqcli-sem { font-size: 12px; color: var(--text-muted); }
.etqcli-registrar { display: flex; gap: 6px 8px; align-items: center; flex-wrap: wrap; padding: 0 12px 12px; font-size: 12.5px; }
.etqcli-registrar .btn { width: auto; margin: 0; }
.etqcli-modal-dica { font-size: 13px; color: var(--text-muted); margin-top: -6px; }
.etqcli-wh { display: flex; align-items: center; gap: 6px; }
.etqcli-wh input { min-width: 0; flex: 1 1 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .etqcli-previa, :root:not([data-tema='claro']) .etqcli-grande, :root:not([data-tema='claro']) .etqcli-pdf-img { background: #1d2a3d; color: #c9dbf5; }
  :root:not([data-tema='claro']) .etqcli-aprox, :root:not([data-tema='claro']) .etqcli-pdf-aviso { background: #3a2a14; color: #f6dfb0; border-color: #6b5226; }
  :root:not([data-tema='claro']) .etqcli-pdf-resultado { background: #3a1d1d; color: #f6c9c9; border-color: #7a3434; }
  :root:not([data-tema='claro']) .etqcli-card { border-color: #35557f; }
}
:root[data-tema='escuro'] .etqcli-previa, :root[data-tema='escuro'] .etqcli-grande, :root[data-tema='escuro'] .etqcli-pdf-img { background: #1d2a3d; color: #c9dbf5; }
:root[data-tema='escuro'] .etqcli-aprox, :root[data-tema='escuro'] .etqcli-pdf-aviso { background: #3a2a14; color: #f6dfb0; border-color: #6b5226; }
:root[data-tema='escuro'] .etqcli-pdf-resultado { background: #3a1d1d; color: #f6c9c9; border-color: #7a3434; }
:root[data-tema='escuro'] .etqcli-card { border-color: #35557f; }
@media (max-width: 640px) {
  .etqcli-acoes .btn { flex: 1 1 auto; text-align: center; }
}

/* v12.31.0 — Etiquetas: importar o .prn/.zpl do ZebraDesigner PARA EDITAR (vira um modelo do editor).
 * Prefixo etqimp-. Original × convertida lado a lado, na mesma escala; no celular, uma embaixo da outra. */
.etqimp-envio { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--text-muted); }
.etqimp-envio .btn { width: auto; margin: 0; }
.etqimp-envio span { min-width: 0; overflow-wrap: anywhere; }
.etqimp-dica-dpi { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.etqimp-status { margin-top: 8px; font-size: 12.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.etqimp-status.erro { color: var(--danger, #c53030); font-weight: 700; }
.etqimp-lado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.etqimp-lado figure { min-width: 0; margin: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--card); }
.etqimp-lado figcaption { padding: 6px 10px; font-size: 12px; font-weight: 700; letter-spacing: .02em; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.etqimp-lado figcaption small { font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.etqimp-tela { display: flex; justify-content: center; align-items: center; min-height: 90px; padding: 10px; background: #e9edf3; }
.etqimp-tela canvas { display: block; max-width: 100%; height: auto; background: #fff; border: 1px solid #b9c0ca; box-shadow: 0 3px 10px rgba(0, 0, 0, .14); }
.etqimp-nota { font-size: 11.5px; padding: 4px 10px; background: #fff6e0; color: #6b4a00; border-top: 1px solid #f0d9a8; }
.etqimp-relatorio { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; overflow-wrap: anywhere; }
.etqimp-relatorio b { display: block; }
.etqimp-relatorio ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text-muted); }
.etqimp-relatorio li.fora { color: #8a3b00; }
/* v12.31.0 — os comandos do ZPL, recolhidos (quem usa lê o aviso em português) */
.etqimp-relatorio .etqimp-tec { margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.etqimp-relatorio .etqimp-tec summary { cursor: pointer; }
@media (max-width: 720px) {
  .etqimp-lado { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .etqimp-tela { background: #1d2a3d; }
  :root:not([data-tema='claro']) .etqimp-nota { background: #3a2a14; color: #f6dfb0; border-color: #6b5226; }
  :root:not([data-tema='claro']) .etqimp-relatorio li.fora { color: #f6c48a; }
}
:root[data-tema='escuro'] .etqimp-tela { background: #1d2a3d; }
:root[data-tema='escuro'] .etqimp-nota { background: #3a2a14; color: #f6dfb0; border-color: #6b5226; }
:root[data-tema='escuro'] .etqimp-relatorio li.fora { color: #f6c48a; }
/* v12.31.0 — etiqueta do ZebraDesigner toda girada 180° (campos em I / ^POI): a prévia mostra em pé e avisa */
.etqcli-girada { font-size: 11.5px; padding: 4px 12px; background: #e8f1fd; color: #1d4b8f; border-top: 1px solid #c4d8f5; }
.etqcli-girada[hidden] { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .etqcli-girada { background: #16273f; color: #b9d3f7; border-color: #2b4a73; }
}
:root[data-tema='escuro'] .etqcli-girada { background: #16273f; color: #b9d3f7; border-color: #2b4a73; }
/* v12.32.0 — Recebimento de contêineres: data de chegada clicável, coluna Lacre,
 * etapas Conferido / Etiquetado (chips na lista, linha no recebimento aberto).
 * v12.32.0 (revisão) — o tema do sistema é <html data-tema="claro|escuro">
 * (public/js/tema.js), como em styles.css: as regras de cor escura deste
 * arquivo usavam [data-theme], que ninguém liga — com o aparelho escuro e o
 * tema "claro" escolhido, a cor escura caía na tela clara. */
.rec-data-btn { font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px dashed var(--border); padding: 0; cursor: pointer; white-space: nowrap; }
.rec-data-btn:hover, .rec-data-btn:focus-visible { color: var(--primaria, #2a78d6); border-bottom-color: currentColor; outline: none; }
.rec-data-corr { margin-left: 3px; font-size: 11px; color: #8a5a00; cursor: help; }
.rec-etapa-chip { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.5; border-radius: 999px; padding: 0 7px; white-space: nowrap; background: #e7f6ec; color: #1a7f37; border: 1px solid #b8e5c6; cursor: help; }
.lacre-num { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.rec-lacre { font-size: 11px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.rec-lacre.ok { color: #1a7f37; }
.rec-lacre.ruim { color: #c53030; }
.etapas-rec { display: grid; gap: 4px; margin: -4px 0 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--superficie-2, #f7f9fc); font-size: 13px; }
.etapas-rec-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 30px; }
.etapas-rec-nome { font-weight: 800; min-width: 112px; }
.etapas-rec-estado { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.rec-etapa-ok { color: #1a7f37; font-weight: 600; }
.marco-opcoes { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.marco-opcoes label { display: flex; gap: 6px; align-items: center; font-weight: 400; margin: 0; cursor: pointer; }
.marco-opcoes input { width: auto; }
.data-cheg-um { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; overflow-wrap: anywhere; }
/* anexos da nota e do packing list no formulário (seção Nota fiscal) */
.rec-anexos-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 12px; }
.rec-anexo-caixa { border: 1px dashed var(--border); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.rec-anexo-caixa .btn { width: auto; }
.rec-anexo-lista { margin-top: 6px; display: grid; gap: 3px; font-size: 12.5px; }
.rec-anexo-item { display: flex; gap: 6px; align-items: center; min-width: 0; }
.rec-anexo-item .nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-anexo-item.pendente .nome { color: var(--text-muted); }
.rec-anexo-item.erro .nome { color: #c53030; }
.rec-anexo-aviso { font-size: 12px; color: #8a5a00; background: #fff8e6; border: 1px solid #f2d59b; border-radius: 6px; padding: 3px 7px; overflow-wrap: anywhere; } /* v12.32.0 (revisão) */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .rec-etapa-chip { background: #12301f; color: #9ee2b5; border-color: #2b6a43; }
  :root:not([data-tema='claro']) .rec-lacre.ok, :root:not([data-tema='claro']) .rec-etapa-ok { color: #8fdcaa; }
  :root:not([data-tema='claro']) .rec-lacre.ruim, :root:not([data-tema='claro']) .rec-anexo-item.erro .nome { color: #f5a3a3; }
  :root:not([data-tema='claro']) .rec-data-corr { color: #f2cf86; }
  :root:not([data-tema='claro']) .rec-anexo-aviso { color: #f2cf86; background: #2b2410; border-color: #5a4815; }
}
:root[data-tema='escuro'] .rec-etapa-chip { background: #12301f; color: #9ee2b5; border-color: #2b6a43; }
:root[data-tema='escuro'] .rec-lacre.ok, :root[data-tema='escuro'] .rec-etapa-ok { color: #8fdcaa; }
:root[data-tema='escuro'] .rec-lacre.ruim, :root[data-tema='escuro'] .rec-anexo-item.erro .nome { color: #f5a3a3; }
:root[data-tema='escuro'] .rec-data-corr { color: #f2cf86; }
:root[data-tema='escuro'] .rec-anexo-aviso { color: #f2cf86; background: #2b2410; border-color: #5a4815; }
/* v12.32.0 — app do conferente: o OK de Conferido / Etiquetado */
.marcos-conf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.marcos-conf-tit { flex-basis: 100%; font-weight: 800; font-size: 14px; }
.marcos-conf-btn { width: auto; min-height: 44px; font-size: 16px; font-weight: 800; }
.marco-conf.ok { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; font-size: 16px; font-weight: 800; background: #e7f6ec; color: #1a7f37; border: 1px solid #b8e5c6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .marco-conf.ok { background: #12301f; color: #9ee2b5; border-color: #2b6a43; }
}
:root[data-tema='escuro'] .marco-conf.ok { background: #12301f; color: #9ee2b5; border-color: #2b6a43; }
/* v12.32.0 — as listas dos popups da data e das etapas: duas colunas, cabem no celular */
.rec-pop-tab td { vertical-align: top; }
/* v12.32.0 (revisão) — o "por quê" quebra a linha (no celular a tabela herdava o nowrap e cortava o motivo) */
.rec-pop-tab td.rec-pop-motivo { white-space: normal; overflow-wrap: anywhere; font-size: 12.5px; min-width: 120px; }
.rec-pop-sel { font-size: 12.5px; color: var(--text-muted); margin: 10px 0 0; }
.rec-pop-cel { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.rec-pop-cel .cntr-num { display: inline-block; margin-top: 2px; font-size: 12.5px; }

/* v12.32.0 (revisão) — formulário: processo | contêiner e lacre | free time numa grade
 * própria (não depende de quantos campos vêm antes — o pedido de compra some na compra direta) */
.rec-grade-cntr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: inherit; min-width: 0; }
.rec-grade-cntr > [hidden] { display: none; }
@media (max-width: 860px) { .rec-grade-cntr { grid-template-columns: minmax(0, 1fr); } }

/* v12.32.0 — lista de contêineres: o nº do contêiner e o processo lado a lado */
.cntr-proc { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.cntr-proc-p { font-weight: 600; }
.cntr-proc-p::before { content: '·'; color: var(--text-muted); font-weight: 400; margin-right: 8px; }
/* v12.34.0 (fechamento) — quadros da prévia da fatura ("Chegaram depois", "Ficaram de fora", "confira") no
 * celular: cada linha vira um cartão, com o "Por quê" à vista (na tabela ele ficava escondido à direita). */
@media (max-width: 600px) {
  .quadro-chegada-fat .table-wrap { overflow: visible; }
  .quadro-chegada-fat table, .quadro-chegada-fat tbody, .quadro-chegada-fat tr, .quadro-chegada-fat td { display: block; width: 100%; min-width: 0 !important; }
  .quadro-chegada-fat thead { display: none; }
  .quadro-chegada-fat tr { padding: 6px 0; border-bottom: 1px solid var(--border, #e2e8f0); background: transparent; }
  .quadro-chegada-fat td { border: 0 !important; padding: 1px 0 !important; white-space: normal !important; }
  .quadro-chegada-fat td[data-r]::before { content: attr(data-r) ": "; font-weight: 700; color: var(--text-muted); }
  .quadro-chegada-fat td.qcf-motivo::before { display: block; }
}

/* ==================================================================
   v12.35.0 — correções de tela vistas nos prints da 12.34 (1440 e 390, tema claro e escuro)
   ================================================================== */
/* T1 — prévia da fatura no celular: a tabela Item / Qtd / Valor unit. / Total cabe na largura
   (o nome do item quebra a linha; os valores ficam inteiros) — antes ela era cortada à direita. */
@media (max-width: 600px) {
  table.tabela-itens-fat { font-size: 12.5px; }
  table.tabela-itens-fat th, table.tabela-itens-fat td { padding: 7px 4px; }
  table.tabela-itens-fat th { white-space: normal; letter-spacing: 0; vertical-align: bottom; }
  table.tabela-itens-fat td:first-child { white-space: normal; overflow-wrap: anywhere; }
}
/* T2 — lista do recebimento de mercadorias. Tela larga: as colunas de texto quebram a linha (cabeçalho,
   cliente, transportadora, o "📷 sem foto · + anexar" da coluna Conferente) e a tabela cabe sem cortar a
   Conferente/Conferência. Celular: cada linha vira um cartão "Coluna: valor" (o nome da coluna vem do
   data-r — app.js rotularColunasTabela), sem rolar de lado e com o nome do cliente inteiro. (Só a lista do
   recebimento de MERCADORIAS; a de contêineres continua como estava.) */
table.rec-lista-solta thead th { white-space: normal; vertical-align: bottom; }
table.rec-lista-solta > tbody > tr > td { white-space: normal; }
table.rec-lista-solta > tbody > tr > td:nth-child(-n + 2) { white-space: nowrap; }
table.rec-lista-solta > tbody > tr > td:nth-child(5) { min-width: 130px; }
table.rec-lista-solta td.rec-transp { min-width: 0; }
table.rec-lista-solta .rec-chips .rec-chip { white-space: normal; text-align: left; border-radius: 8px; }
table.rec-lista-solta .badge, table.rec-lista-solta .nf-num { white-space: nowrap; }
table.rec-lista-solta .rec-sel-todos { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0; }
table.rec-lista-solta .rec-sel-todos-rot { display: none; } /* (o rótulo só aparece nos cartões do celular; na tabela a caixa fica sozinha, como antes) */
@media (max-width: 640px) {
  .table-wrap-fixa:has(> table.rec-lista-solta) { max-height: none; overflow: visible; }
  /* o cabeçalho some, menos a caixa "Selecionar todos" (as ações em lote: capas, etiquetas, relatório...) */
  table.rec-lista-solta thead { display: block; width: 100%; }
  table.rec-lista-solta thead tr { display: flex; padding: 6px 2px 8px; border-bottom: 1px solid var(--border); }
  table.rec-lista-solta thead th { display: none; }
  table.rec-lista-solta thead th:first-child { display: block; position: static; padding: 0; border: 0; background: none; }
  table.rec-lista-solta .rec-sel-todos .rec-sel-todos-rot { display: inline; }
  table.rec-lista-solta, table.rec-lista-solta > tbody { display: block; width: 100%; }
  table.rec-lista-solta > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
  table.rec-lista-solta > tbody > tr > td { display: block; flex: 1 1 100%; min-width: 0 !important; max-width: 100%; border: 0; padding: 1px 0; white-space: normal !important; overflow-wrap: anywhere; text-align: left; }
  table.rec-lista-solta > tbody > tr > td:nth-child(-n + 2) { flex: 0 0 auto; }
  table.rec-lista-solta > tbody > tr > td[data-r]::before { content: attr(data-r) ": "; font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .2px; }
  table.rec-lista-solta .rec-transp-mot { max-width: none; white-space: normal; display: inline; }
}
/* T3 — rodapé das janelas no celular: quando os botões não cabem numa linha eles vão para a linha de baixo
   (antes ficavam presos numa linha só e o primeiro — o "Excluir" do recebimento — saía cortado à esquerda). */
@media (max-width: 600px) {
  body .modal-backdrop .modal .modal-actions { flex-wrap: wrap; }
}
/* T4 — Central: o botão redondo do tema fica no canto do topo SEM cobrir o "Sair" (1440) nem o texto
   "gateway ..." (390). O topo reserva o espaço do botão à direita e o botão rola junto com a página. */
body .central-topo { padding-right: 66px; } /* (a página da Central define .central-topo depois deste arquivo) */
body:has(.central-topo) #slotTema { position: absolute !important; }
body .central-topo > div:first-of-type { flex: 1 1 180px; min-width: 0; } /* o título encolhe (o "gateway ..." quebra a linha) em vez de descer para baixo do logotipo */
/* T6 — CT-e / MDF-e no celular: campos curtos dois por linha (a janela fica bem mais baixa); nome, endereço,
   município, datas e textos longos na linha inteira; o condutor com o nome numa linha e o CPF embaixo; as
   tabelas da averbação e do seguro do MDF-e viram cartões (cada dado com o nome da coluna), sem rolar de lado.
   SÓ nas janelas do CT-e e do MDF-e (a linha .tr-doc-janela do cabeçalho delas — transporte.js trEditarCte/
   trEditarMdfe): as outras janelas do transporte (veículo, motorista, apólice, programação, CIOT...) continuam
   com 1 coluna até 900 px, como antes. Nestas duas, as 2 colunas e os cartões valem até 900 px (de 641 a 900 px
   também; antes: 1 coluna) — sem a inversão "1 coluna no tablet e 2 no celular". */
@media (max-width: 900px) {
  .modal:has(> .tr-doc-janela) .tr-g4, .modal:has(> .tr-doc-janela) .tr-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal:has(> .tr-doc-janela) :is(.tr-g4, .tr-g3) > :is(.tr-s2, .tr-s4, .tr-cheia-cel) { grid-column: 1 / -1; } /* (tr-cheia-cel: situação tributária, total calculado, tração e reboques — textos longos) */
  .modal:has(> .tr-doc-janela) :is(.tr-g4, .tr-g3) > .field:has(.tr-mun),
  .modal:has(> .tr-doc-janela) :is(.tr-g4, .tr-g3) > .field:has(textarea),
  .modal:has(> .tr-doc-janela) :is(.tr-g4, .tr-g3) > .field:has(input[type='datetime-local']) { grid-column: 1 / -1; }
  .modal:has(> .tr-doc-janela) :is(.tr-g4, .tr-g3) > .field { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
}
@media (max-width: 640px) {
  .modal:has(> .tr-doc-janela) .tr-linha.tr-linha-cond { grid-template-columns: minmax(0, 1fr) auto; }
  .modal:has(> .tr-doc-janela) .tr-linha.tr-linha-cond > input[data-cn] { grid-column: 1 / -1; }
}
/* as tabelas da averbação e do seguro do MDF-e em cartões até 900 px (no tablet a tabela também rolava de lado e a
   Situação ficava escondida à direita) */
@media (max-width: 900px) {
  .modal:has(> .tr-doc-janela) .tr-tab.tr-cartoes { display: block; overflow: visible; white-space: normal; }
  .modal:has(> .tr-doc-janela) .tr-tab.tr-cartoes thead { display: none; }
  .modal:has(> .tr-doc-janela) .tr-tab.tr-cartoes :is(tbody, tr) { display: block; width: 100%; }
  .modal:has(> .tr-doc-janela) .tr-tab.tr-cartoes tr { padding: 8px 0; border-bottom: 1px solid var(--border); }
  .modal:has(> .tr-doc-janela) .tr-tab.tr-cartoes tr:last-child { border-bottom: 0; }
  .modal:has(> .tr-doc-janela) .tr-tab.tr-cartoes td { display: block; white-space: normal; overflow-wrap: anywhere; border: 0; padding: 2px 0; }
  /* o rótulo "Coluna:" na letra do texto (o td.tr-chave do "Nº da averbação" é monoespaçado: sem isto o rótulo dele
     saía em letra de código, maior que os outros) */
  .modal:has(> .tr-doc-janela) .tr-tab.tr-cartoes td[data-r]::before { content: attr(data-r) ": "; font-family: var(--fonte); font-weight: 700; font-size: 11.5px; letter-spacing: normal; word-break: normal; color: var(--text-muted); }
  .modal:has(> .tr-doc-janela) .tr-tab.tr-cartoes td.tr-cartao-acao:empty { display: none; }
  .modal:has(> .tr-doc-janela) .tr-tab.tr-cartoes td.tr-cartao-acao .btn { margin-top: 4px; }
  .modal:has(> .tr-doc-janela) .tr-tab.tr-cartoes .tr-chave { word-break: break-all; }
}
/* T7 — aviso da chave liberada (e da exclusão): letra normal (antes 11,5 px) */
.tr-aviso-lib { margin: 4px 0 8px; font-size: 13px; line-height: 1.45; color: var(--text); }
/* T9 — aviso fixo do cancelamento/encerramento pedido e sem resposta da SEFAZ */
.tr-aviso-duvida { font-size: 13px; line-height: 1.45; }
/* tema escuro: os quadros de aviso do transporte (fundo claro fixo no transporte.js) e o "aguardando o XML" (T8) */
:root[data-tema='escuro'] .tr-prob { background: #2b1d0e; border-color: #7c4a14; color: var(--text); }
:root[data-tema='escuro'] .tr-aviso { background: #12233d; border-color: #2b4a73; color: var(--text); }
:root[data-tema='escuro'] .tr-av-espera { color: #f2cf86 !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .tr-prob { background: #2b1d0e; border-color: #7c4a14; color: var(--text); }
  :root:not([data-tema='claro']) .tr-aviso { background: #12233d; border-color: #2b4a73; color: var(--text); }
  :root:not([data-tema='claro']) .tr-av-espera { color: #f2cf86 !important; }
}