/* ═══════════════════════════════════════════════════════════════════════════
   FEIRA 2.0 — Rede Inova Drogarias
   Ferramenta interna de compra farmaceutica. Denso, sobrio, sem enfeite.
   A unidade de projeto e uma tela de 360px de largura.

   🚨 Regras que nao se negociam neste arquivo:
   - nada de gradiente, glow, vidro ou sombra colorida;
   - vermelho e da MARCA e do ESTADO CRITICO, nunca decoracao;
   - toque minimo 48px; fonte de input >= 16px (abaixo disso o iOS da zoom);
   - `min-width: 0` em todo filho de flex/grid — sem isso nome longo de produto
     estoura a linha e nasce o scroll horizontal que o briefing proibe;
   - nenhuma altura fixa que possa cortar conteudo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── tipografia oficial ─────────────────────────────
   Arquivos servidos daqui, nunca de CDN: no pavilhao a internet cai e fonte de fora ja
   derrubou tela do feira legado. Subconjunto latino apenas — e o que o portugues usa.
   `swap`: o texto aparece na fonte do sistema e troca quando a oficial chega; ninguem
   fica olhando tela em branco por causa de fonte. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fontes/Archivo-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fontes/Archivo-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fontes/Archivo-700-latin.woff2) format('woff2'); }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fontes/SairaCondensed-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fontes/SairaCondensed-700-latin.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fontes/IBMPlexMono-400-latin.woff2) format('woff2'); }

:root {
  --vermelho: #E8151D;
  --vermelho-escuro: #C2121A;
  --grafite: var(--texto);
  --grafite-70: var(--texto-2);
  --grafite-50: var(--texto-3);
  --branco: var(--superficie);
  --neutro-1: var(--superficie-2);
  --neutro-2: var(--borda);
  --neutro-3: var(--borda-forte);
  --verde: #0E8A4F;
  --verde-fundo: #E7F4ED;
  --ambar: #C97A00;
  --ambar-fundo: #FDF3E3;
  --vermelho-fundo: #FDECEC;

  /* Grafite FIXO da marca: login e topo do app continuam grafite nos dois temas. Nao
     confundir com --grafite, que e a cor da TINTA e inverte no tema escuro. */
  --grafite-fixo: #121316;

  /* ── Papeis de superficie e tinta ──────────────────────────────────────────
     Os nomes antigos (--grafite, --branco, --neutro-*) continuam valendo: viraram apelidos
     destes. Assim o tema escuro se define em um lugar so, redefinindo o papel, sem varrer
     as 560 linhas de regra abaixo. */
  --fundo: #F4F4F5;          /* fundo da pagina */
  --superficie: #FFFFFF;     /* cartao, folha, campo */
  --superficie-2: #F4F4F5;   /* realce dentro do cartao */
  --texto: #121316;
  --texto-2: #4A4C52;
  --texto-3: #686A71;          /* 4,9:1 sobre --fundo (era #74767D, 4,1:1 — medido 16/09) */
  --borda: #E7E7E9;
  --borda-forte: #D3D4D8;
  --contraste: #121316;      /* botao escuro: superficie que inverte com o tema */
  --contraste-texto: #FFFFFF;
  --ambar-texto: #7A4B00;
  /* Tinta semantica: a cor do TEXTO sobre o fundo tingido. Separada da cor cheia
     (--verde/--ambar/--vermelho), que continua servindo de fundo com texto branco. */
  --verde-tinta: #0B7A45;      /* 4,8:1 sobre --verde-fundo */
  --ambar-tinta: #8F5A00;      /* ambar como TEXTO: #C97A00 dava 3,05:1 no branco */
  --vermelho-tinta: #C2121A;
  --verde-texto: #0E8A4F;
  --sombra-cartao: 0 1px 2px rgba(0,0,0,.08);

  --r: 4px;              /* raio discreto: conforto de toque, nao decoracao */
  --nav-altura: 58px;
  --topo-altura: 52px;

  --fonte: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Condensada so para titulo, KPI e numero de impacto: cabe mais digito na mesma largura
     sem encolher a fonte. Nunca em texto corrido. */
  --fonte-titulo: "Saira Condensed", "Archivo Narrow", Archivo, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  /* 🚨 A trava contra o scroll horizontal acidental. */
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.45;
  color: var(--grafite);
  background: var(--neutro-1);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

button, input, select, textarea { font-family: inherit; font-size: 16px; color: inherit; }
button { cursor: pointer; border: 0; background: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
/* Numero e codigo em tabular: coluna de R$ nao pode dancar de linha em linha. */
code, .mono, .cod { font-family: var(--mono); font-size: .92em; letter-spacing: -0.01em; }

/* ───────────────────────────── barra de estado ───────────────────────────── */
.barra-estado {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  padding: calc(env(safe-area-inset-top) + 7px) 14px 7px;
  font-size: 12.5px; font-weight: 600; text-align: center;
  background: var(--ambar); color: #fff;
}
.barra-estado[data-tom="erro"] { background: var(--vermelho); }
.barra-estado[data-tom="ok"] { background: var(--verde); }

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN — a primeira impressao do sistema.

   Arte oficial da marca (logo, fundo e icone vieram do proprietario). O desenho segue o
   modelo aprovado: fundo claro com as ondas vermelhas, logo grande, cartao branco flutuando
   com os campos, botao vermelho em degrade e os tres pilares embaixo.

   🚨 A arte pesa 151 KB no total (era 5 MB nos originais). Numa tela de LOGIN, no 4G do
   pavilhao, a diferenca entre 5 MB e 151 KB e a diferenca entre o app abrir e a pessoa
   achar que travou.
   ═══════════════════════════════════════════════════════════════════════════ */
.login {
  position: relative;
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: max(env(safe-area-inset-top), 20px) 18px max(env(safe-area-inset-bottom), 20px);
  /* Cor de base embaixo da arte: se a imagem demorar, a tela ja nasce clara e legivel em
     vez de piscar preta. */
  background: #F7F3F3;
  color: var(--grafite-fixo, #121316);
  overflow: hidden;
}

/* A arte cobre a tela inteira, atras de tudo. `object-fit: cover` mantem a proporcao —
   esticar a onda deformaria a marca. */
.login-fundo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.login-fundo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.login-caixa {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
}

/* ── marca ─────────────────────────────────────────────────────────────── */
.login-marca { text-align: center; margin-bottom: 18px; }
.login-logo {
  width: min(78%, 320px); height: auto; display: block; margin: 0 auto;
}
.login-chamada {
  margin: 12px 0 0;
  font-size: clamp(17px, 4.6vw, 21px); font-weight: 700; letter-spacing: -0.02em;
  color: #1B1D22;
}

/* ── cartao ────────────────────────────────────────────────────────────── */
.login-cartao {
  width: 100%;
  padding: 26px 20px 22px;
  border-radius: 22px;
  /* Branco quase opaco: deixa a onda vermelha aparecer de leve por tras sem tirar a
     legibilidade do que esta escrito em cima. */
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 18px 46px rgba(120, 20, 24, .13), 0 2px 8px rgba(0, 0, 0, .05);
}
.login-titulo {
  margin: 0; text-align: center;
  font-size: clamp(21px, 5.6vw, 26px); font-weight: 800; letter-spacing: -0.02em;
  color: #16181C;
}
.login-sub {
  margin: 6px 0 20px; text-align: center;
  font-size: 14px; line-height: 1.45; color: #6E7178;
}

.login-form { display: flex; flex-direction: column; gap: 12px; }

/* ── campo com icone dentro ────────────────────────────────────────────── */
.campo-icone { position: relative; display: flex; align-items: center; }
.campo-svg {
  position: absolute; left: 15px; width: 21px; height: 21px;
  color: #3A3D44; pointer-events: none;
}
.campo-icone input {
  width: 100%; min-height: 58px;
  padding: 0 46px 0 48px;
  border: 1px solid #E6E2E2; border-radius: 14px;
  background: #FAF8F8; color: #16181C;
  /* 16px e o minimo: abaixo disso o iOS da zoom sozinho ao focar, e a tela salta. */
  font-size: 16px;
}
.campo-icone input::placeholder { color: #9A9DA4; }
.campo-icone input:focus {
  outline: none;
  border-color: var(--vermelho);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(232, 21, 29, .13);
}
.campo-icone .ver-senha {
  position: absolute; right: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;                 /* alvo de dedo, nao so o desenho */
  color: #9A9DA4; background: none; border: 0;
}
.campo-icone .ver-senha svg { width: 21px; height: 21px; }
.campo-icone .ver-senha[aria-pressed="true"] { color: var(--vermelho); }

/* ── botao entrar ──────────────────────────────────────────────────────── */
.btn-entrar {
  width: 100%; min-height: 58px; margin-top: 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: 0; border-radius: 14px;
  background: linear-gradient(135deg, #E8151D 0%, #C2121A 100%);
  color: #fff; font-size: 17.5px; font-weight: 750; letter-spacing: .01em;
  box-shadow: 0 8px 20px rgba(232, 21, 29, .30);
  cursor: pointer;
}
.btn-entrar svg { width: 22px; height: 22px; }
.btn-entrar:active { background: #B31017; box-shadow: 0 3px 10px rgba(232, 21, 29, .28); }
.btn-entrar:focus-visible { outline: 3px solid #7A0A10; outline-offset: 2px; }
.btn-entrar:disabled { opacity: .6; }
/* Rodinha DENTRO do botao: some a duvida de "cliquei ou nao" quando a rede esta lenta. */
.btn-entrar[data-carregando="1"] { pointer-events: none; }
.btn-entrar[data-carregando="1"] svg { display: none; }
.btn-entrar[data-carregando="1"]::after {
  content: ""; width: 17px; height: 17px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: girar .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .btn-entrar[data-carregando="1"]::after { animation: none; } }

/* ── divisor e rodape do cartao ────────────────────────────────────────── */
.login-divisor {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  margin: 20px 0 12px;
}
.login-divisor span { flex: 1 1 auto; height: 1px; background: #E6E2E2; }
.login-divisor i {
  width: 4px; height: 12px; background: var(--vermelho);
  transform: skewX(-18deg); border-radius: 1px;
}
.login-exclusivo {
  margin: 0; text-align: center; font-size: 13.5px; color: #6E7178;
}

/* ── tres pilares ──────────────────────────────────────────────────────── */
.login-pilares {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  width: 100%;
}
.login-pilares li {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 4px;
  font-size: 12.5px; font-weight: 600; line-height: 1.25; color: #3A3D44;
}
/* Divisor entre os pilares, como no modelo — linha fina, sem caixa. */
.login-pilares li + li { border-left: 1px solid rgba(58, 61, 68, .18); }
.login-pilares svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--vermelho); }

/* ── rodape ────────────────────────────────────────────────────────────── */
.login-rodape {
  margin-top: 22px; text-align: center;
  display: flex; flex-direction: column; gap: 5px;
  font-size: 11px; line-height: 1.45; color: #7E8189;
}
.login-lema {
  font-size: 11.5px; font-weight: 750; letter-spacing: .34em;
  text-transform: uppercase; color: var(--vermelho);
}
.login-saude { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.login-saude::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--verde);
}
.login-saude[data-ok="0"]::before { background: var(--ambar); }

.erro-inline {
  margin: 2px 0 0; padding: 10px 12px;
  border-left: 3px solid var(--vermelho); border-radius: 4px;
  background: #FDECEC; color: #A00D14;
  font-size: 13.5px; line-height: 1.45;
}

/* Rotulo que existe para o leitor de tela e nao ocupa pixel.
   🚨 `display:none` NAO serve: leitor de tela pula o que esta escondido assim, e o campo
   ficaria sem nome. Placeholder tambem nao e rotulo — ele some quando o campo enche. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── telas baixas: teclado aberto no celular ───────────────────────────── */
/* 🚨 Com o teclado aberto sobra ~420px de altura. A marca encolhe para o botao ENTRAR
   continuar alcancavel sem rolagem — nao adianta login bonito que nao deixa entrar. */
@media (max-height: 560px) {
  .login { align-items: flex-start; }
  .login-logo { width: min(56%, 220px); }
  .login-chamada { font-size: 15px; margin-top: 8px; }
  .login-marca { margin-bottom: 12px; }
  .login-cartao { padding: 18px 16px 16px; }
  .login-sub { margin-bottom: 14px; }
  .login-pilares, .login-rodape { display: none; }
}

/* ── desktop ───────────────────────────────────────────────────────────── */
@media (min-width: 900px) and (min-height: 620px) {
  .login-caixa { max-width: 480px; }
  .login-logo { width: 360px; }
  .login-cartao { padding: 32px 30px 26px; }
  .login-pilares li { font-size: 13px; gap: 10px; }
}

/* O tema escuro NAO inverte esta tela: a arte e vermelha e branca por definicao da marca,
   e um login "escuro" seria outra identidade. O que muda no escuro e o app, depois. */

/* ───────────────────────────── botoes ───────────────────────────── */
.btn {
  min-height: 48px; padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r); font-size: 15px; font-weight: 650;
  background: var(--neutro-2); color: var(--grafite);
}
.btn-grande { min-height: 54px; font-size: 16.5px; }
.btn-primario {
  background: var(--vermelho); color: #fff;
  box-shadow: 0 1px 2px rgba(232,21,29,.28);
}
.btn-primario:active { background: var(--vermelho-escuro); box-shadow: none; }
/* Rodinha de espera dentro do proprio botao: some a duvida de "clicou ou nao". */
.btn[data-carregando="1"] { pointer-events: none; }
.btn[data-carregando="1"]::before {
  content: ""; width: 15px; height: 15px; margin-right: 2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn[data-carregando="1"]::before { animation: none; } }
.btn-escuro { background: var(--contraste); color: var(--contraste-texto); }
.btn-contorno { background: transparent; border: 1px solid var(--neutro-3); }
.btn-bloco { width: 100%; }
.btn:disabled { opacity: .5; }

/* ───────────────────────────── topo e navegacao ───────────────────────────── */
.topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--topo-altura);
  padding: calc(env(safe-area-inset-top)) 14px 0;
  /* O topo e a faixa da marca: grafite nos dois temas, como o login. */
  background: var(--grafite-fixo); color: #fff;
}
/* 🚨 Simbolo pequeno. A marca identifica, nao ocupa: quem esta no estande precisa do nome
   da tela e dos numeros, nao de um logo grande empurrando o conteudo para baixo. */
.topo > .marca-icone { flex: 0 0 auto; width: 26px; height: 26px; margin-right: -2px; }
/* ── VOLTAR ─────────────────────────────────────────────────────────────────
   🚨 ALVO DE 44px DE VERDADE. O icone e pequeno, mas a area que responde ao dedo nao pode
   ser: no pavilhao a pessoa esta de pe, segurando o celular com uma mao so, e uma seta de
   24px e uma seta que erra. O padding faz o alvo, nao o desenho. */
.topo-voltar {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: -12px; margin-right: -6px;
  padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.topo-voltar svg { width: 24px; height: 24px; }
.topo-voltar:active { background: rgba(255, 255, 255, .16); }
.topo-voltar:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
/* Sem seta, o simbolo da marca volta a ser o primeiro elemento e nada se mexe. */
.topo-voltar[hidden] { display: none; }

.topo-esq { display: flex; flex-direction: column; min-width: 0; padding: 6px 0; flex: 1 1 auto; }
.topo-evento {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; color: var(--vermelho);
  text-transform: uppercase;
}
.topo-tela {
  font-family: var(--fonte-titulo);
  font-size: 19px; font-weight: 700; letter-spacing: 0.005em; line-height: 1.12;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topo-dir { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.topo-usuario {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  background: #2A2D34; color: #fff; font-size: 13px; font-weight: 700;
  display: grid; place-items: center;
  border: 1px solid #3A3E46;
}
.topo-usuario:active { background: #3A3E46; }

/* Indicador de sincronizacao. Diz a VERDADE sobre a idade do dado: "agora", "ha 4 min",
   "offline". Dado velho nunca pode ser chamado de ao vivo. */
.topo-sync {
  flex: 0 0 auto; height: 44px; padding: 0 8px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: #9A9DA5; white-space: nowrap;
}
.topo-sync::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--verde); flex: 0 0 auto;
}
.topo-sync[data-tom="velho"] { color: #E2A64C; }
.topo-sync[data-tom="velho"]::before { background: var(--ambar); }
.topo-sync[data-tom="offline"] { color: #FF8E92; }
.topo-sync[data-tom="offline"]::before { background: var(--vermelho); }
.topo-sync[data-tom="sincronizando"]::before { animation: pulsar 1.1s ease-in-out infinite; }
@keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .topo-sync[data-tom="sincronizando"]::before { animation: none; } }
@media (max-width: 359px) { .topo-sync span { display: none; } }

.navbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  /* 🚨 Seis acessos fixos (docs/NAVIGATION-INFORMATION-ARCHITECTURE.md). A ordem nao muda
     por usuario: no meio da feira a memoria muscular vale mais que a personalizacao. */
  display: grid; grid-template-columns: repeat(6, 1fr);
  background: var(--branco);
  border-top: 1px solid var(--neutro-2);
  box-shadow: 0 -1px 3px rgba(0,0,0,.05);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-item {
  position: relative;
  min-height: var(--nav-altura);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 1px;
  color: var(--grafite-50); font-size: 9.5px; font-weight: 600; letter-spacing: -0.01em;
  min-width: 0;
}
/* "Anotações" nao pode truncar em 360px: e a regra explicita da especificacao. */
@media (max-width: 359px) { .nav-item { font-size: 9px; } }
.nav-item svg { width: 20px; height: 20px; fill: currentColor; }
.nav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.nav-item[aria-current="page"] { color: var(--vermelho); font-weight: 700; }
/* A aba ativa precisa se ver de relance com o celular na mao e o pavilhao claro: traco
   vermelho no topo e um halo discreto atras do icone. */
.nav-item[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 16%; right: 16%; height: 3px;
  background: var(--vermelho); border-radius: 0 0 3px 3px;
}
.nav-item[aria-current="page"] svg {
  background: var(--vermelho-fundo); border-radius: 7px;
  width: 28px; height: 23px; padding: 1px 4px;
}
.nav-badge {
  position: absolute; top: 4px; right: calc(50% - 20px);
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--vermelho); color: #fff;
  font-size: 10px; font-style: normal; font-weight: 700; border-radius: 9px;
}

/* 🚨 O respiro inferior que impede a barra de cobrir conteudo — inclusive o ultimo botao. */
.conteudo {
  padding: 12px 14px calc(var(--nav-altura) + env(safe-area-inset-bottom) + 20px);
  min-height: calc(100dvh - var(--topo-altura));
  outline: none;
}

/* ───────────────────────────── blocos e cartoes ───────────────────────────── */
.bloco { margin: 0 0 14px; }
.bloco-titulo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 0 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--grafite-50);
}
.bloco-titulo .sub { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }

.cartao {
  background: var(--branco);
  border: 1px solid var(--neutro-2);
  border-radius: var(--r);
  box-shadow: var(--sombra-cartao);
  padding: 13px 14px;
  min-width: 0;
}
.cartao + .cartao { margin-top: 8px; }
.cartao-clicavel { display: block; width: 100%; text-align: left; }
.cartao-clicavel:active { background: var(--neutro-1); }

/* KPIs: numero grande so onde decide. */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kpi {
  background: var(--branco); border: 1px solid var(--neutro-2); border-radius: var(--r);
  box-shadow: var(--sombra-cartao); padding: 12px; min-width: 0;
  position: relative;
}
/* KPI clicavel abre o detalhe do numero (drill-down). Sem cara de botao, mas com resposta
   ao toque: o comprador tem de saber que da para ir fundo. */
button.kpi { text-align: left; width: 100%; }
button.kpi:active { background: var(--neutro-1); }
button.kpi::after {
  content: ""; position: absolute; right: 9px; top: 11px;
  width: 6px; height: 6px; border-right: 1.5px solid var(--neutro-3); border-top: 1.5px solid var(--neutro-3);
  transform: rotate(45deg);
}
.kpi-rotulo { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--grafite-50); }
.kpi-valor {
  margin-top: 3px; font-family: var(--fonte-titulo);
  font-size: 28px; font-weight: 700; letter-spacing: 0;
  line-height: 1.1; font-variant-numeric: tabular-nums;
  /* Valor grande precisa poder quebrar: R$ 368.154,41 nao pode estourar a coluna. */
  overflow-wrap: anywhere;
}
.kpi-valor.menor { font-size: 20px; }
.kpi-nota { font-size: 11.5px; color: var(--grafite-50); margin-top: 2px; }

