/* ============================================================================
   Outlet Lara's — Inventário por etiqueta
   CONCEITO AURORA — "VIDRO SOBRE CÉU", aplicado ao markup ATUAL.

   Um gradiente-malha de azuis claros — celeste, azul-bebê e gelo — respira
   atrás de PAINÉIS DE VIDRO. A seleção acende o vidro por dentro com halo
   azul. Botões são pílulas que emitem luz. O código é o objeto tipográfico
   central: mono, grande, letterspaced.

   OS MATERIAIS (tudo nesta folha é feito destes cinco):
   · CÉU ............ o gradiente-malha fixo atrás de tudo (nunca recebe texto)
   · VIDRO .......... branco translúcido. SÓ o que não rola tem blur de verdade
                      (topo, doca, folha do "Mais", rodapé, fila-topo); itens
                      de lista são vidro CHAPADO, sem backdrop-filter — a tela
                      Estoque desenha centenas de cartões e a Dados, 281.
   · PAPEL-ETIQUETA . o amarelo medido #FFEFB0. Luminância 0,861 contra 0,86–
                      0,91 do céu: a etiqueta lê como o mesmo papel sob a
                      mesma luz. A tinta sobre ele é a MESMA tinta do app.
   · TINTA .......... #13293D. Os displays grandes são banhados no gradiente
                      de tinta; texto corrido é tinta sólida.
   · FIO ............ bordas-reflexo brancas no vidro; fios azul-gelo dentro
                      das superfícies. Não há linha dura no conceito.

   CONTRASTE (WCAG AA, calculado — não estimado):
   · #13293D sobre #FFFFFF ........ 14,9:1  (texto)              AA/AAA
   · #13293D sobre céu #EDF6FE .... 13,6:1  (texto sobre o céu)  AA/AAA
   · #4A6076 sobre #FFFFFF ........  6,5:1  (secundário)         AA/AAA
   · #4A6076 sobre céu ............  6,0:1  (secundário no céu)  AA
   · #1465B8 sobre #FFFFFF ........  5,9:1  (ação, links, .codigo) AA
   · #FFFFFF sobre #1465B8 ........  5,9:1  (pastilhas de ação)  AA
   · #FFFFFF sobre grad-marca .....  5,0:1 no stop MAIS CLARO visível
                                     (#1770C9); 8,5:1 no início — AA em
                                     qualquer corpo, com folga no grande
   · #EAF5FF sobre grad-marca .....  4,5:1 no pior stop (texto de apoio)
   · #13293D sobre #FFEFB0 ........ 12,9:1  (tinta na etiqueta)  AA/AAA
   · #35566F sobre #FFEFB0 ........  6,7:1  (apoio na etiqueta)  AA
   · #0C7A46 / #C42B45 / #7A5B00 sobre branco: 5,4 / 5,6 / 6,3  AA
   · e sobre os próprios fundos claros: 4,8 / 4,8 / 5,5          AA
   · grad-tinta (texto-clip) para em #1B7CD7: 3,9:1 sobre o céu — por isso
     o banho de gradiente SÓ existe em display grande e bold (≥19px/800).
   Os azuis vivos (#2E9BF5, #67C6FA, #A5DEFF) são SUPERFÍCIE: fundo, brilho,
   halo — nunca tinta de texto, nunca fundo de texto pequeno.

   CONTRATOS COM O JS (nada aqui pode quebrar):
   · casca.js pinta a .regua com barras('OUTLETLARAS', '#1465B8') em estilo
     inline — a régua é desenhada para BARRAS AZUIS ESCURAS sobre faixa clara.
   · capturar.html pinta .progresso-barras com var(--linha-2) e o .feito com
     var(--azul-800): o CSS entrega as cores de fundo que fazem isso ler.
   · o JS injeta color inline var(--verde)/var(--amarelo) no #rodape #rede —
     a pastilha re-resolve os tokens localmente (ver lá).
   · --fundo-marca vaza o furo do símbolo da marca (SVG da casca).
   · os 73 nomes de variáveis existentes continuam todos definidos.
   ========================================================================== */

:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
  color-scheme: only light;   /* tema claro travado */

  /* ---- Azul, do profundo ao céu ---- */
  --azul-900: #0C3B70;
  --azul-800: #1465B8;        /* a tinta de ação da marca */
  --azul-cabecalho: #1465B8;
  --azul-600: #1A78D6;        /* ação viva — só grande/bold sob branco */
  --azul-400: #2E9BF5;        /* o azul vivo do céu — SUPERFÍCIE */
  --celeste:  #67C6FA;
  --gelo:     #A5DEFF;
  --azul-100: #DBEDFB;
  --azul-50:  #EFF8FE;

  /* ---- Céu e vidro ---- */
  --papel:      #EDF6FE;      /* base do céu */
  --branco:     #FFFFFF;
  --vidro:      rgba(255, 255, 255, .7);   /* o vidro chapado das listas */
  --reflexo:    rgba(255, 255, 255, .92);  /* a borda é um reflexo de luz */
  --tinta:      #13293D;
  --tinta-2:    #33506B;
  --fraco:      #4A6076;
  --linha:      #D6E8F7;
  --linha-2:    #B9D8EF;

  /* ---- O papel-etiqueta (decisão do dono: o amarelo FICA, no tom medido).
          A tinta é a MESMA do app: #13293D dá 12,91:1 sobre o amarelo —
          o mesmo papel, a mesma tinta, a mesma luz. ---- */
  --amarelo:       #FFEFB0;
  --amarelo-borda: #E9D48A;
  --impressao:     #13293D;
  --impressao-2:   #35566F;

  /* ---- Estado por função ---- */
  --verde:       #0C7A46;
  --verde-600:   #1F7A50;
  --verde-bg:    #E2F5EC;
  --vermelho:    #C42B45;
  --vermelho-bg: #FBE9EC;
  --ambar:       #7A5B00;
  --ambar-bg:    #FAF0CE;
  --foco:        #1465B8;

  /* ---- Ritmo: escala de 4px ---- */
  --e1: 4px;  --e2: 8px;  --e3: 12px;
  --e4: 16px; --e5: 24px; --e6: 36px;

  /* Cantos de vidro: generosos. Pílula é a assinatura das ações. */
  --raio: 14px;
  --raio-g: 20px;
  --raio-etq: 14px;
  --raio-2: 10px;
  --raio-3: 8px;
  --raio-pill: 999px;

  /* Sombra de luz azul — o vidro flutua sobre o céu. */
  --sombra-papel: 0 1px 2px rgba(20, 80, 140, .05), 0 8px 28px -14px rgba(20, 80, 140, .22);
  --sombra-etq: 0 2px 6px rgba(20, 80, 140, .08), 0 10px 30px -14px rgba(20, 80, 140, .28);
  --sombra-acao: 0 12px 28px -10px rgba(46, 155, 245, .55);
  --sombra-casca: 0 8px 30px -16px rgba(20, 80, 140, .35);

  /* Halos de seleção — o vidro acende por dentro. */
  --anel-acao: 0 0 0 2px var(--azul-400), 0 10px 26px -10px rgba(46, 155, 245, .5),
               inset 0 0 22px rgba(103, 198, 250, .14);
  --anel-ok:   0 0 0 2px var(--verde), 0 10px 26px -10px rgba(14, 138, 79, .4),
               inset 0 0 20px rgba(14, 138, 79, .08);

  --transicao: 170ms cubic-bezier(.2, .7, .3, 1);

  --alvo-min: 48px;
  --alvo: 54px;

  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", "Roboto Mono", Menlo, monospace;
  --cond: "Bahnschrift SemiCondensed", Bahnschrift, "Roboto Condensed", "Arial Narrow", "Liberation Sans Narrow", system-ui, sans-serif;

  /* Gradientes-assinatura.
     O DE MARCA recebe texto branco: os stops foram puxados para baixo até o
     pior ponto visível (#1770C9) dar 5,0:1 com branco — AA em qualquer corpo.
     O DE TINTA é banho de texto-clip: SÓ display grande e bold (3,9:1 no
     stop claro = AA texto grande, nunca texto corrido).
     O DE CÉU nunca recebe texto: pode ser tão claro quanto quiser. */
  --grad-marca: linear-gradient(135deg, #0E4C93, #1465B8 55%, #1A78D6 135%);
  --grad-tinta: linear-gradient(110deg, #0F5AAE, #1465B8 45%, #1E88E8 130%);
  --grad-ceu:   linear-gradient(90deg, #1668C9, #2E9BF5 55%, #67C6FA);

  /* legado — nomes antigos que podem sobrar em estilos inline */
  --marca: var(--azul-800);
  --marca-viva: var(--azul-600);
  --marca-clara: var(--azul-600);
  --superf: var(--papel);
  --superf-2: #E2F0FB;
  --fundo: var(--papel);
  --painel: var(--branco);
  --painel2: var(--superf-2);
  --borda: var(--linha);
  --texto: var(--tinta);
  --amarelo-bg: var(--ambar-bg);
  --verde-escuro: var(--verde-bg);
  --amarelo-viva: var(--amarelo);
  --sombra-1: var(--sombra-papel);
  --sombra-2: var(--sombra-papel);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* O CÉU: o gradiente-malha do conceito, atrás de tudo, sempre. */
body {
  margin: 0;
  color: var(--tinta);
  font: 16px/1.55 var(--fonte);
  background:
    radial-gradient(90% 48% at 12% 0%, rgba(46, 155, 245, .32), transparent 60%),
    radial-gradient(75% 42% at 95% 14%, rgba(103, 198, 250, .36), transparent 60%),
    radial-gradient(90% 46% at 40% 100%, rgba(165, 222, 255, .42), transparent 62%),
    linear-gradient(165deg, #F2F9FF, #E6F3FC 45%, var(--papel));
  background-color: var(--papel);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

img { max-width: 100%; display: block; }
a { color: var(--azul-800); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }
/* No conteúdo, link é sublinhado sempre: no toque não existe hover. */
main a { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
/* Sobre superfícies de tinta azul ou vermelha, o anel azul desapareceria.
   O topo de vidro claro fica de fora — lá o anel azul é o correto. */
header:not(.topo) :focus-visible, .banner :focus-visible,
.setor-cartao :focus-visible { outline-color: #fff; }

/* ---------------------------------------------------------------------------
   CABEÇALHO (telas sem casca, ex.: admin) — gradiente da marca com a régua.
   --------------------------------------------------------------------------- */
header {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3);
  padding: calc(var(--e3) + 7px) var(--e4) var(--e3);
  padding-top: calc(var(--e3) + 7px + env(safe-area-inset-top, 0px));
  background: var(--grad-marca);
  color: #fff;
  box-shadow: var(--sombra-casca);
}
/* A régua de barras no alto do cabeçalho antigo. O .topo de vidro tem a
   régua própria, pintada pelo JS — este ::before não é para ele. */
header:not(.topo)::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px;
  background:
    repeating-linear-gradient(90deg, rgba(10, 40, 80, .5) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, rgba(10, 40, 80, .4) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(10, 40, 80, .45) 0 2px, transparent 2px 13px),
    repeating-linear-gradient(90deg, rgba(10, 40, 80, .5) 0 4px, transparent 4px 23px);
  pointer-events: none;
}
header .espaco { flex: 1; }

.marca {
  display: flex; align-items: center; gap: var(--e2);
  font-family: var(--fonte);
  font-weight: 800; font-size: 14px; letter-spacing: .08em;
  text-transform: uppercase; color: #fff; white-space: nowrap;
}
.marca .sub { color: #D8EEFF; }

/* A PASTILHA DO OPERADOR — o CSS vence estilos inline do JS com !important:
   pílula de vidro branco, nome em tinta da marca (5,9:1). */
#quem {
  font-family: var(--mono);
  font-weight: 800; font-size: 12px; letter-spacing: .05em;
  padding: 8px 12px; border-radius: var(--raio-pill);
  background: rgba(255, 255, 255, .95) !important;
  color: var(--azul-800) !important;
  box-shadow: 0 2px 10px -2px rgba(10, 50, 100, .3);
}
#quem b { font-size: 13px; }

/* Abas do cabeçalho antigo (telas sem casca). */
nav {
  flex-basis: 100%; display: flex; gap: 2px; margin-top: var(--e3);
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
nav::-webkit-scrollbar { display: none; }
nav a {
  flex: 0 0 auto; scroll-snap-align: start;
  display: flex; align-items: center; justify-content: center;
  min-height: var(--alvo-min); padding: 8px 12px 12px;
  position: relative; white-space: nowrap;
  font-size: 13px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase;
  color: #FFFFFF;
  border-radius: 12px 12px 0 0;
  transition: background-color var(--transicao), color var(--transicao);
}
nav a:hover { text-decoration: none; color: #fff; background: rgba(255, 255, 255, .1); }
nav a.ativo { color: var(--azul-800); background: var(--papel); }
nav a.ativo::after {
  content: ""; position: absolute; bottom: 5px; left: 50%;
  transform: translateX(-50%);
  width: 38px; height: 5px;
  background:
    repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 9px);
  color: var(--azul-600);
}
@media (min-width: 760px) {
  nav { flex-basis: auto; margin-top: 0; align-self: flex-end; overflow-x: visible; }
  nav a { padding: 12px 16px 14px; }
}

/* ---------------------------------------------------------------------------
   ESTRUTURA
   --------------------------------------------------------------------------- */
main { padding: var(--e5) var(--e4) var(--e6); max-width: 780px; margin: 0 auto; }

/* A tela chega como o vidro: sobe e assenta. */
@media (prefers-reduced-motion: no-preference) {
  body.com-casca > main { animation: tela-assenta .5s cubic-bezier(.16, 1, .3, 1); }
  @keyframes tela-assenta { from { opacity: 0; transform: translateY(14px); } }
}

h1 {
  font-family: var(--fonte);
  font-size: 24px; font-weight: 800; letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 var(--e5);
}

/* O TÍTULO DA TELA — display grande DENTRO do conteúdo (injetado pela casca),
   banhado no gradiente de tinta: é a assinatura tipográfica do Aurora.
   Sempre ≥34px/800 — o banho nunca desce a texto corrido. */
.titulo-tela { margin: var(--e2) 0 var(--e5); }
.titulo-tela h1 {
  font-size: clamp(34px, 8.5vw, 40px);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.05;
  margin: 0;
  background: var(--grad-tinta);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* h2 e h2.secao: overline mono + fio de céu — divide sem caixa. */
h2 {
  font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fraco); margin: var(--e6) 0 var(--e3);
  display: flex; align-items: center; gap: var(--e2);
}
h2::after { content: ""; flex: 1; height: 1px; background: var(--linha-2); }
h2:first-child { margin-top: 0; }

/* Cartão = painel de vidro: borda-reflexo, sombra de luz azul.
   CHAPADO, sem backdrop-filter: cartões aparecem aos montes nas listas, e
   blur em série é o que faz um celular de galpão engasgar. O vidro "de
   verdade" mora no topo e na doca, que não rolam. */
.cartao {
  background: var(--vidro);
  border: 1px solid var(--reflexo);
  border-radius: var(--raio-g);
  padding: var(--e5);
  margin-bottom: var(--e4);
  box-shadow: var(--sombra-papel);
}

/* ---------------------------------------------------------------------------
   SETOR — o carimbo da captura: o gradiente da marca, texto branco.
   Todo texto branco aqui fica ≥5,0:1 mesmo no stop mais claro; o texto de
   apoio usa #EAF5FF (4,5:1 no pior ponto — AA).
   --------------------------------------------------------------------------- */
.setor-cartao {
  background: var(--grad-marca);
  border-radius: var(--raio-g);
  padding: var(--e5);
  margin-bottom: var(--e4);
  color: #fff;
  box-shadow: 0 16px 36px -14px rgba(26, 120, 214, .6);
}
.setor-cartao label { color: #EAF5FF; margin-top: 0; }
.setor-cartao .dica { color: #EAF5FF; }
.setor-cartao input {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
  font-family: var(--mono);
  font-size: 30px; font-weight: 800; letter-spacing: .16em;
  text-align: center; text-transform: uppercase;
  min-height: 72px;
}
.setor-cartao input::placeholder { color: rgba(255, 255, 255, .55); letter-spacing: .1em; }
.setor-cartao input:focus {
  background: rgba(255, 255, 255, .22);
  border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .2);
}
.setor-atual {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3);
}
.setor-atual .valor {
  font-family: var(--mono); font-size: 34px; font-weight: 800;
  letter-spacing: .12em; line-height: 1;
}
.setor-atual .contador { font-size: 13px; color: #EAF5FF; text-align: right; }
.setor-atual .contador b {
  display: block; font-family: var(--mono); font-size: 24px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: #fff;
}

/* ---------------------------------------------------------------------------
   CAMPOS
   --------------------------------------------------------------------------- */
label {
  display: block;
  font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fraco); margin: var(--e4) 0 var(--e2);
}
.cartao > label:first-of-type { margin-top: 0; }

input, select, textarea {
  width: 100%;
  /* 16px é obrigatório: abaixo disso o iOS dá zoom sozinho ao focar. */
  font: 16px/1.4 var(--fonte);
  color: var(--tinta);
  min-height: var(--alvo);
  padding: var(--e3) var(--e4);
  background: rgba(255, 255, 255, .85);
  border: 1.5px solid var(--reflexo);
  border-radius: var(--raio);
  transition: border-color var(--transicao), box-shadow var(--transicao),
              background-color var(--transicao);
}
/* 4,9:1 sobre branco — o placeholder tem que sobreviver ao sol do corredor. */
input::placeholder, textarea::placeholder { color: #5C7389; }
input:focus, select:focus, textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--azul-400);
  box-shadow: 0 0 0 4px rgba(46, 155, 245, .18);
}
input[type="radio"], input[type="checkbox"] {
  width: auto; min-height: 0; accent-color: var(--azul-800);
}
input[type="number"] { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* O CÓDIGO: mono, letterspaced, tinta da marca — sólida, não banhada.
   O banho de gradiente ficou só nos displays ≥19px/800; .codigo aparece
   também em células de tabela e spans de 13–15px, onde gradiente reprovaria. */
input.codigo, .codigo {
  font-family: var(--mono);
  font-variant-numeric: slashed-zero tabular-nums;
  letter-spacing: .18em; text-transform: uppercase;
  font-size: 20px; font-weight: 700;
}
.codigo { color: var(--azul-800); }
input.codigo { background: rgba(255, 255, 255, .85); color: var(--azul-800); }

.dica, .cartao > .metrica > .rotulo {
  font-size: 13px; line-height: 1.5; color: var(--fraco);
}
.dica { margin-top: var(--e2); }

.meta { font-size: 12px; color: var(--fraco); }

/* ---------------------------------------------------------------------------
   BOTÕES — pílulas. A principal emite a própria luz.
   Texto branco só sobre o grad-marca (5,0:1 no pior stop) ou verde/vermelho
   escuros — verificados um a um, nunca sobre azul vivo.
   --------------------------------------------------------------------------- */
button {
  font: 700 16px/1.2 var(--fonte);
  color: var(--tinta);
  min-height: var(--alvo);
  padding: var(--e3) var(--e4);
  width: 100%;
  background: rgba(255, 255, 255, .85);
  border: 1.5px solid var(--reflexo);
  border-radius: var(--raio-pill);
  cursor: pointer;
  box-shadow: 0 2px 12px -6px rgba(20, 80, 140, .25);
  transition: transform var(--transicao), filter var(--transicao),
              background-color var(--transicao), border-color var(--transicao),
              box-shadow var(--transicao);
}
button:active { transform: translateY(1px) scale(.99); }

button.primario {
  font-size: 19px; font-weight: 800;
  color: #fff; border-color: transparent;
  background: var(--grad-marca);
  box-shadow: var(--sombra-acao);
}
button.primario:active { filter: brightness(.94); }

button.secundario {
  color: var(--azul-800); background: rgba(255, 255, 255, .88);
  border: 2px solid var(--azul-400);
}
button.secundario:active { background: var(--azul-50); }

button.perigo { color: var(--vermelho); border-color: #F2C2CC; background: rgba(255, 255, 255, .88); }
button.perigo:active { background: var(--vermelho-bg); }

button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.botoes { display: flex; gap: var(--e3); margin-top: var(--e5); }
.botoes button { flex: 1; }

/* A pílula gigante de luz, com a faixa de barras impressa no pé e o reflexo
   de vitrine atravessando devagar. Na tela de captura atual ela vira o
   DISPARO circular (.botao-camera, adiante) — mas continua definida para
   qualquer tela que a use por inteiro. */
button.gigante {
  min-height: 108px;
  font-family: var(--fonte);
  font-size: 21px; font-weight: 800; letter-spacing: .01em;
  color: #fff; border-color: transparent;
  border-radius: 30px;
  position: relative; overflow: hidden;
  background-color: var(--azul-800);
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .32) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .24) 0 1px, transparent 1px 9px),
    var(--grad-marca);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100% 8px, 100% 8px, 100% 100%;
  background-position: left calc(100% - 12px), left calc(100% - 12px), 0 0;
  box-shadow: 0 18px 40px -12px rgba(46, 155, 245, .6);
}
button.gigante:active { filter: brightness(.94); }
@media (prefers-reduced-motion: no-preference) {
  button.gigante::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 36%; left: -50%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
    animation: reflexo-vitrine 4.2s ease-in-out infinite;
  }
  @keyframes reflexo-vitrine { 0%, 60% { left: -50%; } 90%, 100% { left: 130%; } }
}

/* Encerrar o setor: verde, pílula, com a própria luz.
   O gradiente para em #0F8850 no pior ponto visível — 4,5:1 com branco. */
button.finalizar {
  font-size: 19px; font-weight: 800;
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, #0B6E3F, var(--verde) 70%, #129558 130%);
  box-shadow: 0 12px 28px -10px rgba(14, 138, 79, .5);
}
button.finalizar:active { filter: brightness(.94); }

/* ---------------------------------------------------------------------------
   MÉTRICAS — números banhados no gradiente, sobre vidro chapado.
   --------------------------------------------------------------------------- */
.grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }

.metrica {
  background: var(--vidro);
  border: 1px solid var(--reflexo);
  border-radius: var(--raio);
  padding: var(--e4);
  box-shadow: var(--sombra-papel);
}
.metrica .valor {
  font-family: var(--mono);
  font-size: 28px; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  background: var(--grad-tinta);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.metrica .rotulo { font-size: 12px; color: var(--fraco); margin-top: var(--e1); }

/* ---------------------------------------------------------------------------
   SINAIS
   --------------------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono);
  font-size: 12px; font-weight: 700;
  padding: 4px 10px; margin: 0 var(--e1) var(--e1) 0;
  border-radius: var(--raio-pill);
  background: rgba(255, 255, 255, .8); color: var(--azul-800);
  border: 1px solid var(--reflexo);
}
.chip.ok    { background: var(--verde-bg);    color: var(--verde);    border-color: #B5E0CB; }
.chip.aviso { background: var(--ambar-bg);    color: var(--ambar);    border-color: #E2C86B; }
.chip.erro  { background: var(--vermelho-bg); color: var(--vermelho); border-color: #EFB6C1; }

.aviso-caixa, .erro-caixa {
  font-size: 14px; line-height: 1.5;
  padding: var(--e3) var(--e4);
  margin: var(--e3) 0;
  border-radius: var(--raio);
  border-left: 4px solid;
}
.aviso-caixa { background: var(--ambar-bg);    border-left-color: #D9A800;        color: #5C4402; }
.erro-caixa  { background: var(--vermelho-bg); border-left-color: var(--vermelho); color: #8A1B30; }

.banner, #banner {
  background: var(--vermelho);
  color: #fff; font-weight: 700; font-size: 14px;
  padding: var(--e3) var(--e4);
  padding-top: calc(var(--e3) + env(safe-area-inset-top, 0px));
}

.vazio { color: var(--fraco); text-align: center; padding: var(--e6) var(--e4);
         font-size: 14px; line-height: 1.6; }

/* ---------------------------------------------------------------------------
   CAPTURAS RECENTES — vidro chapado com lombada-semáforo; o PENDENTE é a
   superfície inteira de papel-etiqueta: amarelo com a tinta do impresso.
   --------------------------------------------------------------------------- */
.captura {
  display: flex; align-items: center; gap: var(--e3);
  background: var(--vidro);
  border: 1px solid var(--reflexo);
  border-left: 4px solid var(--linha-2);
  border-radius: var(--raio);
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e2);
  box-shadow: var(--sombra-papel);
}
.captura.lendo    { border-left-color: var(--azul-400); }
.captura.lido     { border-left-color: var(--verde); }
.captura.problema { border-left-color: var(--vermelho); }

/* O papel sob a luz do céu: do amarelo-claro para o amarelo medido. */
.captura.na-fila {
  background: linear-gradient(170deg, #FFF7D6, var(--amarelo));
  border-color: var(--amarelo-borda);
  border-left-color: #C99F27;
  box-shadow: var(--sombra-etq);
}

.captura .corpo { flex: 1; min-width: 0; }
.captura .cod {
  font-family: var(--mono); font-variant-numeric: slashed-zero tabular-nums;
  font-size: 16px; font-weight: 800; letter-spacing: .12em; color: var(--azul-800);
}
.captura .nome {
  font-size: 14px; color: var(--tinta); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.captura .meta { font-size: 12px; color: var(--fraco); margin-top: var(--e1); }
.captura .estado {
  font-family: var(--mono);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
}

.captura.lido .estado     { color: var(--verde); }
.captura.problema .estado { color: var(--vermelho); }
/* azul-800 e não azul-600: 12px é texto pequeno, e o vivo reprovaria. */
.captura.lendo .estado    { color: var(--azul-800); animation: pisca 1.5s infinite; }

.captura.na-fila .cod    { color: var(--impressao); }
.captura.na-fila .nome   { color: var(--impressao); }
.captura.na-fila .meta   { color: var(--impressao-2); }
.captura.na-fila .estado { color: var(--impressao); }
.captura.na-fila .chip {
  background: rgba(255, 255, 255, .75);
  border-color: rgba(19, 41, 61, .25);
  color: var(--impressao);
}
.captura.na-fila .chip.erro  { color: var(--vermelho); }
.captura.na-fila .chip.aviso { color: var(--ambar); }
.captura.na-fila .chip.ok    { color: var(--verde); }
.captura.na-fila a { color: var(--azul-800); text-decoration: underline; }

@keyframes pisca { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }

/* ---------------------------------------------------------------------------
   CONCILIAÇÃO
   --------------------------------------------------------------------------- */
img.foto {
  width: 100%; border-radius: var(--raio);
  background: var(--azul-50); border: 1px solid var(--reflexo);
  box-shadow: var(--sombra-papel);
}

/* .candidato é um <label>. A escolhida ACENDE: halo verde por dentro. */
.candidato {
  display: block;
  font: 15px/1.45 var(--fonte);
  text-transform: none; letter-spacing: normal;
  color: var(--tinta);
  background: rgba(255, 255, 255, .55);
  border: 1.5px solid var(--reflexo);
  border-radius: var(--raio);
  padding: var(--e3) var(--e4);
  margin: 0 0 var(--e2);
  cursor: pointer;
  transition: border-color var(--transicao), background-color var(--transicao),
              box-shadow var(--transicao), transform var(--transicao);
}
.candidato:active { background: var(--azul-50); }
.candidato.escolhido {
  border-color: transparent; background: var(--verde-bg);
  box-shadow: var(--anel-ok);
  transform: translateX(3px);
}
.candidato.eliminado { opacity: .62; border-style: dashed; }
.candidato .meta { font-size: 12px; color: var(--fraco); margin-top: var(--e1); }
/* Aviso inline injetado pela tela Dados. */
.candidato b.aviso { color: var(--ambar); }

.diff-igual { color: var(--fraco); }
.diff-dif   { color: var(--ambar); font-weight: 800; background: var(--ambar-bg);
              padding: 0 3px; border-radius: 4px; }

/* ---------------------------------------------------------------------------
   TABELAS
   --------------------------------------------------------------------------- */
/* `table-layout: fixed` NÃO é preferência de estilo — é o que impede a tela
   inteira de encolher.

   Sem ele a tabela pede a largura do seu conteúdo. No Painel, as tabelas de
   revisão e de divergências (código, nome longo do produto, motivo, R$) pediam
   498px e 515px num celular de 393px. O navegador então ALARGA o viewport de
   layout para 531px e diminui a página toda para caber — texto menor, e a barra
   de navegação, que é `fixed` e se ancora nesse viewport, cai FORA da área
   visível. Medido no Pixel 5, no Galaxy S9+ e no iPhone 13: o operador tocava
   em "Capturar" e não acontecia nada.

   Com largura fixa as colunas se dividem igualmente e o texto quebra dentro da
   célula. Nome de produto quebrando em três linhas no celular é aceitável;
   navegação que não responde ao toque, não. */
table {
  width: 100%; font-size: 13px;
  table-layout: fixed;
  border-collapse: separate; border-spacing: 0;
  background: rgba(255, 255, 255, .75);
  border: 1px solid var(--reflexo);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra-papel);
}
th, td { text-align: left; padding: var(--e3); border-bottom: 1px solid var(--linha);
         overflow-wrap: anywhere; }
th {
  font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fraco); background: rgba(219, 237, 251, .6);
}
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.codigo { font-size: 14px; letter-spacing: .1em; }

/* ---------------------------------------------------------------------------
   RODAPÉ — vidro de verdade: é fixo, não rola com a lista.
   --------------------------------------------------------------------------- */
#rodape {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e3) var(--e4);
  padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom, 0px));
  font-size: 13px; color: var(--fraco);
  background: rgba(242, 249, 255, .8);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  border-top: 1px solid rgba(255, 255, 255, .95);
}
#rodape .espaco { flex: 1; }
#rodape a { padding: 16px 12px; margin: -16px -12px; }

