:root {
  --navy-deep: #050b14;
  --navy: #0b1f3a;
  /* --navy serve para DUAS coisas: fundo escuro (menu, aba ativa) e cor de
     TEXTO (títulos, números dos KPIs). No tema escuro o fundo continua
     escuro, mas o texto precisa clarear — senão fica escuro no escuro e
     ninguém lê. Por isso o texto usa um token próprio. */
  --titulo: #0b1f3a;
  --navy-light: #123258;
  --sky: #29b6f6;
  --sky-light: #7cd4ff;
  --black: #0a0a0a;
  --bg: #f2f5f9;
  --card: #ffffff;
  --text: #101828;
  --text-muted: #5b6b82;
  --border: #e2e8f0;
  --ok: #1f9d55;
  --warn: #d98c00;
  --danger: #d43f3f;
  --radius: 12px;
  font-size: 15px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a { color: inherit; }

/* ---------- Login / Public ---------- */
.auth-page {
  min-height: calc(100vh / var(--z, 1));
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top left, var(--navy-light), var(--navy-deep) 70%);
  padding: 20px;
}

.auth-card {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 18px;
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  text-align: center;
}

.auth-card img.logo { width: 96px; height: 96px; margin-bottom: 10px; }
.auth-card img.logo-completo { width: 100%; max-width: 360px; height: auto; margin-bottom: 14px; }

.auth-card h1 {
  font-size: 22px;
  margin: 4px 0 2px;
  color: var(--titulo);
  letter-spacing: 0.5px;
}

.auth-card p.subtitle {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 26px;
}

.field { text-align: left; margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 11px 12px;
  border-radius: 9px;
  border: 1.5px solid var(--border);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sky); }
/* Sem isso, um <textarea> sem "cols" nasce com uma largura fixa e estreita
   do navegador (bem menor que o campo/painel) e não acompanha o
   redimensionamento — mesmo já tendo width:100% acima. */
.field textarea { display: block; resize: vertical; box-sizing: border-box; }
/* Caixas de marcar/rádio dentro de .field não devem esticar como os campos
   de texto (width:100% acima) — senão o texto do lado fica empurrado. */
.field input[type="checkbox"], .field input[type="radio"] { width: auto; padding: 0; flex: 0 0 auto; margin-top: 2px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 9px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
/* v8.7.2 — BOTÃO DESLIGADO TEM QUE PARECER DESLIGADO.
 * O sistema não tinha nenhum estilo para :disabled: um botão travado ficava
 * idêntico a um botão pronto, azul e com a mãozinha do cursor. A pessoa
 * clicava, nada acontecia, e não havia como saber que o problema era ela.
 * Apareceu na conferência da entrada (item do PDF sem quantidade trava o
 * "Dar entrada"), mas valia para todo botão travado do sistema. */
.btn:disabled,
.btn[disabled],
button:disabled {
  opacity: .45;
  filter: grayscale(.7);
  cursor: not-allowed;
  box-shadow: none;
}
.btn:disabled:hover,
.btn[disabled]:hover,
button:disabled:hover { filter: grayscale(.7); }
.btn:disabled:active,
.btn[disabled]:active { transform: none; }
.btn-primary { background: linear-gradient(135deg, var(--sky), var(--navy)); color: #fff; width: 100%; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary { background: var(--bg); color: var(--titulo); border: 1.5px solid var(--border); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-ghost { background: transparent; color: var(--titulo); }
.btn-sm { padding: 6px 10px; font-size: 12.5px; border-radius: 7px; }

.error-box {
  background: #fde8e8;
  color: var(--danger);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 14px;
  display: none;
}
.error-box.show { display: block; }

.hint-credenciais {
  margin-top: 18px;
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--bg);
  border-radius: 8px;
  padding: 8px 10px;
}

/* ---------- App shell ---------- */
/* O shell inteiro fica travado na altura da tela (nem ele nem o menu lateral
   rolam) — só o CONTEÚDO (.content, dentro de .main) tem rolagem própria.
   Assim, em telas com bastante conteúdo (ex: Dashboard com vários gráficos),
   o menu lateral inteiro — inclusive "Trocar senha"/"Sair" lá embaixo — fica
   sempre visível, sem precisar rolar a página toda pra alcançar. */
html, body { height: 100%; }
.app-shell { display: flex; height: calc(100vh / var(--z, 1)); }

.sidebar {
  width: 236px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  height: calc(100vh / var(--z, 1));
}

/* Área rolável do menu (logo + itens de navegação) — separada do rodapé
   fixo (.user-box) logo abaixo, para que "Trocar senha"/"Sair" fiquem
   sempre visíveis no fim do menu, mesmo que a lista de itens algum dia
   cresça mais do que a altura da tela numa janela bem baixa. */
.sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 14px 10px;
}