/* Linha rotulo/valor — a forma padrao de mostrar dado denso sem tabela. */
.linhas { display: flex; flex-direction: column; }
.linha {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--neutro-1); min-width: 0;
}
.linha:last-child { border-bottom: 0; }
.linha-rotulo { font-size: 13px; color: var(--grafite-70); min-width: 0; }
.linha-valor {
  font-size: 14.5px; font-weight: 650; text-align: right;
  font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere;
}
.linha-valor.ausente { color: var(--grafite-50); font-weight: 500; font-style: italic; }

/* ───────────────────────────── selos de situacao ───────────────────────────── */
.selo {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: var(--r);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em;
  background: var(--neutro-2); color: var(--grafite-70);
  max-width: 100%; min-width: 0;
}
.selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.selo[data-tom="acao"] { background: var(--vermelho-fundo); color: var(--vermelho-tinta); }
.selo[data-tom="oportunidade"] { background: var(--verde-fundo); color: var(--verde-tinta); }
.selo[data-tom="ok"] { background: var(--verde-fundo); color: var(--verde-tinta); }
.selo[data-tom="alerta"] { background: var(--ambar-fundo); color: var(--ambar-tinta); }
.selo[data-tom="neutro"] { background: var(--neutro-2); color: var(--grafite-70); }

.motivo {
  margin: 7px 0 0; font-size: 13px; line-height: 1.45; color: var(--grafite-70);
}

/* ───────────────────────────── segmentos 3M/6M/12M ───────────────────────────── */
.segmentos {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
  background: var(--neutro-2); padding: 3px; border-radius: var(--r);
}
.segmento {
  min-height: 48px; border-radius: 3px;
  font-size: 13.5px; font-weight: 650; color: var(--grafite-70);
  display: grid; place-items: center; min-width: 0;
}
.segmento[aria-selected="true"] { background: var(--branco); color: var(--grafite); box-shadow: var(--sombra-cartao); }

/* ───────────────────────────── busca ───────────────────────────── */
.busca-caixa {
  position: sticky; top: var(--topo-altura); z-index: 20;
  margin: -12px -14px 12px; padding: 10px 14px;
  background: var(--neutro-1); border-bottom: 1px solid var(--neutro-2);
}
.busca-campo { position: relative; display: flex; align-items: center; }
.busca-campo input {
  width: 100%; min-height: 48px; padding: 0 42px 0 40px;
  background: var(--branco); border: 1px solid var(--neutro-3); border-radius: var(--r);
}
.busca-campo input:focus { outline: 2px solid var(--grafite); border-color: transparent; }
.busca-icone { position: absolute; left: 12px; width: 18px; height: 18px; fill: var(--grafite-50); pointer-events: none; }
.busca-limpar {
  position: absolute; right: 4px; width: 44px; height: 44px;
  display: grid; place-items: center; color: var(--grafite-50);
}
.busca-limpar svg { width: 16px; height: 16px; fill: currentColor; }

/* Resultado: nome em ate 2 linhas, sem encolher fonte. */
.resultado { display: flex; flex-direction: column; gap: 6px; }
.resultado-nome {
  font-size: 14.5px; font-weight: 650; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.resultado-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--grafite-50); min-width: 0; }