#rodape #rede {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  background: var(--tinta); color: #fff;
  border-radius: var(--raio-pill); padding: 5px 12px;
  /* CONTRATO: o JS injeta color inline var(--verde) (online) e
     var(--amarelo) (offline). Sobre a pastilha ESCURA o verde re-resolve
     para um claro legível; o amarelo global JÁ é claro e lê sozinho:
       verde   #3FD08A / #13293D = 7,5:1
       amarelo #FFEFB0 / #13293D = 12,9:1 */
  --verde: #3FD08A;
}

/* ---------------------------------------------------------------------------
   LOGIN — o céu inteiro para a marca; o formulário em campos de vidro.
   --------------------------------------------------------------------------- */
.tela-login main { max-width: 420px; padding-top: var(--e6); }
.tela-login h1 { font-size: 23px; margin-bottom: var(--e5); }

/* Duas zonas: em cima a marca GRANDE centrada com respiro; embaixo o
   formulário limpo — os campos de vidro já são as caixas. O #marca é o
   gancho de sempre (montaMarca() põe símbolo + nome); aqui só mudam a
   ESCALA e o empilhamento. Sobre o céu a marca é TINTA, não branco. */
.tela-login .login-marca {
  display: flex; justify-content: center;
  padding: var(--e5) 0 var(--e6);
}
.tela-login .login-marca .marca {
  display: flex; flex-direction: column; align-items: center; gap: var(--e2);
  font-size: 15px; letter-spacing: .24em;
  color: var(--tinta);
  text-align: center; white-space: normal;
}
.tela-login .login-marca .marca .sub { color: var(--azul-800); }
.tela-login .login-marca .marca.com-logo img {
  height: 92px; width: auto;
  filter: drop-shadow(0 10px 26px rgba(46, 155, 245, .35));
}

/* ---------------------------------------------------------------------------
   UTILITÁRIOS
   --------------------------------------------------------------------------- */
.oculto { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   CÂMERA COM MOLDURA — o visor é sempre escuro; o celeste é o acento.
   ========================================================================== */

.camera {
  position: fixed; inset: 0; z-index: 90;
  background: #000; display: flex; flex-direction: column;
}
.camera video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

.camera .moldura {
  position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  width: min(92vw, 560px);
  aspect-ratio: 1.85 / 1;
  border-radius: 12px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .62);
  outline: 2px solid rgba(255, 255, 255, .9);
  pointer-events: none;
}
.camera .moldura::before, .camera .moldura::after {
  content: ''; position: absolute; width: 34px; height: 34px;
  border: 4px solid var(--celeste);
}
.camera .moldura::before { left: -3px; top: -3px; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; }
.camera .moldura::after  { right: -3px; bottom: -3px; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }

.camera .instrucao {
  position: absolute; left: 0; right: 0; top: calc(44% + min(92vw, 560px) / 3.7 + 22px);
  text-align: center; color: #fff; font-size: 15px; font-weight: 600;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9); padding: 0 20px; pointer-events: none;
}
.camera .instrucao small { display: block; font-weight: 500; opacity: .78; margin-top: 4px; font-size: 13px; }

.camera .barra-topo {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
}
.camera .barra-topo .espaco { flex: 1; }
.camera .barra-topo button {
  background: rgba(0, 0, 0, .5); color: #fff; border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--raio-pill); padding: 12px 16px; font-size: 14px; font-weight: 600;
  width: auto; min-height: var(--alvo-min);
}
.camera .barra-topo .setor-chip {
  background: var(--celeste); color: var(--impressao); border: 0;
  border-radius: var(--raio-pill); padding: 9px 14px;
  font-family: var(--mono); font-size: 13px; font-weight: 800;
  letter-spacing: .08em;
}

