@charset "UTF-8";
/* ═══════════════════════════════════════════════════
   REPOSITOR - visual Fixee
   Compacto por padrão: controles de 36px (44px no toque), label pequeno e valor grande,
   cinzas neutros + laranja da marca, um só botão laranja por bloco, ícones de traço.
   Página branca, blocos cinza-claro, campos e tabelas brancos.
   ═══════════════════════════════════════════════════ */
/* IBM Plex (SIL OFL 1.1, fonts/OFL.txt) servida daqui mesmo: sem depender do Google e sem
   esperar a internet do armazém. Sans é variável (400-700) no subconjunto latino (acentos). */
@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/ibm-plex-sans-latin.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
}

:root {
    /* Fixee */
    --surface: #ffffff;
    --surface-card: #f5f5f5;
    --surface-input: #ffffff;
    --line: #dcdcdc;
    --line-soft: #ececec;
    --line-campo: #8f8f8f;         /* borda de campo e botão secundário: 3.2:1 no branco (mínimo 3:1) */
    --ink: #1a1a1a;
    --ink-muted: #6b6b6b;          /* 4.9:1 no cinza dos blocos, 5.3:1 no branco */
    --accent: #e2692c;             /* laranja: ícones, foco, destaques (não para texto pequeno) */
    --brand-strong: #c2531a;       /* fundo do botão principal e texto laranja (4.6:1) */
    --on-brand: #ffffff;
    --success: #1f7a45;
    --success-soft: #e3f1e8;
    --font: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --control-h: 36px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --focus-ring: 0 0 0 3px rgba(226, 105, 44, .32);
    --espera: #6b3fa0;             /* aguardando estoque (roxo), um token só */
    --espera-bg: #f1ebf8;

    /* Nomes usados pelas telas (mantidos; agora na paleta nova) */
    --ink-black: #1a1a1a;
    --prussian-blue: #1a1a1a;
    --yale-blue: #404040;
    --cool-steel: #a3a3a3;
    --slate-readable: #6b6b6b;
    --alice-blue: #dcdcdc;
    --bg: #f5f5f5;                 /* fundo sutil (vazio, desabilitado, hover) */
    --card: #ffffff;               /* caixa branca (toast, cartões do quiosque) */
    --panel: #f5f5f5;              /* bloco cinza (.card, .kpi) */
    --text: var(--ink);
    --muted: var(--ink-muted);
    --muted-soft: #a3a3a3;         /* só bordas e ícones */
    --brand: var(--ink);
    --brand-2: var(--brand-strong);

    /* Status (texto ≥ 4.5:1 sobre o fundo suave) */
    --ok: #1f7a45;
    --ok-bg: #e3f1e8;
    --warn: #8a5200;
    --warn-bg: #fdf1dc;
    --danger: #b42318;
    --danger-bg: #fdeceb;
    --info: #1d5e8c;
    --info-bg: #e6f0f7;

    --radius: 10px;
    --shadow: 0 1px 2px rgba(26, 26, 26, .05);
    --shadow-pop: 0 16px 40px rgba(26, 26, 26, .16);
    --font-base: 16px;
}

/* Tela de toque: controles com 44px (dedo), o resto igual. */
@media (pointer: coarse) {
    :root { --control-h: 44px; }
}

/* ═══════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: var(--font-base);
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
}

body {
    margin: 0;
    padding: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font);
    font-size: 14px;
    line-height: 20px;
}

a { color: inherit; text-decoration: none; }
p a, .mini a, .card-sub a, .flash a, .help-box a, td a:not(.btn) { color: var(--brand-strong); text-decoration: underline; text-underline-offset: 2px; }
p a:hover, .mini a:hover, .card-sub a:hover, .flash a:hover, .help-box a:hover, td a:not(.btn):hover { color: #9e4214; }
/* Nos avisos coloridos, o link fica na cor do aviso (laranja sobre o fundo tingido não dá 4.5:1). */
.flash a, .flash a:hover, .help-box a, .help-box a:hover { color: inherit; }

img, svg { display: block; max-width: 100%; }
button { font-family: inherit; font-size: inherit; }
.ic { flex-shrink: 0; }
strong, b { font-weight: 600; }
h1, h2, h3 { font-weight: 600; }

/* ═══════════════════════════════════════════════════
   ESTRUTURA: barra de ícones + topo com a busca
   ═══════════════════════════════════════════════════ */
.shell { min-height: 100vh; }
.shell.com-menu { display: flex; align-items: stretch; }

.rail {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    width: 76px;
    flex-shrink: 0;
    background: #1a1a1a;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 0;
    overflow-y: auto;
    scrollbar-width: none;
    z-index: 900;
}
.rail::-webkit-scrollbar { display: none; }