.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 16px;
}
.sidebar .brand img { width: 38px; height: 38px; }
.sidebar .brand .name { font-weight: 700; font-size: 17px; letter-spacing: .5px; }
.sidebar .brand .name span { color: var(--sky-light); }
.sidebar .brand img.logo-completo { width: 100%; height: auto; max-width: 200px; }
/* Logo do menu lateral: clicável, volta para o Dashboard */
.sidebar a.brand-link { text-decoration: none; color: #fff; cursor: pointer; border-radius: 12px; transition: background .15s, transform .15s; }
.sidebar a.brand-link:hover { background: rgba(255,255,255,0.05); }
.sidebar a.brand-link:hover .brand-icone { transform: translateY(-2px) scale(1.04); }
.sidebar a.brand-link:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.sidebar .brand .brand-icone { width: 46px; height: 46px; flex: 0 0 auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); transition: transform .15s; }
.sidebar .brand .brand-textos { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.sidebar .brand .brand-nome { font-weight: 900; font-size: 20px; letter-spacing: .6px; color: #f4f9ff; text-shadow: 0 2px 3px rgba(0,0,0,.45); }
.sidebar .brand .brand-nome span { color: #3aa8ff; }
.sidebar .brand .brand-slogan { font-size: 11.5px; color: #b8c9dc; margin-top: 3px; }
.sidebar .brand .brand-slogan strong { color: #4fc3ff; font-weight: 700; display: block; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 9px;
  color: rgba(255,255,255,0.78);
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 3px;
  user-select: none;
}
.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-item.active { background: rgba(41,182,246,0.18); color: #fff; box-shadow: inset 3px 0 0 var(--sky); }
.nav-item .ico { width: 18px; text-align: center; }
.nav-item .nav-caret { margin-left: auto; font-size: 11px; opacity: .7; transition: transform .15s; }
.nav-item.nav-group.aberto .nav-caret { transform: rotate(180deg); }

.nav-submenu { overflow: hidden; max-height: 0; transition: max-height .18s ease; }
.nav-submenu.aberto { max-height: 400px; }
.nav-subitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 40px;
  border-radius: 8px;
  color: rgba(255,255,255,0.68);
  cursor: pointer;
  font-size: 13px;
  margin-bottom: 2px;
  user-select: none;
}
.nav-subitem:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-subitem.active { background: rgba(41,182,246,0.18); color: #fff; box-shadow: inset 3px 0 0 var(--sky); }

.sidebar .user-box {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 14px 14px 20px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.7);
}
.sidebar .user-box .u-nome { color: #fff; font-weight: 600; font-size: 13.5px; }
.sidebar .user-box .u-perfil { text-transform: uppercase; font-size: 10.5px; letter-spacing: .5px; color: var(--sky-light); }
/* .btn-ghost por padrão usa texto navy (pensado pra fundo claro) — dentro do
   sidebar escuro isso ficava quase ilegível (navy sobre navy). Aqui os
   botões "Trocar senha"/"Sair" ganham contraste de verdade. */
.sidebar .user-box .btn-ghost {
  color: #fff;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid var(--sky-light);
  font-weight: 700;
}
.sidebar .user-box .btn-ghost:hover { background: var(--sky); border-color: var(--sky); }

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: calc(100vh / var(--z, 1));
  overflow: hidden;
}

.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 16px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.topbar h2 { margin: 0; font-size: 19px; color: var(--titulo); }
.topbar .sub { font-size: 12.5px; color: var(--text-muted); }

/* Única área que realmente rola — o resto do shell (menu lateral, topo)
   fica parado no lugar. */
.content { padding: 22px 26px 60px; flex: 1; overflow-y: auto; }

/* ---------- Cards / KPIs ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.kpi-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--sky);
}
.kpi-card .val { font-size: 26px; font-weight: 700; color: var(--titulo); }
.kpi-card .lbl { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 18px 20px;
  margin-bottom: 20px;
}
.card h3 { margin: 0 0 14px; font-size: 15px; color: var(--titulo); }

.grid-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
@media (max-width: 980px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13.2px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--text-muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; }
tbody tr:hover { background: #f7fafd; }
.table-wrap { overflow-x: auto; }

/* Listas longas (Expedição/Pedidos e Recebimentos): em vez da barra de
   rolagem horizontal só aparecer lá embaixo, depois de todas as linhas (o
   que obrigava a rolar a página inteira ou "arrastar" a tabela pra ver as
   colunas da direita), a tabela ganha uma altura máxima e rola dentro dela
   mesma — a barra de rolagem (vertical e horizontal) fica sempre visível
   e ao alcance, e o cabeçalho fica fixo no topo enquanto rola. */
.table-wrap-fixa {
  max-height: calc(100vh / var(--z, 1) - 300px);
  min-height: 260px;
  overflow: auto;
}
.table-wrap-fixa table thead th {
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 1;
}

/* v9.0 — A TABELA DE ITENS DENTRO DO POPUP.
 *
 * O DEFEITO relatado pelo armazém: "a barra de rolar não aparece, só se rolar a
 * página; e se puxar demais, o popup fecha e dá erro".
 *
 * O que acontecia: `.table-wrap` usa `overflow-x: auto`, e a barra que ele cria
 * nasce no rodapé da tabela — que fica abaixo do fim visível da janela do
 * popup. Para alcançá-la era preciso rolar o popup inteiro até o fim, e no
 * caminho a pessoa acabava arrastando a tabela pelo conteúdo (o que fechava a
 * janela — corrigido em app.js).
 *
 * A correção tem três partes, e cada uma resolve um pedaço:
 *  1. `overflow-x: scroll` em vez de `auto`: a barra fica SEMPRE desenhada, não
 *     só quando o navegador decide mostrá-la. Era o pedido literal — "que ela
 *     fique à amostra".
 *  2. `max-height` com rolagem própria: a barra horizontal passa a ficar no pé
 *     da caixa da tabela, dentro do que se vê, em vez de no fim da lista.
 *  3. Cabeçalho fixo: rolando 20 itens, ainda se sabe qual coluna é qual.
 *
 * A barra é desenhada mais grossa e com contraste de propósito: no padrão do
 * Windows/Chrome ela é fina e clarinha, e foi por isso que "não aparecia". */
.table-wrap-itens {
  overflow-x: scroll;
  overflow-y: auto;
  max-height: 40vh;
  border: 1px solid var(--border);
  border-radius: 8px;
  /* NÃO use `scrollbar-width`/`scrollbar-color` aqui. Descobri medindo: quando
     essas duas propriedades estão presentes, o Chrome IGNORA as regras
     `::-webkit-scrollbar` abaixo e mantém a barra no modo "overlay" — aquela
     barrinha fina que só aparece enquanto se rola e não ocupa espaço nenhum.
     Era exatamente o que o armazém descrevia: "hoje ela não aparece". Sem elas,
     as regras `::-webkit-scrollbar` valem e a barra vira barra de verdade:
     desenhada o tempo todo e ocupando o próprio espaço. O Firefox desenha barra
     clássica por padrão, então não perde nada. */
  /* A rolagem da tabela não "vaza" para a página/popup quando chega no fim —
     é o que evitava aquele arrastão de tela inteira. */
  overscroll-behavior: contain;
}
.table-wrap-itens table { border-collapse: separate; border-spacing: 0; }
.table-wrap-itens thead th {
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 2;
  box-shadow: inset 0 -1px 0 var(--border);
}
/* A descrição do produto é a coluna que estourava a largura: `white-space:
   nowrap` (regra geral das tabelas) fazia um nome comprido empurrar as colunas
   da direita para fora. Aqui ela pode quebrar em duas linhas. */
.table-wrap-itens td.col-produto { white-space: normal; min-width: 190px; max-width: 320px; }
.table-wrap-itens::-webkit-scrollbar { width: 14px; height: 14px; }
.table-wrap-itens::-webkit-scrollbar-track { background: var(--bg, #eef2f7); border-radius: 8px; }
.table-wrap-itens::-webkit-scrollbar-thumb {
  background: #8fa4be;
  border-radius: 8px;
  border: 3px solid var(--bg, #eef2f7);
}
.table-wrap-itens::-webkit-scrollbar-thumb:hover { background: #5d7797; }
/* BARRA ESPELHO, EM CIMA DA TABELA — E DESENHADA POR NÓS.
 *
 * Duas descobertas, as duas medindo a tela montada:
 *
 * 1) A janela do pedido é alta (etapa, botões, cliente, data, número, busca de
 *    produto), então a tabela começa lá embaixo e o RODAPÉ dela — onde o
 *    navegador desenha a barra horizontal — cai fora do que se enxerga, mesmo
 *    com a caixa tendo altura própria. Continuaria sendo preciso rolar o popup
 *    até o fim para alcançar a barra. Daí a barra ACIMA da tabela: se dá para
 *    ver o cabeçalho, dá para ver a barra.
 *
 * 2) A barra NATIVA não serve para essa segunda barra. Em boa parte dos
 *    navegadores de hoje ela é "overlay": some quando ninguém está rolando e
 *    não ocupa espaço nenhum — que é literalmente o defeito relatado ("hoje ela
 *    não aparece"). Dá para tentar forçar com `::-webkit-scrollbar`, mas
 *    depende de navegador, de versão e do sistema operacional, e eu não tenho
 *    como garantir o que vai aparecer na máquina do armazém. Então esta barra é
 *    desenhada por nós: um trilho e um puxador, dois divs — aparece igual em
 *    todo navegador, porque não é o navegador que decide.
 *
 * Só aparece quando existe coluna escondida: barra que não rola nada é sujeira
 * na tela. */
.rolagem-espelho {
  position: relative;
  height: 14px;
  margin-top: 8px;
  background: var(--bg, #eef2f7);
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  /* Sem isto, arrastar o puxador no celular rola a página junto. */
  touch-action: none;
}
.rolagem-espelho .puxador {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 0;
  min-width: 34px;
  background: #8fa4be;
  border-radius: 6px;
  cursor: grab;
}
.rolagem-espelho .puxador:hover { background: #7189a7; }
.rolagem-espelho .puxador:active { background: #5d7797; cursor: grabbing; }

/* Aviso discreto no pé da caixa, só enquanto houver coluna escondida à
   direita — quem nunca percebeu a barra percebe a frase. */
.dica-rolagem-itens {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 4px;
}

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  white-space: nowrap;
}
.badge-EM_CRIACAO { background: #e6e9ef; color: #46536b; }
.badge-EM_SEPARACAO { background: #fff2d9; color: #a35c00; }
.badge-AGUARD_COLETA { background: #dbeeff; color: #0d63b0; }
.badge-SEPARADO { background: #d8f3ee; color: #0f6e5f; } /* v9.7 — já separado, aguardando NF de transporte */
.badge-AGUARD_LIBERACAO { background: #efe6fb; color: #6a2fa8; }
.badge-DESPACHADO { background: #dff5e6; color: #1f9d55; }
.badge-CANCELADO { background: #fbe0e0; color: #c53030; }

/* ---------- Forms / toolbar ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
.toolbar input, .toolbar select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  font-size: 13px;
}
.toolbar .grow { flex: 1; min-width: 160px; }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(5,11,20,0.55);
  display: none; align-items: center; justify-content: center; z-index: 50; padding: 16px;
}
.modal-backdrop.show { display: flex; }
.modal {
  background: var(--card); border-radius: 14px; padding: 24px; width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto;
}
.modal h3 { margin-top: 0; color: var(--titulo); }
/* v8.5: a janela do documento fiscal tem duas colunas de dados e uma tabela de
   itens — em 560px o valor total ficava cortado. */
.modal.modal-largo { max-width: 860px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.form-grid .full { grid-column: 1 / -1; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.empty-state { text-align: center; padding: 30px; color: var(--text-muted); font-size: 13.5px; }

.pill-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg); border-radius: 20px; padding: 5px 12px; font-size: 12.5px;
  border: 1px solid var(--border);
}

.toast {
  position: fixed; bottom: 22px; right: 22px; background: var(--navy); color: #fff;
  padding: 12px 18px; border-radius: 10px; font-size: 13.5px; box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  z-index: 100; opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--danger); }

/* Campo de foto (câmera ao vivo / galeria) — usado no despacho com
   comprovante e no pré-lançamento de recebimento, tanto no painel
   administrativo quanto na área do conferente (ver /js/fotoUtils.js). */
.foto-campo { display: flex; flex-direction: column; gap: 6px; }
.foto-campo .foto-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.foto-campo .foto-botoes label { cursor: pointer; }
.foto-preview { width: 100%; max-height: 220px; object-fit: contain; border-radius: 8px; border: 1px solid var(--border); margin-top: 6px; display: none; background: #f4f4f4; }
.foto-preview.show { display: block; }
.foto-ok { font-size: 12.5px; color: #1a7f37; margin-top: 4px; display: none; }
.foto-ok.show { display: block; }

.mobile-menu-btn { display: none; }
@media (max-width: 860px) {
  .sidebar { position: fixed; left: -260px; top: 0; bottom: 0; z-index: 40; transition: left .2s; }
  .sidebar.open { left: 0; }
  .mobile-menu-btn { display: inline-flex; }
  .content { padding: 16px; }
  .form-grid { grid-template-columns: 1fr; }
}

/* Abas (painel administrativo — Portaria). A tela do porteiro tem o seu
   próprio estilo em portaria.html, que prevalece. */
.conf-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.conf-tab {
  background: var(--card); border: 1.5px solid var(--border); border-radius: 10px; padding: 9px 14px;
  font-size: 12.5px; font-weight: 700; color: var(--text-muted); cursor: pointer; font-family: inherit;
}
.conf-tab.active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* atributo hidden sempre esconde (mesmo em .btn com display próprio) */
[hidden] { display: none !important; }

/* ---------- Topo, lado direito: código de liberação + menu do usuário ---------- */
.topbar { gap: 12px; }
.topbar-direita { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; justify-content: flex-end; flex: 0 1 auto; }
.topbar-direita #topbarActions:empty { display: none; }
.topbar-direita .topo-codigo { white-space: nowrap; width: auto; flex: 0 0 auto; }
.topbar-direita #topbarActions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.menu-usuario { position: relative; }
.btn-usuario {
  display: flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 12px 4px 4px; cursor: pointer; font: inherit; color: var(--titulo);
  transition: box-shadow .15s, border-color .15s;
}
.btn-usuario:hover, .btn-usuario[aria-expanded="true"] { border-color: var(--sky); box-shadow: 0 2px 10px rgba(13,43,82,.12); }
.btn-usuario .avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #29b6f6, #0d2b52); box-shadow: inset 0 -2px 4px rgba(0,0,0,.25);
}
.btn-usuario .u-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.btn-usuario .u-nome { font-weight: 700; font-size: 13.5px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-usuario .u-perfil { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: #1f8fe0; font-weight: 700; }
.btn-usuario .u-caret { font-size: 11px; opacity: .6; }
.menu-usuario-lista {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 230px; background: var(--card);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 34px rgba(13,43,82,.18); padding: 6px;
}
.menu-usuario-lista[hidden] { display: none !important; }
.menu-usuario-lista button {
  display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 10px 12px;
  font: inherit; font-size: 14px; color: var(--titulo); cursor: pointer;
}
.menu-usuario-lista button:hover, .menu-usuario-lista button:focus-visible { background: #eef6fd; outline: none; }
.menu-usuario-lista .sep { height: 1px; background: var(--border); margin: 4px 6px; }
.menu-usuario-lista .sair { color: #c53030; font-weight: 700; }
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; padding: 12px 14px; }
  .topbar-direita { flex-wrap: wrap; }
  .btn-usuario .u-txt, .topo-codigo .topo-rotulo { display: none; }
  .btn-usuario { padding: 3px 8px 3px 3px; }
}

/* ---------- Página "Senhas e PIN" ---------- */
.seg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; max-width: 1100px; }
.seg-card h3 { margin-top: 0; }
.seg-card .seg-txt { font-size: 13px; color: var(--text-muted); margin-top: -4px; }
.seg-card .field { margin-bottom: 10px; }
.seg-destaque { border: 2px solid #29b6f6; grid-row: span 2; }
.seg-piscar { animation: segPiscar 1.6s ease 2; }
@keyframes segPiscar { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 4px rgba(41,182,246,.45); } }

/* Crédito no rodapé do menu lateral */
.sidebar-credito {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border-top: 1px solid rgba(255,255,255,0.12); padding: 12px 14px 16px;
}
.sidebar-credito .credito-txt { white-space: nowrap; font-size: 11px; letter-spacing: .4px; color: rgba(255,255,255,0.62); line-height: 1.25; }
.sidebar-credito .credito-logo {
  height: 48px; width: auto; max-width: 100%;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.55));
}

/* ---------- Indicadores ---------- */
.ind-h { margin: 22px 0 10px; color: var(--titulo); font-size: 17px; }
.ind-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.ind-duas .card h4, .card > h4 { margin: 0 0 10px; font-size: 14px; color: var(--titulo); }
.ind-barras { display: flex; flex-direction: column; gap: 7px; }
.ind-barra { display: grid; grid-template-columns: minmax(90px, 36%) 1fr auto; align-items: center; gap: 8px; font-size: 12.5px; padding: 2px 0; }
.ind-rot { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ind-trilho { height: 12px; background: #edf1f6; border-radius: 4px; overflow: hidden; }
.ind-fill { display: block; height: 100%; background: #1f6fe0; border-radius: 0 4px 4px 0; min-width: 2px; }
.ind-barra:hover .ind-fill { background: #0d4fb3; }
.ind-val { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.ind-colunas { display: flex; align-items: flex-end; gap: 2px; height: 140px; padding-top: 6px; border-bottom: 1px solid #d5dce6; }
.ind-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; cursor: default; }
.ind-col-fill { display: block; width: 100%; max-width: 22px; background: #1f6fe0; border-radius: 4px 4px 0 0; }
.ind-col:hover .ind-col-fill { background: #0d4fb3; }
.ind-col-rot { position: absolute; bottom: -18px; font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.ind-colunas + div { margin-top: 22px !important; }
.ind-status { font-size: 12px; font-weight: 700; margin-top: 4px; }
.ind-status.ok { color: #1a7f37; } .ind-status.alerta { color: #9a6700; } .ind-status.critico { color: #c53030; }
.ind-periodo { display: flex; gap: 6px; }

/* ---------- Agenda de coletas/entregas ---------- */
.ag-slot { display: grid; grid-template-columns: 86px 1fr; gap: 12px; border-bottom: 1px solid var(--border); padding: 8px 0; }
.ag-slot:last-child { border-bottom: 0; }
.ag-hora strong { font-size: 16px; color: var(--titulo); font-variant-numeric: tabular-nums; }
.ag-vagas { display: flex; gap: 3px; margin-top: 4px; flex-wrap: wrap; }
.ag-vagas span { width: 12px; height: 12px; border-radius: 3px; background: #e3eaf3; border: 1px solid #cdd7e3; }
.ag-vagas span.ocupada { background: #1f6fe0; border-color: #1f6fe0; }
.ag-itens { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ag-item { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: 13.5px; background: #fbfcfe; }
.ag-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 600px) { .ag-slot { grid-template-columns: 1fr; } }

/* ---------- Alertas (sino no topo) ---------- */
.menu-alertas { position: relative; }
.btn-alertas { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); cursor: pointer; font-size: 18px; }
.btn-alertas:hover, .btn-alertas[aria-expanded="true"] { border-color: var(--sky); box-shadow: 0 2px 10px rgba(13,43,82,.12); }
.alertas-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #c53030; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; }
.alertas-badge.so-info { background: #1f6fe0; }
.alertas-badge[hidden] { display: none !important; }
.alertas-lista { position: absolute; right: 0; top: calc(100% + 8px); z-index: 61; width: 380px; max-width: calc(100vw - 24px); max-height: 70vh; overflow: auto; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 34px rgba(13,43,82,.18); padding: 6px; }
.alertas-lista[hidden] { display: none !important; }
.alerta-item { display: block; width: 100%; text-align: left; border: 0; background: none; border-left: 4px solid #9a6700; border-radius: 8px; padding: 8px 10px; margin: 4px 0; cursor: pointer; font: inherit; color: var(--text); }
.alerta-item:hover { background: #f3f7fc; }
.alerta-item.critico { border-left-color: #c53030; }
.alerta-item.info { border-left-color: #1f6fe0; }
.alerta-item .t { font-weight: 800; font-size: 13.5px; }
.alerta-item .x { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.alerta-pop { position: fixed; right: 16px; bottom: 16px; z-index: 9000; width: 360px; max-width: calc(100vw - 32px); background: var(--card); border: 2px solid #c53030; border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.25); padding: 12px 14px; }
@media (max-width: 760px) { .alertas-lista { right: -60px; } }

/* Versão do sistema, abaixo do slogan */
.sidebar .brand .brand-versao { display: inline-block; align-self: flex-start; margin-top: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; color: #cfe6ff; background: rgba(41,182,246,.18); border: 1px solid rgba(79,195,255,.45); border-radius: 999px; padding: 1px 8px; }
.sidebar .brand .brand-versao:empty { display: none; }

/* Área do cliente: etapas do pedido */
.passos-cli { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; font-size: 12px; color: var(--text-muted); }
.passo-cli.ok { color: #1a7f37; font-weight: 700; }
.passo-cli.atual { color: #1f6fe0; font-weight: 800; }

/* v7.2 — logo nova (PNG) no menu lateral: ocupa a largura do menu, sem
   o texto miúdo da imagem (o slogan vai em texto, legível) */
.sidebar a.brand.brand-link { display: block; padding: 6px 4px 16px; margin: -4px -4px 14px; }
.sidebar .brand .brand-textos-logo { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sidebar .brand img.brand-logo { display: block; width: 100%; max-width: 212px; height: auto; margin: 0 auto; filter: drop-shadow(0 0 14px rgba(41,121,255,.28)) drop-shadow(0 4px 8px rgba(0,0,0,.45)); transition: transform .15s; }
.sidebar .brand .brand-slogan-novo { font-size: 10.5px; line-height: 1.3; letter-spacing: .4px; color: #9fb6cf; text-align: center; text-transform: uppercase; font-weight: 600; }
.sidebar a.brand-link:hover img.brand-logo { transform: translateY(-2px) scale(1.02); }
.sidebar .brand .brand-textos-logo .brand-versao { align-self: center; margin-top: 0; }

/* v8.4 — bloco "Código da empresa" nas telas de entrada (painel, portaria e
   app do conferente seguem o mesmo padrão: primeiro a empresa, depois quem é
   a pessoa). Ver public/js/empresaLogin.js */
.empresa-confirmada { background: #f3f8ff; border: 1px solid #cfe0f5; border-left: 4px solid #1f6fe0; border-radius: 10px; padding: 9px 11px; margin-bottom: 14px; text-align: left; }
.empresa-confirmada .empresa-rotulo { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: #6b7f96; font-weight: 700; }
.empresa-confirmada .empresa-nome { font-size: 14.5px; font-weight: 800; color: #0b1f3a; line-height: 1.25; margin-top: 1px; word-break: break-word; }
.empresa-confirmada .empresa-codigo { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.empresa-confirmada .empresa-codigo a { color: #1f6fe0; }
.empresa-pedir .empresa-dica { font-size: 12px; color: #b45309; margin-top: 5px; line-height: 1.35; }
.empresa-pedir #btnEmpresaOk { width: auto; margin-top: 8px; }
.empresa-pedir input { text-transform: lowercase; }

/* ==================================================================
   v8.6 — MODO ESCURO
   O sistema todo já usava variáveis para cor de fundo, texto, borda e
   cartão — então o tema escuro é um segundo conjunto de valores, e não
   uma folha de estilo paralela. Duas formas de ligar:
     - [data-tema="escuro"] no <html>: a pessoa escolheu (fica guardado);
     - prefers-color-scheme: quando ela não escolheu nada, segue o
       sistema operacional dela.
   Galpão à noite e celular na doca agradecem.
   ================================================================== */
:root[data-tema='escuro'] {
  --navy-deep: #02060c;
  --navy: #0a1828;
  --navy-light: #12304f;
  --bg: #0d141f;
  --titulo: #dce8f7;
  --card: #151f2e;
  --text: #e8eef7;
  --text-muted: #9aabc2;
  --border: #253347;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --navy-deep: #02060c;
    --navy: #0a1828;
    --navy-light: #12304f;
    --bg: #0d141f;
    --titulo: #dce8f7;
    --card: #151f2e;
    --text: #e8eef7;
    --text-muted: #9aabc2;
    --border: #253347;
    color-scheme: dark;
  }
}
/* Três ajustes que a troca de variável não resolve sozinha. Como o tema pode
   vir da escolha da pessoa OU do sistema operacional dela, cada regra aparece
   nas duas formas (o CSS não deixa juntar seletor com @media). */
:root[data-tema='escuro'] input,
:root[data-tema='escuro'] select,
:root[data-tema='escuro'] textarea { background: #0f1825; color: var(--text); border-color: var(--border); }
:root[data-tema='escuro'] table tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
:root[data-tema='escuro'] .credito-logo { opacity: .85; }
/* o seletor de data/hora do navegador vem branco por padrão */
:root[data-tema='escuro'] input[type='date'],
:root[data-tema='escuro'] input[type='time'],
:root[data-tema='escuro'] input[type='month'] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) input,
  :root:not([data-tema='claro']) select,
  :root:not([data-tema='claro']) textarea { background: #0f1825; color: var(--text); border-color: var(--border); }
  :root:not([data-tema='claro']) table tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
  :root:not([data-tema='claro']) .credito-logo { opacity: .85; }
  :root:not([data-tema='claro']) input[type='date'],
  :root:not([data-tema='claro']) input[type='time'],
  :root:not([data-tema='claro']) input[type='month'] { color-scheme: dark; }
}

/* Botão de alternar o tema (fica ao lado do nome do usuário). */
.btn-tema {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card); cursor: pointer; font-size: 17px; line-height: 1;
}
.btn-tema:hover { border-color: var(--sky); }

/* v9.9 — os ITENS A SEPARAR no celular do conferente: quantidade grande, unidade colada, descrição legível */
.item-sep { display:flex; gap:12px; align-items:stretch; margin-bottom:10px; border:1px solid var(--border); border-radius:12px; background:#fff; overflow:hidden; }
.item-sep-qtd { flex:0 0 118px; background:#eef4fb; border-right:1px solid var(--border); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px 6px; text-align:center; }
.item-sep-n { font-size:11px; color:var(--text-muted); font-weight:700; margin-bottom:2px; }
.item-sep-num { font-size:34px; line-height:1; font-weight:900; color:var(--navy); letter-spacing:-.5px; }
.item-sep-un { font-size:15px; font-weight:800; color:#1f6fe0; margin-top:3px; }
.item-sep-eq { font-size:12px; font-weight:700; color:#1a7f37; margin-top:3px; }
.item-sep-corpo { flex:1; min-width:0; padding:10px 12px 10px 0; }
.item-sep-desc { font-size:16px; font-weight:800; line-height:1.25; color:var(--text); }
.item-sep-fichas { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.ficha-item { font-size:12px; background:#f1f5f9; border:1px solid var(--border); border-radius:6px; padding:2px 7px; white-space:nowrap; }
.item-sep-obs { margin-top:7px; padding:7px 10px; border-radius:8px; background:#fff7ed; border-left:4px solid #b45309; font-size:13.5px; }
.item-sep-lote { display:flex; gap:6px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.item-sep-lote label { font-size:12.5px; color:var(--text-muted); }
.item-sep-lote input { width:140px; }
@media (max-width: 380px) { .item-sep-qtd { flex-basis:96px; } .item-sep-num { font-size:28px; } }
.item-sep-fotos { margin-top:8px; padding-top:8px; border-top:1px dashed var(--border); }
.item-sep-fotos-topo { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.item-sep-fotos-rotulo { font-size:12.5px; color:var(--text-muted); margin-right:auto; }
.item-sep-btn-foto { width:auto !important; padding:4px 9px !important; font-size:12.5px !important; cursor:pointer; }
.item-sep-fotos-lista { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.item-sep-fotos-lista img { width:58px; height:58px; object-fit:cover; border-radius:8px; border:2px solid #1a7f37; cursor:pointer; }

/* v10 — recebimentos em duas seções: esteira em cartões e selos por etapa */
.rec-esteira { display:flex; align-items:stretch; gap:6px; flex-wrap:wrap; }
.rec-etapa { flex:1 1 150px; min-width:140px; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 12px; border:1px solid var(--border); border-top:4px solid var(--cor); border-radius:12px; background:var(--card, #fff); cursor:pointer; text-align:left; color:inherit; font:inherit; }
.rec-etapa:hover { box-shadow:0 2px 10px rgba(15,35,70,.08); }
.rec-etapa.ativa { background:color-mix(in srgb, var(--cor) 14%, var(--card)); box-shadow:0 0 0 2px var(--cor) inset; }
.rec-etapa-n { font-size:28px; font-weight:900; line-height:1; color:var(--titulo, var(--text)); }
.rec-etapa-rot { font-size:12.5px; font-weight:700; color:var(--text-muted); }
.rec-seta { display:flex; align-items:center; color:var(--text-muted); font-size:22px; font-weight:300; }
.rec-st-espera { background:#fff3d6; color:#8a5a00; }
.rec-st-recebido { background:#dbeeff; color:#0d63b0; }
.rec-st-desova { background:#efe5ff; color:#5b2ca0; }
.rec-st-final { background:#dcf5e5; color:#146c2e; }
.rec-st-ruim { background:#fde2e2; color:#a12727; }
.cntr-num { font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight:800; font-size:13.5px; letter-spacing:.3px; background:#f1f5f9; border:1px solid var(--border); border-radius:6px; padding:2px 7px; white-space:nowrap; }
.nf-num { font-weight:800; white-space:nowrap; }
.rec-dias { font-size:12.5px; font-weight:700; white-space:nowrap; color:var(--text); }
.rec-dias-atencao { color:#b45309; }
.rec-dias-ruim { color:#c53030; }
.rec-dias-hoje { color:#1b5e8a; }
@media (max-width: 700px) { .rec-seta { display:none; } .rec-etapa { flex-basis:45%; } }
.passos-rec { display:flex; align-items:center; gap:4px; flex-wrap:wrap; font-size:12px; }
.passo-rec { color:var(--text-muted); white-space:nowrap; }
.passo-rec.ok { color:#1a7f37; font-weight:700; }
.passo-rec.atual { color:#fff; background:#1f6fe0; border-radius:999px; padding:1px 8px; font-weight:800; }
.passo-rec-sep { color:var(--border); }
.grupo-tiles-rot { font-size:12.5px; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; margin:12px 0 6px; }
.rec-cli-cards { display:none; }
.rec-cli-card { border:1px solid var(--border); border-radius:12px; padding:10px 12px; margin-bottom:8px; background:var(--card); }
@media (max-width: 700px) { .rec-cli-cards { display:block; } .rec-cli-tabela { display:none; } }

/* ===== v10 — desova (roteiro de fotos), chips, ressalva, avarias ===== */
.roteiro-desova { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.roteiro-etapa { border: 1.5px dashed #d8a64a; background: #fffaf0; border-radius: 12px; padding: 10px 12px; }
.roteiro-etapa.feita { border: 1.5px solid #9fd3ad; background: #f3fbf5; }
.chip-conf { display: inline-block; border: 1.5px solid; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 800; background: #fff; white-space: nowrap; }
.ressalva-texto { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 17px; font-weight: 800; line-height: 1.45; background: #fff8e1; border: 2px solid #b7791f; border-radius: 10px; padding: 12px 14px; color: #3a2a00; white-space: pre-wrap; word-break: break-word; }
.avarias-cntr svg .face-cntr:hover rect { stroke: #0b1f3a; stroke-width: 2.5; }
.ft-chip { display: inline-block; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.ft-ok { background: #eefaf1; color: #1a7f37; }
.ft-atencao { background: #fff7e6; color: #b7791f; }
.ft-critico { background: #fdecec; color: #c53030; }
.ft-ruim { background: #fdecec; color: #c53030; }
.ind-rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 8px 0 14px; }
.ind-rec-card { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: #fff; }
.ind-rec-card .n { font-size: 26px; font-weight: 900; color: var(--navy, #0b1f3a); line-height: 1.1; }
.ind-rec-card .rot { font-size: 12.5px; color: var(--text-muted); }
:root[data-tema='escuro'] .roteiro-etapa { background: #2a2416; }
:root[data-tema='escuro'] .roteiro-etapa.feita { background: #16261b; }
:root[data-tema='escuro'] .ressalva-texto { background: #2a2416; color: #ffe8a8; }
:root[data-tema='escuro'] .ind-rec-card, :root[data-tema='escuro'] .chip-conf { background: transparent; }

/* v10.1 — Links de acesso */
.la-hero { padding: 14px 16px; margin-bottom: 12px; border-left: 5px solid #2a78d6; }
.la-portal { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; background: #f3f8ff; border: 1px solid #cfe0fb; border-radius: 10px; }
.la-portal code { word-break: break-all; }
.la-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; }
.la-card { padding: 12px 14px; margin: 0; min-width: 0; }
.la-topo { display: flex; gap: 10px; align-items: flex-start; }
.la-ico { font-size: 26px; line-height: 1; }
.la-tit { font-weight: 800; font-size: 15px; }
.la-sub { font-size: 12px; color: var(--text-muted); }
.la-link { margin: 10px 0 4px; padding: 8px 10px; background: var(--bg, #f6f7f9); border: 1px dashed var(--border); border-radius: 8px; font-size: 14px; font-weight: 700; word-break: break-all; }
.la-direto { font-size: 11.5px; color: var(--text-muted); word-break: break-all; margin-bottom: 4px; }
.la-botoes { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.la-botoes .btn { width: auto; }
.la-pessoas-tit { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin: 10px 0 4px; }
.la-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.la-chip { display: inline-flex; gap: 4px; align-items: center; font-size: 12.5px; padding: 3px 9px; border-radius: 999px; background: #eef2f7; border: 1px solid var(--border); }
.la-chip code { font-size: 11.5px; background: #fff; padding: 0 5px; border-radius: 6px; }
.la-chip-ruim { background: #fdecec; border-color: #f3c1c1; color: #9b1c1c; }
.la-mini { border: none; background: none; cursor: pointer; font-size: 14px; padding: 0 2px; margin-left: -2px; }
.la-cli { padding: 6px 0; border-top: 1px solid var(--border); }
.la-cli:first-of-type { border-top: none; }
.la-cli .la-chips { margin-top: 4px; }

/* v10.1 — leitor da nota pela foto (conferente) */
.leitor-nota { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: #fafcff; min-width: 0; }
.leitor-dica { font-size: 12px; color: var(--text-muted); margin: 4px 0; }
.leitor-status { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.leitor-res { font-size: 12.5px; margin-top: 6px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: #fff; }
.leitor-res.bom { border-left: 4px solid #1a7f37; }
.leitor-res.meio { border-left: 4px solid #b7791f; }
.leitor-res.ruim { border-left: 4px solid #c53030; color: #9b1c1c; }
.leitor-totais { margin-top: 4px; }
.leitor-cega { margin-top: 4px; color: #0b1f3a; background: #eef3fb; border-radius: 6px; padding: 4px 8px; }
.leitor-tabela { max-height: 260px; overflow: auto; margin-top: 6px; }
.leitor-tabela table { width: 100%; font-size: 12.5px; border-collapse: collapse; }
.leitor-tabela th, .leitor-tabela td { padding: 4px 6px; border-bottom: 1px solid var(--border); text-align: left; }
.leitor-tag { font-size: 10.5px; background: #fff7e6; color: #8a5a00; border-radius: 6px; padding: 0 5px; }
.leitor-aviso { color: #b45309; margin-top: 3px; }
.leitor-det { margin-top: 6px; font-size: 12.5px; }
.leitor-det textarea { width: 100%; font-family: monospace; font-size: 11.5px; margin-top: 4px; }

/* v10.2 — aviso do painel (contêiner finalizado): letra grande e forte, para
   ler de longe e no celular */
.aviso-painel-fundo { position: fixed; inset: 0; z-index: 9500; background: rgba(11,31,58,.55); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 12px 12px; }
.aviso-painel { width: 520px; max-width: calc(100vw - 24px); background: #fff; border: 4px solid #1a7f37; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.35); padding: 20px 20px 16px; text-align: center; animation: avisoPainelEntra .25s ease-out; }
@keyframes avisoPainelEntra { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
.aviso-painel-tit { font-size: 26px; font-weight: 900; color: #1a7f37; letter-spacing: .3px; line-height: 1.2; }
.aviso-painel-num { margin: 10px 0 6px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 30px; font-weight: 900; color: #0b1f3a; letter-spacing: 1px; }
.aviso-painel-txt { font-size: 19px; font-weight: 700; color: #1f2a3d; line-height: 1.4; }
.aviso-painel-hora { font-size: 15px; font-weight: 700; color: #46536b; margin-top: 8px; }
.aviso-painel-botoes { display: flex; gap: 10px; margin-top: 16px; }
.aviso-painel-botoes .btn { flex: 1; font-size: 18px; font-weight: 900; padding: 14px; }
:root[data-tema='escuro'] .aviso-painel { background: #13202f; }
:root[data-tema='escuro'] .aviso-painel-num, :root[data-tema='escuro'] .aviso-painel-txt { color: #eef2f7; }

/* v10.4 — recebimentos: linha marcada destacada (clique duplo abre) */
tr.linha-rec { cursor: pointer; }
tr.linha-rec:hover td { background: #f3f8ff; }
:root[data-tema='escuro'] tr.linha-rec:hover td { background: #13263d; }
tr.linha-rec:focus-visible { outline: 2px solid #2a78d6; outline-offset: -2px; }
tr.linha-rec.linha-sel td { background: #e8f1ff !important; }
:root[data-tema='escuro'] tr.linha-rec.linha-sel td { background: #17324f !important; }

/* v10.5 — ETIQUETAS DO PEDIDO: lista por produto à esquerda, prévia ao vivo à
   direita (vira uma coluna só em tela estreita) */
.modal.modal-xl { max-width: 1140px; }
.etqp-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.etqp-titulo { font-size: 20px; font-weight: 800; color: var(--titulo); }
.etqp-sub { font-size: 13.5px; color: var(--text-muted); margin-top: 2px; }
.etqp-status { color: #fff; font-size: 11.5px; font-weight: 800; padding: 5px 10px; border-radius: 999px; white-space: nowrap; letter-spacing: .03em; }
.etqp-modo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.etqp-modo button { text-align: left; border: 2px solid var(--border); background: var(--card); color: var(--text); border-radius: 12px; padding: 10px 12px; font-size: 15px; font-weight: 800; cursor: pointer; }
.etqp-modo button small { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); margin-top: 2px; }
.etqp-modo button.on { border-color: var(--navy-light); background: #eef4ff; box-shadow: inset 0 0 0 1px var(--navy-light); }
.etqp-modo button:disabled { opacity: .5; cursor: not-allowed; }
.etqp-corpo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.etqp-sec { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.etqp-sec h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--titulo); }
.etqp-sec h4 small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-muted); }
#etqpLinhas { display: flex; flex-direction: column; gap: 8px; max-height: 44vh; overflow: auto; padding-right: 2px; }
.etqp-linha { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
.etqp-linha.conferir { border-color: #f0b44c; box-shadow: inset 4px 0 0 #f0b44c; }
/* v10.10.17 — "☐ imprimir" por produto (vários de uma vez, na ordem que marcar) */
.etqp-linha.com-imp { grid-template-columns: auto minmax(0, 1fr) auto; }
.etqp-imp-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 84px; }
.etqp-imp { border: 2px solid var(--border); background: var(--card); color: var(--text); border-radius: 10px; padding: 7px 8px; font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.etqp-imp:hover { border-color: var(--navy-light); }
.etqp-imp.on { background: #1a7f37; border-color: #1a7f37; color: #fff; }
.etqp-imp-ordem { display: flex; align-items: center; gap: 3px; font-size: 12px; color: #1a7f37; }
.etqp-imp-ordem button { width: 22px; height: 20px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); font-size: 10px; cursor: pointer; padding: 0; line-height: 1; }
.etqp-imp-ordem button:disabled { opacity: .35; cursor: default; }
.etqp-linha.zerada .etqp-imp { opacity: .6; }
/* v10.10.17 — por embalagem / por unidade */
.etqp-por { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; max-width: 320px; }
.etqp-por-b { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px; padding: 3px 9px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.etqp-por-b b { font-weight: 800; }
.etqp-por-b:hover:not(:disabled) { border-color: var(--navy-light); }
.etqp-por-b.on { background: #eef4ff; border-color: var(--navy-light); color: var(--navy-light); }
.etqp-por-b:disabled { opacity: .45; cursor: default; }
.etqp-por small { flex-basis: 100%; text-align: right; font-size: 11px; color: var(--text-muted); }
:root[data-tema='escuro'] .etqp-por-b.on { background: #17324f; }
.etqp-linha.zerada { opacity: .55; }
.etqp-cod { font-weight: 800; font-size: 15px; }
.etqp-desc { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etqp-info { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.etqp-info b { color: #9a5b00; font-weight: 700; }
.etqp-ajuste { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.etqp-stepper { display: flex; align-items: center; border: 2px solid var(--navy-light); border-radius: 10px; overflow: hidden; }
.etqp-stepper button { width: 38px; height: 38px; border: 0; background: var(--navy-light); color: #fff; font-size: 22px; font-weight: 800; cursor: pointer; line-height: 1; }
.etqp-stepper input { width: 70px; height: 38px; border: 0; text-align: center; font-size: 20px; font-weight: 800; background: var(--card); color: var(--text); -moz-appearance: textfield; }
.etqp-stepper input::-webkit-outer-spin-button, .etqp-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.etqp-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 300px; }
.etqp-chip { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 700; cursor: pointer; }
.etqp-chip:hover { border-color: var(--navy-light); }
.etqp-chip.on { background: var(--navy-light); border-color: var(--navy-light); color: #fff; }
.etqp-total { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--navy); color: #fff; }
.etqp-total span { font-size: 13px; opacity: .9; }
.etqp-total b { font-size: 28px; line-height: 1; }
.etqp-total b.acima { color: #ffb4b4; }
.etqp-total em { margin-left: auto; font-style: normal; font-size: 12px; opacity: .85; }
.etqp-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.etqp-campos label { font-size: 12px; font-weight: 700; color: var(--text-muted); display: flex; flex-direction: column; gap: 4px; }
.etqp-campos label:first-child { grid-column: 1 / -1; }
.etqp-campos small { font-weight: 500; font-size: 11px; }
.etqp-inp { display: flex; gap: 4px; }
.etqp-inp input { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; }
.etqp-limpar { border: 1px solid var(--border); background: var(--card); color: var(--text-muted); border-radius: 8px; width: 34px; cursor: pointer; font-size: 15px; }
.etqp-dir { position: sticky; top: 0; }
.etqp-previa-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.etqp-previa-cab span { color: var(--text-muted); font-size: 12.5px; text-align: right; }
.etqp-previa { background: repeating-linear-gradient(45deg, #e6eaf0, #e6eaf0 10px, #eef1f5 10px, #eef1f5 20px); border-radius: 12px; padding: 14px; display: flex; justify-content: center; }
.etqp-previa canvas { width: 100%; max-width: 460px; height: auto; background: #fff; border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.etqp-nav { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0; font-size: 13px; }
.etqp-nav input { width: 64px; text-align: center; }
.etqp-arm { font-size: 12.5px; color: var(--text-muted); text-align: center; margin-bottom: 10px; }
.etqp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.etqp-kpis div { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 6px; text-align: center; }
.etqp-kpis b { display: block; font-size: 20px; }
.etqp-kpis span { font-size: 11px; color: var(--text-muted); }
.etqp-alerta { border-left: 4px solid #b45309; background: var(--bg); padding: 6px 10px; border-radius: 6px; font-size: 12px; margin-bottom: 10px; }
.etqp-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.etqp-acoes .btn { font-size: 15px; padding: 12px 10px; }
.etqp-trecho { margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.etqp-trecho summary { cursor: pointer; font-weight: 700; }
.etqp-trecho-campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.etqp-trecho-campos label { font-size: 11.5px; color: var(--text-muted); display: flex; flex-direction: column; gap: 3px; }
.etqp-dica { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }
.etqp-hist { margin-top: 8px; font-size: 13px; }
.etqp-hist summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
@media (max-width: 900px) { .etqp-corpo { grid-template-columns: 1fr; } .etqp-dir { position: static; } .etqp-campos { grid-template-columns: 1fr; } }
:root[data-tema='escuro'] .etqp-modo button.on { background: #17324f; }

/* v10.5 — menu Etiquetas: padrões do armazém e modelos em cartões com prévia */
.etqm-topo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.etqm-padroes .linha { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.etqm-nome-prev { display: inline-block; margin-top: 6px; padding: 4px 10px; border: 1px dashed var(--border); border-radius: 6px; font: 700 12px Helvetica, Arial, sans-serif; color: #595959; background: #fff; }
.etqm-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.etqm-card { border: 1px solid var(--border); border-radius: 12px; background: var(--card); overflow: hidden; display: flex; flex-direction: column; }
.etqm-card .mini { background: #e9edf3; padding: 12px; display: flex; justify-content: center; }
.etqm-card .mini canvas { width: 100%; max-width: 230px; height: auto; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.15); border-radius: 3px; }
.etqm-card .info { padding: 10px 12px; flex: 1; }
.etqm-card .info b { font-size: 14.5px; }
.etqm-card .tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.etqm-card .tags span { font-size: 11px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; color: var(--text-muted); }
.etqm-card .tags span.padrao { background: #fff7d6; border-color: #f0d267; color: #7a5b00; }
.etqm-card .acoes { display: flex; gap: 6px; padding: 0 12px 12px; flex-wrap: wrap; }
@media (max-width: 900px) { .etqm-topo { grid-template-columns: 1fr; } }

/* v10.5 — QR da etiqueta escaneado: aviso no canto, chip na lista e linha no pedido */
.avisos-qr { position: fixed; right: 16px; bottom: 16px; z-index: 9400; display: flex; flex-direction: column; gap: 8px; width: 340px; max-width: calc(100vw - 32px); }
.aviso-qr { background: #fff; border: 2px solid #1f6fe0; border-left-width: 6px; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.25); padding: 12px 14px; animation: avisoPainelEntra .25s ease-out; }
.aviso-qr-tit { font-size: 16.5px; font-weight: 900; color: #12408f; }
.aviso-qr-txt { font-size: 14px; font-weight: 700; color: #1f2a3d; margin-top: 4px; line-height: 1.35; }
.aviso-qr-rod { display: flex; gap: 6px; align-items: center; margin-top: 8px; font-size: 12.5px; color: #46536b; }
.aviso-qr-rod span { margin-right: auto; }
:root[data-tema='escuro'] .aviso-qr { background: #13202f; }
:root[data-tema='escuro'] .aviso-qr-txt { color: #eef2f7; }
.chip-qr { display: inline-block; font-size: 11px; font-weight: 800; background: #eef4ff; color: #12408f; border: 1px solid #c9dafb; border-radius: 999px; padding: 0 6px; white-space: nowrap; cursor: help; }
.chip-qr.recente { background: #1f6fe0; color: #fff; border-color: #1f6fe0; }
.linha-qr-modal { margin-top: 8px; font-size: 13px; background: #eef4ff; border: 1px solid #c9dafb; border-radius: 8px; padding: 6px 10px; color: #12408f; }
:root[data-tema='escuro'] .linha-qr-modal { background: #17324f; color: #cfe0ff; border-color: #2a4a70; }

/* v10.6 — ⚡ Imprimir direto na Zebra (Browser Print) */
.etqp-zebra { width: 100%; font-size: 16px; padding: 13px 10px; margin-bottom: 4px; }
.etqp-zebra-info { font-size: 12px; color: var(--text-muted); text-align: center; margin-bottom: 8px; }
.zebra-ajuda { border: 2px solid #f0b44c; background: #fff9ec; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; font-size: 13px; color: #3d2c00; }
.zebra-ajuda-tit { font-weight: 800; font-size: 14px; margin-bottom: 6px; color: #7a4d00; }
.zebra-ajuda ol { margin: 0; padding-left: 18px; line-height: 1.5; }
.zebra-ajuda a { color: #12408f; font-weight: 700; }
.zebra-ajuda-mini { font-size: 12px; color: #6b5a2e; margin-top: 6px; }
.zebra-escolha-fundo { position: fixed; inset: 0; z-index: 9600; background: rgba(11,31,58,.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.zebra-escolha { background: var(--card); border-radius: 14px; padding: 16px; width: 420px; max-width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.zebra-opcao { display: block; width: 100%; text-align: left; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 10px; padding: 10px 12px; margin-top: 8px; cursor: pointer; }
.zebra-opcao:hover { border-color: var(--navy-light); }
.zebra-opcao small { display: block; color: var(--text-muted); font-size: 12px; margin-top: 2px; }
:root[data-tema='escuro'] .zebra-ajuda { background: #2a2210; color: #f3e3bd; }

/* v10.6.1 — Notas em lote: o pedido com busca (em vez da lista enorme) */
.nl-filtro { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.nl-filtro input { width: 400px; max-width: 100%; font-size: 13.5px; padding: 7px 10px; }
.nl-filtro span { font-size: 12.5px; color: var(--text-muted); }
.nl-ped input { width: 220px; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); }
.nl-ped input:focus { outline: 2px solid #1f6fe0; outline-offset: 0; }
.nl-ped.nl-ped-vazio-campo input { border-color: #d97706; background: #fffaf0; }
.nl-ped-lista { position: fixed; z-index: 9700; max-height: 320px; overflow-y: auto; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.22); padding: 4px; font-size: 13px; }
.nl-ped-op { padding: 6px 9px; border-radius: 7px; cursor: pointer; }
.nl-ped-op small { display: block; color: var(--text-muted); font-size: 11.5px; }
.nl-ped-op:hover, .nl-ped-op.ativo { background: #e8f1ff; }
.nl-ped-op.atual { border-left: 3px solid #1a7f37; }
.nl-ped-sug { font-size: 11px; font-weight: 700; color: #1f6fe0; background: #eef4ff; border-radius: 999px; padding: 0 6px; margin-left: 4px; }
.nl-ped-sug.atual { color: #1a7f37; background: #eafaef; }
.nl-ped-tirar { color: #c53030; font-weight: 700; border-bottom: 1px solid var(--border); border-radius: 7px 7px 0 0; }
.nl-ped-nada { padding: 8px 9px; color: var(--text-muted); font-size: 12.5px; }
:root[data-tema='escuro'] .nl-ped-op:hover, :root[data-tema='escuro'] .nl-ped-op.ativo { background: #1d2f4a; }
:root[data-tema='escuro'] .nl-ped.nl-ped-vazio-campo input { background: #2a2110; }
:root[data-tema='escuro'] .nl-ped-sug { background: #1d2f4a; color: #8fb8ff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .nl-ped-op:hover, :root:not([data-tema='claro']) .nl-ped-op.ativo { background: #1d2f4a; }
  :root:not([data-tema='claro']) .nl-ped.nl-ped-vazio-campo input { background: #2a2110; }
  :root:not([data-tema='claro']) .nl-ped-sug { background: #1d2f4a; color: #8fb8ff; }
}

/* v10.7 — documentos do despacho voltando ao escritório */
.chip-docs { display: inline-block; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 7px; margin-left: 4px; background: #eef4ff; color: #1f6fe0; white-space: nowrap; }
.chip-docs.amarelo { background: #fff4d6; color: #92590a; }
.chip-docs.vermelho { background: #fde2e2; color: #b42318; }
.chip-docs.entregue { background: #e6f0ff; color: #1447a6; outline: 1px dashed #1f6fe0; }
.chip-docs.ok { background: #e3f7ea; color: #1a7f37; }
.docs-receber { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #eef4ff; border: 1px solid #c9dcfb; border-left: 5px solid #1f6fe0; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; font-size: 13px; }
.docs-receber > span { margin-right: auto; }
.docs-receber.amarelo { background: #fff8e6; border-color: #f3d58a; border-left-color: #d97706; }
.docs-receber.vermelho { background: #fff1f1; border-color: #f5b5b5; border-left-color: #c53030; }
.docs-fis { margin-top: 14px; padding: 10px 14px; border-radius: 10px; border: 1px solid #c9dcfb; border-left: 5px solid #1f6fe0; background: #f5f9ff; font-size: 13.5px; }
.docs-fis.amarelo { border-left-color: #d97706; background: #fffaf0; border-color: #f3d58a; }
.docs-fis.vermelho { border-left-color: #c53030; background: #fff5f5; border-color: #f5b5b5; }
.docs-fis.ok { border-left-color: #1a7f37; background: #f1fbf4; border-color: #b8e5c6; }
.docs-fis-itens { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0; }
.docs-fis-itens label { display: flex; gap: 6px; align-items: center; font-weight: 600; }
.docs-fis-itens input { width: auto; }
.docs-fis > input[type=text] { max-width: 420px; font-size: 13px; padding: 6px 8px; }
.docs-fis-botoes { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.docs-fis-mini { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.aviso-qr.carga { border-color: #1a7f37; }
.aviso-qr.docs { border-color: #6a2fa8; }
:root[data-tema='escuro'] .docs-receber, :root[data-tema='escuro'] .docs-fis { background: #13233d; border-color: #2d4d80; }
:root[data-tema='escuro'] .docs-receber.amarelo, :root[data-tema='escuro'] .docs-fis.amarelo { background: #2a2110; border-color: #6b4a14; }
:root[data-tema='escuro'] .docs-receber.vermelho, :root[data-tema='escuro'] .docs-fis.vermelho { background: #2c1515; border-color: #7a2c2c; }
:root[data-tema='escuro'] .docs-fis.ok { background: #122a1b; border-color: #25603a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .docs-receber, :root:not([data-tema='claro']) .docs-fis { background: #13233d; border-color: #2d4d80; }
  :root:not([data-tema='claro']) .docs-receber.amarelo, :root:not([data-tema='claro']) .docs-fis.amarelo { background: #2a2110; border-color: #6b4a14; }
  :root:not([data-tema='claro']) .docs-receber.vermelho, :root:not([data-tema='claro']) .docs-fis.vermelho { background: #2c1515; border-color: #7a2c2c; }
  :root:not([data-tema='claro']) .docs-fis.ok { background: #122a1b; border-color: #25603a; }
}

/* v10.7 — desempenho e prêmios dos conferentes (Gestão) */
.desemp-adm-cab { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.desemp-podio { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.desemp-podio-item { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; text-align: center; }
.desemp-podio-item.p1 { border: 2px solid #d4a017; background: linear-gradient(180deg, rgba(252,211,77,.18), var(--card)); }
.desemp-podio-item.p2 { border: 2px solid #9ca3af; }
.desemp-podio-item.p3 { border: 2px solid #b87333; }
.desemp-podio-item .m { font-size: 30px; }
.desemp-podio-item .n { font-weight: 900; font-size: 16px; }
.desemp-podio-item .p { font-size: 22px; font-weight: 900; color: var(--titulo); }
.desemp-podio-item .f { font-size: 12.5px; color: var(--text-muted); }
.desemp-adm-dest { border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; }
.desemp-adm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
@media (max-width: 640px) { .desemp-adm-cols { grid-template-columns: 1fr; } }
.desemp-adm-lin { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 13px; align-items: center; }
.desemp-adm-lin small { color: var(--text-muted); }
.desemp-cfg { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin-top: 10px; }
.desemp-cfg summary { cursor: pointer; font-weight: 800; }
.desemp-cfg-lin { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 4px 0; font-size: 13px; border-bottom: 1px dashed var(--border); }
.desemp-cfg-tab { width: 100%; font-size: 13px; margin-top: 6px; }
.desemp-cfg-tab input { padding: 5px 7px; }
.aviso-qr.folga { border-color: #0f766e; }

/* v10.8 — fechamento, relatório do RH e banco de folgas */
.desemp-subnav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.desemp-fechado { background: #f1fbf4; border: 1px solid #b8e5c6; border-left: 5px solid #1a7f37; font-size: 13.5px; }
.desemp-ok { color: #1a7f37; font-weight: 800; font-size: 13.5px; }
.desemp-aviso-and { background: #fff8e6; border: 1px solid #f3d58a; border-left: 5px solid #d97706; border-radius: 10px; padding: 8px 12px; font-size: 13px; margin-top: 4px; }
.desemp-pv-totais { text-align: right; font-size: 14px; margin: 10px 0; }
#tabPrevia input { padding: 5px 7px; font-size: 13px; }
:root[data-tema='escuro'] .desemp-fechado { background: #122a1b; border-color: #25603a; }
:root[data-tema='escuro'] .desemp-aviso-and { background: #2a2110; border-color: #6b4a14; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .desemp-fechado { background: #122a1b; border-color: #25603a; }
  :root:not([data-tema='claro']) .desemp-aviso-and { background: #2a2110; border-color: #6b4a14; }
}

/* ---------- v10.9 — COMERCIAL (orçamento rápido, propostas, tabela, contrato) ---------- */
.com-abas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.com-aviso { background: #fff8e6; border: 1px solid #f3d58a; border-left: 5px solid #d97706; border-radius: 10px; padding: 9px 12px; font-size: 13px; margin-bottom: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.com-muted { color: var(--text-muted); font-size: 12px; }
.com-sem-preco { color: #c53030; font-weight: 700; }
.com-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 12px; align-items: start; }
.com-f { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-muted); min-width: 0; }
.com-f > span { font-weight: 600; }
.com-f.largo { grid-column: 1 / -1; }
.com-f input, .com-f select, .com-f textarea { width: 100%; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--card); color: var(--text); box-sizing: border-box; }
.com-f input[type=color] { padding: 2px; height: 36px; }
.com-f input:focus, .com-f select:focus, .com-f textarea:focus { border-color: var(--sky); outline: none; }
.com-f small { font-size: 11.5px; color: var(--text-muted); font-weight: 400; }
.com-chk { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.orc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.orc-form { display: flex; flex-direction: column; gap: 12px; }
.orc-tipos { display: flex; gap: 6px; flex-wrap: wrap; }
.orc-tipo { flex: 1; min-width: 120px; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--border); background: var(--card); color: var(--text); font-weight: 700; font-size: 14px; cursor: pointer; }
.orc-tipo.ativo { border-color: var(--navy-light); background: var(--navy-light); color: #fff; }
.orc-bloco { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px 12px; margin: 0; }
.orc-bloco legend { font-weight: 800; font-size: 13.5px; color: var(--titulo); padding: 0 4px; }
.orc-bloco[hidden] { display: none; }
.orc-sub { font-weight: 700; font-size: 12.5px; margin: 12px 0 6px; color: var(--titulo); }
.orc-extras summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--titulo); }
.orc-extras[open] summary { margin-bottom: 10px; }
.orc-res { position: sticky; top: 10px; }
.orc-total { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); color: #fff; border-radius: 12px; padding: 14px 16px; }
.orc-total-rot { font-size: 12.5px; opacity: .85; text-transform: uppercase; letter-spacing: .04em; }
.orc-total-v { font-size: 30px; font-weight: 900; line-height: 1.15; margin: 2px 0; }
.orc-total-sub { font-size: 13px; opacity: .9; }
.orc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.orc-kpis > div { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.orc-kpis span { font-size: 11.5px; color: var(--text-muted); }
.orc-kpis b { font-size: 15.5px; color: var(--titulo); }
.orc-kpis b.ruim { color: #c53030; }
.orc-linhas { width: 100%; font-size: 13px; }
.orc-linhas { table-layout: auto; }
.orc-linhas td, .orc-linhas th { padding: 6px 4px; vertical-align: top; }
.orc-linhas td:first-child { min-width: 150px; }
.orc-un { display: block; font-size: 11px; color: var(--text-muted); }
.orc-linhas .num, .com-tab .num, #tabPropostas .num, .prop-itens .num { text-align: right; white-space: nowrap; }
.orc-preco { width: 74px; padding: 4px 6px; border: 1.5px solid var(--border); border-radius: 6px; text-align: right; font-size: 13px; background: var(--card); color: var(--text); }
.orc-preco.manual { border-color: #d97706; background: #fff8e6; }
.orc-linhas tr.sem-preco td { background: #fdecec; }
.orc-ajuste td { color: var(--text-muted); font-style: italic; }
.orc-grupo td { font-weight: 800; font-size: 12px; color: var(--titulo); background: #f3f6fa; }
.orc-perm { font-size: 12.5px; background: #eef5ff; border-radius: 8px; padding: 7px 10px; margin-top: 8px; }
.orc-avisos { font-size: 12.5px; color: #8a4b00; background: #fff8e6; border-radius: 8px; padding: 7px 10px; margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.orc-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.com-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.com-kpi { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.com-kpi span { font-size: 12px; color: var(--text-muted); }
.com-kpi b { font-size: 20px; color: var(--titulo); }
.com-kpi small { font-size: 11.5px; color: var(--text-muted); }
.com-kpi small.perto { color: #b45309; font-weight: 700; }
.com-kpi.destaque { border-left: 5px solid #1f6fe0; }
.com-kpi.ok { border-left: 5px solid #1a7f37; }
.com-filtros { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.com-filtros input { margin-left: auto; min-width: 220px; padding: 7px 10px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); }
.chip-f { border: 1.5px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; font-weight: 600; }
.chip-f.ativo { background: var(--navy-light); border-color: var(--navy-light); color: #fff; }
.com-sit { display: inline-block; font-weight: 800; font-size: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.com-venc { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.com-venc.perto { color: #b45309; font-weight: 700; }
.com-versao { font-size: 11px; font-weight: 800; background: #e8eef7; color: var(--titulo); border-radius: 6px; padding: 1px 6px; vertical-align: middle; }
.com-novo { font-size: 10.5px; font-weight: 800; background: #e6f4ea; color: #1a7f37; border-radius: 6px; padding: 1px 6px; }
.com-acoes { white-space: nowrap; }
.com-acoes .btn { width: auto; margin: 1px 0; }
.com-bt-ok { background: #1a7f37; color: #fff; border: none; }
.com-versoes > div, .com-hist > div { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.com-hist { max-height: 300px; overflow: auto; }
.prop-form { display: flex; flex-direction: column; gap: 12px; }
.prop-sec { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
details.prop-sec > summary { cursor: pointer; font-weight: 700; color: var(--titulo); }
details.prop-sec[open] > summary { margin-bottom: 10px; }
.prop-sec-tit { font-weight: 800; color: var(--titulo); margin-bottom: 8px; }
.prop-cli-modo { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13.5px; margin-bottom: 8px; }
.prop-cli-modo label { display: flex; gap: 6px; align-items: center; }
.prop-itens { width: 100%; font-size: 13px; }
.prop-itens td { padding: 4px 4px; }
.prop-itens input, .prop-itens select { width: 100%; padding: 5px 7px; border: 1.5px solid var(--border); border-radius: 6px; font-size: 13px; background: var(--card); color: var(--text); box-sizing: border-box; }
.prop-itens select { min-width: 0; }
.prop-itens td:first-child select { width: 132px; }
.prop-itens td:nth-child(2) { min-width: 230px; }
.prop-itens input.falta, .com-tab input.falta { border-color: #e06464; background: #fdecec; }
.prop-add { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.prop-add select { padding: 6px 8px; border: 1.5px solid var(--border); border-radius: 8px; max-width: 420px; background: var(--card); color: var(--text); }
.prop-totais-linha { display: grid; grid-template-columns: 160px 200px 1fr; gap: 12px; align-items: start; margin-top: 12px; }
.prop-totais { justify-self: end; min-width: 280px; font-size: 13px; }
.prop-totais > div { display: flex; justify-content: space-between; gap: 18px; padding: 2px 0; }
.prop-totais > div.grande { background: var(--navy-light); color: #fff; border-radius: 8px; padding: 6px 10px; margin: 4px 0; font-size: 15px; }
.prop-secoes { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.com-tab-topo { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 13.5px; }
.com-cat h3 { margin: 0 0 8px; font-size: 15px; }
.com-tab { width: 100%; font-size: 13px; }
.com-tab td { padding: 4px 6px; vertical-align: middle; }
.com-tab input:not([type=checkbox]) { padding: 5px 7px; border: 1.5px solid var(--border); border-radius: 6px; font-size: 13px; width: 100%; box-sizing: border-box; background: var(--card); color: var(--text); }
.com-tab td.num input { width: 110px; text-align: right; }
.com-exemplo { font-size: 10.5px; font-weight: 800; background: #fff3cd; color: #8a6d00; border-radius: 6px; padding: 1px 5px; }
.com-novo-item b { display: block; margin-bottom: 8px; }
.com-salvar-fixo { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; display: flex; justify-content: flex-end; z-index: 2; }
.com-salvar-fixo .btn { width: auto; }
.cl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; align-items: start; }
.cl-lado { position: sticky; top: 10px; display: flex; flex-direction: column; gap: 0; }
.cl-lista { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.cl-card { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: var(--card); }
.cl-cab { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.cl-num { font-weight: 900; font-size: 12px; color: var(--titulo); white-space: nowrap; }
.cl-tit { flex: 1; min-width: 0; padding: 6px 8px; border: 1.5px solid var(--border); border-radius: 7px; font-weight: 700; font-size: 13.5px; text-transform: uppercase; background: var(--card); color: var(--text); }
.cl-bts { display: flex; gap: 2px; }
.cl-bts .btn { width: auto; padding: 4px 8px; }
.cl-txt { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 8px; font-family: Georgia, "Times New Roman", serif; font-size: 14px; line-height: 1.45; resize: vertical; background: var(--card); color: var(--text); }
.cl-campos summary { cursor: pointer; font-weight: 700; font-size: 13px; }
.cl-campos > div { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.cl-campo { font-family: ui-monospace, Consolas, monospace; font-size: 11px; border: 1px solid #c9d6e8; background: #eef4fb; color: #123a63; border-radius: 6px; padding: 2px 6px; cursor: pointer; }
.cl-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.cl-layout .com-f.largo { grid-column: 1 / -1; }
.cl-layout small label, .prop-sec small label { display: inline-flex; gap: 4px; align-items: center; }
.cl-acoes { display: flex; flex-direction: column; gap: 8px; }
.cl-acoes .btn { width: 100%; }
.doc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.doc-ed { min-width: 0; }
.doc-abas { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.doc-aba { border: 1.5px solid var(--border); background: var(--card); color: var(--text); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.doc-aba.ativo { background: var(--navy-light); border-color: var(--navy-light); color: #fff; }
.doc-sub { font-weight: 800; font-size: 13px; color: var(--titulo); margin: 12px 0 6px; }
.doc-prev { position: sticky; top: 0; }
.doc-pend { font-size: 12.5px; background: #fff8e6; border: 1px solid #f3d58a; border-radius: 8px; padding: 7px 10px; margin-bottom: 8px; }
.doc-pend.ok { background: #f1fbf4; border-color: #b8e5c6; }
.doc-pend b.ok { color: #1a7f37; }
.doc-papel { background: #fff; color: #1b2230; border: 1px solid #d9dee6; box-shadow: 0 3px 14px rgba(15, 30, 60, .12); border-radius: 4px; padding: 26px 30px; max-height: 64vh; overflow: auto; font-family: Georgia, "Times New Roman", serif; font-size: 13px; line-height: 1.5; text-align: justify; }
.doc-papel p { margin: 0 0 7px; }
.doc-papel p.rec { padding-left: 18px; }
.doc-titulo { text-align: center; font-weight: 800; font-size: 14.5px; margin-bottom: 14px; }
.doc-cl { font-weight: 800; color: #123a63; margin: 12px 0 4px; font-size: 13px; }
.doc-falta { background: #fde2e2; color: #b42318; border-radius: 3px; padding: 0 3px; }
.ctr-doc-pend { color: #b45309; font-weight: 900; }
@media (max-width: 1000px) {
  .orc-grid, .cl-grid, .doc-grid { grid-template-columns: 1fr; }
  .orc-res, .cl-lado, .doc-prev { position: static; }
  .prop-totais-linha { grid-template-columns: 1fr 1fr; }
  .prop-totais { grid-column: 1 / -1; justify-self: stretch; }
}
@media (max-width: 560px) {
  .orc-kpis { grid-template-columns: 1fr 1fr; }
  .com-filtros input { margin-left: 0; min-width: 0; width: 100%; }
  .cl-layout { grid-template-columns: 1fr; }
  .doc-papel { padding: 16px 14px; }
}
:root[data-tema='escuro'] .com-aviso, :root[data-tema='escuro'] .orc-avisos, :root[data-tema='escuro'] .doc-pend { background: #2d2410; border-color: #6b5316; color: #f3d58a; }
:root[data-tema='escuro'] .doc-pend.ok { background: #122a1b; border-color: #25603a; color: #9fe0b4; }
:root[data-tema='escuro'] .orc-perm { background: #13243d; }
:root[data-tema='escuro'] .orc-grupo td { background: #1a2638; }
:root[data-tema='escuro'] .orc-linhas tr.sem-preco td { background: #3a1717; }
:root[data-tema='escuro'] .orc-preco.manual { background: #3a2c0c; }
:root[data-tema='escuro'] .com-versao { background: #20324d; }
:root[data-tema='escuro'] .cl-campo { background: #1a2b44; border-color: #2c4468; color: #bcd4f5; }
:root[data-tema='escuro'] .doc-papel { box-shadow: 0 3px 14px rgba(0, 0, 0, .5); }
.orc-linhas td:first-child, #tabPropostas td:nth-child(2), .com-tab td:nth-child(2), .com-hist, .com-versoes { white-space: normal; }
.orc-linhas td:first-child { min-width: 0; }
#tabPropostas td.com-acoes { white-space: normal; min-width: 240px; }
#tabPropostas td.com-acoes .btn { margin: 2px 2px 2px 0; }
#tabPropostas td:nth-child(2) { min-width: 170px; }
#tabPropostas td:nth-child(3) { white-space: normal; max-width: 150px; }

/* ---------- v10.10 — DESIGNER DOS IMPRESSOS ---------- */
.dsg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.dsg-ctrl { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.dsg-prev { position: sticky; top: 10px; min-width: 0; }
.dsg-sub { font-weight: 800; font-size: 13px; color: var(--titulo); margin: 14px 0 8px; }
.dsg-sub:first-child { margin-top: 0; }
.dsg-sub small { font-weight: 400; color: var(--text-muted); font-size: 11.5px; }
.dsg-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.dsg-tema { display: flex; align-items: center; gap: 4px; border: 1.5px solid var(--border); background: var(--card); color: var(--text); border-radius: 9px; padding: 6px 8px; cursor: pointer; font-size: 12px; font-weight: 600; text-align: left; }
.dsg-tema i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.12); flex: 0 0 auto; }
.dsg-tema span { margin-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsg-tema:hover { border-color: var(--sky); }
.dsg-estilos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dsg-estilo { border: 2px solid var(--border); background: var(--card); color: var(--text); border-radius: 10px; padding: 8px; cursor: pointer; font-size: 12.5px; font-weight: 700; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.dsg-estilo.ativo { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(41, 182, 246, .18); }
.dsg-mini { display: block; height: 34px; border-radius: 5px; background: #fff; border: 1px solid #dfe5ec; position: relative; overflow: hidden; }
.dsg-mini b { position: absolute; left: 6px; top: 8px; width: 16px; height: 16px; border-radius: 3px; background: #c8d3e0; }
.dsg-mini em { position: absolute; left: 28px; top: 10px; width: 46%; height: 5px; border-radius: 3px; background: var(--p); }
.dsg-mini-faixa { background: var(--p); }
.dsg-mini-faixa b { background: rgba(255,255,255,.55); }
.dsg-mini-faixa em { background: rgba(255,255,255,.9); }
.dsg-mini-linha { border-bottom: 4px solid var(--p); }
.dsg-mini-claro { background: color-mix(in srgb, var(--p) 13%, #fff); border-bottom: 3px solid var(--p); }
.dsg-linha { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.dsg-rot { font-size: 12.5px; font-weight: 700; color: var(--text-muted); min-width: 44px; }
.dsg-cores { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.dsg-cor { display: flex; gap: 8px; align-items: center; font-size: 12.5px; }
.dsg-cor input[type=color] { width: 42px; height: 32px; padding: 2px; border: 1.5px solid var(--border); border-radius: 7px; background: var(--card); flex: 0 0 auto; }
.dsg-cor span { display: flex; flex-direction: column; }
.dsg-cor small { color: var(--text-muted); font-size: 11px; }
.dsg-cor small label { display: inline-flex; gap: 4px; align-items: center; }
.dsg-tipos { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.dsg-checks { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.dsg-colunas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 12px; }
.dsg-col { display: flex; gap: 6px; align-items: center; }
.dsg-col .com-chk { min-width: 120px; font-size: 12.5px; }
.dsg-col input:not([type=checkbox]) { flex: 1; min-width: 0; padding: 5px 7px; border: 1.5px solid var(--border); border-radius: 6px; font-size: 12px; text-transform: uppercase; background: var(--card); color: var(--text); }
.dsg-bloco { margin-bottom: 8px; }
.dsg-bloco > b { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.dsg-bloco > div { display: flex; flex-wrap: wrap; gap: 5px; }
.dsg-campo { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; border: 1.5px solid var(--border); border-radius: 999px; padding: 3px 10px 3px 7px; cursor: pointer; background: var(--card); }
.dsg-campo.off { opacity: .5; text-decoration: line-through; }
.dsg-acoes { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; display: flex; gap: 8px; z-index: 2; }
.dsg-acoes .btn { width: auto; }
.dsg-prev-topo { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.dsg-prev-topo .com-muted { flex: 1; }
.dsg-papel { background: #e9edf2; border-radius: 8px; padding: 10px; max-height: 78vh; overflow: auto; min-height: 300px; transition: opacity .2s; }
.dsg-papel.carregando { opacity: .55; }
@media (max-width: 1000px) {
  .dsg-grid { grid-template-columns: 1fr; }
  .dsg-prev { position: static; order: -1; }
  .dsg-papel { max-height: 60vh; }
}
@media (max-width: 560px) {
  .dsg-estilos, .dsg-cores { grid-template-columns: 1fr; }
}
:root[data-tema='escuro'] .dsg-papel { background: #0f1724; }
#tabPropostas .com-acoes-in { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-start; min-width: 220px; max-width: 330px; }
#tabPropostas .com-acoes-in .btn { margin: 0; }
.orc-mini { display: none; }
@media (max-width: 1000px) {
  .orc-mini:not(:empty) { display: flex; position: sticky; top: 0; z-index: 3; gap: 10px; align-items: center; background: var(--navy-light); color: #fff; border-radius: 10px; padding: 8px 12px; margin: -4px 0 4px; box-shadow: 0 4px 12px rgba(10, 25, 50, .18); }
  .orc-mini span { font-size: 12px; opacity: .85; }
  .orc-mini b { font-size: 17px; flex: 1; }
}
/* v10.10.1 — Leituras do QR (Expedição) */
.qrl-barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.qrl-barra select, .qrl-barra input { padding: 7px 10px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); font-size: 13px; }
.qrl-aviso { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 700; background: #eef5ff; border: 1px solid #c9dcf5; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.qrl-resumo { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 10px; }
.qrl-resumo > div { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.qrl-resumo b { font-size: 20px; color: var(--titulo); }
.qrl-resumo span { font-size: 11.5px; color: var(--text-muted); }
#tabLeiturasQr td.qrl-fora { font-weight: 700; color: #1f6fe0; }
#tabLeiturasQr td.qrl-anonimo { color: var(--text-muted); }
#tabLeiturasQr thead th { position: sticky; top: 0; background: var(--card); z-index: 1; }
:root[data-tema='escuro'] .qrl-aviso { background: #13243d; border-color: #2c4468; }

/* v10.10.3 — Notificações e som: cada aviso com som · sem som · desligado */
.notif-grupo { font-size: 11.5px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin: 10px 0 6px; }
.notif-grupo:first-of-type { margin-top: 2px; }
.notif-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; }
.notif-linha.travada { opacity: .8; }
.notif-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; font-size: 13.5px; }
.notif-txt span { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.notif-modos { display: inline-flex; flex: 0 0 auto; border: 1.5px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--card); }
.notif-modo { position: relative; margin: 0; cursor: pointer; }
.notif-modo input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.notif-modo span { display: block; padding: 6px 10px; font-size: 12px; font-weight: 700; color: var(--text-muted); white-space: nowrap; border-left: 1px solid var(--border); }
.notif-modo:first-child span { border-left: 0; }
.notif-modo input:checked + span { background: var(--navy); color: #fff; }
.notif-modo input[value="MUDO"]:checked + span { background: #5b6b82; }
.notif-modo input[value="OFF"]:checked + span { background: #c53030; }
.notif-modo input:focus-visible + span { outline: 2px solid var(--sky); outline-offset: -2px; }
.notif-linha.travada .notif-modo { cursor: not-allowed; }
@media (max-width: 640px) {
  .notif-linha { flex-direction: column; align-items: stretch; }
  .notif-modos { width: 100%; }
  .notif-modo { flex: 1; }
  .notif-modo span { text-align: center; padding: 8px 4px; }
}

/* v10.10.4 — conferência da carga pelo QR (app do conferente) */
.cc-aviso { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: #f1f5fa; color: var(--text-muted); font-size: 13px; }
.cc-cartao { margin: 10px 0 14px; padding: 12px 14px; border: 2px solid #1f6fe0; border-radius: 12px; background: #f4f8ff; }
.cc-cartao.ok { border-color: #1a7f37; background: #eefaf2; }
.cc-tit { font-weight: 800; color: var(--titulo); font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cc-modo { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 2px 8px; border-radius: 999px; background: #1f6fe0; color: #fff; }
.cc-cartao.ok .cc-modo { background: #1a7f37; }
.cc-num { font-size: 15px; margin: 6px 0; color: var(--titulo); }
.cc-num b { font-size: 26px; }
.cc-barra { height: 10px; border-radius: 6px; background: #dfe7f1; overflow: hidden; margin: 4px 0 8px; }
.cc-barra i, .cc-barra #ccBarra { display: block; height: 100%; background: #1f6fe0; border-radius: 6px; transition: width .2s; }
.cc-cartao.ok .cc-barra i, .cc-bipar.completa .cc-barra i { background: #1a7f37; }
.cc-barra.grande { height: 16px; }
.cc-linhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px 12px; font-size: 13px; margin: 4px 0 6px; }
.cc-linhas div { display: flex; justify-content: space-between; gap: 6px; border-bottom: 1px dashed #d3dce8; padding: 2px 0; }
.cc-linhas b.ok { color: #1a7f37; }
.cc-faltam { font-size: 12.5px; color: #8a4b00; margin: 4px 0 8px; word-break: break-word; }
.cc-erradas { font-size: 12.5px; color: #c53030; font-weight: 700; margin-bottom: 8px; }
.cc-rfid { font-size: 12.5px; color: #1d4ed8; font-weight: 700; margin-bottom: 8px; } /* v11.4.1 — leituras do portal RFID */
.cc-dica { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.cc-bipar { position: fixed; inset: 0; z-index: 5200; background: rgba(5, 11, 20, .9); display: flex; align-items: flex-start; justify-content: center; padding: 10px; overflow: auto; }
.cc-bipar-caixa { width: 100%; max-width: 520px; background: var(--card); color: var(--text); border-radius: 14px; padding: 12px; }
.cc-bipar-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.cc-bipar-ped { font-weight: 900; font-size: 16px; color: var(--titulo); }
.cc-bipar-cli { font-size: 13px; color: var(--text-muted); }
.cc-contador { text-align: center; margin: 6px 0 2px; color: var(--titulo); }
.cc-contador b { font-size: 54px; line-height: 1; font-variant-numeric: tabular-nums; }
.cc-contador span { font-size: 22px; font-weight: 700; color: var(--text-muted); }
.cc-bipar.completa .cc-contador b { color: #1a7f37; }
.cc-ultima { text-align: center; font-weight: 800; font-size: 15px; padding: 9px 10px; border-radius: 10px; margin: 6px 0 8px; background: #eef2f7; color: var(--titulo); }
.cc-ultima.ok { background: #d9f4e2; color: #11642b; }
.cc-ultima.rep { background: #fff3cd; color: #7a5200; }
.cc-ultima.erro { background: #fde2e2; color: #a61b1b; }
.cc-bipar video { width: 100%; max-height: 38vh; object-fit: cover; border-radius: 10px; background: #000; display: block; }
.cc-bipar input { width: 100%; margin: 8px 0; padding: 10px 12px; border-radius: 9px; border: 1.5px solid var(--border); font-size: 15px; }
.cc-pin-fundo { position: fixed; inset: 0; z-index: 5300; background: rgba(5, 11, 20, .72); display: flex; align-items: center; justify-content: center; padding: 14px; }
.cc-pin { width: 100%; max-width: 420px; background: var(--card); color: var(--text); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.cc-pin-tit { font-weight: 900; font-size: 18px; color: #a61b1b; }
.cc-pin-txt { font-size: 13.5px; }
.cc-pin label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; }
.cc-pin input { padding: 11px 12px; border-radius: 9px; border: 1.5px solid var(--border); font-size: 16px; }
.cc-pin-botoes { display: flex; gap: 8px; }
.cc-pin-botoes .btn { flex: 1; }
.chip-carga { display: inline-block; font-size: 11px; font-weight: 800; background: #f1f5fa; color: #46536b; border: 1px solid #d5dde8; border-radius: 999px; padding: 0 6px; white-space: nowrap; cursor: help; margin-left: 2px; }
.chip-carga.ok { background: #e3f6ea; color: #11642b; border-color: #b8e5c6; }
.chip-carga.pin { background: #fff1dd; color: #8a4b00; border-color: #f2cf96; }
body.cc-bipando [data-botao-tema] { display: none !important; }

/* v10.10.5 — escolher quais etiquetas imprimir (clicando nelas) */
.etqp-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--text-muted); margin: -2px 0 8px; }
.etqp-leg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; border: 1px solid var(--border); }
.etqp-faltam-g { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; background: #fff7ed; border: 1px solid #f5c38a; border-radius: 10px; padding: 7px 10px; margin-bottom: 8px; }
.etqp-faltam-g b { color: #c53030; }
.etqp-faltam-g .btn { width: auto; margin-left: auto; }
.etqp-g { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.etqp-g-cab { display: flex; justify-content: space-between; gap: 4px 10px; align-items: baseline; flex-wrap: wrap; }
.etqp-g-tit { min-width: 0; display: flex; gap: 6px; align-items: baseline; flex: 1 1 200px; }
.etqp-g-tit b { font-size: 14px; white-space: nowrap; }
.etqp-g-tit span { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.etqp-g-st { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.etqp-g-st b { color: #c53030; }
.etqp-g-sel { font-style: normal; color: var(--navy-light); font-weight: 800; }
.etqp-g-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.etqp-g-acoes button { border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
.etqp-g-acoes button:hover { border-color: var(--navy-light); }
.etqp-g-acoes button.forte { border-color: #d97706; color: #b45309; background: #fff7ed; }
.etqp-g-de { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 2px 1px 10px; }
.etqp-g-de input { width: 54px; padding: 2px 6px; font-size: 13px; font-weight: 700; border-radius: 6px; }
.etqp-g-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; max-height: 172px; overflow: auto; padding: 3px; }
.etqp-q { height: 34px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-weight: 800; cursor: pointer; padding: 0; background: var(--card); color: var(--text); }
.etqp-q:hover { outline: 2px solid var(--navy-light); outline-offset: -1px; }
.etqp-leg i.saiu, .etqp-q.saiu { background: #e3f5ea; border-color: #8fd1a8; color: #1a7f37; }
.etqp-leg i.pend, .etqp-q.pend { background: #fff3d6; border-color: #f0c26b; color: #8a5a00; }
.etqp-leg i.falta { background: var(--card); }
.etqp-leg i.sel, .etqp-q.sel { background: var(--navy-light); border-color: var(--navy-light); color: #fff; }
.etqp-q.ver { box-shadow: 0 0 0 2px #f59e0b; }
.etqp-previa canvas { cursor: pointer; }
.etqp-marcar { display: block; width: auto; margin: -2px auto 8px; }
.etqp-marcar.on { background: var(--navy-light); border-color: var(--navy-light); color: #fff; }
.etqp-vai { border: 1px dashed var(--border); border-radius: 10px; padding: 8px 10px; font-size: 13px; margin-bottom: 8px; background: var(--bg); line-height: 1.45; }
.etqp-vai.on { border: 2px solid var(--navy-light); background: #eef4ff; }
.etqp-trecho input:disabled { opacity: .5; }
:root[data-tema='escuro'] .etqp-leg i.saiu, :root[data-tema='escuro'] .etqp-q.saiu { background: #123824; border-color: #2f7a4d; color: #9ce3b8; }
:root[data-tema='escuro'] .etqp-leg i.pend, :root[data-tema='escuro'] .etqp-q.pend { background: #3b2a0b; border-color: #8a5a00; color: #f5c46b; }
:root[data-tema='escuro'] .etqp-q.sel, :root[data-tema='escuro'] .etqp-leg i.sel { background: var(--navy-light); color: #fff; }
:root[data-tema='escuro'] .etqp-vai.on { background: #17324f; }
:root[data-tema='escuro'] .etqp-faltam-g, :root[data-tema='escuro'] .etqp-g-acoes button.forte { background: #3b2a0b; border-color: #8a5a00; color: #f5c46b; }
/* v10.10.6 — arrastar para escolher; nome do produto troca a prévia */
.etqp-g-nums { user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.etqp-g-tit, .etqp-prod[data-ver-produto] { cursor: pointer; border-radius: 6px; }
.etqp-g-tit:hover b, .etqp-prod[data-ver-produto]:hover .etqp-cod { color: var(--navy-light); text-decoration: underline; }
.etqp-g-tit b::after, .etqp-prod[data-ver-produto] .etqp-cod::after { content: ' 👁'; font-size: 11px; opacity: .45; }
.etqp-g.ativo { border-color: var(--navy-light); box-shadow: inset 3px 0 0 var(--navy-light); }
.etqp-linha.ativo:not(.conferir) { border-color: var(--navy-light); box-shadow: inset 4px 0 0 var(--navy-light); }
@media (max-width: 900px) {
  .etqp-corpo { grid-template-columns: minmax(0, 1fr); }
  .etqp-g-st { white-space: normal; }
  .etqp-g-tit { flex-basis: 100%; }
}

/* v10.10.7 — arrastar documentos para o pedido */
.doc-zona { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-top: 8px; padding: 12px 14px; border: 2px dashed #9db4d3; border-radius: 12px; background: #f5f9ff; transition: background .15s, border-color .15s; }
.doc-zona-ico { font-size: 26px; line-height: 1; }
.doc-zona-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.doc-zona-txt b { font-size: 13.5px; color: var(--navy); }
.doc-zona-txt span { font-size: 11.5px; color: var(--text-muted); }
.doc-zona-btn { width: auto !important; white-space: nowrap; }
.doc-zona-status { flex-basis: 100%; font-size: 12px; font-weight: 700; color: var(--navy-light); }
.doc-zona-status:empty { display: none; }
.doc-zona.doc-zona-linha { padding: 8px 10px; margin-top: 4px; }
.doc-zona.arrastando { border-color: var(--navy-light); border-style: solid; background: #e3eeff; box-shadow: 0 0 0 4px rgba(31, 111, 224, .15); }
.doc-zona.arrastando .doc-zona-txt b { font-size: 0; }
.doc-zona.arrastando .doc-zona-txt b::after { content: 'Solte aqui para anexar ao pedido'; font-size: 14px; color: var(--navy-light); }
.doc-zona.enviando { opacity: .75; pointer-events: none; }
body.soltando-arquivo #modalBody { outline: 3px dashed rgba(31, 111, 224, .35); outline-offset: -6px; }
:root[data-tema='escuro'] .doc-zona { background: #13233a; border-color: #36527a; }
:root[data-tema='escuro'] .doc-zona.arrastando { background: #17324f; border-color: var(--navy-light); }
:root[data-tema='escuro'] .doc-zona-txt b { color: #cfe0ff; }

/* v10.10.8 — regras da senha ao vivo no cadastro de usuário */
.senha-ajuda { font-size: 12.5px; }
.senha-ajuda > label { font-size: 12px; color: var(--text-muted); }
.senha-regras { list-style: none; margin: 2px 0 6px; padding: 0; display: grid; gap: 2px; }
.senha-regras li { color: var(--text-muted); }
.senha-regras li.ok { color: #1a7f37; font-weight: 600; }
.senha-regras li.falta { color: #c53030; font-weight: 600; }
.senha-ajuda.opcional .senha-regras li { opacity: .6; }
.senha-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.senha-acoes .btn { width: auto; }
.senha-dica { margin-top: 6px; background: #e8f7ee; border: 1px solid #b7e2c5; color: #14532d; border-radius: 8px; padding: 6px 9px; font-size: 12.5px; overflow-wrap: anywhere; }
.senha-erro { background: #fde8e8; border: 1px solid #f5b5b5; color: #9b1c1c; border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 600; }
:root[data-tema='escuro'] .senha-dica { background: #12301f; border-color: #2f7a4d; color: #9ce3b8; }
:root[data-tema='escuro'] .senha-erro { background: #3a1616; border-color: #7a2f2f; color: #ffb4b4; }
:root[data-tema='escuro'] .senha-regras li.ok { color: #6fdc98; }
:root[data-tema='escuro'] .senha-regras li.falta { color: #ff8a8a; }

/* v10.10.10 — imprimir as notas dos pedidos marcados */
.nfi-ops { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
.nfi-op { border: 1.5px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 13px; cursor: pointer; }
.nfi-op.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.nfi-ok { background: #e8f7ee; border: 1px solid #b7e2c5; color: #14532d; border-radius: 10px; padding: 10px 12px; font-size: 14.5px; margin-bottom: 10px; }
.nfi-nada { background: var(--bg); border: 1px dashed var(--border); border-radius: 10px; padding: 12px; text-align: center; color: var(--text-muted); margin-bottom: 10px; }
.nfi-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.nfi-acoes .btn { width: auto; }
.nfi-avisos { background: #fff7ed; border: 1px solid #f5c38a; border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.nfi-avisos ul { margin: 4px 0 4px 18px; padding: 0; }
.nfi-mudo { color: var(--text-muted); font-size: 12px; }
.nfi-lista { margin-top: 10px; font-size: 13px; }
.nfi-lista summary { cursor: pointer; font-weight: 700; }
:root[data-tema='escuro'] .nfi-ok { background: #12301f; border-color: #2f7a4d; color: #9ce3b8; }
:root[data-tema='escuro'] .nfi-avisos { background: #3b2a0b; border-color: #8a5a00; }

/* v10.10.11 — foto trocada pelo conferente (todos ficam sabendo) */
.chip-troca { display: inline-block; font-size: 11px; font-weight: 800; background: #fff4e0; color: #8a4b00; border: 1px solid #f2cf96; border-radius: 999px; padding: 0 6px; white-space: nowrap; cursor: help; margin-left: 2px; }
.chip-troca.pin { background: #ffe9d1; border-color: #eab676; }
.aviso-qr.troca { border-color: #c2410c; }
.aviso-qr.troca .aviso-qr-tit { color: #9a3412; }
:root[data-tema='escuro'] .aviso-qr.troca .aviso-qr-tit { color: #ffb37a; }
.troca-foto-aviso { margin: -2px 0 14px; padding: 10px 14px; border-radius: 10px; border: 1px solid #f2cf96; border-left: 6px solid #d97706; background: #fffaf0; font-size: 13.5px; }
.troca-foto-tit { font-weight: 900; font-size: 15px; color: #8a4b00; margin-bottom: 4px; }
.troca-foto-aviso ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.troca-foto-aviso li { border-top: 1px dashed #f2cf96; padding-top: 7px; }
.troca-foto-aviso li:first-child { border-top: 0; padding-top: 0; }
.troca-foto-motivo { font-weight: 700; color: #7a3e00; margin-top: 2px; }
.troca-foto-par { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.troca-foto-par a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--text-muted); text-decoration: none; }
.troca-foto-par img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 2px solid #1a7f37; }
.troca-foto-par a:first-child img { border-color: #b8b8b8; filter: grayscale(.5); opacity: .8; }
.troca-foto-seta { font-size: 18px; color: #d97706; }
.troca-foto-obs { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.troca-foto-selo { position: absolute; top: -6px; left: -6px; z-index: 1; width: 20px; height: 20px; border-radius: 50%; background: #d97706; color: #fff; font-size: 11px; line-height: 20px; text-align: center; font-style: normal; cursor: help; }
.troca-foto-gal { font-size: 10.5px; margin-top: 3px; background: #fff4e0; color: #7a3e00; border-radius: 6px; padding: 3px 5px; line-height: 1.3; }
.troca-foto-gal.antiga { background: #f1f1f1; color: #555; }
/* conferente: miniatura com o "Trocar" e a janela da troca */
.ft-lista { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.ft-foto { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; vertical-align: top; }
.ft-foto > img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 2px solid #1a7f37; cursor: pointer; display: block; }
.ft-foto.trocada > img { border-color: #d97706; }
.ft-selo { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: #d97706; color: #fff; font-size: 11px; line-height: 20px; text-align: center; font-style: normal; }
.ft-btn { -webkit-tap-highlight-color: transparent; font: inherit; font-size: 11.5px; font-weight: 800; padding: 4px 8px; min-height: 28px; border-radius: 999px; border: 1.5px solid #d97706; background: #fff7ed; color: #8a4b00; cursor: pointer; white-space: nowrap; }
.ft-btn.pin { border-color: #7a5af8; background: #f3f0ff; color: #4b2fb0; }
.ft-dica-pin { font-size: 11.5px; color: var(--text-muted); margin: -2px 0 6px; }
.ft-linha { color: #8a4b00; font-weight: 700; }
.ft-aviso { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; border: 2px solid #f2b56b; background: #fff7ed; color: #5c3200; font-size: 14px; }
.ft-aviso-tit { font-weight: 900; font-size: 15.5px; color: #8a4b00; margin-bottom: 4px; }
.ft-aviso-linha { padding: 5px 0; border-top: 1px dashed #f2cf96; }
.ft-aviso-linha:first-of-type { border-top: 0; }
.ft-aviso-motivo { font-weight: 800; margin-top: 2px; }
.ft-aviso-mais { font-size: 12px; opacity: .8; margin-top: 4px; }
.ft-fundo { position: fixed; inset: 0; z-index: 5300; background: rgba(5, 11, 20, .72); display: flex; align-items: center; justify-content: center; padding: 12px; overflow-y: auto; }
.ft-caixa { width: 100%; max-width: 460px; max-height: calc(100vh / var(--z, 1) - 24px); overflow-y: auto; background: var(--card); color: var(--text); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ft-tit { font-weight: 900; font-size: 18px; color: #8a4b00; }
.ft-tit span { font-size: 14px; font-weight: 700; color: var(--text-muted); }
.ft-pin-aviso { background: #f3f0ff; border: 1px solid #cfc3ff; color: #3b2391; border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.ft-fotos { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ft-fotos figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ft-fotos img, .ft-nova-img { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; border: 2px solid var(--border); }
.ft-fotos figure:first-child img { filter: grayscale(.4); }
.ft-nova-img { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13px; color: var(--text-muted); border-style: dashed; background: var(--bg); }
img.ft-nova-img { border: 3px solid #1a7f37; border-style: solid; }
.ft-fotos figcaption { font-size: 12px; font-weight: 800; text-align: center; }
.ft-fotos figcaption small { display: block; font-weight: 400; color: var(--text-muted); }
.ft-seta { font-size: 22px; color: #d97706; }
.ft-botoes-foto { display: flex; gap: 8px; }
.ft-botoes-foto .btn { flex: 1; text-align: center; }
.ft-lbl { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; }
.ft-motivos { display: flex; flex-wrap: wrap; gap: 6px; }
.ft-motivo { -webkit-tap-highlight-color: transparent; font: inherit; font-size: 13px; font-weight: 700; padding: 7px 11px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; }
.ft-motivo.on { background: #d97706; border-color: #d97706; color: #fff; }
.ft-caixa input[name=motivo], .ft-caixa input[name=pin] { padding: 11px 12px; border-radius: 9px; border: 1.5px solid var(--border); font-size: 16px; width: 100%; box-sizing: border-box; }
.ft-todos { font-size: 12px; color: var(--text-muted); background: var(--bg); border-radius: 8px; padding: 7px 9px; }
.ft-erro { background: #fde8e8; border: 1px solid #f5b5b5; color: #9b1c1c; border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 700; }
.ft-acoes { display: flex; gap: 8px; }
.ft-acoes .btn { flex: 1; }
:root[data-tema='escuro'] .troca-foto-aviso, :root[data-tema='escuro'] .ft-aviso { background: #2a2110; border-color: #6b4a14; color: #f5deb3; }
:root[data-tema='escuro'] .troca-foto-tit, :root[data-tema='escuro'] .ft-aviso-tit, :root[data-tema='escuro'] .troca-foto-motivo, :root[data-tema='escuro'] .ft-linha { color: #ffc27a; }
:root[data-tema='escuro'] .chip-troca, :root[data-tema='escuro'] .troca-foto-gal, :root[data-tema='escuro'] .ft-btn { background: #3b2a0b; color: #ffc27a; border-color: #8a5a00; }
:root[data-tema='escuro'] .ft-btn.pin, :root[data-tema='escuro'] .ft-pin-aviso { background: #221a44; color: #c9bcff; border-color: #4b3a99; }
:root[data-tema='escuro'] .troca-foto-gal.antiga { background: #262a31; color: #b8c0cc; }
:root[data-tema='escuro'] .ft-erro { background: #3a1616; border-color: #7a2f2f; color: #ffb4b4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .troca-foto-aviso, :root:not([data-tema='claro']) .ft-aviso { background: #2a2110; border-color: #6b4a14; color: #f5deb3; }
  :root:not([data-tema='claro']) .troca-foto-tit, :root:not([data-tema='claro']) .ft-aviso-tit, :root:not([data-tema='claro']) .troca-foto-motivo, :root:not([data-tema='claro']) .ft-linha { color: #ffc27a; }
  :root:not([data-tema='claro']) .chip-troca, :root:not([data-tema='claro']) .troca-foto-gal, :root:not([data-tema='claro']) .ft-btn { background: #3b2a0b; color: #ffc27a; border-color: #8a5a00; }
  :root:not([data-tema='claro']) .ft-btn.pin, :root:not([data-tema='claro']) .ft-pin-aviso { background: #221a44; color: #c9bcff; border-color: #4b3a99; }
  :root:not([data-tema='claro']) .troca-foto-gal.antiga { background: #262a31; color: #b8c0cc; }
  :root:not([data-tema='claro']) .ft-erro { background: #3a1616; border-color: #7a2f2f; color: #ffb4b4; }
}

/* v10.10.12 — galeria do pedido: postar e remover foto pelo painel */
.galp { position: relative; }
.galp.arrastando::after { content: '📷 Solte as fotos para postar no pedido'; position: absolute; inset: -8px; border: 3px dashed #1f6fe0; border-radius: 14px; background: rgba(31, 111, 224, .08); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px; color: #1447a6; pointer-events: none; z-index: 5; }
.galp-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: #f5f9ff; border: 1px dashed #9bbcf0; border-radius: 10px; padding: 10px 12px; margin: 6px 0 4px; font-size: 13px; }
.galp-add-tit { font-weight: 900; color: #12408f; }
.galp-add-onde { display: flex; align-items: center; gap: 6px; font-weight: 700; margin: 0; }
.galp-add-onde select { width: auto; max-width: 360px; font-size: 13px; padding: 5px 8px; }
.galp-add-btn { width: auto; margin: 0; cursor: pointer; }
.galp-add-dica { font-size: 11.5px; color: var(--text-muted); flex-basis: 100%; }
.galp-status { font-size: 12.5px; font-weight: 700; color: #1447a6; flex-basis: 100%; }
.galp-status:empty { display: none; }
.galp-status.erro { color: #b42318; }
.galp-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.galp-foto { border: 1px solid var(--border); border-radius: 10px; padding: 6px; text-align: center; display: flex; flex-direction: column; }
.galp-foto img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; display: block; }
.galp-foto.removida img { filter: grayscale(.6); opacity: .75; }
.galp-rot { font-size: 11.5px; font-weight: 700; margin-top: 4px; overflow-wrap: anywhere; }
.galp-info { font-size: 10.5px; color: var(--text-muted); }
.galp-acoes { display: flex; flex-wrap: wrap; gap: 2px 4px; justify-content: center; margin-top: auto; padding-top: 3px; }
.galp-acoes .btn { width: auto; font-size: 10.5px; padding: 2px 6px; margin: 0; }
.galp-remover { color: #b42318 !important; }
.galp-voltar { color: #1a7f37 !important; font-weight: 800; }
:root[data-tema='escuro'] .galp-add { background: #13233d; border-color: #2d4d80; }
:root[data-tema='escuro'] .galp-add-tit, :root[data-tema='escuro'] .galp-status { color: #9cc3ff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .galp-add { background: #13233d; border-color: #2d4d80; }
  :root:not([data-tema='claro']) .galp-add-tit, :root:not([data-tema='claro']) .galp-status { color: #9cc3ff; }
}

/* v10.10.13 — canhoto e protocolo no celular do conferente (trocar com PIN) */
.ft-comp { margin: 0; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.ft-comp figcaption { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
/* v10.10.13 — quem fez o quê no pedido (painel e celular do conferente) */
.quem-fez { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); border-left: 5px solid #475569; background: var(--bg); font-size: 13px; line-height: 1.45; }
.quem-fez-tit { font-weight: 900; font-size: 13.5px; margin-bottom: 2px; }
.ft-quem { display: block; font-size: 10.5px; line-height: 1.25; color: var(--text-muted); text-align: center; max-width: 84px; overflow-wrap: anywhere; }
.quem-foto { display: block; font-size: 10px; line-height: 1.25; color: var(--text-muted); margin-top: 2px; overflow-wrap: anywhere; }
/* v10.10.13 — usuários da área do cliente (painel do armazém): cartões com as ações à vista */
.acu-lista { display: flex; flex-direction: column; gap: 8px; }
.acu-card { border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; background: var(--card); }
.acu-card.bloq { background: var(--bg); opacity: .85; }
.acu-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14.5px; }
.acu-selo { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 8px; background: #eef2f7; color: #46536b; }
.acu-selo.admin { background: #f3ecff; color: #6a2fa8; }
.acu-selo.ok { background: #e3f6ea; color: #11642b; }
.acu-selo.bloq { background: #fde2e2; color: #a61b1b; }
.acu-info { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.acu-func { font-size: 12px; margin-top: 3px; overflow-wrap: anywhere; }
.acu-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.acu-acoes .btn { width: auto; margin: 0; }
.acu-excluir { color: #b42318 !important; }
.acu-editor { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 8px; }
.acu-form .form-grid { margin-bottom: 4px; }
.acu-form-erro { background: #fde8e8; border: 1px solid #f5b5b5; color: #9b1c1c; border-radius: 8px; padding: 6px 9px; font-size: 12.5px; font-weight: 700; margin: 4px 0; }
.acu-form-acoes { display: flex; justify-content: flex-end; gap: 6px; }
.acu-form-acoes .btn { width: auto; }
.acu-excluidos { margin-top: 10px; font-size: 13px; }
.acu-excluidos summary { cursor: pointer; font-weight: 700; color: var(--text-muted); }
.acu-exc-linha { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.acu-exc-linha .btn { width: auto; }
:root[data-tema='escuro'] .acu-selo { background: #243044; color: #c9d4e5; }
:root[data-tema='escuro'] .acu-selo.admin { background: #2d1f4a; color: #cfb6ff; }
:root[data-tema='escuro'] .acu-selo.ok { background: #12301f; color: #9ce3b8; }
:root[data-tema='escuro'] .acu-selo.bloq { background: #3a1616; color: #ffb4b4; }
:root[data-tema='escuro'] .acu-form-erro { background: #3a1616; border-color: #7a2f2f; color: #ffb4b4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .acu-selo { background: #243044; color: #c9d4e5; }
  :root:not([data-tema='claro']) .acu-selo.admin { background: #2d1f4a; color: #cfb6ff; }
  :root:not([data-tema='claro']) .acu-selo.ok { background: #12301f; color: #9ce3b8; }
  :root:not([data-tema='claro']) .acu-selo.bloq { background: #3a1616; color: #ffb4b4; }
  :root:not([data-tema='claro']) .acu-form-erro { background: #3a1616; border-color: #7a2f2f; color: #ffb4b4; }
}

/* v10.10.14 — ETIQUETAS AVULSAS: tela inicial com os modelos prontos */
.etqh-topo { padding: 14px 16px; margin-bottom: 12px; }
.etqh-passos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.etqh-passos span { font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); }
.etqh-passos span.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.etqh-filtros { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.etqh-filtros input[type=search] { flex: 1 1 280px; max-width: 420px; }
.etqh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.etqh-chips button { font: inherit; font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; }
.etqh-chips button.on { background: #1f6fe0; border-color: #1f6fe0; color: #fff; }
.etqh-secao { margin: 0 0 16px; }
.etqh-secao > h3 { margin: 0 0 8px; font-size: 16px; }
.etqh-secao > h3 small { font-weight: 500; font-size: 12px; color: var(--text-muted); margin-left: 6px; }
.etqh-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.etqh-card { border: 1px solid var(--border); border-radius: 12px; background: var(--card); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.etqh-card:hover { box-shadow: 0 8px 22px rgba(15, 35, 70, .14); transform: translateY(-1px); }
.etqh-card.meu { border-color: #f0d267; }
.etqh-mini { border: 0; background: #e9edf3; padding: 12px; display: flex; justify-content: center; align-items: center; min-height: 150px; cursor: pointer; }
.etqh-mini canvas { max-width: 100%; height: auto; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.18); border-radius: 3px; }
.etqh-info { padding: 10px 12px 6px; flex: 1; }
.etqh-info b { font-size: 14.5px; }
.etqh-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.etqh-tags span { font-size: 11px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; color: var(--text-muted); }
.etqh-tags span.padrao { background: #fff7d6; border-color: #f0d267; color: #7a5b00; }
.etqh-desc { font-size: 12px; color: var(--text-muted); margin-top: 6px; line-height: 1.35; }
.etqh-acoes { display: flex; gap: 6px; padding: 6px 12px 12px; flex-wrap: wrap; }
.etqh-acoes .btn { width: auto; margin: 0; }
.etqh-excluir { color: #c53030 !important; }
.etqh-vazio { font-size: 13px; color: var(--text-muted); background: var(--card); border: 1px dashed var(--border); border-radius: 10px; padding: 14px; }
.etqh-novo { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; padding: 12px 14px; margin: 0; }
.etqh-novo label { font-size: 12px; }
.etqh-novo .btn { width: auto; }
.etqm-padroes summary { cursor: pointer; font-size: 13.5px; }

/* v10.10.14 — IMPRIMIR: ① dados ② quantas ③ quais · prévia */
.etq2-topo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 14px; margin-bottom: 10px; }
.etq2-topo .btn { width: auto; margin: 0; }
.etq2-nome { display: flex; flex-direction: column; }
.etq2-nome b { font-size: 16px; }
.etq2-nome span { font-size: 12px; color: var(--text-muted); }
.etq2-alt { color: #b45309; }
.etq2-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.etq2-dir { position: sticky; top: 8px; }
.etq2-bloco { padding: 12px 14px; margin: 0 0 12px; }
.etq2-bloco h4 { margin: 0 0 10px; font-size: 13.5px; letter-spacing: .02em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.etq2-bloco h4 small { text-transform: none; font-weight: 500; letter-spacing: 0; color: var(--text-muted); font-size: 11.5px; }
.etq2-n { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; align-items: center; justify-content: center; font-size: 12px; }
.etq2-busca { position: relative; }
.etq2-busca input { width: 100%; box-sizing: border-box; font-size: 15px; padding: 11px 12px; border: 2px solid #1f6fe0; border-radius: 10px; }
.etq2-res { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.18); max-height: 340px; overflow: auto; }
.etq2-item { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; width: 100%; text-align: left; font: inherit; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); padding: 8px 12px; cursor: pointer; }
.etq2-item b { grid-row: span 2; font-size: 14px; align-self: center; min-width: 90px; }
.etq2-item span { font-size: 13px; }
.etq2-item small { font-size: 11.5px; color: var(--text-muted); }
.etq2-item em { grid-column: 2; font-style: normal; font-size: 11.5px; color: #1a7f37; font-weight: 700; }
.etq2-item.on, .etq2-item:hover { background: #eef4ff; }
.etq2-nada { padding: 12px; font-size: 13px; color: var(--text-muted); }
.etq2-escolhido { margin-top: 8px; background: #e8f7ee; border: 1px solid #b7e2c5; border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.etq2-esc-tit { font-weight: 800; color: #14532d; }
.etq2-esc-tit span { font-weight: 500; color: var(--text); }
.etq2-lotes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; align-items: center; }
.etq2-lotes > span { font-size: 11.5px; color: var(--text-muted); width: 100%; }
.etq2-lotes button { font: inherit; font-size: 12px; border: 1.5px solid #b7e2c5; background: #fff; color: #14532d; border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.etq2-lotes button.on { background: #1a7f37; border-color: #1a7f37; color: #fff; }
.etq2-link { font: inherit; background: none; border: 0; color: #1f6fe0; text-decoration: underline; cursor: pointer; padding: 0; font-size: 12.5px; }
.etq2-dica { font-size: 12px; color: var(--text-muted); margin: 6px 0; }
.etq2-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 10px; margin-top: 8px; }
.etq2-campo { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; color: var(--text-muted); margin: 0; }
.etq2-campo.largo { grid-column: 1 / -1; }
.etq2-campo input { font-size: 14px; font-weight: 600; padding: 7px 9px; }
.etq2-campo input:focus { border-color: #1f6fe0; box-shadow: 0 0 0 3px rgba(31,111,224,.15); }
.etq2-outros { margin-top: 10px; font-size: 12.5px; }
.etq2-outros summary { cursor: pointer; color: var(--text-muted); font-weight: 700; }
.etq2-qtd { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.etq2-step { display: inline-flex; border-radius: 10px; overflow: hidden; border: 2px solid var(--navy); }
.etq2-step button { font: inherit; font-size: 22px; font-weight: 900; width: 44px; border: 0; background: var(--navy); color: #fff; cursor: pointer; }
.etq2-step input { width: 84px; border: 0; border-radius: 0; text-align: center; font-size: 22px; font-weight: 900; padding: 6px; }
.etq2-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.etq2-chips button { font: inherit; font-size: 12.5px; font-weight: 800; border: 1.5px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.etq2-linha2 { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 10px; font-size: 12.5px; }
.etq2-linha2 label { display: flex; align-items: center; gap: 6px; font-weight: 700; margin: 0; }
.etq2-linha2 input { width: 64px; padding: 5px 7px; }
.etq2-num { color: var(--text-muted); }
.etq2-quais-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; font-size: 12.5px; }
.etq2-quais-bar button { font: inherit; font-size: 12.5px; font-weight: 700; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); border-radius: 999px; padding: 3px 11px; cursor: pointer; }
.etq2-quais-bar label { display: flex; align-items: center; gap: 4px; margin: 0; }
.etq2-quais-bar input { width: 64px; padding: 3px 6px; }
.etq2-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 5px; user-select: none; -webkit-user-select: none; touch-action: none; max-height: 290px; overflow: auto; }
.etq2-q { font: inherit; font-weight: 800; font-size: 13px; border: 1.5px solid var(--border); background: var(--card); color: var(--text); border-radius: 8px; padding: 7px 0; cursor: pointer; }
.etq2-q.sel { background: var(--navy); border-color: var(--navy); color: #fff; }
.etq2-q.ver { outline: 3px solid #f59e0b; outline-offset: -1px; }
.etq2-previa { padding: 12px 14px; margin: 0; }
.etq2-previa-cab { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 13px; margin-bottom: 8px; }
.etq2-previa-cab span { color: var(--text-muted); text-align: right; }
.etq2-palco { position: relative; background: #e5e7eb; border-radius: 10px; padding: 14px; display: flex; justify-content: center; }
.etq2-palco canvas { background: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.25); max-width: 100%; height: auto; display: block; }
.etq2-pop { position: absolute; z-index: 20; width: 260px; background: var(--card); color: var(--text); border: 2px solid #1f6fe0; border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,.25); padding: 8px 10px; }
.etq2-pop-tit { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 13px; margin-bottom: 6px; }
.etq2-pop-tit button { font: inherit; border: 0; background: none; cursor: pointer; color: var(--text-muted); }
.etq2-pop label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--text-muted); margin: 0 0 6px; }
.etq2-pop input { font-size: 14px; padding: 7px 8px; }
.etq2-pop-dica { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.etq2-pop-acoes { display: flex; justify-content: space-between; gap: 6px; }
.etq2-pop-acoes .btn { width: auto; margin: 0; }
.etq2-nav { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; }
.etq2-nav button { font: inherit; border: 1.5px solid var(--border); background: var(--card); color: var(--text); border-radius: 8px; padding: 2px 10px; cursor: pointer; }
.etq2-nav input { width: 64px; text-align: center; padding: 3px; }
.etq2-vai { margin: 8px 0; border: 2px solid var(--navy); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; background: var(--bg); }
.etq2-zebra { width: 100%; font-size: 17px; font-weight: 900; padding: 13px; margin: 0; }
.etq2-saidas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.etq2-saidas .btn { width: 100%; margin: 0; font-weight: 800; }
.etq2-ajuda { margin-top: 10px; font-size: 12.5px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.etq2-ajuda summary { cursor: pointer; font-weight: 800; }
.etq2-ajuda ol { margin: 6px 0 6px 18px; padding: 0; }
@media (max-width: 1100px) { .etq2-cols { grid-template-columns: 1fr; } .etq2-dir { position: static; } }

/* v10.10.14 — EDITAR O LAYOUT */
.etql-topo { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 10px 14px; margin-bottom: 10px; }
.etql-topo label { font-size: 12px; margin: 0; }
.etql-topo .btn { width: auto; margin: 0; }
.etql-chk { display: flex !important; align-items: center; gap: 5px; font-size: 12.5px; margin: 0; }
.etql-chk input { width: auto; }
.etql-props label.etql-chk { flex-direction: row; font-weight: 600; }
.etql-cols { display: grid; grid-template-columns: 170px minmax(0, 1fr) 300px; gap: 10px; align-items: start; }
.etql-add { padding: 10px; margin: 0; display: flex; flex-direction: column; gap: 5px; position: sticky; top: 8px; }
.etql-add > b { font-size: 12.5px; text-transform: uppercase; color: var(--text-muted); }
.etql-add button[data-add] { display: flex; gap: 8px; align-items: center; text-align: left; font: inherit; font-size: 13px; font-weight: 700; border: 1.5px solid var(--border); background: var(--card); color: var(--text); border-radius: 9px; padding: 6px 8px; cursor: pointer; }
.etql-add button[data-add]:hover { border-color: #1f6fe0; background: #eef4ff; }
.etql-add button i { font-style: normal; width: 24px; text-align: center; font-size: 15px; }
.etql-add button small { display: block; font-weight: 500; font-size: 10.5px; color: var(--text-muted); }
.etql-fontes { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-muted); margin-top: 6px; flex-wrap: wrap; }
.etql-fontes button { font: inherit; font-weight: 900; border: 1.5px solid var(--border); background: var(--card); color: var(--text); border-radius: 7px; padding: 2px 8px; cursor: pointer; }
.etql-fontes input[type=range] { width: 100%; }
.etql-palco-card { padding: 10px; margin: 0; }
.etql-dica { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; line-height: 1.4; }
.etql-palco { position: relative; overflow: auto; background: #e5e7eb; padding: 14px; border-radius: 8px; max-height: 70vh; }
.etql-palco canvas { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); cursor: move; outline: none; display: block; }
.etql-inline { position: absolute; z-index: 10; font-weight: 800; border: 2px solid #1f6fe0 !important; background: #fff !important; color: #000 !important; padding: 2px 4px; border-radius: 4px; box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.etql-camadas { margin-top: 10px; font-size: 12px; }
.etql-camadas > div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.etql-camadas button { font: inherit; font-size: 12px; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px; padding: 3px 9px; cursor: pointer; }
.etql-camadas button.on { background: #1f6fe0; border-color: #1f6fe0; color: #fff; }
.etql-props { padding: 12px; margin: 0; position: sticky; top: 8px; font-size: 12.5px; }
.etql-props h3 { font-size: 14px; margin: 0 0 8px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.etql-props h3 .btn { width: auto; margin: 0; }
.etql-props label { display: flex; flex-direction: column; gap: 3px; font-weight: 700; margin: 0 0 8px; }
.etql-props label small { font-weight: 500; color: var(--text-muted); }
.etql-props input, .etql-props select, .etql-props textarea { width: 100%; box-sizing: border-box; }
.etql-inserir { margin-top: 4px; font-size: 12px; color: #1f6fe0; font-weight: 700; }
.etql-tam { margin: 4px 0 8px; }
.etql-tam-linha { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.etql-tam-linha button { font: inherit; font-weight: 900; font-size: 16px; width: 36px; height: 34px; border: 1.5px solid var(--border); background: var(--card); color: var(--text); border-radius: 8px; cursor: pointer; }
.etql-tam-linha input { width: 76px !important; text-align: center; font-weight: 800; font-size: 15px; }
.etql-tam-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.etql-tam-chips button, .etql-alinha button { font: inherit; font-size: 12px; font-weight: 700; border: 1.5px solid var(--border); background: var(--card); color: var(--text); border-radius: 7px; padding: 3px 8px; cursor: pointer; }
.etql-tam-chips button.on, .etql-alinha button.on { background: #1f6fe0; border-color: #1f6fe0; color: #fff; }
.etql-linha { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; }
.etql-alinha { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.etql-pos { margin: 6px 0; }
.etql-pos summary { cursor: pointer; font-weight: 700; color: var(--text-muted); }
.etql-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.etql-acoes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.etql-acoes .btn { width: auto; margin: 0; }
.etql-excluir { color: #c53030 !important; }
.etql-vazio { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
@media (max-width: 1200px) { .etql-cols { grid-template-columns: 150px minmax(0, 1fr); } .etql-props { grid-column: 1 / -1; position: static; } }
@media (max-width: 760px) { .etql-cols { grid-template-columns: 1fr; } .etql-add { position: static; flex-direction: row; flex-wrap: wrap; } }
:root[data-tema='escuro'] .etq2-item.on, :root[data-tema='escuro'] .etq2-item:hover, :root[data-tema='escuro'] .etql-add button[data-add]:hover { background: #1b2a44; }
:root[data-tema='escuro'] .etq2-escolhido { background: #12301f; border-color: #2f7a4d; }
:root[data-tema='escuro'] .etq2-esc-tit { color: #9ce3b8; }
:root[data-tema='escuro'] .etq2-lotes button { background: #0f2419; color: #9ce3b8; border-color: #2f7a4d; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .etq2-item.on, :root:not([data-tema='claro']) .etq2-item:hover, :root:not([data-tema='claro']) .etql-add button[data-add]:hover { background: #1b2a44; }
  :root:not([data-tema='claro']) .etq2-escolhido { background: #12301f; border-color: #2f7a4d; }
  :root:not([data-tema='claro']) .etq2-esc-tit { color: #9ce3b8; }
  :root:not([data-tema='claro']) .etq2-lotes button { background: #0f2419; color: #9ce3b8; border-color: #2f7a4d; }
}
/* v10.10.14 — 📐 tamanho da etiqueta (10 × 5 cm até A4 deitada) */
.etq2-tam { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--text); background: #eef4ff; border: 1px solid #c7dafc; border-radius: 10px; padding: 5px 8px 5px 10px; margin: 0; }
.etq2-tam select { font-size: 13.5px; font-weight: 600; padding: 6px 8px; border: 1px solid #9dbcf2; border-radius: 8px; background: #fff; color: var(--text); max-width: 290px; }
.etq2-tam-outro { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.etq2-tam-outro[hidden] { display: none; }
.etq2-tam-outro input { width: 70px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; }
.etq2-aviso-tam { margin: 10px 0 8px; background: #fff7e6; border: 1px solid #f3d38a; color: #7a4a00; border-radius: 10px; padding: 9px 12px; font-size: 13px; line-height: 1.4; }
@media (max-width: 900px) { .etq2-tam { flex-wrap: wrap; } .etq2-tam select { min-width: 0; width: 100%; } }

/* v10.10.15 — Páginas do QR (entrada na tela de etiquetas) */
.etqh-qr { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 0 0 14px; background: linear-gradient(90deg, #eef4ff, #f7fbff); border: 1px solid #c7dafc; }
.etqh-qr-ic { font-size: 30px; }
.etqh-qr-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.etqh-qr-txt b { font-size: 15px; }
.etqh-qr-txt span { font-size: 13px; color: var(--text-muted); }
.etqh-qr .btn { width: auto; margin: 0; white-space: nowrap; }
.etq2-qrlink { margin-top: 6px; font-size: 12.5px; color: #0f5132; }
.etq2-qrlink a { font-weight: 700; }

/* v10.10.15 — Etiquetagem do recebimento */
.etg-un { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.etg-un select { width: auto; padding: 5px 8px; }
.etg-tab-wrap { overflow-x: auto; }
.etg-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.etg-tab th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--text-muted); padding: 6px; border-bottom: 1px solid var(--border); }
.etg-tab td { padding: 7px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.etg-tab .n { text-align: right; white-space: nowrap; }
.etg-tab td small { display: block; font-size: 12px; color: var(--text-muted); max-width: 260px; }
.etg-tab td small.etg-conf { color: #b45309; font-weight: 700; }
.etg-tab td small.etg-ok { color: #1a7f37; }
.etg-tab input { width: 100%; box-sizing: border-box; padding: 5px 6px; font-size: 12.5px; margin: 0 0 4px; }
.etg-tab td.n input { width: 64px; text-align: right; }
.etg-step { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.etg-step button { border: 0; background: var(--bg); width: 26px; height: 30px; cursor: pointer; font-weight: 800; }
.etg-tab td.n .etg-step input { width: 48px; border: 0; margin: 0; text-align: center; font-weight: 800; font-size: 14px; }
.etg-total { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; }
.etg-total .btn { width: auto; margin: 0 0 0 auto; }
.etg-salvo { color: #1a7f37; font-weight: 700; font-size: 12.5px; }
.etg-mod { display: flex; gap: 10px; flex-wrap: wrap; }
.etg-mod label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; flex: 1 1 220px; }
.etg-g { margin-bottom: 10px; }
.etg-g-tit { font-size: 12.5px; margin-bottom: 5px; }
.etg-g-tit span { color: var(--text-muted); }
.etq2-q.etg-f::after { content: '📷'; font-size: 9px; margin-left: 1px; }
.etg .etq2-q.ver { outline: 2px solid #1f6fe0; outline-offset: 1px; }
.etg-leg { display: inline-block; border-radius: 6px; padding: 0 6px; font-weight: 700; }
.etg-leg.ok { background: #e7f6ec; color: #1a7f37; }
.etg-leg.foto { background: #eef1f5; }
.etg-prog { padding: 12px 14px; margin: 12px 0 0; }
.etg-prog h4 { margin: 0 0 8px; font-size: 13.5px; text-transform: uppercase; letter-spacing: .02em; }
.etg-prog-num { font-size: 14px; }
.etg-barra { height: 10px; border-radius: 999px; background: var(--bg); overflow: hidden; margin: 6px 0 10px; }
.etg-barra i { display: block; height: 100%; background: #1a7f37; }
.etg-fotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.etg-fotos a { text-decoration: none; color: inherit; font-size: 11.5px; }
.etg-fotos img { width: 100%; height: 76px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
.etg-fotos span { display: block; font-weight: 700; margin-top: 2px; }
.etg-fotos em { display: block; font-style: normal; color: var(--text-muted); font-size: 10.5px; }
.etg-como { display: flex; gap: 12px; align-items: flex-start; font-size: 12.5px; background: var(--bg); border-radius: 10px; padding: 10px; }
.etg-qr { width: 96px; height: 96px; image-rendering: pixelated; border-radius: 6px; background: #fff; flex: 0 0 96px; }
.etg-imp { margin-top: 8px; font-size: 12.5px; }
.etg-imp summary { cursor: pointer; font-weight: 700; }

/* v10.10.15 — Editor das páginas do QR */
.qre-abas { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.qre-abas button { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.qre-abas button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.qre-cols { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 14px; align-items: start; }
.qre-sec { padding: 12px 14px; margin: 0 0 12px; }
.qre-sec h4 { margin: 0 0 8px; font-size: 13.5px; text-transform: uppercase; letter-spacing: .02em; }
.qre-sec h4 small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-muted); font-size: 11.5px; }
.qre-leg { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.qre-blocos { list-style: none; margin: 0; padding: 0; }
.qre-b { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 1px solid var(--border); border-left: 5px solid #1a7f37; border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; background: var(--card); }
.qre-b.armazem { border-left-color: #1f6fe0; }
.qre-b.oculto { border-left-color: #9ca3af; opacity: .72; }
.qre-b.arrastando { opacity: .4; }
.qre-b.alvo { box-shadow: 0 -3px 0 #1f6fe0; }
.qre-arr { cursor: grab; color: var(--text-muted); font-weight: 900; letter-spacing: -2px; user-select: none; }
.qre-setas { display: flex; flex-direction: column; }
.qre-setas button { border: 0; background: transparent; cursor: pointer; font-size: 11px; line-height: 1.1; color: var(--text-muted); padding: 0 2px; }
.qre-setas button:disabled { opacity: .25; cursor: default; }
.qre-info b { font-size: 13.5px; }
.qre-info small { display: block; font-size: 11.5px; color: var(--text-muted); }
.qre-trava { font-size: 12px; }
.qre-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.qre-seg button { border: 0; border-right: 1px solid var(--border); background: var(--card); color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 700; padding: 6px 8px; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.qre-seg button:last-child { border-right: 0; }
.qre-seg button:disabled { opacity: .35; cursor: not-allowed; }
.qre-seg button.on.todos { background: #e7f6ec; color: #1a7f37; }
.qre-seg button.on.armazem { background: #e8f0fe; color: #1f4fbf; }
.qre-seg button.on.oculto { background: #eef1f5; color: #4b5563; }
.qre-cores { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 700; }
.qre-cores button { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--border); cursor: pointer; }
.qre-cores button.on { box-shadow: 0 0 0 3px #1f6fe0; }
.qre-campo { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 700; margin-bottom: 8px; }
.qre-campo small { font-weight: 500; color: var(--text-muted); }
.qre-campo textarea, .qre-campo input { font: inherit; font-size: 13.5px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
.qre-contato { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qre-dir { position: sticky; top: 8px; }
.qre-ver { display: flex; align-items: center; gap: 6px; justify-content: center; margin-bottom: 8px; font-size: 12.5px; font-weight: 700; }
.qre-ver button { border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.qre-ver button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.qre-cel { position: relative; width: 390px; height: 760px; margin: 0 auto; border-radius: 42px; background: #111; padding: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.qre-notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 120px; height: 22px; background: #111; border-radius: 0 0 14px 14px; z-index: 2; }
.qre-cel iframe { width: 100%; height: 100%; border: 0; border-radius: 30px; background: #fff; }
.qre-so-admin { font-size: 12.5px; color: var(--text-muted); font-weight: 700; }
@media (max-width: 1100px) { .qre-cols { grid-template-columns: 1fr; } .qre-contato { grid-template-columns: 1fr; } }
/* v12.32.0 (revisão) — no celular, o nome e a descrição do quadro ocupam a linha e os botões
 * Todos / Só o armazém / Oculto descem (antes a descrição ficava com 4 px, uma palavra por linha) */
@media (max-width: 600px) { .qre-b { grid-template-columns: auto auto minmax(0, 1fr); } .qre-b .qre-seg { grid-column: 1 / -1; justify-self: start; flex-wrap: wrap; } }

.etg-lv { display: flex; gap: 8px; margin-top: 6px; }
.etg-lv label { display: flex; flex-direction: column; font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; gap: 2px; }
.etg-lv label input { width: 112px; margin: 0; text-transform: none; font-weight: 600; color: var(--text); }
.etg-div { color: #b45309; font-size: inherit; }
.etg .etq2-q.saiu { background: #e7f6ec; color: #1a7f37; border-color: #b8e5c6; }
.qre-setas button { font-size: 14px !important; color: var(--text) !important; padding: 0 4px !important; }
.qre-setas button:hover:not(:disabled) { color: #1f6fe0 !important; }
.qre-cel { padding: 34px 12px 14px !important; }
.qre-notch { top: 12px !important; height: 12px !important; width: 90px !important; border-radius: 999px !important; background: #2a2a2a !important; }
.qre-todos { margin-top: 8px; }

.etg-tab td.n input[data-k="porPallet"] { width: 54px; }
.etg-step button { width: 22px; }
.etg-tab td.n .etg-step input { width: 48px; padding: 5px 2px; }

/* v10.10.16 — etiquetagem: recebido, quantidade e peso editáveis */
.etg-rec { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.etg-tab td.n .etg-rec input[data-k="quantidade"] { width: 70px; }
.etg-tab td.n .etg-rec input[data-k="unidade"] { width: 70px; text-transform: uppercase; }
.etg-lv { flex-wrap: wrap; }
.etg-lv label input[data-k="pesoKg"] { width: 100px; }
.etg-tab td small.etg-na { color: #1f4fbf; margin-top: 4px; }
.etg-tab input.etg-desc { font-weight: 700; width: 100%; }
.etg-linha-acoes button { border: 1px solid var(--border); background: var(--card); border-radius: 6px; cursor: pointer; padding: 3px 6px; margin: 0 0 4px 2px; font-size: 13px; }

.etg-linhas { display: flex; flex-direction: column; gap: 10px; }
.etg-linha { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--card); }
.etg-l1 { display: flex; align-items: center; gap: 8px; }
.etg-prod { flex: 1; font-size: 13.5px; }
.etg-l1 .etg-desc { flex: 1; font-weight: 700; padding: 6px 8px; }
.etg-linha-acoes { display: flex; gap: 4px; white-space: nowrap; }
.etg-linha-acoes button { margin: 0; }
.etg-campos { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 8px; align-items: flex-end; }
.etg-campos label { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
.etg-campos input { margin: 0; padding: 6px 7px; font-size: 13px; text-transform: none; font-weight: 600; color: var(--text); }
.etg-campos input[data-k="lote"] { width: 110px; }
.etg-campos input[data-k="validade"] { width: 132px; }
.etg-campos input[data-k="porPallet"], .etg-campos input[data-k="pesoKg"] { width: 96px; }
.etg-rec { display: flex; gap: 4px; }
.etg-rec input[data-k="quantidade"] { width: 84px; }
.etg-rec input[data-k="unidade"] { width: 58px; text-transform: uppercase !important; }
.etg-campos .etg-step input { width: 46px; border: 0; text-align: center; font-weight: 800; font-size: 14px; padding: 5px 2px; }
.etg-linha small { display: block; font-size: 12px; margin-top: 6px; }
.etg-linha small.etg-conf { color: #b45309; font-weight: 700; }
.etg-linha small.etg-ok { color: #1a7f37; }
.etg-linha small.etg-na { color: #1f4fbf; }
.etg-campos .etg-rec { display: flex; flex-direction: row; gap: 4px; }
.etg-campos .etg-rec input { flex: 0 0 auto; }
.etg-campos .etg-rec input[data-k="quantidade"] { width: 84px; }
.etg-campos .etg-rec input[data-k="unidade"] { width: 58px; }
.etg-campos .etg-step { display: inline-flex; }

/* v10.10.17 — o menu do botão direito do painel (protecao.js) */
.ctx-menu { position: fixed; z-index: 100000; min-width: 220px; max-width: 320px; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 38px rgba(13,43,82,.24); padding: 6px; font-size: 14px; user-select: none; }
.ctx-menu .ctx-tit { font-size: 11.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--text-muted); padding: 6px 10px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 9px 12px; font: inherit; color: inherit; cursor: pointer; }
.ctx-menu button:hover, .ctx-menu button:focus-visible { background: #eef6fd; outline: none; }
:root[data-tema='escuro'] .ctx-menu button:hover, :root[data-tema='escuro'] .ctx-menu button:focus-visible { background: #1f2d42; }
.ctx-menu .ctx-sep { height: 1px; background: var(--border); margin: 4px 6px; }

/* v10.10.17 — documentos do processo na capa do recebimento */
.docs-capa { padding: 10px 12px; margin: 0 0 12px; border-left: 5px solid #0f9d8a; }
.docs-capa-tit { font-weight: 800; }
.docs-capa-tit span { font-weight: 600; font-size: 12px; color: var(--text-muted); }
.docs-capa-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.docs-capa-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; background: var(--bg); }
.docs-capa-ico { font-size: 22px; line-height: 1; }
.docs-capa-info { flex: 1 1 260px; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.docs-capa-meta { font-size: 11.5px; color: var(--text-muted); }
.docs-capa-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.docs-capa-acoes .btn { width: auto; }
.docs-capa-conf { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; margin: 0; white-space: nowrap; cursor: pointer; }
.docs-capa-novo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
.docs-capa-novo select, .docs-capa-novo input[type="text"] { width: auto; min-width: 170px; }
.docs-capa-novo input[type="text"] { flex: 1 1 180px; }
.docs-capa-btn { width: auto; margin: 0; cursor: pointer; }
.docs-capa-btn.carregando { opacity: .6; pointer-events: none; }
.docs-conf { margin-top: 10px; border: 1px solid #b7e0d9; background: #f0fbf8; border-radius: 10px; padding: 8px 10px; }
.docs-conf-tit { font-weight: 800; font-size: 13.5px; margin-bottom: 6px; }
.docs-conf-item { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 0; border-top: 1px solid #d6efe9; font-size: 13px; }
.docs-conf-item:first-of-type { border-top: 0; }
.docs-conf-nome { flex: 1 1 calc(100% - 40px); min-width: 0; overflow-wrap: anywhere; }
.docs-conf-item .btn { flex: 1 1 120px; width: auto; }
:root[data-tema='escuro'] .docs-conf { background: #10261f; border-color: #1f4a40; }
:root[data-tema='escuro'] .docs-conf-item { border-top-color: #1f4a40; }

/* v10.10.17 — as fotos do recebimento na capa (anexar / ajustar / remover pelo painel) */
.fotos-capa { padding: 10px 12px; margin: 0 0 12px; border-left: 5px solid #d97706; }
.fotos-capa-falta { margin-top: 6px; font-size: 12.5px; color: #b7791f; font-weight: 700; }
.fotos-capa-grupo { margin-top: 8px; }
.fotos-capa-gt { font-size: 12.5px; font-weight: 800; color: var(--text-muted); margin-bottom: 4px; }
.fotos-capa-lista { display: flex; gap: 10px; flex-wrap: wrap; }
.fotos-capa-item { position: relative; width: 118px; margin: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); padding: 5px; box-sizing: border-box; }
.fotos-capa-item.nova { box-shadow: 0 0 0 2px #d97706; }
.fotos-capa-item img { display: block; width: 106px; height: 84px; object-fit: cover; border-radius: 7px; }
.fotos-capa-item figcaption { font-size: 10.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.25; overflow-wrap: anywhere; }
.fotos-capa-item figcaption b { display: block; color: var(--text); font-size: 11px; }
.fotos-capa-item select { width: 100%; font-size: 11px; padding: 2px 4px; margin-top: 2px; height: auto; }
.fotos-capa-item .fotos-capa-rm { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--danger); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; }
.fotos-capa-origem { display: inline-block; font-size: 10px; font-weight: 800; border-radius: 999px; padding: 0 6px; margin-top: 2px; background: #eef6fd; color: #1e4f8c; }
.fotos-capa-origem.painel { background: #fff3e0; color: #9a4b00; }
.fotos-capa-novo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
.fotos-capa-novo select, .fotos-capa-novo input[type="text"] { width: auto; min-width: 160px; }
.fotos-capa-novo input[type="text"] { flex: 1 1 160px; }
.fotos-capa-removidas { margin-top: 8px; font-size: 12.5px; }
.fotos-capa-removidas summary { cursor: pointer; color: var(--text-muted); }
.fotos-capa-removidas .fotos-capa-item { opacity: .75; }
:root[data-tema='escuro'] .fotos-capa-origem { background: #1f2d42; color: #9cc4f0; }
:root[data-tema='escuro'] .fotos-capa-origem.painel { background: #3a2a10; color: #f0c48a; }

/* v10.10.17 — colar (Ctrl+V) ou arrastar a imagem na capa do recebimento */
.capa-cola { margin-top: 8px; border: 2px dashed var(--border); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; background: var(--bg); outline: none; }
.capa-cola:focus, .capa-cola.sobre { border-color: var(--navy-light); color: var(--text); background: #eef4ff; }
.capa-cola.enviando { opacity: .6; pointer-events: none; }
:root[data-tema='escuro'] .capa-cola:focus, :root[data-tema='escuro'] .capa-cola.sobre { background: #17324f; }

/* v10.10.17 — gerenciar unidades */
tr.un-oculta td { opacity: .6; }
tr.un-oculta td input { text-decoration: line-through; }

/* v10.10.17 — filtro em cima de um select comprido (transportadora…) */
.filtro-sel { width: 100%; margin-bottom: 4px; font-size: 12.5px; padding: 5px 8px; border: 1px dashed var(--border); border-radius: 8px; background: var(--bg); }
.filtro-sel:focus { border-style: solid; }
.filtro-sel.sem-resultado { border-color: #c53030; color: #c53030; }

/* v10.10.17 — 🏷️ etiqueta do produto pelo Estoque: a escolha do modelo */
.etqprod h3 { margin: 0 0 6px; }
.etqprod-prod { font-size: 14px; margin-bottom: 4px; }
.etqprod-prod span { display: block; font-size: 12.5px; color: var(--text-muted); }
.etqprod-dica { font-size: 12.5px; color: var(--text-muted); margin-bottom: 10px; }
.etqprod-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; max-height: 60vh; overflow: auto; padding: 2px; }
.etqprod-card { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 2px solid var(--border); border-radius: 12px; background: var(--card); color: var(--text); padding: 10px; cursor: pointer; text-align: left; font: inherit; }
.etqprod-card:hover, .etqprod-card:focus-visible { border-color: var(--navy-light); box-shadow: 0 6px 18px rgba(13,43,82,.14); outline: none; }
.etqprod-card.meu { border-style: dashed; }
.etqprod-card canvas { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.etqprod-info { width: 100%; font-size: 12px; color: var(--text-muted); }
.etqprod-info b { display: block; font-size: 13px; color: var(--text); }
.etqprod-info small { display: block; margin-top: 2px; line-height: 1.3; }
.btn-etq-prod { width: auto; padding: 3px 8px; white-space: nowrap; }

/* v10.10.17 — "✅ OK" dos documentos do despacho direto na lista da Expedição */
.chip-docs-ok { display: inline-block; font: inherit; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 8px; margin-left: 3px; background: #1a7f37; color: #fff; border: 0; cursor: pointer; white-space: nowrap; vertical-align: baseline; }
.chip-docs-ok:hover, .chip-docs-ok:focus-visible { background: #146c2e; outline: none; box-shadow: 0 0 0 2px #b7e4c7; }
.docs-ok-balao { position: fixed; z-index: 9500; width: 340px; max-width: calc(100vw - 16px); background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 38px rgba(13,43,82,.24); padding: 10px 12px; font-size: 13px; }
.docs-ok-tit { font-weight: 900; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.docs-ok-tit span { font-weight: 600; font-size: 12px; color: var(--text-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-ok-x { border: 0; background: none; font-size: 15px; cursor: pointer; color: var(--text-muted); padding: 0 2px; }
.docs-ok-sub { font-size: 12px; color: var(--text-muted); margin: 2px 0 6px; }
.docs-ok-sec { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--text-muted); margin: 8px 0 3px; display: flex; justify-content: space-between; }
.docs-ok-pend { color: #b45309; text-transform: none; letter-spacing: 0; }
.docs-ok-feito { color: #1a7f37; text-transform: none; letter-spacing: 0; }
.docs-ok-lista { list-style: none; margin: 0; padding: 0; }
.docs-ok-lista li { padding: 2px 0; }
.docs-ok-lista li span { font-size: 11.5px; color: var(--text-muted); }
.docs-ok-lista li.pend { color: #92590a; }
.docs-ok-itens { display: flex; flex-direction: column; gap: 3px; }
.docs-ok-itens label { display: flex; align-items: center; gap: 6px; font-weight: 600; margin: 0; cursor: pointer; }
.docs-ok-obs { width: 100%; margin-top: 8px; font-size: 12.5px; padding: 6px 8px; }
.docs-ok-botoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.docs-ok-botoes .btn { width: auto; }
.docs-ok-botoes [data-docs-acao="faltou"] { color: #c53030; }
.docs-receber-dica { font-size: 12px; color: var(--text-muted); font-weight: 400; }

/* v10.10.17 — campo preenchido pela leitura da nota anexada */
@keyframes lidoDaNota { from { background: #d4f4de; } to { background: #f4fbf6; } }
#formPedido .lido-da-nota { border-color: #1a7f37 !important; background: #f4fbf6; animation: lidoDaNota 1.2s ease-out; }

/* v10.10.17 — a foto da folha dos seriais (assinalar seriais no pedido) */
.vs-foto { margin-top: 8px; border: 1.5px dashed #9fb8d8; border-radius: 10px; padding: 8px 10px; background: #f6f9fd; font-size: 12.5px; outline: none; }
.vs-foto.sobre, .vs-foto:focus-visible { border-color: #1f6fe0; background: #eef5ff; }
.vs-foto-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vs-foto-l1 .btn { width: auto; }
.vs-foto-l1 span { color: var(--text-muted); }
.vs-foto-q { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.vs-foto-lendo { margin-top: 6px; font-weight: 700; }
.vs-foto-ok { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.vs-foto-ok img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: #fff; }
:root[data-tema='escuro'] .vs-foto { background: #0f1c2c; border-color: #2c4a6e; }

/* v10.10.17 — a barra dos marcados (Expedição e Recebimentos), agrupada */
.lote-bar { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; background: #eef4fb; border: 1px solid #cfdcee; border-left: 5px solid #1f6fe0; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.lote-sel { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; color: var(--navy); background: #fff; border: 1px solid #cfdcee; border-radius: 999px; padding: 4px 5px 4px 12px; white-space: nowrap; }
.lote-sel button { border: 0; background: #e6eefb; color: #1f4fbf; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; font-size: 12px; font-weight: 800; line-height: 1; padding: 0; }
.lote-sel button:hover { background: #1f6fe0; color: #fff; }
.lote-g { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; padding-left: 12px; border-left: 1px solid #cfdcee; }
.lote-g[hidden] { display: none; }
.lote-g-tit { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-right: 3px; white-space: nowrap; }
.lote-g .btn { width: auto; white-space: nowrap; padding: 6px 10px; font-size: 12.5px; }
.lote-g .btn-secondary { background: #fff; }
.lote-g select { width: auto; font-size: 12.5px; padding: 6px 8px; }
.lote-g-perigo { margin-left: auto; }
.lote-g-perigo .btn { color: #b42318; }
.lote-g-perigo .btn:hover { background: #fdecec; }
@media (max-width: 900px) { .lote-g-perigo { margin-left: 0; } .lote-g { padding-left: 0; border-left: 0; } }
:root[data-tema='escuro'] .lote-bar { background: #10203a; border-color: #23406a; }
:root[data-tema='escuro'] .lote-sel { background: #0f1825; border-color: #23406a; color: #dbe7fb; }
:root[data-tema='escuro'] .lote-g { border-left-color: #23406a; }
:root[data-tema='escuro'] .lote-g .btn-secondary { background: #0f1825; }

/* v10.10.17 — produtos do recebimento (capa) e a prévia da leitura */
.itens-capa { padding: 10px 12px; margin: 0 0 12px; position: relative; }
.itens-capa-tab { width: 100%; font-size: 12.5px; }
.itens-capa-tab th { font-size: 11px; white-space: nowrap; }
.itens-capa-tab td { vertical-align: top; padding: 5px 6px; }
.itens-capa-n { color: var(--text-muted); font-size: 11px; }
.itens-capa-meta { font-size: 11px; color: var(--text-muted); }
.itens-capa-origem { display: inline-block; font-size: 11px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.itens-capa-conf { font-size: 11px; color: #b45309; font-weight: 700; }
tr.itens-capa-linha.conferir td { background: #fffbeb; }
:root[data-tema='escuro'] tr.itens-capa-linha.conferir td { background: #3a2f12; }
.itens-capa-acoes { white-space: nowrap; text-align: right; }
.itens-capa-acoes .btn { padding: 2px 6px; width: auto; }
.itens-capa-novo { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.itens-capa-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; padding: 8px; border: 1px dashed var(--border); border-radius: 10px; background: var(--bg); }
.itens-capa-form input, .itens-capa-form select { padding: 5px 7px; font-size: 12.5px; }
.itens-capa-aviso { font-size: 12.5px; background: #fff8e1; border: 1px solid #f2d59b; border-radius: 8px; padding: 6px 10px; margin: 6px 0; color: #6b4a00; }
:root[data-tema='escuro'] .itens-capa-aviso { background: #3a2f12; color: #f3d98b; border-color: #6b5320; }
.itens-capa-removidos { margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.itens-capa-rem { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 4px 0; border-top: 1px dashed var(--border); }
.itens-capa-rem .btn { width: auto; }
.itens-capa-lendo { margin-top: 8px; font-size: 12.5px; padding: 8px 10px; border-radius: 8px; background: #eef4ff; border: 1px solid #c9d8f5; color: var(--navy); }
:root[data-tema='escuro'] .itens-capa-lendo { background: #17324f; color: #dbe7ff; border-color: #2c4a70; }
.itens-previa-cab { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; font-size: 12.5px; }
.itens-previa-selo { display: inline-block; align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); }
.itens-previa-selo.ok { background: #eafaf0; border-color: #b7e4c7; color: #1a7f37; }
.itens-previa-selo.alerta { background: #fff8e1; border-color: #f2d59b; color: #8a5a00; }
.itens-previa-ok { color: #1a7f37; }
.itens-previa-aviso { color: #8a5a00; background: #fff8e1; border: 1px solid #f2d59b; border-radius: 8px; padding: 4px 8px; }
.itens-previa-tab input, .itens-previa-tab select { padding: 4px 6px; font-size: 12.5px; }
.itens-previa-tab tr.conferir td { background: #fffbeb; }
:root[data-tema='escuro'] .itens-previa-tab tr.conferir td { background: #3a2f12; }
:root[data-tema='escuro'] .itens-previa-selo.ok { background: #143d26; }
:root[data-tema='escuro'] .itens-previa-selo.alerta, :root[data-tema='escuro'] .itens-previa-aviso { background: #3a2f12; color: #f3d98b; border-color: #6b5320; }
.itens-previa-preencher { margin-top: 8px; font-size: 12.5px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.itens-previa-preencher label { display: inline-flex; gap: 4px; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; }
.itens-previa-modo { margin-top: 8px; font-size: 12.5px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.itens-previa-modo label { display: inline-flex; gap: 4px; align-items: center; }
.itens-capa-lista { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.itens-capa-lista .itens-capa-linha { display: flex; gap: 8px; align-items: flex-start; padding: 7px 10px; border-top: 1px solid var(--border); font-size: 12.5px; }
.itens-capa-lista .itens-capa-linha:first-child { border-top: 0; }
.itens-capa-lista .itens-capa-linha.conferir { background: #fffbeb; }
:root[data-tema='escuro'] .itens-capa-lista .itens-capa-linha.conferir { background: #3a2f12; }
.itens-capa-lista .itens-capa-n { min-width: 16px; padding-top: 1px; }
.itens-capa-corpo { flex: 1; min-width: 0; }
.itens-capa-l1 { font-size: 13px; }
.itens-capa-l2 { margin-top: 2px; }
.itens-capa-l3 { margin-top: 3px; }
.itens-capa-lista .itens-capa-acoes { display: flex; gap: 2px; }
.itens-previa-acao { max-width: 240px; }
.itens-previa-acao select { max-width: 100%; }
.itens-previa-tab td.itens-previa-acao, .itens-previa-tab td.itens-previa-acao .itens-capa-meta { white-space: normal; min-width: 200px; }

/* ==================================================================
   v10.12.0 — 🧠 ASSISTENTE (IA LEVE): card do Dashboard, painel que desliza
   da direita (botão 🧠 do topo), chip de sugestão de endereço. Só variáveis do
   tema → funciona no escuro sem regra extra; px pequenos porque a tela do
   computador já roda em 80% (zoomTela.js).
   ================================================================== */
.ia-card { padding: 14px 16px; border-left: 4px solid #8a5fd6; }
.ia-card.ia-desligado { font-size: 13px; color: var(--text-muted); }
.ia-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ia-cab h3 { margin: 0; font-size: 16px; color: var(--titulo); }
.ia-sub { font-size: 11.5px; font-weight: 500; color: var(--text-muted); margin-left: 6px; }
.ia-abas { display: flex; gap: 4px; flex-wrap: wrap; }
.ia-abas button, .ia-seg button { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; cursor: pointer; }
.ia-abas button.on, .ia-seg button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.ia-abas button:focus-visible, .ia-seg button:focus-visible, .ia-ex:focus-visible, .ia-chip-end:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; }
.ia-corpo { min-height: 60px; }
#iaLeveCard .ia-corpo { max-height: 440px; overflow-y: auto; } /* no Dashboard não empurra os indicadores para longe */
.ia-linha-topo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.ia-seg { display: flex; gap: 4px; }
.ia-manchete { font-size: 13px; color: var(--text); }
.ia-lista { list-style: none; margin: 0; padding: 0; }
.ia-secao { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin: 8px 0 2px; }
.ia-item { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; padding: 3px 0; color: var(--text); }
.ia-dot { flex: 0 0 9px; height: 9px; border-radius: 50%; margin-top: 5px; background: #2a78d6; }
.ia-atencao .ia-dot { background: #d98c00; }
.ia-critico .ia-dot { background: #d43f3f; box-shadow: 0 0 0 3px rgba(212,63,63,.18); }
.ia-critico { font-weight: 600; }
.ia-ver { font-size: 12px; white-space: nowrap; color: var(--sky); font-weight: 600; text-decoration: none; }
.ia-ver:hover { text-decoration: underline; }
.ia-rodape { font-size: 11.5px; color: var(--text-muted); margin-top: 8px; }
.ia-carregando, .ia-vazio { font-size: 13px; color: var(--text-muted); padding: 8px 0; }
.ia-tab { font-size: 12.5px; }
.ia-tab td, .ia-tab th { padding: 5px 8px; }
.ia-barra { display: flex; height: 10px; border-radius: 3px; background: var(--border); overflow: hidden; min-width: 90px; }
.ia-barra span { display: block; height: 100%; }
.ia-chip { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--c); border: 1px solid var(--c); }
.ia-conf { font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); margin-left: 6px; white-space: nowrap; }
.ia-conf-baixa { color: #d98c00; border-color: #d98c00; }
.ia-conf-med { color: #2a78d6; border-color: #2a78d6; }
.ia-conf-ok { color: #1f9d55; border-color: #1f9d55; }
.ia-form { display: flex; gap: 8px; }
.ia-form .ia-q { flex: 1; min-width: 0; }
.ia-exemplos { display: flex; gap: 5px; flex-wrap: wrap; margin: 8px 0; }
.ia-ex { border: 1px dashed var(--border); background: transparent; color: var(--text-muted); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.ia-ex:hover { color: var(--text); border-color: var(--sky); }
.ia-resposta { font-size: 13.5px; line-height: 1.5; }
.ia-pergunta { font-size: 12px; color: var(--text-muted); margin-bottom: 3px; }
.ia-texto { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; color: var(--text); }
/* painel deslizante */
.ia-painel-fundo { position: fixed; inset: 0; background: rgba(5,11,20,.35); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 1190; }
.ia-painel-fundo.aberto { opacity: 1; pointer-events: auto; }
.ia-painel { position: fixed; top: 0; right: 0; width: min(560px, 100vw); height: calc(100vh / var(--z, 1)); background: var(--card); color: var(--text); border-left: 1px solid var(--border); box-shadow: -8px 0 30px rgba(5,11,20,.25); transform: translateX(105%); transition: transform .22s ease; z-index: 1200; display: flex; flex-direction: column; }
.ia-painel.aberto { transform: none; }
.ia-painel-corpo { padding: 16px 18px; overflow-y: auto; flex: 1; }
.ia-fechar { position: absolute; top: 10px; right: 12px; border: none; background: transparent; color: var(--text-muted); font-size: 18px; cursor: pointer; z-index: 1; }
.ia-painel .ia-cab { padding-right: 28px; }
@media (prefers-reduced-motion: reduce) { .ia-painel, .ia-painel-fundo { transition: none; } }
/* chip da sugestão de endereço */
.ia-chip-end { display: inline-block; text-align: left; max-width: 100%; line-height: 1.35; border: 1px solid #d98c00; background: rgba(217,140,0,.08); color: var(--text); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; margin: 4px 4px 0 0; }
.ia-chip-end.on { border-color: #1f9d55; background: rgba(31,157,85,.10); }
.ia-chip-vazio { cursor: default; }
.ia-chip-outras { font-size: 12px; color: var(--text-muted); }
.ia-chip-outras a.on { font-weight: 700; }
.ia-porque { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.ia-porque summary { cursor: pointer; display: inline; }
@media (max-width: 760px) {
  .ia-cab { flex-direction: column; align-items: flex-start; }
  .ia-abas button { padding: 6px 10px; }
  .ia-painel { width: 100vw; }
  .btn-ia-topo { width: 38px; height: 38px; }
}
/* v10.12.0 — no escuro o --navy some no fundo: a aba ativa usa o azul-céu */
:root[data-tema='escuro'] .ia-abas button.on, :root[data-tema='escuro'] .ia-seg button.on { background: var(--sky); border-color: var(--sky); color: #04121f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .ia-abas button.on, :root:not([data-tema='claro']) .ia-seg button.on { background: var(--sky); border-color: var(--sky); color: #04121f; }
}