.camera .barra-baixo {
  position: relative; z-index: 2; margin-top: auto;
  padding: 18px 16px calc(env(safe-area-inset-bottom) + 22px);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent);
}
.camera .disparo {
  width: 78px; height: 78px; border-radius: 50%; flex: 0 0 auto;
  background: #fff; border: 5px solid rgba(255, 255, 255, .45);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5); padding: 0; min-height: 0;
}
.camera .disparo:active { transform: scale(.93); }
.camera .disparo[disabled] { opacity: .45; }
.camera .lateral {
  flex: 1 1 0; min-width: 0; color: #fff; font-size: 13px; line-height: 1.35;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
}
.camera .lateral b {
  display: block; font-family: var(--mono); font-size: 22px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.camera .contagem { text-align: right; }

.camera .flash-aviso {
  position: absolute; left: 16px; right: 16px; bottom: 130px; z-index: 3;
  background: rgba(196, 43, 69, .95); color: #fff; border-radius: var(--raio);
  padding: 12px 14px; font-size: 14px; font-weight: 600; text-align: center;
}
.camera .flash-aviso.ok { background: rgba(12, 122, 70, .95); }

.camera #cam-diag {
  position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 62px);
  z-index: 2; text-align: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .03em;
  color: rgba(255, 255, 255, .8); text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
  pointer-events: none;
}
.camera #cam-diag.aviso { color: var(--celeste); font-weight: 700; }

/* ==========================================================================
   A ETIQUETA DIGITAL — o papel-etiqueta em tela: o amarelo medido, a mesma
   tinta do app (12,9:1), a faixa de barras no topo como régua do objeto.
   ========================================================================== */

/* BRANCO E AZUL CLARO, a paleta da casa.
 *
 * Era amarela porque a etiqueta FISICA colada na peca e amarela, e a tela
 * imitava o papel. Mas o app nunca imprime esta etiqueta — ela e leitura de
 * tela — e o amarelo era a unica coisa em todo o app fora da paleta: entre uma
 * tela azul e branca, o cartao amarelo lia como aviso, e nao como identidade.
 *
 * O degrade vai do branco ao azul mais claro, na mesma direcao dos outros
 * cartoes. As barras continuam quase pretas: contraste de barra e o que faz
 * leitor optico funcionar, e isso nao se troca por gosto. */
.etiqueta-digital {
  background: linear-gradient(170deg, #FFFFFF, var(--azul-50));
  border-radius: var(--raio-etq);
  border: 1px solid var(--azul-100);
  box-shadow: var(--sombra-etq);
  padding: 16px;
  color: var(--impressao);
  font-family: var(--mono);
}
.etiqueta-digital.branca { background: rgba(255, 255, 255, .92); border-color: var(--linha-2); }
.etiqueta-digital.duvida { border: 2px dashed var(--vermelho); }

/* CONTRATO: o JS pinta o background-image; repeat-x + auto 100% ficam. */
.etiqueta-digital .barras {
  height: 46px; width: 100%; border-radius: 2px;
  background-repeat: repeat-x; background-size: auto 100%;
  image-rendering: pixelated; opacity: .9;
}
.etiqueta-digital .cod {
  text-align: center; font-size: clamp(24px, 7.2vw, 34px); font-weight: 800;
  letter-spacing: .16em; margin: 10px 0 2px; word-break: break-all;
  font-variant-numeric: slashed-zero tabular-nums;
}
.etiqueta-digital .nome {
  font-family: var(--cond);
  font-size: 16px; line-height: 1.3; font-weight: 700; margin-top: 8px;
}
.etiqueta-digital .sku {
  font-size: 12px; margin-top: 6px; color: var(--impressao-2);
}
.etiqueta-digital .rodape {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
  padding-top: 10px; border-top: 1px dashed rgba(19, 41, 61, .35);
  font-family: var(--fonte);
}
.etiqueta-digital .selo {
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(255, 255, 255, .82); border-radius: var(--raio-pill); padding: 4px 10px;
}
.etiqueta-digital .selo.barras-ok { background: var(--verde); color: #fff; }
.etiqueta-digital .selo.duvida    { background: var(--vermelho); color: #fff; }

/* ==========================================================================
   BUSCA DE PRODUTO
   ========================================================================== */

.busca-caixa { display: flex; gap: var(--e2); align-items: stretch; }
.busca-caixa input { flex: 1; margin-top: 0; }
.busca-caixa button { width: auto; flex: 0 0 auto; padding: 0 20px; margin-top: 0; }

.achado {
  background: var(--vidro);
  border: 1px solid var(--reflexo);
  border-left: 4px solid var(--linha-2);
  border-radius: var(--raio); padding: var(--e4); margin-top: var(--e3);
  box-shadow: var(--sombra-papel);
}
.achado.contado { border-left-color: var(--verde); }
.achado.nao-contado { border-left-color: var(--linha-2); }
.achado .titulo {
  font-family: var(--cond); font-size: 17px; font-weight: 700; line-height: 1.3;
}
.achado .cods { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e2); }
.achado .cods code {
  background: var(--azul-100); color: var(--azul-800); border-radius: var(--raio-3);
  padding: 3px 8px; font-family: var(--mono); font-size: 13px; font-weight: 700;
  letter-spacing: .08em;
}
.achado .cods code.planilha { background: var(--azul-50); color: var(--tinta-2); font-weight: 600; letter-spacing: .02em; }
.achado .campos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: var(--e3); margin-top: var(--e4);
}
.achado .campo .r {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--fraco);
}
.achado .campo .v {
  font-family: var(--mono); font-size: 17px; font-weight: 700; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.achado .campo .v.local { color: var(--azul-800); letter-spacing: .08em; }
.achado .locais { margin-top: var(--e3); font-size: 13px; color: var(--tinta-2); }
.achado .locais b { color: var(--azul-900); font-family: var(--mono); letter-spacing: .04em; }

.sugestao {
  margin-top: var(--e4); padding: var(--e3) var(--e4);
  background: rgba(255, 255, 255, .82); border: 1px solid var(--reflexo);
  border-left: 4px solid var(--verde); border-radius: var(--raio);
  box-shadow: var(--sombra-papel);
}
.sugestao .r {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--verde); font-weight: 700;
}
.sugestao .v { font-weight: 700; line-height: 1.35; margin-top: 3px; color: var(--tinta); }
.sugestao .meta { font-family: var(--mono); font-size: 12px; color: var(--fraco); margin-top: 4px; }

.conf-ok {
  margin-top: var(--e4); padding: var(--e3);
  background: var(--verde-bg); color: #0B5D37; border-radius: var(--raio);
  font-weight: 700; text-align: center;
}
.conf-saida:empty { display: none; }
.conf-saida { margin-top: var(--e3); }

.opcao {
  display: flex; align-items: flex-start; gap: var(--e3);
  font: 15px/1.35 var(--fonte);
  text-transform: none; letter-spacing: normal;
  margin-top: var(--e4); padding: var(--e3) var(--e4);
  background: rgba(255, 255, 255, .55); border: 1px solid var(--reflexo);
  border-radius: var(--raio); cursor: pointer; min-height: var(--alvo-min);
  transition: box-shadow var(--transicao), background-color var(--transicao);
}
.opcao input[type="checkbox"] {
  width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto;
  accent-color: var(--azul-800);
}
.opcao span { font-size: 15px; font-weight: 600; color: var(--tinta); line-height: 1.35; }
.opcao small {
  display: block; font-weight: 400; font-size: 13px;
  color: var(--fraco); margin-top: 3px;
}
.opcao:has(input:checked) {
  background: rgba(255, 255, 255, .88); border-color: transparent;
  box-shadow: var(--anel-acao);
}

select[data-de-endereco] {
  width: 100%; min-height: var(--alvo-min); margin-top: var(--e2);
  /* 16px é obrigatório: abaixo disso o iOS dá zoom sozinho ao focar. */
  padding: 0 var(--e3); font-size: 16px;
  background: rgba(255, 255, 255, .88); color: var(--tinta);
  border: 1px solid var(--linha-2); border-radius: var(--raio);
}

.cartao.destacado {
  border-color: transparent;
  box-shadow: var(--anel-acao);
}

.marca.com-logo { display: inline-flex; align-items: center; gap: 9px; }
/* No cabeçalho de gradiente a marca vira luz branca; no login (sobre o céu)
   a regra específica de .login-marca devolve o logo natural. */
.marca.com-logo img {
  height: 30px; width: auto; display: block; flex: 0 0 auto;
  filter: brightness(0) invert(1);
}

/* ===========================================================================
   A CASCA — o topo de VIDRO CLARO e a doca de vidro na zona do polegar.
   ===========================================================================
   O topo é translúcido sobre o céu: a marca pequena em tinta, o operador em
   pílula branca, e a RÉGUA DE BARRAS embaixo — o JS pinta as barras em
   #1465B8 (inline), então a faixa sob elas é gelo claro: a régua vira um
   código de barras da marca atravessando o vidro. O título da tela NÃO mora
   aqui: a casca injeta .titulo-tela no main, banhado no gradiente.
   =========================================================================== */

body.com-casca { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
body.com-casca > main { padding-top: var(--e4); }

.topo, .barra-topo-nova {
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  color: var(--tinta);
  padding: 0;
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid rgba(255, 255, 255, .95);
  box-shadow: var(--sombra-casca);
}
/* A régua: faixa gelo com as barras azuis do JS por cima (contrato). */
.topo .regua, .barra-topo-nova .regua {
  height: 10px; background-repeat: repeat-x; background-size: auto 100%;
  background-color: var(--azul-100);
  background-image: none;
  opacity: 1;
}
.topo-linha {
  display: flex; align-items: center; gap: var(--e3);
  min-height: 50px;
  padding: 0 var(--e4);
  padding-top: env(safe-area-inset-top, 0px);
}
.topo-marca { flex: 1; min-width: 0; }

/* A marca pequena da barra: mono, tinta da marca, letterspaced. */
.marca-mini {
  flex: 1; min-width: 0;
  font-family: var(--mono);
  font-size: 11px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--azul-800); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

.sobrenome {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--fraco); font-family: var(--mono);
}
/* Legado: se algum markup antigo ainda tiver h1 no topo, ele fica pequeno
   e discreto — o display agora é o .titulo-tela dentro do conteúdo. */
.topo-titulo {
  font-family: var(--fonte);
  font-size: 15px; font-weight: 800;
  letter-spacing: -.01em;
  margin: 0; line-height: 1.2;
  color: var(--tinta);
}
/* A pílula da fila ("3 a enviar"): o gradiente da marca, que emite luz.
   Branco 12px/800 sobre o pior stop = 5,0:1. */
.topo-pilula {
  align-self: center; flex: 0 0 auto;
  background: var(--grad-marca); color: #fff;
  font-family: var(--mono); font-size: 12px; font-weight: 800;
  padding: 7px 12px; border-radius: var(--raio-pill); white-space: nowrap;
  box-shadow: 0 6px 14px -6px rgba(46, 155, 245, .6);
}
/* CONTRATO: vence estilos inline do JS com !important.
   Tinta da marca sobre branco = 5,9:1. */
.topo-quem {
  align-self: center; flex: 0 0 auto;
  background: #FFFFFF !important; color: var(--azul-800) !important;
  font-family: var(--mono); font-size: 12px; font-weight: 800;
  letter-spacing: .06em; padding: 7px 12px; border-radius: var(--raio-pill);
  border: 1px solid var(--reflexo);
  box-shadow: 0 2px 10px -4px rgba(20, 80, 140, .3);
}

