/* MX CESTA BÁSICA — app.css
   Direção (16/09/2026, escolhida pelo cliente): VIDRO. Trilho de vidro à esquerda + mesa de conferência.
   Abre em vidro claro; vidro escuro no botão. Interface neutra: cor só onde significa algo
   (verde = apto, amarelo = reduzido, vermelho = perdeu, laranja = precisa de conferência).

   ⚠️ Desfoque (backdrop-filter) só em blocos que NÃO são fixos com rolagem própria. Gaveta e modal usam
   vidro quase opaco sem desfoque: painel fixo + camada de rolagem + blur já deixou painel em branco em
   algumas placas de vídeo (lição do MX Portal). A mesa (tabela longa) também não desfoca: as luzes do
   fundo já são borradas, então o vidro translúcido tem o mesmo efeito sem custo de GPU a cada rolagem. */

:root {
  --fundo: #e9efeb;
  --ink: #111815;
  --ink-2: #3c4843;
  --ink-3: #6b7872;
  --line: rgba(17, 24, 21, 0.09);
  --line-2: rgba(17, 24, 21, 0.16);
  --surface: rgba(255, 255, 255, 0.66);
  --surface-2: rgba(255, 255, 255, 0.42);
  --surface-3: rgba(17, 24, 21, 0.05);
  --vidro: rgba(255, 255, 255, 0.5);
  --vidro-forte: rgba(255, 255, 255, 0.8);
  --vidro-mesa: rgba(255, 255, 255, 0.6);
  --vidro-cab: rgba(247, 250, 248, 0.94);
  --vidro-solido: rgba(246, 249, 247, 0.96);
  --vidro-borda: rgba(255, 255, 255, 0.82);
  --brilho: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --desfoque: saturate(1.6) blur(22px);
  --sombra-vidro: 0 18px 50px -22px rgba(18, 52, 40, 0.32), 0 2px 8px rgba(18, 52, 40, 0.05);
  --sombra-1: 0 1px 2px rgba(18, 52, 40, 0.06);
  --sombra-2: 0 30px 80px -24px rgba(10, 30, 22, 0.45), 0 2px 10px rgba(10, 30, 22, 0.08);
  --brand: #0a9f77;
  --brand-forte: #07805f;
  --brand-suave: rgba(36, 193, 145, 0.16);
  --brand-tinta: #ffffff;
  --mast: #12140f;
  --mast-2: #1c2019;
  --mast-ink: #eceee7;
  --mast-ink-2: #a3a99c;
  --verde-mx: #24c191;
  --ok-t: #0b6b47; --ok-f: rgba(36, 193, 145, 0.16); --ok-p: #1fa971;
  --am-t: #7a5800; --am-f: rgba(224, 168, 0, 0.17); --am-p: #e0a800;
  --rd-t: #a11d1d; --rd-f: rgba(214, 69, 69, 0.13); --rd-p: #d64545;
  --lj-t: #9c4600; --lj-f: rgba(240, 138, 36, 0.17); --lj-p: #f08a24;
  --aj-t: #36577a; --aj-f: rgba(80, 120, 170, 0.14);
  --luz1: #34d399; --luz2: #5aa9f0; --luz3: #a7f3d0; --luz4: #fde68a;
  --raio: 22px;
  --raio-m: 16px;
  --raio-p: 11px;
  --fonte: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fonte-titulo: 'Bricolage Grotesque', 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --fonte-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --fundo: #0b0f0d;
  --ink: #eef3ef; --ink-2: #b9c4be; --ink-3: #85918b;
  --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.15);
  --surface: rgba(34, 44, 39, 0.66); --surface-2: rgba(255, 255, 255, 0.045); --surface-3: rgba(255, 255, 255, 0.07);
  --vidro: rgba(22, 30, 26, 0.55); --vidro-forte: rgba(46, 58, 52, 0.82); --vidro-mesa: rgba(20, 27, 23, 0.72);
  --vidro-cab: rgba(24, 32, 28, 0.97); --vidro-solido: rgba(17, 23, 20, 0.97); --vidro-borda: rgba(255, 255, 255, 0.09);
  --brilho: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --sombra-vidro: 0 24px 60px -22px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.3);
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-2: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  --brand: #24c191; --brand-forte: #34d4a3; --brand-suave: rgba(36, 193, 145, 0.17); --brand-tinta: #04130d;
  --ok-t: #72e0ae; --ok-f: rgba(31, 169, 113, 0.18);
  --am-t: #f2cf63; --am-f: rgba(224, 168, 0, 0.15);
  --rd-t: #f39b9b; --rd-f: rgba(214, 69, 69, 0.18);
  --lj-t: #f7ae6d; --lj-f: rgba(240, 138, 36, 0.16);
  --aj-t: #a3c3e8; --aj-f: rgba(80, 120, 170, 0.22);
  --luz1: #0f9e74; --luz2: #1d5fa8; --luz3: #0c6b55; --luz4: #5b4a12;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