.resultado-meta .cod { font-family: var(--mono); font-size: 11.5px; }
.resultado-numeros { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; }
.resultado-numeros b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ───────────────────────────── ficha do produto ───────────────────────────── */
.ficha-topo { background: var(--branco); border: 1px solid var(--neutro-2); border-radius: var(--r); padding: 14px; }
.ficha-nome { font-size: 19px; line-height: 1.25; font-weight: 750; letter-spacing: -0.015em; }
.ficha-sub { margin-top: 5px; font-size: 13px; color: var(--grafite-70); }
.ficha-ids { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.ident {
  font-family: var(--mono); font-size: 11.5px; padding: 3px 7px;
  background: var(--neutro-1); border: 1px solid var(--neutro-2); border-radius: 3px;
  overflow-wrap: anywhere; min-width: 0;
}

.estoque-agora { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.estoque-num {
  font-size: 46px; font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.estoque-num.indefinido { font-size: 22px; font-weight: 700; color: var(--grafite-50); }
.estoque-lado { text-align: right; font-size: 11.5px; color: var(--grafite-50); min-width: 0; }

.decisao-caixa { border-left: 3px solid var(--neutro-3); padding-left: 11px; }
.decisao-caixa[data-tom="acao"] { border-color: var(--vermelho); }
.decisao-caixa[data-tom="oportunidade"], .decisao-caixa[data-tom="ok"] { border-color: var(--verde); }
.decisao-caixa[data-tom="alerta"] { border-color: var(--ambar); }

/* Serie mensal: barras verticais, legiveis em 360px, sem biblioteca. */
.serie-rot { display: flex; gap: 3px; margin-top: 5px; }
.serie-rot span { flex: 1 1 0; min-width: 0; text-align: center; font-size: 9px; color: var(--grafite-50); }
.serie-legenda { display: flex; gap: 14px; margin-top: 8px; font-size: 11.5px; color: var(--grafite-50); }
.serie-legenda i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 1px; background: var(--grafite); }

/* Ultimas compras: lista vertical, nunca tabela espremida. */
.compra-linha {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 12px;
  padding: 9px 0; border-bottom: 1px solid var(--neutro-1);
}
.compra-linha:last-child { border-bottom: 0; }
.compra-forn { font-size: 13.5px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.compra-data { font-size: 11.5px; color: var(--grafite-50); }
.compra-custo { font-size: 15px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.compra-qtd { font-size: 11.5px; color: var(--grafite-50); text-align: right; }
.compra-linha[data-bonificacao="1"] .compra-custo { color: var(--grafite-50); font-weight: 600; }

/* Alerta de duplicidade — o mais importante da feira. */
.alerta {
  display: flex; gap: 9px; padding: 11px 12px; border-radius: var(--r);
  background: var(--ambar-fundo); border-left: 3px solid var(--ambar);
  font-size: 13px; line-height: 1.4; color: var(--ambar-texto);
}
.alerta[data-tom="erro"] { background: var(--vermelho-fundo); border-color: var(--vermelho); color: var(--vermelho-tinta); }
.alerta svg { flex: 0 0 auto; width: 17px; height: 17px; fill: currentColor; margin-top: 1px; }
.alerta b { font-weight: 750; }

/* ───────────────────────────── item do pre-pedido ───────────────────────────── */
.item-cartao { background: var(--branco); border: 1px solid var(--neutro-2); border-radius: var(--r); padding: 12px 13px; }
.item-cartao + .item-cartao { margin-top: 8px; }
.item-cartao[data-alterado="1"] { border-left: 3px solid var(--grafite); }
.item-topo { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.item-nome { font-size: 14.5px; font-weight: 650; line-height: 1.3; min-width: 0; }
.item-dados { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px 14px; font-size: 12.5px; color: var(--grafite-70); }
.item-dados b { font-weight: 700; color: var(--grafite); font-variant-numeric: tabular-nums; }
.item-acoes { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.item-acoes .btn { min-height: 44px; font-size: 14px; }

.qtd-atual {
  flex: 0 0 auto; text-align: right;
}
.qtd-num { font-size: 21px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.qtd-rot { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grafite-50); }

/* ───────────────────────────── folha inferior ───────────────────────────── */
.folha-fundo { position: fixed; inset: 0; z-index: 50; background: rgba(18,19,22,.45); }
.folha {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
  background: var(--branco);
  border-radius: 12px 12px 0 0;
  /* 🚨 Nunca maior que a tela, e o corpo rola por dentro: modal que estoura e modal com
     botao de confirmar fora do alcance. */
  max-height: 92dvh;
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}
.folha-alca { width: 36px; height: 4px; border-radius: 2px; background: var(--neutro-3); margin: 8px auto 2px; }

/* ── O ASSISTENTE DE NOVO PRE-PEDIDO OCUPA A TELA ───────────────────────────
   🚨 Ele abria como gaveta de baixo, com 249px de altura numa tela de 844px. Ao focar o
   campo, o teclado subia POR CIMA dele — e o proprietario relatou exatamente isso: "o card
   abre embaixo e o teclado fica em cima". A issue #2 pede tela/overlay de altura total.

   🚨 A altura usa `--tela-util`, que o JS mantem igual ao `visualViewport` — a area que
   SOBRA depois do teclado. `100vh` e `dvh` nao bastam no iOS: la o teclado NAO encolhe o
   layout viewport, entao a gaveta continuaria do tamanho da tela inteira, com metade dela
   escondida atras do teclado. */
.folha[data-modo="assistente"] {
  top: 0;
  height: var(--tela-util, 100dvh);
  max-height: var(--tela-util, 100dvh);
  border-radius: 0;
}
.folha[data-modo="assistente"] .folha-alca { display: none; }
/* 🚨 O corpo e quem rola, e ele tem altura propria — senao o conteudo empurra as acoes para
   fora e o botao de continuar fica inalcancavel justamente com o teclado aberto. */
.folha[data-modo="assistente"] .folha-corpo { flex: 1 1 auto; min-height: 0; }
.folha-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px 10px; border-bottom: 1px solid var(--neutro-2);
}
.folha-topo h2 { font-size: 16px; min-width: 0; overflow-wrap: anywhere; flex: 1 1 auto; }
/* Mesmo alvo de 44px do fechar, do outro lado do titulo — o polegar direito fecha, o
   esquerdo volta, e nenhum dos dois precisa mirar. */
.folha-voltar {
  width: 44px; height: 44px; display: grid; place-items: center;
  margin-left: -10px; flex: 0 0 auto;
  color: var(--texto-1); background: transparent; border: 0; border-radius: 50%;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.folha-voltar svg { width: 22px; height: 22px; }
.folha-voltar:active { background: var(--neutro-1); }
.folha-voltar:focus-visible { outline: 2px solid var(--vermelho); outline-offset: -3px; }
.folha-voltar[hidden] { display: none; }
.folha-fechar { width: 44px; height: 44px; display: grid; place-items: center; color: var(--grafite-50); flex: 0 0 auto; }
.folha-fechar svg { width: 17px; height: 17px; fill: currentColor; }
.folha-corpo { padding: 14px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Editor de quantidade: alvo grande, numero grande, confirmacao sempre visivel. */
.qtd-editor { display: flex; align-items: center; gap: 10px; }
.qtd-botao {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: var(--r);
  background: var(--neutro-1); border: 1px solid var(--neutro-2);
  font-size: 23px; font-weight: 700; display: grid; place-items: center;
}
.qtd-campo {
  flex: 1 1 auto; min-width: 0; height: 56px; text-align: center;
  font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums;
  border: 1px solid var(--neutro-3); border-radius: var(--r);
}
.qtd-rapidos { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
/* 44px e o piso: a auditoria reprovou estes botoes a 42px. Sao alvos secundarios, mas
   alvo secundario tambem e tocado com o polegar em pe no corredor da feira. */
.qtd-rapidos .btn { min-height: 44px; padding: 0 13px; font-size: 14px; }

.simulacao { margin-top: 14px; background: var(--neutro-1); border-radius: var(--r); padding: 12px; }

/* A acao de confirmar fica colada no fim do corpo da folha, sempre alcancavel. */
.folha-acao { margin-top: 16px; display: grid; gap: 8px; }

/* ───────────────────────────── estados ───────────────────────────── */
.vazio, .carregando, .erro-bloco {
  padding: 34px 18px; text-align: center; color: var(--grafite-50); font-size: 14px;
}
/* 🚨 Discreto de proposito: o Caps Lock nao e erro, e um estado. Pintar de vermelho faria a
   pessoa achar que ja errou antes de tentar. */
.aviso-caps {
  margin: 6px 0 0; font-size: 12.5px; font-weight: 600;
  color: var(--ambar-texto);
}
.erro-bloco { color: var(--vermelho-tinta); }
.esqueleto { background: var(--branco); border: 1px solid var(--neutro-2); border-radius: var(--r); padding: 13px; }
.esqueleto + .esqueleto { margin-top: 8px; }
.esqueleto-linha { height: 11px; border-radius: 2px; background: var(--neutro-2); margin-bottom: 8px; }
.esqueleto-linha:last-child { margin-bottom: 0; width: 55%; }

.frescor {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 4px; font-size: 11px; color: var(--grafite-50);
}

/* ═══════════════════════════ TELAS MAIORES ═══════════════════════════
   O app e mobile-first e continua sendo: o uso real e de pe no pavilhao, com uma mao.
   O que muda no PC nao e a natureza do produto — e o aproveitamento da tela.

   🚨 TUDO daqui para baixo vive dentro de `min-width`. Nenhuma regra desta secao alcanca o
   celular: o desenho de 360px sai desta folha exatamente como estava.

   Tres degraus, cada um resolvendo um problema medido:
     620px  tablet em pe    — limita a linha de leitura e abre os KPIs em 4
     900px  tablet deitado  — a coluna cresce e os cartoes viram duas colunas
    1100px  PC              — a barra inferior vira COLUNA LATERAL
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 620px: tablet em pe ────────────────────────────────────────────────── */
@media (min-width: 620px) {
  .conteudo { max-width: 660px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
  .busca-caixa { max-width: 660px; margin-left: auto; margin-right: auto; }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .navbar > * { max-width: 160px; margin: 0 auto; }
  .topo { padding-left: 20px; padding-right: 20px; }
  .folha { left: 50%; transform: translateX(-50%); width: min(660px, 100%); border-radius: 12px 12px 0 0; }
}

/* ── 900px: a coluna cresce, e os cartoes param de ser uma fila unica ───── */
@media (min-width: 900px) {
  .conteudo { max-width: 900px; }
  .busca-caixa { max-width: 900px; }
  /* 🚨 Cartao de pedido e de produto em DUAS colunas. Um por linha numa tela de 900px
     deixa dois tercos da largura vazios e obriga a rolar por 27 pre-pedidos. */
  .lista-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .folha { width: min(720px, 100%); }
}

/* ── 1100px: PC. A barra inferior vira coluna lateral ───────────────────── */
@media (min-width: 1100px) {
  /* Barra fixa embaixo num monitor de 27" fica a meio metro de onde o olho esta, e o
     mouse tem de atravessar a tela inteira para trocar de aba. Vira coluna. */
  .navbar {
    top: var(--topo-altura); bottom: 0; right: auto;
    width: var(--lateral, 232px);
    grid-template-columns: 1fr;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 2px;
    padding: 14px 12px;
    border-top: 0; border-right: 1px solid var(--neutro-2);
    box-shadow: none;
    overflow-y: auto;
  }
  .nav-item {
    flex-direction: row; justify-content: flex-start; gap: 12px;
    min-height: 46px; padding: 0 12px;
    border-radius: 8px;
    font-size: 14px; font-weight: 600; letter-spacing: 0;
  }
  .nav-item svg { width: 21px; height: 21px; }
  .nav-item span { max-width: none; }
  /* O traco vermelho do topo vira barra a esquerda: a leitura e horizontal agora. */
  .nav-item[aria-current="page"] {
    background: var(--vermelho-fundo);
  }
  .nav-item[aria-current="page"]::before {
    top: 8px; bottom: 8px; left: 0; right: auto;
    width: 3px; height: auto; border-radius: 0 3px 3px 0;
  }
  .nav-item[aria-current="page"] svg {
    background: none; border-radius: 0; width: 21px; height: 21px; padding: 0;
  }
  .nav-badge {
    position: static; margin-left: auto;
    top: auto; right: auto;
  }

  /* O conteudo sai de baixo da barra e passa a conviver ao lado dela. */
  .conteudo {
    margin-left: var(--lateral, 232px);
    max-width: 1080px;
    margin-right: auto;
    /* Sem barra embaixo, o respiro inferior de 84px vira desperdicio. */
    padding: 22px 28px 40px;
  }
  .busca-caixa { max-width: 1080px; margin-left: auto; margin-right: auto; }
  .topo { padding-left: 24px; padding-right: 24px; }

  /* A folha continua sendo folha, mas centrada e com cara de dialogo. */
  .folha {
    left: calc(50% + (var(--lateral, 232px) / 2));
    width: min(760px, calc(100% - var(--lateral, 232px) - 40px));
    max-height: 86vh;
    border-radius: 12px;
    bottom: 24px;
  }

  /* 🚨 A LINHA DE LEITURA PARA DE CRESCER, mesmo que o cartao cresça.
     Medido: num cartao de 900px a frase de explicacao chega a ~130 caracteres. Acima de
     ~110 o olho perde o inicio da linha seguinte e a releitura comeca — e justamente essas
     frases sao as que explicam POR QUE o sistema esta recomendando alguma coisa.
     O cartao continua largo (os numeros usam a largura); so o texto corrido e contido. */
  .motivo, .kpi-nota, .estado-texto, .anot-sub, .drill-conta,
  .ajuda-texto, .fator-explicacao, .mov-vazio, .login-sub {
    max-width: 68ch;
  }

  /* Blocos densos ganham ar; numeros grandes ficam maiores porque a distancia de leitura
     no PC e maior que a do celular na mao. */
  .kpi-valor { font-size: 24px; }
  .bloco { margin-bottom: 18px; }
  .gauges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── 1500px: monitor grande. A coluna de leitura NAO cresce mais ────────── */
@media (min-width: 1500px) {
  /* 🚨 Parar de crescer e decisao, nao esquecimento: linha de texto acima de ~110
     caracteres cansa a leitura, e o olho perde o inicio da linha seguinte. O que sobra
     vira margem, nao texto esticado. */
  .conteudo { max-width: 1240px; }
  .busca-caixa { max-width: 1240px; }
  .lista-duas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: no-preference) {
  .folha { animation: sobe .18s ease-out; }
  @keyframes sobe { from { transform: translateY(16px); } to { transform: none; } }
  @media (min-width: 620px) {
    .folha { animation: none; }
  }
}

/* ───────────────────────────── compromissos ─────────────────────────────
   Dois campos lado a lado SO quando os dois continuam confortaveis: valor e percentual
   sao curtos e numericos. Abaixo de 380px voltam a empilhar. */
.entrada-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
@media (max-width: 379px) { .entrada-dupla { grid-template-columns: 1fr; } }

.folha-corpo select { width: 100%; }

/* Busca dentro do seletor de fabricante / principio ativo (Carlos, 16/09): 788 fabricantes nao
   se acham rolando. Fonte de 16px para o iOS nao dar zoom sozinho; 44px de alvo; e colado ao
   seletor que ele filtra, para ficar claro que os dois sao uma coisa so. */
.seletor-busca {
  display: block; width: 100%; min-height: 44px; margin: 0 0 6px; padding: 0 12px;
  border: 1px solid var(--neutro-3); border-radius: 4px;
  background: var(--branco); font-size: 16px;
}

/* ───────────────────────────── QR do link do representante ─────────────────────────────
   Fundo branco SEMPRE, mesmo que o cartao ao redor mude: leitor de QR precisa de contraste
   alto, e um QR escuro sobre fundo escuro simplesmente nao le. */
.qr-bloco {
  margin-top: 12px; padding: 12px;
  background: #fff; border: 1px solid var(--neutro-2); border-radius: var(--r);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.qr-bloco .qr { width: 180px; height: 180px; display: block; }
.qr-bloco.grande .qr { width: min(78vw, 320px); height: min(78vw, 320px); }
.qr-dica { margin: 0; font-size: 11.5px; color: var(--grafite-50); text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA ESCURO
   Um lugar so: redefine o PAPEL de cada cor. As regras acima nao mudam.

   🚨 O que NAO inverte: o topo e o login (grafite da marca), o vermelho da marca e o
   fundo branco do QR — leitor de celular precisa de preto sobre branco.

   "Automatico" e a ausencia de escolha: sem `data-tema`, ou com `automatico`, quem manda
   e o aparelho. `data-tema="claro"` fica de fora do media query de proposito — quem pediu
   claro continua no claro mesmo com o celular no modo escuro.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  html:not([data-tema="claro"]) {
    --fundo: #0E0F12;
    --superficie: #17191E;
    --superficie-2: #1C1F25;
    --texto: #ECEDF0;
    --texto-2: #B2B5BD;
    --texto-3: #8A8D95;
    --borda: #282B32;
    --borda-forte: #383C44;
    --contraste: #ECEDF0;
    --contraste-texto: #121316;
    --verde-fundo: #10271C;
    --ambar-fundo: #2A1F10;
    --vermelho-fundo: #2B1416;
    --verde-tinta: #48C98B;
    --ambar-tinta: #E2A64C;
    --vermelho-tinta: #FF8E92;
    --ambar-texto: #E2A64C;
    --sombra-cartao: 0 1px 2px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
html[data-tema="escuro"] {
  --fundo: #0E0F12;
  --superficie: #17191E;
  --superficie-2: #1C1F25;
  --texto: #ECEDF0;
  --texto-2: #B2B5BD;
  --texto-3: #8A8D95;
  --borda: #282B32;
  --borda-forte: #383C44;
  --contraste: #ECEDF0;
  --contraste-texto: #121316;
  --verde-fundo: #10271C;
  --ambar-fundo: #2A1F10;
  --vermelho-fundo: #2B1416;
  --verde-tinta: #48C98B;
  --ambar-tinta: #E2A64C;
  --vermelho-tinta: #FF8E92;
  --ambar-texto: #E2A64C;
  --sombra-cartao: 0 1px 2px rgba(0,0,0,.5);
  color-scheme: dark;
}
body { background: var(--fundo); }

/* ───────────────────────────── densidade compacta ─────────────────────────────
   Quem passa o dia no app pediu mais linha na tela. Encolhe respiro, NUNCA alvo de toque:
   botao e item de menu continuam com 48px. */
html[data-densidade="compacta"] {
  --r: 3px;
}
html[data-densidade="compacta"] body { font-size: 14px; }
html[data-densidade="compacta"] .cartao,
html[data-densidade="compacta"] .item-cartao,
html[data-densidade="compacta"] .ficha-topo { padding: 9px 10px; }
html[data-densidade="compacta"] .kpi { padding: 9px; }
html[data-densidade="compacta"] .linha { padding: 5px 0; }
html[data-densidade="compacta"] .conteudo { padding: 10px 12px calc(var(--nav-altura) + 14px); }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTA — folha de conta, perfil e preferencias
   No celular e a folha de baixo de sempre. No desktop vira gaveta encostada na direita,
   perto do avatar que a abriu, em vez de uma folha larga no meio da tela.
   ═══════════════════════════════════════════════════════════════════════════ */
.conta-cabecalho {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 13px; border-bottom: 1px solid var(--neutro-2);
}
.conta-avatar {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  background: var(--contraste); color: var(--contraste-texto);
  display: grid; place-items: center; font-size: 15px; font-weight: 800; letter-spacing: .02em;
}
.conta-quem { min-width: 0; flex: 1 1 auto; }
.conta-nome { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.conta-papel { font-size: 12.5px; color: var(--grafite-50); }
.conta-sessao {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 3px;
  font-size: 11px; font-weight: 650; color: var(--verde-tinta);
}
.conta-sessao::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--verde-tinta);
}

/* Menu: linhas de 48px, divisor discreto, sem cartao solto. */
.conta-menu { display: flex; flex-direction: column; margin: 6px -14px 0; }
.conta-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 50px; padding: 0 14px; text-align: left;
  font-size: 15px; font-weight: 550; color: var(--grafite);
  border-bottom: 1px solid var(--neutro-1);
}
.conta-item:active { background: var(--neutro-1); }
.conta-item svg { flex: 0 0 auto; width: 19px; height: 19px; fill: var(--grafite-50); }
.conta-item span { flex: 1 1 auto; min-width: 0; }
.conta-item em { font-style: normal; font-size: 12.5px; color: var(--grafite-50); }
.conta-item .seta { width: 14px; height: 14px; fill: var(--neutro-3); }
.conta-item[data-destrutivo="1"] { color: var(--vermelho-tinta); margin-top: 10px; border-top: 1px solid var(--neutro-2); }
.conta-item[data-destrutivo="1"] svg { fill: var(--vermelho-tinta); }

.conta-rodape {
  margin: 14px -14px -14px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: var(--neutro-1); border-top: 1px solid var(--neutro-2);
  font-size: 11px; line-height: 1.5; color: var(--grafite-50); text-align: center;
}

/* Escolha em segmentos: tema e densidade. Rotulo visivel, sem depender de cor para dizer
   qual esta ativo — o ativo tem contorno e peso. */
.escolha { display: grid; grid-auto-flow: column; gap: 8px; margin-top: 8px; }
.escolha button {
  min-height: 48px; padding: 0 6px; border-radius: var(--r);
  border: 1px solid var(--neutro-2); background: var(--neutro-1);
  font-size: 13.5px; font-weight: 600; color: var(--grafite-50);
}
.escolha button[aria-pressed="true"] {
  background: var(--branco); border-color: var(--grafite); color: var(--grafite); font-weight: 750;
}
.escolha button:disabled { opacity: .55; }

/* Chave liga/desliga de aviso. Sem biblioteca: caixa de selecao grande e rotulo clicavel. */
.chave {
  display: flex; align-items: center; gap: 12px; min-height: 50px;
  padding: 4px 0; border-bottom: 1px solid var(--neutro-1); cursor: pointer;
}
.chave input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--vermelho); }
.chave-texto { min-width: 0; font-size: 14.5px; }
.chave-dica { display: block; font-size: 11.5px; color: var(--grafite-50); }

.conta-campo { padding: 9px 0; border-bottom: 1px solid var(--neutro-1); }
.conta-campo dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grafite-50); }
.conta-campo dd { margin: 2px 0 0; font-size: 14.5px; overflow-wrap: anywhere; }
.conta-campo dd.ausente { color: var(--grafite-50); font-style: italic; }
.conta-gerenciado {
  margin-top: 12px; font-size: 12px; line-height: 1.45; color: var(--grafite-50);
}

@media (min-width: 720px) {
  /* Gaveta lateral: nasce colada na direita, altura inteira, largura de leitura. */
  .folha[data-modo="conta"] {
    left: auto; right: 0; top: 0; bottom: 0;
    width: min(400px, 100%); max-height: 100dvh;
    transform: none; border-radius: 0;
    border-left: 1px solid var(--neutro-2);
  }
  .folha[data-modo="conta"] .folha-alca { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ESTADOS — vazio, erro, offline, dado velho e permissao negada
   Um desenho so para os cinco. Cada tela que precisa deles chama o mesmo componente,
   em vez de inventar a sua propria caixa cinza.
   ═══════════════════════════════════════════════════════════════════════════ */
.estado {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 26px 18px; text-align: center;
  background: var(--branco); border: 1px solid var(--neutro-2); border-radius: var(--r);
}
.estado svg { width: 30px; height: 30px; fill: var(--neutro-3); }
.estado-titulo { font-size: 15px; font-weight: 700; }
.estado-texto { margin: 0; font-size: 13px; line-height: 1.5; color: var(--grafite-50); max-width: 34ch; }
.estado .btn { margin-top: 4px; }
.estado[data-tom="erro"] { border-color: var(--vermelho); }
.estado[data-tom="erro"] svg { fill: var(--vermelho-tinta); }
.estado[data-tom="offline"] svg, .estado[data-tom="velho"] svg { fill: var(--ambar); }
.estado[data-tom="bloqueado"] svg { fill: var(--grafite-50); }

/* Faixa de dado velho: fica colada no bloco que ela descreve, nunca no topo generico. */
.faixa-velho {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 8px; padding: 7px 10px; border-radius: var(--r);
  background: var(--ambar-fundo); color: var(--ambar-texto);
  font-size: 12px; font-weight: 600; line-height: 1.35;
}
.faixa-velho svg { width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   PAINEL — andamento, fila de prioridade e drill-down
   ═══════════════════════════════════════════════════════════════════════════ */
.kpi[data-tom="bom"] .kpi-valor { color: var(--verde-tinta); }
.kpi[data-tom="ruim"] .kpi-valor { color: var(--vermelho-tinta); }

/* Barra de andamento: cada pedaco e uma situacao real. O que sobra (cinza) e pendente. */
.barra-progresso {
  display: flex; height: 8px; margin-bottom: 12px;
  background: var(--neutro-2); border-radius: 4px; overflow: hidden;
}
.barra-parte { display: block; height: 100%; }
.barra-parte[data-tipo="finalizado"] { background: var(--verde); }
.barra-parte[data-tipo="negociando"] { background: #2F6FD0; }
.barra-parte[data-tipo="aguardando"] { background: #7A5BD0; }
.barra-parte[data-tipo="voltar"] { background: var(--ambar); }

.andamento { display: flex; flex-direction: column; }
.andamento-linha {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 0; border-bottom: 1px solid var(--neutro-1);
}
.andamento-linha:last-child { border-bottom: 0; }
.andamento-ponto { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--neutro-3); }
.andamento-ponto[data-tipo="negociando"] { background: #2F6FD0; }
.andamento-ponto[data-tipo="aguardando"] { background: #7A5BD0; }
.andamento-ponto[data-tipo="voltar"] { background: var(--ambar); }
.andamento-ponto[data-tipo="finalizado"] { background: var(--verde); }
.andamento-rotulo { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.andamento-num { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Fila: o MOTIVO vem antes dos numeros — e ele que decide o proximo passo. */
.cartao-fila { border-left: 3px solid var(--neutro-3); }
.cartao-fila:has(.selo[data-tom="acao"]) { border-left-color: var(--vermelho); }
.cartao-fila:has(.selo[data-tom="alerta"]) { border-left-color: var(--ambar); }
.fila-motivos { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 7px; }
.fila-motivos .selo { white-space: normal; text-align: left; }

/* Drill-down: a conta em portugues antes da lista. */
.drill-conta {
  margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r);
  background: var(--neutro-1); border-left: 3px solid var(--neutro-3);
  font-size: 12.5px; line-height: 1.5; color: var(--grafite-70);
}
.drill-titulo { margin: 16px 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--grafite-50); }
.linha-clicavel {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 48px; padding: 7px 0; text-align: left;
  border-bottom: 1px solid var(--neutro-1);
}
.linha-clicavel:active { background: var(--neutro-1); }
.linha-clicavel .linha-valor { font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   PAINEL EXECUTIVO — velocimetros, barras, distribuicao e listas
   Tudo desenhado aqui, em SVG e CSS: nenhuma biblioteca de grafico. No pavilhao a
   internet cai, e grafico que depende de CDN vira retangulo branco na hora errada.
   ═══════════════════════════════════════════════════════════════════════════ */
.exec-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }

/* 🚨 Esta REDEFINE `.segmentos` e `.segmento` para o app INTEIRO, nao so para o executivo:
   e o mesmo nome de classe, e vem depois na folha. Descoberto medindo as abas de
   Compromissos, que apareciam com 40px — dois terrivelmente perto de 44 e, por isso,
   invisiveis na revisao de olho. Todo controle segmentado do sistema (filtros do pedido,
   3M/6M/12M da ficha, Operação/Executivo) estava com alvo abaixo do minimo.
   O que este bloco realmente queria era a ROLAGEM horizontal quando ha muitas abas —
   o `grid` de cima reparte a largura e espreme rotulo. A altura volta para 44. */
.segmentos {
  display: flex; gap: 4px; padding: 3px; border-radius: var(--r);
  background: var(--neutro-2); overflow-x: auto; flex: 1 1 auto;
  scrollbar-width: none;
}
.segmentos::-webkit-scrollbar { display: none; }
/* Ha filtro escondido a direita: a ultima faixa esmaece (so quando ha mesmo o que rolar). */
.segmentos[data-mais="1"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.nao-feira-motivo { margin: 0 0 8px; padding: 7px 10px; border-radius: 6px; font-size: 13px; font-weight: 650;
  background: var(--neutro-1); color: var(--texto-2); border-left: 3px solid var(--neutro-3); }
.segmento {
  flex: 0 0 auto; min-height: 44px; padding: 0 12px; border-radius: 3px;
  font-size: 13px; font-weight: 650; color: var(--grafite-50); white-space: nowrap;
}
.btn-filtro { min-height: 46px; padding: 0 12px; font-size: 13px; flex: 0 0 auto; gap: 6px; }
.btn-filtro svg { width: 15px; height: 15px; fill: currentColor; }
.exec-filtro-ativo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
/* 🚨 O ALVO E 44px; o DESENHO continua pequeno. Um link de acao com 28px de altura erra o
   dedo — e "A → Z" na Buscar reordena a lista inteira debaixo da pessoa. Aumentar a fonte ou
   o padding empurraria o layout de toda tela densa que usa este botao (as linhas de
   configuracao, por exemplo), entao o alvo cresce por fora, com uma area invisivel centrada:
   a mesma tecnica ja usada no (?) do portal. */
.btn-texto {
  position: relative; font-size: 12.5px; font-weight: 650;
  color: var(--vermelho-tinta); text-decoration: underline; padding: 6px;
}
.btn-texto::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 100%; min-width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

/* ── velocimetro ───────────────────────────────────────────────────────────── */
.gauges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 379px) { .gauges { grid-template-columns: 1fr; } }
.gauge-caixa {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 10px 13px; text-align: center;
  background: var(--branco); border: 1px solid var(--neutro-2); border-radius: var(--r);
  box-shadow: var(--sombra-cartao); min-width: 0; width: 100%;
}
.gauge-rotulo {
  display: flex; align-items: center; gap: 5px; justify-content: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--grafite-50);
}
.gauge { width: 100%; max-width: 190px; height: auto; display: block; }
.gauge-faixa { fill: none; stroke-width: 13; stroke-linecap: butt; opacity: .9; }
.gauge-faixa.neutro { stroke: var(--neutro-3); }
.gauge-faixa.atencao { stroke: var(--ambar); }
.gauge-faixa.bom { stroke: var(--verde); }
.gauge-faixa.otimo { stroke: #2F6FD0; }
.gauge-faixa.critico { stroke: var(--vermelho); }
.gauge-ponteiro { stroke: var(--grafite); stroke-width: 3.5; stroke-linecap: round; }
.gauge-eixo { fill: var(--grafite); }
.gauge-valor {
  font-family: var(--fonte-titulo); font-size: 30px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gauge-valor small { font-size: 12px; font-weight: 600; color: var(--grafite-50); margin-left: 3px; }
.gauge-texto { margin: 2px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--grafite-50); }
.gauge-sem { margin: 14px 0; font-size: 12.5px; line-height: 1.45; color: var(--grafite-50); }

/* ── barras ────────────────────────────────────────────────────────────────── */
.barras { display: flex; flex-direction: column; gap: 9px; }
.barra-linha { display: block; width: 100%; text-align: left; padding: 2px 0; min-width: 0; }
.barra-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.barra-rotulo { font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-valor { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.barra-trilho { height: 9px; border-radius: 2px; background: var(--neutro-2); overflow: hidden; }
.barra-dupla { display: flex; flex-direction: column; gap: 3px; }
.barra-cheia { display: block; height: 100%; background: var(--grafite-70); }
/* 🚨 Regra de movimento: COMPRA/entrada e VERDE, VENDA/saida e VERMELHO. Vale aqui, no
   Produto 360 e em qualquer historico — cinza nunca representa serie principal. */
.barra-cheia[data-cor="compra"] { background: var(--verde); }
.barra-cheia[data-cor="venda"] { background: var(--vermelho); }
.legenda-inline { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 11.5px; color: var(--grafite-50); }
.legenda-inline .legenda-cor { width: 10px; height: 10px; border-radius: 2px; }
.legenda-cor[data-cor="compra"] { background: var(--verde); }
.legenda-cor[data-cor="venda"] { background: var(--vermelho); }

/* ── distribuicao empilhada ────────────────────────────────────────────────── */
.empilhada { display: flex; height: 14px; border-radius: 3px; overflow: hidden; background: var(--neutro-2); }
.empilhada-parte { display: block; height: 100%; }
.empilhada-parte[data-tom="acao"] { background: var(--vermelho); }
.empilhada-parte[data-tom="oportunidade"], .empilhada-parte[data-tom="ok"] { background: var(--verde); }
.empilhada-parte[data-tom="alerta"] { background: var(--ambar); }
.empilhada-parte[data-tom="neutro"] { background: var(--neutro-3); }
.legenda { display: flex; flex-direction: column; margin-top: 10px; }
.legenda-item {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px;
  padding: 4px 0; text-align: left; border-bottom: 1px solid var(--neutro-1);
}
.legenda-item:last-child { border-bottom: 0; }
.legenda-cor { width: 11px; height: 11px; border-radius: 2px; flex: 0 0 auto; background: var(--neutro-3); }
.legenda-cor[data-tom="acao"] { background: var(--vermelho); }
.legenda-cor[data-tom="oportunidade"], .legenda-cor[data-tom="ok"] { background: var(--verde); }
.legenda-cor[data-tom="alerta"] { background: var(--ambar); }
.legenda-rotulo { flex: 1 1 auto; min-width: 0; font-size: 13.5px; }
.legenda-num { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── alertas executivos e listas ───────────────────────────────────────────── */
.alerta-exec { display: block; width: 100%; text-align: left; margin-bottom: 8px; }
.alerta-exec-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.alerta-exec-num { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700; }
.alerta-exec-motivo { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--grafite-70); }
.alerta-exec-acao { margin: 6px 0 0; font-size: 12.5px; font-weight: 650; color: var(--vermelho-tinta); }
.item-motivo { margin: 5px 0 0; font-size: 12px; line-height: 1.4; color: var(--grafite-50); }
.item-destaque { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
.item-quando { flex: 0 0 auto; font-size: 11.5px; color: var(--grafite-50); }
.alerta-num { color: var(--vermelho-tinta); font-weight: 650; }

/* ── fatores do score ──────────────────────────────────────────────────────── */
.fator { padding: 10px 0; border-bottom: 1px solid var(--neutro-1); }
.fator-topo { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.fator-rotulo { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 650; }
.fator-peso { font-size: 11px; color: var(--grafite-50); }
.fator-valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.fator-explicacao { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--grafite-50); }

/* ── ajuda contextual (?) ──────────────────────────────────────────────────── */
.ajuda {
  position: relative;
  width: 18px; height: 18px; flex: 0 0 auto;
  display: inline-grid; place-items: center; vertical-align: middle;
  border: 1px solid var(--neutro-3); border-radius: 50%;
  font-size: 10.5px; font-weight: 700; line-height: 1; color: var(--grafite-50);
}
.ajuda:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
/* Alvo de toque real de 44px sem inchar o desenho: a area invisivel envolve o circulo. */
.ajuda::after { content: ""; position: absolute; width: 44px; height: 44px; transform: translate(-13px, -13px); }
.ajuda-texto { margin: 0 0 12px; font-size: 14px; line-height: 1.55; }
.ajuda-conta {
  padding: 11px 12px; border-radius: var(--r);
  background: var(--neutro-1); border-left: 3px solid var(--grafite-50);
}
.ajuda-conta-rotulo {
  display: block; margin-bottom: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--grafite-50);
}
.ajuda-conta code { font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }

@media (min-width: 720px) {
  /* Desktop executivo: aproveita a largura sem virar planilha. */
  .gauges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Seletor de painel (Operação | Executivo). O Painel e o hub de dashboards. */
.seletor-painel { margin-bottom: 12px; }
.seletor-painel .segmento { flex: 1 1 0; justify-content: center; text-align: center; }
.segmento[aria-selected="true"] {
  background: var(--branco); color: var(--grafite); font-weight: 750;
  box-shadow: var(--sombra-cartao);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARTAO DE PRODUTO — a mini ficha de decisao, igual na Buscar, no Catalogo e no pedido
   (docs/SEARCH-CARD-INSTANT-INTELLIGENCE.md).

   🚨 REGRA DE COR DO PROJETO, sem excecao:
       COMPRA / ENTRADA = VERDE      VENDA / SAIDA = VERMELHO
   E a cor nunca e a unica informacao: cada bloco carrega o rotulo escrito por extenso,
   porque daltonismo e sol batendo na tela do pavilhao apagam cor, nao texto.
   ═══════════════════════════════════════════════════════════════════════════ */
.cartao-produto { display: block; width: 100%; text-align: left; }
.produto-nome {
  font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--grafite);
  overflow-wrap: anywhere;
}
.produto-ident {
  margin-top: 3px; font-size: 12px; color: var(--grafite-50);
  overflow-wrap: anywhere;
}

/* Linha de decisao: estoque e ultimo custo, os dois numeros estruturais. Neutros de
   proposito — verde e vermelho aqui sao do MOVIMENTO, e gastar cor neles roubaria a
   leitura que importa. */
.decisao-linha {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  margin-top: 8px;
}
.dec { display: inline-flex; align-items: baseline; gap: 5px; font-size: 13px; }
.dec-rot { font-size: 11.5px; color: var(--grafite-50); }
.dec b { font-size: 14.5px; font-weight: 700; color: var(--grafite); }
.dec-ausente b { font-size: 12.5px; font-weight: 600; color: var(--grafite-50); }
.dec-frescor { font-size: 11px; color: var(--grafite-50); }

/* Venda e compra. Em 360px empilham; a partir de 380px ficam lado a lado. */
.movs { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 9px; }
@media (min-width: 380px) { .movs { grid-template-columns: 1fr 1fr; } }

.mov { padding: 7px 9px; border-radius: var(--r); background: var(--neutro-1); }
.mov-rotulo {
  font-size: 10.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase;
}
.mov[data-tom="venda"] { background: var(--vermelho-fundo); }
.mov[data-tom="venda"] .mov-rotulo { color: var(--vermelho-tinta); }
.mov[data-tom="venda"] .mov-j-val { color: var(--vermelho-tinta); }
.mov[data-tom="compra"] { background: var(--verde-fundo); }
.mov[data-tom="compra"] .mov-rotulo { color: var(--verde-tinta); }
.mov[data-tom="compra"] .mov-j-val { color: var(--verde-tinta); }

/* ── SINAL DE COMPRA ────────────────────────────────────────────────────────
   docs/SEARCH-CARD-BUY-SIGNAL.md. A seta que o comprador le antes de abrir a ficha.

   🚨 SETA + TEXTO, SEMPRE. Cor sozinha nao informa: daltonismo apaga a diferenca entre o
   verde e o vermelho, e o sol do pavilhao lava a tela inteira. O texto nao apaga.

   🚨 A cor obedece a regra do projeto — COMPRA/ENTRADA = VERDE, e por isso "precisa comprar"
   e verde, nao vermelho de urgencia. Um mesmo conceito com duas cores no mesmo app e como o
   comprador aprende a nao confiar em nenhuma das duas.

   Compacto de proposito: uma linha de 11px que nao empurra o nome do produto nem aperta os
   blocos de venda e compra, que sao os numeros que decidem. */
.sinal-compra {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 6px 0 0; padding: 3px 8px 3px 6px;
  border-radius: 999px;
  font-size: 11px; font-weight: 750; letter-spacing: .04em;
  line-height: 1.25;
  max-width: 100%;
}
.sinal-seta { font-size: 13px; line-height: 1; font-weight: 800; }
.sinal-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 🚨 TINTA PROPRIA, mais escura que a do resto do app. O `--verde-tinta` padrao sobre o
   `--verde-fundo` da 3,89:1, abaixo do minimo de 4,5:1 da WCAG para texto pequeno — e isto
   foi MEDIDO, nao suposto: a olho nu o selo parecia perfeito nos cinco tamanhos. Texto de
   11px lavado pelo sol do pavilhao e texto que ninguem le. No tema escuro a tinta clara ja
   passa folgado, entao ela nao muda. */
.sinal-compra[data-direcao="sobe"] { background: var(--verde-fundo); color: #0A6538; }
.sinal-compra[data-direcao="desce"] { background: var(--vermelho-fundo); color: var(--vermelho-tinta); }
/* Neutro e cinza mesmo: "dados insuficientes" nao pode parecer nem bom nem ruim, senao vira
   uma quarta opiniao que o sistema nao tem. */
.sinal-compra[data-direcao="neutro"] { background: var(--neutro-1); color: #4A5162; }

@media (prefers-color-scheme: dark) {
  html:not([data-tema="claro"]) .sinal-compra[data-direcao="sobe"] { color: var(--verde-tinta); }
  html:not([data-tema="claro"]) .sinal-compra[data-direcao="neutro"] { color: var(--texto-2); }
}
html[data-tema="escuro"] .sinal-compra[data-direcao="sobe"] { color: var(--verde-tinta); }
html[data-tema="escuro"] .sinal-compra[data-direcao="neutro"] { color: var(--texto-2); }

/* No cartao clicavel o cartao INTEIRO continua sendo o alvo do toque, entao o selo nao recebe
   evento nenhum. */
.cartao-produto .sinal-compra { pointer-events: none; align-self: flex-start; }

/* ── COR DO CARTAO PELO ESTOQUE × MEDIA 3M (Carlos, 16/09) ───────────────────────────────
   verde = estoque abaixo da media (COMPRAR SIM) · amarelo = igual · vermelho = acima.

   🚨 TINTA LEVE NO FUNDO + FAIXA FORTE NA BORDA ESQUERDA, e nao o cartao inteiro saturado: o
   cartao carrega nome, estoque, tres precos e seis medias, e tudo isso tem de continuar legivel
   no sol do pavilhao. A faixa e o que se ve de longe; o fundo confirma de perto.
   🚨 A faixa e `box-shadow inset`, nao `border-left`: o item do pre-pedido ja usa a borda
   esquerda para "alterado", e as duas informacoes nao podem se apagar.
   🚨 COR NUNCA SOZINHA: o selo escrito (PRECISA / NAO PRECISA COMPRAR) continua no topo.
   `color-mix` sobre `--superficie` faz a mesma regra servir no claro e no escuro. */
.cartao[data-cor], .item-cartao[data-cor] { --faixa-cor: transparent; }
.cartao[data-cor="verde"], .item-cartao[data-cor="verde"] {
  --faixa-cor: var(--verde);
  background: color-mix(in srgb, var(--verde-fundo) 70%, var(--superficie));
}
.cartao[data-cor="amarelo"], .item-cartao[data-cor="amarelo"] {
  --faixa-cor: var(--ambar);
  background: color-mix(in srgb, var(--ambar-fundo) 80%, var(--superficie));
}
.cartao[data-cor="vermelho"], .item-cartao[data-cor="vermelho"] {
  --faixa-cor: var(--vermelho);
  background: color-mix(in srgb, var(--vermelho-fundo) 70%, var(--superficie));
}
.cartao[data-cor], .item-cartao[data-cor] {
  box-shadow: inset 5px 0 0 var(--faixa-cor), var(--sombra-cartao);
  padding-left: 17px;
}
/* 🚨 CONTRASTE MEDIDO, nao estimado: o rotulo cinza pequeno dos precos (--texto-3) dava 4,13:1
   sobre o fundo vermelho claro — abaixo dos 4,5:1 da WCAG. Dentro de cartao colorido os
   rotulos cinzas sobem um tom (--texto-2), que passa nos tres fundos e nos dois temas. */
.cartao[data-cor] :is(.cref-rot, .dec-rot, .dec-frescor, .produto-ident, .mov-j-rot, .resultado-meta,
  .cref[data-ausente="1"] b, .dec-ausente b),
.item-cartao[data-cor] :is(.cref-rot, .dec-rot, .dec-frescor, .mov-j-rot, .item-dados,
  .cref[data-ausente="1"] b, .dec-ausente b) {
  color: var(--texto-2);
}
.cartao-escolha[data-cor][data-marcado="1"] {
  box-shadow: inset 5px 0 0 var(--faixa-cor), 0 0 0 1px var(--grafite);
}

/* ── TOPO DO CARTAO: nome a esquerda, decisao a direita (Carlos, 16/09) ─────────────────
   Antes o selo ocupava uma linha inteira embaixo do laboratorio.

   🚨 O SELO TEM TETO DE LARGURA e o texto dele QUEBRA em duas linhas ("NÃO PRECISA /
   COMPRAR") em vez de ser cortado com reticencias: "NÃO PRECISA COMP…" e ilegivel, e cortar
   o "NÃO" seria dizer o contrario. No telefone de 360px o teto deixa ~60% para o nome; no
   cartao largo o selo cabe numa linha so.
   🚨 O nome nunca e cortado: `min-width: 0` deixa ele quebrar linha dentro do espaco que
   sobra, em vez de empurrar o selo para fora do cartao. */
.produto-topo { display: flex; align-items: flex-start; gap: 8px; }
.produto-titulo { flex: 1 1 auto; min-width: 0; }
.produto-topo .sinal-compra {
  flex: 0 0 auto; margin: 1px 0 0;
  max-width: min(40%, 172px);
  border-radius: 10px;
}
.produto-topo .sinal-texto {
  white-space: normal; overflow: visible; text-overflow: clip;
  overflow-wrap: normal; word-break: normal; text-align: left;
}

@media (prefers-reduced-motion: no-preference) {
  .sinal-compra[data-direcao="sobe"] .sinal-seta { animation: sinal-sobe 2.4s ease-in-out 2; }
}
@keyframes sinal-sobe {
  0%, 70%, 100% { transform: translateY(0); }
  80% { transform: translateY(-2px); }
}

/* ── PENDENCIAS DO ITEM ─────────────────────────────────────────────────────
   Uma linha por motivo. A barra colorida a esquerda diz a gravidade sem depender de cor
   sozinha — o rotulo em negrito ja diz qual e o problema, e o texto diz o numero. */
.pendencias { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.pendencias li {
  font-size: 12px; line-height: 1.35; color: var(--texto-2);
  padding: 5px 8px 5px 9px; border-radius: var(--r);
  background: var(--neutro-1); border-left: 3px solid var(--neutro-2);
}
.pendencias li b { color: var(--texto-1); font-weight: 700; }
.pendencias li[data-tom="acao"] { background: var(--vermelho-fundo); border-left-color: var(--vermelho); }
.pendencias li[data-tom="acao"] b { color: var(--vermelho-tinta); }
.pendencias li[data-tom="alerta"] { background: var(--ambar-fundo); border-left-color: var(--ambar); }
.pendencias li[data-tom="alerta"] b { color: var(--ambar-texto); }

/* ── SUGESTAO DE SUBSTITUICAO ───────────────────────────────────────────────
   Os dois lados lado a lado no computador, empilhados no telefone. 🚨 Empilhar e o certo no
   estreito: duas colunas de 170px cortariam justamente o nome do produto, que e a primeira
   coisa que o comprador compara. */
.sugestao { margin-top: 8px; border-left: 3px solid var(--vermelho); }
.sugestao[data-estado="ACEITA"] { border-left-color: var(--verde); }
.sugestao[data-estado="RECUSADA"] { border-left-color: var(--neutro-2); }
.sug-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sug-lados { display: grid; gap: 8px; margin-top: 8px; }
@media (min-width: 620px) { .sug-lados { grid-template-columns: 1fr 1fr; } }
.sug-lado { padding: 8px 9px; border-radius: var(--r); background: var(--neutro-1); min-width: 0; }
.sug-rot {
  font-size: 10.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase;
  color: var(--texto-3);
}
.sug-nome { font-size: 13px; font-weight: 650; margin: 3px 0 6px; overflow-wrap: anywhere; }
.item-sugestao { margin-top: 10px; }
.item-sugestao-rot { display: block; font-size: 12.5px; font-weight: 650; }
.item-sugestao-linha { display: flex; gap: 8px; margin-top: 6px; }
.item-sugestao-linha .campo { flex: 1 1 auto; min-width: 0; }
.item-sugerido { margin-top: 8px; font-size: 12.5px; color: var(--texto-2); }

.mov-janelas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 4px; }
.mov-j { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.mov-j-rot { font-size: 10px; color: var(--grafite-50); }
/* Valor EXATO e sempre visivel: Carlos decide por numero, nao por desenho. */
.mov-j-val { font-size: 15px; font-weight: 700; line-height: 1.15; }
.mov-vazio { margin: 9px 0 0; font-size: 12px; color: var(--grafite-50); }

.produto-feira {
  margin-top: 8px; padding: 5px 8px; border-radius: var(--r);
  /* --ambar-texto, nao --ambar-tinta: a tinta dava 3,05:1 sobre o fundo ambar (medido em
     16/09 pelo auditor de cores). O texto escuro passa nos dois temas. */
  background: var(--ambar-fundo); color: var(--ambar-texto);
  font-size: 12px; font-weight: 600;
}

/* ─── TRES VISOES FINANCEIRAS do cartao do pre-pedido ─────────────────────────
   docs/PREORDER-CARD-THREE-FINANCIAL-VIEWS.md. Tres linhas compactas no celular, alinhadas
   pelo numero; no desktop, lado a lado.
   🚨 A COBERTURA fica colada no valor: sem ela, tres numeros empilhados parecem comparaveis
   e a diferenca causada por item sem cotacao passa por barganha. */
.visoes {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  margin-top: 9px; padding: 8px 10px;
  background: var(--neutro-1); border-radius: var(--r);
}
.visao {
  display: grid; grid-template-columns: minmax(0, auto) 1fr auto;
  align-items: baseline; gap: 8px;
}
.visao-rot { font-size: 11.5px; color: var(--grafite-50); white-space: nowrap; }
.visao-val {
  font-size: 14.5px; font-weight: 700; color: var(--grafite);
  text-align: right; font-variant-numeric: tabular-nums;
}
.visao-val i { font-size: 12px; font-weight: 500; font-style: normal; color: var(--grafite-50); }
.visao-cob { font-size: 10.5px; color: var(--grafite-50); white-space: nowrap; }
/* Cobertura incompleta e AVISO, nao detalhe: e o que impede a comparacao errada. */
.visao-cob.parcial { color: var(--ambar-tinta); font-weight: 700; }

.visoes-comp { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.visao-comp {
  padding: 2px 7px; border-radius: 10px;
  font-size: 11px; font-weight: 650;
  background: var(--neutro-2); color: var(--grafite-70);
}
/* COMPRA/ENTRADA mais barata = VERDE; mais cara = VERMELHO. Parcial fica neutro de
   proposito: nao se pinta de verde uma diferenca que veio de item faltando. */
.visao-comp[data-tom="bom"] { background: var(--verde-fundo); color: var(--verde-tinta); }
.visao-comp[data-tom="ruim"] { background: var(--vermelho-fundo); color: var(--vermelho-tinta); }

@media (min-width: 560px) {
  .visoes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .visao { grid-template-columns: 1fr; gap: 1px; }
  .visao-val { text-align: left; font-size: 16px; }
  .visoes-comp { grid-column: 1 / -1; }
}

/* ─── aprovacao por alcada ────────────────────────────────────────────────────
   🚨 A alcada AVISA e registra; nao trava. O bloco fica visivel e explicito, mas o botao de
   finalizar continua onde sempre esteve. */
.alcada { border-left: 3px solid var(--neutro-3); }
.alcada[data-tom="acao"] { border-left-color: var(--vermelho); background: var(--vermelho-fundo); }
.alcada[data-tom="alerta"] { border-left-color: var(--ambar); background: var(--ambar-fundo); }
.alcada[data-tom="ok"] { border-left-color: var(--verde); background: var(--verde-fundo); }
.alcada-topo { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
/* Um motivo por linha: quem aprova precisa poder discordar de UM sem discordar de todos. */
.alcada-motivos { margin: 0; padding-left: 18px; }
.alcada-motivos li { margin-bottom: 4px; font-size: 13.5px; line-height: 1.45; }
.alcada-motivos li:last-child { margin-bottom: 0; }

/* ═══ CARTAO DO ITEM COMO CENTRAL DE DECISAO ═══════════════════════════════════
   docs/PREORDER-PRODUCT-CARD-COMPACT-DECISION-LAYOUT.md
   As acoes subiram; o rodape virou inteligencia de compra. */

/* Acoes: duas dividindo a largura, e "Negociar" inteira embaixo — e a acao que mexe em
   dinheiro, e tem de ser a mais facil de acertar com o dedo. */
.item-acoes-topo { margin-top: 10px; }
.btn-negociar { margin-top: 6px; }

/* ── referencias de compra ─────────────────────────────────────────────────── */
.refs {
  margin-top: 10px; padding: 9px 11px;
  background: var(--neutro-1); border-radius: var(--r);
}
.refs-titulo {
  font-size: 10.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase;
  color: var(--grafite-50); margin-bottom: 6px;
}
.ref {
  display: grid; grid-template-columns: minmax(0, auto) 1fr;
  align-items: baseline; gap: 4px 10px;
  padding: 2px 0;
}
.ref-rot { font-size: 12px; color: var(--grafite-50); display: flex; align-items: center; gap: 4px; }
.ref-val {
  font-size: 14px; font-weight: 700; color: var(--grafite);
  text-align: right; font-variant-numeric: tabular-nums;
}
.ref-val i { font-size: 12px; font-weight: 500; font-style: normal; color: var(--grafite-50); }
/* O detalhe (distribuidora, frescor, representante) ocupa a linha inteira embaixo: ele
   qualifica o numero, nao disputa com ele. */
.ref-det { grid-column: 1 / -1; font-size: 11px; color: var(--grafite-50); margin-top: -2px; }
.ref-det:empty { display: none; }

.refs-frases { margin-top: 7px; display: flex; flex-direction: column; gap: 3px; }
.ref-frase { font-size: 12px; font-weight: 600; color: var(--grafite-50); }
/* COMPRA/ENTRADA mais barata = VERDE; mais cara = VERMELHO. E a frase JA diz o que houve:
   a cor confirma, nunca informa sozinha. */
.ref-frase[data-tom="bom"] { color: var(--verde-tinta); }
.ref-frase[data-tom="ruim"] { color: var(--vermelho-tinta); }

@media (min-width: 620px) {
  /* Com largura, as tres referencias ficam lado a lado e o cartao encurta ainda mais. */
  .refs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 14px; }
  .refs-titulo, .refs-frases { grid-column: 1 / -1; }
  .ref { grid-template-columns: 1fr; gap: 0; }
  .ref-val { text-align: left; font-size: 15px; }
}

/* ─── selo AO VIVO no topo ────────────────────────────────────────────────────
   Nunca chamar dado velho de "ao vivo": o tom muda junto com o estado da conexao. */
.topo-aovivo {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  background: rgba(255,255,255,.12); color: #fff; white-space: nowrap;
}
.topo-aovivo::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--verde);
}
.topo-aovivo[data-tom="alerta"]::before { background: var(--ambar); }
.topo-aovivo[data-tom="offline"]::before { background: var(--grafite-50); }
@media (prefers-reduced-motion: no-preference) {
  .topo-aovivo[data-tom="ok"]::before { animation: pulsar 2.4s ease-in-out infinite; }
}
@media (max-width: 359px) { .topo-aovivo { display: none; } }

/* ─── SIMULAR: cabecalho do produto dentro da folha ───────────────────────────
   Quem chegou pela busca do Simular precisa confirmar que escolheu o item certo ANTES de
   mexer na quantidade — errar o produto e simular a compra de outra coisa. */
.sim-cabecalho {
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--neutro-2);
}
.sim-nome { font-size: 15.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.sim-ident { margin-top: 3px; font-size: 12px; color: var(--grafite-50); overflow-wrap: anywhere; }
.sim-cabecalho .decisao-linha { margin-top: 8px; }

/* Filtros de estado na central de Pedidos: rolam na horizontal quando nao cabem, sem
   espremer rotulo. */
.segmentos-estado { width: 100%; }

/* ─── ANOTACOES: cabecalho premium, CTA e estado vazio ────────────────────────
   docs/ANNOTATIONS-PREMIUM-UX.md. 🚨 O CTA nao pode depender de rolagem: quem esta de pe no
   estande, com o representante falando, nao rola tela para comecar a anotar — desiste. */
.anot-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.anot-topo-texto { min-width: 0; }
.anot-titulo { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.anot-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--grafite-50); }
.btn-nova-anotacao { min-height: 48px; padding: 0 16px; gap: 7px; flex: 0 0 auto; }
@media (max-width: 479px) {
  /* No celular o CTA ocupa a largura: alvo maior e alcancavel com o polegar. */
  .btn-nova-anotacao { width: 100%; }
}

.anot-vazio { text-align: center; padding: 28px 18px; }
.anot-vazio-icone { fill: var(--grafite-50); opacity: .55; }
.anot-vazio-titulo { margin: 10px 0 4px; font-size: 17px; }
.anot-vazio-texto { margin: 0 0 16px; font-size: 13.5px; color: var(--grafite-50); }

/* Prioridade ao lado do status: dois selos, sem disputar. */
.cartao-selos { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }

/* Validade da OFERTA (nao do link): ate quando o preco que ele mandou vale. */
.oferta-validade {
  margin-top: 10px; padding: 9px 11px; border-radius: var(--r);
  background: var(--neutro-1); color: var(--grafite-70); font-size: 13px;
}
.oferta-validade[data-tom="alerta"] { background: var(--ambar-fundo); color: var(--ambar-tinta); font-weight: 600; }
.oferta-validade[data-tom="ruim"] { background: var(--vermelho-fundo); color: var(--vermelho-tinta); font-weight: 650; }

/* ── rodadas de negociacao no cartao do item ──────────────────────────────────
   A sequencia inteira de relance, sem abrir folha: quem esta de pe no estande nao toca em
   nada so para lembrar por quanto a conversa comecou. */
.rodadas {
  margin-top: 9px; padding: 8px 10px;
  background: var(--neutro-1); border-radius: var(--r);
}
.rodadas-linha {
  font-size: 12.5px; font-weight: 650; color: var(--grafite-70);
  overflow-wrap: anywhere;
}
.rodadas-ganho {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin-top: 4px; font-size: 12px; color: var(--grafite-50);
}
/* COMPRA/ENTRADA = VERDE. Preco que caiu e entrada favorecida — nunca vermelho aqui. */
.rodadas-ganho[data-tom="bom"] { color: var(--verde-tinta); font-weight: 650; }

/* Progresso da oferta no cartao do estande: quantos itens ja tem preco negociado. */
.progresso-oferta {
  height: 4px; margin-top: 8px; border-radius: 2px;
  background: var(--neutro-2); overflow: hidden;
}
.progresso-oferta span { display: block; height: 100%; background: var(--verde); }

/* Mini KPIs do cabecalho do pedido: densos, sem virar cartao dentro de cartao. */
.mini-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--neutro-1);
}
.mini-kpi { min-width: 0; text-align: center; }
.mini-kpi-valor {
  display: block; font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.mini-kpi[data-tom="alerta"] .mini-kpi-valor { color: var(--ambar-tinta); }
.mini-kpi-rotulo {
  display: block; margin-top: 2px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--grafite-50);
}

/* ── chips de filtro e atalho da busca ─────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
/* 🚨 44px, nao 40. Medido pelo auditor, nao estimado: o chip e o filtro que mais se usa na
   Buscar, e no pavilhao a pessoa esta de pe, com o celular numa mao so. Alvo de 40px e alvo
   que erra — e errar um filtro troca a lista inteira debaixo do dedo. */
.chip {
  min-height: 44px; padding: 0 13px; border-radius: 22px;
  border: 1px solid var(--neutro-3); background: var(--branco);
  font-size: 13px; font-weight: 600; color: var(--grafite-70);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip[aria-pressed="true"] {
  background: var(--vermelho); border-color: var(--vermelho); color: #fff;
}
.chip:active { background: var(--neutro-1); }
.chip[aria-pressed="true"]:active { background: var(--vermelho-escuro); }

.dica-busca { padding: 14px; }
.dica-titulo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--grafite-50); margin-bottom: 7px;
}
.dica-lista { margin: 0; padding-left: 17px; font-size: 13px; line-height: 1.6; color: var(--grafite-70); }
.resultado-pa {
  margin-top: 3px; font-size: 12px; color: var(--grafite-50);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FICHA 360 — movimento, fórmula e simulador
   🚨 REGRA DE MOVIMENTO: COMPRA/ENTRADA = VERDE · VENDA/SAÍDA = VERMELHO.
   Vale para barra, número, ponto da seção e legenda. Cinza e grafite nunca
   representam série de movimento — só estrutura.
   ═══════════════════════════════════════════════════════════════════════════ */
.mov-par { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 359px) { .mov-par { grid-template-columns: 1fr; } }
.mov-lado {
  min-width: 0; padding: 11px 12px; border-radius: var(--r);
  border: 1px solid var(--neutro-2); border-left-width: 3px;
}
.mov-lado[data-fluxo="compra"] { border-left-color: var(--verde); background: var(--verde-fundo); }
.mov-lado[data-fluxo="venda"] { border-left-color: var(--vermelho); background: var(--vermelho-fundo); }
.mov-rotulo {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.mov-lado[data-fluxo="compra"] .mov-rotulo { color: var(--verde-tinta); }
.mov-lado[data-fluxo="venda"] .mov-rotulo { color: var(--vermelho-tinta); }
.mov-valor {
  margin-top: 3px; font-family: var(--fonte-titulo); font-size: 26px; font-weight: 700;
  line-height: 1.05; font-variant-numeric: tabular-nums;
}
.mov-valor small { font-size: 12px; font-weight: 600; margin-left: 4px; color: var(--grafite-50); }
.mov-nota { font-size: 11.5px; line-height: 1.4; color: var(--grafite-70); margin-top: 2px; }

/* Ponto de cor no título da seção: diz o fluxo sem depender só da cor do texto. */
.ponto-fluxo {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.ponto-fluxo[data-fluxo="compra"] { background: var(--verde); }
.ponto-fluxo[data-fluxo="venda"] { background: var(--vermelho); }

/* Série mensal: cada mês é um botão e abre os números daquele mês. */
.serie-bloco { margin-top: 14px; }
.serie { display: flex; align-items: flex-end; gap: 3px; height: 86px; }
.serie-col {
  flex: 1 1 0; min-width: 0; height: 100%; padding: 0;
  display: flex; align-items: flex-end; justify-content: center; gap: 2px;
  background: none; border-radius: 2px;
}
.serie-col:active { background: var(--neutro-1); }
.serie-barra { width: 45%; border-radius: 1px 1px 0 0; min-height: 2px; display: block; }
.serie-barra.compra { background: var(--verde); }
.serie-barra.venda { background: var(--vermelho); }
.serie-legenda i.compra { background: var(--verde); }
.serie-legenda i.venda { background: var(--vermelho); }

/* Margem */
.margem-topo { display: flex; align-items: center; gap: 14px; }
.margem-num {
  font-family: var(--fonte-titulo); font-size: 34px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.margem-num small { font-size: 15px; margin-left: 2px; color: var(--grafite-50); }
.margem-lado { font-size: 13px; line-height: 1.6; color: var(--grafite-70); min-width: 0; }

/* Fórmula (equivalentes) */
.formula-resumo { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--neutro-2); }

/* Alertas da ficha */
.alerta-item { border-left: 3px solid var(--neutro-3); margin-bottom: 8px; }
.alerta-item[data-gravidade="atencao"] { border-left-color: var(--ambar); }
.alerta-acao { font-weight: 650; }
.simulacao-mudou {
  margin: 10px 0 0; padding: 9px 11px; border-radius: var(--r);
  background: var(--ambar-fundo); color: var(--ambar-texto);
  font-size: 12.5px; font-weight: 600; line-height: 1.4;
}

/* ── cotacao de distribuidoras na ficha ───────────────────────────────────── */
.cot-melhor {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--neutro-2);
}
.cot-melhor-rotulo {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--grafite-50);
}
.cot-melhor-valor {
  font-family: var(--fonte-titulo); font-size: 30px; font-weight: 700; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.cot-delta { text-align: right; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cot-delta[data-tom="bom"] { color: var(--verde-tinta); }
.cot-delta[data-tom="ruim"] { color: var(--vermelho-tinta); }
.cot-delta span { display: block; font-size: 10.5px; font-weight: 600; color: var(--grafite-50); }

.cot-lista { display: flex; flex-direction: column; }
.cot-linha {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  padding: 9px 0; border-bottom: 1px solid var(--neutro-1);
}
.cot-linha:last-child { border-bottom: 0; }
.cot-linha.velho { opacity: .62; }
.cot-dist { font-size: 13.5px; font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.cot-fonte {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 9px;
  background: var(--neutro-1); color: var(--grafite-50);
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.cot-preco { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.cot-meta { font-size: 11.5px; color: var(--grafite-50); }
.cot-quando { font-size: 11px; color: var(--grafite-50); text-align: right; }

/* ── catalogo: barra de chips + filtros, e resumo do recorte ──────────────── */
.catalogo-barra { display: flex; align-items: flex-start; gap: 8px; }
.catalogo-barra .chips { flex: 1 1 auto; margin-bottom: 8px; }
.catalogo-resumo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 10px; font-size: 12px; color: var(--grafite-50);
}
#mais-catalogo { margin-top: 10px; }

/* ── assistente de criacao: passos, escolha e simulacao ───────────────────── */
.btn-novo { margin-bottom: 12px; gap: 7px; }
.passos { display: flex; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.passo { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.passo-num {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  background: var(--neutro-2); color: var(--grafite-50);
}
.passo[data-estado="agora"] .passo-num { background: var(--vermelho); color: #fff; }
.passo[data-estado="feito"] .passo-num { background: var(--verde); color: #fff; }
.passo-nome {
  font-size: 10px; font-weight: 600; color: var(--grafite-50); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.passo[data-estado="agora"] .passo-nome { color: var(--grafite); font-weight: 700; }

/* ── AS TRES REFERENCIAS DE COMPRA NO CARTAO ────────────────────────────────
   🚨 Uma linha so, tres colunas. O cartao ja e denso: tres blocos empilhados empurrariam o
   giro — que e o outro numero que decide — para fora da primeira olhada. */
.crefs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px; margin-top: 6px;
  padding: 7px 8px; border-radius: var(--r); background: var(--neutro-1);
}
.cref { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cref-rot {
  font-size: 9.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase;
  /* --texto-2: com --texto-3 este rotulo de 9,5px ficava em 4,13:1 (medido, 16/09). */
  color: var(--texto-2);
}
.cref b { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cref i {
  font-size: 10px; font-style: normal; color: var(--texto-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Ausencia fica visivelmente mais fraca — mas escrita, nunca em branco. */
.cref[data-ausente="1"] b { font-size: 11px; font-weight: 600; color: var(--texto-2); }

/* ── CONDICAO POR VOLUME ────────────────────────────────────────────────────
   Tabela compacta de tres colunas. 🚨 A faixa que VALE e a proxima sao marcadas por FUNDO e
   por TEXTO ("vale agora", "faltam 4") — nunca so por cor: no sol do pavilhao a tela lava. */
.volume { margin-top: 8px; padding: 8px 10px; border-radius: var(--r); background: var(--neutro-1); }
.volume-titulo {
  font-size: 10.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-3); margin-bottom: 4px;
}
.volume-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.volume-tabela td { padding: 4px 0; }
.volume-tabela td:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.volume-tabela td:nth-child(3) { text-align: right; font-size: 11.5px; color: var(--texto-3); padding-left: 10px; }
.volume-tabela tr[data-atual="1"] { background: var(--verde-fundo); }
.volume-tabela tr[data-atual="1"] td { color: #0A6538; font-weight: 700; }
.volume-tabela tr[data-atual="1"] td:nth-child(3) { color: #0A6538; }
.volume-tabela tr[data-proxima="1"] td:nth-child(3) { color: var(--ambar-texto); font-weight: 650; }
.volume-nota { margin: 6px 0 0; font-size: 12px; color: var(--texto-2); }
/* A regra fica discreta mas SEMPRE presente: ela existe onde mora a tentacao. */
.volume-regra { font-size: 11px; color: var(--texto-3); font-style: italic; }
@media (prefers-color-scheme: dark) {
  html:not([data-tema="claro"]) .volume-tabela tr[data-atual="1"] td,
  html:not([data-tema="claro"]) .volume-tabela tr[data-atual="1"] td:nth-child(3) { color: var(--verde-tinta); }
}
html[data-tema="escuro"] .volume-tabela tr[data-atual="1"] td,
html[data-tema="escuro"] .volume-tabela tr[data-atual="1"] td:nth-child(3) { color: var(--verde-tinta); }

/* ── sugestao de laboratorio ────────────────────────────────────────────────
   🚨 A lista mostra QUANTOS PRODUTOS cada laboratorio tem. "EUROFARMA ETICO" e "EUROFARMA
   GENERICO" sao dois cadastros diferentes, e o numero e o que distingue os dois de relance —
   escolher o errado no estande faz o pedido inteiro sair com os produtos do outro. */
.np-sugestoes {
  display: grid; gap: 2px; margin: -4px 0 10px;
  border: 1px solid var(--neutro-2); border-radius: var(--r);
  background: var(--superficie-1); overflow: hidden;
  max-height: 260px; overflow-y: auto;
}
.np-sugestao {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  /* 44px: e uma lista que se toca de pe, com o representante esperando. */
  min-height: 46px; padding: 0 12px; width: 100%;
  background: transparent; border: 0; text-align: left;
  font-size: 14px; color: var(--texto-1);
  -webkit-tap-highlight-color: transparent;
}
.np-sugestao:active { background: var(--neutro-1); }
.np-sugestao:focus-visible { outline: 2px solid var(--vermelho); outline-offset: -2px; }
.np-sugestao + .np-sugestao { border-top: 1px solid var(--neutro-2); }
.np-sugestao-nome { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-sugestao-qtd { flex: 0 0 auto; font-size: 12px; color: var(--texto-3); }

/* ── CONSTRUTOR DE PRE-PEDIDO: escolher produto ─────────────────────────────
   🚨 CAIXINHA, e nao cartao que alterna. O cartao inteiro clicavel parece o mesmo gesto de
   "abrir o produto", e no pavilhao o dedo erra: a pessoa toca para LER e inclui o item sem
   perceber. A caixa e um alvo separado e o estado se le sem interpretar cor de borda. */
.cartao-escolha {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px;
  /* A borda muda com a marcacao, mas ela e o REFORCO — quem informa e a caixa marcada. */
  border-color: var(--neutro-2);
}
.cartao-escolha[data-marcado="1"] { border-color: var(--grafite); box-shadow: 0 0 0 1px var(--grafite); }
.escolha-corpo { flex: 1 1 auto; min-width: 0; }

/* 🚨 44px de alvo de verdade. A caixa desenhada e menor, mas o rotulo em volta recebe o
   toque: caixa de 18px no celular, de pe, e caixa que erra. */
.escolha-caixa {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 44px; height: 44px; margin: -4px 0 0 -6px;
  cursor: pointer;
}
.escolha-caixa input { width: 22px; height: 22px; accent-color: var(--verde); }

/* ── chips da triagem verde/amarelo/vermelho ────────────────────────────────
   🚨 A cor NUNCA vem sozinha: o rotulo escrito acompanha sempre. No sol do pavilhao a tela
   lava, e daltonismo apaga a diferenca entre o verde e o vermelho. */
.chips-cor {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 10px 0 8px; padding: 2px;
}
.chips-cor::-webkit-scrollbar { display: none; }
.chip-cor {
  flex: 0 0 auto; min-height: 44px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--neutro-3); border-radius: 999px;
  background: var(--branco); color: var(--texto-1);
  font-size: 13px; font-weight: 650;
  -webkit-tap-highlight-color: transparent;
}
.chip-cor span { font-weight: 500; opacity: .6; }
.chip-cor[aria-selected="true"] {
  background: var(--grafite-fixo); border-color: var(--grafite-fixo); color: #fff;
}
.chip-cor[aria-selected="true"] span { opacity: .75; }
.chip-cor:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }

.np-filtros { display: flex; gap: 8px; margin-bottom: 8px; }
.np-filtros select { flex: 1 1 0; min-height: 44px; }
.np-resumo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px; font-size: 12.5px; color: var(--texto-2);
}

/* O rotulo da triagem dentro do cartao. Texto sempre; a cor e o reforco. */
.triagem {
  display: inline-block; margin: 5px 0 2px; padding: 2px 8px;
  border-radius: 999px; font-size: 11px; font-weight: 750; letter-spacing: .03em;
}
.triagem[data-cor="verde"] { background: var(--verde-fundo); color: #0A6538; }
.triagem[data-cor="amarelo"] { background: var(--ambar-fundo); color: var(--ambar-texto); }
.triagem[data-cor="vermelho"] { background: var(--vermelho-fundo); color: var(--vermelho-tinta); }
.triagem[data-cor="indefinido"] { background: var(--neutro-1); color: #4A5162; }
@media (prefers-color-scheme: dark) {
  html:not([data-tema="claro"]) .triagem[data-cor="verde"] { color: var(--verde-tinta); }
  html:not([data-tema="claro"]) .triagem[data-cor="indefinido"] { color: var(--texto-2); }
}
html[data-tema="escuro"] .triagem[data-cor="verde"] { color: var(--verde-tinta); }
html[data-tema="escuro"] .triagem[data-cor="indefinido"] { color: var(--texto-2); }

.np-item { padding: 12px 0; border-bottom: 1px solid var(--neutro-1); }
.np-item:last-child { border-bottom: 0; }
.np-inteligencia { margin-top: 8px; }
.np-sim { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.np-sim-texto { font-size: 12px; color: var(--grafite-50); }

.selo-novo {
  display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 9px;
  background: var(--verde-fundo); color: var(--verde-tinta);
  font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  vertical-align: middle;
}

/* ── como o InovaPED classifica o produto hoje ────────────────────────────── */
.inovaped-classe {
  margin-top: 12px; padding: 11px 12px; border-radius: var(--r);
  background: var(--neutro-1); border: 1px solid var(--neutro-2);
}
.inovaped-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.inovaped-rotulo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--grafite-50);
}
.inovaped-divergencia {
  margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--grafite-70);
}

/* ── numeros da serie mensal: o valor escrito, nao so a altura da barra ───── */
.serie-numeros {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
  margin-top: 12px;
}
@media (max-width: 359px) { .serie-numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 620px) { .serie-numeros { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.serie-num {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  padding: 6px 4px; border-radius: var(--r);
  background: var(--neutro-1); border: 1px solid var(--neutro-2);
  text-align: center;
}
.serie-num:active { background: var(--neutro-2); }
.serie-num-mes { font-size: 10px; font-weight: 700; color: var(--grafite-50); text-transform: uppercase; }
.serie-num-linha { font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.serie-num-linha[data-fluxo="compra"] { color: var(--verde-tinta); }
.serie-num-linha[data-fluxo="venda"] { color: var(--vermelho-tinta); }
.legenda-pct { font-size: 11.5px; color: var(--grafite-50); font-variant-numeric: tabular-nums; }
.gauge-alvo { font-size: 11px; color: var(--grafite-50); font-variant-numeric: tabular-nums; }

/* ── sino de avisos no topo ────────────────────────────────────────────────── */
.topo-sino {
  position: relative; flex: 0 0 auto;
  width: 44px; height: 44px; display: grid; place-items: center;
  color: #C9CBD1; border-radius: 50%;
}
.topo-sino:active { background: #2A2D34; }
.topo-badge {
  position: absolute; top: 5px; right: 4px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--vermelho); color: #fff;
  font-size: 10px; font-style: normal; font-weight: 700; border-radius: 9px;
}

/* ── lista de avisos ───────────────────────────────────────────────────────── */
.aviso {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 11px 0; text-align: left; border-bottom: 1px solid var(--neutro-1);
}
.aviso:last-of-type { border-bottom: 0; }
.aviso[data-lida="1"] { opacity: .55; }
.aviso-ponto {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px;
  background: var(--neutro-3);
}
.aviso-ponto[data-tom="acao"] { background: var(--vermelho); }
.aviso-ponto[data-tom="alerta"] { background: var(--ambar); }
.aviso-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aviso-titulo { font-size: 14px; font-weight: 650; }
.aviso-titulo em {
  font-style: normal; font-size: 11px; font-weight: 700; color: var(--grafite-50);
  background: var(--neutro-1); border-radius: 8px; padding: 1px 6px; margin-left: 4px;
}
.aviso-texto { font-size: 12.5px; line-height: 1.45; color: var(--grafite-70); overflow-wrap: anywhere; }
.aviso-quando { font-size: 11px; color: var(--grafite-50); }

/* ── configuracoes e usuarios ──────────────────────────────────────────────── */
.config-secao { margin-bottom: 18px; }
.config-titulo {
  margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--grafite-50);
}
.config-item { padding: 10px 0; border-bottom: 1px solid var(--neutro-1); }
.config-item:last-child { border-bottom: 0; }
.config-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.config-rotulo { font-size: 14px; font-weight: 600; min-width: 0; }
.config-valor { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.config-campo {
  width: 112px; min-height: 44px; padding: 0 10px; text-align: right;
  border: 1px solid var(--neutro-3); border-radius: var(--r);
  background: var(--branco); font-variant-numeric: tabular-nums; font-weight: 700;
}
.config-campo:disabled { opacity: .6; }
.config-meta { margin-top: 3px; font-size: 11px; color: var(--grafite-50); }
.config-meta .btn-texto { margin-left: 8px; font-size: 11px; }
.config-ajuda { margin: 5px 0 0; font-size: 12px; line-height: 1.45; color: var(--grafite-70); }
.usuario-cartao { margin-bottom: 8px; }
.usuario-permissoes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

/* ── BALANCO DA FEIRA: comparativo, presenca e ranking ──────────────────────
   🚨 Nada aqui e decoracao. Cada desenho responde a uma pergunta e abre a lista que o
   compoe — grafico que ninguem consegue abrir e enfeite caro. */

/* Representante × distribuidora: uma barra com as tres fatias. A cor NUNCA vem sozinha —
   a legenda escreve quem e quem, porque no sol do pavilhao a tela lava. */
.cmp-barra {
  display: flex; height: 14px; border-radius: 7px; overflow: hidden;
  background: var(--neutro-2);
}
.cmp-parte { display: block; height: 100%; }
.cmp-parte[data-quem="rep"]    { background: var(--verde); }
.cmp-parte[data-quem="empate"] { background: var(--neutro-3); }
.cmp-parte[data-quem="dist"]   { background: var(--ambar); }
.cmp-legenda {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px;
  font-size: 12.5px; color: var(--grafite-70);
}
.cmp-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.cmp-legenda b { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cmp-legenda b[data-quem="rep"]    { background: var(--verde); }
.cmp-legenda b[data-quem="empate"] { background: var(--neutro-3); }
.cmp-legenda b[data-quem="dist"]   { background: var(--ambar); }

/* Presenca do representante. Tres estados, cada um com TEXTO: "na mesa agora" nao pode ser
   so um ponto verde — 4G de pavilhao oscila, e o ponto apagado mandaria alguem procurar
   quem nunca saiu. */
.presenca-grupo + .presenca-grupo { margin-top: 14px; }
.presenca-titulo {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--grafite-50);
}
.presenca-titulo span {
  padding: 1px 7px; border-radius: 999px; background: var(--neutro-1);
  font-size: 11.5px; letter-spacing: 0;
}
.presenca-linha {
  display: flex; align-items: center; gap: 10px; width: 100%;
  /* 48px: no pavilhao a pessoa esta de pe, com uma mao so. */
  min-height: 48px; padding: 6px 4px;
  border: 0; border-top: 1px solid var(--neutro-2); background: none;
  text-align: left; cursor: pointer;
}
.presenca-linha:first-of-type { border-top: 0; }
.presenca-ponto {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--neutro-3);
}
.presenca-linha[data-tom="online"] .presenca-ponto { background: var(--verde); }
.presenca-linha[data-tom="abriu"]  .presenca-ponto { background: var(--ambar); }
.presenca-nome {
  flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 650; color: var(--grafite);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.presenca-nota {
  flex: 0 0 auto; max-width: 45%; font-size: 12px; color: var(--grafite-50);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Ranking: posicao, nome e valor. A REFERENCIA fica junto do titulo — "economia de R$ 12
   mil" contra o que? Sem a conta escrita, o numero nao pode ser conferido nem defendido. */
.rank-titulo { font-size: 14px; font-weight: 700; color: var(--grafite); }
.rank-ref { margin: 2px 0 8px; font-size: 12px; color: var(--grafite-50); }
.rank-linha {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px;
  padding: 6px 2px; border: 0; border-top: 1px solid var(--neutro-2); background: none;
  text-align: left; cursor: pointer;
}
.rank-linha:first-of-type { border-top: 0; }
.rank-pos {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--neutro-1); color: var(--grafite-70);
  font-size: 12px; font-weight: 700;
}
.rank-nome {
  flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--grafite);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank-valor { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--grafite); }

/* Linha que e botao (os casos de oportunidade). Alvo de 48px como todo o resto. */
.linha-toque {
  width: 100%; min-height: 48px; border: 0; background: none; cursor: pointer;
  text-align: left;
}
.linha-toque:disabled { cursor: default; opacity: .55; }

/* ── FECHAMENTO DO DIA e CICLO DA COMPRA ────────────────────────────────────
   🚨 Os treze blocos do dia saem SEMPRE, inclusive zerados: "zero aprovações pendentes"
   encerra a dúvida, e a ausência da linha manda a pessoa procurar em outro lugar. */
.dia-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .dia-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dia-item { min-width: 0; padding: 8px 10px; border-radius: var(--r); background: var(--neutro-1); }
.dia-rot {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--grafite-50);
}
.dia-val { margin-top: 2px; font-size: 17px; font-weight: 700; color: var(--grafite); }
.dia-nota { font-size: 11.5px; color: var(--grafite-50); }
.dia-urgente {
  margin-top: 10px; padding: 8px 10px; border-radius: var(--r);
  background: var(--ambar-fundo); color: var(--grafite);
  font-size: 12.5px;
}

/* O ciclo da compra. 🚨 A etapa sem integração NÃO tem barra: barra vazia parece medida
   igual a zero, e a diferença entre "não comprou" e "não sei" é o relatório inteiro. */
.ciclo-etapa + .ciclo-etapa { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--neutro-2); }
.ciclo-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ciclo-nome { font-size: 14px; font-weight: 650; color: var(--grafite); }
.ciclo-valor { font-size: 15px; font-weight: 700; color: var(--grafite); }
.ciclo-etapa[data-medido="0"] .ciclo-nome,
.ciclo-etapa[data-medido="0"] .ciclo-valor { color: var(--grafite-50); }
.ciclo-barra {
  margin-top: 6px; height: 10px; border-radius: 5px; background: var(--neutro-2);
  overflow: hidden;
}
.ciclo-barra span { display: block; height: 100%; background: var(--grafite); }
.ciclo-nota { margin-top: 4px; font-size: 11.5px; color: var(--grafite-50); }

/* ── MODO MESA DE NEGOCIACAO ────────────────────────────────────────────────
   🚨 Tudo aqui e grande de proposito. Eles estao DE PE, lado a lado, com o celular entre os
   dois e o barulho do pavilhao em volta — a tela precisa ser lida de relance, por duas
   pessoas, em angulos diferentes. Densidade aqui nao e virtude: e erro de quantidade. */
.mesa { display: flex; flex-direction: column; gap: 14px; padding-bottom: 20px; }

.mesa-topo { display: flex; align-items: center; gap: 10px; }
.mesa-sair {
  flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid var(--neutro-2); border-radius: var(--r);
  background: var(--branco); color: var(--grafite); cursor: pointer;
}
.mesa-passo { min-width: 0; font-size: 13px; color: var(--grafite-50); }
.mesa-passo b { font-size: 18px; color: var(--grafite); }
.mesa-passo span {
  display: block; font-size: 12.5px; font-weight: 650; color: var(--grafite-70);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mesa-progresso { height: 4px; border-radius: 2px; background: var(--neutro-2); overflow: hidden; }
.mesa-progresso span { display: block; height: 100%; background: var(--vermelho); }

.mesa-item { display: flex; flex-direction: column; gap: 6px; }
.mesa-nome { font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--grafite); }
.mesa-cods { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var(--grafite-50); }

/* A QUANTIDADE e o maior numero da tela: e a decisao dele. */
.mesa-qtd { display: flex; align-items: center; gap: 12px; }
.mesa-passo-btn {
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: var(--r);
  border: 1px solid var(--neutro-2); background: var(--branco);
  font-size: 30px; line-height: 1; color: var(--grafite); cursor: pointer;
}
.mesa-passo-btn:active { background: var(--neutro-1); }
.mesa-qtd-caixa { flex: 1 1 auto; min-width: 0; text-align: center; }
.mesa-qtd-caixa input {
  width: 100%; border: 0; background: none; text-align: center;
  font-size: 44px; font-weight: 800; color: var(--grafite);
  /* 16px e o minimo em qualquer campo do projeto; aqui e muito maior, mas a regra fica
     escrita porque alguem vai copiar este bloco um dia. */
}
.mesa-qtd-caixa input::-webkit-outer-spin-button,
.mesa-qtd-caixa input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mesa-qtd-rot {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--grafite-50);
}

/* A OFERTA e o estado dela. 🚨 "Chegou" e "aplicada" sao coisas diferentes: o preco pode
   estar na tela e ainda nao valer no pedido, e fechar achando que vale e o erro caro. */
.mesa-oferta {
  padding: 12px 14px; border-radius: var(--r);
  border: 1px solid var(--neutro-2); background: var(--neutro-1);
}
.mesa-oferta[data-estado="nova"] { border-color: var(--ambar); background: var(--ambar-fundo); }
.mesa-oferta[data-estado="aplicada"] { border-color: var(--verde); }
.mesa-oferta-rot {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--grafite-50);
}
.mesa-oferta-val { font-size: 30px; font-weight: 800; color: var(--grafite); line-height: 1.1; }
.mesa-oferta-nota { font-size: 12.5px; color: var(--grafite-70); }
.mesa-oferta-atual { margin-top: 6px; font-size: 13px; color: var(--grafite-70); }

.mesa-situacao { margin: 0; font-size: 13px; color: var(--grafite-70); }
/* 🚨 56px, nao os 48 do resto do app. Aqui eles estao DE PE, lado a lado, com o celular
   entre os dois e o representante esperando: o minimo confortavel das outras telas e o
   minimo ABSOLUTO desta. O auditor mede e reprova abaixo disso. */
.mesa-acoes { display: flex; flex-direction: column; gap: 8px; }
.mesa-acoes .btn { min-height: 56px; font-size: 15px; }
.mesa-navegar { display: flex; gap: 8px; }
.mesa-navegar .btn { flex: 1 1 0; min-height: 56px; }
.mesa-sair { width: 56px; height: 56px; }

/* ── LEITOR DE CODIGO DE BARRAS ─────────────────────────────────────────────
   🚨 O botao fica COLADO na busca, nao escondido num menu: no estande ele esta com a caixa
   do produto numa mao e o celular na outra. Se o leitor custar dois toques para achar, ele
   digita — e digitar treze dígitos de pé são treze chances de errar. */
.busca-com-scanner { display: flex; align-items: stretch; gap: 8px; }
.busca-com-scanner .busca-caixa { flex: 1 1 auto; min-width: 0; }
.btn-scanner {
  flex: 0 0 auto; display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  /* 56px: alvo grande, porque a outra mão está segurando a caixa do remédio. */
  min-width: 64px; min-height: 56px; padding: 0 10px;
  border: 1px solid var(--neutro-2); border-radius: var(--r);
  background: var(--branco); color: var(--grafite); cursor: pointer;
}
.btn-scanner span { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.btn-scanner:active { background: var(--neutro-1); }

/* A janela da camera. Proporcao fixa para a folha nao pular de altura quando o video chega. */
.scanner {
  position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 60vh;
  border-radius: var(--r); overflow: hidden; background: #000;
}
.scanner video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A mira não decora: ela diz ONDE o código precisa estar. Sem isso a pessoa aponta o celular
   inteiro para a caixa e a leitura demora. */
.scanner-mira {
  position: absolute; left: 12%; right: 12%; top: 35%; height: 30%;
  border: 2px solid rgba(255, 255, 255, .9); border-radius: 8px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35);
}

/* ── CONFIGURACOES V2: busca fixa e filtros ─────────────────────────────────
   🚨 O documento comeca com uma proibicao — "nunca exibir uma lista infinita de inputs".
   A busca fica GRUDADA no topo enquanto a lista rola: a pergunta aqui e sempre "onde mudo
   X?", e rolar ate achar significa ler todos os outros ajustes antes — que e como alguem
   acaba mudando o campo errado. */
.cfg-topo {
  position: sticky; top: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px 0 10px; margin-bottom: 4px;
  background: var(--branco);
}
/* 🚨 A caixa de busca do app e sticky POR CONTA PROPRIA, com margem negativa e z-index 20 —
   ela foi feita para o topo das telas principais. Dentro de um container que ja e sticky, os
   dois brigam: a margem negativa faz a caixa COBRIR a fila de chips logo abaixo, e o toque
   no filtro cai no campo de texto. Medido pelo auditor ("input intercepts pointer events"),
   nao deduzido. Aqui ela volta a ser uma caixa comum; quem gruda no topo e o `.cfg-topo`. */
.cfg-topo .busca-caixa {
  position: static; margin: 0; padding: 0; background: none; border-bottom: 0;
}
.cfg-topo .busca-campo input { min-height: 48px; font-size: 16px; padding: 0 14px; }
.chips-filtro {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chips-filtro::-webkit-scrollbar { display: none; }
.chip-filtro {
  flex: 0 0 auto; min-height: 44px; padding: 0 14px;
  display: inline-flex; align-items: center;
  border: 1px solid var(--neutro-2); border-radius: 999px;
  background: var(--branco); color: var(--grafite-70);
  font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.chip-filtro[aria-selected="true"] {
  border-color: var(--grafite); background: var(--grafite); color: var(--branco);
}
/* A ORIGEM de cada ajuste, escrita. Cor sozinha nao diz se o numero e decisao de alguem ou
   o que veio de fabrica — e as duas coisas se corrigem de jeitos diferentes. */
.cfg-chip {
  display: inline-flex; align-items: center; padding: 1px 8px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--neutro-1); color: var(--grafite-70);
}
.cfg-chip[data-tom="ajustado"] { background: var(--ambar-fundo); color: var(--grafite); }
.cfg-chip[data-tom="ambiente"] { background: var(--neutro-2); }

/* ── CONFIRMACAO DE ACAO CRITICA (ui.js · confirmar) ──────────────────────────────────
   Acima de tudo, inclusive da folha aberta: a confirmacao da quantidade nasce DE DENTRO da
   folha de quantidade. Botoes grandes e area segura no celular. */
.confirma-fundo {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: rgba(18, 19, 22, .55);
}
@media (min-width: 620px) { .confirma-fundo { align-items: center; } }
.confirma {
  width: 100%; max-width: 440px; max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 20px 18px 16px; border-radius: 14px;
  background: var(--superficie); color: var(--texto);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
}
.confirma[data-destrutivo="1"] { border-top: 4px solid var(--vermelho); }
.confirma-titulo { margin: 0 0 8px; font-size: 18px; line-height: 1.25; }
.confirma-texto { margin: 0 0 12px; font-size: 14.5px; line-height: 1.45; color: var(--texto-2); }
.confirma-troca {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 8px; padding: 12px; border-radius: 10px; background: var(--superficie-2);
  font-variant-numeric: tabular-nums;
}
.confirma-antes { font-size: 18px; font-weight: 600; color: var(--texto-2); text-decoration: line-through; }
.confirma-seta { font-size: 18px; color: var(--texto-2); }
.confirma-depois { font-size: 22px; font-weight: 800; }
.confirma-detalhe { margin: 0 0 12px; text-align: center; font-size: 13.5px; font-weight: 650; color: var(--texto-2); }
.confirma-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.confirma-botoes .btn { min-height: 50px; }
/* Vermelho FIXO: no tema escuro --vermelho-tinta e rosa claro, e texto branco nele some. */
.btn-perigo { background: #C2121A; color: #fff; border: 0; }

/* Aceitar ofertas do representante: verde = entrada/aceite (regra de cor do projeto), texto escrito. */
.btn-sucesso { background: #0A6538; color: #fff; border: 0; }
.btn-sucesso:disabled { opacity: .55; }
.mesa-aceitar-todas { margin: 8px 0 4px; }


/* ── oportunidades por quantidade: botao, aviso em lote e central ─────────── */
.topo-oport {
  position: relative; flex: 0 0 auto; height: 34px; padding: 0 10px; margin-right: 2px;
  display: inline-flex; align-items: center; gap: 6px;
  color: #fff; border: 1px solid #3A3D45; border-radius: 17px;
  font-size: 12.5px; font-weight: 600;
}
.topo-oport:active { background: #2A2D34; }
.topo-oport-badge { position: static; }
@media (max-width: 420px) { .topo-oport-rotulo { display: none; } .topo-oport::before { content: "%"; font-weight: 700; } }

.op-alerta-fundo {
  position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.5);
  display: flex; align-items: flex-end; justify-content: center;
}
.op-alerta {
  width: 100%; background: var(--superficie); color: var(--texto);
  border-radius: 12px 12px 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
  border-top: 4px solid var(--verde);
}
@media (min-width: 720px) {
  .op-alerta-fundo { align-items: center; }
  .op-alerta { width: min(480px, calc(100% - 32px)); border-radius: 8px; padding: 24px; }
}
.op-alerta-sobre { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); }
.op-alerta-titulo { margin: 4px 0 12px; font-family: var(--fonte-titulo); font-size: 30px; line-height: 1.05; }
.op-alerta-labs { list-style: none; margin: 0 0 10px; padding: 0; }
.op-alerta-labs li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--borda); font-size: 15px; }
.op-alerta-labs strong { font-variant-numeric: tabular-nums; }
.op-alerta-mais { color: var(--texto-3); }
.op-alerta-nota { margin: 0 0 14px; font-size: 13px; color: var(--texto-2); }
.op-alerta-botoes { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.op-alerta-botoes .btn { min-height: 48px; }

.op-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.op-som { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-2); min-height: 44px; }
.op-explica { margin: 0 0 12px; font-size: 13px; color: var(--texto-2); }
.op-grupo { margin-bottom: 16px; }
.op-grupo-titulo { margin: 0; font-family: var(--fonte-titulo); font-size: 19px; text-transform: uppercase; }
.op-grupo-titulo span { color: var(--texto-3); font-weight: 500; }
.op-grupo-resumo { margin: 2px 0 6px; font-size: 13px; color: var(--texto-2); }
.op-atencao { color: var(--ambar-tinta); font-weight: 600; }
.op-linha {
  display: grid; gap: 3px; width: 100%; text-align: left; padding: 10px 0;
  border-bottom: 1px solid var(--borda); min-height: 48px;
}
.op-linha[data-vista="0"] { box-shadow: inset 3px 0 0 var(--verde); padding-left: 10px; }
.op-linha-nome { font-weight: 600; font-size: 14px; }
.op-linha-cond { font-size: 13px; color: var(--texto-2); }
.op-linha-fatos { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; }
.op-num { font-variant-numeric: tabular-nums; }
.op-selos { display: flex; flex-wrap: wrap; gap: 4px; }
.op-selo { font-size: 11px; padding: 2px 6px; border-radius: 3px; background: var(--neutro-1); color: var(--texto-2); }
.op-selo[data-tom="bom"] { background: var(--verde-fundo); color: var(--verde-tinta); }
.op-selo[data-tom="atencao"] { background: var(--ambar-fundo); color: var(--ambar-texto); }
.op-det-lab { margin: 0; font-size: 12px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; }
.op-det-nome { margin: 2px 0 6px; font-size: 18px; }
.op-det-sec { margin: 14px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); }
.op-det-linha { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--borda); font-size: 14px; }
.op-det-linha strong { font-variant-numeric: tabular-nums; text-align: right; }
.op-aviso-excesso { margin: 10px 0 0; padding: 8px 10px; background: var(--ambar-fundo); color: var(--ambar-texto); font-size: 13px; border-radius: 4px; }
.op-decidida { margin: 10px 0 0; font-weight: 600; }
.op-acoes { display: grid; gap: 8px; margin-top: 16px; }
.op-acoes .btn { min-height: 48px; }

/* Topo apertado no celular (16/09): com "Ao vivo" + Oportunidades, o nome do evento quebrava e
   o "Agora" passava por cima. O selo ao vivo ja diz a idade do dado: o "Agora" sai; nada quebra. */
.topo-evento { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) {
  .topo-dir:has(.topo-aovivo:not([hidden])) .topo-sync { display: none; }
  .topo-oport { height: 32px; padding: 0 8px; gap: 4px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VISUAL SYSTEM 2.0 (16/09/2026) — CLAUDE-NEXT-FEIRA-VISUAL-SYSTEM-2-0.md
   Pedido do Carlos: mais cor, mais organizado, rapido de interpretar.

   🚨 COR TEM FUNCAO. Cada familia responde a uma pergunta operacional:
     marca (vermelho)   → acao principal, navegacao ativa
     verde              → favoravel, economia, concluido, oportunidade
     vermelho semantico → sobrecusto, erro, risco, destrutivo
     ambar              → atencao, pendencia, aprovacao, decisao necessaria
     azul               → negociacao, preco/cotacao, referencia financeira
     roxo               → aguardando representante
     cinza              → neutro, estrutura, sem resposta
   🚨 COR NUNCA SOZINHA: todo estado continua escrito (selo, rotulo, sinal).
   🚨 VISUAL NAO DECIDE REGRA: as cores leem atributos que o servidor/motor ja definiu.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --azul: #2F6FD0;
  --azul-fundo: #EAF1FB;
  --azul-tinta: #1D55A8;
  --roxo: #7A5BD0;
  --roxo-fundo: #F1EDFB;
  --roxo-tinta: #5A3DAE;
  --marca-fundo: #FDECEC;
  --verde-forte: #0A6538;      /* tinta verde com 4,5:1 sobre --verde-fundo */
  --sombra-elevada: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(18,19,22,.06);
}
@media (prefers-color-scheme: dark) {
  html:not([data-tema="claro"]) {
    --azul-fundo: #13213A; --azul-tinta: #8DB6F5;
    --roxo-fundo: #211A36; --roxo-tinta: #BBA7F2;
    --marca-fundo: #2B1416; --verde-forte: #48C98B;
    --sombra-elevada: 0 1px 2px rgba(0,0,0,.5);
  }
}
html[data-tema="escuro"] {
  --azul-fundo: #13213A; --azul-tinta: #8DB6F5;
  --roxo-fundo: #211A36; --roxo-tinta: #BBA7F2;
  --marca-fundo: #2B1416; --verde-forte: #48C98B;
  --sombra-elevada: 0 1px 2px rgba(0,0,0,.5);
}

/* ── selos: as duas familias novas ─────────────────────────────────────────── */
.selo[data-tom="info"] { background: var(--azul-fundo); color: var(--azul-tinta); }
.selo[data-tom="espera"] { background: var(--roxo-fundo); color: var(--roxo-tinta); }

/* ── botoes: variantes com funcao (o preto deixa de ser para tudo) ─────────── */
.btn-secundario {
  background: var(--superficie); color: var(--texto);
  border: 1.5px solid var(--texto);
}
.btn-secundario:active { background: var(--neutro-1); }
.btn-sucesso { background: var(--verde); color: #fff; }
.btn-sucesso:active { background: #0A6E3F; }
.btn-info { background: var(--azul); color: #fff; }
.btn-info:active { background: #2459AB; }
.btn:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

/* ── PAINEL: KPIs que nao sao oito caixas iguais ───────────────────────────
   Faixa de 3px no topo com a cor do SIGNIFICADO; fundo tingido so onde o numero pede acao. */
.kpi[data-tipo] { border-top: 3px solid var(--kpi-cor, var(--borda-forte)); padding-top: 10px; }
.kpi[data-tipo="planejado"] { --kpi-cor: var(--texto-3); }
.kpi[data-tipo="atual"] { --kpi-cor: var(--azul); }
.kpi[data-tipo="atual"] .kpi-valor { color: var(--azul-tinta); }
.kpi[data-tipo="economia"] { --kpi-cor: var(--verde); }
.kpi[data-tipo="economia"][data-tom="bom"] { background: color-mix(in srgb, var(--verde-fundo) 65%, var(--superficie)); }
.kpi[data-tipo="sobrecusto"] { --kpi-cor: var(--vermelho); }
.kpi[data-tipo="sobrecusto"][data-tom="ruim"] { background: color-mix(in srgb, var(--vermelho-fundo) 65%, var(--superficie)); }
.kpi[data-tipo="finalizados"] { --kpi-cor: var(--verde); }
.kpi[data-tipo="atencao"] { --kpi-cor: var(--ambar); }
/* "Precisa de voce" GANHA PRESENCA quando ha algo: fundo ambar, numero grande e escuro. */
.kpi[data-tipo="atencao"][data-tom="ruim"] {
  background: color-mix(in srgb, var(--ambar-fundo) 85%, var(--superficie));
  border-color: color-mix(in srgb, var(--ambar) 45%, var(--borda));
  border-top-color: var(--ambar);
}
.kpi[data-tipo="atencao"][data-tom="ruim"] .kpi-valor { color: var(--ambar-texto); }
.kpi[data-tipo="atencao"][data-tom="ruim"] .kpi-rotulo,
.kpi[data-tipo="atencao"][data-tom="ruim"] .kpi-nota { color: var(--ambar-texto); }
.kpi[data-tipo="estrutura"] { --kpi-cor: var(--texto-3); }
.kpi[data-tipo="alterados"] { --kpi-cor: var(--azul); }
.kpi-valor { font-size: 30px; }
@media (max-width: 380px) { .kpi-valor { font-size: 26px; } }

/* ── ANDAMENTO: barra de verdade ──────────────────────────────────────────── */
.barra-progresso { height: 14px; border-radius: 7px; gap: 2px; background: var(--neutro-2); }
.barra-parte:first-child { border-radius: 7px 0 0 7px; }
.barra-parte[data-tipo="negociando"] { background: var(--azul); }
.barra-parte[data-tipo="aguardando"] { background: var(--roxo); }
.andamento-ponto { width: 11px; height: 11px; border-radius: 3px; }
.andamento-ponto[data-tipo="negociando"] { background: var(--azul); }
.andamento-ponto[data-tipo="aguardando"] { background: var(--roxo); }
.andamento-num { font-family: var(--fonte-titulo); font-size: 19px; }

/* ── CARTAO DO ESTANDE / PRE-PEDIDO: faixa de status na esquerda ─────────────
   pendente cinza · aguardando representante roxo · negociando azul · voltar ambar · finalizado verde */
.cartao[data-status] {
  --status-cor: var(--borda-forte);
  box-shadow: inset 4px 0 0 var(--status-cor), var(--sombra-cartao);
  padding-left: 16px;
}
.cartao[data-status][data-portal="enviado"],
.cartao[data-status][data-portal="aberto"] { --status-cor: var(--roxo); }
.cartao[data-status][data-portal="proposta"] { --status-cor: var(--ambar); }
.cartao[data-status="negociando"] { --status-cor: var(--azul); }
.cartao[data-status="voltar"] { --status-cor: var(--ambar); }
.cartao[data-status="finalizado"] { --status-cor: var(--verde); }
.cartao[data-status] .item-nome { font-family: var(--fonte-titulo); font-size: 19px; letter-spacing: .01em; }
.cartao[data-status] .item-dados b { font-size: 14.5px; }

/* As tres visoes do cartao do pedido: cada referencia com a sua cor de funcao. */
.visao[data-tom] .visao-val { font-variant-numeric: tabular-nums; }
.visao:first-child .visao-val { color: var(--texto); }
.visao:nth-child(2) .visao-rot::before,
.visao:nth-child(3) .visao-rot::before,
.visao:first-child .visao-rot::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 2px;
  margin-right: 6px; vertical-align: 1px; background: var(--texto-3);
}
.visao:nth-child(2) .visao-rot::before { background: var(--azul); }
.visao:nth-child(3) .visao-rot::before { background: var(--verde); }
.progresso-oferta span { background: var(--azul); }

/* ── CARTAO DE PRODUTO: preco parece preco, estoque parece estoque ─────────── */
.decisao-linha .dec:first-child {
  padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--texto) 7%, var(--superficie));
}
.decisao-linha .dec:first-child b { font-family: var(--fonte-titulo); font-size: 18px; line-height: 1; }
.crefs { background: color-mix(in srgb, var(--azul-fundo) 70%, var(--superficie)); }
.cartao[data-cor] .crefs { background: color-mix(in srgb, var(--superficie) 82%, transparent); }
.cref b { font-size: 14.5px; }
.cref:first-child b { font-family: var(--fonte-titulo); font-size: 18px; line-height: 1.1; }
.cref-rot { color: var(--azul-tinta); }
.cartao[data-cor] .cref-rot { color: var(--azul-tinta); }

/* ── FILTROS: a selecao fala a lingua da decisao ─────────────────────────── */
.chip[data-chip="comprarSim"][aria-pressed="true"] { background: var(--verde); border-color: var(--verde); }
.chip[data-chip="comprarNao"][aria-pressed="true"] { background: var(--vermelho-escuro); border-color: var(--vermelho-escuro); }
.chip[data-chip="comprarSim"]:not([aria-pressed="true"]) { border-color: color-mix(in srgb, var(--verde) 55%, var(--borda)); color: var(--verde-forte); }
.chip[data-chip="comprarNao"]:not([aria-pressed="true"]) { border-color: color-mix(in srgb, var(--vermelho) 45%, var(--borda)); color: var(--vermelho-tinta); }
.chip:focus-visible, .segmento:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

/* ── CONFIRMACAO: antes → depois obvio, com a diferenca escrita ──────────── */
.confirma { border-top: 4px solid var(--azul); }
.confirma[data-destrutivo="1"] { border-top-color: var(--vermelho); }
.confirma-troca { background: var(--neutro-1); border-radius: 6px; padding: 12px 10px; }
.confirma-depois { color: var(--azul-tinta); font-family: var(--fonte-titulo); font-size: 26px; }
.confirma[data-destrutivo="1"] .confirma-depois { color: var(--vermelho-tinta); }
.confirma-delta {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 13px; font-weight: 700; vertical-align: 3px;
  background: var(--azul-fundo); color: var(--azul-tinta);
}

/* ── OPORTUNIDADES: identidade propria (verde = favoravel; ambar = excesso) ── */
.op-grupo {
  padding: 12px 12px 4px; border-radius: 8px;
  background: color-mix(in srgb, var(--verde-fundo) 55%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--verde) 30%, var(--borda));
}
.op-grupo-titulo { color: var(--verde-forte); }
.op-linha { border-bottom-color: color-mix(in srgb, var(--verde) 18%, var(--borda)); }
.op-linha:last-child { border-bottom: 0; }

@media (prefers-reduced-motion: no-preference) {
  .cartao-clicavel, .kpi, .chip, .btn { transition: background-color .12s ease, box-shadow .12s ease; }
}

/* Nome do evento no topo: no celular, com Oportunidades + sino, o espacamento largo cortava o
   ano ("CONEXAO IN 20..."). Espacamento menor, o nome inteiro cabe. */
@media (max-width: 430px) { .topo-evento { letter-spacing: .06em; } }

/* ── FONTES DE PRECO com cor propria (Visual System 2.0, bloco 2) ────────────
   ultimo custo = cinza (o que ja foi pago) · cotacao = azul (mercado agora) ·
   oferta = verde se abaixo do ultimo custo, vermelho se acima, neutro sem comparacao. */
.ref[data-fonte] .ref-rot::before, .mesa-ref::before {
  content: ""; display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px;
  background: var(--texto-3);
}
.ref[data-fonte="cotacao"] .ref-rot::before, .mesa-ref[data-fonte="cotacao"]::before { background: var(--azul); }
.ref[data-fonte="oferta"] .ref-rot::before, .mesa-ref[data-fonte="oferta"]::before { background: var(--roxo); }
.ref[data-fonte="oferta"][data-tom="bom"] .ref-rot::before, .mesa-ref[data-tom="bom"]::before { background: var(--verde); }
.ref[data-fonte="oferta"][data-tom="ruim"] .ref-rot::before, .mesa-ref[data-tom="ruim"]::before { background: var(--vermelho); }
.ref[data-fonte="cotacao"] .ref-val { color: var(--azul-tinta); }
.ref[data-fonte="oferta"][data-tom="bom"] .ref-val { color: var(--verde-forte); }
.ref[data-fonte="oferta"][data-tom="ruim"] .ref-val { color: var(--vermelho-tinta); }
.ref .ref-val { font-family: var(--fonte-titulo); font-size: 19px; }

.mesa-refs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px;
  margin: 10px 0 4px;
}
.mesa-ref {
  position: relative; display: flex; flex-direction: column; gap: 1px;
  padding: 9px 10px 9px 22px; border-radius: 6px;
  background: var(--superficie); border: 1px solid var(--borda);
}
.mesa-ref::before { position: absolute; left: 9px; top: 14px; }
.mesa-ref span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-2); }
.mesa-ref b { font-family: var(--fonte-titulo); font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mesa-ref i { font-size: 12px; font-style: normal; font-weight: 600; }
.mesa-ref[data-fonte="cotacao"] b { color: var(--azul-tinta); }
.mesa-ref[data-tom="bom"] { background: color-mix(in srgb, var(--verde-fundo) 70%, var(--superficie)); border-color: color-mix(in srgb, var(--verde) 35%, var(--borda)); }
.mesa-ref[data-tom="bom"] b, .mesa-ref[data-tom="bom"] i { color: var(--verde-forte); }
.mesa-ref[data-tom="ruim"] { background: color-mix(in srgb, var(--vermelho-fundo) 70%, var(--superficie)); border-color: color-mix(in srgb, var(--vermelho) 30%, var(--borda)); }
.mesa-ref[data-tom="ruim"] b, .mesa-ref[data-tom="ruim"] i { color: var(--vermelho-tinta); }
.mesa-oferta-rot { overflow-wrap: anywhere; }

/* Ausencia escrita nao vira numero condensado: "Cotacao nao disponivel" continua texto. */
.ref .ref-val i { font-family: var(--fonte); }
/* KPI neutro (sem tom) de anotacoes: o valor atual fica em grafite, nao azul. */
.kpi[data-ir-aba][data-tipo="atual"] .kpi-valor { color: var(--texto); }

/* ── COTACAO SEMPRE PRONTA: idade e cobertura (CLAUDE-NEXT-AUTO-LIVE-QUOTES-30MIN) ── */
.visao-frescor { grid-column: 1 / -1; font-size: 11px; color: var(--azul-tinta); margin-top: -1px; }
.visao-frescor[data-frescor="desatualizada"] { color: var(--ambar-texto); font-weight: 600; }
.cotacao-estado {
  margin: -2px 0 10px; padding: 8px 10px; border-radius: 6px; font-size: 12.5px; line-height: 1.4;
  background: var(--azul-fundo); color: var(--azul-tinta);
  border-left: 3px solid var(--azul);
}
.cotacao-estado:empty { display: none; }
.cotacao-estado[data-cobertura="baixa"] { background: var(--ambar-fundo); color: var(--ambar-texto); border-left-color: var(--ambar); }
.cotacao-sem { font-weight: 700; }

/* Mesa com mais de um representante: uma proposta por cartao, cada rep com a sua cor (A azul,
   B roxo, C ambar). A melhor e marcada por borda e texto — a tela nao aceita por ninguem. */
.mesa-propostas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin-top: 10px; }
.mesa-proposta {
  display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 6px;
  background: var(--superficie); border: 1px solid var(--borda); border-top: 3px solid var(--azul);
}
.mesa-proposta[data-rep="1"] { border-top-color: var(--roxo); }
.mesa-proposta[data-rep="2"] { border-top-color: var(--ambar); }
.mesa-proposta[data-melhor="1"] { border-color: var(--verde); border-top-width: 3px; }
.mesa-proposta-rep { font-size: 11.5px; font-weight: 700; color: var(--texto-2); overflow-wrap: anywhere; }
.mesa-proposta b { font-family: var(--fonte-titulo); font-size: 20px; font-variant-numeric: tabular-nums; }
.mesa-proposta i { font-size: 11.5px; font-style: normal; font-weight: 600; color: var(--texto-2); }
.mesa-proposta i[data-tom="bom"] { color: var(--verde-forte); }
.mesa-proposta i[data-tom="ruim"] { color: var(--vermelho-tinta); }

.cotacao-robo { font-size: 11.5px; opacity: .9; }

/* ── VISUAL SYSTEM 2.0 — bloco 3: ficha, estados de dado ─────────────────────
   Ficha: cada bloco de preco com a cor da sua FONTE (custo cinza, cotacao azul), igual a mesa
   e ao item do pedido — a mesma pergunta tem a mesma cor em todas as telas. */
.cartao-fonte { box-shadow: inset 4px 0 0 var(--texto-3), var(--sombra-cartao); padding-left: 16px; }
.cartao-fonte[data-fonte="cotacao"] { box-shadow: inset 4px 0 0 var(--azul), var(--sombra-cartao); }
.cartao-fonte[data-fonte="custo"] .linhas > .linha:first-child .linha-valor { font-family: var(--fonte-titulo); font-size: 20px; }
.cot-melhor {
  margin: -2px -2px 10px; padding: 10px 12px; border-radius: 6px; border-bottom: 0;
  background: var(--azul-fundo);
}
.cot-melhor-rotulo { color: var(--azul-tinta); }
.cot-melhor-valor { color: var(--azul-tinta); }
.cot-preco { font-variant-numeric: tabular-nums; }

/* Estados: vazio neutro, erro vermelho, sem conexao/dado velho ambar, sem permissao cinza.
   🚨 Ausencia de dado ("Cotacao nao disponivel") NAO e erro: continua neutra, nunca vermelha. */
.estado svg { width: 34px; height: 34px; }
.estado[data-tom="vazio"] { background: color-mix(in srgb, var(--neutro-1) 60%, var(--superficie)); border-style: dashed; }
.estado[data-tom="erro"] { background: color-mix(in srgb, var(--vermelho-fundo) 70%, var(--superficie)); border-width: 1px 1px 1px 4px; }
.estado[data-tom="erro"] .estado-titulo { color: var(--vermelho-tinta); }
.estado[data-tom="offline"], .estado[data-tom="velho"] {
  background: color-mix(in srgb, var(--ambar-fundo) 75%, var(--superficie));
  border-color: color-mix(in srgb, var(--ambar) 45%, var(--borda)); border-left: 4px solid var(--ambar);
}
.estado[data-tom="offline"] .estado-titulo, .estado[data-tom="velho"] .estado-titulo { color: var(--ambar-texto); }
.estado[data-tom="bloqueado"] { background: var(--neutro-1); }
.erro-bloco {
  margin: 8px 0; padding: 14px 16px; border-radius: var(--r); text-align: left;
  background: color-mix(in srgb, var(--vermelho-fundo) 70%, var(--superficie));
  border-left: 4px solid var(--vermelho); font-weight: 600;
}
.faixa-velho { border-left: 3px solid var(--ambar); }

/* ── CONTRASTE MEDIDO (scripts/auditoria/contraste.mjs, 16/09) ────────────────
   431 textos abaixo do minimo WCAG nas telas principais — a maioria antiga. Corrigido nos
   tokens acima e nos poucos pontos abaixo, que tinham cor propria. */
.nav-item { color: var(--texto-2); }
.segmento { color: var(--texto-2); }
.topo-evento { color: #FF5A60; }
.btn-sucesso { background: #0A6E3F; }
.btn-sucesso:active { background: #085C34; }
.decisao-linha .dec:first-child .dec-rot { color: var(--texto-2); }
small { color: inherit; }
/* Item ativo: o TEXTO usa a tinta vermelha (4,5:1+ nos dois temas); a marca continua no icone e na faixa. */
.nav-item[aria-current="page"], .nav-item[aria-current="page"] span { color: var(--vermelho-tinta); }
.nav-item[aria-current="page"] svg { fill: var(--vermelho); }

/* ── RESUMO FINANCEIRO DO PRE-PEDIDO + MELHORES/PIORES (Carlos, 17/09) ─────────
   planejado neutro · ofertas azul · decisoes grafite · economia verde · sobrecusto vermelho ·
   aguardando ambar · sem comparacao cinza. Compacto: nao empurra os produtos para longe. */
.rf { margin-top: 12px; display: grid; gap: 8px; }
.rf-linhas { display: grid; gap: 4px; }
@media (min-width: 720px) { .rf-linhas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }
.rf-linha {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 8px;
  padding: 8px 10px; border-radius: 6px; background: var(--neutro-1); border-left: 3px solid var(--texto-3);
}
.rf-linha span { font-size: 12px; color: var(--texto-2); display: inline-flex; align-items: center; gap: 4px; }
.rf-linha b { font-family: var(--fonte-titulo); font-size: 20px; font-variant-numeric: tabular-nums; }
.rf-linha i { grid-column: 1 / -1; font-size: 11px; font-style: normal; color: var(--texto-2); }
@media (min-width: 720px) { .rf-linha { grid-template-columns: 1fr; } }
.rf-linha[data-tipo="ofertas"] { border-left-color: var(--azul); background: color-mix(in srgb, var(--azul-fundo) 70%, var(--superficie)); }
.rf-linha[data-tipo="ofertas"] b { color: var(--azul-tinta); }
.rf-linha[data-tipo="decisoes"] { border-left-color: var(--texto); }
.rf-variacao {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 9px 12px; border-radius: 6px; font-weight: 700;
}
.rf-variacao b { font-family: var(--fonte-titulo); font-size: 24px; font-variant-numeric: tabular-nums; }
.rf-variacao small { font-size: 14px; }
.rf-variacao[data-tom="bom"] { background: var(--verde-fundo); color: var(--verde-forte); }
.rf-variacao[data-tom="ruim"] { background: var(--vermelho-fundo); color: var(--vermelho-tinta); }
.rf-variacao[data-tom="igual"] { background: var(--neutro-1); color: var(--texto-2); }
.rf-sub { font-size: 12px; color: var(--texto-2); }
.rf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rf-chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 11px; border-radius: 18px;
  font-size: 12.5px; font-weight: 700; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-2);
}
button.rf-chip { cursor: pointer; }
.rf-chip[data-tom="bom"] { background: var(--verde-fundo); color: var(--verde-forte); border-color: color-mix(in srgb, var(--verde) 40%, var(--borda)); }
.rf-chip[data-tom="ruim"] { background: var(--vermelho-fundo); color: var(--vermelho-tinta); border-color: color-mix(in srgb, var(--vermelho) 35%, var(--borda)); }
.rf-chip[data-tom="espera"] { background: var(--ambar-fundo); color: var(--ambar-texto); }
.rf-chip:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.rf-comp { display: grid; gap: 2px; font-size: 12.5px; padding: 8px 10px; border-radius: 6px; background: color-mix(in srgb, var(--azul-fundo) 55%, var(--superficie)); }
.rf-comp [data-tom="bom"] { color: var(--verde-forte); font-weight: 700; }
.rf-comp [data-tom="ruim"] { color: var(--vermelho-tinta); font-weight: 700; }
.rf-comp i { font-style: normal; font-size: 11px; color: var(--texto-2); }
.refs-classe { margin-left: 6px; padding: 1px 7px; border-radius: 10px; font-size: 10.5px; letter-spacing: .03em; }
.refs-classe[data-classe="melhor"] { background: var(--verde-fundo); color: var(--verde-forte); }
.refs-classe[data-classe="pior"] { background: var(--vermelho-fundo); color: var(--vermelho-tinta); }
.refs-classe[data-classe="empate"], .refs-classe[data-classe="semComparacao"] { background: var(--neutro-2); color: var(--texto-2); }
.refs-estado { margin-left: 6px; font-size: 10.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--texto-2); }
.ref-frase[data-tom="bom"] { color: var(--verde-forte); }
.ref-frase[data-tom="ruim"] { color: var(--vermelho-tinta); }

/* ── PRECO-ALVO 6M (Carlos, 17/09) ─────────────────────────────────────────────
   Identidade PROPRIA, verde-azulado: nao pode parecer cotacao ao vivo (azul) nem oferta (roxo).
   E o melhor preco JA PAGO em 6 meses — referencia para negociar, nunca aceite.
   Contraste medido: --alvo-tinta #0A5F6B sobre branco 7,34:1 e sobre --alvo-fundo 6,51:1; escuro 10,5:1. */
:root { --alvo: #0F8391; --alvo-tinta: #0A5F6B; --alvo-fundo: #E6F4F5; }
@media (prefers-color-scheme: dark) {
  html:not([data-tema="claro"]) { --alvo: #3BB7C4; --alvo-tinta: #7ED6DF; --alvo-fundo: #0E2629; }
}
html[data-tema="escuro"] { --alvo: #3BB7C4; --alvo-tinta: #7ED6DF; --alvo-fundo: #0E2629; }

.ref[data-fonte="alvo"] .ref-rot::before, .mesa-ref[data-fonte="alvo"]::before { background: var(--alvo); }
.ref[data-fonte="alvo"] .ref-val, .mesa-ref[data-fonte="alvo"] b, .cref[data-fonte="alvo"] b { color: var(--alvo-tinta); }
.cref[data-fonte="alvo"][data-ausente="1"] b { color: var(--texto-2); }
.mesa-ref[data-fonte="alvo"] { background: color-mix(in srgb, var(--alvo-fundo) 70%, var(--superficie)); }
.mesa-ref[data-fonte="alvo"] i { color: var(--alvo-tinta); overflow-wrap: anywhere; }
.ref-alvo-pedir { display: block; font-weight: 750; color: var(--alvo-tinta); }

/* BUSCAR: quatro referencias = 2x2 no celular (4 colunas nao cabem em 320 px), 4 lado a lado com largura. */
.crefs[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
@media (min-width: 560px) { .crefs[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 620px) { .refs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Alerta com as linhas do preco (oferta, ultimo custo, alvo, origem, diferenca). */
.alerta-linhas { margin: 8px 0 0; display: grid; gap: 2px; font-size: 13px; }
.alerta-linhas > div { display: flex; justify-content: space-between; gap: 12px; }
.alerta-linhas dt { color: var(--texto-2); }
.alerta-linhas dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.alerta-linhas > div[data-fonte="alvo"] dd { color: var(--alvo-tinta); }

/* ── PIORES: SELECAO EM MASSA, RENEGOCIACAO E REALOCACAO (Carlos, 17/09) ─────────────────────
   Selecionar nao muda nada: o controle e grande (44px), escrito, e o cartao marcado ganha borda.
   A barra de acoes gruda no fim da tela ACIMA da navegacao inferior (nunca por cima dela). */
.sel-topo { display: flex; align-items: center; margin: 2px 0 8px; }
.sel-todos, .sel-item {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--neutro-3); border-radius: 8px; background: var(--superficie);
  font-weight: 700; font-size: 14px; cursor: pointer;
}
.sel-item { margin: -2px 0 8px; }
.sel-todos input, .sel-item input { width: 22px; height: 22px; accent-color: var(--vermelho); flex: 0 0 auto; }
.item-cartao[data-selecionado="1"] { outline: 2px solid var(--vermelho); outline-offset: -2px; }
.item-cartao[data-selecionado="1"] .sel-item { border-color: var(--vermelho); background: var(--vermelho-fundo); }

/* 🚨 FIXED, nao sticky: `html, body { overflow-x: hidden }` (a trava de rolagem lateral do app) faz o
   body virar container de rolagem, e `position: sticky` nunca gruda — medido no Chromium, 17/09. */
.sel-barra {
  position: fixed; z-index: 30; left: 12px; right: 12px; max-width: 876px; margin: 0 auto;
  bottom: calc(var(--nav-altura) + env(safe-area-inset-bottom) + 8px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--superficie); border: 1px solid var(--neutro-3);
  box-shadow: 0 6px 20px rgba(18, 19, 22, .16);
}
.sel-barra[hidden] { display: none; }
.sel-barra b { font-size: 14px; }
.sel-botoes { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: 6px; }
.sel-botoes .btn { min-height: 44px; padding: 0 12px; white-space: nowrap; }
@media (max-width: 420px) {
  .sel-barra { flex-direction: column; align-items: stretch; }
  .sel-botoes { grid-template-columns: 1fr 1fr; }
  .sel-botoes #sel-limpar { grid-column: 1 / -1; }
}
@media (min-width: 1100px) { .sel-barra { bottom: 12px; left: calc(var(--lateral, 232px) + 16px); right: 16px; } }
/* Teclado aberto no celular: as barras do rodape saem (ui.js/ancorarRodape). No desktop a
   navegacao e lateral e o teclado nao existe — a regra so vale abaixo de 1100px. */
@media (max-width: 1099px) { html[data-teclado] .navbar, html[data-teclado] .sel-barra { visibility: hidden; } }
/* Espaco no fim da lista enquanto a barra existe: o ultimo cartao nunca fica escondido embaixo dela. */
.bloco:has(> .sel-barra:not([hidden])) { padding-bottom: 150px; }

/* linha da rodada no cartao */
.rn-linha { margin: 8px 0 0; padding: 7px 10px; border-radius: 6px; font-size: 13px; font-weight: 650;
  background: var(--neutro-1); color: var(--texto-2); overflow-wrap: anywhere; }
.rn-linha[data-tom="bom"] { background: color-mix(in srgb, var(--verde-fundo) 80%, var(--superficie)); color: var(--verde-forte); }
.rn-linha[data-tom="ruim"] { background: color-mix(in srgb, var(--vermelho-fundo) 80%, var(--superficie)); color: var(--vermelho-tinta); }
.rn-linha[data-tom="espera"], .rn-linha[data-tom="alerta"] { background: var(--ambar-fundo); color: var(--ambar-tinta); }

/* bloco Renegociacoes */
.rn-rodada + .rn-rodada { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--neutro-2); }
.rn-rodada-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.rn-numeros { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.rn-numeros span { padding: 3px 8px; border-radius: 999px; background: var(--neutro-1); font-size: 12.5px; font-weight: 650; color: var(--texto-2); }
.rn-numeros span[data-tom="bom"] { background: var(--verde-fundo); color: var(--verde-forte); }
.rn-numeros span[data-tom="ruim"] { background: var(--vermelho-fundo); color: var(--vermelho-tinta); }
.rn-numeros span[data-tom="alerta"] { background: var(--ambar-fundo); color: var(--ambar-tinta); }
.rn-economia { margin: 4px 0; font-size: 13.5px; color: var(--verde-forte); }
.rn-economia i { display: block; font-style: normal; font-size: 12px; color: var(--texto-2); }
.rn-itens summary, .rn-lista summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 650; }
.rn-itens ul, .rn-lista ul { margin: 0; padding: 0 0 0 16px; }
.rn-itens li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 4px 0; font-size: 13px; }
.rn-itens li span { overflow-wrap: anywhere; }
.rn-itens li i { grid-column: 1 / -1; font-style: normal; font-size: 12px; color: var(--texto-2); }
.rn-itens li[data-tom="bom"] b, .rn-itens li[data-tom="bom"] i { color: var(--verde-forte); }
.rn-itens li[data-tom="ruim"] b, .rn-itens li[data-tom="ruim"] i { color: var(--vermelho-tinta); }
.rn-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rn-acoes .btn { min-height: 44px; }
.rn-contagem { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.rn-vivas { margin: 8px 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--ambar-fundo); }
.rn-vivas .rl-titulo { margin-top: 0; }
.rn-viva p { margin: 4px 0 6px; font-size: 13.5px; overflow-wrap: anywhere; }
.rn-viva p i { display: block; font-style: normal; color: var(--texto-2); }
.rn-viva + .rn-viva { margin-top: 8px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--ambar-tinta) 20%, transparent); }
.rn-gerar .motivo { margin: 2px 0; font-size: 12.5px; }
.rn-baixando { margin: 8px 0 0; padding: 8px 10px; border-radius: 6px; background: var(--verde-fundo); color: var(--verde-forte); font-weight: 650; font-size: 13.5px; }
.rn-reps { border: 0; margin: 10px 0; padding: 0; }
.rn-reps legend, .campo-rotulo { display: block; font-weight: 700; font-size: 13.5px; margin: 10px 0 6px; }
.rn-rep, .rl-escolha { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 8px 10px;
  border: 1px solid var(--neutro-3); border-radius: 8px; margin-bottom: 6px; cursor: pointer; }
.rn-rep input, .rl-escolha input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--vermelho); flex: 0 0 auto; }
.rn-rep i, .rl-escolha i { display: block; font-style: normal; font-size: 12.5px; color: var(--texto-2); }
.campo-select, .rl-previa textarea, #rl-busca {
  display: block; width: 100%; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--neutro-3); border-radius: 6px; background: var(--superficie); font-size: 16px;
}
.rl-previa textarea { margin-top: 6px; resize: vertical; }
.rn-criada p { margin: 0 0 8px; }

/* realocacao */
.rl-resultados { display: grid; gap: 6px; margin-top: 8px; }
.rl-destino { display: grid; gap: 2px; text-align: left; width: 100%; min-height: 56px; padding: 10px 12px;
  border: 1px solid var(--neutro-3); border-radius: 8px; background: var(--superficie); cursor: pointer; }
.rl-destino span { font-size: 13px; color: var(--texto-2); }
.rl-destino i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--azul-tinta); }
.rl-destino:disabled { opacity: .6; cursor: not-allowed; }
.rl-resumo { margin: 0 0 8px; font-size: 15px; }
.rl-novo { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--ambar-tinta); }
.rl-troca { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rl-troca div { padding: 8px 10px; border-radius: 6px; background: var(--neutro-1); min-width: 0; }
.rl-troca span { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-2); overflow-wrap: anywhere; }
.rl-troca b { font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 359px) { .rl-troca { grid-template-columns: 1fr; } }
.rl-titulo { font-size: 14px; margin: 14px 0 6px; }
.rl-conflito { border: 1px solid var(--ambar); border-radius: 8px; margin: 0 0 8px; padding: 8px; background: color-mix(in srgb, var(--ambar-fundo) 60%, var(--superficie)); }
.rl-conflito legend { font-size: 13px; font-weight: 700; padding: 0 4px; overflow-wrap: anywhere; }
.rl-faixa { margin: 0 0 8px; padding: 8px 10px; border-radius: 6px; background: var(--neutro-1);
  border-left: 4px solid var(--texto-3); font-size: 13px; color: var(--texto-2); overflow-wrap: anywhere; }
.rl-faixa b { color: var(--texto); }
.item-cartao[data-realocado="1"] { opacity: .88; }