/* --- a doca de vidro, na zona do polegar: 3 destinos + "Mais" ------------ */
.barra-abas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: space-around;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border-top: 1px solid rgba(255, 255, 255, .95);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -8px 30px -16px rgba(20, 80, 140, .35);
}
.barra-abas a {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 62px; padding: 8px 2px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase;
  color: var(--fraco); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--transicao);
}
.barra-abas a > span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
/* A aba ativa vira uma cápsula de céu, e o risco acende com o gradiente. */
.barra-abas a.ativa { color: var(--azul-800); }
.barra-abas a.ativa > span {
  background: var(--azul-100); border-radius: var(--raio-pill);
  padding: 2px 10px; max-width: calc(100% - 4px);
}
.barra-abas a:hover { text-decoration: none; }
/* O risco: um traço do gradiente de céu sob a aba ativa (nunca leva texto). */
.barra-abas .risco {
  display: block; width: 26px; height: 4px; opacity: 0;
  background: var(--grad-ceu); border-radius: var(--raio-pill);
  transition: opacity var(--transicao);
}
.barra-abas a.ativa .risco { opacity: 1; }
.barra-abas a:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; }
.barra-abas .selo {
  position: absolute; top: 5px; left: 50%; margin-left: 9px;
  background: var(--vermelho); color: #fff;
  font-family: var(--mono); font-size: 10px; font-weight: 800; font-style: normal;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--raio-pill); display: flex; align-items: center; justify-content: center;
}

/* O ícone da navegação: SVG inline do JS, traço 1.75, 24px, herda a cor. */
.nav-icone {
  width: 24px; height: 24px; display: block; flex: 0 0 auto;
}

/* O 4º item, "Mais": um <button> que se veste como os links da doca —
   estas regras desfazem a pílula de vidro do button base. */
.nav-mais {
  position: relative; flex: 1 1 0; min-width: 0; width: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 62px; padding: 8px 2px;
  font: 700 11px/1.2 var(--fonte); letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--fraco);
  background: none; border: 0; border-radius: 0; box-shadow: none;
  cursor: pointer;
  transition: color var(--transicao);
}
.nav-mais:active { transform: none; }
.nav-mais.ativa, .nav-mais[aria-expanded="true"] { color: var(--azul-800); }
.nav-mais:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; }

/* --- a folha do "Mais": vidro que sobe de baixo, céu escurecido atrás ---- */
.sheet-mais { position: fixed; inset: 0; z-index: 120; }
.sheet-mais[hidden] { display: none; }

.sheet-fundo {
  position: absolute; inset: 0;
  background: rgba(12, 38, 68, .45);
  opacity: 0;
  transition: opacity 200ms ease;
}
/* A folha é chrome de navegação (não rola com a página): vidro de verdade. */
.sheet-painel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border-top: 1px solid rgba(255, 255, 255, .95);
  border-radius: 24px 24px 0 0;
  padding: var(--e3) var(--e4) calc(var(--e4) + env(safe-area-inset-bottom, 0px));
  max-height: 75vh; overflow-y: auto;
  transform: translateY(100%);
  transition: transform 240ms cubic-bezier(.2, .7, .3, 1);
  box-shadow: 0 -12px 44px rgba(12, 38, 68, .28);
}
.sheet-mais.aberta .sheet-fundo { opacity: 1; }
.sheet-mais.aberta .sheet-painel { transform: none; }

.sheet-alca {
  width: 36px; height: 4px; border-radius: var(--raio-pill);
  background: var(--linha-2); margin: 0 auto var(--e3);
}
.sheet-titulo {
  font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fraco); margin: 0 0 var(--e2);
}
.sheet-item {
  position: relative;
  display: flex; align-items: center; gap: var(--e3);
  min-height: 56px; padding: var(--e2) var(--e2);
  color: var(--tinta); font-size: 16px; font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--linha);
  border-radius: var(--raio-2);
}
.sheet-item:last-of-type { border-bottom: 0; }
.sheet-item:hover { text-decoration: none; background: var(--azul-50); }
.sheet-item .nav-icone { color: var(--fraco); }
.sheet-item.ativa { color: var(--azul-800); font-weight: 800; }
.sheet-item.ativa .nav-icone { color: var(--azul-800); }
/* Na folha o selo não é absoluto: encosta à direita, na linha do item. */
.sheet-item .selo {
  position: static; margin-left: auto;
  background: var(--vermelho); color: #fff;
  font-family: var(--mono); font-size: 11px; font-weight: 800; font-style: normal;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--raio-pill);
  display: flex; align-items: center; justify-content: center;
}
.sheet-fechar {
  margin-top: var(--e3);
  color: var(--azul-800); font-weight: 700;
  border-color: var(--linha-2);
  background: rgba(255, 255, 255, .9);
}

/* ---------------------------------------------------------------------------
   ABERTURA — "AURORA": céu claro com três massas de luz azul derivando;
   OUTLET prepara; LARA'S responde letra a letra — o peso da fonte É a
   animação, em tinta-gradiente; o símbolo sela com anel de pulso; a linha
   de carregamento corre embaixo. Na saída, a cena ATRAVESSA a câmera.

   O JS remove em 2300 ms (fim), 4500 ms (teto) ou ao toque; a travessia
   começa em 1750 ms e dura 500 ms — cabe dentro da primeira rede.
   --------------------------------------------------------------------------- */
.abertura {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  overflow: hidden;
  background:
    radial-gradient(90% 55% at 15% 8%, rgba(46, 155, 245, .38), transparent 60%),
    radial-gradient(80% 50% at 90% 28%, rgba(103, 198, 250, .42), transparent 60%),
    radial-gradient(90% 55% at 40% 92%, rgba(165, 222, 255, .48), transparent 60%),
    linear-gradient(165deg, #F2F9FF, #E6F3FC 45%, #F4FAFF);
  /* O furo do símbolo vaza o fundo desta cena, não o do app. */
  --fundo-marca: #EFF7FE;
  animation: abertura-atravessa 500ms cubic-bezier(.7, 0, .9, .4) 1750ms forwards;
}
@keyframes abertura-atravessa {
  to { transform: scale(2.4); opacity: 0; filter: blur(3px); }
}
/* Rede de segurança: se o JS marcar a saída à mão, a cena some na hora. */
.abertura.saindo { opacity: 0; pointer-events: none; }

.abertura .ab-luz {
  position: absolute; border-radius: 50%; filter: blur(44px); font-style: normal;
  animation: ab-deriva 6s ease-in-out infinite alternate;
}
.abertura .ab-luz.a { width: 62%; height: 44%; left: -10%; top: -8%; background: rgba(46, 155, 245, .32); }
.abertura .ab-luz.b { width: 55%; height: 40%; right: -12%; top: 30%; background: rgba(103, 198, 250, .36); animation-delay: -2s; }
.abertura .ab-luz.c { width: 68%; height: 46%; left: 18%; bottom: -12%; background: rgba(165, 222, 255, .42); animation-delay: -4s; }
@keyframes ab-deriva { to { transform: translate(5%, 4%) scale(1.14); } }

.abertura-marca {
  display: grid; justify-items: center; gap: 10px; position: relative;
  animation: abertura-respira 300ms cubic-bezier(.16, .84, .28, 1) 1300ms;
}
@keyframes abertura-respira { 50% { transform: scale(1.045); } }

.abertura-sobre {
  font: 300 12px/1 var(--fonte);
  letter-spacing: .5em; text-indent: .5em;
  color: var(--tinta-2); opacity: 0;
  animation: abertura-prepara 350ms ease 150ms forwards;
}
@keyframes abertura-prepara {
  from { opacity: 0; font-weight: 300; }
  to   { opacity: 1; font-weight: 800; }
}

.abertura-palavra {
  display: flex; font-family: var(--cond); font-size: 52px;
  line-height: 1; letter-spacing: .02em;
}
/* O peso da fonte É a animação: cada letra engrossa de 100 a 800, banhada
   no gradiente de tinta, com a luz azul escorrendo por baixo. */
.abertura-palavra span {
  display: inline-block; font-weight: 100; opacity: 0;
  background: var(--grad-tinta);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 8px 22px rgba(46, 155, 245, .4));
  animation: abertura-corpo 600ms cubic-bezier(.16, .84, .28, 1) both;
}
@keyframes abertura-corpo {
  from { opacity: 0; font-weight: 100; transform: translateY(12px); }
  to   { opacity: 1; font-weight: 800; transform: none; }
}
.abertura-palavra span:nth-child(1) { animation-delay: 480ms; }
.abertura-palavra span:nth-child(2) { animation-delay: 540ms; }
.abertura-palavra span:nth-child(3) { animation-delay: 600ms; }
.abertura-palavra span:nth-child(4) { animation-delay: 660ms; }
.abertura-palavra span:nth-child(5) { animation-delay: 720ms; }
.abertura-palavra span:nth-child(6) { animation-delay: 780ms; }

.abertura-simbolo { width: 56px; height: 56px; opacity: 0; position: relative;
  color: var(--azul-600);
  animation: abertura-sela 380ms cubic-bezier(.34, 1.5, .5, 1) 1250ms forwards; }
.abertura-simbolo svg { width: 56px; height: 56px; display: block; }
@keyframes abertura-sela {
  from { opacity: 0; transform: scale(.5); }
  to   { opacity: 1; transform: none; }
}
.abertura-simbolo::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid rgba(46, 155, 245, .55); opacity: 0;
  animation: abertura-anel 600ms ease-out 1350ms;
}
@keyframes abertura-anel {
  from { opacity: 1; transform: scale(.6); }
  to   { opacity: 0; transform: scale(1.7); }
}