/* cores literais no body por tema: há motor que não revalida `color` herdada ao trocar o tema */
body { margin: 0; min-height: 100vh; font-family: var(--fonte); font-size: 14px; line-height: 1.45; background: #e9efeb; color: #111815; -webkit-font-smoothing: antialiased; }
:root[data-theme="dark"] body { background: #0b0f0d; color: #eef3ef; }
h1, h2, h3 { font-family: var(--fonte-titulo); letter-spacing: -0.02em; margin: 0; color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand-forte); }
.mono { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; pointer-events: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }

/* ------------------------------------------------------------------ vidro + luzes */
.luzes { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.luzes i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; }
.luzes .l1 { width: 46vw; height: 46vw; background: var(--luz1); left: -12vw; top: -16vw; }
.luzes .l2 { width: 44vw; height: 44vw; background: var(--luz2); right: -14vw; top: 8vw; opacity: 0.36; }
.luzes .l3 { width: 40vw; height: 40vw; background: var(--luz3); left: 32%; bottom: -24vw; opacity: 0.5; }
.luzes .l4 { width: 22vw; height: 22vw; background: var(--luz4); right: 20%; bottom: -8vw; opacity: 0.32; }
:root[data-theme="dark"] .luzes i { opacity: 0.32; }
@media (prefers-reduced-motion: no-preference) {
  .luzes i { animation: flutua 26s ease-in-out infinite alternate; }
  .luzes .l2 { animation-delay: -9s; } .luzes .l3 { animation-delay: -15s; } .luzes .l4 { animation-delay: -4s; }
}
@keyframes flutua { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 4vw, 0) scale(1.08); } }
.vidro {
  background: var(--vidro); -webkit-backdrop-filter: var(--desfoque); backdrop-filter: var(--desfoque);
  border: 1px solid var(--vidro-borda); box-shadow: var(--sombra-vidro), var(--brilho); border-radius: var(--raio);
}

/* ------------------------------------------------------------------ estrutura */
.app { position: relative; z-index: 1; display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 18px; padding: 18px; min-height: 100vh; max-width: 1720px; margin: 0 auto; }
main { min-width: 0; padding-bottom: 40px; }

/* ------------------------------------------------------------------ trilho */
.trilho {
  position: sticky; top: 18px; align-self: start; height: calc(100vh - 36px); overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 16px; padding: 18px 14px 14px; border-radius: 26px;
}
.trilho::-webkit-scrollbar { display: none; }
.marca { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; min-width: 0; padding: 0 4px; }
.marca img { border-radius: 12px; display: block; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.45); }
.marca span { display: flex; flex-direction: column; min-width: 0; }
.marca strong { font-family: var(--fonte-titulo); font-size: 15.5px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; color: var(--ink); }
.marca small { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }
.abas { display: flex; flex-direction: column; gap: 3px; }
.aba {
  display: flex; align-items: center; gap: 11px; height: 42px; padding: 0 12px; border-radius: 13px; border: 1px solid transparent;
  background: transparent; color: var(--ink-2); cursor: pointer; font-weight: 600; font-size: 13.5px; text-align: left;
  transition: background 0.15s, color 0.15s;
}
.aba:hover { background: var(--surface-2); color: var(--ink); }
.aba.ativa { background: var(--vidro-forte); color: var(--ink); border-color: var(--vidro-borda); box-shadow: var(--brilho), 0 8px 20px -12px rgba(0, 0, 0, 0.35); }
.aba.ativa .ic { color: var(--brand); }

.trilho-comp { display: none; flex-direction: column; gap: 2px; padding: 13px 14px; border-radius: var(--raio-m); background: var(--surface-2); border: 1px solid var(--line); }
body[data-tela-ativa="apuracao"][data-passo-ativo="conferencia"] .trilho-comp { display: flex; }
.trilho-comp strong { font-family: var(--fonte-titulo); font-size: 19px; font-weight: 700; letter-spacing: -0.015em; margin-top: 2px; }
.trilho-comp small { color: var(--ink-3); font-size: 11.5px; line-height: 1.35; overflow-wrap: anywhere; }