.rail-logo {
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.rail-logo img { width: 32px; height: 32px; }

.rail-item {
    width: 64px;
    min-height: 56px;
    padding: 6px 2px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #d4d4d4;
    font: 500 12px/14px var(--font);
    text-align: center;
    cursor: pointer;
    flex-shrink: 0;
}
.rail-item:hover { background: #2a2a2a; color: #ffffff; }
/* Número de tarefas no menu e ponto no botão de menu do celular (aviso de tarefa nova, app.js). */
.rail-item, .topbar-menu { position: relative; }
.contador { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #ffffff; font: 700 12px/18px var(--font); text-align: center; }
.rail-item .contador { position: absolute; top: 3px; right: 8px; }
.menu-item .contador { margin-left: auto; }
.ponto-aviso { position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }
.contador[hidden], .ponto-aviso[hidden] { display: none; }
.topbar-avisos { position: relative; }
.topbar-avisos .contador { position: absolute; top: 4px; right: 2px; }
/* "Selecionar responsável" no topo: a pessoa deste aparelho (app.js abre a escolha; laranja = ninguém ainda). */
.quem-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; max-width: 220px; padding: 0 12px 0 4px; flex-shrink: 0;
    border: 1px solid var(--line-campo); border-radius: 999px; background: var(--surface-input); color: var(--ink); font: 600 14px/1 var(--font); cursor: pointer; }
.quem-chip:hover { border-color: var(--ink); }
.quem-chip-ini { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--ink); color: #fff; font: 700 12px/30px var(--font); text-align: center; }
.quem-chip-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quem-chip.sem { border-color: var(--brand-strong); color: var(--brand-strong); }
.quem-chip.sem .quem-chip-ini { background: var(--brand-strong); }
/* Leituras do Bipar paradas no aparelho, vistas de qualquer tela (app.js). */
.fila-aviso { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px;
    border-radius: var(--radius-sm); background: var(--warn-bg); color: var(--warn); font-weight: 600; }
.rail-item.active { background: var(--brand-strong); color: #ffffff; font-weight: 600; }
.rail-item span { max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-fim { flex: 1; min-height: 8px; }

.rail-conta {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 999px;
    border: 1px solid #3a3a3a;
    background: #262626;
    color: #f2f2f2;
    font: 600 12px/1 var(--font);
    cursor: pointer;
}
.rail-conta:hover { border-color: #6b6b6b; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 800;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}

.topbar-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
}

.topbar-logo, .topbar-titulo, .topbar-btn { display: none; }
/* No Início, no computador, a busca grande da própria tela já basta: a do topo some. */
@media (min-width: 900px) { .topbar.topbar-inicio { display: none; } }

/* "Bipe ou digite" */
.busca { position: relative; flex: 1; max-width: 760px; }

.busca-campo {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-input);
    color: var(--accent);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    cursor: text;
}
.busca-campo:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }

.busca-campo input,
.busca-campo input:focus {
    flex: 1;
    min-width: 0;
    width: auto;
    height: 40px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ink);
    font-size: 16px;
}
.busca-campo input::placeholder { color: var(--ink-muted); }

.busca-kbd {
    font: 500 11px/16px var(--font-mono);
    color: var(--ink-muted);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0 5px;
}

.busca-res {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 850;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    padding: 6px;
    max-height: min(70vh, 560px);
    overflow: auto;
}
.busca-res[hidden] { display: none; }
.busca-grupo { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); padding: 8px 10px 4px; }
.busca-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink); }
.busca-item:hover, .busca-item[aria-selected="true"] { background: var(--surface-card); }
.busca-texto { display: flex; flex-direction: column; min-width: 0; }
.busca-titulo, .busca-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busca-titulo { font-size: 14px; line-height: 20px; font-weight: 600; }
.busca-sub { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.busca-vazio { padding: 12px 10px; color: var(--ink-muted); }

/* Menu completo ("Mais", avatar, botão do celular) */
.menu-fundo { position: fixed; inset: 0; background: rgba(26, 26, 26, .28); z-index: 950; }
.menu-painel {
    position: fixed;
    z-index: 960;
    left: 84px;
    bottom: 12px;
    width: 340px;
    max-height: calc(100vh - 24px);
    overflow: auto;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    padding: 8px;
}
.menu-painel[hidden], .menu-fundo[hidden] { display: none; }
.menu-conta { display: flex; align-items: center; gap: 10px; padding: 6px 6px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.menu-sair { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.menu-sair .btn { width: 100%; }
.menu-avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 999px; background: var(--surface-card); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.menu-quem { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.menu-quem strong { font-size: 14px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-quem span { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.menu-grupo { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); padding: 10px 8px 4px; }
.menu-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; min-height: 40px; border-radius: var(--radius-sm); color: var(--ink); }
.menu-item:hover { background: var(--surface-card); }
.menu-item.active { background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--line); }
.menu-item.active .ic { color: var(--accent); }
.menu-texto { display: flex; flex-direction: column; min-width: 0; }
.menu-texto span { font-size: 14px; line-height: 20px; font-weight: 500; }
.menu-texto small { font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* ═══════════════════════════════════════════════════
   PÍLULAS E EMBLEMAS
   ═══════════════════════════════════════════════════ */
.pill, .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    min-height: 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    white-space: nowrap;
    background: var(--surface-card);
    color: var(--ink);
}
/* Os status (STATUS_UI, app/helpers/orders.php): a mesma cor na pílula, no chip, no gráfico e no indicador. */
.pill.info, .badge.info { background: var(--info-bg); color: var(--info); }
.pill.ok, .badge.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn, .badge.warn { background: var(--warn-bg); color: var(--warn); }
.pill.danger, .badge.danger { background: var(--danger-bg); color: var(--danger); }
.pill.espera, .badge.espera { background: var(--espera-bg); color: var(--espera); }
/* A curva ABC: uma cor por classe, do verde (vende muito) ao vermelho (vende pouco); Z cinza, parado.
   O fundo preto com letra branca é só do SKU. O texto escuro ou branco segue o contraste de cada cor. */
.curva { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 4px; font: 700 13px/1 var(--font-mono); color: var(--ink); vertical-align: middle; }
.curva-A { background: #16A34A; color: #ffffff; }
.curva-B { background: #84CC16; color: #1a2e05; }
.curva-C { background: #FACC15; color: #422006; }
.curva-D { background: #FB923C; color: #431407; }
.curva-E { background: #F87171; color: #450a0a; }
.curva-F { background: #DC2626; color: #ffffff; }
.curva-Z, .curva-X { background: #94A3B8; color: #0f172a; }
/* Indicador: zero ou em dia fica neutro; só o problema ganha cor. */
.kpi .value.zero { color: var(--ink-muted); }

/* ═══════════════════════════════════════════════════
   CONTEÚDO
   ═══════════════════════════════════════════════════ */
.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 20px 28px 64px;
}

.page-head {
    display: flex;
    gap: 12px 16px;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.page-head h1 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
/* Título e botões na mesma linha; a frase embaixo, na largura toda da tela. */
.page-head > div:first-child { display: contents; }
.page-head > div:first-child > h1 { flex: 1 1 auto; min-width: 0; align-self: center; }
.page-head > div:first-child > :not(h1) { order: 3; flex: 1 1 100%; }
.page-head p { margin: -10px 0 0; color: var(--ink-muted); }

.grid { display: grid; gap: 12px; }
.grid.cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; min-width: 0; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.op.split { display: grid; grid-template-columns: 0.25fr 0.75fr; gap: 12px; }

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    min-width: 0;
    overflow: hidden;
}
.card.pad { padding: 16px; margin-bottom: 10px; }
.card-title { font-size: 16px; line-height: 22px; font-weight: 600; margin: 0 0 4px; }
.card-sub { color: var(--ink-muted); font-size: 14px; line-height: 20px; margin: 0 0 12px; }
/* Texto de ajuda em tópicos (ex.: "Como ler" do Reserva × ERP). */
.topicos { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.topicos strong { color: var(--ink); font-weight: 600; }
.topicos:not(:last-child) { margin-bottom: 12px; }

/* Indicador: rótulo pequeno, número grande - sem cartão gigante. */
.kpi {
    display: block;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: var(--panel);
    border: 1px solid var(--line);
    min-width: 0;
}
a.kpi { text-decoration: none; color: inherit; }
a.kpi:hover { border-color: #bdbdbd; }
/* Painel: os indicadores em dois grupos, com o mesmo título pequeno do Início. */
.painel-grupo h2 { margin: 0 0 8px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }
/* Um só desenho de indicador em todas as telas: rótulo curto (com o ponto de cor quando a cor
   quer dizer algo), número grande e no máximo duas linhas de apoio. */
.kpi .label { color: var(--ink-muted); font-size: 13px; line-height: 18px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.kpi .value { font-size: 28px; line-height: 34px; font-weight: 600; margin-top: 4px; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi .hint { margin-top: 4px; color: var(--ink-muted); font-size: 14px; line-height: 20px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.kpi .hint strong { color: var(--ink); font-weight: 600; }
.kpi.ativo { border-color: var(--brand-strong); box-shadow: inset 0 0 0 1px var(--brand-strong); }
.kpi-ponto { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted-soft); }
.kpi-ponto.danger { background: var(--danger); }
.kpi-ponto.warn { background: #c98a00; }
.kpi-ponto.info { background: var(--info); }
.kpi-ponto.ok { background: var(--ok); }
/* 6: grade de 3 colunas para 5 e 6 indicadores (sem um cartão sozinho na última linha). */
.grid.cards.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid.cards.cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ═══════════════════════════════════════════════════
   FORMULÁRIOS
   ═══════════════════════════════════════════════════ */
.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.col-12 { grid-column: span 12; }
.col-8 { grid-column: span 8; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
.col-2 { grid-column: span 2; }

/* Label de campo: pequeno, em cinza. O valor digitado é que chama o olho. */
label {
    display: block;
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    margin-bottom: 4px;
    color: var(--ink-muted);
}
/* Label que é a própria opção (caixa de marcar): texto normal. */
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    color: var(--ink);
}

input, select, textarea {
    width: 100%;
    min-height: var(--control-h);
    padding: 0 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-campo);
    background: var(--surface-input);
    color: var(--ink);
    font: 400 14px/20px var(--font);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: #767676; }   /* 4.5:1 */
select { padding-right: 28px; }
textarea { min-height: 88px; padding: 8px 10px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; padding: 0; accent-color: var(--brand-strong); }
/* Com o dedo (e com luva): 24 px, e a linha inteira marca (app.js). */
@media (pointer: coarse) {
    input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; }
    td > input[type="checkbox"], td > label > input[type="checkbox"] { margin: 2px 0; }
}
/* Foco: a borda escurece de verdade (não só muda de tom), e o anel laranja reforça. */
input:focus, select:focus, textarea:focus { border-color: var(--ink); box-shadow: var(--focus-ring); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-card); color: #6b6b6b; }

/* ═══════════════════════════════════════════════════
   BOTÕES - mesma altura dos campos
   ═══════════════════════════════════════════════════ */
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.btn {
    appearance: none;
    border: 1px solid transparent;
    cursor: pointer;
    min-height: var(--control-h);
    padding: 0 14px;
    border-radius: var(--radius-sm);
    font: 600 14px/20px var(--font);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
    -webkit-tap-highlight-color: transparent;
}
.btn .ic { width: 16px; height: 16px; }
.btn.primary { background: var(--ink); color: #ffffff; }
.btn.primary:hover { background: #333333; }
/* Laranja: a ação principal da tela, no máximo uma visível por vez (Gerar etiquetas, Mover Master,
   Distribuir...). Verde: confirmar um trabalho terminado (Concluir reposição) - não se confunde com
   o vermelho do Cancelar ao lado. Preto (.primary): as demais ações firmes e os filtros. */
.btn.orange { background: var(--brand-strong); color: var(--on-brand); }
.btn.verde { background: var(--ok); border-color: var(--ok); color: #ffffff; }
.btn.verde:hover { background: #17633a; border-color: #17633a; }
.btn.orange:hover { background: #a94715; }
.btn.secondary { background: var(--surface-input); border-color: var(--line-campo); color: var(--ink); }
.btn.secondary:hover { border-color: var(--ink-muted); background: #fafafa; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: rgba(26, 26, 26, .06); }
.btn.danger { background: var(--surface-input); border-color: #f0c2bd; color: var(--danger); }
.btn.danger:hover { background: var(--danger-bg); }
.btn.danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger-solid:hover { background: #9a1d14; border-color: #9a1d14; }
.btn.op { width: 100%; padding: 4px 10px; font-size: 14px; }
.btn.mini { min-height: 28px; padding: 0 8px; font-size: 12px; }
.btn:active { opacity: .88; }

/* ═══════════════════════════════════════════════════
   TABELAS
   ═══════════════════════════════════════════════════ */
.table-wrap {
    overflow: auto;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: #ffffff;
    -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; }
th, td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: top;
    text-align: left;
    font-size: 14px;
    line-height: 20px;
}
th {
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    color: var(--ink-muted);
    background: #fafafa;
    border-bottom-color: var(--line);
    position: sticky;
    top: 0;
    z-index: 1;
}
tbody tr:last-child td { border-bottom: 0; }
tr:hover td { background: #fafafa; }
/* Linha clicável (tr[data-href], app.js): a linha inteira abre o link; o link do código continua
   para quem usa teclado. A seta no fim substitui o botão "Ver" repetido em cada linha. */
tr[data-href] { cursor: pointer; }
tr[data-href]:hover td { background: #f6f6f6; }
tr[data-href]:hover .cell-seta { color: var(--ink); }
td a.linha-link:not(.btn) { color: inherit; text-decoration: none; }
td a.linha-link:not(.btn):hover { text-decoration: underline; text-underline-offset: 2px; }
td.cell-seta { width: 36px; text-align: right; color: var(--ink-muted); vertical-align: middle; }
.cell-seta .ic { display: inline-block; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Menu ⋯ de uma linha (details/summary): ações raras, como desativar, fora da vista. */
.menu-linha { position: relative; display: inline-block; }
.menu-linha > summary { list-style: none; min-width: 40px; font-size: 18px; line-height: 1; }
.menu-linha > summary::-webkit-details-marker { display: none; }
.menu-linha-lista { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 170px; padding: 6px; border-radius: var(--radius-md); border: 1px solid var(--line); background: #ffffff; box-shadow: 0 8px 24px rgba(26, 26, 26, .12); }
.menu-linha-lista form { margin: 0; }
.menu-linha-lista button { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: 500 14px/20px var(--font); cursor: pointer; }
.menu-linha-lista button:hover { background: var(--surface-card); }
.menu-linha-lista button.perigo { color: var(--danger); }

/* ═══════════════════════════════════════════════════
   AVISOS
   ═══════════════════════════════════════════════════ */
.flash-stack { display: grid; gap: 8px; margin: 16px; }
.flash {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    border: 1px solid transparent;
    font-size: 14px;
    line-height: 20px;
}
.flash.success { background: var(--ok-bg); color: var(--ok); border-color: #c5e3d0; }
.flash.error { background: var(--danger-bg); color: var(--danger); border-color: #f4c7c2; }
.flash.info { background: var(--info-bg); color: var(--info); border-color: #c8dcea; }
.flash.warning { background: var(--warn-bg); color: var(--warn); border-color: #f1d9a8; }
/* Aviso solto na página (fora de cartão): respiro até o que vem depois (indicadores, tabela, outro aviso). */
.container > .flash { margin-bottom: 12px; }

/* Mensagens em cartão flutuante (canto superior direito) */
.toast-stack {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(380px, calc(100vw - 32px));
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    box-shadow: var(--shadow-pop);
    animation: toast-in .24s cubic-bezier(.2, .8, .2, 1);
}
.toast-ic { flex: none; display: inline-flex; margin-top: 1px; }
.toast.success .toast-ic { color: var(--ok); }
.toast.error .toast-ic { color: var(--danger); }
.toast.warning .toast-ic { color: #c98a00; }
.toast.info .toast-ic { color: var(--info); }
.toast.hide { animation: toast-out .22s ease forwards; }
.toast-msg { flex: 1; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--ink); }
.toast-close { background: none; border: 0; font-size: 20px; line-height: 20px; cursor: pointer; color: var(--ink-muted); padding: 0 2px; }
.toast-close:hover { color: var(--ink); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px); } }

/* ═══════════════════════════════════════════════════
   UTILITÁRIOS
   ═══════════════════════════════════════════════════ */
.empty { padding: 24px; text-align: center; color: var(--ink-muted); }
.mini { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.muted { color: var(--ink-muted); }
.code {
    font-family: var(--font-mono);
    font-weight: 500;
    background: var(--ink);
    color: #ffffff;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 20px;
    display: inline-flex;
    white-space: nowrap;
}
/* Tarja preta só para o SKU (o endereço para onde a pessoa vai). CODID, série, código de barras e
   número da ordem vão na tarja clara: a linha fica mais leve e o SKU salta aos olhos. */
.code.leve { background: #ffffff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; }
/* O endereço em três tamanhos: grande onde a pessoa precisa andar até lá (a ordem, a próxima tarefa),
   médio nas listas do celular, o padrão nas tabelas. É a etiqueta da prateleira na tela. */
.code.md { font-size: 20px; line-height: 24px; padding: 2px 8px; }
.code.lg { font-size: 40px; line-height: 44px; padding: 4px 12px; border-radius: 8px; letter-spacing: .04em; }
/* Voltar, um desenho só: à esquerda do título, com o nome de para onde volta. */
.voltar { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; margin-bottom: 2px; color: var(--ink-muted); font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none; }
.voltar:hover { color: var(--ink); }
.voltar svg { transform: rotate(180deg); }
/* A ordem: a tarefa primeiro (endereço, quanto levar, de onde tirar, quem), os passos numerados com
   estado, Concluir preso embaixo no celular, e o resumo fechado por padrão no celular. */
.ordem-head h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tarefa-card, .passos-card, .resumo, #cancelar-card { max-width: 820px; }
.tarefa-topo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.tarefa-prod { font-size: 16px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.tarefa-qtd { text-align: right; }
.tarefa-qtd b { display: block; font-size: 28px; line-height: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tarefa-qtd small { color: var(--ink-muted); font-size: 14px; line-height: 20px; white-space: nowrap; }
.dl { display: grid; gap: 8px 16px; margin: 14px 0 0; }
.dl > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px; }
.dl dt { color: var(--ink-muted); font-size: 13px; line-height: 20px; font-weight: 600; }
.dl dd { margin: 0; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.atribuir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.atribuir select { max-width: 320px; }
.passos { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 16px; }
.passo { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
.passo-num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-card); border: 1px solid var(--line); color: var(--ink-muted); font: 600 14px/1 var(--font); }
.passo[data-estado="ok"] .passo-num { background: var(--ok); border-color: var(--ok); color: #ffffff; }
.passo[data-estado="erro"] .passo-num { background: var(--danger); border-color: var(--danger); color: #ffffff; }
.passo-corpo { min-width: 0; }
.passo-corpo .bip-rotulo label, .passo-corpo > label { font-size: 16px; font-weight: 600; color: var(--ink); }
.qtd-linha { display: flex; align-items: center; gap: 10px; }
.qtd-linha input { max-width: 140px; }
.caixas-abertas { margin-top: 12px; }
.caixas-abertas > summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink); padding: 6px 0; }
.caixas-abertas input { margin-top: 6px; }
.passos-card { overflow: visible; }   /* o cartão corta o overflow; a barra de Concluir precisa grudar embaixo */
.concluir-barra { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.concluir-barra .btn { min-height: 48px; font-size: 16px; }
.concluir-barra .btn[disabled] { opacity: .55; cursor: not-allowed; }
@media (max-width: 899px) {
    .concluir-barra { position: sticky; bottom: 0; z-index: 5; margin: 16px -16px -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-top: 1px solid var(--line); }
}
.resumo > summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.resumo > summary::-webkit-details-marker { display: none; }
.resumo > summary::after { content: "\203A"; font-size: 20px; line-height: 1; color: var(--ink-muted); transform: rotate(90deg); transition: transform .15s ease; }
.resumo[open] > summary::after { transform: rotate(-90deg); }
.resumo .dl, .resumo .timeline, .resumo .empty { margin-top: 14px; }

.hr { height: 1px; background: var(--line); margin: 16px 0; }
.w-full { width: 100%; }
.text-right { text-align: right; }
.center { display: grid; place-items: center; }
.nowrap { white-space: nowrap; }

/* ═══════════════════════════════════════════════════
   COMPONENTES DE PÁGINA
   ═══════════════════════════════════════════════════ */
.searchbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Chips de status (Ordens): o filtro de um toque, com a quantidade de cada um. */
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: #ffffff; color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.chip span { color: var(--ink-muted); font-weight: 400; }
.chip:hover { border-color: #bdbdbd; }
.chip.ativo { background: var(--ink); border-color: var(--ink); color: #ffffff; }
.chip.ativo span { color: rgba(255, 255, 255, .7); }
.filtros-abrir { display: none; margin-left: auto; }
/* Estrutura e Mapa: a grade da sala e os blocos (paletes, prateleiras, portas, passagens). */
.es-wrap { overflow: auto; padding-bottom: 4px; }
.es-grade { display: grid; grid-template-columns: repeat(var(--cols), minmax(56px, 1fr)); grid-template-rows: repeat(var(--rows), 56px); gap: 4px; min-width: calc(var(--cols) * 60px); padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-md); background-color: var(--surface-card); background-image: linear-gradient(to right, rgba(0, 0, 0, .05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, .05) 1px, transparent 1px); background-size: calc(100% / var(--cols)) calc(100% / var(--rows)); touch-action: none; user-select: none; }
.es-grade.mapa { touch-action: auto; user-select: auto; }
.es-bloco { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: #ffffff; color: var(--ink); text-decoration: none; font-size: 12px; line-height: 14px; text-align: center; padding: 2px; overflow: hidden; cursor: grab; }
.es-grade.mapa .es-bloco { cursor: default; }
.es-grade.mapa a.es-bloco { cursor: pointer; }
.es-grade.mapa a.es-bloco:hover { border-color: var(--ink); }
.es-bloco b { font-size: 16px; line-height: 18px; }
.es-bloco small { font-size: 11px; line-height: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.es-bloco.arrastando { opacity: .8; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); cursor: grabbing; z-index: 2; }
.es-bloco:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 1px; }
.es-bloco.oc-pouco { background: #dbeafe; border-color: #93c5fd; }
.es-bloco.oc-medio { background: #93c5fd; border-color: #3b82f6; }
.es-bloco.oc-cheio { background: #1e3a8a; border-color: #1e3a8a; color: #ffffff; }
.es-bloco.oc-cheio small { color: rgba(255, 255, 255, .8); }
.es-bloco.tipo-prateleira { border-style: dashed; }
.es-bloco.tipo-porta { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); font-weight: 600; cursor: grab; }
.es-bloco.tipo-passagem { background: transparent; border-style: dotted; color: var(--ink-muted); }
.es-bloco.aceso { outline: 3px solid var(--ok); outline-offset: -1px; box-shadow: 0 0 0 3px var(--ok-bg); }
.es-bloco.escolhido { border-color: var(--brand-strong); box-shadow: 0 0 0 2px var(--brand-strong); }
/* O editor da Estrutura: barra de modo, desenho + painel do bloco, alça de tamanho, marca do modo Adicionar. */
.es-barra { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 6px; }
.es-barra .chip { cursor: pointer; font: inherit; font-size: 14px; }
.es-barra select { width: auto; min-height: 32px; padding: 0 8px; }
#desenho [hidden] { display: none !important; }
.es-novos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--ok-bg); color: var(--ok); font-weight: 600; font-size: 14px; }
.es-barra-dir { display: flex; align-items: center; gap: 8px; }
.es-editor { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.es-painel { position: sticky; top: 72px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; background: var(--surface-card); }
.es-painel .form-grid { margin-top: 8px; }
@media (max-width: 900px) { .es-editor { grid-template-columns: 1fr; } .es-painel { position: static; } }
.es-grade .es-bloco { position: relative; touch-action: none; }
.es-grade:not(.mapa) { touch-action: pan-x pan-y; }
.es-grade.modo-adicionar { touch-action: none; cursor: crosshair; }
.es-grade.modo-adicionar .es-bloco { cursor: default; }
.es-bloco.selecionado { border-color: var(--brand-strong); box-shadow: 0 0 0 2px var(--brand-strong); z-index: 1; }
.es-alca { display: none; position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px; border-radius: 4px 0 var(--radius-sm) 0; background: var(--brand-strong); cursor: nwse-resize; touch-action: none; }
.es-bloco.selecionado .es-alca { display: block; }
.es-marca[hidden] { display: none; }
#es-dica { min-height: 40px; }
.es-marca { display: flex; align-items: center; justify-content: center; border: 2px dashed var(--brand-strong); border-radius: var(--radius-sm); background: rgba(37, 99, 235, .12); color: var(--brand-strong); font-weight: 700; pointer-events: none; z-index: 2; }
.es-lista td { vertical-align: middle; }
.es-legenda { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; }
.es-legenda span::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line); margin-right: 4px; vertical-align: -2px; background: #ffffff; }
.es-legenda .oc-pouco::before { background: #dbeafe; border-color: #93c5fd; }
.es-legenda .oc-medio::before { background: #93c5fd; border-color: #3b82f6; }
.es-legenda .oc-cheio::before { background: #1e3a8a; border-color: #1e3a8a; }
.es-legenda .aceso::before { outline: 2px solid var(--ok); outline-offset: -1px; }
tr.destaque td { background: var(--ok-bg); }
/* Recebimentos: o quadro (colunas pela etapa, cartões; rola de lado no celular). */
.kb { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; align-items: start; }
.kb-col { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px; min-height: 120px; scroll-snap-align: start; }
.kb-head { margin-bottom: 8px; font-size: 14px; line-height: 20px; }
.kb-head .mini { margin-top: 2px; }
.kb-vazio { color: var(--ink-muted); font-size: 13px; padding: 10px 0 4px; }
.kb-card { background: #ffffff; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 8px; }
.kb-card.hoje { border-left-color: var(--warn); }
.kb-card.atrasada { border-left-color: var(--danger); background: var(--danger-bg); }
.kb-tit { display: block; font-weight: 600; color: var(--ink); text-decoration: none; line-height: 20px; overflow-wrap: anywhere; }
.kb-tit:hover { text-decoration: underline; }
.kb-avisos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.kb-rodape { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.kb-prev summary { list-style: none; cursor: pointer; }
.kb-prev summary::-webkit-details-marker { display: none; }
.kb-prev-form { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.kb-prev-form input[type="date"] { width: auto; min-height: 32px; padding: 0 8px; font-size: 14px; }
@media (max-width: 640px) { .kb { grid-auto-columns: 82vw; } }
/* Cobrança: nos resumos por fornecedor e por empresa o nome quebra linha e os valores ficam inteiros. */
.cob-resumo td.num, .cob-resumo th.num { white-space: nowrap; }
.prod-tabela td.zero { color: var(--ink-muted); }
.prod-tabela tfoot th { border-top: 2px solid var(--line); }
.prod-tabela th.num, .prod-tabela td.num { white-space: nowrap; }
.cob-resumo td.cell-primary { white-space: normal; overflow-wrap: anywhere; }
/* Cobrança: a linha que abre cada faixa de vencimento (vencidas, hoje, 7 dias...). */
.table-wrap tr.grupo td { background: var(--surface-card); padding-top: 8px; padding-bottom: 8px; }
@media (max-width: 640px) { .table-wrap.cards-sm tr.grupo { background: transparent; border: 0; padding: 14px 0 4px; } .table-wrap.cards-sm tr.grupo td { padding-left: 0; background: transparent; } .table-wrap.cards-sm tr.grupo td::before { content: none; } }
/* Minhas tarefas: tabela no computador, uma linha por ordem no celular. */
.tarefas-cel { display: none; }
.tarefa { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #ffffff; color: var(--ink); text-decoration: none; margin-bottom: 8px; }
.tarefa:active { background: var(--surface-card); }
.tarefa-sku { font-size: 14px; }
.tarefa-meio { display: flex; flex-direction: column; min-width: 0; }
.tarefa-meio strong { font-size: 14px; line-height: 20px; font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.tarefa-meio small { font-size: 14px; line-height: 20px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarefa-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.tarefa-dir b { font-size: 16px; white-space: nowrap; }
.searchbar input, .searchbar select { max-width: 260px; min-width: 140px; width: auto; }

.help-box {
    padding: 12px;
    border-radius: var(--radius-sm);
    background: #fdf0e8;
    border: 1px solid #f3cdb6;
    color: #8a3a12;
}

.table-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.order-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.timeline { display: grid; gap: 8px; }
.timeline-item { padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #ffffff; }

/* Operador (atribuir ordem) */
.op-card {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: #ffffff;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    user-select: none;
}
.op-card:hover { border-color: #bdbdbd; }
.op-card.op-selected { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.op-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--surface-card); color: var(--ink); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.op-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.op-check {
    margin-left: auto; width: 16px; height: 16px;
    border-radius: 50%; border: 2px solid var(--line);
    background: transparent; transition: background .15s, border-color .15s; flex-shrink: 0;
}
.op-card.op-selected .op-check { background: var(--ink); border-color: var(--ink); }
.none-card { border-style: dashed; }

/* Operadores: botões numa linha e o painel (editar, acesso, histórico) embaixo */
.op-acoes { margin-top: 10px; }
.op-acoes form { margin: 0; }
/* Operadores: menu ⋯ por linha e a linha dos painéis logo abaixo. */
.op-menu { position: relative; display: inline-block; }
.op-menu-abrir { min-width: 40px; font-size: 18px; line-height: 1; }
.op-menu-lista { position: fixed; z-index: 900; min-width: 210px; padding: 6px; user-select: none; -webkit-user-select: none; border-radius: var(--radius-md); border: 1px solid var(--line); background: #ffffff; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); display: flex; flex-direction: column; }
.op-menu-lista[hidden] { display: none; }   /* o display: flex acima venceria o hidden */
.op-menu-lista form { margin: 0; display: contents; }
.op-menu-lista button { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: 500 14px/20px var(--font); cursor: pointer; }
.op-menu-lista button:hover, .op-menu-lista button:focus-visible { background: var(--surface-card); outline: none; }
.op-menu-lista button:focus { outline: none; }
.op-menu-lista button.perigo { color: var(--danger); }
.op-paineis > td { background: var(--surface); }
.op-paineis .op-painel { margin: 4px 0; }
@media (max-width: 640px) { .table-wrap.cards-sm tr.op-paineis { padding: 10px 12px; } }
/* Crachá de login (Operadores, membro Coletor): o estado, os botões e o cartão do QR, que só existe até fechar. */
.op-cracha { display: grid; gap: 10px; }
.op-cracha-explica { margin: 0; max-width: 760px; }
.op-cracha-estado { font-size: 14px; line-height: 20px; }
.op-cracha .actions form { margin: 0; }
.cracha-cartao { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; max-width: 760px; padding: 16px;
    border: 1px solid var(--line); border-radius: 14px; background: #ffffff; box-shadow: var(--shadow-pop); }
.cracha-cartao[hidden] { display: none; }
.cracha-qr { padding: 8px; border-radius: 10px; background: #ffffff; border: 1px solid var(--line-soft); line-height: 0; }
.cracha-qr canvas { width: 220px; height: 220px; image-rendering: pixelated; }
.cracha-info { display: grid; gap: 6px; min-width: 0; padding-right: 28px; }
.cracha-info p { margin: 0; font-size: 14px; line-height: 20px; }
.cracha-rot { color: var(--ink-muted); font: 600 12px/16px var(--font); letter-spacing: .06em; text-transform: uppercase; }
.cracha-nome { font: 700 24px/30px var(--font); overflow-wrap: anywhere; }
.cracha-acoes { margin-top: 6px; }
.cracha-acoes select { width: auto; max-width: 180px; }
.cracha-x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-muted); font-size: 22px; line-height: 1; cursor: pointer; }
.cracha-x:hover { background: var(--surface-card); color: var(--ink); }
@media (max-width: 640px) { .cracha-cartao { grid-template-columns: 1fr; justify-items: start; } .cracha-qr canvas { width: 200px; height: 200px; } }
/* "Imprimir no papel": só o cartão sai na folha (o resto da tela some na impressão). */
@media print {
    body.cracha-imprimindo * { visibility: hidden !important; }
    body.cracha-imprimindo .cracha-cartao.imprimir, body.cracha-imprimindo .cracha-cartao.imprimir * { visibility: visible !important; }
    body.cracha-imprimindo .cracha-cartao.imprimir { position: fixed; left: 12mm; top: 12mm; box-shadow: none; border: 1px solid #000; }
    body.cracha-imprimindo .cracha-cartao.imprimir .cracha-x, body.cracha-imprimindo .cracha-cartao.imprimir .cracha-acoes,
    body.cracha-imprimindo .cracha-cartao.imprimir .mini { display: none !important; }
}
/* BINs: ✓ ao salvar a capacidade. */
.cap-estado { font-size: 13px; min-width: 18px; }
.cap-estado.ok { color: var(--ok); }
.cap-estado.erro { color: var(--danger); }
/* Texto que pede atenção (ex.: o BIN que não aguenta a venda, no Painel). */
.texto-alerta { color: var(--warn); font-weight: 600; }
/* Leitura da última peça: "BIN vazio" ligado (vai junto com o toque no nome). */
.btn.btn-vazio { flex-direction: column; gap: 2px; min-height: 56px; padding: 6px 16px; white-space: normal; text-align: center; }
.btn-vazio-tit { font-weight: 800; letter-spacing: .04em; }
.btn-vazio-sub { font-size: 14px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
.btn.btn-vazio.ativo, .scan-foot .btn.btn-vazio.ativo, .scan-foot .btn.btn-vazio.ativo:hover { background: var(--danger); border-color: var(--danger); color: #ffffff; }
.btn.btn-vazio.ativo .btn-vazio-sub { color: rgba(255, 255, 255, .9); }
/* Motivo da divergência na conclusão da ordem: opções prontas, fáceis de tocar no coletor. */
.field-label-txt { display: block; font-size: 13px; line-height: 18px; font-weight: 500; margin-bottom: 6px; color: var(--ink-muted); }
.motivos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-bottom: 8px; }
.motivos label.motivo { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 6px 12px; border: 1px solid var(--line);
    border-radius: var(--radius-sm); background: var(--surface-input); cursor: pointer; }
.motivos label.motivo input { width: auto; min-height: 0; margin: 0; flex: none; }
.motivos label.motivo:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
#reason_wrap[hidden], #replenishment_reason[hidden] { display: none; }
/* Conclusão da ordem: os bips do produto e da prateleira conferidos a cada leitura. Digitar abre o
   teclado da tela (celular, tablet, coletor); com mouse e teclado de verdade ele não aparece. */
.bip-rotulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bip-rotulo label { margin-bottom: 0; }
.bip-rotulo .bip-digitar { min-height: 24px; margin-bottom: 2px; }
@media (pointer: fine) { .bip-digitar { display: none; } }
.bip-rotulo .bip-digitar[hidden] { display: none; }
/* Teclado numérico na tela (Última peça: capacidade e PIN; app.js). Com mouse não aparece. */
/* O piscar da tela inteira a cada bip (app.js, bipSinal). */
.pisca-tela { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0; }
.pisca-tela.on { animation: piscatela .2s ease-out; }
@keyframes piscatela { from { opacity: .4; } to { opacity: 0; } }
.teclado-num { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(100%, 320px); margin: 14px auto 0; }
.teclado-num .btn { min-height: 56px; padding: 0; justify-content: center; font-size: 26px; font-weight: 700; }
.teclado-num .btn.tecla-acao { font-size: 16px; font-weight: 600; }
@media (pointer: fine) { .teclado-num { display: none; } }
.bip-ordem.bip-ok { border-color: var(--ok); box-shadow: 0 0 0 2px var(--success-soft); }
.bip-ordem.bip-erro { border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger-bg); }
.bip-msg { min-height: 1.3em; margin-top: 4px; }
.bip-msg.ok { color: var(--ok); font-weight: 600; }
.bip-msg.erro { color: var(--danger); font-weight: 600; }
.btn[aria-expanded="true"] { border-color: var(--brand-strong); color: var(--brand-strong); }
.op-painel { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-card); }
.op-painel[hidden] { display: none; }
.op-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.op-hist li { display: grid; grid-template-columns: 130px 1fr; gap: 10px; }
.op-hist-quando { font-size: 12px; line-height: 20px; color: var(--ink-muted); white-space: nowrap; }
.op-hist-det { display: block; }
@media (max-width: 540px) { .op-hist li { grid-template-columns: 1fr; gap: 0; } }

/* Mudanças do ERP: uma linha por importação, com as mudanças abrindo embaixo */
.erp-imps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.erp-imp { padding: 12px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.erp-imp:first-child { border-top: 0; padding-top: 4px; }
.erp-imp-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.erp-imp-resumo { font-size: 14px; }
.erp-imp-det summary { cursor: pointer; color: var(--brand-strong); font-weight: 500; font-size: 14px; }
.erp-tipo { margin: 10px 0 4px; font-weight: 500; }
.erp-lista { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; overflow-wrap: anywhere; }
.cc-etiqueta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.erp-mais[hidden] { display: none !important; }

/* Código de barras em mais de um produto: um botão por produto (SKU e nome) para escolher qual é */
.escolha-produto { margin-top: 10px; padding: 12px; border: 1px solid #f1d9a8; border-radius: var(--radius-sm); background: var(--warn-bg); }
.escolha-produto[hidden] { display: none; }
.escolha-produto-titulo { font-weight: 500; color: var(--warn); margin-bottom: 8px; }
.escolha-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.escolha-op { display: flex; align-items: center; gap: 10px; min-height: var(--control-h); padding: 8px 12px; border: 1px solid var(--line);
    border-radius: var(--radius-sm); background: var(--surface); font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.escolha-op:hover, .escolha-op:focus-visible { border-color: var(--brand-strong); }
.escolha-op .code { flex: none; }
.escolha-op small { display: block; color: var(--ink-muted); font-size: 14px; }
.cx-marca { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font: inherit; color: inherit; margin: 0; }
.cx-marca input { margin-top: 3px; flex: none; }

/* Importar ERP: um cartão por exportação, em três passos */
.imp-auto { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.imp-auto-titulo { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-bottom: 4px; }
.imp-auto .card-title { margin: 0; }
/* Avisos do admin (o sino): abertos primeiro, depois o histórico do que já foi resolvido. */
.avisos { list-style: none; margin: 0; padding: 0; }
.aviso { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.aviso:first-child { border-top: 0; padding-top: 0; }
.aviso > .ic { flex-shrink: 0; margin-top: 2px; }
.aviso.erro > .ic { color: var(--danger); }
.aviso.atencao > .ic { color: var(--warn); }
.aviso.resolvido > .ic { color: var(--ok); }
.aviso-corpo { min-width: 0; }
.aviso-titulo { font-weight: 600; }
.aviso.resolvido .aviso-titulo { color: var(--ink-muted); font-weight: 500; }
.aviso-texto { margin-top: 2px; color: var(--ink-muted); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.aviso-quando { margin-top: 4px; color: var(--ink-muted); font-size: 12px; line-height: 16px; }
.aviso-novo { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--danger-bg); color: var(--danger); font-size: 12px; font-weight: 600; vertical-align: 1px; }
.avisos-tudo-ok { margin-bottom: 12px; }
.imp-auto-res { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.imp-auto-res strong { color: var(--ok); font-weight: 500; }
.imp-auto-res.falhou strong { color: var(--danger); }
.imp-auto-res summary { cursor: pointer; font-weight: 500; margin-top: 4px; }
.imp-auto-res pre { margin: 6px 0 0; padding: 8px 10px; max-height: 260px; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); font: 12px/18px var(--font-mono); white-space: pre-wrap; }
.imp-card { margin-bottom: 0; display: flex; flex-direction: column; gap: 12px; }
/* SQL do envio automático: o que mudou, como no GitHub, e a aprovação com a senha do admin. */
.imp-sqlap { margin-bottom: 12px; }
.imp-sqlap > * + * { margin-top: 12px; }
.imp-sqlap-cabeca { list-style: none; cursor: pointer; }
.imp-sqlap-cabeca::-webkit-details-marker { display: none; }
.imp-sqlap-seta { width: 8px; height: 8px; margin: 0 4px 0 2px; border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted); transform: rotate(-45deg); transition: transform .15s; }
.imp-sqlap[open] .imp-sqlap-seta { transform: rotate(45deg); }
.imp-sqlap-item { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); min-width: 0; }
.imp-sqlap-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.imp-sqlap code { font-family: var(--font-mono); font-size: 14px; }
.imp-sqlap-ver summary { cursor: pointer; font-weight: 500; font-size: 14px; }
.imp-sqlap-item .actions { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
/* A janela da comparação: os dois arquivos lado a lado (uma coluna só no celular) e a aprovação embaixo. */
.sqlmodal { width: min(1400px, 96vw); height: 90vh; max-height: 90vh; padding: 0; border: 0; border-radius: var(--radius-md); background: var(--surface); color: var(--ink); }
.sqlmodal[open] { display: flex; flex-direction: column; }
.sqlmodal::backdrop { background: rgba(0, 0, 0, .5); }
.sqlmodal-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.sqlmodal-titulo { font-size: 18px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.sqlmodal-topo .mini { margin-top: 4px; }
.sqlmodal-leg { padding: 0 6px; border-radius: 4px; font-size: 12px; }
.sqlmodal-leg.del { background: var(--danger-bg); color: var(--danger); }
.sqlmodal-leg.add { background: var(--ok-bg); color: var(--ok); }
.sqlmodal-x { flex-shrink: 0; }
.sqlmodal-corpo { flex: 1; min-height: 0; overflow: auto; padding: 12px 20px; }
.sqlmodal-rodape { padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface-card); }
.sqlmodal-passo1, .sqlmodal-passo2 { display: flex; align-items: flex-end; gap: 8px 12px; flex-wrap: wrap; }
.sqlmodal-passo1 { align-items: center; }
.sqlmodal-passo1[hidden], .sqlmodal-passo2[hidden] { display: none; }
.sqlmodal-passo2 > div { flex: 1 1 220px; max-width: 320px; }
.sqls { font: 12px/18px var(--font-mono); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.sqls-cab { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-card); border-bottom: 1px solid var(--line); font: 600 12px/18px var(--font); }
.sqls-cab span { padding: 6px 10px; }
.sqls-cab span + span { border-left: 1px solid var(--line); }
.sqls-l { display: grid; grid-template-columns: 48px 18px minmax(0, 1fr) 48px 18px minmax(0, 1fr); }
.sqls-n { padding-right: 8px; text-align: right; color: var(--ink-muted); user-select: none; }
.sqls-s { text-align: center; user-select: none; }
.sqls-t { white-space: pre-wrap; overflow-wrap: anywhere; padding-right: 8px; }
.sqls-n.dir { border-left: 1px solid var(--line); }
.sqls-l.del .esq, .sqls-l.mud .esq { background: var(--danger-bg); color: var(--danger); }
.sqls-l.add .dir, .sqls-l.mud .dir { background: var(--ok-bg); color: var(--ok); }
.sqls-t.vazio, .sqls-l.add .sqls-n.esq, .sqls-l.add .sqls-s.esq, .sqls-l.del .sqls-n.dir, .sqls-l.del .sqls-s.dir { background: var(--surface-card); }
.sqls-sep { padding: 4px 10px; background: var(--info-bg); color: var(--info); font: 12px/18px var(--font); text-align: center; }
.sqlmodal .sqld { display: none; max-height: none; }
@media (max-width: 799px) {
    .sqlmodal { width: 100vw; height: 100vh; max-height: 100vh; max-width: 100vw; border-radius: 0; }
    .sqlmodal .sqls { display: none; }
    .sqlmodal .sqld { display: block; }
    .sqlmodal-topo, .sqlmodal-corpo, .sqlmodal-rodape { padding-left: 12px; padding-right: 12px; }
}
.imp-sqlap-ver pre { margin: 8px 0 0; padding: 10px 12px; max-height: 420px; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); font: 12px/18px var(--font-mono); }
.sqld { font: 12px/18px var(--font-mono); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: auto; max-height: 520px; }
.sqld-in { width: max-content; min-width: 100%; }
.sqld-cab { padding: 4px 10px; background: var(--info-bg); color: var(--info); }
.sqld-l { display: grid; grid-template-columns: 44px 44px 18px auto; white-space: pre; }
.sqld-n { padding-right: 8px; text-align: right; color: var(--ink-muted); user-select: none; }
.sqld-s { text-align: center; user-select: none; }
.sqld-add { background: var(--ok-bg); color: var(--ok); }
.sqld-del { background: var(--danger-bg); color: var(--danger); }
.imp-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.imp-topo .card-title { margin: 0; }
.imp-recusa { display: grid; gap: 8px; margin: 0; font-weight: 400; }
.imp-sql-antigo { color: var(--warn); }
.imp-passos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.imp-passos li { padding-left: 4px; }
.imp-passos li > span:first-child { display: block; font-weight: 500; margin-bottom: 6px; }
.imp-passos li:nth-child(2) > span:first-child { margin-bottom: 0; }
.imp-sql { position: absolute; left: -9999px; width: 1px; height: 1px; }
.imp-sql[hidden] { display: none; }
.imp-arquivo { position: relative; overflow: hidden; }
.imp-arquivo input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; min-height: 0; }
.imp-nome { display: block; margin-top: 6px; word-break: break-all; }
/* Campo de arquivo com o botão "Escolher arquivo" (o nativo sai em inglês) e o nome ao lado. */
.arquivo-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.arquivo-linha .mini { word-break: break-all; }
/* Botões de uma linha de tabela, lado a lado (quebram no celular). */
.acoes-linha { display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; }
@media (max-width: 760px) { .acoes-linha { flex-wrap: wrap; } }
.acoes-linha form { margin: 0; }
/* Mudanças do ERP: "N produtos" abre a lista; Copiar fica na mesma linha. */
.grupo-linha { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.grupo-linha details { flex: 1; min-width: 0; }
.grupo-linha .copiar-grupo { flex: none; }

/* Configurações: manual dos leitores e o teste do leitor */
.cfg-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px; align-items: start; }
.cfg-passos { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; line-height: 22px; }
.cfg-passos li { padding-left: 4px; }
.cfg-passos b { font-weight: 600; }
.cfg-depois { margin: 14px 0 0; }
.cfg-resultado { margin-top: 12px; min-height: 22px; display: flex; flex-direction: column; gap: 6px; }
.cfg-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cfg-codigo { display: block; font-size: 18px; line-height: 26px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); word-break: break-all; white-space: pre-wrap; }
.cfg-lidas { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.cfg-lidas li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.cfg-lidas code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══════════════════════════════════════════════════
   INÍCIO (atalhos)
   ═══════════════════════════════════════════════════ */
.home { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.home-ola { display: flex; align-items: center; gap: 12px; }
.home-ola h1 { margin: 0; font-size: 20px; line-height: 28px; }
.home-ola p { margin: 0; color: var(--ink-muted); }
.busca-home { max-width: none; }
.busca-home .busca-campo { height: 52px; }
.home-grupo h2 { margin: 0 0 8px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }
.home-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.home-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    min-height: 92px;
    padding: 12px;
    border-radius: var(--radius-md);
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--ink);
}
.home-tile:hover { border-color: #bdbdbd; }
.home-tile-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.home-tile .home-num { font-size: 28px; line-height: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Atalho que ficou sozinho na última linha e ocupa a linha inteira: deitado (ícone e texto lado a lado). */
.home-tile.linha-cheia { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; min-height: 0; }
.home-tile.linha-cheia .home-tile-topo { flex: none; }
.home-tile strong { font-size: 14px; line-height: 20px; }
.home-tile small { display: block; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* ═══════════════════════════════════════════════════
   ENTRADA
   ═══════════════════════════════════════════════════ */
.container:has(> .login-shell) { max-width: none; padding: 0; }
.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 16px;
    background: var(--surface-card);
}
.login-card {
    width: min(100%, 880px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-pop);
}
.login-brand { padding: 32px; background: #1a1a1a; color: #ffffff; }
.login-form { padding: 32px; }
.hero-num { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.login-logo { display: block; width: 44px; height: 44px; object-fit: contain; margin-bottom: 20px; }
/* Crachá de login (coletor): o quadro "Bipe o crachá", como o alvo das telas de bipar. O campo fica
   invisível por cima (tocar no quadro é tocar no campo) e não abre o teclado. */
.login-cracha { position: relative; display: grid; place-items: center; align-content: center; gap: 4px; min-height: 220px; padding: 24px 16px; border-radius: 18px;
    border: 2px solid var(--line); background: #ffffff; text-align: center; cursor: pointer; overflow: hidden; transition: border-color .15s, background .15s, opacity .15s; }
.login-cracha.pronto { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(226, 105, 44, .12); }
.login-cracha.parado { border-color: var(--warn); background: var(--warn-bg); }
.login-cracha.parado .login-cracha-ic, .login-cracha.parado .login-cracha-tit { color: var(--warn); }
.login-cracha.entrando { opacity: .55; pointer-events: none; }
.login-cracha-ic { width: 76px; height: 76px; margin-bottom: 6px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--ink); }
.login-cracha-tit { font: 600 22px/28px var(--font); }
.login-cracha-sub { color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.login-cracha-linha { position: absolute; left: 14%; right: 14%; top: 24%; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 12px rgba(226, 105, 44, .6); opacity: 0; }
.login-cracha.pronto .login-cracha-linha { animation: bq-varre 2.2s ease-in-out infinite; }
.login-cracha-inp { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
    color: transparent; caret-color: transparent; opacity: 0; cursor: pointer; }
.login-cracha-inp:focus { box-shadow: none; }
.login-cracha-msg { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 20px; }
.login-cracha-msg:empty { display: none; }
.login-cracha-msg.erro { background: var(--danger-bg); color: var(--danger); }
.login-cracha-msg.aviso { background: var(--warn-bg); color: var(--warn); }
.login-cracha-msg.ok { background: var(--ok-bg); color: var(--ok); }
.login-cracha-msg.espera { background: var(--surface-card); color: var(--ink-muted); }
.login-senha-abrir { margin: 12px 0 16px; }
#login-form[hidden], .login-cracha[hidden], .login-senha-abrir[hidden] { display: none; }   /* o display deles venceria o hidden */
.login-cracha-dica { margin: 14px 0 0; }

/* ═══════════════════════════════════════════════════
   TELAS MENORES
   ═══════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .two, .split { grid-template-columns: 1fr; }
}

/* Sem barra de ícones: topo com Início, título, lupa e menu. */
@media (max-width: 899px) {
    .shell.com-menu { display: block; }
    .rail { display: none; }
    .topbar-inner { padding: 4px 4px 4px 12px; gap: 4px; min-height: 52px; }
    .topbar-logo { display: flex; width: 36px; height: 44px; align-items: center; flex-shrink: 0; }
    .topbar-logo img { width: 26px; height: 26px; }
    .topbar-titulo { display: block; flex: 1; min-width: 0; font-size: 16px; line-height: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .topbar-btn { display: flex; width: 44px; height: 44px; flex-shrink: 0; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); cursor: pointer; }
    .topbar-btn:hover { background: var(--surface-card); }
    .topbar .busca { display: none; }
    .topbar.buscando .busca { display: block; }
    .quem-chip { max-width: 150px; padding-right: 10px; }
    .topbar.buscando .quem-chip { display: none; }
}
/* Tela estreita: só o círculo (o nome e a pergunta ficam no aria-label e no diálogo). */
@media (max-width: 479px) {
    .quem-chip { max-width: none; padding: 0 3px; }
    .quem-chip-nome { display: none; }
    .topbar.buscando .topbar-titulo, .topbar.buscando .busca-abrir, .topbar.buscando .topbar-logo { display: none; }
    .busca-kbd { display: none; }
    .menu-painel {
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-height: 85vh;
        border-radius: 16px 16px 0 0;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    }
    .menu-item { min-height: 44px; }
    .login-card { grid-template-columns: 1fr; }
    .login-brand { padding: 24px; }
    .form-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .col-12, .col-8, .col-6 { grid-column: span 6; }
    .col-4, .col-3, .col-2 { grid-column: span 3; }
}

@media (max-width: 768px) {
    .container { padding: 12px 16px 48px; }
    .three { grid-template-columns: 1fr 1fr; }
    .searchbar { flex-direction: column; align-items: stretch; }
    .searchbar input, .searchbar select { max-width: 100%; width: 100%; }
    /* Ordens no celular: os chips bastam; o resto do filtro fica atrás do botão Filtrar. */
    .filtros-abrir { display: inline-flex; }
    .filtros:not(.aberto):not(.filtros-ativos) { display: none; }
    .tarefas-cel { display: block; }
    .tarefas-pc { display: none; }
    .actions.stack { flex-direction: column; }
    .actions.stack .btn { width: 100%; }
    .table-actions { gap: 6px; }
}

@media (max-width: 540px) {
    .grid.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .kpi { padding: 10px 12px; }
    .kpi .value { font-size: 20px; line-height: 26px; }
    .three, .split { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .col-12, .col-8, .col-6, .col-4, .col-3, .col-2 { grid-column: span 1; }
    .login-form, .login-brand { padding: 20px; }
    table { min-width: 560px; }
    .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* No celular o aviso nasce embaixo: não tapa o título, a busca e o menu. */
    .toast-stack { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); left: 16px; right: 16px; max-width: none; flex-direction: column-reverse; }
}

/* ═══════════════════════════════════════════════════
   ACESSIBILIDADE
   ═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
.rail :focus-visible, .rail-item:focus-visible, .rail-conta:focus-visible { outline-color: #f08a4b; }

/* ═══════════════════════════════════════════════════
   TABELAS QUE VIRAM CARTÕES NO CELULAR
   ───────────────────────────────────────────────────
   Marque a .table-wrap com .cards-sm e dê data-label a cada <td>.
   Sem isso a tabela rolaria para o lado e a coluna de ação ficaria
   fora da tela - justamente o botão que o repositor precisa tocar.
   ═══════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .table-wrap.cards-sm { border: 0; background: transparent; overflow: visible; border-radius: 0; }
    .table-wrap.cards-sm table,
    .table-wrap.cards-sm tbody,
    .table-wrap.cards-sm tr,
    .table-wrap.cards-sm td {
        display: block;
        width: 100%;
        /* o min-width que mantém a tabela legível ao rolar não vale mais quando ela vira cartão */
        min-width: 0;
    }
    .table-wrap.cards-sm thead { display: none; }
    .table-wrap.cards-sm tr {
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        padding: 10px 12px;
        margin-bottom: 8px;
    }
    .table-wrap.cards-sm tr:hover td { background: transparent; }
    /* Rótulo à esquerda (posição absoluta) e o conteúdo inteiro à direita - texto solto e
       vários elementos na mesma célula ficam todos na coluna do valor. */
    .table-wrap.cards-sm td {
        border: 0;
        position: relative;
        padding: 5px 0 5px calc(34% + 10px);
        min-height: 26px;
    }
    .table-wrap.cards-sm td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 7px;
        width: 34%;
        font-size: 12px;
        font-weight: 500;
        color: var(--ink-muted);
        line-height: 16px;
    }
    /* célula de destaque (código da ordem, CODID): ocupa a linha inteira, sem rótulo */
    .table-wrap.cards-sm td.cell-primary {
        display: block;
        padding-left: 0;
        padding-top: 0;
        padding-bottom: 8px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--line-soft);
    }
    .table-wrap.cards-sm td.cell-primary::before { content: none; }
    /* ação: botão de largura total, no fim do cartão */
    .table-wrap.cards-sm td.cell-action { display: block; padding: 10px 0 0; }
    .table-wrap.cards-sm td[colspan] { padding-left: 0; }
    .table-wrap.cards-sm td[colspan]::before { content: none; }
    .table-wrap.cards-sm td.cell-action::before { content: none; }
    .table-wrap.cards-sm td.cell-action .btn,
    .table-wrap.cards-sm td.cell-action form,
    .table-wrap.cards-sm td.cell-action button { width: 100%; }
    /* linha clicável no celular: o cartão inteiro abre; a seta fica no canto de cima */
    .table-wrap.cards-sm tr[data-href] { position: relative; padding-right: 36px; }
    .table-wrap.cards-sm td.cell-seta { position: absolute; top: 10px; right: 10px; width: auto; padding: 0; min-height: 0; }
    .table-wrap.cards-sm td.cell-seta::before { content: none; }
    .table-wrap.cards-sm td.cell-action .menu-linha > summary { width: auto; }
    .table-wrap.cards-sm .menu-linha-lista { right: auto; left: 0; }
    .table-wrap.cards-sm .menu-linha-lista button { width: 100%; }
}

/* ═══════════════════════════════════════════════════
   ESTADOS E CONTROLES
   ═══════════════════════════════════════════════════ */
/* Botão indisponível não deve parecer a ação principal da tela. */
.btn:disabled,
.btn[disabled] {
    background: #ececec !important;
    color: #6b6b6b !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
    cursor: not-allowed;
    opacity: 1;
}

/* Seletor de arquivo: o controle nativo vinha cru e em inglês no meio da interface. */
input[type="file"] { padding: 4px; }
input[type="file"]::file-selector-button {
    font: inherit;
    font-weight: 600;
    margin-right: 12px;
    min-height: 28px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface-card);
    color: var(--ink);
    cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--brand-strong); color: var(--brand-strong); }

/* Cabeçalho de card com ação à direita: dá respiro antes do conteúdo. */
.card .order-head + .table-wrap,
.card .order-head + .empty { margin-top: 12px; }

/* Revelar sob demanda (redefinir acesso do operador) */
.reveal summary { list-style: none; display: inline-flex; cursor: pointer; }
.reveal summary::-webkit-details-marker { display: none; }
.reveal[open] summary { border-color: var(--brand-strong); color: var(--brand-strong); }
.reveal-body {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #ffffff;
    min-width: min(100%, 460px);
}

/* =====================================================================
   Estoque: caixas master, bipagem, inventário, etiquetas, endereços
   ===================================================================== */
.wms-pessoas { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.wms-pessoas .btn { min-height: 44px; }
/* Com o nome guardado no aparelho só ele aparece, com um "trocar" ao lado. */
.wms-pessoa-trocar { display: none; color: var(--danger); }
.wms-pessoas.fechado .wms-pessoa:not(.primary) { display: none; }
.wms-pessoas.fechado .wms-pessoa-trocar { display: inline-flex; }
/* "Selecionar responsável" (o diálogo do app.js): a grade de nomes. Nome em uso em outro aparelho fica
   apagado; o primeiro toque nele pergunta ("É você?"), o segundo passa o nome para este aparelho. */
.quem-pre[hidden], #nova[hidden], .quem-continuar[hidden] { display: none; }
.quem-aviso { margin: 10px 0 0; }
.quem-continuar { width: 100%; min-height: 64px; margin-top: 14px; font-size: 18px; white-space: normal; }
/* A grade dos nomes: colunas que cabem (2 no celular, 3 ou 4 no tablet); nome comprido quebra e diminui, nunca vaza do botão. */
.quem-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 124px), 1fr)); gap: 10px; margin-top: 14px; }
.quem-nome { min-width: 0; min-height: 64px; padding: 8px 6px; flex-direction: column; gap: 2px; font-size: clamp(15px, 3.6vw, 18px); line-height: 1.2;
    white-space: normal; text-align: center; overflow: hidden; }
.quem-nome .quem-n { display: block; width: 100%; overflow-wrap: break-word; }
.quem-nome .quem-sub { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.quem-nome .quem-sub:empty { display: none; }
.quem-nome.armado { border: 2px solid var(--warn); background: var(--warn-bg); color: var(--ink); }
.quem-nome.armado .quem-sub { color: var(--warn); font-weight: 600; }
.wms-pessoas .quem-escolhido { pointer-events: none; }
.bp-pessoa.armado { border: 2px solid var(--warn); background: var(--warn-bg); }
.bp-pessoa .bp-uso { display: block; font-size: 12px; line-height: 14px; font-weight: 500; color: var(--ink-muted); }
.bp-pessoa.armado .bp-uso { color: var(--warn); font-weight: 600; }
.bp-pessoa.ultimo:not(.em-uso) { border: 2px solid var(--ink); }
.wms-caixa-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; margin-top: 8px; }
@media (max-width: 760px) { .wms-caixa-grid { grid-template-columns: 1fr; } }
.wms-leitura { width: 100%; font-size: 20px; font-weight: 600; min-height: 48px; padding: 8px 12px; letter-spacing: .03em;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.wms-leitura:focus { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }
.wms-produto { margin-top: 10px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; }
.wms-produto.is-empty { color: var(--muted); }
.wms-sku { font-size: 40px; font-weight: 700; letter-spacing: .04em; line-height: 1.1; }
.wms-nome { font-size: 16px; font-weight: 600; margin-top: 2px; }
.wms-msg { min-height: 20px; margin-top: 6px; font-weight: 500; }
#cx-msg:empty { min-height: 0; margin-top: 0; }
.wms-msg.ok { color: var(--ok); }
.wms-msg.erro { color: var(--danger); }
.wms-msg.aviso { color: var(--warn); }
.wms-stepper { display: flex; gap: 6px; align-items: stretch; }
.wms-stepper .btn { min-width: 44px; font-size: 18px; }
.wms-stepper input { text-align: center; font-size: 18px; font-weight: 600; max-width: 80px; }
/* Unidades na caixa: até 5 dígitos (12345), centrado e com o mesmo peso do contador de caixas iguais */
.wms-qtd { width: calc(7ch + 28px); max-width: 100%; text-align: center; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wms-stepper .wms-qtd { width: calc(7ch + 28px); max-width: none; }
.wms-qtd::placeholder { font-weight: 400; }
/* Inventário → Conferir: sala (até 999) e palete (até 9999 ou "sala inteira") estreitos, com o botão ao lado. */
.inv-abrir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.inv-abrir .inv-sala { width: calc(6ch + 38px); }
.inv-abrir .inv-palete { width: calc(13ch + 38px); }
.inv-abrir .inv-porta { display: flex; gap: 8px; align-items: center; margin: 0; min-height: var(--control-h); }
/* Lista longa fechada por padrão (ex.: as séries do sistema antigo no relatório da conferência). */
.lista-fechada summary { cursor: pointer; color: var(--brand-strong); font-weight: 500; font-size: 14px; }
/* Prateleiras: um campo só (código, lista ou faixa) com o Adicionar ao lado. */
.et-entrada { display: flex; gap: 8px; }
.et-entrada input { flex: 1; min-width: 0; }

/* =====================================================================
   Bipar caixas (quiosque): guardar, conferir, ajustar. Uma coluna; barra e campo fixos no topo;
   depois de cada bip um cartão semáforo (palavra grande + cor + dado da ação); listas embaixo.
   ===================================================================== */
.container:has(> .bp) { max-width: 980px; padding: 0 12px 40px; }
.bp [hidden] { display: none !important; }
.bp {
    --bp-alvo: 56px; --bp-alvo-min: 44px; --bp-campo-h: 56px; --bp-topo: 52px;
    --bp-gigante: 30px; --bp-dado: 22px; --bp-mono: 36px; --bp-id: 16px;
}
.bp .btn { min-height: var(--bp-alvo-min); font-size: 16px; }
.bp .btn.alvo { min-height: var(--bp-alvo); font-size: 18px; }
.bp .btn.danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.bp .btn.danger-solid:hover { background: #9a1d14; }
.bp .code { font-size: 16px; line-height: 20px; }
.bp .ic { width: 20px; height: 20px; flex: none; }
.bp svg.ic path, .bp svg.ic circle, .bp svg.ic polyline, .bp svg.ic line, .bp svg.ic rect { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 1 · barra fixa: voltar · modos · quem bipa */
.bp-barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; height: 52px; margin: 0 -12px; padding: 0 12px;
    background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.bp-voltar { width: 44px; min-width: 44px; padding: 0; }
.bp-voltar span { display: none; }
.bp-modos { display: inline-flex; flex: 1; justify-content: center; min-width: 0; }
.bp-modos .btn { border-radius: 0; margin-left: -1px; padding: 0 10px; font-size: 14px; border: 1px solid var(--line); }
.bp-modos .btn:first-child { border-radius: 10px 0 0 10px; margin-left: 0; }
.bp-modos .btn:last-child { border-radius: 0 10px 10px 0; }
.bp-modos .btn.primary { border-color: var(--ink); position: relative; z-index: 1; }
.bp-modos .longo { display: none; }
.bp-quem { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--ink); min-height: 44px; }
.bp-circ { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 13px/36px var(--font); text-align: center; letter-spacing: .02em; flex: none; }
.bp-quem.sem .bp-circ { background: var(--brand-strong); }
.bp-quem-nome { display: none; font: 600 16px/20px var(--font); white-space: nowrap; }
.bp-quem-nome b { font-weight: 400; color: var(--ink-muted); }
.bp-pessoas { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 2px; align-items: center; }
.bp-pessoas .btn { min-height: 56px; font-size: 16px; }
.bp-pessoas .bp-pessoa { flex-direction: column; gap: 0; }
.bp-pessoas .bp-pin { display: flex; align-items: center; gap: 8px; }
.bp-pessoas .bp-pin input { max-width: 140px; min-height: 48px; font-size: 20px; }

/* 2 · faixa de estado (sem rede, enviando, sessão, sala errada) */
.bp-faixa { position: sticky; top: 52px; z-index: 20; display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; min-height: 40px;
    margin: 0 -12px; padding: 6px 12px; font: 600 16px/20px var(--font); }
.bp-faixa.ambar { background: var(--warn-bg); color: var(--warn); }
.bp-faixa.azul { background: var(--info-bg); color: var(--info); }
.bp-faixa.vermelha { background: var(--danger-bg); color: var(--danger); }
.bp-faixa .ic { width: 22px; height: 22px; }
.bp-faixa > span { flex: 1 1 180px; min-width: 0; }
.bp-faixa .btn { min-height: 48px; }

/* 3 · contexto: onde estou / o que estou fazendo */
.bp-ctx { margin-top: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); display: grid; gap: 8px; }
/* Rótulo dos quiosques: 14px, minúsculas, peso 600 (maiúscula pequena com espaçamento é o texto mais
   difícil de ler num tablet de parede a um braço de distância). */
.bp-rot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap;
    font-size: 14px; line-height: 18px; color: var(--ink); font-weight: 600; }
.bp-rot .cont { font-size: 14px; font-weight: 500; color: var(--ink-muted); }
.bp-rot a { font-size: 14px; }
.bp-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bp-valor { border: 0; background: transparent; padding: 0; text-align: left; font: 700 26px/1.1 var(--font); letter-spacing: .01em; color: var(--ink);
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.bp-valor.fixo { cursor: default; }
.bp-valor.warn { color: var(--warn); }
.bp-valor.danger { color: var(--danger); }
.bp-valor .seta { font-size: 20px; color: var(--ink-muted); }
.bp-valor.piscou { animation: bppisca .5s ease-out; }
@keyframes bppisca { from { color: var(--info); } to { color: inherit; } }
.bp-ctrl { display: flex; gap: 8px; width: 100%; }
.bp-ctrl .btn { flex: 1 1 0; min-height: 48px; padding: 6px 8px; font-size: 16px; }
.bp-dica { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.bp-ctx.compacto { padding: 8px 14px; min-height: 44px; }
.bp-ctx.compacto > :not(.bp-valor-linha) { display: none; }
.bp-ctx.compacto .bp-valor { font-size: 18px; min-height: 28px; }
.bp-ctx.perigo { background: var(--danger-bg); border: 2px solid var(--danger); }
/* placar da conferência */
.bp-placar { display: grid; gap: 4px; width: 100%; }
.bp-faltam { font: 700 28px/1 var(--font); color: var(--ink); }
.bp-faltam.pronto { color: var(--ok); }
.bp-lidas { font: 600 20px/24px var(--font); }
.bp-placar .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.bp-prog { height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.bp-prog i { display: block; height: 100%; background: var(--ok); }
/* ajustar: operação e motivo */
.bp-segm { display: flex; width: 100%; }
.bp-segm .btn { flex: 1 1 0; min-width: 0; min-height: var(--bp-alvo); border-radius: 0; margin-left: -1px; font-size: 18px; border: 1px solid var(--line); }
.bp-segm .btn:first-child { border-radius: 10px 0 0 10px; margin-left: 0; }
.bp-segm .btn:last-child { border-radius: 0 10px 10px 0; }
.bp-segm .btn.primary, .bp-segm .btn.danger-solid { position: relative; z-index: 1; }
.bp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-chips .btn { min-height: 44px; font-size: 14px; border: 1px solid var(--line); background: var(--surface); }
.bp-chips .btn.on { border: 2px solid var(--ink); }
.bp-chips .bp-outros { flex-basis: 100%; padding-top: 2px; }
.bp-motivo-livre { flex-basis: 100%; display: flex; gap: 8px; flex-wrap: wrap; }
.bp-motivo-livre input { flex: 1 1 220px; min-height: 44px; font-size: 16px; }
.bp-motivo-livre .btn { min-height: 44px; }
.bp-chips .bp-motivo-livre .btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }

/* 4 · campo de leitura (fixo abaixo da barra) */
.bp-leitura { position: sticky; top: var(--bp-topo); z-index: 19; margin: 10px -12px 0; padding: 0 12px 8px; background: var(--surface); }
.bp-leitura .campo { position: relative; }
/* Digitar dentro do campo, antes da bolinha (só em tela de toque). */
.bp-leitura .bip-digitar { position: absolute; right: 36px; top: 50%; transform: translateY(-50%); min-height: 36px; }
.bp-leitura input { width: 100%; height: var(--bp-campo-h); min-height: 0; padding: 0 44px 0 48px; border: 2px solid var(--line-campo); border-radius: var(--radius-md);
    background: var(--surface); font: 600 26px/1 var(--font); letter-spacing: .03em; color: var(--ink); outline: none; scroll-margin-top: 120px; }
@media (pointer: coarse) { .bp-leitura input { padding-right: 120px; } }
.bp-leitura input::placeholder { color: #767676; font-weight: 500; font-size: 18px; letter-spacing: 0; }
.bp-leitura .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; color: var(--ink-muted); }
.bp-ponto { position: absolute; right: 16px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--cool-steel); }
.bp-leitura.foco input { border-color: var(--accent); box-shadow: var(--focus-ring); }
.bp-leitura.foco .bp-ponto { background: var(--ok); animation: bppulsa 2s ease-in-out infinite; }
@keyframes bppulsa { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.bp-leitura.sem-foco input { background: var(--warn-bg); border-color: var(--warn); }
.bp-leitura.pausado input { height: 44px; background: var(--surface-card); border-color: var(--line); pointer-events: none; font-size: 16px; }
.bp-leitura.pausado input::placeholder { font-size: 16px; }
.bp-leitura.pausado .ic { opacity: .5; }
.bp-leitura.esvaziar input { border-color: var(--danger); }
.bp-leitura.esvaziar input::placeholder { color: var(--danger); }
.bp-leitura.esvaziar.foco input { box-shadow: 0 0 0 3px rgba(180, 35, 24, .18); }

/* 5 · cartão semáforo */
.bp-cartao { position: relative; margin-top: 4px; padding: 28px 16px 16px; border-radius: var(--radius-md); border: 2px solid var(--line); background: var(--surface);
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; overflow: hidden; --bpc: var(--ink-muted); }
.bp-cartao > * { min-width: 0; }
.bp-cartao::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; background: var(--cool-steel); }
.bp-cartao.vazio { padding: 16px; color: var(--ink-muted); font-size: 18px; line-height: 24px; font-weight: 500; border-color: var(--line-soft); }
.bp-cartao.vazio::before { display: none; }
.bp-cartao.verde { background: var(--ok-bg); border-color: var(--ok); --bpc: var(--ok); }
.bp-cartao.azul { background: var(--info-bg); border-color: var(--info); --bpc: var(--info); }
.bp-cartao.cinza { background: var(--surface-card); border-color: var(--cool-steel); --bpc: var(--ink-muted); }
.bp-cartao.ambar { background: var(--warn-bg); border-color: var(--warn); --bpc: var(--warn); }
.bp-cartao.vermelho { background: var(--danger-bg); border-color: var(--danger); --bpc: var(--danger); }
.bp-cartao.verde::before, .bp-cartao.azul::before, .bp-cartao.ambar::before, .bp-cartao.vermelho::before { background: var(--bpc); }
.bp-cartao.flash-in { animation: bpflash .4s ease-out; }
/* A palavra numa faixa sólida da cor (lê-se de longe, sob luz forte), com a hora à direita. */
.bp-cartao:not(.vazio) { padding-top: 0; }
.bp-cartao:not(.vazio)::before { display: none; }
.bp-cartao:not(.vazio) .bp-c-topo { margin: 0 -16px 4px; padding: 10px 16px; min-height: 64px; background: var(--bpc); }
.bp-cartao:not(.vazio) .bp-c-topo .ic, .bp-cartao:not(.vazio) .bp-c-palavra { color: #fff; }
.bp-c-topo .bp-c-hora { position: static; height: auto; margin-left: auto; flex: none; color: rgba(255, 255, 255, .9); font-size: 12px; }
@keyframes bpflash { from { transform: scale(1.015); filter: brightness(1.06); } to { transform: none; filter: none; } }
.bp-c-hora { position: absolute; top: 0; right: 12px; height: 18px; font: 500 12px/18px var(--font-mono); color: #fff; z-index: 1; }
.bp-c-topo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bp-c-topo .ic { width: 28px; height: 28px; color: var(--bpc); }
.bp-c-palavra { font: 800 var(--bp-gigante)/1.05 var(--font); letter-spacing: .01em; color: var(--bpc); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bp-c-dado { font: 600 var(--bp-dado)/1.25 var(--font); color: var(--ink); overflow-wrap: anywhere; }
.bp-c-dado.mono { font: 700 var(--bp-mono)/1.1 var(--font-mono); }
.bp-c-dado .fraco { color: var(--ink-muted); font-weight: 500; }
.bp-c-dado.mono .fraco { font: 500 18px/1.2 var(--font); }
.bp-c-id { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font: 500 var(--bp-id)/1.3 var(--font); }
.bp-c-id .code { font-size: var(--bp-id); }
.bp-curva { display: inline-flex; align-items: center; gap: 6px; height: 28px; min-width: 28px; padding: 0 8px; border-radius: 6px; font: 700 18px/1 var(--font-mono); white-space: nowrap; }
.bp-curva small { font: 600 12px/12px var(--font); letter-spacing: .02em; }
.bp-fraco { color: var(--ink-muted); }
.bp-c-nome { font-size: 14px; line-height: 18px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-c-etq { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-height: 48px; padding: 8px 12px; border-radius: 8px; font: 600 16px/20px var(--font); }
.bp-c-etq > span { flex: 1 1 200px; min-width: 0; }
.bp-c-etq.ambar { background: var(--warn-bg); color: var(--warn); border-left: 4px solid var(--warn); }
.bp-cartao.ambar .bp-c-etq.ambar { background: var(--surface); }
.bp-c-etq.azul { background: var(--surface); color: var(--info); border-left: 4px solid var(--info); }
.bp-c-etq.cinza { background: var(--surface-card); color: var(--ink-muted); border-left: 4px solid var(--cool-steel); font-weight: 500; font-size: 14px; }
.bp-c-etq .ic { width: 22px; height: 22px; }
.bp-c-msg { font: 500 16px/22px var(--font); color: var(--ink); overflow-wrap: anywhere; }
.bp-c-msg.fraco { color: var(--ink-muted); }
.bp-c-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bp-c-acoes .btn { min-height: var(--bp-alvo); }
.bp-c-acoes .btn.peq { min-height: 48px; }
.bp-c-acoes .direita { margin-left: auto; }
.bp-c-acoes .pergunta { flex: 1 1 100%; font: 600 16px/20px var(--font); }
.bp-op-dica { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin-top: 6px; }

/* painéis no lugar do cartão: sala/palete e quantidade */
.bp-painel { margin-top: 4px; padding: 16px; border-radius: var(--radius-md); border: 2px solid var(--line); background: var(--surface); display: grid; gap: 12px; }
.bp-painel.azul { background: var(--info-bg); border-color: var(--info); }
.bp-painel .cab { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; font: 600 18px/22px var(--font); }
.bp-painel .cab.ambar { color: var(--warn); }
.bp-painel .cab .btn { margin-left: auto; }
.bp-salas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.bp-salas .btn { min-height: 56px; padding: 0; font: 700 20px/1 var(--font); border: 1px solid var(--line); color: var(--ink-muted); background: var(--surface); }
.bp-salas .btn.usada { border: 2px solid var(--ink); color: var(--ink); }
.bp-salas .btn.atual { background: var(--ink); color: #fff; border-color: var(--ink); }
.bp-salas .btn.outra { font-size: 16px; font-weight: 600; color: var(--ink); }
.bp-sala-nova { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-height: 56px; padding: 6px 10px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); font-weight: 600; }
.bp-sala-nova .btn { margin-left: auto; }
.bp-pal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bp-pal .btn.mais { width: 56px; min-width: 56px; min-height: 56px; padding: 0; font-size: 26px; }
.bp-pal .num { border: 0; background: transparent; cursor: pointer; color: var(--ink); padding: 0 4px; font: 700 28px/1.1 var(--font); min-height: 44px; }
.bp-digitar { display: grid; gap: 8px; }
.bp-q-perg { font: 700 26px/32px var(--font); }
.bp-q-perg small { font: 500 18px/24px var(--font); color: var(--ink-muted); white-space: nowrap; }
.bp-qtd { width: 100%; height: 48px; min-height: 0; border: 2px solid var(--line); border-radius: 8px; background: var(--surface); font: 700 32px/1 var(--font-mono);
    text-align: center; color: var(--ink); outline: none; }
.bp-qtd:focus { border-color: var(--info); box-shadow: 0 0 0 3px rgba(29, 94, 140, .18); }
.bp-previa { font: 700 var(--bp-mono)/1.1 var(--font-mono); color: var(--info); text-align: center; overflow-wrap: anywhere; }
.bp-previa.ambar { color: var(--warn); }
.bp-previa.ruim { color: var(--danger); }
.bp-previa.aviso { font: 600 18px/24px var(--font); }
.bp-rapidos { display: flex; gap: 8px; flex-wrap: wrap; }
.bp-rapidos .btn { flex: 1 1 0; min-height: 48px; border: 1px solid var(--line); background: var(--surface); }
.bp-teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bp-teclado .btn { min-height: 52px; font: 600 26px/1 var(--font); border: 1px solid var(--line); background: var(--surface); }
.bp-teclado .btn.txt { font-size: 16px; }
.bp-fim { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 8px 0 0; background: var(--info-bg); }
.bp-fim .btn { flex: 1 1 0; min-height: var(--bp-alvo); }

/* 6 · listas: ajustes agora e pendências */
.bp-lista { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); }
.bp-lista .tit { display: flex; align-items: center; gap: 8px; font: 600 16px/20px var(--font); }
.bp-lista .sub { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
/* Sem pendência: só a linha do título, com "nada pendente" ao lado. */
.bp-lista-vazio { display: none; font-weight: 400; font-size: 14px; color: var(--ink-muted); }
.bp-lista.vazio .bp-lista-vazio { display: inline; }
.bp-lista.vazio ul { display: none; }
.bp-lista.vazio { padding-top: 8px; padding-bottom: 8px; }
.bp-lista ul { list-style: none; margin: 6px 0 0; padding: 0; }
.bp-lista li { border-top: 1px solid var(--line-soft); }
.bp-lista li.bp-pend-acoes { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 0 0; }
.bp-lista li > button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 6px 0; border: 0; background: transparent; text-align: left;
    cursor: pointer; font: 400 14px/18px var(--font); color: var(--ink); }
.bp-bol { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--cool-steel); }
.bp-bol.ambar { background: var(--warn); }
.bp-bol.vermelho { background: var(--danger); }
.bp-lista .hora { font: 500 12px/16px var(--font-mono); color: var(--ink-muted); flex: none; }
.bp-lista .verbo { font-weight: 600; flex: none; }
.bp-lista .resumo { flex: 1 1 0; min-width: 0; color: var(--ink-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bp-lista li > button .code { font-size: 14px; padding: 1px 6px; flex: none; }
.bp-lista .det { display: none; padding: 0 0 8px 20px; font-size: 14px; line-height: 20px; color: var(--ink-muted); overflow-wrap: anywhere; }
.bp-lista li.aberto .det { display: block; }
.bp-lista .vazio { padding: 8px 0 2px; color: var(--ink-muted); border: 0; }
.bp-aj { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.bp-aj .l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bp-aj .l1 .mono { font: 700 20px/1 var(--font-mono); }
.bp-aj .l1 .verbo { font: 600 16px/20px var(--font); }
.bp-aj .l2 { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; font-size: 14px; line-height: 20px; color: var(--ink-muted); min-width: 0; }
.bp-aj .l2 .nome { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-aj .l2 .pill button { border: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.bp-aj .acao .btn { width: 100%; }
.bp-aj .acao .btn.vaz { border-color: var(--danger); }
.bp-aj.desfeita .l1, .bp-aj.desfeita .l2 { color: var(--ink-muted); text-decoration: line-through; }
.bp-aj .conf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.bp-aj .conf .btn { min-height: 48px; }
.bp-aj .conf .espaco { margin-left: auto; }

/* Tela "Qual conferência?" */
.bp .wms-sala-btn { min-height: 64px; }
.bp .wms-sala-btn strong { display: block; font-size: 20px; line-height: 26px; font-weight: 600; }

@media (min-width: 600px) {
    .bp { --bp-gigante: 44px; --bp-dado: 28px; --bp-mono: 44px; --bp-id: 18px; }
    .bp-voltar { width: auto; padding: 0 14px; }
    .bp-voltar span { display: inline; }
    .bp-modos .curto { display: none; }
    .bp-modos .longo { display: inline; }
    .bp-quem-nome { display: inline; }
    .bp-valor { font-size: 32px; }
    .bp-ctrl { width: auto; margin-left: auto; }
    .bp-ctrl .btn { flex: none; min-height: var(--bp-alvo); font-size: 18px; padding: 6px 14px; }
    .bp-placar { width: auto; margin-left: auto; justify-items: end; text-align: right; }
    .bp-faltam { font-size: 36px; }
    .bp-c-topo .ic { width: 36px; height: 36px; }
    .bp-salas { grid-template-columns: repeat(6, 1fr); }
    .bp-teclado .btn { min-height: 64px; }
    .bp-aj { grid-template-columns: minmax(0, 1fr) auto; }
    .bp-aj .acao { grid-row: 1 / span 2; grid-column: 2; }
    .bp-aj .acao .btn { width: auto; }
    .bp-aj .conf { grid-column: 1 / -1; }
}
/* Tela larga: os botões de palete ao lado do local (guardar) ou da dica (conferir, que já tem o placar
   à direita do local), sem uma linha só para eles. */
@media (min-width: 900px) {
    .bp-ctx-guardar, .bp-ctx-conferir { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 4px; align-items: center; }
    .bp-ctx-guardar { grid-template-areas: "rot rot" "valor ctrl" "dica ctrl"; }
    .bp-ctx-conferir { grid-template-areas: "rot rot" "valor valor" "prog prog" "dica ctrl"; }
    .bp-ctx-guardar > .bp-rot, .bp-ctx-conferir > .bp-rot { grid-area: rot; }
    .bp-ctx-guardar > .bp-valor-linha, .bp-ctx-conferir > .bp-valor-linha { grid-area: valor; }
    .bp-ctx-guardar > .bp-ctrl, .bp-ctx-conferir > .bp-ctrl { grid-area: ctrl; margin-left: 0; }
    .bp-ctx-guardar > .bp-dica, .bp-ctx-conferir > .bp-dica { grid-area: dica; }
    .bp-ctx-conferir > .bp-prog { grid-area: prog; }
    .bp-ctx-guardar .bp-ctrl .btn, .bp-ctx-conferir .bp-ctrl .btn { min-height: 48px; }
}
@media (min-width: 1000px) {
    .bp { --bp-gigante: 52px; --bp-dado: 32px; }
    .bp-salas { grid-template-columns: repeat(8, 1fr); }
}
/* Computador com leitor USB: o teclado físico digita a quantidade */
@media (pointer: fine) {
    .bp-teclado, .bp-rapidos { display: none; }
}
/* Tela baixa (coletor de 5", celular deitado): teclas menores; OK e Cancelar ficam presos embaixo */
@media (max-height: 760px) {
    .bp-teclado .btn { min-height: 46px; }
    .bp-rapidos .btn { min-height: 44px; }
    .bp-painel { gap: 10px; }
}
@media (max-height: 500px) {
    .bp-com-painel .bp-leitura { position: static; }
    .bp-salas { grid-template-columns: repeat(8, 1fr); }
    .bp-salas .btn { min-height: 48px; }
}

/* Salas e endereços */
.wms-salas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.wms-sala-btn, .wms-sala-card { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); color: inherit; text-decoration: none; }
.wms-sala-btn:hover { border-color: #bdbdbd; }
.wms-sala-num { font-size: 18px; font-weight: 600; }

/* Locações: o mapa de todas as locações de cada prefixo */
.lc-barra { position: sticky; top: var(--topo-h, 0); z-index: 20; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
    margin: 18px 0 12px; padding: 10px 0; background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.lc-busca { display: flex; align-items: center; gap: 6px; flex: 1 1 240px; max-width: 360px; height: var(--control-h); padding: 0 10px;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-input); color: var(--ink-muted); }
.lc-busca input { border: 0; outline: 0; padding: 0; height: 100%; min-width: 0; flex: 1; background: transparent; box-shadow: none; }
.lc-busca:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.lc-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.lc-filtro { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid var(--line);
    border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 14px; cursor: pointer; }
.lc-filtro .mini { color: var(--ink-muted); }
.lc-filtro.ativo { border-color: var(--ink); background: var(--ink); color: #fff; }
.lc-filtro.ativo .mini { color: #d4d4d4; }
.lc-cor { width: 10px; height: 10px; border-radius: 3px; display: inline-block; border: 1px solid transparent; }
.lc-ir { display: flex; flex-wrap: wrap; gap: 2px 6px; width: 100%; font: 500 12px/1.6 var(--font-mono); }
.lc-ir a { color: var(--ink-muted); text-decoration: none; padding: 0 2px; }
.lc-ir a:hover { color: var(--brand-strong); }
.lc-mapa { display: flex; flex-direction: column; gap: 10px; }
.lc-prefixo { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; background: var(--card);
    scroll-margin-top: calc(var(--topo-h, 0px) + 150px); }
.lc-head { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-bottom: 8px; }
.lc-nome { font: 600 20px/1 var(--font-mono); letter-spacing: .04em; border: 0; background: transparent; padding: 0; color: var(--ink); cursor: pointer; }
.lc-abrir { margin-left: auto; border: 0; background: transparent; padding: 4px; color: var(--ink-muted); cursor: pointer; display: inline-flex; border-radius: var(--radius-sm); }
.lc-abrir:hover { color: var(--ink); background: var(--bg); }
.lc-abrir .ic { transition: transform .15s ease; }
.lc-prefixo:not(.fechado) .lc-abrir .ic { transform: rotate(90deg); }
.lc-head { cursor: pointer; }
.lc-head details, .lc-head form { cursor: auto; }
/* Ocupação do prefixo: as mesmas cores da grade, em uma barrinha. */
.lc-ocup { display: inline-flex; width: 140px; height: 10px; border-radius: 999px; overflow: hidden; background: #ececec; flex: none; }
.lc-ocup > span { display: block; height: 100%; }
.lc-ocup > .o { background: #a8a8a8; }
.lc-ocup > .s { background: #7aaed3; }
.lc-ocup > .m { background: #e0ac3e; }
.lc-ocup > .l { background: #6dbb8b; }
.lc-ocup > .f { background: var(--danger); }
.lc-faixa { font-family: var(--font-mono); }
/* Reserva × ERP: a linha traz produto, ERP, reserva e situação; o resto abre ao tocar. */
.rxe-tabela tr.rxe-linha { cursor: pointer; }
.rxe-tabela tr.rxe-linha:hover td { background: #f6f6f6; }
.rxe-tabela tr.rxe-linha.aberta td { background: #fafafa; border-bottom-color: transparent; }
.rxe-abrir { border: 0; background: transparent; padding: 4px; color: var(--ink-muted); cursor: pointer; display: inline-flex; border-radius: var(--radius-sm); }
.rxe-abrir .ic { transition: transform .15s ease; }
.rxe-linha.aberta .rxe-abrir .ic { transform: rotate(90deg); color: var(--ink); }
.rxe-tabela tr.rxe-det td { background: #fafafa; padding-top: 4px; }
.rxe-det-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.6fr); gap: 12px 20px; padding: 4px 0 8px; }
.rxe-det-tit { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); margin-bottom: 4px; }
@media (max-width: 1100px) { .rxe-det-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rxe-det-pistas { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .rxe-abrir .ic { transition: none; } }
@media (prefers-reduced-motion: reduce) { .lc-abrir .ic { transition: none; } }
.lc-prefixo.fechado:not(.forcado) .lc-grade { display: none; }
.lc-prefixo.fechado:not(.forcado) .lc-head { margin-bottom: 0; }
.lc-edit { margin-left: 0; }
.lc-edit summary { cursor: pointer; font-size: 14px; color: var(--ink-muted); }
.lc-edit-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 8px; width: 100%; }
.lc-edit-form label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--ink-muted); margin: 0; }
.lc-edit-form input { width: 110px; }
.lc-edit-form .lc-obs input { width: 180px; }
.lc-edit[open] { flex-basis: 100%; margin-left: 0; }
.lc-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px; }
.lc { height: 30px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: #e9e9e9; color: var(--ink);
    font: 500 12px/1 var(--font-mono); cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .lc:hover { border-color: #9e9e9e; } }
.lc:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
/* Cada estado tem a cor e um desenho (livre vazada, ocupada cheia, em mudança tracejada, candidata
   pontilhada, fora da faixa riscada): a legenda usa as mesmas cores fortes da barra de ocupação. */
.lc.l { background: #ffffff; color: var(--ok); border: 1.5px solid #6dbb8b; }
.lc-cor.l { background: #ffffff; border: 2px solid #6dbb8b; }
.lc-cor.o { background: #a8a8a8; border-color: #a8a8a8; }
.lc.m { background: var(--warn-bg); color: var(--warn); border: 1.5px dashed #e0ac3e; }
.lc-cor.m { background: #e0ac3e; border: 2px dashed #8a5200; }
.lc.s { background: var(--info-bg); color: var(--info); border: 1.5px dotted #7aaed3; }
.lc-cor.s { background: #7aaed3; border: 2px dotted var(--info); }
.lc.f { background: repeating-linear-gradient(135deg, var(--danger-bg) 0 4px, #f4c7c2 4px 6px); color: var(--danger); border-color: #f4c7c2; }
.lc-cor.f { background: repeating-linear-gradient(135deg, var(--danger) 0 3px, #ffffff 3px 5px); border-color: var(--danger); }
.lc.r { box-shadow: inset 0 0 0 2px var(--danger); }
.lc-cor.r { background: #fff; border: 2px solid var(--danger); }
.lc.x { opacity: .14; }
.lc.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.lc-painel { position: fixed; right: 16px; bottom: 16px; z-index: 900; width: min(380px, calc(100vw - 32px)); max-height: 70vh; overflow: auto;
    padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-pop); }
.lc-fechar { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 6px;
    background: transparent; color: var(--ink-muted); cursor: pointer; }
.lc-fechar:hover { background: var(--surface-card); }
.lc-p-topo { display: flex; align-items: center; gap: 8px; margin: 0 36px 10px 0; }
.lc-p-sku { font: 600 26px/1 var(--font-mono); letter-spacing: .03em; }
.lc-p-prod { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.lc-p-prod strong { display: block; overflow-wrap: anywhere; }
.lc-p-aviso { margin: 8px 0 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--warn-bg); color: var(--warn); font-size: 14px; }
.lc-p-acoes { margin-top: 10px; }
@media (pointer: coarse) { .lc { height: 38px; font-size: 13px; } .lc-grade { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); } }
@media (max-width: 540px) {
    /* A barra fixa não pode comer a tela: filtros e prefixos numa linha que rola de lado. */
    .lc-barra { margin-top: 12px; gap: 6px; padding: 8px 0; }
    .lc-busca { max-width: none; flex-basis: 100%; }
    .lc-filtros, .lc-ir { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
    .lc-filtros::-webkit-scrollbar, .lc-ir::-webkit-scrollbar { display: none; }
    .lc-filtro { flex-shrink: 0; }
    .lc-ir a { flex-shrink: 0; padding: 2px 4px; }
    .lc-painel { right: 8px; left: 8px; bottom: 8px; width: auto; max-height: 60vh; }
}
/* Reserva × ERP: no celular, os seis cartões em duas colunas, só número e diferença */
@media (max-width: 540px) {
    .grid.cards.rxe-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .rxe-tabela tr.rxe-det { margin-top: -10px; border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }
    .rxe-tabela tr.rxe-linha.aberta { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
    .rxe-cards .kpi { padding: 10px 12px; }
    .rxe-cards .rxe-desc { display: none; }
    .rxe-cards .pill { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .bp-cartao.flash-in, .bp-leitura.foco .bp-ponto, .bp-valor.piscou { animation: none; } }

/* ═══════════════════════════════════════════════════
   IMPRESSÃO DIRETA: "Bipe a impressora" e a impressora do aparelho
   ═══════════════════════════════════════════════════ */
.impr-fundo { position: fixed; inset: 0; z-index: 900; background: rgba(26, 26, 26, .5); display: flex; align-items: center; justify-content: center; padding: 16px; animation: imp-surge .16s ease; }
.impr-modal { position: relative; width: min(100%, 440px); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--card); border-radius: 16px; padding: 22px; box-shadow: 0 24px 64px rgba(26, 26, 26, .28); display: flex; flex-direction: column; gap: 16px; animation: imp-sobe .2s cubic-bezier(.2, .8, .2, 1); }
.impr-ic { display: inline-flex; flex: none; }
.impr-cab { display: flex; align-items: center; gap: 12px; padding-right: 36px; }
.impr-cab-ic { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #fcebe1; color: var(--brand-strong); }
.impr-tit { font: 600 18px/24px var(--font); color: var(--ink); }
.impr-sub { color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.impr-fechar { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--ink-muted); cursor: pointer; }
.impr-fechar:hover { background: var(--bg); color: var(--ink); }
/* O quadro de leitura: o campo fica por cima, invisível (a leitura não aparece). */
.impr-leitor { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 164px; padding: 20px 16px; border: 2px dashed var(--line); border-radius: 14px; background: var(--bg); text-align: center; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.impr-leitor .impr-campo { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 14px; opacity: 0; font-size: 16px; color: transparent; caret-color: transparent; background: transparent; box-shadow: none; cursor: pointer; }
.impr-leitor-ic { color: var(--muted-soft); margin-bottom: 6px; transition: color .15s ease; }
.impr-leitor-tit { font: 600 16px/22px var(--font); color: var(--ink); }
.impr-leitor-dica { font-size: 14px; line-height: 20px; color: var(--ink-muted); max-width: 300px; min-height: 18px; }
.impr-leitor[data-estado="pronto"], .impr-leitor[data-estado="lendo"], .impr-leitor[data-estado="conferindo"] { border-style: solid; border-color: var(--accent); background: #fff8f4; }
.impr-leitor[data-estado="pronto"] .impr-leitor-ic, .impr-leitor[data-estado="lendo"] .impr-leitor-ic, .impr-leitor[data-estado="conferindo"] .impr-leitor-ic { color: var(--accent); }
.impr-leitor[data-estado="pronto"] .impr-leitor-ic { animation: imp-pulsa 1.6s ease-in-out infinite; }
.impr-leitor[data-estado="lendo"] .impr-leitor-ic, .impr-leitor[data-estado="conferindo"] .impr-leitor-ic { animation: imp-pulsa .7s ease-in-out infinite; }
.impr-leitor[data-estado="ok"] { border-style: solid; border-color: var(--ok); background: var(--ok-bg); }
.impr-leitor[data-estado="ok"] .impr-leitor-ic, .impr-leitor[data-estado="ok"] .impr-leitor-tit { color: var(--ok); }
.impr-leitor[data-estado="erro"] { border-style: solid; border-color: var(--danger); background: var(--danger-bg); }
.impr-leitor[data-estado="erro"] .impr-leitor-ic, .impr-leitor[data-estado="erro"] .impr-leitor-tit { color: var(--danger); }
.impr-ou { display: flex; align-items: center; gap: 12px; margin: -4px 0; color: var(--ink-muted); font-size: 14px; }
.impr-ou::before, .impr-ou::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.impr-ultima { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.impr-ultima:hover { border-color: var(--accent); background: #fff8f4; }
.impr-ultima > .impr-ic:first-child { color: var(--brand-strong); }
.impr-ultima > .impr-ic:last-child { color: var(--muted-soft); }
.impr-ultima-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.impr-ultima-txt b { font-size: 16px; line-height: 22px; overflow-wrap: anywhere; }
.impr-ultima-txt small { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.impr-acoes { display: flex; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.impr-acoes .btn { flex: 1; min-height: 44px; gap: 6px; }
@keyframes imp-surge { from { opacity: 0; } to { opacity: 1; } }
@keyframes imp-sobe { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes imp-pulsa { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .7; } }
@media (max-width: 480px) {
    .impr-modal { padding: 18px; gap: 14px; }
    .impr-cab-ic { display: none; }
    .impr-leitor { min-height: 148px; }
}
@media (prefers-reduced-motion: reduce) { .impr-fundo, .impr-modal, .impr-leitor .impr-leitor-ic { animation: none !important; } }
/* Diálogos (app.js: confirmar, PIN e "Selecionar responsável"): o <dialog> do navegador fica por cima do menu e
   do topo. Título = a pergunta com o objeto; botão principal repete o verbo; sair é "Voltar". */
.dlg { width: min(100% - 32px, 420px); max-height: calc(100vh - 32px); margin: auto; padding: 22px; border: 0; border-radius: 16px;
    background: var(--card); color: var(--ink); box-shadow: 0 24px 64px rgba(26, 26, 26, .28); overflow: auto; animation: imp-sobe .2s cubic-bezier(.2, .8, .2, 1); }
.dlg::backdrop { background: rgba(26, 26, 26, .5); animation: imp-surge .16s ease; }
.dlg.dlg-quem { width: min(100% - 32px, 640px); }
.dlg-tit { margin: 0 0 6px; font: 600 20px/26px var(--font); }
.dlg-texto { margin: 0 0 8px; color: var(--ink-muted); font-size: 14px; line-height: 20px; white-space: pre-line; }
.dlg-erro { margin: 8px 0 0; color: var(--danger); font-weight: 600; font-size: 14px; line-height: 20px; }
.dlg-erro:empty { display: none; }
.dlg-acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.dlg-acoes .btn { flex: 1; min-height: 44px; }
.dlg-pin-caixas { display: flex; gap: 12px; justify-content: center; margin-top: 14px; }
.pin-box { width: 56px; height: 64px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); font-size: 26px; font-weight: 700; text-align: center; color: var(--ink); outline: none; transition: border-color .15s; }
.pin-box:focus { border-color: var(--ink); }
.pin-box.filled { border-color: var(--ink); background: var(--bg); }
.dlg-teclado { margin-top: 12px; }
.dlg-pin-nome { margin-top: 12px; font-weight: 600; }
.dlg-continuar { width: 100%; min-height: 64px; margin-top: 12px; font-size: 18px; white-space: normal; }
.dlg-quem .quem-grade { margin-top: 12px; }
.dlg-quem .quem-grade[hidden], .dlg-quem-pin[hidden], .dlg-continuar[hidden] { display: none; }
.dlg-quem .quem-nome.primary .quem-sub { color: rgba(255, 255, 255, .8); }
.dlg-quem-pin .btn.ghost { display: flex; margin: 12px auto 0; }
@media (max-width: 480px) { .dlg { padding: 18px; } .dlg-pin-caixas { gap: 8px; } .pin-box { width: 52px; height: 60px; } }
@media (prefers-reduced-motion: reduce) { .dlg, .dlg::backdrop { animation: none !important; } }
/* Bipar: a impressora guardada no aparelho (modo ajustar quantidade). */
.bp-imp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.bp-imp b { color: var(--ink); }
.bp-imp .ic { width: 16px; height: 16px; flex: none; }
/* Configurações: as impressoras */
.cfg-imp-acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cfg-imp-acoes form { margin: 0; }
.cfg-imp-uuid { font: 12px/16px var(--font-mono); color: var(--ink-muted); word-break: break-all; }

/* Tela de toque (celular, tablet, coletor): alvos de pelo menos 44 px, para o dedo de luva. */
@media (pointer: coarse) {
    .btn { min-height: max(var(--control-h), 44px); }
    .btn.mini, .bip-rotulo .bip-digitar { min-height: 44px; padding: 0 12px; font-size: 14px; }
    .chip { min-height: 44px; padding: 0 14px; }
    .toast-close { min-width: 44px; min-height: 44px; margin: -12px -12px -12px 0; }
}

/* Ordens no celular: a linha compacta de Minhas tarefas; os chips numa linha que rola de lado; a
   tarefa mais curta (o endereço numa linha só, o produto em até 3 linhas, o resto fica no resumo). */
.ordens-cel { display: none; }
@media (max-width: 540px) {
    .dl > div { grid-template-columns: 1fr; gap: 0; }
    .tarefa-topo { grid-template-columns: 1fr; gap: 8px; }
    .tarefa-topo .code.lg { justify-self: start; }
    .tarefa-prod { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
    .tarefa-qtd { text-align: left; display: flex; align-items: baseline; gap: 6px; }
    .ordem-head p, .so-pc { display: none; }
}
@media (max-width: 899px) {
    .ordens-cel { display: block; }
    .ordens-pc { display: none; }
    .chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
    .chips::-webkit-scrollbar { display: none; }
    .chip, .chips .filtros-abrir { flex: none; }
}

/* Coletor: barra de baixo com Início, Tarefas, Bipar e Mais (celular; no computador a barra lateral faz isso). */
.barra-baixo { display: none; }
@media (max-width: 899px) {
    .barra-baixo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 850; display: grid; grid-template-columns: repeat(4, 1fr);
        height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: rgba(255, 255, 255, .98); border-top: 1px solid var(--line); }
    .bb-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: transparent; color: var(--ink-muted); font: 500 12px/14px var(--font); text-decoration: none; cursor: pointer; }
    .bb-item svg { width: 22px; height: 22px; }
    .bb-item.active { color: var(--brand-strong); font-weight: 600; }
    .bb-item .contador { position: absolute; top: 5px; left: calc(50% + 4px); }
    .shell.com-barra-baixo .container { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
    .shell.com-barra-baixo .toast-stack { bottom: calc(68px + env(safe-area-inset-bottom)); }
    .shell.com-barra-baixo .concluir-barra { bottom: calc(56px + env(safe-area-inset-bottom)); }
}
/* Inventário: o índice do que há na tela (âncoras com contagem) e a idade da última conferência como estado. */
.indice { margin-bottom: 14px; }
.indice .chip b { font-weight: 600; color: var(--ink); }
.indice .chip:hover { border-color: var(--ink); }
/* Login no celular: a marca numa linha só; o formulário é o que importa. */
.login-marca { display: flex; align-items: center; gap: 12px; }
.login-marca .login-logo { margin: 0; }
.login-nome { font: 600 16px/22px var(--font); }
.senha-campo { position: relative; }
.senha-campo input { padding-right: 84px; }
.senha-campo .btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 32px; padding: 0 10px; font-size: 14px; }
@media (max-width: 899px) {
    .login-brand { padding: 16px 20px; }
    .login-hero, .login-hr, .login-texto { display: none; }
}

/* Painel e Início: "Precisa de ação" (linhas com o verbo que resolve), o período e o frescor do ERP. */
.acao-lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.acao-lista li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.acao-lista li:first-child { border-top: 0; }
.acao-txt { font-size: 14px; line-height: 20px; }
.acao-verbo { font-size: 14px; font-weight: 600; color: var(--brand-strong); text-decoration: none; white-space: nowrap; }
.acao-verbo:hover { text-decoration: underline; }
.em-dia { margin-top: 10px; }
.painel-periodo { margin: 0; }
.topbar-erp { display: none; }
@media (min-width: 900px) {
    .topbar-erp { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 999px; background: var(--surface-card); color: var(--ink-muted); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
    .topbar-erp.velho { background: var(--warn-bg); color: var(--warn); }
}
.home-proxima { display: block; margin: 16px 0 0; color: var(--ink); text-decoration: none; border: 2px solid var(--ink); }
.home-proxima-linha { display: flex; align-items: center; gap: 14px; margin: 8px 0 12px; }
.home-proxima-txt { display: flex; flex-direction: column; min-width: 0; }
.home-proxima-txt strong { font-size: 16px; line-height: 22px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.home-proxima-txt small { color: var(--ink-muted); font-size: 14px; }
.home-proxima .btn { width: 100%; min-height: 48px; font-size: 16px; }
.home-acao { margin-top: 16px; }
.home-acao .order-head a { text-decoration: none; color: var(--brand-strong); font-weight: 600; }
.home-tile .home-num { color: var(--ink-muted); }
.home-tile .home-num.pend { color: var(--brand-strong); }

/* ---------- Painel: barras, tendência, nível do BIN e ranking (antes num <style> da tela) ---------- */
.bar-list { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 38px; align-items: center; gap: 10px; }
.bar-label { font-size: 14px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { background: var(--line-soft); border-radius: 999px; height: 12px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; min-width: 2px; transition: width .4s ease; }
.bar-val { font-weight: 700; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.trend-svg { display: block; }
.trend-bar { fill: var(--brand-strong); }
.trend-bar.zero { fill: var(--cool-steel); }
.trend-num { fill: var(--ink); font-size: 12px; font-weight: 700; font-family: inherit; }
.trend-num.zero { fill: var(--ink-muted); font-weight: 500; }
.trend-axis { fill: var(--ink-muted); font-size: 12px; font-family: inherit; }
/* Nível do BIN (BIN baixo): barrinha de vazio a cheio no lugar do "0%" vermelho. */
.nivel { display: inline-flex; align-items: center; gap: 8px; }
.nivel-barra { width: 64px; height: 8px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.nivel-barra > span { display: block; height: 100%; border-radius: 999px; background: var(--warn); min-width: 2px; }
.nivel-num { font-size: 14px; color: var(--ink-muted); font-variant-numeric: tabular-nums; min-width: 32px; }
.rank-row { display: flex; align-items: center; gap: 10px; }
.bar-list.ranking .bar-row { grid-template-columns: minmax(0, 1fr) 90px 38px; }
.bar-list.ranking .bar-label { white-space: normal; }
.rank-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.rank-text .rank-desc { max-width: 100%; }
.rank-desc { font-size: 14px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-pos { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-strong); color: #ffffff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---------- Telas de bipar (Última peça, Bipar master, Nova etiqueta): uma linguagem só ----------
   Uma coisa grande no meio (o alvo do bip ou o que foi lido), a ação no polegar (a folha de baixo) e a
   resposta na tela inteira (uma cor, uma palavra). A tela ocupa o aparelho inteiro: a faixa fina do topo
   tem o título e o que é contexto (onde estou, quem sou, a fila) em chips, só quando existe.
   No celular: coluna única, a folha sobe de baixo. Do tablet deitado para cima: o corpo à esquerda e a
   folha (ou os nomes, na Última peça) à direita. Componentes em app.js (window.BQ). */
html.bq-tela, html.bq-tela body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.bq-tela body { touch-action: manipulation; }
html.bq-tela .shell { min-height: 0; }
.bq { -webkit-tap-highlight-color: transparent; position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; background: var(--surface-card); color: var(--ink);
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }
.bq svg.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* faixa do topo */
.bq-strip { flex: none; display: flex; align-items: center; gap: 8px; width: 100%; max-width: 1180px; margin: 0 auto; padding: 10px 16px 8px; min-height: 56px; }
.bq-volta { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; margin-left: -8px; border-radius: 12px; color: var(--ink-muted); opacity: .7; text-decoration: none; }
.bq-volta:hover, .bq-volta:focus-visible { opacity: 1; background: var(--surface); }
.bq-titulo { flex: 1; min-width: 0; margin: 0; font: 600 18px/22px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; max-width: 46vw; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink); font: 600 14px/1 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.bq-chip > span:not(.bq-av) { overflow: hidden; text-overflow: ellipsis; }
.bq-chip svg.ic { width: 18px; height: 18px; color: var(--accent); }
.bq-chip.so-icone { padding: 0 9px; }
.bq-chip.ambar { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.bq-chip.ambar svg.ic, .bq-chip.vermelho svg.ic, .bq-chip.azul svg.ic { color: currentColor; }
.bq-chip.vermelho { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.bq-chip.azul { border-color: var(--info); background: var(--info-bg); color: var(--info); }
.bq-chip.escuro { border-color: var(--ink); background: var(--ink); color: #ffffff; }
.bq-chip.escuro svg.ic { color: var(--accent); }
.bq-av { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #ffffff; font: 700 11px/24px var(--font); text-align: center; letter-spacing: .02em; }
.bq-chip.sem-pessoa .bq-av { background: var(--brand-strong); }
.bq-rede { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.bq-rede.sem { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.bq-anel { position: relative; flex: none; width: 36px; height: 36px; }
.bq-anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bq-anel circle { fill: none; stroke-width: 4; }
.bq-anel .fundo { stroke: var(--line); }
.bq-anel .feito { stroke: var(--ok); stroke-linecap: round; transition: stroke-dashoffset .4s ease; }
.bq-anel b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 12px/1 var(--font); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .bq-chip .so-largo { display: none; } .bq-chip.pessoa { padding-right: 6px; } }

/* faixa de estado (só o que pede ação: sessão caída, aparelho que não guarda, leituras de outra pessoa) */
.bq-faixa { flex: none; display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; width: 100%; max-width: 1180px; margin: 0 auto 6px; padding: 8px 16px;
    font: 600 14px/20px var(--font); }
.bq-faixa > div { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; width: 100%; padding: 8px 12px; border-radius: 14px; background: var(--warn-bg); color: var(--warn); }
.bq-faixa.vermelha > div { background: var(--danger-bg); color: var(--danger); }
.bq-faixa.azul > div { background: var(--info-bg); color: var(--info); }
.bq-faixa > div > span { flex: 1 1 200px; min-width: 0; }
.bq-faixa .bq-btn { min-height: 44px; font-size: 15px; }

/* o palco: corpo (rola), lado (fica: os nomes) e a folha (a ação) */
.bq-palco { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; max-width: 1180px; margin: 0 auto; }
.bq-corpo { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 16px; }
.bq-lado { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 0 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
.bq.com-folha .bq-lado { display: none; }
.bq-folha { flex: none; display: grid; gap: 12px; max-height: 82%; overflow: auto; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px 24px 0 0; background: var(--surface); box-shadow: 0 -8px 30px rgba(26, 26, 26, .14); animation: bq-sobe .2s ease-out both; }
.bq-folha[hidden] { display: none; }
.bq-folha::before { content: ""; justify-self: center; width: 40px; height: 4px; margin: -2px 0 0; border-radius: 2px; background: var(--line); }
.bq-folha h2 { margin: 0; font: 600 20px/26px var(--font); text-wrap: balance; }
.bq-folha .bq-sub { margin: -6px 0 0; color: var(--ink-muted); font-size: 15px; line-height: 21px; }
@keyframes bq-sobe { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* o alvo: onde se bipa. O campo do leitor fica invisível por cima dele (tocar no alvo é tocar no campo). */
.bq-alvo { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 196px; padding: 22px 20px;
    border-radius: 20px; background: var(--surface); box-shadow: 0 1px 2px rgba(26, 26, 26, .06), 0 8px 24px rgba(26, 26, 26, .07); text-align: center; overflow: hidden;
    border: 2px solid transparent; transition: border-color .15s ease; cursor: pointer; }
.bq-alvo-ic { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; color: var(--ink); }
.bq-alvo-ic svg.ic { width: 64px; height: 64px; stroke-width: 1.5; }
.bq-alvo-tit { font: 600 22px/1.2 var(--font); text-wrap: balance; }
.bq-alvo-sub { color: var(--ink-muted); font-size: 15px; line-height: 20px; text-wrap: balance; }
.bq-alvo-linha { position: absolute; left: 12%; right: 12%; top: 24%; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 12px rgba(226, 105, 44, .6); opacity: 0; }
.bq-alvo.pronto .bq-alvo-linha { animation: bq-varre 2.2s ease-in-out infinite; }
@keyframes bq-varre { 0%, 100% { transform: translateY(0); opacity: .2; } 50% { transform: translateY(80px); opacity: .9; } }
.bq-alvo.parado { border-color: var(--warn); background: var(--warn-bg); }
.bq-alvo.parado .bq-alvo-ic, .bq-alvo.parado .bq-alvo-tit { color: var(--warn); }
.bq-alvo.pausado { opacity: .55; }
.bq-alvo-inp { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
    color: transparent; caret-color: transparent; font-size: 16px; opacity: 0; cursor: pointer; outline: none; }
.bq-alvo-ultimo { display: none; }
.bq-digitar { position: absolute; z-index: 2; right: 10px; bottom: 10px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent;
    color: var(--ink-muted); font: 600 14px/1 var(--font); cursor: pointer; }
@media (pointer: fine) { .bq-digitar { display: none; } }
/* Grande, o "Digitar" fica no canto de cima: embaixo ele cobria a linha de baixo do texto. */
.bq-alvo:not(.compacto) .bq-digitar { top: 8px; bottom: auto; }
/* digitando: o teclado de código da tela está aberto embaixo e mostra o que foi digitado; o quadro só fica marcado */
.bq-alvo.digitando { outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: var(--focus-ring); }
.bq-alvo.digitando .bq-digitar { display: none; }
/* O teclado de código (app.js, Digitar): só letras e números, preso embaixo, no lugar do teclado do aparelho. */
.tecl-codigo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface-card);
    border-top: 1px solid var(--line); box-shadow: 0 -10px 28px rgba(0, 0, 0, .14); touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.tecl-codigo[hidden] { display: none; }
.tecl-codigo-topo { display: flex; align-items: center; gap: 8px; margin: 0 auto 8px; max-width: 640px; }
.tecl-codigo-valor { flex: 1 1 auto; min-width: 0; height: 52px; display: flex; align-items: center; padding: 0 14px; overflow: hidden; white-space: nowrap; border-radius: 12px;
    background: var(--ink); color: #ffffff; font: 700 24px/1 var(--font-mono); letter-spacing: .05em; }
.tecl-codigo-valor:empty::before { content: attr(data-vazio); color: rgba(255, 255, 255, .5); font: 500 17px/1 var(--font); letter-spacing: 0; }
.tecl-codigo-x { flex: 0 0 52px; height: 52px; border: 0; border-radius: 12px; background: var(--surface); color: var(--ink); font: 400 30px/1 var(--font); cursor: pointer; }
.tecl-codigo-grade { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; max-width: 640px; margin: 0 auto; }
.tecl-codigo-grade button { height: 50px; min-height: 0; padding: 0; border: 0; border-radius: 10px; background: var(--surface); color: var(--ink);
    font: 700 20px/1 var(--font); box-shadow: 0 1px 0 var(--line); cursor: pointer; }
.tecl-codigo-grade button.num { background: #e9e9e9; font-family: var(--font-mono); }
.tecl-codigo-grade button:active { background: var(--line); }
.tecl-codigo-grade button.vazio { visibility: hidden; }
.tecl-codigo-grade button.acao { font-size: 16px; font-weight: 600; }
.tecl-codigo-grade button.apagar, .tecl-codigo-grade button.limpar { grid-column: span 3; font-size: 20px; }
.tecl-codigo-grade button.limpar { font-size: 16px; }
.tecl-codigo-grade[hidden] { display: none; }
.tecl-codigo-grade.numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 420px; }
.tecl-codigo-grade.numeros button { height: 58px; font-size: 26px; }
.tecl-codigo-grade.numeros button.apagar, .tecl-codigo-grade.numeros button.limpar { grid-column: auto; }
.tecl-codigo-grade.numeros button.limpar { font-size: 16px; }
.tecl-codigo-grade.numeros button.ok { grid-column: 1 / -1; font-size: 18px; }
.tecl-codigo-grade button.ok { grid-column: span 7; background: var(--brand-strong); color: var(--on-brand); font-size: 18px; }
/* A tela sobe o que ficaria atrás do teclado. */
body.com-tecl-codigo { padding-bottom: 330px; }
/* depois de ler: o alvo encolhe numa linha e o que foi lido ocupa o meio */
.bq-alvo.compacto { min-height: 0; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 14px; text-align: left; }
.bq-alvo.compacto .bq-alvo-ic { width: 28px; height: 28px; margin: 0; color: var(--ink-muted); }
.bq-alvo.compacto .bq-alvo-ic svg.ic { width: 28px; height: 28px; stroke-width: 1.8; }
.bq-alvo.compacto .bq-alvo-txt { flex: 1; min-width: 0; }
.bq-alvo.compacto .bq-alvo-tit { font-size: 16px; }
.bq-alvo.compacto .bq-alvo-sub { font-size: 14px; }
.bq-alvo.compacto .bq-alvo-linha { display: none; }
.bq-alvo.compacto .bq-alvo-ultimo { display: inline-flex; flex: none; max-width: 46%; overflow: hidden; text-overflow: ellipsis; }
.bq-alvo.compacto .bq-digitar { position: static; flex: none; }
.bq-alvo.compacto.pronto { border-color: transparent; }
.bq-alvo.compacto.pronto .bq-alvo-ic { color: var(--ok); }
.bq-alvo.treme { animation: bq-treme .35s ease; }
@keyframes bq-treme { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (max-width: 480px) { .bq-alvo.compacto .bq-alvo-sub { display: none; } }

/* o que foi lido */
.bq-hero { flex: none; display: grid; gap: 12px; padding: 18px; border-radius: 20px; background: var(--surface); box-shadow: 0 1px 2px rgba(26, 26, 26, .06), 0 8px 24px rgba(26, 26, 26, .07);
    animation: bq-sobe .2s ease-out both; }
.bq-hero[hidden] { display: none; }
.bq-hero.conferindo { outline: 3px solid var(--warn); outline-offset: -3px; }   /* conferindo a sala: o que não for bipado até encerrar vira não localizado */
.bq-hero.conferindo .bq-hero-topo .bq-meta { color: var(--warn); font-weight: 700; }
.bq-hero-topo { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.bq-hero .code.lg { font-size: 40px; line-height: 48px; padding: 4px 14px; border-radius: 12px; }
.bq-hero .code.sugerido { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.bq-meta { color: var(--ink-muted); font-size: 15px; }
.bq-produto { font: 600 20px/1.25 var(--font); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bq-fatos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bq-fato { min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--surface-card); }
.bq-fato small { display: block; color: var(--ink-muted); font-size: 13px; line-height: 16px; font-weight: 600; }
.bq-fato b { display: block; font: 700 26px/32px var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-fato b small { display: inline; font: 500 14px/1 var(--font); color: inherit; opacity: .75; margin-left: 2px; }
.bq-fato.destaque { background: var(--brand-strong); color: #ffffff; }
.bq-fato.destaque small { color: rgba(255, 255, 255, .88); }
.bq-linha { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-card); font-weight: 600; font-size: 16px; }
.bq-linha svg.ic { color: var(--accent); }
.bq-linha.prateleira { font-weight: 500; }
/* O CODID (o número grande da etiqueta da Caixa Master): grande, sem a tarja preta, que é só do SKU. */
.bq-codid { font: 700 52px/1 var(--font-mono); letter-spacing: -.01em; color: var(--ink); }
.bq-hero-topo.cx-topo { justify-content: space-between; }
.bq-hero-topo.cx-topo .bq-meta { white-space: nowrap; }
/* A linha do topo cabe no coletor (TC22, ~360px): os números grandes encolhem com a tela. */
.bq-hero-topo.cx-topo { gap: 6px 8px; min-width: 0; flex-wrap: wrap; }
.bq-hero-topo.cx-topo .bq-meta { font-size: clamp(13px, 3.8vw, 16px); }
.bq-hero-topo.cx-topo .code.lg { font-size: clamp(24px, 8vw, 40px); line-height: 1.2; padding: 4px 10px; }
.bq-hero-topo.cx-topo .bq-codid { font-size: clamp(34px, 12vw, 52px); }
.bq-hero-topo.cx-topo .curva { min-width: 40px; height: 40px; font-size: 24px; }
.codid { flex: none; font: 700 17px/1.2 var(--font-mono); color: var(--ink); }
.bq-linha.prateleira .code { font-size: 18px; }
.bq-linha small { margin-left: auto; color: var(--ink-muted); font-weight: 500; font-size: 14px; text-align: right; }
/* Na caixa bipada: "24 un na caixa" e "está na Sala 4 · Palete 1" não quebram no meio; sem espaço, o local desce. */
.bq-linha.onde { flex-wrap: wrap; row-gap: 4px; }
.bq-linha.onde > span, .bq-linha.onde small { white-space: nowrap; }
.bq-linha.onde .bq-mapa { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--brand); text-decoration: underline; white-space: nowrap; }
.bq-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--warn-bg); color: var(--warn); font: 500 15px/21px var(--font); }
.bq-aviso.vermelho { background: var(--danger-bg); color: var(--danger); }
.bq-aviso.azul { background: var(--info-bg); color: var(--info); }
.bq-aviso svg.ic { margin-top: 1px; }
.bq-aviso b { font-weight: 700; }
.bq-opcoes { display: grid; gap: 8px; }
.bq-opcao { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 14px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface);
    color: var(--ink); text-align: left; font: 600 16px/1.3 var(--font); cursor: pointer; }
.bq-opcao:active { border-color: var(--ink); }
.bq-opcao .code { flex: none; font-size: 16px; }
.bq-opcao small { display: block; color: var(--ink-muted); font-weight: 500; font-size: 14px; }
.bq-sku-campo { display: inline-flex; align-items: center; gap: 8px; }
.bq-sku-campo input { width: 168px; height: 56px; min-height: 0; padding: 0 10px; border: 2px dashed var(--ink); border-radius: 12px; background: var(--surface);
    font: 700 30px/1 var(--font-mono); letter-spacing: .06em; text-align: center; text-transform: uppercase; color: var(--ink); outline: none; }
.bq-sku-campo input:focus { border-style: solid; box-shadow: var(--focus-ring); }
/* Nova etiqueta: o produto de um código só. Fica embaixo, no rodapé da tela (longe do leitor, perto do polegar). */
/* Centralizado sem transform (o :active do botão usa transform: scale e o tiraria do lugar). */
.bq-btn.bq-confirmar-manual { position: fixed; z-index: 20; left: 16px; right: 16px; margin: 0 auto; bottom: calc(16px + env(safe-area-inset-bottom));
    width: auto; max-width: 640px; background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 2px var(--warn), 0 8px 24px rgba(26, 26, 26, .12); }
.bq.com-rodape-fixo .bq-corpo { padding-bottom: 104px; }
.bq-mini-btn { min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-muted); font: 600 15px/1 var(--font); cursor: pointer; }
.bq-mini-btn:hover { background: var(--surface-card); color: var(--ink); }

/* botões */
.bq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 18px; border: 0; border-radius: 16px; background: var(--surface);
    color: var(--ink); font: 600 18px/1.2 var(--font); box-shadow: inset 0 0 0 2px var(--line); cursor: pointer; text-align: center; text-decoration: none; transition: transform .06s ease; }
.bq-btn:active { transform: scale(.985); }
.bq-btn svg.ic { width: 22px; height: 22px; }
.bq-btn.principal { background: var(--brand-strong); color: #ffffff; box-shadow: none; }
.bq-btn.ok { background: var(--ok); color: #ffffff; box-shadow: none; }
.bq-btn.perigo { background: var(--danger-bg); color: var(--danger); box-shadow: none; }
.bq-btn.perigo-forte { background: var(--danger); color: #ffffff; box-shadow: none; }
.bq-btn.leve { background: transparent; color: var(--ink-muted); box-shadow: none; }
.bq-btn[disabled] { opacity: .45; cursor: default; }
.bq-btns { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 8px; }
.bq-btns .bq-btn { min-height: 54px; padding: 0 8px; font-size: 17px; }
.bq-btns.fim { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

/* número grande e teclado */
.bq-valor { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.bq-valor-inp { width: 5.2ch; min-height: 0; height: 64px; padding: 0; border: 0; border-bottom: 3px solid var(--line); border-radius: 0; background: transparent;
    font: 700 52px/1 var(--font-mono); text-align: center; color: var(--ink); caret-color: var(--accent); outline: none; font-variant-numeric: tabular-nums; }
.bq-valor-inp:focus { border-bottom-color: var(--accent); }
.bq-valor-inp::placeholder { color: var(--cool-steel); }
.bq-valor-un { color: var(--ink-muted); font: 500 18px/1 var(--font); }
.bq-previa { min-height: 22px; text-align: center; font: 600 17px/22px var(--font); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.bq-previa.ambar { color: var(--warn); }
.bq-previa.ruim { color: var(--danger); }
.bq-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.bq-chips button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: 600 16px/1 var(--font); cursor: pointer; }
.bq-chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #ffffff; }
.bq-teclas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bq-teclas button { min-height: 54px; border: 0; border-radius: 14px; background: var(--surface-card); color: var(--ink); font: 600 26px/1 var(--font); cursor: pointer; }
.bq-teclas button.acao { font-size: 16px; color: var(--ink-muted); }
.bq-teclas button:active { background: var(--line); }
@media (pointer: fine) { .bq-teclas:not(.sku) { display: none; } }
.bq-stepper { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 8px; align-items: center; }
.bq-stepper button { min-height: 56px; border: 0; border-radius: 16px; background: var(--surface-card); color: var(--ink); font: 600 28px/1 var(--font); cursor: pointer; }
.bq-stepper output { text-align: center; font: 700 36px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.bq-stepper output small { display: block; margin-top: 4px; color: var(--ink-muted); font: 500 14px/18px var(--font); }
.bq-campo-txt { display: flex; gap: 8px; flex-wrap: wrap; }
.bq-campo-txt input { flex: 1 1 220px; min-height: 52px; font-size: 18px; border-radius: 14px; }

/* salas (onde estou) */
.bq-salas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.bq-salas button { min-height: 52px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: 600 20px/1 var(--font); cursor: pointer; }
.bq-salas button.nova { color: var(--cool-steel); }
.bq-salas button.outra { grid-column: span 2; font-size: 16px; color: var(--ink-muted); }
.bq-salas button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #ffffff; }
.bq-modo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px; border-radius: 16px; background: var(--surface-card); }
.bq-modo button { min-height: 48px; padding: 4px 6px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-muted); font: 600 15px/1.15 var(--font); cursor: pointer; }
.bq-modo button small { display: block; font-weight: 500; font-size: 12px; line-height: 15px; }
.bq-modo button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(26, 26, 26, .12); }

/* listas dentro da folha (pendências, ajustes, lista antiga) */
.bq-lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bq-lista li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-card); font-size: 15px; line-height: 20px; }
.bq-lista li > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bq-lista li b { display: block; }
.bq-lista li small { display: block; color: var(--ink-muted); font-size: 14px; }
.bq-lista .bol { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--warn); }
.bq-lista .bol.vermelho { background: var(--danger); }
.bq-lista .bq-btn { min-height: 44px; padding: 0 14px; font-size: 15px; }
.bq-lista li.feito { opacity: .55; }

/* os nomes (Última peça: tocar no nome registra) */
.bq-nomes-rot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font: 600 16px/20px var(--font); }
.bq-nomes-rot small { color: var(--ink-muted); font-size: 14px; font-weight: 500; }
.bq-nomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.bq-nome { min-height: var(--bq-nome-h, 68px); padding: 8px 6px; border: 0; border-radius: 16px; background: var(--surface); color: var(--ink);
    box-shadow: 0 1px 2px rgba(26, 26, 26, .06), 0 6px 18px rgba(26, 26, 26, .07); font: 700 22px/1.1 var(--font); letter-spacing: .01em; min-width: 0; overflow: hidden;
    cursor: pointer; transition: transform .06s ease, opacity .12s ease; }
.bq-nome:active { transform: scale(.97); }
.bq-nome.marcado { box-shadow: inset 0 0 0 3px var(--ink); }
.bq.sem-produto .bq-nome { opacity: .45; }
.bq.enviando .bq-nome { pointer-events: none; opacity: .55; }
.bq-rodape { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bq-rodape .discreto { margin-left: auto; }
.bq-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface);
    color: var(--ink); font: 600 16px/1.1 var(--font); cursor: pointer; text-align: left; }
.bq-toggle svg.ic { color: var(--warn); }
.bq-toggle[aria-pressed="true"] { background: var(--danger); border-color: var(--danger); color: #ffffff; }
.bq-toggle[aria-pressed="true"] svg.ic { color: #ffffff; }
.bq-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 10px; border: 0; background: transparent; color: var(--ink-muted); font: 500 15px/1 var(--font);
    text-decoration: none; cursor: pointer; }
.bq-link.discreto { opacity: .5; }
/* Última peça: o Limpar como o BIN vazio (pílula), em cinza: apaga a leitura da tela. */
.bq-toggle.limpar svg.ic { color: var(--ink-muted); }
.bq-toggle.vazio { align-self: center; justify-content: center; margin-top: 12px; }
/* Última peça: "BIN está sem produto" com a tela vazia. O leitor sai e entra o teclado do SKU: o campo em tarja
   (é SKU), a dica e as teclas, que são as letras até a 2ª posição e os números da 3ª à 5ª. */
.bq.sku-digitando .bq-alvo { display: none; }
.bq-sku-teclado { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; border-radius: 20px;
    background: var(--surface); box-shadow: 0 1px 2px rgba(26, 26, 26, .06), 0 8px 24px rgba(26, 26, 26, .07); }
.bq .bq-sku-inp, .bq .bq-sku-inp:focus { width: 6.6ch; min-height: 0; height: 76px; padding: 0 12px; border: 0; border-radius: 14px; background: var(--ink); color: #ffffff;
    font: 700 48px/1 var(--font-mono); letter-spacing: .08em; text-align: center; caret-color: var(--accent); outline: none; box-shadow: none; }
.bq .bq-sku-inp::placeholder { color: rgba(255, 255, 255, .35); }
.bq-sku-teclado .bq-teclas { width: 100%; }
.bq-sku-teclado .bq-teclas.letras { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.bq-sku-teclado .bq-teclas.letras .acao { grid-column: span 2; }
.bq-sku-teclado .bq-teclas.numeros { max-width: 360px; }
.bq-sku-teclado .bq-teclas button.acao { font-size: 20px; }
/* Última peça no tablet de parede (Samsung 8,7" deitado): uma tela só, sem rolar, sem voltar nem título;
   o leitor e o produto à esquerda, os nomes grandes à direita, BIN vazio e Limpar lado a lado embaixo. */
@media (orientation: landscape) and (min-width: 760px) {
    .bq.up-tela { height: 100dvh; }
    .bq.up-tela .bq-palco { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0 20px; padding: 16px 20px; max-width: none; }
    .bq.up-tela .bq-corpo { grid-column: 1; grid-row: 1; padding: 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
    /* Sem produto na tela, o quadro do leitor ocupa a coluna inteira (a altura do tablet), com o ícone grande. */
    .bq.up-tela .bq-alvo:not(.compacto) { flex: 1 1 auto; min-height: 0; gap: 10px; }
    .bq.up-tela .bq-alvo:not(.compacto) .bq-alvo-ic, .bq.up-tela .bq-alvo:not(.compacto) .bq-alvo-ic svg.ic { width: 120px; height: 120px; }
    .bq.up-tela .bq-alvo:not(.compacto) .bq-alvo-tit { font-size: 34px; }
    .bq.up-tela .bq-alvo-sub:empty { display: none; }
    .bq.up-tela .bq-lado, .bq.up-tela .bq-folha { grid-column: 2; grid-row: 1; min-height: 0; overflow: auto; }
    .bq.up-tela .bq-lado { padding: 0; display: flex; flex-direction: column; gap: 12px; max-height: none; background: none; box-shadow: none; border-radius: 0; }
    .bq.up-tela .bq-nomes-rot { font-size: 20px; line-height: 24px; }
    .bq.up-tela .bq-nomes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .bq.up-tela .bq-nome { --bq-nome-h: 92px; font-size: 26px; }
    .bq.up-tela .bq-rodape { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; }
    .bq.up-tela .bq-rodape .bq-toggle, .bq.up-tela .bq-toggle.vazio { justify-content: center; min-height: 64px; font-size: 20px; }
    .bq.up-tela .bq-toggle.vazio { flex: 0 0 auto; align-self: stretch; margin-top: 16px; }
    .bq.up-tela .bq-sku-teclado { flex: 1 1 auto; min-height: 0; }
    .bq.up-tela .bq-rodape .limpar { grid-column: 2; }
    .bq.up-tela .bq-palco::after { content: none; }
}
.bq-link.discreto:hover, .bq-link.discreto:focus-visible { opacity: 1; }

/* a resposta: a tela inteira numa cor, uma palavra e o dado */
.bq-resposta { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: calc(28px + env(safe-area-inset-top, 0px)) 28px calc(28px + env(safe-area-inset-bottom, 0px)); color: #ffffff; text-align: center; animation: bq-surge .16s ease-out both; }
@keyframes bq-surge { from { opacity: 0; } to { opacity: 1; } }
.bq-resposta.verde { background: var(--ok); }
.bq-resposta.azul { background: var(--info); }
.bq-resposta.roxo { background: var(--espera); }
.bq-resposta.ambar { background: var(--warn); }
.bq-resposta.vermelho { background: var(--danger); }
.bq-resposta.cinza { background: #4a4a4a; }
.bq-resposta .circ { width: 104px; height: 104px; }
.bq-resposta .circ circle, .bq-resposta .circ path { fill: none; stroke: #ffffff; stroke-linecap: round; stroke-linejoin: round; }
.bq-resposta .circ circle { stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: bq-traca .45s ease forwards; }
.bq-resposta .circ path { stroke-width: 5; stroke-dasharray: 60; stroke-dashoffset: 60; animation: bq-traca .35s .25s ease forwards; }
@keyframes bq-traca { to { stroke-dashoffset: 0; } }
.bq-resposta h2 { margin: 6px 0 0; max-width: 18ch; font: 800 38px/1.05 var(--font); letter-spacing: .01em; text-wrap: balance; }
.bq-resposta .dado { max-width: 34ch; font: 600 21px/1.35 var(--font); overflow-wrap: anywhere; }
.bq-resposta .dado .code { background: rgba(255, 255, 255, .2); color: #ffffff; font-size: 19px; line-height: 26px; }
.bq-resposta .sub { max-width: 40ch; font: 500 16px/22px var(--font); opacity: .9; overflow-wrap: anywhere; }
.bq-resposta .acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.bq-resposta .bq-btn { min-width: 160px; background: rgba(255, 255, 255, .16); color: #ffffff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.bq-resposta .bq-btn.principal { background: #ffffff; color: var(--ink); box-shadow: none; }
.bq-resposta .conta { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(255, 255, 255, .4); transform-origin: left; animation: bq-esvazia linear forwards; }
@keyframes bq-esvazia { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Tablet deitado e computador: corpo à esquerda, lado ou folha à direita, sem rolar a página. */
@media (min-width: 900px) {
    .bq-palco { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0 16px; padding: 0 16px 16px; }
    .bq-corpo { grid-column: 1; grid-row: 1; padding: 4px 0 0; }
    .bq-lado, .bq-folha { grid-column: 2; grid-row: 1; min-height: 0; overflow: auto; }
    .bq-lado { padding: 4px 0 0; }
    .bq-palco.solo { grid-template-columns: minmax(0, 760px); justify-content: center; }
    /* O lado direito vazio diz o que vai aparecer nele (data-vazio); some quando a folha abre. */
    .bq-palco[data-vazio]::after { content: attr(data-vazio); grid-column: 2; grid-row: 1; align-self: start; margin-top: 4px; padding: 32px 28px; border: 2px dashed var(--line);
        border-radius: 20px; color: var(--ink-muted); font: 500 16px/24px var(--font); text-align: center; text-wrap: balance; }
    .bq.com-folha .bq-palco::after { content: none; }
    .bq-folha { max-height: none; align-self: stretch; border-radius: 20px; box-shadow: 0 1px 2px rgba(26, 26, 26, .06), 0 8px 24px rgba(26, 26, 26, .08); }
    .bq-folha::before { display: none; }
    .bq-nomes { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .bq-hero .code.lg { font-size: 48px; line-height: 56px; }
    .bq-resposta h2 { font-size: 48px; }
    .bq-resposta .dado { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .bq-alvo.pronto .bq-alvo-linha, .bq-hero, .bq-folha, .bq-resposta, .bq-resposta .circ circle, .bq-resposta .circ path, .bq-resposta .conta, .bq-alvo.treme { animation: none !important; }
    .bq-alvo.pronto .bq-alvo-linha { opacity: .6; }
    .bq-resposta .circ circle, .bq-resposta .circ path { stroke-dashoffset: 0; }
}
/* A linha de ação da folha fica sempre à vista (a folha rola por cima dela no celular baixo). */
.bq-folha > .bq-btns.fim, .bq-folha > .bq-acao-fim { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom, 0px)); z-index: 1;
    margin: 0 -16px calc(-16px - env(safe-area-inset-bottom, 0px)); padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--surface); }
.bq-acao-fim { display: grid; }
@media (max-height: 720px) {
    .bq-teclas button { min-height: 46px; font-size: 24px; }
    .bq-valor-inp { height: 52px; font-size: 44px; }
    .bq-alvo:not(.compacto) { min-height: 150px; padding: 16px; }
    .bq-alvo:not(.compacto) .bq-alvo-ic, .bq-alvo:not(.compacto) .bq-alvo-ic svg.ic { width: 48px; height: 48px; }
    .bq-folha { gap: 10px; }
    .bq-hero { padding: 14px; gap: 10px; }
}
@media (max-width: 899px) { .bq-lado { max-height: 58%; overflow: auto; padding-top: 6px; } }
.bq-alvo-txt { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.bq-alvo.compacto .bq-alvo-txt { align-items: flex-start; }
.bq-alvo.compacto .bq-alvo-tit, .bq-alvo.compacto .bq-alvo-sub { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-alvo.compacto .bq-alvo-ultimo { max-width: 42%; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .bq-alvo.compacto .bq-digitar { padding: 0 8px; } }
.bq [hidden] { display: none !important; }
.bq-folha { grid-template-columns: minmax(0, 1fr); align-content: start; }
.bq-folha > * { min-width: 0; }
.bq-alvo.compacto .bq-alvo-tit { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 480px) { .bq-alvo.compacto .bq-alvo-ultimo { display: none; } }
.bq .bq-valor-inp, .bq .bq-valor-inp:focus { border: 0; border-bottom: 3px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.bq .bq-valor-inp:focus { border-bottom-color: var(--accent); }
a.bq-opcao { text-decoration: none; }

/* ---- Conferência cega: a tela Contar (conferir.php) ---- */
.bq-titulo small { display: block; font: 500 12px/14px var(--font); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-contagem { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: end; padding: 12px 14px; border-radius: 14px; background: var(--surface-card); }
.bq-contagem small { grid-column: 1 / -1; color: var(--ink-muted); font: 600 12px/16px var(--font); letter-spacing: .04em; text-transform: uppercase; }
.bq-contagem b { font: 800 44px/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.bq-contagem b i { font: 600 18px/1 var(--font); font-style: normal; color: var(--ink-muted); margin-left: 6px; }
.bq-contagem b.bump { animation: bq-bump .3s ease; }
@keyframes bq-bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.bq-contagem .ultima { text-align: right; font-size: 13px; color: var(--ink-muted); line-height: 1.3; }
.bq-contagem .ultima > span:not(.bq-estado) { display: block; font-weight: 600; color: var(--ink); }
.bq-estado { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--ink-muted); }
.bq-estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cool-steel); }
.bq-estado.salvo { color: var(--ok); } .bq-estado.salvo::before { background: var(--ok); }
.bq-estado.registrando::before { animation: bq-pulsa 1s infinite; }
.bq-estado.pendente { color: var(--warn); } .bq-estado.pendente::before { background: var(--warn); }
.bq-estado.falha { color: var(--danger); } .bq-estado.falha::before { background: var(--danger); }
@keyframes bq-pulsa { 50% { opacity: .3; } }
.bq-hero.pisca::after { content: ""; position: absolute; inset: 0; border-radius: 20px; background: var(--ok); opacity: 0; animation: bq-pisca .45s ease-out; pointer-events: none; }
.bq-hero { position: relative; }
@keyframes bq-pisca { 0% { opacity: .35; } 100% { opacity: 0; } }
.bq-ultimas { flex: none; display: grid; gap: 6px; }
.bq-ultimas .rot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 600 14px/20px var(--font); }
.bq-ultimas .rot small { color: var(--ink-muted); font-weight: 500; font-size: 13px; }
.bq-ultimas .vazio { color: var(--ink-muted); font-size: 14px; padding: 6px 2px; }
.bq-ultimas .bq-lista { gap: 4px; }
.bq-ultimas .bq-lista li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 36px; padding: 4px 10px; border-radius: 10px; background: var(--surface); font-size: 13px; line-height: 18px; }
.bq-ultimas .bq-lista li time { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.bq-ultimas .bq-lista li .q { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bq-ultimas .bq-lista li .sk { display: inline-block; font: 600 12px/1 var(--mono); background: var(--surface-card); border-radius: 6px; padding: 3px 6px; margin-right: 4px; }
.bq-ultimas .bq-lista li.desfeito, .bq-ultimas .bq-lista li.erro { opacity: .55; text-decoration: line-through; }
.bq-ultimas .bq-lista li.erro .q { color: var(--danger); }
.bq-ultimas .bq-lista li.problema .q { color: var(--warn); }
.bq-chips.motivos { justify-content: flex-start; }
.bq-chips.motivos button { font-size: 15px; }
.bq-opcao.feita { opacity: .6; }
.bq-rodape .bq-link.encerrar { margin-left: auto; color: var(--ink); font-weight: 600; }
.bq-lado .bq-btn[disabled] { opacity: .4; }
.bq-calma { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; text-align: center; background: var(--surface-card); }
.bq-calma .ic-grande { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); }
.bq-calma .ic-grande svg.ic { width: 44px; height: 44px; }
.bq-calma h2 { margin: 0; font: 700 26px/1.2 var(--font); text-wrap: balance; }
.bq-calma p { margin: 0; max-width: 34ch; color: var(--ink-muted); font-size: 16px; line-height: 1.45; }
.bq-calma .bq-btn { margin-top: 10px; min-width: 220px; text-decoration: none; }
@media (max-width: 899px) {
    .bq-lado { padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0; background: var(--surface); box-shadow: 0 -8px 30px rgba(26, 26, 26, .14); }
    .bq-lado .bq-btns .bq-btn { min-height: 50px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .bq-contagem b.bump, .bq-hero.pisca::after, .bq-estado.registrando::before { animation: none !important; } }
.dec-form[hidden] { display: none; }

/* ---- O coletor (/zebra): a tela com todas as telas de bipar ---- */
.zb-telas { display: grid; gap: 10px; }
.zb-tela { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 10px 16px; border-radius: 18px; background: var(--surface); color: var(--ink);
    text-decoration: none; box-shadow: 0 1px 2px rgba(26, 26, 26, .06), 0 6px 18px rgba(26, 26, 26, .06); }
.zb-tela:active { transform: scale(.985); background: var(--surface-card); }
.zb-ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--surface-card); color: var(--accent); }
.zb-txt { flex: 1; min-width: 0; }
.zb-txt b { display: block; font: 600 18px/1.25 var(--font); }
.zb-txt small { display: block; color: var(--ink-muted); font-size: 14px; line-height: 19px; }
.zb-n { flex: none; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 999px; background: var(--brand-strong); color: #ffffff; font: 700 16px/32px var(--font); text-align: center; }
@media (min-width: 700px) { .zb-telas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Hub: o quadro de bipar numa faixa baixa (ícone, texto e Digitar na mesma linha); as telas ficam à mão logo abaixo. */
.zb-hub .bq-alvo:not(.compacto) { min-height: 0; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 12px 12px 12px 16px; text-align: left; }
.zb-hub .bq-alvo:not(.compacto) .bq-alvo-ic { width: 36px; height: 36px; margin: 0; }
.zb-hub .bq-alvo:not(.compacto) .bq-alvo-ic svg.ic { width: 36px; height: 36px; stroke-width: 1.7; }
.zb-hub .bq-alvo:not(.compacto) .bq-alvo-txt { flex: 1 1 auto; align-items: flex-start; }
.zb-hub .bq-alvo:not(.compacto) .bq-alvo-tit { font-size: 18px; }
.zb-hub .bq-alvo:not(.compacto) .bq-alvo-txt { min-width: 0; }
.zb-hub .bq-alvo:not(.compacto) .bq-alvo-tit, .zb-hub .bq-alvo:not(.compacto) .bq-alvo-sub { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zb-hub .bq-alvo:not(.compacto) .bq-alvo-sub { font-size: 14px; line-height: 18px; }
.zb-hub .bq-alvo:not(.compacto) .bq-digitar { padding: 0 8px; }
.zb-hub .bq-alvo:not(.compacto) .bq-digitar { position: static; flex: none; }
.zb-hub .bq-alvo:not(.compacto) .bq-alvo-linha { left: 12px; right: auto; width: 44px; top: 14px; }
.zb-hub .bq-alvo.pronto:not(.compacto) .bq-alvo-linha { animation-name: zb-varre; }
@keyframes zb-varre { 0%, 100% { transform: translateY(0); opacity: .2; } 50% { transform: translateY(32px); opacity: .9; } }
.dlg-quem .quem-nome[hidden] { display: none; }
.bq-nome-n { display: block; width: 100%; overflow-wrap: normal; }
@media (min-width: 600px) { .dlg-quem .quem-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Bipar master: depois do bip o card do leitor ("Bipe o próximo", "Toque aqui para bipar", o último
   código) some de vez; o campo do leitor fica lá, invisível (a tela devolve o foco a ele sozinha). */
.bq.sem-alvo-compacto .bq-alvo.compacto:not(.digitando) { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; border: 0;
    overflow: hidden; opacity: 0; box-shadow: none; pointer-events: none; }
.bq-hero .bq-serie { font-size: 14px; color: var(--ink-muted); opacity: .8; font-variant-numeric: tabular-nums; }
/* A curva em destaque no produto bipado: o operador vê de longe se o produto sai muito (A) ou pouco (D, E, F, Z). */
.bq-hero .curva { min-width: 48px; height: 48px; padding: 0 10px; border-radius: 12px; font-size: 28px; }
/* O responsável no alto das telas de bipar: só o nome, sem a bolinha com as iniciais. */
.bq-chip.pessoa .bq-av { display: none; }
.bq-chip.pessoa { padding: 0 14px; }
.bq-chip.pessoa .so-largo { display: inline; }
@media (max-width: 480px) { .bq.sem-alvo-compacto:not(.zb-hub):not(.sl-tela):not(.cs-tela):not(.bz-tela) .bq-titulo { display: none; } }   /* Bipar master no celular: os chips (local, pendências, impressora, nome) precisam do espaço */

/* Sem o ponto de rede no topo das telas de bipar (pedido do operador). */
.bq-rede { display: none; }

/* Coletor: a curva do produto bipado, em destaque na folha. */
.zb-curva { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.zb-curva small { font-size: 15px; font-weight: 600; color: var(--ink-muted); }
.zb-curva .curva { min-width: 48px; height: 48px; padding: 0 10px; border-radius: 12px; font-size: 28px; }

/* Coletor: as opções da folha do bipe são botões (a primeira cheia), com a seta de "ir". */
.zb-opcoes { display: grid; gap: 10px; }
.zb-op { justify-content: space-between; min-height: 72px; padding: 10px 18px 10px 20px; text-align: left; box-shadow: inset 0 0 0 2px var(--ink); }
.zb-op span { display: block; }
.zb-op b { display: block; font-size: 18px; }
.zb-op small { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; opacity: .8; }
.zb-op::after { content: "\203A"; flex: none; font-size: 32px; line-height: 1; font-weight: 400; }
.zb-op.principal { box-shadow: none; }

/* Minhas tarefas no coletor (?page=tarefas): a lista de cartões e os passos da tarefa. */
.tf-lista { display: grid; gap: 10px; }
.tf-item { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 10px 14px; border-radius: 18px; background: var(--surface); color: var(--ink);
    text-decoration: none; box-shadow: 0 1px 2px rgba(26, 26, 26, .06), 0 6px 18px rgba(26, 26, 26, .06); }
.tf-item:active { transform: scale(.985); background: var(--surface-card); }
.tf-item .code { flex: none; }
.tf-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.tf-txt b { font: 600 16px/20px var(--font); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tf-txt small { color: var(--ink-muted); font-size: 13px; line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tf-dir { flex: none; display: grid; justify-items: end; gap: 6px; }
.tf-dir b { font: 700 18px/22px var(--font); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tf-dir .curva { min-width: 32px; height: 32px; font-size: 18px; border-radius: 8px; }
@media (min-width: 700px) { .tf-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tf-onde { align-items: flex-start; font-weight: 500; font-size: 15px; line-height: 21px; }
.tf-onde svg.ic { flex: none; margin-top: 1px; }
.tf-onde b { font-weight: 700; }
.tf-passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.tf-passo { display: grid; gap: 6px; align-content: start; padding: 10px 12px; border-radius: 14px; background: var(--surface-card); color: var(--ink-muted); font: 600 14px/18px var(--font); }
.tf-passo b { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--line); color: var(--ink); font-size: 15px; }
.tf-passo span { overflow-wrap: anywhere; }
.tf-passo[data-estado="atual"] { box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); }
.tf-passo[data-estado="atual"] b { background: var(--ink); color: #ffffff; }
.tf-passo[data-estado="ok"] { background: var(--ok-bg); color: var(--ok); }
.tf-passo[data-estado="ok"] b { background: var(--ok); color: #ffffff; }
/* Com a folha aberta (a quantidade, o que sobrou na caixa), a pergunta é a folha: o card do leitor sai da frente.
   Exceto quando a folha pede um bip ("Abriu uma Caixa Master?"): aí o leitor fica à vista e com o foco. */
.bq.tf-tarefa.com-folha:not(.tf-bipando) .bq-alvo { display: none; }
.tf-motivos { display: grid; gap: 10px; }
.tf-motivos[hidden] { display: none; }
.tf-chips { justify-content: flex-start; }
.tf-chips button { min-height: 48px; font-size: 15px; line-height: 1.2; padding: 6px 14px; text-align: left; }
.tf-motivo-livre { min-height: 52px; font-size: 18px; border-radius: 14px; }
.tf-motivo-livre[hidden] { display: none; }
.tf-caixas { display: grid; gap: 6px; }
.tf-caixas[hidden] { display: none; }
.tf-caixa { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--surface-card); font: 600 15px/20px var(--font); }
.tf-caixa svg.ic { color: var(--accent); flex: none; }
.tf-caixa .bq-link { margin-left: auto; min-height: 40px; }

/* Conferir sala no coletor (?page=salas): a lista das salas; e a lista do que falta no "Encerrar conferência". */
.sl-lista { display: grid; gap: 10px; }
.sl-item { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 10px 14px; border-radius: 18px; border: 0; background: var(--surface); color: var(--ink);
    text-align: left; font: inherit; cursor: pointer; text-decoration: none; box-shadow: 0 1px 2px rgba(26, 26, 26, .06), 0 6px 18px rgba(26, 26, 26, .06); }
.sl-item:active { transform: scale(.985); background: var(--surface-card); }
.sl-num { flex: none; min-width: 72px; color: var(--ink); font: 700 22px/26px var(--font); white-space: nowrap; }   /* sem a tarja preta: ela é só do SKU */
.sl-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.sl-txt b { font: 600 16px/20px var(--font); }
.sl-txt small { color: var(--ink-muted); font-size: 13px; line-height: 17px; }
.sl-txt small .pill { vertical-align: 1px; }
.sl-txt .sl-aberta { color: var(--warn); font-weight: 600; }
.sl-seta { flex: none; color: var(--ink-muted); font-size: 28px; line-height: 1; }
@media (min-width: 700px) { .sl-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sc-faltando .bq-opcao { min-height: 56px; padding: 6px 12px; }
.sc-faltando .bq-opcao b { display: block; font-size: 15px; line-height: 19px; }
.sc-faltando .bq-opcao small { font-size: 13px; line-height: 16px; overflow-wrap: anywhere; }

/* Consultar caixa no coletor (?page=consultar): a história curta, as listas e o fato que pede atenção. */
.cs-hist { display: grid; gap: 6px; }
.cs-hist .bq-nomes-rot { margin-top: 2px; }
.cs-hist-item { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: 10px; background: var(--surface-card); font: 500 14px/19px var(--font); }
.cs-hist-item small { color: var(--ink-muted); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cs-hist-item span { overflow-wrap: anywhere; }
.bq-fato.atencao { background: var(--warn-bg); color: var(--warn); }
.bq-fato.texto { grid-column: 1 / -1; }
.bq-fato.texto b { font: 600 16px/20px var(--font); white-space: normal; }
.bq-fato.atencao small { color: inherit; opacity: .9; }

.cs-lista .bq-opcao { width: 100%; min-height: 60px; padding: 8px 12px; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.cs-lista .bq-opcao > span:last-child { min-width: 0; }
.cs-lista .bq-opcao b { display: block; font-size: 15px; line-height: 19px; overflow-wrap: anywhere; }
.cs-lista .bq-opcao small { font-size: 13px; line-height: 16px; overflow-wrap: anywhere; }
.cs-lista .bq-opcao[disabled] { opacity: .5; cursor: default; }
.cs-chips { justify-content: flex-start; }
.cs-chips button { min-height: 48px; font-size: 15px; }
.cs-motivo-livre { min-height: 52px; font-size: 18px; border-radius: 14px; }
.cs-motivo-livre[hidden] { display: none; }
.bq-aviso-btn { width: 100%; border: 0; text-align: left; cursor: pointer; font: inherit; font-weight: 500; }
.bq-aviso-btn:active { filter: brightness(.95); }
.cs-imps { display: grid; gap: 10px; }
.cs-imps:empty { display: none; }
/* O chip da impressora mostra sempre o nome dela (no celular também): é o que a pessoa confere antes de imprimir. */
.bq-chip.impressora .so-largo { display: inline; white-space: nowrap; max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
/* Celular estreito: os chips do topo encolhem (o texto ganha reticências) em vez de empurrar o nome para fora da tela. */
@media (max-width: 480px) {
    .bq-strip .bq-chip { flex: 0 1 auto; min-width: 0; }
    .bq-strip .bq-chip > span:not(.bq-av) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bq-strip .bq-chip svg.ic { flex: none; }
}
/* Etiqueta desatualizada: título, as diferenças (uma por linha) e a ação, como um botão. */
.bq-aviso-etq-txt { display: grid; gap: 2px; min-width: 0; }
.bq-aviso-etq-txt b { font-weight: 700; }
.bq-aviso-etq-acao { margin-top: 6px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* A curva nas telas de bipar: a palavra "Curva" ao lado da letra grande, como na folha do Coletor. */
.bq-hero .bq-curva { display: inline-flex; align-items: center; gap: 8px; }
.bq-hero .bq-curva small { font: 600 14px/1 var(--font); color: var(--ink-muted); }

/* ---- BINs zerados no coletor (zerados.php): a lista "Hoje" ---- */
.bz-lista { display: grid; gap: 8px; }
.bz-item { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px; border-radius: 14px; background: var(--surface-card); }
.bz-item .code { flex: none; }
.bz-txt { min-width: 0; display: grid; gap: 2px; }
.bz-txt b { font: 600 15px/19px var(--font); overflow-wrap: anywhere; }
.bz-txt small { color: var(--ink-muted); font-size: 13px; line-height: 16px; overflow-wrap: anywhere; }

/* ═══════════════════════════════════════════════════
   ESTÚDIO DE ETIQUETAS (?page=estudio, public_html/estudio.js)
   As etiquetas em cima; a prévia (o palco) à esquerda e o modelo (código, campos, exemplo,
   versões) à direita; a barra de salvar fica presa embaixo.
   ═══════════════════════════════════════════════════ */
.container:has(> .zs) { max-width: 1480px; }
.zs { display: grid; gap: 14px; }
.zs[aria-busy="true"] .zs-bancada { opacity: .4; }

/* as etiquetas */
.zs-galeria { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.zs-cartao { appearance: none; flex: 0 0 auto; width: 172px; display: grid; gap: 8px; padding: 10px; border-radius: 12px; border: 1px solid var(--line);
    background: var(--panel); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.zs-cartao:hover { border-color: #bdbdbd; transform: translateY(-1px); }
.zs-cartao.ativo { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(226, 105, 44, .16), 0 8px 20px rgba(26, 26, 26, .08); }
.zs-cartao:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.zs-mini { display: block; width: 150px; border-radius: 4px; box-shadow: 0 1px 2px rgba(26, 26, 26, .12); background: #fff; pointer-events: none; }
.zs-cartao-rot { display: grid; gap: 1px; min-width: 0; }
.zs-cartao-rot b { font: 600 14px/18px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-cartao-estado { color: var(--ink-muted); font-size: 12px; line-height: 16px; }
.zs-cartao.personalizado .zs-cartao-estado { color: var(--brand-strong); }
.zs-cartao.sujo .zs-cartao-estado { color: var(--warn); font-weight: 600; }
.zs-cartao.sujo .zs-cartao-estado::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--warn); vertical-align: 1px; }

/* a bancada */
.zs-bancada { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(360px, 1fr); gap: 14px; align-items: start; transition: opacity .2s; }
.zs-palco, .zs-lado { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.zs-palco { display: grid; }
.zs-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.zs-titulo { display: grid; gap: 1px; min-width: 0; }
.zs-titulo h2 { margin: 0; font: 600 17px/22px var(--font); }
.zs-titulo span { color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.zs-ferr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zs-inserir { position: relative; }
.zs-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 280px; padding: 6px; border-radius: 12px; border: 1px solid var(--line);
    background: #fff; box-shadow: var(--shadow-pop); display: grid; gap: 2px; }
.zs-menu[hidden] { display: none; }
.zs-menu button { appearance: none; display: grid; gap: 1px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.zs-menu button:hover, .zs-menu button:focus-visible { background: var(--surface-card); outline: none; }
.zs-menu b { font: 600 14px/18px var(--font); }
.zs-menu span { color: var(--ink-muted); font-size: 12px; line-height: 16px; }
.zs-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: #e9e9e9; }
.zs-seg button { appearance: none; min-height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-muted); font: 600 13px/1 var(--font); cursor: pointer; }
.zs-seg button.ativo { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(26, 26, 26, .12); }
.zs-icone { appearance: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line-campo); background: #fff; color: var(--ink); cursor: pointer; }
.zs-icone svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.zs-icone[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* o palco: a etiqueta sobre um fundo pontilhado */
.zs-quadro { display: grid; place-items: center; min-height: 300px; max-height: 72vh; overflow: auto; padding: 18px;
    background: radial-gradient(circle, rgba(26, 26, 26, .10) 1px, transparent 1.2px) 0 0 / 16px 16px, #ececec; }
.zs-folha { position: relative; line-height: 0; border-radius: 6px; box-shadow: 0 1px 0 rgba(26, 26, 26, .05), 0 18px 40px rgba(26, 26, 26, .16); touch-action: none; user-select: none; }
.zs-folha:focus { outline: none; }
.zs-folha:focus-visible { box-shadow: var(--focus-ring), 0 18px 40px rgba(26, 26, 26, .16); }
.zs-folha.soltando { box-shadow: 0 0 0 3px var(--accent), 0 18px 40px rgba(26, 26, 26, .16); }
.zs-folha canvas { display: block; border-radius: 6px; }
.zs-camada { position: absolute; left: 0; top: 0; pointer-events: none; }
.zs-sel, .zs-hover { position: absolute; border-radius: 2px; }
.zs-hover { outline: 1px dashed rgba(26, 26, 26, .45); outline-offset: 2px; }
.zs-sel { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(226, 105, 44, .12); }
.zs-sel.fixa { outline-style: dashed; }
.zs-sel-tag { position: absolute; left: -4px; bottom: calc(100% + 6px); padding: 3px 7px; border-radius: 5px; background: var(--accent); color: #fff;
    font: 500 11px/14px var(--font-mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.zs-guia { position: absolute; }
.zs-guia.v { top: 0; bottom: 0; border-left: 1px dashed var(--accent); }
.zs-guia.h { left: 0; right: 0; border-top: 1px dashed var(--accent); }

/* o elemento selecionado */
.zs-props { display: grid; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line-soft); background: #fff; }
.zs-props[hidden] { display: none; }
.zs-props-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zs-props-cab b { font: 600 14px/20px var(--font); }
.zs-props-campos { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.zs-prop { display: grid; gap: 3px; margin: 0; width: 104px; }
.zs-prop > span { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.zs-prop input { min-height: 34px; font-variant-numeric: tabular-nums; }
.zs-prop small { font-size: 11px; line-height: 14px; color: var(--ink-muted); white-space: nowrap; }
.zs-prop.larga { flex: 1 1 240px; width: auto; }
.zs-prop.larga input { font-family: var(--font-mono); font-size: 13px; }
.zs-props-acoes { display: flex; gap: 8px; justify-content: flex-end; }
.zs-info { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 14px; border-top: 1px solid var(--line-soft); color: var(--ink-muted);
    font: 500 12px/16px var(--font-mono); font-variant-numeric: tabular-nums; }

/* o modelo */
.zs-lado { display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.zs-abas { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--line-soft); overflow-x: auto; }
.zs-abas button { appearance: none; padding: 10px 10px 9px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-muted);
    font: 600 14px/18px var(--font); white-space: nowrap; cursor: pointer; }
.zs-abas button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.zs-abas button:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
.zs-painel { padding: 12px 14px 14px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.zs-painel[hidden] { display: none; }
.zs-ajuda { margin: 0; color: var(--ink-muted); font-size: 13px; line-height: 19px; }

.zs-editor { position: relative; display: grid; height: clamp(360px, 56vh, 640px); border: 1px solid var(--line); border-radius: 10px; background: #fcfcfb; overflow: hidden; }
.zs-editor:focus-within { border-color: var(--ink); box-shadow: var(--focus-ring); }
.zs-editor > pre, .zs-editor > textarea { grid-area: 1 / 1; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 14px 16px 40px; border: 0; border-radius: 0;
    background: transparent; box-shadow: none; font: 500 12.5px/20px var(--font-mono); letter-spacing: 0; tab-size: 2; white-space: pre; overflow-wrap: normal; word-break: normal; }
.zs-editor > pre { overflow: hidden; pointer-events: none; color: var(--ink); }
.zs-editor > textarea { resize: none; overflow: auto; color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--ink); outline: none; }
.zs-editor > textarea:focus { box-shadow: none; }
.zs-editor > textarea::selection { background: rgba(226, 105, 44, .26); }
.zs-ln { display: block; min-width: 100%; width: max-content; }
.zs-ln.sel { background: rgba(226, 105, 44, .10); box-shadow: inset 3px 0 0 var(--accent); }
.tk-cmd { color: #1d4f91; }
.tk-num { color: #5f6b7a; }
.tk-txt { color: #8a3a10; }
.tk-campo { color: var(--brand-strong); background: rgba(226, 105, 44, .13); border-radius: 3px; }
.tk-com { color: #8c8c8c; }
.tk-dado { color: #a3a3a3; }

.zs-avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.zs-avisos li { display: flex; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13px; line-height: 18px; }
.zs-avisos li::before { flex: none; font-weight: 700; }
.zs-avisos li.erro { background: var(--danger-bg); color: var(--danger); }
.zs-avisos li.erro::before { content: "!"; }
.zs-avisos li.alerta { background: var(--warn-bg); color: var(--warn); }
.zs-avisos li.alerta::before { content: "•"; }
.zs-avisos li.alerta[tabindex] { cursor: pointer; }
.zs-avisos li.alerta[tabindex]:hover { text-decoration: underline; }
.zs-avisos li.ok { background: var(--ok-bg); color: var(--ok); }
.zs-avisos li.ok::before { content: "✓"; }

.zs-campos { display: grid; gap: 6px; max-height: clamp(360px, 60vh, 680px); overflow: auto; padding-right: 2px; }
.zs-campo { appearance: none; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "cod desc pill" "cod ex pill"; gap: 1px 10px; align-items: center;
    padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); text-align: left; cursor: grab; }
.zs-campo:hover { border-color: var(--accent); }
.zs-campo:active { cursor: grabbing; }
.zs-campo code { grid-area: cod; padding: 3px 7px; border-radius: 6px; background: rgba(226, 105, 44, .12); color: var(--brand-strong); font: 500 12.5px/18px var(--font-mono); white-space: nowrap; }
.zs-campo > span:not(.pill) { grid-area: desc; font-size: 13px; line-height: 18px; }
.zs-campo small { grid-area: ex; color: var(--ink-muted); font: 500 12px/16px var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.zs-campo .pill { grid-area: pill; }
.zs-campo.usado code::after { content: " ✓"; }

.zs-exemplo { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; align-items: end; }
.zs-ex { margin: 0; display: grid; gap: 3px; }
.zs-ex > span { font-size: 12px; line-height: 16px; }
.zs-exemplo > .btn { justify-self: start; grid-column: 1 / -1; }

.zs-versoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.zs-versao { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.zs-versao > div { display: grid; gap: 1px; min-width: 0; }
.zs-versao b { font: 600 14px/18px var(--font); }
.zs-versao small { color: var(--ink-muted); font-size: 12px; line-height: 16px; }
.zs-versao.atual { border-color: var(--accent); }
.zs-versao.original { background: var(--surface-card); }
.zs-versao.vazio { justify-content: center; color: var(--ink-muted); font-size: 13px; border-style: dashed; background: transparent; }

/* salvar: a barra presa embaixo */
.zs-acoes { position: sticky; bottom: 12px; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .96); box-shadow: var(--shadow-pop); backdrop-filter: blur(6px); }
.zs-estado { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; line-height: 20px; }
.zs-ponto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #b5b5b5; }
.zs-ponto.personalizado { background: var(--accent); }
.zs-ponto.sujo { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-bg); }
.zs-botoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zs-teste { display: inline-flex; gap: 6px; }
.zs-teste select { width: auto; max-width: 170px; }
.zs-teste select[hidden] { display: none; }

/* a imagem */
.zs-dlg { width: min(560px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 14px; box-shadow: var(--shadow-pop); color: var(--ink); }
.zs-dlg::backdrop { background: rgba(20, 20, 20, .38); }
.zs-dlg-corpo { position: relative; display: grid; gap: 12px; padding: 20px; }
.zs-dlg-corpo h3 { margin: 0; padding-right: 36px; font: 600 17px/22px var(--font); }
.zs-dlg-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-muted); font-size: 22px; line-height: 1; cursor: pointer; }
.zs-dlg-x:hover { background: var(--surface-card); color: var(--ink); }
.zs-arquivo { position: relative; display: grid; place-items: center; gap: 2px; margin: 0; padding: 20px 12px; border: 2px dashed rgba(226, 105, 44, .45); border-radius: 12px;
    background: rgba(226, 105, 44, .04); color: var(--ink); text-align: center; cursor: pointer; }
.zs-arquivo:hover, .zs-arquivo.soltando { border-style: solid; border-color: var(--accent); background: rgba(226, 105, 44, .08); }
.zs-arquivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.zs-arquivo span { font: 600 14px/20px var(--font); }
.zs-arquivo small { color: var(--ink-muted); font-size: 12px; }
.zs-img-ajustes { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; align-items: end; }
.zs-img-ajustes label { margin: 0; display: grid; gap: 4px; }
.zs-img-ajustes input[type="range"] { min-height: 34px; padding: 0; border: 0; box-shadow: none; accent-color: var(--brand-strong); }
.zs-check { display: flex !important; align-items: center; gap: 6px; min-height: 34px; color: var(--ink); }
.zs-img-previa { display: grid; place-items: center; gap: 6px; min-height: 90px; padding: 12px; border-radius: 10px;
    background: conic-gradient(#f1f1f1 0 25%, #fff 0 50%, #f1f1f1 0 75%, #fff 0) 0 0 / 14px 14px; }
.zs-img-previa canvas { max-width: 100%; max-height: 220px; image-rendering: pixelated; }
.zs-img-previa span { color: var(--ink-muted); font: 500 12px/16px var(--font-mono); }
.zs-dlg-acoes { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 1240px) { .zs-bancada { grid-template-columns: minmax(0, 1.15fr) minmax(330px, 1fr); } }
@media (max-width: 1020px) {
    .zs-bancada { grid-template-columns: minmax(0, 1fr); }
    .zs-editor { height: 420px; }
}
@media (max-width: 640px) {
    .zs-acoes { bottom: 8px; }
    .zs-botoes { width: 100%; }
    .zs-botoes .btn.orange { margin-left: auto; }
    .zs-img-ajustes { grid-template-columns: 1fr 1fr; }
}

/* ===== Telas de bipar no computador (ui_bq_computador: Caixas master, Bipar master, Última peça, Conferência cega) =====
   Com o menu e a busca do topo, como as outras telas do computador. O quadro de bipar vira uma faixa com o campo
   à vista (o leitor USB e o teclado escrevem nele; Enter lê), a pergunta fica na coluna da direita, presa ao rolar. */
.bq-computador .bq { position: relative; inset: auto; z-index: auto; min-height: calc(100vh - 160px); padding: 0; background: transparent; }
.bq-computador .bq-strip { max-width: none; min-height: 0; padding: 0 0 14px; gap: 10px; }
.bq-computador .bq-volta { display: none; }
.bq-computador .bq-titulo { font-size: 20px; line-height: 28px; }
.bq-computador .bq-faixa { max-width: none; padding: 0; margin-bottom: 12px; }
.bq-computador .bq-palco { max-width: none; flex: none; }
.bq-computador .bq-corpo { overflow: visible; padding: 0; }
.bq-computador .bq-lado { padding: 0; }
.bq-computador .bq-alvo { min-height: 0; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 12px 14px; padding: 14px 16px; text-align: left; cursor: text; }
.bq-computador .bq-alvo-ic { width: 30px; height: 30px; margin: 0; color: var(--ink-muted); }
.bq-computador .bq-alvo-ic svg.ic { width: 30px; height: 30px; stroke-width: 1.8; }
.bq-computador .bq-alvo-txt { flex: 1 1 220px; align-items: flex-start; }
.bq-computador .bq-alvo-tit { font-size: 17px; }
.bq-computador .bq-alvo-sub { font-size: 14px; line-height: 19px; }
.bq-computador .bq-alvo-linha, .bq-computador .bq-digitar { display: none; }
.bq-computador .bq-alvo-inp { position: static; inset: auto; order: 9; flex: 1 1 100%; width: 100%; height: 48px; z-index: auto; margin: 0; padding: 0 14px;
    border: 1px solid var(--line-campo); border-radius: 12px; background: var(--surface-input); color: var(--ink); caret-color: var(--ink);
    font: 600 18px/1 var(--font-mono); letter-spacing: .03em; opacity: 1; cursor: text; }
.bq-computador .bq-alvo-inp::placeholder { color: var(--muted-soft); font: 500 15px/1 var(--font); letter-spacing: 0; }
.bq-computador .bq-alvo-inp:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.bq-computador .bq-alvo.compacto .bq-alvo-ultimo { display: inline-flex; }
/* A Bipar master esconde o quadro depois do bip (no coletor a tela devolve o foco sozinha); no computador o campo fica. */
.bq-computador .bq.sem-alvo-compacto .bq-alvo.compacto:not(.digitando) { position: relative; width: auto; height: auto; margin: 0; padding: 14px 16px;
    border: 2px solid transparent; overflow: hidden; opacity: 1; pointer-events: auto;
    box-shadow: 0 1px 2px rgba(26, 26, 26, .06), 0 8px 24px rgba(26, 26, 26, .07); }
.bq-computador .bq-btn.bq-confirmar-manual { position: static; width: 100%; margin: 4px 0 0; }
.bq-computador .bq.com-rodape-fixo .bq-corpo { padding-bottom: 0; }
@media (min-width: 900px) {
    .bq-computador .bq-palco { padding: 0; align-items: start; }
    .bq-computador .bq-lado, .bq-computador .bq-folha { position: sticky; top: 88px; max-height: calc(100vh - 108px); }
}
/* Última peça no computador: a tela do tablet de parede numa página comum (o leitor numa faixa, os nomes menores). */
.bq-computador .bq.up-tela { height: auto; }
.bq-computador .bq.up-tela .bq-palco { padding: 0; }
.bq-computador .bq.up-tela .bq-alvo:not(.compacto) { flex: none; gap: 12px 14px; }
.bq-computador .bq.up-tela .bq-alvo:not(.compacto) .bq-alvo-ic, .bq-computador .bq.up-tela .bq-alvo:not(.compacto) .bq-alvo-ic svg.ic { width: 30px; height: 30px; }
.bq-computador .bq.up-tela .bq-alvo:not(.compacto) .bq-alvo-tit { font-size: 17px; }
.bq-computador .bq.up-tela .bq-nomes-rot { font-size: 16px; line-height: 22px; }
.bq-computador .bq.up-tela .bq-nome { --bq-nome-h: 60px; font-size: 18px; }
.bq-computador .bq.up-tela .bq-rodape .bq-toggle, .bq-computador .bq.up-tela .bq-toggle.vazio { min-height: 48px; font-size: 16px; }
.bq-computador .bq.up-tela .bq-rodape { margin-top: 4px; }