.abertura-carga {
  width: 148px; height: 3px; border-radius: var(--raio-pill);
  background: rgba(46, 155, 245, .18); overflow: hidden; margin-top: 8px;
}
.abertura-carga i {
  display: block; height: 100%; width: 0; border-radius: var(--raio-pill);
  background: var(--grad-ceu);
  animation: abertura-carrega 1.7s cubic-bezier(.3, .6, .4, 1) 150ms forwards;
}
@keyframes abertura-carrega {
  25% { width: 30%; } 60% { width: 64%; } 85% { width: 88%; } 100% { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .abertura { display: none; }
}

body.com-casca .marca, body.com-casca header nav { display: none; }

/* ===========================================================================
   A ETIQUETA COMO CARTÃO — vidro chapado; o PENDENTE é o papel-etiqueta.
   =========================================================================== */

/* BRANCO E AZUL CLARO, a paleta da casa.
 *
 * O fundo era branco quase transparente sobre o fundo da pagina, e a etiqueta
 * lia como uma faixa sem forma. O degrade para o azul mais claro da paleta lhe
 * da corpo — dá para ver onde uma etiqueta acaba e a seguinte comeca, que e o
 * que importa numa lista de trinta. */
.etq {
  position: relative;
  background: linear-gradient(170deg, #FFFFFF, var(--azul-50));
  border: 1px solid var(--azul-100);
  /* Lombada RESERVADA na base: estados só trocam cor — nada de pulo de 3px. */
  border-left: 4px solid var(--linha);
  border-radius: var(--raio-etq);
  padding: var(--e3) var(--e4) var(--e3);
  margin-bottom: var(--e3);
  box-shadow: var(--sombra-papel);
  color: var(--tinta);
}
/* CONTRATO: o JS pinta o background-image; repeat-x + auto 100% ficam.
   As barras herdam a cor via currentColor — aqui, a tinta do impresso. */
.etq-barras {
  display: block; height: 30px; margin-bottom: var(--e2);
  background-repeat: repeat-x; background-size: auto 100%;
  color: var(--impressao); opacity: .9;
  border-radius: 2px;
}
.etq-selo {
  position: absolute; top: var(--e3); right: var(--e4);
  font-family: var(--mono); font-size: 10px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  background: rgba(255, 255, 255, .9); color: var(--impressao);
  border-radius: var(--raio-pill); padding: 3px 8px;
  border: 1px solid var(--reflexo);
  box-shadow: 0 1px 4px rgba(20, 80, 140, .12);
}
.etq-cod {
  font-family: var(--mono);
  font-size: clamp(19px, 5.6vw, 23px); font-weight: 800;
  letter-spacing: .14em; word-break: break-all;
  margin-bottom: 2px;
}
.etq-nome {
  font-family: var(--cond);
  font-size: 15px; font-weight: 600; line-height: 1.3;
}
.etq-pe {
  display: flex; align-items: center; gap: var(--e3);
  margin-top: var(--e2); padding-top: var(--e2);
  border-top: 1px dashed rgba(19, 41, 61, .18);
  font-family: var(--mono); font-size: 11px; color: var(--fraco);
}
.etq-pe span { flex: 1; min-width: 0; }
.etq-pe b { white-space: nowrap; font-weight: 800; }

/* Pendente: a etiqueta É o papel — a superfície amarela inteira. */
/* NA FILA — esperando subir. Azul um tom mais forte que a etiqueta em repouso,
   e não amarelo: a diferença precisa dizer "ainda vai" e não "atenção". A
   lombada da esquerda é quem carrega o estado; o fundo só o acompanha. */
.etq.na-fila {
  background: linear-gradient(170deg, var(--azul-50), var(--azul-100));
  border-color: var(--azul-100);
  box-shadow: var(--sombra-etq);
  color: var(--tinta);
}
.etq.na-fila .etq-pe { color: var(--impressao-2); border-top-color: rgba(19, 41, 61, .28); }
.etq.na-fila .etq-cod { color: var(--impressao); }

.etq.lido { border-left-color: var(--verde); }
.etq.lido .etq-pe b { color: var(--verde); }
.etq.lido .etq-cod { color: var(--azul-800); }

.etq.problema { border-left-color: var(--vermelho); }
.etq.problema .etq-barras { opacity: .3; }
.etq.problema .etq-pe b { color: var(--vermelho); }

.etq.lendo { border-left-color: var(--azul-400); }
.etq.lendo .etq-barras { animation: barras-lendo 1.6s ease-in-out infinite; }
/* azul-800: 11px é texto pequeno — o azul vivo aqui reprovaria. */
.etq.lendo .etq-pe b { color: var(--azul-800); }
@keyframes barras-lendo { 0%,100% { opacity: .25; } 50% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) {
  .etq.lendo .etq-barras { animation: none; opacity: .5; }
}

/* ---------------------------------------------------------------------------
   A LINHA DO SETOR — sobre o gradiente do carimbo, tudo em branco.
   --------------------------------------------------------------------------- */
.linha-setor {
  display: flex; align-items: baseline; gap: var(--e2);
  font-family: var(--mono); font-size: 13px; color: #fff;
}
.linha-setor .setor-nome {
  font-family: var(--cond); font-size: 27px; font-weight: 800;
  letter-spacing: .04em; color: #fff;
}
.linha-setor .pontilhado {
  flex: 1; height: 1px; align-self: center;
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .5) 0 2px, transparent 2px 6px);
}
.linha-setor .setor-conta { white-space: nowrap; color: #EAF5FF; }
.linha-setor .setor-conta b {
  font-size: 17px; font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums;
}

/* O progresso do corredor, desenhado em barras (contrato com o JS):
   o trilho recebe barras var(--linha-2) sobre vidro translúcido; o .feito
   recebe barras var(--azul-800) sobre BRANCO — a parte feita vira um código
   de barras impresso atravessando o carimbo. */
.progresso-barras {
  position: relative; height: 14px; margin-top: var(--e2);
  background-repeat: repeat-x; background-size: auto 100%;
  border-radius: var(--raio-pill); overflow: hidden;
  background-color: rgba(255, 255, 255, .18);
}
.progresso-barras .feito {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background-repeat: repeat-x; background-size: auto 100%;
  background-color: #fff;
  transition: width 420ms cubic-bezier(.2, .7, .3, 1);
}
.linha-setor-pe {
  display: flex; align-items: center; gap: var(--e3); margin-top: var(--e2);
}
.linha-setor-pe .dica { flex: 1; color: #EAF5FF; margin: 0; }
.so-texto {
  width: auto; min-height: var(--alvo-min); padding: 0 var(--e2);
  background: none; border: 0; color: #fff; box-shadow: none;
  font-family: var(--mono); font-size: 12px; text-decoration: underline;
  cursor: pointer;
}

h2.secao {
  display: flex; align-items: center; gap: var(--e3);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fraco); margin: var(--e6) 0 var(--e3);
}
h2.secao::after {
  content: ""; flex: 1; height: 1px; background: var(--linha-2);
}

/* ===========================================================================
   ESTOQUE — o galpão por quadrante. Centenas de cartões: vidro CHAPADO.
   =========================================================================== */

.quadrante {
  border: 1px solid var(--reflexo); border-radius: var(--raio);
  background: var(--vidro);
  box-shadow: var(--sombra-papel);
  margin-bottom: var(--e3); overflow: hidden;
}
.quadrante-topo {
  width: 100%; min-height: 58px;
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4); text-align: left;
  background: none; border: 0; box-shadow: none; cursor: pointer; color: inherit;
  border-radius: 0;
}
.quadrante-topo:hover { background: var(--azul-50); }
.quadrante-nome {
  font-family: var(--cond); font-size: 23px; font-weight: 800;
  letter-spacing: .04em; white-space: nowrap;
  background: var(--grad-tinta);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.quadrante-conta {
  flex: 1; min-width: 0;
  font-family: var(--mono); font-size: 12px; color: var(--fraco);
  font-variant-numeric: tabular-nums;
}
.quadrante-conta b { color: var(--tinta); font-weight: 800; }
.quadrante-seta {
  color: var(--fraco); font-size: 15px; flex: 0 0 auto;
  transition: transform var(--transicao);
}
.quadrante-topo[aria-expanded="true"] .quadrante-seta { transform: rotate(180deg); }
.quadrante-alerta { padding: 0 var(--e4) var(--e2); }
.quadrante-itens { padding: var(--e3) var(--e4) var(--e2); background: rgba(239, 248, 254, .55); }
.quadrante-itens .etq:last-child { margin-bottom: var(--e2); }

a.etq-toque { display: block; text-decoration: none; color: inherit; }
a.etq-toque:hover { text-decoration: none; border-color: var(--azul-400); }
a.etq-toque:active { transform: translateY(1px); }
a.etq-toque:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

.etq-quem {
  display: flex; justify-content: space-between; gap: var(--e2);
  margin-top: var(--e2); font-family: var(--mono); font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--fraco);
}
.etq-quem span:first-child { font-weight: 800; color: var(--tinta-2); }
.etq.problema .etq-quem span:first-child { color: var(--vermelho); }

/* ---------------------------------------------------------------------------
   TELA DADOS — o resíduo que o automático não resolveu. 281 itens:
   tudo aqui é vidro chapado, sem blur.
   --------------------------------------------------------------------------- */
.secao-titulo {
  font-family: var(--fonte); font-size: 18px; font-weight: 800;
  letter-spacing: -.01em; margin: 0 0 var(--e2);
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
}
.secao-titulo small {
  font-family: var(--mono); font-size: 11px; color: var(--fraco);
  text-transform: none; letter-spacing: .06em; font-weight: 400;
}
.selo-faixa {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--raio-3); flex: 0 0 auto;
  font-family: var(--mono); font-weight: 800; font-size: 14px; color: #fff;
  background: var(--fraco);
}
.f-A { background: var(--verde); }
.f-B { background: var(--verde-600); }
.f-C { background: var(--gelo); color: var(--impressao); }
.f-D { background: var(--ambar); }
.f-E { background: var(--vermelho); }
/* F = "sem pista" (analise.py): cinza de propósito — ausência de evidência,
   não alerta. Explícito para ninguém achar que faltou a regra. */
.f-F { background: var(--fraco); }