.esteira ol { list-style: none; margin: 0; padding: 0 4px; }
.esteira li { position: relative; display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; align-items: center; min-height: 34px; color: var(--ink-3); }
.esteira li:not(:last-child)::after { content: ''; position: absolute; left: 13px; top: 29px; height: 10px; width: 2px; border-radius: 2px; background: var(--line-2); }
.esteira li .ic { grid-row: 1 / 3; width: 28px; height: 28px; padding: 6px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--surface-2); }
.esteira li b { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.esteira li small { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--fonte-mono); line-height: 1.3; }
.esteira li small:empty { display: none; }
.esteira li.feita { color: var(--ink-2); }
.esteira li.feita .ic { border-color: var(--brand); color: var(--brand-tinta); background: var(--brand); }
.esteira li.feita::after { background: var(--brand); }
.esteira li.atual { color: var(--ink); }
.esteira li.atual b { font-weight: 700; }
.esteira li.atual .ic { border-color: var(--brand); color: var(--brand); background: var(--vidro-forte); box-shadow: 0 0 0 4px var(--brand-suave); }
.esteira li.atual small { color: var(--brand-forte); }
.esteira li.alerta .ic { border-color: var(--lj-p); color: var(--lj-t); background: var(--vidro-forte); box-shadow: 0 0 0 4px var(--lj-f); }
.esteira li.alerta small { color: var(--lj-t); }
body.processando-ativo .esteira li.atual .ic { animation: pulso 1.4s ease-in-out infinite; }
@keyframes pulso { 0%, 100% { box-shadow: 0 0 0 3px var(--brand-suave); } 50% { box-shadow: 0 0 0 8px var(--brand-suave); } }

.trilho-exportar { display: none; flex-direction: column; gap: 8px; margin-top: auto; }
body[data-tela-ativa="apuracao"][data-passo-ativo="conferencia"] .trilho-exportar { display: flex; }
.trilho-exportar .lado { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.trilho-exportar .btn { width: 100%; }
.trilho-pe { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
body[data-tela-ativa="apuracao"][data-passo-ativo="conferencia"] .trilho-pe { margin-top: 0; }
.usuario {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); cursor: pointer; font-size: 12.5px; font-weight: 600;
}
.usuario span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario:hover { color: var(--ink); background: var(--vidro-forte); }
.usuario.sem-nome { border-color: rgba(240, 138, 36, 0.55); color: var(--lj-t); }
.icone {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-2); cursor: pointer; flex: none;
}
.icone:hover { color: var(--ink); background: var(--vidro-forte); }
.icone.pequeno { width: 30px; height: 30px; border-radius: 9px; }
.icone.pequeno .ic { width: 15px; height: 15px; }
.so-escuro { display: none; }
:root[data-theme="dark"] .so-claro { display: none; }
:root[data-theme="dark"] .so-escuro { display: block; }

/* ------------------------------------------------------------------ telas */
.sobretitulo { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.rotulo { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.meta { margin: 6px 0 0; color: var(--ink-2); font-size: 13px; }
.tela-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 14px; padding: 22px 26px; }
.tela-cab h1 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 800; }