.faixas { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.pastilha {
  flex: 1 1 116px; min-height: 60px; text-align: left; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--tinta);
  background: rgba(255, 255, 255, .72); border: 1.5px solid var(--reflexo);
  border-radius: var(--raio); padding: var(--e2) var(--e3);
  box-shadow: 0 2px 10px -6px rgba(20, 80, 140, .2);
}
.pastilha b {
  display: block; font-family: var(--mono); font-weight: 800; font-size: 23px;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.pastilha em { display: block; font-family: var(--mono); font-size: 10px;
               color: var(--fraco); font-style: normal; margin-top: 2px; }
.pastilha.on { border-color: transparent; box-shadow: var(--anel-acao); }
.pastilha[disabled] { opacity: .45; cursor: default; }
button.secundario.on { background: var(--azul-100); border-color: var(--azul-400);
                       color: var(--azul-800); font-weight: 700; }

.item-dado {
  border: 1px solid var(--reflexo); border-left: 4px solid var(--linha-2);
  border-radius: var(--raio); padding: var(--e3) var(--e4);
  margin-top: var(--e3); background: rgba(255, 255, 255, .72);
}
.item-dado.decidido { border-left-color: var(--verde); background: var(--verde-bg); }
/* 48px, e não 40: este botão abre cada um dos 281 itens sem par, e quem o
   aperta está no corredor, de pé, às vezes com luva. Alvo abaixo de 44px erra
   o toque — e errar aqui abre o item errado no meio de uma decisão que vale
   dinheiro. É o único alvo da tela que ficou pequeno na troca de estilo. */
.item-dado .item-topo {
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  width: 100%; background: none; border: 0; box-shadow: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left; min-height: 48px;
  border-radius: 0;
}
.item-dado .cod {
  font-family: var(--mono); font-size: 17px; font-weight: 800;
  letter-spacing: .1em; color: var(--azul-800);
}
.item-dado .dinheiro { margin-left: auto; font-family: var(--mono);
                       font-size: 13px; font-weight: 800;
                       font-variant-numeric: tabular-nums; }
.item-dado .seta { color: var(--fraco); }
.item-dado[data-item] .item-topo[aria-expanded="true"] .seta { transform: rotate(180deg); }
/* O que a etiqueta dizia: em papel-etiqueta — o material diz a origem. */
.item-dado .lido {
  background: linear-gradient(170deg, #FFF7D6, var(--amarelo));
  border: 1px solid var(--amarelo-borda); border-radius: var(--raio-2);
  padding: var(--e2) var(--e3); margin-top: var(--e2);
  font-family: var(--cond); font-size: 16px; font-weight: 600; line-height: 1.3;
  color: var(--impressao);
}
.item-dado .porque {
  margin-top: var(--e2); padding-left: var(--e3); font-size: 13px;
  line-height: 1.5; border-left: 3px solid var(--linha); color: var(--tinta-2);
}
.item-dado .opcoes { margin-top: var(--e3); }
.item-dado .candidato .cand-desc { display: block; font-weight: 700; line-height: 1.35; }
.item-dado .candidato input { margin-right: var(--e2); }

.gemeo {
  border: 1px solid var(--reflexo); border-left: 4px solid var(--linha-2);
  border-radius: var(--raio); padding: var(--e3) var(--e4); margin-top: var(--e3);
  background: rgba(255, 255, 255, .72);
}
.gemeo.r-alto  { border-left-color: var(--vermelho); background: #FFF3F5; }
.gemeo.r-medio { border-left-color: var(--ambar); }
/* O servidor também manda "baixo" (analise.py): fio verde, sem fundo — quieto. */
.gemeo.r-baixo { border-left-color: var(--verde); }
.gsinais { font-family: var(--mono); font-size: 11px; color: var(--fraco); line-height: 1.7; }
.gsinais b { color: var(--tinta); }
.gsinais b.ok   { color: var(--verde); }
.gsinais b.aviso{ color: var(--ambar); }
.gsinais b.ruim { color: var(--vermelho); }
.gpar { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e2); }
.gitem {
  flex: 1 1 280px; background: rgba(239, 248, 254, .8); border: 1px solid var(--reflexo);
  border-radius: var(--raio-2); padding: var(--e3);
}
.gcod { font-family: var(--mono); font-size: 17px; font-weight: 800;
        letter-spacing: .12em; color: var(--azul-800); }
.gcod mark { background: var(--azul-100); color: var(--impressao);
             padding: 0 2px; border-radius: 3px; box-shadow: 0 0 0 1.5px var(--vermelho); }
.gnome { font-family: var(--cond); font-size: 15px; font-weight: 600;
         line-height: 1.3; margin-top: 2px; }
button.pequeno { min-height: var(--alvo-min); font-size: 13px; padding: 0 var(--e3);
                 margin-top: var(--e2); width: 100%; }
#banner.ok { background: var(--verde); }
.opcao.escolhido { border-color: transparent; background: var(--verde-bg);
                   box-shadow: var(--anel-ok); }
tr.inativo td { color: var(--fraco); }
tr.inativo small { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; }

/* ===========================================================================
   PALCO DA CAPTURA — capturar.html.
   O setor é um CHIP-HERO tocável no carimbo de gradiente; o centro é o
   DISPARO circular (o mesmo #fotografar, re-vestido de obturador de luz);
   a quantidade é um stepper grande − / valor / +.
   =========================================================================== */

/* O chip-hero: o setor atual num chip de vidro branco sobre o gradiente —
   tocar troca o setor. O chip É o #trocar-setor; o lápis diz que ele edita. */
.chip-hero {
  display: inline-flex; align-items: baseline; gap: var(--e2);
  width: auto; align-self: center;
  min-height: var(--alvo-min); padding: var(--e2) var(--e4);
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .6); border-radius: var(--raio-pill);
  cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(10, 50, 100, .5);
}
.chip-hero:active { background: #fff; transform: none; }
/* Dentro do carimbo o anel azul sumiria — o foco aqui é branco (regra do topo
   do arquivo); o offset afasta o anel do próprio chip branco. */
.chip-hero:focus-visible { outline-offset: 3px; }
.chip-hero-rotulo {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--azul-800);
}
/* Vence .linha-setor .setor-nome (mesma especificidade, ordem posterior):
   dentro do chip branco o nome é tinta, não branco. */
.chip-hero .setor-nome {
  font-family: var(--mono); font-size: 28px; font-weight: 800;
  letter-spacing: .08em; line-height: 1; color: var(--tinta);
}
.chip-hero-lapis {
  width: 15px; height: 15px; align-self: center; flex: 0 0 auto;
  color: var(--azul-800);
}

/* O palco: a coluna central da captura, tudo centrado. */
.palco-captura { text-align: center; }
.palco-captura label { text-align: center; }
.palco-captura .opcao { text-align: left; margin-top: var(--e4); }
.palco-captura .aviso-caixa, .palco-captura .erro-caixa { text-align: left; }

/* O DISPARO circular: 96px de gradiente que emite luz, anel de obturador
   (respiro branco + traço de céu) e o reflexo de vitrine girando por dentro.
   É o button.gigante re-estruturado — estas regras vencem por ordem. */
button.botao-camera {
  width: 96px; height: 96px; min-height: 96px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  /* overflow hidden mantém o reflexo-vitrine do .gigante preso no círculo. */
  overflow: hidden;
  color: #fff; border: 0;
  background-color: var(--azul-800);
  background-image: var(--grad-marca);
  background-repeat: no-repeat; background-size: 100% 100%;
  background-position: 0 0;
  box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 6px var(--azul-400),
              0 18px 40px -12px rgba(46, 155, 245, .6);
  margin: var(--e3) auto var(--e3);
}
button.botao-camera:active { filter: brightness(.94); transform: scale(.96); }
button.botao-camera:focus-visible { outline: 3px solid var(--foco); outline-offset: 8px; }
button.botao-camera svg { width: 42px; height: 42px; }
.palco-legenda {
  font-size: 15px; font-weight: 800; color: var(--tinta);
  letter-spacing: -.01em; margin-bottom: var(--e2);
}

/* O STEPPER da quantidade: − / valor / +. O do meio é o #qtd de sempre. */
.stepper {
  display: flex; align-items: stretch; gap: var(--e2);
  max-width: 300px; margin: 0 auto;
}
.stepper button {
  flex: 0 0 64px; width: 64px; min-height: 60px; padding: 0;
  font-family: var(--mono); font-size: 26px; font-weight: 800; line-height: 1;
  color: var(--azul-800); background: rgba(255, 255, 255, .88);
  border: 2px solid var(--azul-400); border-radius: var(--raio-pill);
}
.stepper button:active { background: var(--azul-50); transform: none; }
.stepper input {
  flex: 1 1 auto; min-width: 0; min-height: 60px; text-align: center;
  font-family: var(--mono); font-size: 26px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ===========================================================================
   PAINEL — o NÚMERO-HERÓI e a LINHA DE FATOS.
   O progresso do lote é UM número em display gigante banhado no gradiente,
   com a trilha de luz embaixo. As métricas são linhas de fato dentro de UM
   painel de vidro: rótulo à esquerda, número mono à direita, fio entre elas.
   =========================================================================== */
.heroi { margin: 0 0 var(--e6); }
.heroi-numero {
  font-family: var(--mono);
  font-size: clamp(56px, 17vw, 72px);
  font-weight: 800; line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  background: var(--grad-tinta);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 26px rgba(46, 155, 245, .3));
}
.heroi-numero small {
  font-size: .45em; font-weight: 700; letter-spacing: 0;
}
.heroi-rotulo { font-size: 13px; line-height: 1.5; color: var(--fraco); margin-top: var(--e1); }
/* A trilha é o fio; o preenchimento é o gradiente de céu emitindo luz —
   decorativo (o número acima diz o valor; aria-* fica no markup). */
.heroi-trilha { position: relative; height: 5px; margin-top: var(--e4); }
.heroi-trilha::before {
  content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 1px;
  background: var(--linha-2);
}
.heroi-trilha i {
  position: absolute; left: 0; top: 0; height: 5px; width: 0;
  background: var(--grad-ceu); border-radius: var(--raio-pill);
  box-shadow: 0 2px 10px rgba(46, 155, 245, .45);
  transition: width .4s ease;
}

/* As linhas de fato moram num painel de vidro só — uma lâmina, não uma
   grade de cartõezinhos. */
.fatos {
  background: var(--vidro);
  border: 1px solid var(--reflexo);
  border-radius: var(--raio-g);
  padding: 0 var(--e4);
  margin-bottom: var(--e5);
  box-shadow: var(--sombra-papel);
}
.fato {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e4); min-height: var(--alvo-min);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--linha);
}
.fato:last-child { border-bottom: 0; }
.fato-rotulo { font-size: 14px; line-height: 1.4; color: var(--fraco); }
.fato-valor {
  font-family: var(--mono);
  font-size: 20px; font-weight: 800; line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--tinta); white-space: nowrap;
}

/* ===========================================================================
   CONFERIR — MODO FOCO.
   Um item por vez: o contêiner de cards vira um fluxo com scroll-snap
   vertical, cada card de vidro ocupa quase a viewport (~78vh), com a FOTO
   grande no topo (~38vh), leitura/código, candidatas como lista limpa de
   linhas, e quantidade + ações na base.
   =========================================================================== */

/* O snap mora no scroller da página (a viewport): proximity, não mandatory —
   os cards podem ser mais altos que a tela, e o operador nunca fica preso. */
html:has(#cards.modo-foco) { scroll-snap-type: y proximity; }

/* O contador "N de M" da fila: sempre à vista, grudado sob o topo de vidro.
   É chrome pinado (não rola consigo): leva o mesmo vidro do topo.
   O offset = topo-linha 50px + régua 10px + fio 1px. */
.fila-topo {
  position: sticky;
  top: calc(61px + env(safe-area-inset-top, 0px));
  z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3);
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--fraco);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  backdrop-filter: blur(14px) saturate(1.35);
  border-bottom: 1px solid rgba(255, 255, 255, .95);
  border-radius: 0 0 var(--raio-2) var(--raio-2);
  padding: var(--e2) var(--e3);
  margin: 0 calc(-1 * var(--e2)) var(--e3);
}
.fila-topo #contador { font-variant-numeric: tabular-nums; }
.fila-topo a {
  color: var(--azul-800); font-weight: 700; text-decoration: underline;
  /* alvo ≥48px sem engordar a linha */
  padding: 16px 10px; margin: -16px -10px;
}

/* Cada card domina a viewport e assenta no topo ao rolar. */
#cards.modo-foco > .cartao {
  display: flex; flex-direction: column;
  min-height: 78vh; min-height: 78dvh;
  scroll-snap-align: start;
  /* topo (61) + fila-topo (~40) + respiro */
  scroll-margin-top: calc(106px + env(safe-area-inset-top, 0px));
  margin-bottom: var(--e5);
}
/* Card já confirmado/descartado vira só a caixa de resultado: encolhe. */
#cards.modo-foco > .cartao:has(> .aviso-caixa:first-child:last-child) {
  min-height: 0;
}

/* A posição na fila, dentro do card: overline mono, quase muda. */
.foco-indice {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e3);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fraco);
  margin-bottom: var(--e2);
}

/* A FOTO GRANDE: ~38vh, cover, canto 16px, flutuando no vidro. */
#cards.modo-foco .cartao > img.foto {
  flex: 0 0 auto;
  width: 100%;
  height: 38vh; height: 38dvh;
  object-fit: cover;
  border-radius: 16px;
}
.foco-chips { margin-top: var(--e3); }

/* Candidatas como LISTA LIMPA: linhas com fio, sem caixinha por item. */
#cards.modo-foco .candidato {
  border: 0; border-bottom: 1px solid var(--linha);
  border-radius: 0;
  background: none;
  padding: var(--e3) var(--e2);
  margin: 0;
}
#cards.modo-foco [data-candidatos] > .candidato:last-of-type { border-bottom: 0; }
/* A escolhida acende por dentro: fundo verde + lombada interna. */
#cards.modo-foco .candidato.escolhido,
#cards.modo-foco .candidato:has(input:checked) {
  background: var(--verde-bg);
  box-shadow: inset 3px 0 0 var(--verde);
  transform: none;
}
#cards.modo-foco [data-candidatos] {
  border-top: 1px solid var(--linha);
}

/* A busca continua onde estava, só que mais discreta. */
.foco-busca { margin-top: var(--e3); }
.foco-busca label { font-size: 10px; color: var(--fraco); }
.foco-busca input { font-size: 16px; }
.foco-busca button { font-size: 14px; }

/* A base do card: quantidade, endereço e as ações — empurradas para o pé. */
.foco-base { margin-top: auto; padding-top: var(--e2); }
.foco-base .botoes { margin-top: var(--e4); }

/* Avisos de escopo/nota no topo do fluxo: presentes, não gritando. */
#cards.modo-foco > .dica, #cards.modo-foco > .aviso-caixa { font-size: 13px; }

/* ---------------------------------------------------------------------------
   A BARRA DO LOTE — tela Dados
   Marcar deixou de aplicar na hora. O administrador percorre 281 itens
   marcando, e só no fim envia. Esta barra é o que diz quantas ele já juntou
   sem que ele precise voltar ao topo — e é onde mora o botão que envia.
   Fica ACIMA da navegação, nunca por baixo dela.
   --------------------------------------------------------------------------- */
.barra-lote {
  position: fixed; left: 0; right: 0; z-index: 60;
  bottom: var(--altura-doca, 68px);   /* medida em JS; o fallback e so o primeiro quadro */
  background: var(--branco);
  border-top: 2px solid var(--azul-800);
  box-shadow: 0 -8px 24px -12px rgba(20, 60, 110, .35);
}
.barra-lote-dentro {
  max-width: 860px; margin: 0 auto;
  padding: var(--e2) var(--e4);
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
}
.lote-info { flex: 1 1 180px; line-height: 1.5; min-width: 0; }
.lote-info b { font-family: var(--mono); font-size: 15px; color: var(--tinta); }
.lote-aviso, .lote-progresso {
  display: block; font-size: 12px; font-family: var(--mono);
}
.lote-aviso { color: var(--vermelho); font-weight: 700; }
.lote-progresso { color: var(--fraco); }
.lote-botoes { display: flex; gap: var(--e2); }
/* `nowrap`: em tela estreita o rótulo "Aplicar todas" quebrava em duas linhas e
   a pílula virava um bloco alto e torto. */
.lote-botoes button { min-height: 48px; padding: 0 var(--e4); white-space: nowrap; }
.lote-botoes .primario:disabled { opacity: .45; cursor: not-allowed; }

/* Item MARCADO: âmbar, e não verde. Verde já significa "está no banco"; o
   âmbar diz "decidido por você, ainda não enviado" — a diferença importa
   quando a tela tem os dois ao mesmo tempo. */
.item-dado.marcado {
  border-left-color: var(--amarelo-borda);
  background: linear-gradient(180deg, rgba(255,239,176,.42), rgba(255,255,255,.55));
}
.item-dado.marcado.decidido { border-left-color: var(--amarelo-borda); }

/* Candidato JUNTÁVEL: a linha tem dono vivo, e a saída é juntar os dois num
   código só. Âmbar, e não vermelho — não é um beco, é outra decisão. */
.candidato.juntavel {
  border-color: var(--amarelo-borda);
  background: linear-gradient(180deg, rgba(255,239,176,.34), rgba(255,255,255,.6));
}
.candidato.juntavel.escolhido {
  border-color: var(--verde); background: var(--verde-bg);
}

/* Candidato VETADO pelos discriminantes, mas com a linha livre: escolhível.
   Tracejado em âmbar — o veto continua à vista, sem virar um beco. */
.candidato.vetada {
  border-style: dashed;
  border-color: var(--amarelo-borda);
  background: rgba(255, 239, 176, .22);
}
.candidato.vetada.escolhido {
  border-style: solid; border-color: var(--verde); background: var(--verde-bg);
}

/* ---------------------------------------------------------------------------
   Saídas — o motivo é o dado, não um enfeite
   ---------------------------------------------------------------------------
   Vendido, devolvido, quebrado e perdido tiram a mesma unidade da prateleira e
   significam coisas opostas no caixa. O selo carrega essa diferença: só o que
   ainda não foi classificado acende em âmbar, e todo o resto fica quieto —
   pintar os quatro de cores diferentes transformaria a lista num vitral onde
   nada se destaca. */
.motivo-selo {
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--verde); background: var(--verde-bg);
  border: 1px solid rgba(12, 122, 70, .22);
  border-radius: var(--raio-pill); padding: 4px 10px;
}
.motivo-selo.pendente {
  color: var(--ambar); background: var(--ambar-bg);
  border-color: var(--amarelo-borda);
}

/* Os quatro botões dividem a largura por igual e nunca descem abaixo do alvo
   mínimo de toque: são usados no celular, no meio do galpão. */
.motivo-botoes {
  display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e4);
}
.motivo-botoes button {
  flex: 1 1 92px; min-height: var(--alvo-min); padding: var(--e2) var(--e3);
  font-size: 13px;
}
.motivo-botoes button.escolhida {
  border-color: var(--verde); background: var(--verde-bg); color: var(--verde);
  box-shadow: var(--anel-ok);
}

/* ---------------------------------------------------------------------------
   Categorias — a Régua
   ---------------------------------------------------------------------------
   A grade de cartões iguais não servia porque o DADO não é uniforme: a maior
   categoria tem 286 unidades livres e a menor tem 1, uma amplitude de 286×.
   Cartões de mesmo tamanho dão o mesmo peso visual aos dois extremos, e o olho
   perde a ordem — 27 blocos quebrando em seis linhas irregulares.

   Aqui a barra proporcional fica ATRÁS do texto e ocupa a fração exata do maior
   volume. Ela é o dado, não enfeite: "onde tem estoque" se responde antes de
   ler qualquer número. */
.regua { display: block; }
.regua-linha {
  position: relative; display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: var(--e3);
  width: 100%; text-align: left; font: inherit; color: inherit;
  padding: 13px var(--e4); border: 1px solid transparent;
  border-radius: var(--raio-2); cursor: pointer; overflow: hidden;
  background: transparent; transition: var(--transicao);
}
/* A barra é ::before para ficar sob o texto sem outro elemento no DOM. */
.regua-linha::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  width: var(--w, 0%);
  background: linear-gradient(90deg, rgba(103, 198, 250, .30), rgba(103, 198, 250, .10));
  transition: var(--transicao);
}
.regua-linha + .regua-linha { border-top: 1px solid var(--linha); }
.regua-linha:hover { border-color: var(--linha-2); background: rgba(255, 255, 255, .5); }
.regua-linha:hover::before {
  background: linear-gradient(90deg, rgba(46, 155, 245, .38), rgba(103, 198, 250, .14));
}
.regua-linha.on { border-color: var(--azul-400); background: rgba(255, 255, 255, .62); }
.regua-nome { position: relative; font-size: 15px; font-weight: 600; line-height: 1.3; }
.regua-meta { position: relative; font-size: 12px; color: var(--fraco); margin-top: 2px; }
.regua-num {
  position: relative; text-align: right;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 21px; font-weight: 800; color: var(--azul-800); line-height: 1;
}
.regua-num small {
  display: block; margin-top: 3px;
  font: 700 10px/1 var(--fonte); letter-spacing: .1em;
  text-transform: uppercase; color: var(--fraco);
}
/* As subcategorias abrem embaixo, presas por uma régua vertical: sem ela, a
   lista aberta se confunde com a categoria seguinte. */
.regua-subs {
  display: none; flex-wrap: wrap; gap: 6px;
  margin: 0 0 var(--e2) var(--e4);
  padding: var(--e2) var(--e4) var(--e3) calc(var(--e4) - 2px);
  border-left: 2px solid var(--gelo);
}
.regua-subs.on { display: flex; }
.regua-sub {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 7px 13px; border-radius: var(--raio-pill);
  border: 1px solid var(--linha); background: var(--branco);
  font: inherit; font-size: 12.5px; color: var(--tinta-2);
  cursor: pointer; transition: var(--transicao);
}
.regua-sub:hover { border-color: var(--celeste); color: var(--tinta); }
.regua-sub.on { border-color: var(--azul-400); background: var(--azul-50); color: var(--azul-800); }
.regua-sub b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--azul-800); }

/* ── O SININHO ─────────────────────────────────────────────────────────────
   Anúncio novo, em qualquer canal. Só o dono enxerga.

   O NÚMERO VERMELHO CONTA SÓ O QUE PEDE AÇÃO. Anúncio que entrou com o código
   certo também vira aviso — o dono pediu para saber de todos —, mas não pinta
   de vermelho: se tudo fosse vermelho, a cor pararia de significar. */
.topo-sino {
  position: relative; margin-left: auto; margin-right: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 10px; background: transparent;
  color: #4A6076; cursor: pointer;
}
.topo-sino:hover  { background: #F1F7FD; color: #1465B8; }
.topo-sino.tem-novas { color: #1465B8; }
.sino-conta {
  position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; background: #B3261E; color: #fff;
  font: 700 10px/16px system-ui; text-align: center;
}
.sino-conta.oculto, .topo-sino.oculto { display: none; }

.avisos { position: fixed; inset: 0; z-index: 60; }
.avisos[hidden] { display: none; }
.avisos-fundo { position: absolute; inset: 0; background: rgba(19,41,61,.42); }
.avisos-painel {
  position: absolute; top: 52px; right: 10px; left: 10px; margin: 0 auto;
  max-width: 420px; max-height: 76vh; overflow-y: auto;
  background: #fff; border: 1px solid #D6E8F7; border-radius: 14px;
  box-shadow: 0 12px 32px rgba(19,41,61,.18); padding: 14px;
}
.avisos-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.avisos-cab b { font-size: 14px; color: #13293D; }
.avisos-limpar {
  margin-left: auto; border: 0; background: none; padding: 4px 2px;
  color: #1465B8; font: 600 11.5px system-ui; cursor: pointer;
}
.avisos-vazio { color: #4A6076; font-size: 12.5px; margin: 6px 2px; }

.aviso {
  border: 1px solid #E4EFF9; border-left: 3px solid #C9DCEC;
  border-radius: 9px; padding: 9px 11px; margin-bottom: 8px; background: #fff;
}
/* A cor mora na borda esquerda, e não no fundo: um fundo colorido por cartão
   deixa a lista parecendo um alarme mesmo quando quase tudo deu certo. */
.aviso.ok     { border-left-color: #1E7A4B; }
.aviso.alerta { border-left-color: #B3261E; background: #FEF7F7; }
.aviso.lida   { opacity: .55; }
.aviso-topo   { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.aviso-canal  { font: 700 9.5px/1 ui-monospace, monospace; letter-spacing: .1em;
                text-transform: uppercase; color: #4A6076; }
.aviso-tag    { margin-left: auto; font: 700 10px system-ui; }
.aviso-tag.ok     { color: #1E7A4B; }
.aviso-tag.alerta { color: #B3261E; }
.aviso-nome   { font: 600 13px/1.35 system-ui; color: #13293D; }
.aviso-pe     { font-size: 11.5px; color: #4A6076; margin-top: 3px; }
.aviso-pe code { font: 11px ui-monospace, monospace; background: #FDECEC;
                 padding: 1px 5px; border-radius: 5px; color: #8C1D18; }

/* O cartão do aviso, na ordem em que a informação é procurada: de onde veio,
   o que é, e qual o código. O código ganha destaque porque é a única coisa
   que se digita depois — o nome só serve para reconhecer. */
.aviso-codigo {
  font: 700 14px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em; margin-top: 5px; color: #13293D;
}
.aviso-codigo.alerta { color: #8C1D18; }
.aviso-pe { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.aviso-pe span:last-child { margin-left: auto; }

/* A etiqueta do canal. Cada praça tem a sua cor, para dizer de onde veio o
   anúncio antes de a pessoa ler a palavra — numa lista de vinte, a cor faz o
   trabalho que a leitura faria vinte vezes.

   Tom suave, e não a cor de marca crua: amarelo do Mercado Livre e verde do
   WhatsApp em cheio brigam com o azul da casa e transformam a lista num
   semáforo. Aqui eles só tingem o fundo o suficiente para separar. */
.aviso-canal {
  display: inline-block; padding: 2px 7px; border-radius: 5px;
  font: 700 9.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em; text-transform: uppercase;
}
.aviso-canal.ml { background: #FFF4CC; color: #7A5A00; }
.aviso-canal.wp { background: #DFF3E6; color: #14603A; }
.aviso-hora {
  margin-left: auto; font-size: 11px; color: #4A6076;
  font-variant-numeric: tabular-nums;
}