/* início */
.inicio { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.9fr); gap: 18px; align-items: start; }
.inicio-principal { padding: clamp(22px, 3vw, 40px); }
.titulo-grande { font-size: clamp(2.1rem, 4.2vw, 3.5rem); line-height: 1.02; font-weight: 800; letter-spacing: -0.035em; margin: 2px 0 14px; }
.titulo-grande em { font-style: normal; color: var(--brand); }
.lead { max-width: 60ch; margin: 0 0 22px; color: var(--ink-2); font-size: 15.5px; }
.linha-campos { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > label { font-size: 12px; font-weight: 700; color: var(--ink-2); letter-spacing: 0.02em; }
.comp { display: flex; gap: 8px; }
input[type="text"], input[type="number"], input[type="search"], select, textarea {
  height: 40px; padding: 0 12px; border-radius: var(--raio-p); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); min-width: 0;
}
select option { background: #fff; color: #111815; }
:root[data-theme="dark"] select option { background: #182019; color: #eef3ef; }
textarea { height: auto; padding: 10px 12px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-suave); }
#compMes { width: 170px; }
#compAno { width: 100px; font-family: var(--fonte-mono); }

.soltar {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  min-height: 230px; padding: 28px 20px; border: 1.5px dashed var(--line-2); border-radius: 20px;
  background: var(--surface-2); cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.soltar input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.soltar:hover, .soltar.arrastando { border-color: var(--brand); background: var(--brand-suave); }
.soltar.arrastando { transform: scale(1.01); }
.soltar-icone {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; margin-bottom: 6px; color: #fff;
  background: linear-gradient(140deg, #34d4a3, #0a9f77); box-shadow: 0 14px 30px -12px rgba(10, 159, 119, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.soltar-icone .ic { width: 28px; height: 28px; }
.soltar strong { font-family: var(--fonte-titulo); font-size: 20px; font-weight: 700; }
.soltar > span { color: var(--ink-3); font-size: 13px; max-width: 50ch; }
.soltar .soltar-dica { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 6px 12px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: 12.5px; }
.soltar-dica .ic { width: 15px; height: 15px; color: var(--brand); }

.arquivos { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.arquivos li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; }
.arquivos li .ic { color: var(--ink-3); }
.arq-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.arq-tam { color: var(--ink-3); font-family: var(--fonte-mono); font-size: 12px; }
.arquivos .total { background: transparent; border: 0; color: var(--ink-3); padding: 2px 4px; }

.inicio-acoes { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 18px 0 10px; }
.marcar { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; cursor: pointer; }
.marcar input { width: 16px; height: 16px; accent-color: var(--brand); }
.privado { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; color: var(--ink-3); font-size: 12.5px; }
.privado .ic { color: var(--brand); width: 16px; height: 16px; }

.painel-regras { padding: 22px 22px 18px; position: sticky; top: 18px; }
.painel-regras h2 { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.painel-regras .meta { color: var(--ink-3); margin: 0 0 12px; }
.regra { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: baseline; padding: 10px 0; border-top: 1px dashed var(--line-2); }
.regra-n { font-family: var(--fonte-mono); color: var(--brand); font-size: 12px; font-weight: 600; }
.regra-t { font-size: 13.5px; color: var(--ink-2); }
.regra-v { font-family: var(--fonte-mono); font-weight: 600; font-size: 13px; white-space: nowrap; }
.regra-v.zero { color: var(--rd-t); }
.regra-v.red { color: var(--am-t); }
.painel-regras .ordem { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12px; line-height: 1.6; }
.painel-regras .ordem b { color: var(--ink); font-weight: 600; }
.painel-regras .trava { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11.5px; color: var(--ink-3); }
.painel-regras .trava .ic { width: 14px; height: 14px; }

/* botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, transform 0.06s, box-shadow 0.12s;
}
.btn:hover { background: var(--vidro-forte); border-color: var(--line-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.primario { background: var(--brand); border-color: transparent; color: var(--brand-tinta); box-shadow: 0 12px 26px -12px rgba(10, 159, 119, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.btn.primario:hover:not(:disabled) { background: var(--brand-forte); }
.btn.grande { height: 48px; padding: 0 22px; font-size: 15px; border-radius: 14px; }
.btn.grande .ic { width: 20px; height: 20px; }
.btn.pequeno { height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 10px; }
.btn.fantasma { background: transparent; border-color: transparent; color: var(--ink-2); box-shadow: none; }
.btn.fantasma:hover { background: var(--surface-2); color: var(--ink); }
.btn.perigo { color: var(--rd-t); border-color: rgba(214, 69, 69, 0.4); }
.btn.perigo:hover { background: var(--rd-f); }
.btn.ocupado { position: relative; color: transparent !important; }
.btn.ocupado::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid; border-color: var(--brand-tinta) transparent var(--brand-tinta) transparent; animation: gira 0.8s linear infinite; }
.btn:not(.primario).ocupado::after { border-color: var(--ink) transparent var(--ink) transparent; }
@keyframes gira { to { transform: rotate(360deg); } }

/* processamento */
.processando { max-width: 980px; margin: 0 auto; padding: 28px 30px; }
.proc-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.proc-cab h2 { font-size: 28px; font-weight: 800; }
.proc-num { font-size: 13px; color: var(--ink-2); }
.progresso { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin: 18px 0 18px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08); }
.progresso i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #0a9f77, #34d4a3); border-radius: inherit; transition: width 0.25s ease; box-shadow: 0 0 16px rgba(36, 193, 145, 0.6); }
.proc-log { list-style: none; margin: 0; padding: 14px 16px; max-height: 340px; overflow: auto; border-radius: 16px; background: rgba(12, 16, 13, 0.92); color: #a3a99c; font-family: var(--fonte-mono); font-size: 12px; line-height: 1.7; }
.proc-log li { display: flex; gap: 10px; }
.proc-log li span { color: #5d6458; flex: none; }
.proc-log li.ok { color: #9fe3c3; }
.proc-log li.aviso { color: #f7c48f; }
.proc-log li.erro { color: #f39b9b; }

/* ----------------------------------------------------------- conferência */
.conf-cab {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo total" "titulo cards";
  gap: 12px 28px; padding: 22px 26px; align-items: end;
}
.conf-titulo { grid-area: titulo; align-self: center; min-width: 0; }
.conf-titulo h1 { font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; }
.conf-titulo .sobretitulo { overflow-wrap: anywhere; }
.conf-total { grid-area: total; text-align: right; }
.conf-valor { display: block; font: 700 clamp(30px, 3.1vw, 44px) / 1 var(--fonte-mono); letter-spacing: -0.035em; margin-top: 6px; color: var(--ink); white-space: nowrap; }
.conf-valor-sub { display: block; margin-top: 4px; color: var(--ink-3); font-size: 12px; }
.cards { grid-area: cards; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.card {
  display: flex; align-items: center; gap: 10px; min-width: 116px; padding: 9px 14px; border-radius: 15px; text-align: left;
  border: 1px solid var(--line); background: var(--surface-2); color: inherit; cursor: pointer; transition: background 0.12s, transform 0.12s, box-shadow 0.12s;
}
.card:hover { background: var(--vidro-forte); transform: translateY(-1px); }
.card.ativo { background: var(--vidro-forte); border-color: var(--vidro-borda); box-shadow: var(--brilho), 0 10px 24px -12px rgba(0, 0, 0, 0.35), 0 0 0 1.5px var(--brand); }
.card > span { display: flex; flex-direction: column; line-height: 1.1; }
.card-valor { font: 700 21px var(--fonte-mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.card-rotulo { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.card.alerta .card-valor { color: var(--lj-t); }
.ponto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.p-apto { background: var(--ok-p); } .p-reduzido { background: var(--am-p); } .p-perdeu { background: var(--rd-p); } .p-revisao { background: var(--lj-p); }
.conf-numeros { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12.5px; }
.conf-numeros b { color: var(--ink); font-family: var(--fonte-mono); font-weight: 600; }

.avisos { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; margin: 14px 0; }
.aviso { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; min-width: 0; }
.aviso-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; flex: none; background: var(--surface-3); color: var(--ink-2); }
.aviso-ic .ic { width: 19px; height: 19px; }
.aviso.lj .aviso-ic { background: var(--lj-f); color: var(--lj-t); }
.aviso.rd .aviso-ic { background: var(--rd-f); color: var(--rd-t); }
.aviso.ok .aviso-ic { background: var(--ok-f); color: var(--ok-t); }
.aviso p { margin: 0; flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.aviso p b { display: block; color: var(--ink); font-size: 13.5px; margin-bottom: 1px; }
.aviso-acoes { display: flex; gap: 6px; flex: none; }
.aviso.info { background: var(--surface-2); border: 1px solid var(--line); }
.aviso.info > .ic { color: var(--brand); }

/* mesa: vidro translúcido SEM desfoque (tabela longa rolando; ver o topo do arquivo) */
.mesa { margin-top: 14px; border-radius: var(--raio); background: var(--vidro-mesa); border: 1px solid var(--vidro-borda); box-shadow: var(--sombra-vidro), var(--brilho); overflow: hidden; }
.ferramentas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.busca { position: relative; flex: 1 1 260px; max-width: 360px; }
.busca .ic { position: absolute; left: 13px; top: 11px; color: var(--ink-3); }
.busca input { width: 100%; padding-left: 40px; border-radius: 12px; background: var(--surface-2); border-color: var(--line); }
.filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background 0.12s; }
.chip:hover { color: var(--ink); background: var(--surface-2); }
.chip.ativo { background: var(--vidro-forte); border-color: var(--vidro-borda); color: var(--ink); box-shadow: var(--brilho), 0 6px 16px -8px rgba(0, 0, 0, 0.3); }
.chip b { font-family: var(--fonte-mono); font-weight: 500; font-size: 12px; color: var(--ink-3); }
.chip.ativo b { color: var(--brand-forte); }

.tabela-caixa { overflow: auto; border-radius: var(--raio); background: var(--vidro-mesa); border: 1px solid var(--vidro-borda); box-shadow: var(--sombra-vidro), var(--brilho); }
.mesa .tabela-caixa { max-height: calc(100vh - 110px); border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tabela th { position: sticky; top: 0; z-index: 2; background: var(--vidro-cab); color: var(--ink-3); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tabela th[data-ordem] { cursor: pointer; }
.tabela th[data-ordem]:hover { color: var(--ink); }
.tabela th.ordenada { color: var(--ink); }
.tabela th.ordenada::after { content: ' ↓'; color: var(--brand); }
.tabela th.ordenada.inversa::after { content: ' ↑'; }
.tabela td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tabela tbody tr { cursor: pointer; }
.tabela tbody tr:hover td { background: var(--surface-2); }
.tabela tbody tr.foco td { background: var(--brand-suave); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela th.num { font-family: var(--fonte); }
.tabela .nome strong { display: block; font-weight: 600; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.tabela .nome small { display: block; color: var(--ink-3); font-size: 11.5px; white-space: nowrap; margin-top: 1px; }
.tabela .nome small .mono { font-size: 11px; }
.tabela .fraco { color: var(--ink-3); }
.tabela .motivo { min-width: 240px; max-width: 420px; color: var(--ink-2); font-size: 12.5px; }
.tabela .motivo span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tabela .situacao .conf { display: block; margin-top: 5px; font-size: 10.5px; }
.tabela.compacta td, .tabela.compacta th { padding: 8px 10px; }
.tabela.compacta tbody tr { cursor: default; }
.valor { font-weight: 700; }
.v-perdeu { color: var(--rd-t); } .v-reduzido { color: var(--am-t); } .v-pendente { color: var(--ink-3); font-weight: 500; }
.vazio { padding: 28px; text-align: center; color: var(--ink-3); margin: 0; }

.status { display: inline-flex; align-items: center; gap: 7px; height: 25px; padding: 0 11px 0 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.s-apto { background: var(--ok-f); color: var(--ok-t); }
.s-reduzido { background: var(--am-f); color: var(--am-t); }
.s-perdeu { background: var(--rd-f); color: var(--rd-t); }
.s-revisao { background: var(--lj-f); color: var(--lj-t); }
.s-divergencia { background: var(--lj-f); color: var(--lj-t); box-shadow: inset 0 0 0 1px rgba(240, 138, 36, 0.5); }
.conf { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
.c-ok { color: var(--ok-t); } .c-pendente { color: var(--lj-t); } .c-ajuste { color: var(--aj-t); }
.etiqueta { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 8px; background: var(--surface-3); color: var(--ink-2); font-size: 11px; font-weight: 600; white-space: nowrap; }

.documentos { margin-top: 14px; border-radius: var(--raio-m); }
.documentos summary { display: flex; align-items: center; gap: 10px; padding: 15px 18px; cursor: pointer; list-style: none; font-weight: 600; }
.documentos summary::-webkit-details-marker { display: none; }
.documentos summary .seta { margin-left: auto; transition: transform 0.15s; color: var(--ink-3); }
.documentos[open] summary .seta { transform: rotate(90deg); }
.documentos > div { padding: 0 18px 18px; }

/* ---------------------------------------------------------------- gaveta (sem desfoque: é fixa e rola) */
.gaveta { position: fixed; inset: 0; z-index: 50; }
.gaveta-fundo { position: absolute; inset: 0; background: rgba(8, 16, 12, 0.4); animation: aparecer 0.15s ease; }
.gaveta-painel {
  position: absolute; top: 12px; right: 12px; bottom: 12px; width: min(700px, calc(100% - 24px)); border-radius: 24px;
  background: var(--vidro-solido); border: 1px solid var(--vidro-borda); box-shadow: var(--sombra-2);
  overflow-y: auto; animation: deslizar 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); display: flex; flex-direction: column;
}
@keyframes deslizar { from { transform: translateX(28px); opacity: 0.5; } to { transform: none; opacity: 1; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
/* faixa escura com cor literal: igual nos dois temas */
.g-cab { position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px 18px; background: linear-gradient(135deg, #111612 0%, #16261e 100%); color: #eceee7; border-bottom: 1px solid rgba(36, 193, 145, 0.35); }
.g-cab h2 { color: #fff; font-size: 22px; line-height: 1.15; font-weight: 800; }
.g-cab .g-sub { margin: 5px 0 0; color: #a3a99c; font-size: 12.5px; display: flex; gap: 6px 14px; flex-wrap: wrap; }
.g-cab .icone { margin-left: auto; border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); color: #eceee7; }
.g-cab .icone:hover { background: rgba(255, 255, 255, 0.14); }
.g-corpo { padding: 18px 22px 40px; display: flex; flex-direction: column; gap: 14px; }
.g-resultado { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--brilho); }
.g-resultado .rotulo { display: block; margin-bottom: 6px; }
.g-resultado .grande { font-family: var(--fonte-mono); font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.g-resultado .motivo-grande { margin: 8px 0 0; color: var(--ink-2); font-size: 13px; }
.bloco { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; }
.bloco > h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.bloco > h3 .etiqueta { margin-left: auto; font-family: var(--fonte); }
.bloco.laranja { border-color: rgba(240, 138, 36, 0.45); background: linear-gradient(135deg, var(--lj-f), var(--surface) 70%); }
.bloco.laranja > h3 { color: var(--lj-t); }

.livro { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.passo { display: grid; grid-template-columns: 34px 1fr; gap: 0 12px; padding: 11px 14px; border-bottom: 1px dashed var(--line); background: var(--surface-2); }
.passo:last-child { border-bottom: 0; }
.passo-n { grid-row: 1 / 3; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); font-family: var(--fonte-mono); font-size: 12px; font-weight: 600; }
.passo-t { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.passo-r { font-weight: 600; }
.passo-d { grid-column: 2; color: var(--ink-3); font-size: 12.5px; }
.passo.decisivo { background: var(--brand-suave); }
.passo.decisivo .passo-n { background: #12140f; color: #24c191; }
.livro-total { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: #12140f; color: #eceee7; font-weight: 700; }
.livro-total .mono { font-size: 17px; color: #fff; }

.pendencia { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px dashed var(--line); }
.pendencia:first-of-type { border-top: 0; padding-top: 0; }
.pendencia .ic { color: var(--lj-t); margin-top: 2px; }
.pendencia p { margin: 0; flex: 1; }
.variantes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.variante { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.variante h4 { margin: 0; font-size: 13px; }
.variante dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12.5px; }
.variante dt { color: var(--ink-3); }
.variante dd { margin: 0; font-weight: 600; }
.variante.escolhida { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }

.form-ajuste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.form-ajuste .campo input, .form-ajuste .campo select { width: 100%; }
.form-ajuste .largo { grid-column: 1 / -1; }
.fonte-dado { font-size: 11.5px; color: var(--ink-3); }
.fonte-dado.manual { color: var(--aj-t); font-weight: 600; }
.acoes-linha { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 12px; }
.recorte { border: 1px solid var(--line); border-radius: 12px; overflow: auto; background: #fff; max-height: 520px; }
.recorte canvas { display: block; }
.eventos td:nth-child(3), .eventos td:nth-child(4) { text-align: right; font-family: var(--fonte-mono); white-space: nowrap; }
.eventos tr.relevante td { background: var(--lj-f); }
.eventos tr.decide td { background: var(--surface-2); }
.historico-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.historico-lista li { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; }
.historico-lista li b { color: var(--ink); }
.historico-lista li .mono { color: var(--ink-3); font-size: 11.5px; }

/* ------------------------------------------------------------ modal/toast */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.modal-fundo { position: absolute; inset: 0; background: rgba(8, 16, 12, 0.45); animation: aparecer 0.15s ease; }
.modal-caixa { position: relative; width: min(540px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--vidro-solido); border: 1px solid var(--vidro-borda); border-radius: 22px; padding: 24px; box-shadow: var(--sombra-2); animation: subir 0.18s ease; }
@keyframes subir { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-caixa h2 { font-size: 21px; font-weight: 800; margin-bottom: 6px; }
.modal-caixa .meta { margin-bottom: 14px; }
.modal-corpo { display: flex; flex-direction: column; gap: 12px; }
.modal-corpo .campo input, .modal-corpo .campo select, .modal-corpo .campo textarea { width: 100%; }
.modal-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.erro-campo { color: var(--rd-t); font-size: 12.5px; margin: 0; }
.lista-marcar { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.lista-marcar .marcar { color: var(--ink); font-size: 13.5px; font-weight: 500; text-transform: none; letter-spacing: 0; justify-content: flex-start; text-align: left; margin: 0; }
.modal-corpo .campo .lista-marcar input[type="checkbox"] { width: 16px; height: 16px; flex: none; }

.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 70; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 36px)); }
.toast {
  display: flex; gap: 10px; align-items: flex-start; padding: 13px 15px; border-radius: 16px; font-size: 13px; animation: subir 0.18s ease;
  background: rgba(16, 21, 18, 0.86); color: #eceee7; border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.6);
}
.toast .ic { margin-top: 1px; }
.t-ok .ic { color: #24c191; } .t-erro .ic { color: #f39b9b; } .t-aviso .ic { color: #f7ae6d; }

/* ------------------------------------------------------- config/histórico (vidro sem desfoque: têm rolagem interna) */
.config-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cfg { background: var(--vidro-mesa); border: 1px solid var(--vidro-borda); border-radius: var(--raio); padding: 20px 22px; box-shadow: var(--sombra-vidro), var(--brilho); min-width: 0; }
.cfg.largo { grid-column: 1 / -1; }
.cfg h2 { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.cfg > .meta { margin: 4px 0 14px; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grade-2 .campo input, .grade-2 .campo select { width: 100%; }
.politica { display: grid; grid-template-columns: 1fr minmax(180px, 240px); gap: 12px; align-items: center; padding: 10px 0; border-top: 1px dashed var(--line-2); }
.politica:first-of-type { border-top: 0; }
.politica p { margin: 2px 0 0; color: var(--ink-3); font-size: 12.5px; }
.politica select { width: 100%; }
.tabela-rolagem { overflow: auto; max-height: 420px; border: 1px solid var(--line); border-radius: 12px; }
.historico-vazio { padding: 40px; text-align: center; color: var(--ink-3); background: var(--vidro-mesa); border: 1px dashed var(--line-2); border-radius: var(--raio); }

/* ------------------------------------------------------------ responsivo */
@media (max-width: 1180px) {
  .app { grid-template-columns: 236px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .trilho { top: 14px; height: calc(100vh - 28px); }
  .conf-cab { grid-template-columns: 1fr; grid-template-areas: "titulo" "total" "cards"; }
  .conf-total { text-align: left; }
  .cards { justify-content: flex-start; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
  .trilho { position: relative; top: auto; height: auto; overflow: visible; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 20px; }
  .marca small { display: none; }
  .abas { flex-direction: row; margin-left: auto; }
  .aba { width: 42px; padding: 0; justify-content: center; }
  .aba span { display: none; }
  .trilho-comp, .esteira { display: none !important; }
  .trilho-pe { margin-top: 0 !important; padding-top: 0; border-top: 0; flex: none; }
  .usuario { flex: none; width: 42px; padding: 0; justify-content: center; }
  .usuario span { display: none; }
  .app > * { min-width: 0; }
  body[data-tela-ativa="apuracao"][data-passo-ativo="conferencia"] .trilho-exportar { flex-direction: row; flex-wrap: wrap; flex-basis: 100%; order: 9; margin-top: 0; }
  .trilho-exportar .lado { display: contents; }
  .trilho-exportar .btn { width: auto; flex: 1 1 28%; min-width: 0; padding: 0 10px; }
  .trilho-exportar .btn.grande { flex-basis: 100%; height: 44px; font-size: 14.5px; }
  .inicio { grid-template-columns: 1fr; }
  .painel-regras { position: static; }
  .config-grade { grid-template-columns: 1fr; }
  .mesa .tabela-caixa { max-height: none; }
}
@media (max-width: 640px) {
  .marca span { display: none; }
  .card { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .form-ajuste, .grade-2 { grid-template-columns: 1fr; }
  .politica { grid-template-columns: 1fr; }
  .tela-cab, .conf-cab { padding: 18px; }
  .g-cab, .g-corpo { padding-left: 16px; padding-right: 16px; }
  .gaveta-painel { top: 0; right: 0; bottom: 0; width: 100%; border-radius: 0; }
  .avisos { grid-template-columns: 1fr; }
  .aviso { flex-wrap: wrap; }
  .aviso-acoes { margin-left: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
@media print {
  .luzes, .trilho, .ferramentas, .avisos, .documentos, .toasts, .gaveta, .modal { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .app { display: block; padding: 0; }
  .vidro, .mesa, .tabela-caixa { background: #fff !important; box-shadow: none !important; border-color: #ddd !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mesa .tabela-caixa { max-height: none; overflow: visible; }
}