/* ==========================================================================
   123 FINANCEIRO - SISTEMA DE DESIGN
   ==========================================================================

   Este arquivo e a camada visual inteira do sistema. Ele existe porque durante
   semanas o dono olhou para tabelas cinzas e nao teve vontade de abrir a tela -
   e um sistema que o unico operador evita olhar e um sistema que desanda em
   silencio.

   TRES REGRAS QUE GOVERNAM TUDO AQUI
   ----------------------------------
   1. COR TEM SIGNIFICADO. Verde e dinheiro entrando ou indicador saudavel.
      Vermelho e dinheiro saindo ou risco. Ambar e "confira isto". Nada de cor
      decorativa: se um elemento e colorido, a cor esta dizendo alguma coisa.

   2. NUMERO E O PROTAGONISTA. Esta empresa aperta por GIRO, nao por margem -
      vende com ~50% e ainda assim falta caixa, porque paga em dias e recebe em
      semanas. Entao numero de dinheiro tem fonte tabular, alinhamento a
      direita e peso proprio. Nunca compete com o rotulo.

   3. PROVENIENCIA E VISIVEL. Depois do incidente de duplicidade de 26/08/2026,
      todo numero precisa poder dizer de onde veio. Por isso existe
      .proveniencia, e por isso .estimado nao se parece com valor medido.

   O CONTRATO DE CLASSES E PRESERVADO
   ----------------------------------
   As 12 telas ja usam estes nomes (.bloco, .tabela, .dre, .virada, .score...).
   Nenhum foi renomeado: isto e re-skin, nao reescrita. Trocar nome de classe
   quebraria tela sem trazer nada em troca.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* --- neutros: a escala que sustenta 90% da tela ------------------------ */
  --n-0:   #ffffff;
  --n-25:  #fbfcfd;
  --n-50:  #f6f7f9;
  --n-100: #eef1f4;
  --n-150: #e3e7ec;
  --n-200: #d5dbe2;
  --n-300: #b8c1cc;
  --n-400: #8d97a4;
  --n-500: #6b7684;
  --n-600: #515b67;
  --n-700: #3b444e;
  --n-800: #262d35;
  --n-900: #171d24;
  --n-950: #0e1116;

  /* --- papeis semanticos (o que o resto do CSS usa) ---------------------- */
  --tinta:       var(--n-900);
  --tinta-2:     var(--n-700);
  /* #6b7684 (--n-500) dava 4.31:1 sobre o fundo da pagina, abaixo do minimo
     de 4.5 para texto pequeno - e quase todo texto secundario do sistema usa
     este token: rotulo de KPI, nota de rodape, nome de categoria em tabela.
     Um tom mais escuro passa com folga (5.29 sobre o fundo, 5.67 sobre o
     cartao) e continua nitidamente apagado ao lado de --tinta. */
  --fraco:       #5d6875;
  --fraquissimo: var(--n-400);
  --linha:       var(--n-150);
  --linha-forte: var(--n-200);
  --fundo:       var(--n-50);
  --card:        var(--n-0);
  --card-2:      var(--n-25);
  --cabecalho:   var(--n-100);
  --hover:       var(--n-100);

  /* --- acento: azul de confianca ---------------------------------------- */
  --acento:       #1257d1;
  --tinta-no-acento: #ffffff;
  --acento-forte: #0e46a8;
  --acento-fraco: #eaf1fe;
  --acento-linha: #bed5fb;

  /* --- sol: aquecedor solar. Acento secundario, usado com parcimonia ----- */
  --sol:       #d98200;
  --sol-fraco: #fff4e2;

  /* --- semanticos ------------------------------------------------------- */
  --ok:           #0d7a45;
  --ok-fraco:     #e6f6ed;
  --ok-linha:     #a9e0c2;
  --erro:         #c0362c;
  --erro-fraco:   #fdedeb;
  --erro-linha:   #f4b8b1;
  /* Ambar de TEXTO, nao de fundo. #a86b00 dava 4.1:1 sobre --alerta-bg, que e
     justamente onde ele mais aparece (chip de aviso, dias que faltam). Um tom
     abaixo passa em ambos os fundos sem perder a leitura de "atencao". */
  --alerta:       #8a5800;
  --alerta-bg:    #fff6e5;
  --alerta-linha: #f0cd8a;
  --info:         #0b6a8f;
  --info-fraco:   #e6f4fa;

  /* --- espaco: base 4px -------------------------------------------------- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px; --e12: 48px;

  /* --- raio -------------------------------------------------------------- */
  --r-p: 6px; --r-m: 9px; --r-g: 13px; --r-gg: 18px; --r-pill: 999px;

  /* --- profundidade: sombras curtas, nada de nuvem ----------------------- */
  --sombra-1: 0 1px 2px rgba(16,22,30,.05), 0 1px 1px rgba(16,22,30,.03);
  --sombra-2: 0 2px 4px rgba(16,22,30,.05), 0 4px 12px rgba(16,22,30,.05);
  --sombra-3: 0 8px 28px rgba(16,22,30,.11);
  --anel: 0 0 0 3px var(--acento-linha);

  /* --- tipografia -------------------------------------------------------- */
  --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;

  --t-micro: 11px; --t-mini: 12px; --t-peq: 13px; --t-corpo: 14.5px;
  --t-med: 16px;   --t-tit: 19px;  --t-g: 23px;   --t-gg: 30px; --t-ggg: 40px;

  --lateral: 218px;
  --transicao: 140ms cubic-bezier(.4, 0, .2, 1);
}

/* --- modo escuro: mesmo sistema, papeis reatribuidos --------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    /* A ESCALA NEUTRA TAMBEM VIRA NO ESCURO.
       Ate 27/08/2026 so os tokens semanticos viravam, e a escala crua ficava
       clara. Como boa parte da folha usa `var(--n-100)` direto como fundo
       discreto - chip, tag, selo, barra de rolagem -, no tema escuro esses
       elementos ficavam com fundo quase branco e texto claro por cima: o chip
       "base: competencia" media 2.55:1, contra o minimo de 4.5 exigido.
       So a ponta clara vira, porque so ela e usada como SUPERFICIE. De --n-500
       para baixo a escala serve como COR DE TEXTO e precisa continuar escura
       para funcionar sobre superficie clara. */
    --n-0: #12171d; --n-25: #151a21; --n-50: #1a2029; --n-100: #1f2630;
    --n-150: #242c37; --n-200: #2b333f; --n-300: #3d4653; --n-400: #5a6573;
    --tinta: #e7edf4; --tinta-2: #c2ccd8; --fraco: #8d99a8; --fraquissimo: #6d7987;
    --linha: #262d36; --linha-forte: #333c47;
    --fundo: #0d1015; --card: #151a21; --card-2: #1a2029;
    --cabecalho: #1b212a; --hover: #1f2630;
    --acento: #4d8ef7; --acento-forte: #7aabfa; --acento-fraco: #14243d;
  --tinta-no-acento: #0a1420;
    /* Texto branco sobre o azul claro do tema escuro dava 3.22:1, abaixo
       do minimo. O azul nao pode escurecer (sumiria no fundo preto),
       entao quem inverte e o texto. */
    --tinta-no-acento: #0a1420;
    --acento-linha: #23405f;
    --sol: #f0a63a; --sol-fraco: #2b2113;
    --ok: #3dbd7d; --ok-fraco: #10261c; --ok-linha: #1d4433;
    --erro: #f2685c; --erro-fraco: #2b1614; --erro-linha: #522722;
    --alerta: #e0a33c; --alerta-bg: #2a2013; --alerta-linha: #4d3c1c;
    --info: #4aaed4; --info-fraco: #10242c;
    --sombra-1: 0 1px 2px rgba(0,0,0,.4);
    --sombra-2: 0 2px 6px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
    --sombra-3: 0 12px 36px rgba(0,0,0,.55);
  }
}
:root[data-tema="escuro"] {
  /* A ESCALA NEUTRA TAMBEM VIRA NO ESCURO.
     Ate 27/08/2026 so os tokens semanticos viravam, e a escala crua ficava
     clara. Como boa parte da folha usa `var(--n-100)` direto como fundo
     discreto - chip, tag, selo, barra de rolagem -, no tema escuro esses
     elementos ficavam com fundo quase branco e texto claro por cima: o chip
     "base: competencia" media 2.55:1, contra o minimo de 4.5 exigido.
     So a ponta clara vira, porque so ela e usada como SUPERFICIE. De --n-500
     para baixo a escala serve como COR DE TEXTO e precisa continuar escura
     para funcionar sobre superficie clara. */
  --n-0: #12171d; --n-25: #151a21; --n-50: #1a2029; --n-100: #1f2630;
  --n-150: #242c37; --n-200: #2b333f; --n-300: #3d4653; --n-400: #5a6573;
  --tinta: #e7edf4; --tinta-2: #c2ccd8; --fraco: #8d99a8; --fraquissimo: #6d7987;
  --linha: #262d36; --linha-forte: #333c47;
  --fundo: #0d1015; --card: #151a21; --card-2: #1a2029;
  --cabecalho: #1b212a; --hover: #1f2630;
  --acento: #4d8ef7; --acento-forte: #7aabfa; --acento-fraco: #14243d;
  --acento-linha: #23405f;
  --sol: #f0a63a; --sol-fraco: #2b2113;
  --ok: #3dbd7d; --ok-fraco: #10261c; --ok-linha: #1d4433;
  --erro: #f2685c; --erro-fraco: #2b1614; --erro-linha: #522722;
  --alerta: #e0a33c; --alerta-bg: #2a2013; --alerta-linha: #4d3c1c;
  --info: #4aaed4; --info-fraco: #10242c;
  --sombra-1: 0 1px 2px rgba(0,0,0,.4);
  --sombra-2: 0 2px 6px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  --sombra-3: 0 12px 36px rgba(0,0,0,.55);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--t-corpo)/1.55 var(--fonte);
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font-size: var(--t-g); line-height: 1.25; margin: 0 0 var(--e1);
     letter-spacing: -.022em; font-weight: 680; }
h2 { font-size: var(--t-med); line-height: 1.3; margin: var(--e8) 0 var(--e3);
     letter-spacing: -.014em; font-weight: 650; }
h3 { font-size: var(--t-peq); margin: var(--e5) 0 var(--e2); color: var(--fraco);
     font-weight: 620; letter-spacing: .02em; }
p  { margin: 0 0 var(--e3); }

a { color: var(--acento);
    text-decoration-color: color-mix(in srgb, var(--acento) 32%, transparent);
    text-underline-offset: 2px; transition: color var(--transicao); }
a:hover { color: var(--acento-forte); text-decoration-color: currentColor; }

:focus-visible { outline: none; box-shadow: var(--anel); border-radius: var(--r-p); }
::selection { background: var(--acento-fraco); color: var(--acento-forte); }

/* Numeros de dinheiro. Tabular para que as colunas se alinhem digito a digito -
   sem isso, comparar valor com o olho vira trabalho. */
.v, .grande, .valor, td.v, th.v, .kpi .numero, .virada .data {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   3. ESQUELETO: navegacao lateral por modulo
   --------------------------------------------------------------------------
   Onze links espremidos numa barra horizontal nao formavam grupo nenhum -
   "Estoque" ficava do lado de "Extrato" sem que nada dissesse que uma coisa e
   mercadoria e a outra e banco. Olist e Conta Azul agrupam por modulo na
   lateral, e a razao e boa: o menu passa a ensinar o sistema.
   ========================================================================== */
.app { display: grid; grid-template-columns: var(--lateral) 1fr; min-height: 100vh; }

.lateral {
  background: var(--card);
  border-right: 1px solid var(--linha);
  padding: var(--e5) 0 var(--e8);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--e2);
}

.marca {
  display: flex; align-items: center; gap: var(--e2);
  padding: 0 var(--e5) var(--e5);
  font-weight: 730; font-size: var(--t-med); letter-spacing: -.03em;
  color: var(--tinta); text-decoration: none;
}
.marca .selo {
  width: 27px; height: 27px; border-radius: 8px; flex: none;
  background: linear-gradient(140deg, var(--sol), #c25f00);
  color: #fff; display: grid; place-items: center;
  font-size: var(--t-mini); font-weight: 800; letter-spacing: -.04em;
  box-shadow: 0 2px 6px rgba(217,130,0,.32);
}
.marca span { color: var(--fraco); font-weight: 500; }

.grupo-nav { padding: 0 var(--e3); }
/* `>` alcancava so "VISAO", que e filho direto. Os outros quatro rotulos
 * ficam dentro de `<nav class="grupo">` - netos - e por isso renderizavam sem
 * estilo nenhum, na mesma linha do primeiro link. Descendente pega os cinco. */
.grupo-nav .rotulo {
  display: block;
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .09em;
  /* --fraquissimo dava 3.94:1 no escuro para texto de 11px, abaixo do minimo
     de 4.5 para texto pequeno. --fraco passa com folga e o rotulo continua
     discreto - ele nao compete com os links, so agrupa. */
  color: var(--fraco); font-weight: 680;
  padding: var(--e3) var(--e2) var(--e1);
}
.grupo-nav nav.grupo { display: flex; flex-direction: column; }
.lateral nav { display: flex; flex-direction: column; gap: 1px; }
.lateral nav a {
  display: flex; align-items: center; gap: var(--e2);
  padding: 7px var(--e2) 7px 10px;
  border-radius: var(--r-p);
  color: var(--tinta-2); text-decoration: none;
  font-size: var(--t-peq); font-weight: 520;
  transition: background var(--transicao), color var(--transicao);
  position: relative;
}
.lateral nav a:hover { background: var(--hover); color: var(--tinta); }
.lateral nav a.ativo {
  background: var(--acento-fraco); color: var(--acento-forte); font-weight: 640;
}
.lateral nav a.ativo::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 15px; border-radius: 0 3px 3px 0; background: var(--acento);
}
.lateral nav a .conta {
  margin-left: auto; font-size: var(--t-micro); font-weight: 700;
  background: var(--erro); color: #fff;
  border-radius: var(--r-pill); padding: 1px 6px; min-width: 18px; text-align: center;
}
/* Esta era a unica regra que combinava fundo E cor da escala crua. Com a
   escala virando no escuro, os dois andariam para o mesmo lado e o texto
   sumiria. Tokens semanticos resolvem nos dois temas. */
.lateral nav a .conta.calmo { background: var(--hover); color: var(--fraco); }

.area { display: flex; flex-direction: column; min-width: 0; }

/* Barra superior: contexto e acoes globais, nao navegacao. */
.topo {
  background: color-mix(in srgb, var(--card) 86%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linha);
  display: flex; gap: var(--e5); align-items: center;
  padding: var(--e3) var(--e6);
  position: sticky; top: 0; z-index: 20; min-height: 54px;
}
.topo .titulo-pagina { font-weight: 650; font-size: var(--t-corpo); letter-spacing: -.01em; }
.topo .direita { margin-left: auto; display: flex; align-items: center; gap: var(--e3); }

.tema-botao {
  background: none; border: 1px solid var(--linha); border-radius: var(--r-p);
  color: var(--fraco); cursor: pointer; padding: 5px 9px; font: inherit;
  font-size: var(--t-mini); line-height: 1.4; transition: all var(--transicao);
}
.tema-botao:hover { color: var(--tinta); border-color: var(--linha-forte);
                    background: var(--card-2); }

main { max-width: 1240px; width: 100%; margin: 0 auto;
       padding: var(--e6) var(--e6) var(--e12); }

footer {
  max-width: 1240px; width: 100%; margin: 0 auto;
  padding: var(--e5) var(--e6) var(--e8);
  color: var(--fraquissimo); font-size: var(--t-mini);
  border-top: 1px solid var(--linha);
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lateral {
    position: static; height: auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; border-right: 0; border-bottom: 1px solid var(--linha);
    padding: var(--e3) var(--e4); gap: var(--e3);
  }
  .marca, .grupo-nav { padding: 0; }
  .grupo-nav > .rotulo { display: none; }
  .lateral nav { flex-direction: row; flex-wrap: wrap; gap: var(--e1); }
  .lateral nav a.ativo::before { display: none; }
  main, footer { padding-left: var(--e4); padding-right: var(--e4); }
}

/* ==========================================================================
   4. SUPERFICIES
   ========================================================================== */
.bloco, .cartao, .dre {
  background: var(--card);
  border: 1px solid var(--linha);
  border-radius: var(--r-g);
  box-shadow: var(--sombra-1);
}
.bloco  { padding: var(--e4) var(--e5); }
.cartao { padding: var(--e5); margin-bottom: var(--e4); }
.dre    { padding: var(--e6); margin-bottom: var(--e6); }

.bloco h2, .cartao h2 {
  margin: 0 0 var(--e2); font-size: var(--t-mini); color: var(--fraco);
  font-weight: 640; text-transform: uppercase; letter-spacing: .07em;
}
.cartao h2 { font-size: var(--t-corpo); text-transform: none; letter-spacing: -.01em;
             color: var(--tinta); }

.tres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(272px, 100%), 1fr));
  gap: var(--e4);
}

/* Cabecalho de secao: divide DINHEIRO de RESULTADO. Sao perguntas diferentes -
   quando o dinheiro entra e sai, e quanto sobrou - e misturar as duas numa
   lista continua era o que deixava a tela confusa. */
.secao {
  display: flex; align-items: baseline; gap: var(--e3);
  margin: var(--e10) 0 var(--e3); padding-bottom: var(--e2);
  border-bottom: 2px solid var(--acento);
}
.secao h2 { margin: 0; font-size: var(--t-tit); letter-spacing: -.02em; font-weight: 680; }
.secao .sub { color: var(--fraco); font-size: var(--t-peq); }
.secao:first-of-type { margin-top: var(--e5); }

/* ==========================================================================
   5. NUMERO EM DESTAQUE
   ========================================================================== */
.grande {
  font-size: var(--t-gg); font-weight: 700; margin: 0 0 var(--e2);
  letter-spacing: -.032em; line-height: 1.1;
}
.grande.negativo, .negativo { color: var(--erro); }
.positivo { color: var(--ok); }

.kpi { display: flex; flex-direction: column; gap: var(--e1); }
.kpi .rotulo {
  font-size: var(--t-mini); color: var(--fraco); font-weight: 620;
  text-transform: uppercase; letter-spacing: .07em;
}
.kpi .numero { font-size: var(--t-gg); font-weight: 700; letter-spacing: -.032em;
               line-height: 1.1; }
.kpi .numero.negativo { color: var(--erro); }
.kpi .numero.positivo { color: var(--ok); }
.kpi .apoio { font-size: var(--t-peq); color: var(--fraco); }

/* Proveniencia: de onde o numero veio. Nasceu do incidente de duplicidade -
   valor medido no extrato e valor estimado por canal nao podem se parecer. */
.proveniencia {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--fraquissimo);
}
.proveniencia::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor;
}
.proveniencia.medido    { color: var(--ok); }
.proveniencia.estimado  { color: var(--alerta); }
.proveniencia.informado { color: var(--info); }
.estimado-valor { color: var(--alerta); }

/* ==========================================================================
   6. TABELAS
   ========================================================================== */
.tabela {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--card); border: 1px solid var(--linha);
  border-radius: var(--r-g); overflow: hidden;
  font-size: var(--t-peq); box-shadow: var(--sombra-1);
}
.tabela th {
  text-align: left; background: var(--cabecalho);
  padding: var(--e2) var(--e3); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--fraco); font-weight: 680; white-space: nowrap;
  border-bottom: 1px solid var(--linha);
}
/* O cabecalho NAO e sticky.
   Eu tinha posto `position: sticky; top: 54px` achando que ajudaria em tabela
   longa. Em tabela curta - e quase toda tabela dentro de cartao e curta - o
   cabecalho descola e FLUTUA POR CIMA da primeira linha, cobrindo os campos.
   Foi o que aconteceu na tela de cotacao: os inputs sumiam atras do "PRODUTO
   / QTD / PRECO". Cabecalho que cobre conteudo e pior que cabecalho que rola
   junto. */
.tabela td { padding: var(--e2) var(--e3); border-top: 1px solid var(--linha); }
.tabela tbody tr:first-child td { border-top: 0; }
.tabela tbody tr { transition: background var(--transicao); }
.tabela tbody tr:hover { background: var(--card-2); }
.tabela.mini { font-size: var(--t-mini); margin-top: var(--e2); }
.tabela.mini th, .tabela.mini td { padding: 5px var(--e2); }

.v { text-align: right; }
th.v { text-align: right; }
td.receita { color: var(--ok); font-weight: 600; }
td.despesa { color: var(--erro); font-weight: 600; }

.vazio {
  color: var(--fraco); font-style: italic; padding: var(--e6) var(--e3);
  text-align: center;
}
td .nota { display: block; font-size: var(--t-micro); color: var(--fraco);
           font-weight: 400; }
.nota { color: var(--fraco); font-size: var(--t-peq); }

/* Linhas que pedem atencao. A faixa lateral e o sinal; o fundo so acompanha. */
tr.sem-custo   td { background: var(--sol-fraco); }
tr.sem-custo   td:first-child { box-shadow: inset 3px 0 0 var(--sol); }
tr.conferir    td { background: var(--alerta-bg); }
tr.conferir    td:first-child { box-shadow: inset 3px 0 0 var(--alerta); }
tr.vencida     td { background: var(--erro-fraco); }
tr.vencida     td:first-child { box-shadow: inset 3px 0 0 var(--erro); }
tr.linha-negativa td { background: var(--erro-fraco); }

/* ==========================================================================
   7. DRE - a espinha dorsal, art. 187 da Lei 6.404/76
   --------------------------------------------------------------------------
   A ordem das linhas nao e escolha de layout, e a forma legal: receita bruta,
   deducoes, receita liquida, CMV, lucro bruto, despesas, resultado. Os totais
   intermediarios sao marcados porque e neles que se le o negocio.
   ========================================================================== */
.tabela-dre { width: 100%; border-collapse: collapse; max-width: 660px; }
.tabela-dre th {
  padding: var(--e2) var(--e1); text-align: left; font-size: var(--t-micro);
  color: var(--fraco); font-weight: 680; text-transform: uppercase;
  letter-spacing: .07em; border-bottom: 1px solid var(--linha);
}
.tabela-dre th.v { text-align: right; }
.tabela-dre td { padding: 9px var(--e1); border-bottom: 1px solid var(--linha); }
.tabela-dre .v { text-align: right; font-weight: 550; }
.tabela-dre td.recuo { padding-left: var(--e5); color: var(--fraco); }
.tabela-dre td.vazio { color: var(--linha); padding: 9px var(--e1); text-align: right; }
.tabela-dre .receita td { font-weight: 650; }

/* Subtotal: receita liquida, lucro bruto. Marcos de leitura. */
.tabela-dre .subtotal td {
  border-top: 1px solid var(--linha-forte); font-weight: 650;
  background: var(--card-2);
}
.tabela-dre .total td {
  border-top: 2px solid var(--tinta); border-bottom: none;
  font-size: var(--t-tit); font-weight: 730; padding-top: var(--e4);
  color: var(--ok); letter-spacing: -.02em;
}
.tabela-dre .total.negativo td { color: var(--erro); }
.tabela-dre .total small {
  display: block; font-size: var(--t-mini); font-weight: 500; color: var(--fraco);
  letter-spacing: 0;
}

.balanco h3, .balancete h3, .capital-giro h3 {
  font-size: var(--t-peq); margin: 0 0 var(--e2);
}
.balancete table { width: 100%; border-collapse: collapse; font-size: var(--t-peq); }
.balancete td, .balancete th {
  padding: var(--e2) var(--e1); border-bottom: 1px solid var(--linha);
}
.balancete th { text-align: left; font-size: var(--t-micro); color: var(--fraco);
                text-transform: uppercase; letter-spacing: .06em; font-weight: 680; }
.balancete .v, .balanco .v { text-align: right; font-variant-numeric: tabular-nums; }
.balanco tr.total td { border-top: 1px solid var(--tinta); font-weight: 650; }

.capital-giro { margin: var(--e8) 0; }
.capital-giro table { width: 100%; border-collapse: collapse; font-size: var(--t-peq); }
.capital-giro td { padding: var(--e2) var(--e1); border-bottom: 1px solid var(--linha); }
.capital-giro td.v { text-align: right; font-variant-numeric: tabular-nums;
                     font-weight: 550; }
.capital-giro td.nota { text-align: right; font-size: var(--t-micro); color: var(--fraco); }
.capital-giro td.recuo { padding-left: var(--e4); color: var(--fraco); }

.bloco table { width: 100%; border-collapse: collapse; font-size: var(--t-peq); }
.bloco td { padding: 5px var(--e1); border-bottom: 1px solid var(--linha); }
.bloco tr:last-child td { border-bottom: 0; }
.bloco .cab td { color: var(--fraco); font-weight: 650; font-size: var(--t-micro);
                 text-transform: uppercase; letter-spacing: .06em; }
.curva td { padding: 5px var(--e3); font-size: var(--t-peq); }

/* ==========================================================================
   8. AVISOS
   ========================================================================== */
.alerta, .ok, .erro, .alerta-vencidas, .alerta-congelado {
  border-radius: var(--r-m); padding: var(--e3) var(--e4); margin: var(--e4) 0;
  border: 1px solid; border-left-width: 4px; font-size: var(--t-peq);
}
.alerta { background: var(--alerta-bg); border-color: var(--alerta-linha);
          border-left-color: var(--alerta); color: var(--tinta); }
.ok     { background: var(--ok-fraco); border-color: var(--ok-linha);
          border-left-color: var(--ok); color: var(--ok); }
.erro   { background: var(--erro-fraco); border-color: var(--erro-linha);
          border-left-color: var(--erro); color: var(--erro); }

.alerta-vencidas {
  background: var(--erro-fraco); border-color: var(--erro-linha);
  border-left-color: var(--erro); margin: 0 0 var(--e5);
}
.alerta-vencidas h2 { margin-top: 0; color: var(--erro); text-transform: none;
                      font-size: var(--t-corpo); letter-spacing: -.01em; }

/* Mes anterior a abertura do razao: numero preservado, nao definitivo.
   Tracejado porque nao e alarme - e uma nota de rodape sobre o passado. */
.alerta-congelado {
  border: 1px dashed var(--linha-forte); border-left-width: 1px;
  background: var(--card-2); margin: 0 0 var(--e5);
}
.alerta-congelado h2 { margin-top: 0; font-size: var(--t-corpo); color: var(--fraco);
                       text-transform: none; letter-spacing: -.01em; }
.alerta-congelado p  { margin: var(--e2) 0 0; font-size: var(--t-peq); color: var(--fraco); }

.aviso { color: var(--alerta); font-size: var(--t-mini); margin: 0 0 var(--e2); }

/* ==========================================================================
   9. VIRADA DO SALDO
   --------------------------------------------------------------------------
   O numero mais importante do sistema: o dia em que o caixa vira negativo.
   A restricao desta empresa e giro, e esta e a leitura direta dela. Por isso
   tem tamanho de manchete e nao divide espaco com mais nada.
   ========================================================================== */
.virada {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e5);
  margin: 0 0 var(--e5); padding: var(--e4) var(--e5);
  border-radius: var(--r-g); border: 1px solid; border-left-width: 5px;
  box-shadow: var(--sombra-1);
}
.virada .rotulo {
  font-size: var(--t-mini); letter-spacing: .08em; text-transform: uppercase;
  font-weight: 680; opacity: .85;
}
.virada .data { font-size: var(--t-ggg); line-height: 1.05; font-weight: 740;
                letter-spacing: -.035em; }
.virada .detalhe { flex-basis: 100%; font-size: var(--t-peq); opacity: .9; }
.virada.ruim { color: var(--erro); background: var(--erro-fraco);
               border-color: var(--erro-linha); border-left-color: var(--erro); }
.virada.boa  { color: var(--ok); background: var(--ok-fraco);
               border-color: var(--ok-linha); border-left-color: var(--ok); }

/* ==========================================================================
   10. CONTROLES
   ========================================================================== */
select, input, textarea {
  font: inherit; font-size: var(--t-peq);
  padding: 7px var(--e2); border: 1px solid var(--linha-forte);
  border-radius: var(--r-p); background: var(--card); color: var(--tinta);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
select:hover, input:hover { border-color: var(--n-300); }
select:focus, input:focus, textarea:focus {
  outline: none; border-color: var(--acento); box-shadow: var(--anel);
}
select { cursor: pointer; }

.botao {
  background: var(--acento); color: var(--tinta-no-acento);
  border: 1px solid transparent;
  border-radius: var(--r-p); padding: 8px var(--e4);
  font: inherit; font-size: var(--t-peq); font-weight: 620; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--transicao), box-shadow var(--transicao),
              transform var(--transicao);
  box-shadow: var(--sombra-1);
}
.botao:hover { background: var(--acento-forte); color: var(--tinta-no-acento); box-shadow: var(--sombra-2); }
.botao:active { transform: translateY(1px); box-shadow: none; }
.botao.secundario {
  background: var(--card); color: var(--tinta); border-color: var(--linha-forte);
}
.botao.secundario:hover { background: var(--hover); color: var(--tinta);
                          border-color: var(--n-300); }
.botao.perigo { background: var(--erro); }
.botao.perigo:hover { background: color-mix(in srgb, var(--erro) 82%, #000); }
.botao[disabled] { opacity: .5; cursor: not-allowed; }

.link {
  background: none; border: 0; color: var(--acento); cursor: pointer; font: inherit;
  font-size: inherit; text-decoration: underline; text-underline-offset: 2px;
  padding: 0;
}
.link:hover { color: var(--acento-forte); }

.barra, .filtros {
  display: flex; gap: var(--e3); align-items: center; margin-bottom: var(--e4);
  flex-wrap: wrap;
}
.filtros { align-items: flex-end; gap: var(--e2); margin: 0 0 var(--e4); }
.barra label, .filtros label {
  color: var(--fraco); font-size: var(--t-mini); font-weight: 560;
}
.filtros input { width: 6.5rem; }

.form-lanc {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e3) var(--e4);
  background: var(--card); border: 1px solid var(--linha);
  border-radius: var(--r-g); padding: var(--e5); box-shadow: var(--sombra-1);
}
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo.grande-2 { grid-column: span 2; }
.campo label { font-size: var(--t-mini); color: var(--fraco); font-weight: 580; }
.campo.acoes { justify-content: flex-end; }

.detalhe { margin-top: var(--e8); }
.detalhe summary {
  cursor: pointer; color: var(--acento); font-size: var(--t-peq); font-weight: 580;
  padding: var(--e1) 0; list-style: none; display: inline-flex; align-items: center;
  gap: 5px;
}
.detalhe summary::before { content: "›"; transition: transform var(--transicao);
                           display: inline-block; font-size: var(--t-med); }
.detalhe[open] summary::before { transform: rotate(90deg); }
.detalhe summary::-webkit-details-marker { display: none; }

/* ==========================================================================
   11. ETIQUETAS
   ========================================================================== */
.chip {
  background: var(--n-100); color: var(--fraco); border-radius: var(--r-pill);
  padding: 3px 10px; font-size: var(--t-mini); font-weight: 580;
  display: inline-flex; align-items: center; gap: 5px;
}
.tag {
  background: var(--erro-fraco); color: var(--erro); border-radius: var(--r-p);
  padding: 2px 7px; font-size: var(--t-micro); font-weight: 650;
}
/* Nem toda etiqueta e um problema. `.tag` nasceu vermelha porque os primeiros
   usos eram "custo pendente" e "sem pedido" - coisas que faltam. Mas "agenda"
   e "sem data" sao classificacoes normais, e a tela de passivo tem trinta
   linhas assim: em vermelho, ela viraria um alarme sobre o aluguel de
   dezembro estar marcado para dezembro. */
.tag.calma {
  background: var(--cabecalho); color: var(--fraco); font-weight: 600;
}
.badge-parcial {
  background: var(--erro-fraco); color: var(--erro); border-radius: var(--r-p);
  padding: 2px 8px; font-size: var(--t-micro); font-weight: 720;
  text-transform: uppercase; letter-spacing: .04em;
}

/* ==========================================================================
   12. CONCILIACAO
   ========================================================================== */
.conciliacao { display: grid; grid-template-columns: 306px 1fr; gap: var(--e5);
               align-items: start; }
.lista-pendentes {
  list-style: none; margin: 0; padding: 0; background: var(--card);
  border: 1px solid var(--linha); border-radius: var(--r-g); overflow: hidden;
  box-shadow: var(--sombra-1);
}
.lista-pendentes li { border-bottom: 1px solid var(--linha); }
.lista-pendentes li:last-child { border-bottom: 0; }
.lista-pendentes a {
  display: grid; gap: 2px; padding: var(--e3); text-decoration: none; color: inherit;
  transition: background var(--transicao); border-left: 3px solid transparent;
}
.lista-pendentes a:hover { background: var(--card-2); }
.lista-pendentes a span { font-size: var(--t-mini); color: var(--fraco); }
.lista-pendentes li.ativo a {
  background: var(--acento-fraco); border-left-color: var(--acento);
}

.sugestao .cabecalho { display: flex; justify-content: space-between;
                       align-items: center; gap: var(--e3); }
.score {
  font-weight: 730; border-radius: var(--r-m); padding: 6px var(--e3);
  background: var(--n-100); text-align: center; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.score.alta  { background: var(--ok-fraco);   color: var(--ok); }
.score.media { background: var(--alerta-bg);  color: var(--alerta); }
.score.baixa { background: var(--erro-fraco); color: var(--erro); }
.score small { display: block; font-size: var(--t-micro); font-weight: 620;
               text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.motivos { margin: var(--e2) 0; padding-left: var(--e5); color: var(--fraco);
           font-size: var(--t-peq); }
.motivos li { margin-bottom: 2px; }
.sugestao .acoes { display: flex; gap: var(--e2); margin-top: var(--e3); }

@media (max-width: 900px) {
  .form-lanc { grid-template-columns: 1fr 1fr; }
  .conciliacao { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .form-lanc { grid-template-columns: 1fr; }
  .campo.grande-2 { grid-column: span 1; }
  .virada .data { font-size: var(--t-gg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   13. FAIXA DE INDICADORES
   --------------------------------------------------------------------------
   O que se le antes de qualquer tabela. Quatro numeros, e a ordem nao e
   arbitraria: resultado, caixa, e as duas pontas do giro. Numa empresa que
   vende com boa margem e mesmo assim aperta, "a receber" ao lado de "a pagar"
   e a leitura que explica o aperto.
   ========================================================================== */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(212px, 100%), 1fr));
  gap: var(--e3); margin: 0 0 var(--e6);
}
.kpis .bloco { padding: var(--e4); display: flex; flex-direction: column; gap: 2px; }
.kpis .bloco.destaque { border-color: var(--acento-linha); background: var(--acento-fraco); }
.kpis .rotulo {
  font-size: var(--t-micro); color: var(--fraco); font-weight: 680;
  text-transform: uppercase; letter-spacing: .08em;
}
.kpis .numero {
  font-size: var(--t-g); font-weight: 720; letter-spacing: -.03em; line-height: 1.15;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.kpis .numero.negativo { color: var(--erro); }
.kpis .numero.positivo { color: var(--ok); }
.kpis .apoio { font-size: var(--t-mini); color: var(--fraco); margin-top: 2px; }
.kpis .apoio strong { color: var(--tinta-2); font-weight: 620; }

/* ==========================================================================
   14. TABELA LARGA
   --------------------------------------------------------------------------
   Tabela com muitas colunas (notas de venda tem onze) nao pode empurrar a
   pagina: quem rola horizontal e a tabela, dentro do proprio quadro. Sem isto
   o corpo inteiro desliza e a navegacao lateral sai de vista.
   ========================================================================== */
.rolavel {
  overflow-x: auto; overflow-y: visible;
  border-radius: var(--r-g); border: 1px solid var(--linha);
  box-shadow: var(--sombra-1); background: var(--card);
  scrollbar-width: thin;
}
.rolavel > .tabela { border: 0; border-radius: 0; box-shadow: none; min-width: 100%; }
.rolavel::-webkit-scrollbar { height: 9px; }
.rolavel::-webkit-scrollbar-track { background: var(--card-2); }
.rolavel::-webkit-scrollbar-thumb {
  background: var(--n-200); border-radius: var(--r-pill);
  border: 2px solid var(--card-2);
}
.rolavel::-webkit-scrollbar-thumb:hover { background: var(--n-300); }

/* ==========================================================================
   15. REGUA DE FOLEGO
   --------------------------------------------------------------------------
   Substitui os quatro numeros soltos que abriam a tela. A pergunta do dono nao
   e "quanto eu devo" - e "meu dinheiro aguenta?". Isso nao se responde com um
   total, se responde com uma PROGRESSAO: o mesmo saldo atravessando o tempo,
   lido da esquerda para a direita.

   O numero que decide e o que SOBRA. Por isso ele e o maior de cada marco, e o
   que sai e o que entra ficam abaixo, em corpo menor: sao a explicacao, nao a
   conclusao.
   ========================================================================== */
.folego {
  display: flex; align-items: stretch; gap: var(--e2);
  margin: 0 0 var(--e5); flex-wrap: wrap;
}
.folego .marco {
  flex: 1 1 210px; min-width: 195px;
  background: var(--card); border: 1px solid var(--linha);
  border-radius: var(--r-g); padding: var(--e4);
  box-shadow: var(--sombra-1);
  display: flex; flex-direction: column; gap: 3px;
}
.folego .marco.agora { border-color: var(--acento-linha); background: var(--acento-fraco); }
.folego .rotulo {
  font-size: var(--t-micro); color: var(--fraco); font-weight: 680;
  text-transform: uppercase; letter-spacing: .08em;
}
.folego .numero {
  font-size: var(--t-gg); font-weight: 730; letter-spacing: -.035em;
  line-height: 1.1; font-variant-numeric: tabular-nums; margin-top: 2px;
}
.folego .numero.negativo { color: var(--erro); }

/* Fluxo: o que sai e o que entra. Explicam o salto entre um marco e o
   seguinte - por isso vem depois do numero, nao antes. */
.folego .fluxo {
  display: flex; flex-direction: column; gap: 1px; margin-top: var(--e2);
  padding-top: var(--e2); border-top: 1px solid var(--linha);
  font-size: var(--t-mini); font-variant-numeric: tabular-nums;
}
.folego .fluxo span { display: flex; justify-content: space-between; gap: var(--e3); }
.folego .fluxo .rot { color: var(--fraco); font-weight: 560; text-transform: none;
                      letter-spacing: 0; font-size: var(--t-mini); }
.folego .fluxo .sai   { color: var(--erro); font-weight: 620; }
.folego .fluxo .entra { color: var(--ok); font-weight: 620; }

.folego .seta {
  display: flex; align-items: center; color: var(--fraquissimo);
  font-size: var(--t-tit); flex: 0 0 auto; padding: 0 2px;
}
@media (max-width: 760px) { .folego .seta { display: none; } }

/* ==========================================================================
   16. COMPROMISSO SEM DATA
   --------------------------------------------------------------------------
   Divida e provisao existem, mas nao tem QUANDO. Antes somavam com boleto da
   semana e faziam "a pagar - 30 dias" chegar a R$ 57.123,67 para quem tinha
   R$ 13.051,69 na conta - um numero 49 vezes maior que a saida real de cinco
   dias, e que so servia para dar panico.

   Aqui elas ficam visiveis e SEM ALARME: tom neutro, sem vermelho, fora de
   qualquer janela de tempo. Divida nao e emergencia; e posicao.
   ========================================================================== */
.sem-data {
  background: var(--card-2); border: 1px solid var(--linha);
  border-left: 4px solid var(--n-300);
  border-radius: var(--r-m); padding: var(--e4) var(--e5); margin: 0 0 var(--e5);
}
.sem-data .cabeca {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e1);
}
.sem-data h2 {
  margin: 0; font-size: var(--t-corpo); font-weight: 650; color: var(--tinta-2);
  text-transform: none; letter-spacing: -.01em;
}
.sem-data .soma {
  font-size: var(--t-med); font-weight: 700; color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}
.sem-data .explica { font-size: var(--t-mini); color: var(--fraco); margin: 0 0 var(--e3); }
.sem-data table { width: 100%; border-collapse: collapse; font-size: var(--t-peq); }
.sem-data td { padding: 6px 0; border-top: 1px solid var(--linha); }
.sem-data tr:first-child td { border-top: 0; }
.sem-data td.v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 620; }
.sem-data td .porque { display: block; font-size: var(--t-micro); color: var(--fraco); }

/* ==========================================================================
   17. ZONA DE ARRASTAR ARQUIVO
   --------------------------------------------------------------------------
   Ate 26/08/2026 nao havia como o dono importar as proprias notas: ele emitia
   no Tiny e dependia de alguem com acesso ao disco do servidor rodar a
   varredura de pasta. As notas de venda pararam em 14/08 por causa disso.
   ========================================================================== */
.solta {
  border: 2px dashed var(--linha-forte); border-radius: var(--r-g);
  background: var(--card-2); padding: var(--e10) var(--e5); margin: 0 0 var(--e5);
  display: flex; flex-direction: column; align-items: center; gap: var(--e2);
  text-align: center; transition: all var(--transicao); cursor: default;
}
.solta strong { font-size: var(--t-med); font-weight: 650; letter-spacing: -.01em; }
.solta span { font-size: var(--t-peq); color: var(--fraco); }
.solta.ativa {
  border-color: var(--acento); background: var(--acento-fraco);
  border-style: solid;
}
.solta.ativa strong { color: var(--acento-forte); }
.solta.ocupada { opacity: .6; pointer-events: none; }

/* ==========================================================================
   18. FICHA DE PRODUTO
   --------------------------------------------------------------------------
   A faixa de familia e a unica parte desta tela que e REGRA e nao informacao:
   baixa e alta pressao sao tecnologias diferentes - um tubo BP e um recipiente
   de agua de vidro duplo, um AP e um trocador de calor com haste de cobre - e
   o banco recusa compor produto de uma familia com caixa da outra.
   ========================================================================== */
.familia {
  display: inline-block; font-size: var(--t-micro); font-weight: 750;
  letter-spacing: .06em; padding: 2px 7px; border-radius: var(--r-p);
}
.familia.bp { background: var(--info-fraco); color: var(--info); }
.familia.ap { background: var(--sol-fraco); color: var(--sol); }

.ficha-familia {
  display: flex; flex-wrap: wrap; gap: var(--e5);
  border: 1px solid var(--linha); border-left-width: 4px;
  border-radius: var(--r-g); padding: var(--e4) var(--e5); margin: 0 0 var(--e5);
  background: var(--card);
}
.ficha-familia.bp { border-left-color: var(--info); background: var(--info-fraco); }
.ficha-familia.ap { border-left-color: var(--sol); background: var(--sol-fraco); }
.ficha-familia > div { display: flex; flex-direction: column; gap: 1px; }
.ficha-familia .rotulo {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em;
  font-weight: 680; opacity: .75;
}
.ficha-familia .valor {
  font-size: var(--t-med); font-weight: 700; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.ficha-familia .explica {
  flex-basis: 100%; margin: 0; font-size: var(--t-peq); opacity: .9;
}

.tabela tr.soma td {
  border-top: 2px solid var(--linha-forte); font-weight: 700;
  background: var(--card-2);
}

/* Peso cubado que supera o real: e o numero que a transportadora vai cobrar.
   Ambar, nao vermelho - nao e erro, e o custo de mandar coisa grande e leve. */
.tabela td.destaque { color: var(--alerta); font-weight: 700; }

/* Impressao: esta tela sai da tela. O dono imprime a lista de volumes e manda
   para a transportadora cotar, entao o que nao ajuda a cotar nao vai no papel. */
@media print {
  .lateral, .topo, footer, .barra a, .detalhe { display: none !important; }
  .app { display: block; }
  main { max-width: 100%; padding: 0; }
  .bloco, .cartao, .tabela, .rolavel, .ficha-familia {
    box-shadow: none !important; break-inside: avoid;
  }
  .rolavel { overflow: visible; }
  a { text-decoration: none; color: inherit; }
}

/* ==========================================================================
   19. COTACAO DE FRETE
   --------------------------------------------------------------------------
   Uma cotacao por cartao, a mais barata destacada. O total e o numero
   grande; a decomposicao vem abaixo, porque a pergunta e "quanto custa" e
   so depois "de que e feito".
   ========================================================================== */
.cotacao {
  background: var(--card); border: 1px solid var(--linha);
  border-radius: var(--r-g); padding: var(--e4) var(--e5); margin: 0 0 var(--e3);
  box-shadow: var(--sombra-1);
}
.cotacao.melhor { border-color: var(--ok-linha); border-left: 4px solid var(--ok); }
.cotacao .cabeca {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e3);
}
.cotacao .quem {
  font-size: var(--t-med); font-weight: 700; letter-spacing: -.015em;
  margin-right: var(--e2);
}
.cotacao .cabeca .nota { display: block; margin-top: 2px; }
.cotacao .preco { text-align: right; }
.cotacao .total {
  display: block; font-size: var(--t-gg); font-weight: 730;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.cotacao.melhor .total { color: var(--ok); }
.cotacao .tabela { border: 0; box-shadow: none; background: transparent; }
.cotacao .tabela td { border-top: 1px solid var(--linha); }
.cotacao .tabela tr:first-child td { border-top: 0; }

/* O select de produto e naturalmente largo (codigo + descricao). Limitar aqui
   evita que a linha do formulario empurre a pagina em tela estreita. */
#itens select { max-width: 260px; }
#itens td, #itens th { white-space: nowrap; }

/* ==========================================================================
   20. BUSCA DE PRODUTO
   --------------------------------------------------------------------------
   O select nao servia: o nome nao cabia e so dava para rolar a lista. E a
   primeira versao da busca era discreta demais - lista estreita, linha de uma
   altura so - a ponto de o dono achar que nao estava retornando nada.

   Aqui o campo tem presenca, e cada resultado ocupa espaco suficiente para o
   nome inteiro caber e para a familia, o codigo e o preco aparecerem sem
   competir com ele.
   ========================================================================== */
#itens .col-produto { width: 58%; min-width: 260px; }
#itens td, #itens th { vertical-align: top; }
#itens .qtd, #itens .preco { text-align: right; }

.combo { position: relative; }
.combo .busca {
  width: 100%; font-size: var(--t-corpo); padding: 10px var(--e10) 10px var(--e3);
  border-radius: var(--r-m);
}
.combo::after {                       /* a lupa, so decorativa */
  content: "⌕"; position: absolute; right: var(--e3); top: 50%;
  transform: translateY(-52%); font-size: var(--t-tit); color: var(--fraquissimo);
  pointer-events: none;
}
.combo .busca.sem-medida { border-color: var(--alerta); background: var(--alerta-bg); }
.combo .busca:focus { border-color: var(--acento); }

/* Fixa na tela e filha do <body>: assim nenhum  de
   ancestral a recorta. A posicao vem do JavaScript, a partir do campo. */
.sugestoes {
  position: fixed; z-index: 100;
  background: var(--card); border: 1px solid var(--linha-forte);
  border-radius: var(--r-g); box-shadow: var(--sombra-3);
  overflow-y: auto; min-width: 340px;
}
.sugestoes .grupo {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e3) var(--e4) var(--e2);
  border-bottom: 1px solid var(--linha);
}
.sugestoes .grupo .rotulo {
  font-size: var(--t-micro); font-weight: 720; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fraco);
}
.sugestoes .grupo .conta {
  font-size: var(--t-micro); font-weight: 620; color: var(--fraquissimo);
  background: var(--n-100); border-radius: var(--r-pill); padding: 1px 7px;
}

.sugestoes .sug {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4); cursor: pointer;
  border-bottom: 1px solid var(--linha);
  transition: background var(--transicao);
}
.sugestoes .sug:last-child { border-bottom: 0; }
.sugestoes .sug:hover { background: var(--acento-fraco); }

/* Selo no lugar da miniatura: a familia e o que distingue de verdade dois
   produtos de nome quase igual, e ela cabe em duas letras. */
.sugestoes .icone {
  flex: none; width: 34px; height: 34px; border-radius: var(--r-m);
  display: grid; place-items: center;
  font-size: var(--t-micro); font-weight: 800; letter-spacing: -.02em;
  background: var(--n-100); color: var(--fraco);
}
.sugestoes .icone.bp { background: var(--info-fraco); color: var(--info); }
.sugestoes .icone.ap { background: var(--sol-fraco); color: var(--sol); }

.sugestoes .texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sugestoes .nome {
  font-size: var(--t-peq); font-weight: 560; line-height: 1.3; color: var(--tinta);
}
.sugestoes .meta { font-size: var(--t-micro); color: var(--fraco); }
.sugestoes .meta b { color: var(--alerta); font-weight: 700; }
.sugestoes .valor {
  margin-left: auto; flex: none; font-size: var(--t-peq); font-weight: 650;
  color: var(--tinta-2); font-variant-numeric: tabular-nums;
}
.sugestoes .vazia {
  padding: var(--e4); color: var(--fraco); font-size: var(--t-peq);
}

/* ===========================================================================
   A LEITURA DO MES
   ---------------------------------------------------------------------------
   Texto antes de numero. Um numero sozinho nao carrega o que ele significa:
   "prejuizo de R$ 4.256,79" e "prejuizo de R$ 4.256,79 que vira lucro quando o
   repasse chegar" sao a mesma tabela e duas decisoes opostas.

   A tipografia aqui e maior e mais espacada que a do resto do sistema DE
   PROPOSITO: esta caixa se le, nao se consulta. Medida de linha travada em
   ~78ch porque linha longa demais faz o olho perder a volta.
   =========================================================================== */
.leitura {
  background: var(--card); border: 1px solid var(--linha);
  border-radius: var(--r-g); box-shadow: var(--sombra-1);
  padding: var(--e6) var(--e6) var(--e5);
  margin: var(--e6) 0;
}
.leitura .cabeca {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e4); flex-wrap: wrap;
  padding-bottom: var(--e4); border-bottom: 1px solid var(--linha);
}
.leitura .cabeca h2 { margin: 0; font-size: var(--t-tit); letter-spacing: -.02em; }
.leitura .cabeca .sub { font-size: var(--t-peq); color: var(--fraco); }

.leitura ul { list-style: none; margin: 0; padding: 0; }
.leitura > ul > li {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: var(--e4) 0;
  border-bottom: 1px solid var(--linha);
}
.leitura > ul > li:last-child { border-bottom: 0; padding-bottom: 0; }

/* O ponto colorido e a unica marca de severidade. Fundo colorido por achado
   transformaria a caixa num semaforo de cinco cores, que nao se le. */
/* Os tons levam prefixo proprio de proposito. `.alerta` e `.ok` sozinhos ja
   existem no sistema como CAIXA DE MENSAGEM, com fundo e borda - um <li> com
   class="alerta" herdava aquilo e a caixa de leitura virava cinco retangulos
   coloridos empilhados, que e o oposto de uma leitura. */
.leitura .ponto {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  margin-top: 8px; background: var(--fraquissimo);
}
.leitura li.tom-alerta  .ponto { background: var(--erro); }
.leitura li.tom-atencao .ponto { background: var(--alerta); }
.leitura li.tom-ok      .ponto { background: var(--ok); }
.leitura li.tom-neutro  .ponto { background: var(--fraquissimo); }

.leitura .frase {
  font-size: var(--t-med); line-height: 1.55; color: var(--tinta);
  max-width: 78ch; letter-spacing: -.005em;
}
.leitura li.tom-neutro .frase { color: var(--tinta-2); font-size: var(--t-corpo); }

.leitura .ir {
  display: inline-block; margin-left: var(--e2);
  font-size: var(--t-peq); font-weight: 600; white-space: nowrap;
  color: var(--acento); text-decoration: none;
}
.leitura .ir:hover { text-decoration: underline; }

.leitura details { margin-top: var(--e2); }
.leitura summary {
  cursor: pointer; font-size: var(--t-peq); color: var(--fraco);
  font-weight: 550; width: max-content;
}
.leitura summary:hover { color: var(--acento); }
.leitura .itens {
  margin: var(--e2) 0 0; padding-left: var(--e4);
  font-size: var(--t-peq); color: var(--tinta-2);
}
.leitura .itens li { padding: 2px 0; list-style: disc; }


/* ===========================================================================
   O PASSIVO EM UMA LINHA
   ---------------------------------------------------------------------------
   Separar nao e esconder. O detalhe foi para /passivo; o total ficou aqui.
   A quebra em quatro parcelas serve para que a soma nunca mais seja lida como
   "quanto vai sair": o que sai da conta e o que nao sai tem tratamento visual
   diferente na mesma linha.
   =========================================================================== */
.passivo-linha {
  display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--linha);
  border-left: 3px solid var(--fraquissimo);
  border-radius: var(--r-m); padding: var(--e4) var(--e5);
  margin: var(--e5) 0;
}
.passivo-linha .quem { display: flex; flex-direction: column; gap: 2px; }
.passivo-linha .rotulo {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em;
  color: var(--fraco); font-weight: 650;
}
.passivo-linha .numero {
  font-size: var(--t-g); font-weight: 700; letter-spacing: -.03em;
  color: var(--tinta); font-variant-numeric: tabular-nums;
}
.passivo-linha .explica {
  font-size: var(--t-peq); color: var(--fraco); max-width: 62ch;
}
.passivo-linha .quebra {
  display: flex; gap: var(--e2); flex-wrap: wrap; margin-left: auto;
}
.passivo-linha .parte {
  display: flex; flex-direction: column; gap: 1px;
  padding: var(--e2) var(--e3); border-radius: var(--r-p);
  background: var(--cabecalho); border: 1px solid var(--linha);
}
/* O que sai da conta tem borda quente; o que nunca sai fica neutro. */
.passivo-linha .parte.sai { border-color: var(--alerta-linha); background: var(--alerta-bg); }
.passivo-linha .parte .rot { font-size: var(--t-micro); color: var(--fraco); }
.passivo-linha .parte .val {
  font-size: var(--t-peq); font-weight: 650; color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}
.passivo-linha .parte.sai .val { color: var(--alerta); }
.passivo-linha .botao { flex: none; }


/* ===========================================================================
   A AGENDA DE PAGAMENTOS
   ---------------------------------------------------------------------------
   A lista INTEIRA, ordenada por urgencia, com os dias que faltam em cada linha
   e o total no rodape da propria tabela - nao num cartao separado, para que
   total e linhas nunca possam divergir sem o olho notar.
   =========================================================================== */
.agenda { margin: var(--e6) 0; }
.agenda .cabeca {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e3);
}
.agenda .cabeca h2 { margin: 0; }
.agenda .cabeca .sub { font-size: var(--t-peq); color: var(--fraco); }

.agenda .quando { font-weight: 600; white-space: nowrap; }
/* Urgente: dentro de sete dias ou ja vencida. E o recorte em que ainda da
   para fazer alguma coisa a respeito - por isso ganha marca, e so ele. */
.agenda tr.urgente td.quando { color: var(--alerta); }
.agenda tr.urgente td:first-child { box-shadow: inset 3px 0 0 var(--alerta-linha); }
.agenda tr.vencida td:first-child { box-shadow: inset 3px 0 0 var(--erro); }

.agenda tfoot tr.total td {
  border-top: 2px solid var(--linha-forte); background: var(--cabecalho);
  font-weight: 700; font-size: var(--t-corpo);
  padding-top: var(--e3); padding-bottom: var(--e3);
}
.agenda tfoot tr.total td.v { font-size: var(--t-med); letter-spacing: -.02em; }


/* ===========================================================================
   TELA DE PASSIVO
   =========================================================================== */
.passivo-topo {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--e5);
  margin: var(--e4) 0 var(--e3);
}
@media (max-width: 900px) { .passivo-topo { grid-template-columns: 1fr; } }

.passivo-topo > div {
  display: flex; flex-direction: column; gap: var(--e1);
  background: var(--card); border: 1px solid var(--linha);
  border-radius: var(--r-g); padding: var(--e5);
}
.passivo-topo .principal { border-left: 3px solid var(--acento); }
.passivo-topo .secundario { background: var(--card-2); }
.passivo-topo .rotulo {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em;
  color: var(--fraco); font-weight: 650;
}
.passivo-topo .numero {
  font-size: var(--t-gg); font-weight: 750; letter-spacing: -.035em;
  color: var(--tinta); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.passivo-topo .secundario .numero { font-size: var(--t-g); color: var(--tinta-2); }
.passivo-topo .explica {
  font-size: var(--t-peq); color: var(--fraco); line-height: 1.5;
  margin-top: var(--e1);
}

.natureza {
  background: var(--card); border: 1px solid var(--linha);
  border-radius: var(--r-g); padding: var(--e5); margin: var(--e4) 0;
}
.natureza.tom-alerta  { border-left: 3px solid var(--erro); }
.natureza.tom-atencao { border-left: 3px solid var(--alerta); }
.natureza.tom-neutro  { border-left: 3px solid var(--linha-forte); }

.natureza .cabeca {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e4); flex-wrap: wrap;
}
.natureza .cabeca h3 {
  margin: 0; font-size: var(--t-tit); color: var(--tinta);
  letter-spacing: -.02em; text-transform: none;
}
.natureza .resumo { font-size: var(--t-peq); color: var(--fraco); }
.natureza .quanto { text-align: right; }
.natureza .quanto .numero {
  display: block; font-size: var(--t-g); font-weight: 700;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.natureza .quanto .qtd { font-size: var(--t-micro); color: var(--fraco); }
.natureza .explica {
  font-size: var(--t-peq); color: var(--tinta-2); line-height: 1.55;
  max-width: 82ch; margin: var(--e3) 0;
}

/* Chamavam-se `.marca` / `.marcas` ate 27/08/2026, e isso pegava o LOGO da
   barra lateral, que ja usava `.marca`. O seletor novo, mais generico, vencia
   e pintava o logo com fundo claro e texto apagado - em modo escuro ele
   sumia. Nome de classe generico em folha unica e colisao esperando acontecer. */
.selos-natureza {
  display: flex; gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e4);
}
.selo-natureza {
  font-size: var(--t-micro); font-weight: 600; padding: 3px var(--e2);
  border-radius: var(--r-pill); background: var(--cabecalho); color: var(--fraco);
  border: 1px solid var(--linha);
}
.selo-natureza.sim    { background: var(--alerta-bg); color: var(--alerta); border-color: var(--alerta-linha); }
.selo-natureza.nao    { background: var(--ok-fraco);  color: var(--ok);     border-color: var(--ok-linha); }
.selo-natureza.info   { background: var(--info-fraco); color: var(--info); }
.selo-natureza.alerta { background: var(--erro-fraco); color: var(--erro); border-color: var(--erro-linha); }


/* Os dois cenarios do tributo, lado a lado e NUNCA somados: um e divida com
   teto conhecido, o outro e contingencia que acontece ou nao. Somar os dois
   seria o mesmo erro do numero de panico, em outra roupa. */
.tributo-cenarios {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--e3); margin: var(--e4) 0;
}
.tributo-cenarios .cenario {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--e3) var(--e4); border-radius: var(--r-m);
  background: var(--card-2); border: 1px solid var(--linha);
}
.tributo-cenarios .cenario.a { border-color: var(--alerta-linha); background: var(--alerta-bg); }
.tributo-cenarios .cenario.b { border-color: var(--erro-linha); background: var(--erro-fraco); }
.tributo-cenarios .rot {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .07em;
  color: var(--fraco); font-weight: 650;
}
.tributo-cenarios .cenario.a .rot { color: var(--alerta); }
.tributo-cenarios .cenario.b .rot { color: var(--erro); }
.tributo-cenarios .val {
  font-size: var(--t-tit); font-weight: 730; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--tinta);
}
.tributo-cenarios .nota { font-size: var(--t-micro); color: var(--fraco); margin: 0; }


/* A linha de tributo na DRE e PEQUENA de proposito. Ela esteve em faixa
   vermelha na tela inicial por um dia; o dono: "isso nao me ajuda a
   reestruturar a empresa e me bota medo a toa". O numero e verdadeiro, mas
   nao muda nada que se decida em trinta dias. */
.tributo-nota { margin-top: var(--e2); }
.tributo-nota a { color: var(--acento); text-decoration: none; font-weight: 600; }
.tributo-nota a:hover { text-decoration: underline; }

/* O resto da leitura, atras de um clique. Nao e esconder: e a caixa parar de
   virar lista. */
.mais-achados { margin-top: var(--e3); border-top: 1px solid var(--linha);
                padding-top: var(--e3); }
.mais-achados > summary {
  cursor: pointer; font-size: var(--t-peq); color: var(--fraco);
  font-weight: 550; width: max-content;
}
.mais-achados > summary:hover { color: var(--acento); }
.mais-achados ul { margin-top: var(--e2); }

/* ===========================================================================
   CADASTRO DE PRODUTO EDITAVEL
   ---------------------------------------------------------------------------
   A tela e de CONSULTA: o dono e o Pablo abrem para olhar peso e cubagem, e
   imprimem para a transportadora cotar. Editar e excecao - por isso o
   formulario fica atras de um clique, e nao ocupando o topo.
   =========================================================================== */
.editar-produto {
  border: 1px solid var(--linha); border-radius: var(--r-m);
  background: var(--card); margin: var(--e4) 0;
}
.editar-produto > summary {
  cursor: pointer; padding: var(--e3) var(--e4);
  font-size: var(--t-peq); font-weight: 600; color: var(--acento);
  width: max-content;
}
.editar-produto[open] > summary { border-bottom: 1px solid var(--linha); }
.editar-produto form.cadastro { padding: var(--e4); }

.editar-produto .campos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--e3); margin-bottom: var(--e3);
}
.editar-produto .campos label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em;
  color: var(--fraco); font-weight: 650;
}
.editar-produto .campos label.largo { grid-column: 1 / -1; }
.editar-produto .campos label.marca {
  flex-direction: row; align-items: center; gap: var(--e2);
  text-transform: none; letter-spacing: 0; font-size: var(--t-peq);
  color: var(--tinta); align-self: end; padding-bottom: 9px;
}
.editar-produto .campos input,
.editar-produto .campos select,
.editar-produto .campos textarea {
  font: inherit; font-size: var(--t-peq); text-transform: none;
  letter-spacing: 0; color: var(--tinta); font-weight: 400;
  padding: 7px var(--e3); border: 1px solid var(--linha-forte);
  border-radius: var(--r-p); background: var(--card); width: 100%;
}
.editar-produto .campos input[type="checkbox"] { width: auto; }
.editar-produto .campos textarea { resize: vertical; }


/* ===========================================================================
   PRECO DE VENDA
   ---------------------------------------------------------------------------
   Nao e campo, e historico. Cada mudanca insere linha nova com autor e motivo,
   e a anterior continua legivel - decisao do dono em 27/08/2026.
   =========================================================================== */
.preco-produto {
  display: flex; align-items: flex-end; gap: var(--e6); flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--linha);
  border-left: 3px solid var(--acento);
  border-radius: var(--r-g); padding: var(--e5); margin: var(--e5) 0;
}
.preco-produto .atual { display: flex; flex-direction: column; gap: 2px; }
.preco-produto .rotulo {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em;
  color: var(--fraco); font-weight: 650;
}
.preco-produto .numero {
  font-size: var(--t-gg); font-weight: 750; letter-spacing: -.035em;
  color: var(--tinta); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.preco-produto .numero.vazio {
  font-size: var(--t-tit); font-weight: 600; color: var(--fraco);
  font-style: italic;
}
.preco-produto .explica {
  font-size: var(--t-peq); color: var(--fraco); max-width: 54ch;
}
.preco-produto form.novo-preco {
  display: flex; gap: var(--e3); align-items: flex-end;
  flex-wrap: wrap; margin-left: auto;
}
.preco-produto form label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em;
  color: var(--fraco); font-weight: 650;
}
.preco-produto form input {
  font: inherit; font-size: var(--t-peq); text-transform: none;
  letter-spacing: 0; color: var(--tinta); font-weight: 400;
  padding: 7px var(--e3); border: 1px solid var(--linha-forte);
  border-radius: var(--r-p); background: var(--card);
}


/* ===========================================================================
   CURVA DE CUSTO POR QUANTIDADE
   ---------------------------------------------------------------------------
   O custo nao e um numero: em todo produto onde o preco unitario variou nas
   compras, quem comprou mais pagou menos. Na venda a ordem a quantidade e
   conhecida na hora de cotar, entao da para escolher a faixa certa.
   =========================================================================== */
.curva-custo { margin: var(--e6) 0; }
.curva-custo .cabeca {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e4); flex-wrap: wrap;
}
.curva-custo .cabeca h2 { margin: 0; }
.curva-custo .cabeca .barra { margin: 0; padding: 0; background: none; border: 0; }
.curva-custo .resposta {
  font-size: var(--t-med); color: var(--tinta); margin: var(--e3) 0;
  line-height: 1.5;
}
.curva-custo .resposta .porque { display: block; }

/* ===========================================================================
   REGUA DE PRECO
   ---------------------------------------------------------------------------
   Tres precos, nao um. O piso e objetivo e calculavel; o alvo depende da
   margem que o dono escolhe; o praticado e o que ele cobra hoje. Mostrar so um
   numero esconde justamente a faixa onde a decisao acontece.
   =========================================================================== */
.tres-precos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--e4); margin: var(--e5) 0;
}
.tres-precos .preco {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--e4) var(--e5); border-radius: var(--r-g);
  background: var(--card); border: 1px solid var(--linha);
}
.tres-precos .preco.piso     { border-left: 3px solid var(--fraquissimo); }
.tres-precos .preco.alvo     { border-left: 3px solid var(--acento); }
.tres-precos .preco.praticado{ border-left: 3px solid var(--ok); }
.tres-precos .preco.praticado.atencao { border-left-color: var(--alerta); }
.tres-precos .preco.praticado.ruim    { border-left-color: var(--erro); }
.tres-precos .rotulo {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .07em;
  color: var(--fraco); font-weight: 650;
}
.tres-precos .numero {
  font-size: var(--t-g); font-weight: 750; letter-spacing: -.03em;
  color: var(--tinta); font-variant-numeric: tabular-nums; line-height: 1.15;
}
.tres-precos .preco.ruim .numero { color: var(--erro); }
.tres-precos .nota { font-size: var(--t-micro); color: var(--fraco); margin: 0; }

/* O tom da regua vem da meta do mes, e o NOME importa mais que o numero: quem
   le "rigida" entende sem interpretar percentual. Nunca bloqueia - o dono foi
   explicito: "ela avisa em vermelho, nao bloqueia". */
.contexto-regua {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e5); flex-wrap: wrap;
  padding: var(--e4) var(--e5); border-radius: var(--r-m);
  margin: var(--e4) 0; border: 1px solid var(--linha);
}
.contexto-regua.modo-rigida     { background: var(--erro-fraco);   border-color: var(--erro-linha); }
.contexto-regua.modo-atencao    { background: var(--alerta-bg);    border-color: var(--alerta-linha); }
.contexto-regua.modo-afrouxada  { background: var(--ok-fraco);     border-color: var(--ok-linha); }
.contexto-regua .rotulo {
  display: block; font-size: var(--t-micro); text-transform: uppercase;
  letter-spacing: .08em; font-weight: 700;
}
.contexto-regua.modo-rigida    .rotulo { color: var(--erro); }
.contexto-regua.modo-atencao   .rotulo { color: var(--alerta); }
.contexto-regua.modo-afrouxada .rotulo { color: var(--ok); }
.contexto-regua .frase {
  font-size: var(--t-peq); color: var(--tinta-2); max-width: 76ch;
}
.contexto-regua .progresso { text-align: right; flex: none; }
.contexto-regua .progresso .val {
  display: block; font-size: var(--t-g); font-weight: 750;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--tinta);
}
.contexto-regua .progresso .rot { font-size: var(--t-micro); color: var(--fraco); }

/* A sugestao do motor fica AO LADO do campo, nao dentro dele. Clicar em "usar"
   preenche; gravar continua sendo um ato do dono, com motivo. O motor sugere,
   ele decide. */
.preco-produto .sugestao {
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--e3) var(--e4); border-radius: var(--r-m);
  background: var(--acento-fraco); border: 1px solid var(--acento-linha);
  max-width: 40ch;
}
.preco-produto .sugestao .rotulo { color: var(--acento); }
.preco-produto .sugestao .numero {
  font-size: var(--t-g); color: var(--acento-forte);
}
.preco-produto .sugestao .explica { color: var(--tinta-2); max-width: none; }
.preco-produto .sugestao .botao { align-self: flex-start; margin-top: var(--e2); }


/* ===========================================================================
   SELECT LONGO NAO PODE ESTOURAR A TELA
   ---------------------------------------------------------------------------
   Um <select> se dimensiona pela MAIOR opcao. O seletor de produtos da regua
   tem nomes como "0601861598 - COLETOR SOLAR TUBO VACUO ACOPLADO KOCSRT TV
   15BP 316" e media 543px numa janela de 264 - o corpo da pagina passava a
   rolar de lado, que e o unico tipo de rolagem que esta folha nunca permitiu.

   O conserto e generico de proposito: vale para qualquer campo de qualquer
   barra de filtro, hoje e nas telas que vierem. O texto corta com reticencias
   em vez de empurrar a pagina.
   =========================================================================== */
.barra select,
.barra input,
form.barra select,
form.barra input {
  max-width: 100%;
  text-overflow: ellipsis;
}
.barra { max-width: 100%; }

/* ===========================================================================
   A FAIXA DE PRECO
   ---------------------------------------------------------------------------
   Quatro niveis e cinco colunas, e a coluna que importa e a ultima: quanto
   SOBRA. O dono pensa em reais, nao em percentual - foi ele quem disse: "se
   voce vender neste preco, sobra tanto liquido pra voce, em reais. Esse e o
   numero que eu quero ver."

   A linha do piso vem em vermelho de proposito. Ela e a prova visual de que
   "piso" nao e "empate": a contribuicao e zero, mas o aluguel nao para, e o
   lucro ali e negativo.
   =========================================================================== */
.faixa-preco tr.nivel td:first-child { line-height: 1.35; }
.faixa-preco tr.nivel .porque { display: block; margin-top: 2px; }
.faixa-preco tr.piso      td { background: var(--erro-fraco); }
.faixa-preco tr.minimo    td { background: var(--alerta-bg); }
.faixa-preco tr.alvo      td { background: var(--ok-fraco); }
.faixa-preco tr.praticado td {
  border-top: 2px solid var(--linha-forte); background: var(--card-2);
}
.faixa-preco tr.praticado.ruim td { background: var(--erro-fraco); }
/* `positivo`, nao `ok`: `.ok` sozinho ja e CAIXA DE MENSAGEM nesta folha, com
   fundo e padding proprios, e um <td> com essa classe herdava tudo. E a
   terceira vez que um nome generico colide aqui - as duas anteriores foram
   `.marca` (que pegou o logo) e os tons `.alerta`/`.ok` da caixa de leitura. */
.faixa-preco td.positivo { color: var(--ok); }

/* Caixa de marcar dentro da barra de filtro: alinha com os campos, nao com o
   texto. */
.barra label.marca-check {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-size: var(--t-peq); color: var(--tinta); font-weight: 500;
}

/* Aviso do teto do lucro: o alvo pedido nao cabe no cenario. Vermelho porque e
   um limite aritmetico, nao uma sugestao. */
.caixa.alerta-teto {
  border-left: 3px solid var(--erro);
  background: var(--erro-fraco);
  padding: var(--e3) var(--e4);
  margin: var(--e4) 0;
  border-radius: 6px;
}
.caixa.alerta-teto p { margin: 0 0 var(--e2); }
.caixa.alerta-teto p:last-child { margin-bottom: 0; }
.caixa.alerta-teto .porque {
  display: block; font-size: var(--t-peq); color: var(--fraco);
}

/* Minimo de hoje: existe so quando o mes ja pagou parte do custo fixo. Verde
   fraco porque e folga conquistada, nao alvo. */
.tabela.faixa-preco tr.minimo-hoje { background: var(--ok-fraco); }
.tabela.faixa-preco tr.minimo-hoje td { border-top: 1px dashed var(--ok-linha); }

/* ===========================================================================
   COTACAO E APROVACAO

   Duas telas do mesmo numero, vistas por duas pessoas. A do vendedor mostra
   dois precos e nada mais; a do dono mostra tudo o que decide.
   =========================================================================== */
.cartoes-cotacao {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--e3); margin: var(--e4) 0;
}
.cartao-preco {
  background: var(--card); border: 1px solid var(--linha);
  border-radius: 8px; padding: var(--e4);
  display: flex; flex-direction: column; gap: var(--e1);
}
.cartao-preco .rot {
  font-size: var(--t-peq); color: var(--fraco); text-transform: uppercase;
  letter-spacing: .04em;
}
.cartao-preco .val { font-size: 26px; font-weight: 650; color: var(--tinta); }
.cartao-preco .sub { font-size: var(--t-peq); color: var(--fraco); }
.cartao-preco.limite { border-color: var(--acento-linha); background: var(--acento-fraco); }

/* A resposta muda de cor pela faixa. Verde so quando ele pode fechar. */
.resposta-cotacao { padding: var(--e3) var(--e4); border-radius: 6px;
  border-left: 3px solid var(--linha-forte); margin: var(--e4) 0; }
.resposta-cotacao p { margin: 0 0 var(--e1); }
.resposta-cotacao p:last-child { margin-bottom: 0; }
.resposta-cotacao.faixa-tabela,
.resposta-cotacao.faixa-alcada { border-left-color: var(--ok); background: var(--ok-fraco); }
.resposta-cotacao.faixa-aprovacao,
.resposta-cotacao.faixa-fecha_o_mes { border-left-color: var(--sol); background: var(--sol-fraco); }
.resposta-cotacao.faixa-abaixo_do_piso { border-left-color: var(--erro); background: var(--erro-fraco); }

.form-aprovacao { padding: var(--e4); margin: var(--e4) 0; }
.form-aprovacao h3 { margin: 0 0 var(--e2); }
.form-aprovacao label { display: block; margin-bottom: var(--e1);
  font-size: var(--t-peq); font-weight: 500; }
.form-aprovacao textarea {
  width: 100%; max-width: 100%; box-sizing: border-box; resize: vertical;
  font: inherit; padding: var(--e2); border: 1px solid var(--linha-forte);
  border-radius: 4px; background: var(--card); color: var(--tinta);
}
.form-aprovacao .porque { display: block; font-size: var(--t-peq);
  color: var(--fraco); margin: var(--e1) 0 var(--e3); }

.pedido-aprovacao { padding: var(--e4); margin: var(--e3) 0; }
.pedido-aprovacao .cabeca {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--e3); flex-wrap: wrap;
}
.pedido-aprovacao h3 { margin: 0; }
.pedido-aprovacao .quando { font-size: var(--t-peq); color: var(--fraco); }
.pedido-aprovacao.fecha-o-mes { border-left: 3px solid var(--sol); }
.pedido-aprovacao .marca-fecha {
  color: var(--alerta); font-weight: 550; font-size: var(--t-peq);
  margin: var(--e2) 0 0;
}
.pedido-aprovacao .cenario { font-size: var(--t-peq); color: var(--fraco); }
.pedido-aprovacao .motivo {
  margin: var(--e3) 0; padding: var(--e2) var(--e3);
  border-left: 2px solid var(--linha-forte); color: var(--tinta-2);
  font-style: italic;
}
.pedido-aprovacao .decisao { display: flex; gap: var(--e2); flex-wrap: wrap; }
.pedido-aprovacao .decisao input[type=text] { flex: 1 1 220px; min-width: 0; }

.marca-estado {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 3px; font-weight: 600;
}
.marca-estado.pendente  { background: var(--sol-fraco);  color: var(--alerta); }
.marca-estado.aprovada  { background: var(--ok-fraco);   color: var(--ok); }
.marca-estado.recusada  { background: var(--erro-fraco); color: var(--erro); }
.marca-estado.dispensada{ background: var(--n-100);      color: var(--fraco); }
td.motivo-curto { color: var(--fraco); font-size: var(--t-peq); }

/* Nota cancelada continua na lista, marcada e apagada - nunca some. O valor
   dela ja e zero em toda soma; aqui a linha so precisa parar de chamar
   atencao. */
tr.cancelada td { opacity: .55; }
tr.cancelada td .receita { text-decoration: line-through; }
td.acoes-nota { white-space: nowrap; }
td.acoes-nota details { display: inline-block; position: relative; }
td.acoes-nota summary { list-style: none; cursor: pointer; }
td.acoes-nota summary::-webkit-details-marker { display: none; }
.botao.mini { font-size: var(--t-mini); padding: 3px 8px; }
.mini-form {
  position: absolute; right: 0; z-index: 20; width: 260px;
  background: var(--card); border: 1px solid var(--linha-forte);
  border-radius: 6px; padding: var(--e3); box-shadow: 0 6px 20px rgba(0,0,0,.12);
  display: flex; flex-direction: column; gap: var(--e2);
}
.mini-form .porque { margin: 0; font-size: var(--t-peq); color: var(--fraco); }
.mini-form input[type=text] { width: 100%; box-sizing: border-box; }

/* Cadastro de cliente: grade de campos que cabe em telefone e em monitor. */
.grade-cadastro {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e3); margin-top: var(--e3);
}
.grade-cadastro label {
  display: flex; flex-direction: column; gap: var(--e1);
  font-size: var(--t-peq); font-weight: 500;
}
.grade-cadastro input, .grade-cadastro select { width: 100%; box-sizing: border-box; }
.grade-cadastro button { grid-column: 1 / -1; justify-self: start; }
td.acoes-lanc { white-space: nowrap; }

/* Orcamento: as acoes ficam em linha, e cada uma com o campo que ela exige. */
.acoes-orcamento {
  display: flex; flex-wrap: wrap; gap: var(--e3); align-items: flex-start;
  margin: var(--e4) 0;
}
.acoes-orcamento form { display: flex; gap: var(--e2); align-items: center; }
.mini-form-linha input[type=text] { min-width: 240px; }
.chip.vencido { background: var(--erro-fraco); color: var(--erro); font-weight: 600; }
.form-aprovacao select { width: 100%; box-sizing: border-box; }
.form-aprovacao .marca-check {
  display: block; padding: var(--e2); border: 1px solid var(--linha);
  border-radius: 4px; margin-bottom: var(--e1); cursor: pointer;
}
.form-aprovacao .marca-check:hover { background: var(--hover); }

/* ===========================================================================
   A PROPOSTA COMERCIAL

   Documento, nao tela. Fundo claro sempre - proposta se imprime e vira PDF -,
   largura de leitura, e nada de navegacao em volta.
   =========================================================================== */
body.documento {
  background: var(--n-100); margin: 0; padding: var(--e4) 0;
  color: var(--n-900);
}
.folha {
  max-width: 900px; margin: 0 auto; background: #fff;
  padding: 40px 44px; border-radius: 4px;
  box-shadow: 0 2px 16px rgba(0,0,0,.10);
}
.proposta h1 { font-size: 26px; margin: 0 0 var(--e2); letter-spacing: -.01em; }
.proposta h2 {
  font-size: 15px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--n-600); border-bottom: 2px solid var(--n-150);
  padding-bottom: var(--e2); margin: var(--e5, 28px) 0 var(--e3);
}
.proposta .rot {
  display: block; font-size: var(--t-mini); text-transform: uppercase;
  letter-spacing: .05em; color: var(--n-500);
}
.prop-dados { font-size: var(--t-peq); color: var(--n-600); line-height: 1.5; margin: var(--e1) 0 0; }

.prop-cabeca {
  display: flex; justify-content: space-between; gap: var(--e4);
  flex-wrap: wrap; padding-bottom: var(--e4);
  border-bottom: 3px solid var(--acento);
}
.prop-numero { text-align: right; }
.prop-numero strong { display: block; font-size: 22px; margin: var(--e1) 0; }

.prop-partes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e4); margin: var(--e4) 0;
}
.prop-partes strong { font-size: 16px; }
.prop-vencida {
  display: inline-block; margin-left: var(--e2); padding: 2px 8px;
  background: var(--erro-fraco); color: var(--erro); border-radius: 3px;
  font-size: var(--t-mini); font-weight: 700;
}

.prop-texto p { line-height: 1.65; margin: 0 0 var(--e3); color: var(--n-700); }
.tabela.prop-itens td, .tabela.prop-itens th { padding: 10px 12px; }

.prop-pagamentos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--e3);
}
.prop-forma {
  border: 1px solid var(--n-200); border-radius: 6px; padding: var(--e3);
  display: flex; flex-direction: column; gap: 2px;
}
.prop-forma .val { font-size: 22px; font-weight: 700; }
.prop-forma .sub { font-size: var(--t-peq); color: var(--n-600); }
.prop-desconto {
  margin-top: var(--e1); font-size: var(--t-mini); font-weight: 700;
  color: var(--ok);
}

.prop-condicoes dl { display: grid; grid-template-columns: 180px 1fr; gap: var(--e2) var(--e3); margin: 0; }
.prop-condicoes dt { font-weight: 600; color: var(--n-600); font-size: var(--t-peq); }
.prop-condicoes dd { margin: 0; line-height: 1.55; }

.prop-aceite {
  margin-top: var(--e4); padding: var(--e4);
  background: var(--acento-fraco); border: 1px solid var(--acento-linha);
  border-radius: 6px;
}
.prop-aceite.aceita { background: var(--ok-fraco); border-color: var(--ok-linha); }
.prop-aceite h2 { border: none; margin-top: 0; }
.botao.grande { font-size: 16px; padding: 12px 28px; }
.prop-rodape {
  margin-top: var(--e4); padding-top: var(--e3);
  border-top: 1px solid var(--n-150); text-align: center;
  font-size: var(--t-mini); color: var(--n-500);
}

@media print {
  body.documento { background: #fff; padding: 0; }
  .folha { box-shadow: none; max-width: none; padding: 0; }
  .prop-aceite { break-inside: avoid; }
}

/* ===========================================================================
   DINHEIRO, DENSIDADE E ACESSIBILIDADE
   Aplicado em 28/08/2026, depois de pesquisar como os sistemas financeiros
   bem avaliados tratam numero.

   O achado que mais aparece na literatura de dashboard financeiro: "unidades
   mais leves que os valores, algarismos tabulares, numeros a direita, linhas
   de grade discretas - e a tabela e a verdade, o grafico e o resumo". Sao
   ajustes pequenos e todos globais: entram no CSS e no filtro `brl`, e por
   isso valem para TODA tela do sistema de uma vez, sem tocar em template.
   =========================================================================== */

/* ------------------------------------------------------------- DINHEIRO --- */
.dinheiro {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
/* A moeda existe, e nao disputa a atencao com o valor. Ninguem le "R$"
   cinquenta vezes numa coluna; todo mundo le o numero. */
.dinheiro .moeda {
  font-size: .82em; font-weight: 400; color: var(--fraquissimo);
  margin-right: .28em; letter-spacing: .01em;
}
/* Os centavos precisam estar la e nao precisam pesar igual: em 5.490,00 quem
   decide e o 5.490. */
.dinheiro .cent { font-size: .84em; opacity: .68; }
.dinheiro .int { font-weight: inherit; }
.dinheiro .sinal { margin-right: .04em; font-weight: 600; }
.dinheiro.vazio { color: var(--linha-forte); }

/* O SINAL NAO E SO A COR.
   Cerca de 8% dos homens tem alguma deficiencia de visao de cor. Ate hoje
   negativo aqui era "vermelho" e mais nada - agora e o menos E o vermelho. */
.dinheiro.neg { color: var(--erro); }
.dinheiro.neg .moeda { color: var(--erro); opacity: .6; }

/* --------------------------------------------------------------- TABELA --- */
/* Cabecalho que fica: em lista longa, rolar ate o fim e esquecer o que e cada
   coluna e o defeito mais comum de tela densa. */
.rolavel { position: relative; }
.tabela thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--cabecalho);
  box-shadow: inset 0 -1px 0 var(--linha-forte);
}
.app .tabela thead th { top: 0; }

/* Linhas de grade discretas: separam sem gritar. */
.tabela tbody tr + tr td { border-top: 1px solid var(--linha); }
.tabela tbody tr:hover td { background: var(--hover); }

/* ------------------------------------------------------------ DENSIDADE --- */
/* "Densidade e ajuste, nao filosofia: quem usa o dia inteiro quer compacto,
   quem entra de vez em quando quer ar." O dono olha estas telas o dia todo. */
:root { --linha-altura: 9px; }
[data-densidade="compacta"] { --linha-altura: 4px; }
[data-densidade="confortavel"] { --linha-altura: 13px; }
.tabela td, .tabela th { padding-top: var(--linha-altura); padding-bottom: var(--linha-altura); }

.ajuste-densidade {
  display: inline-flex; gap: 0; border: 1px solid var(--linha-forte);
  border-radius: 5px; overflow: hidden;
}
.ajuste-densidade button {
  border: 0; background: var(--card); color: var(--fraco); cursor: pointer;
  font: inherit; font-size: var(--t-micro); padding: 3px 9px;
}
.ajuste-densidade button[aria-pressed="true"] {
  background: var(--acento); color: var(--tinta-no-acento); font-weight: 600;
}

/* -------------------------------------------------------------- FOCO ------ */
/* Contorno visivel em tudo que recebe teclado - navegar sem mouse deixa de ser
   adivinhacao. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px; border-radius: 3px;
}

/* ===========================================================================
   O QUE FAZER AGORA

   Do Pipedrive, que ganha as listas de melhor CRM de 2026 pela filosofia da
   venda baseada em atividade: o sistema sugere a proxima acao em vez de so
   guardar informacao. A cor NAO e o unico sinal - cada nivel tem tambem
   posicao na lista e uma marca de largura propria. */
.agora {
  background: var(--card); border: 1px solid var(--linha);
  border-radius: 8px; padding: var(--e4); margin-bottom: var(--e5, 24px);
}
.agora-cabeca {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e3); margin-bottom: var(--e3);
}
.agora-cabeca h2 { margin: 0; border: 0; }
.agora-conta { font-size: var(--t-peq); color: var(--fraco); }
.agora-conta .urgente { color: var(--erro); }

.agora-lista { list-style: none; margin: 0; padding: 0; }
.agora-item + .agora-item { border-top: 1px solid var(--linha); }
.agora-item a {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e3) 0; text-decoration: none; color: inherit;
}
.agora-item a:hover { background: var(--hover); }
.agora-marca {
  flex: none; width: 3px; align-self: stretch; border-radius: 2px;
  margin-left: 2px;
}
.nivel-urgente  .agora-marca { background: var(--erro);   width: 5px; }
.nivel-travado  .agora-marca { background: var(--sol);    width: 4px; }
.nivel-sujo     .agora-marca { background: var(--alerta); width: 3px; opacity: .55; }
.nivel-depois   .agora-marca { background: var(--linha-forte); width: 2px; }

.agora-texto { flex: 1 1 auto; min-width: 0; }
.agora-texto strong { display: block; font-weight: 600; line-height: 1.35; }
.nivel-urgente .agora-texto strong { color: var(--erro); }
.agora-porque {
  display: block; font-size: var(--t-peq); color: var(--fraco);
  line-height: 1.45; margin-top: 2px;
}
.agora-valor { flex: none; font-weight: 600; align-self: center; }
.agora.tudo-em-dia { border-color: var(--ok-linha); background: var(--ok-fraco); }
.agora.tudo-em-dia h2 { color: var(--ok); }

/* ===========================================================================
   ABAS COM CONTAGEM, TOTALIZADOR E PRECO NA CELULA

   Tirados das seis telas do Olist que o dono mandou em 28/08/2026. Sao os
   tres padroes que se repetem em TODAS elas - produtos, clientes, propostas,
   pedidos - e por isso sao os que valem copiar. O resto que eles tem (painel
   de automacao, colunas configuraveis, marcadores livres) e peso para uma
   empresa de 27 produtos.
   =========================================================================== */
.abas-contagem {
  display: flex; gap: var(--e1); flex-wrap: wrap;
  border-bottom: 1px solid var(--linha); margin: var(--e4) 0 0;
}
.abas-contagem .aba {
  display: flex; align-items: baseline; gap: var(--e2);
  padding: var(--e2) var(--e3); text-decoration: none; color: var(--fraco);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-size: var(--t-peq);
}
.abas-contagem .aba:hover { color: var(--tinta); background: var(--hover); }
.abas-contagem .aba.ativa {
  color: var(--tinta); border-bottom-color: var(--acento); font-weight: 600;
}
.abas-contagem .conta {
  font-variant-numeric: tabular-nums; font-size: var(--t-mini);
  font-weight: 700; color: var(--fraquissimo);
}
.abas-contagem .aba.ativa .conta { color: var(--acento); }
/* A cor e REFORCO do estado, nunca o unico sinal: o rotulo e a contagem
   continuam la para quem nao distingue as cores. */
.abas-contagem .tom-bom .conta     { color: var(--ok); }
.abas-contagem .tom-atencao .conta { color: var(--alerta); }
.abas-contagem .tom-ruim .conta    { color: var(--erro); }

.totalizador {
  display: flex; justify-content: flex-end; gap: var(--e5, 24px);
  padding: var(--e3) var(--e2); border-top: 2px solid var(--linha-forte);
  font-size: var(--t-peq);
}
.totalizador strong { font-size: var(--t-med); font-weight: 650; }
.totalizador .rot { color: var(--fraco); font-size: var(--t-mini); }

/* Preco abaixo da tabela destacado NA PROPRIA CELULA - o olho encontra o
   problema onde ele esta, nao duas colunas depois. */
td.celula-preco.abaixo-da-lista {
  background: var(--sol-fraco);
  box-shadow: inset 2px 0 0 var(--sol);
}
td.celula-preco.origem-sugerido { background: var(--n-50); }
td.celula-preco .porque { display: block; font-size: var(--t-micro); }

.chip.novo  { background: var(--acento-fraco); color: var(--acento); font-weight: 600; }
.chip.volta { background: var(--ok-fraco); color: var(--ok); font-weight: 600; }
.sem-retorno {
  color: var(--alerta); font-weight: 600; font-size: var(--t-mini);
  border-bottom: 1px dashed var(--alerta); cursor: default;
}
.rot-inline { font-size: var(--t-peq); color: var(--fraco); }

/* ---------------------------------------------------- A PECA DE LISTA ---
   18 das 22 telas do sistema sao lista com tabela, e foram escritas uma a
   uma - 39 cabecalhos a mao, cada um com seu jeito. Isto e o vocabulario
   comum que a tela de Notas de venda estreia e as outras dez herdam. */
.barra-busca {
  display: flex; gap: var(--e2); align-items: center; margin: var(--e3) 0;
}
.barra-busca input[type=search] {
  flex: 1 1 320px; max-width: 460px;
}

/* Ordenacao: a seta so existe em coluna que ordena de verdade. Seta que nao
   faz nada e pior que seta nenhuma - ensina que clicar nao adianta. */
.tabela th a.ordenar {
  display: inline-flex; align-items: center; gap: 4px;
  color: inherit; text-decoration: none; white-space: nowrap;
}
.tabela th a.ordenar:hover { color: var(--acento); }
.tabela th a.ordenar .seta {
  font-size: .82em; color: var(--fraquissimo); line-height: 1;
}
.tabela th a.ordenar.ativa { color: var(--acento); font-weight: 650; }
.tabela th a.ordenar.ativa .seta { color: var(--acento); }
.tabela th.col-acao { width: 1%; }

/* --------------------------------------------- O CABECALHO DO ORCAMENTO ---
   Busca de cliente com sugestao, cadastro inline e cenario numa tela so. Dos
   prints do Olist de 28/08/2026, que fazem exatamente isso. */
.cabeca-orcamento {
  background: var(--card); border: 1px solid var(--linha);
  border-radius: 8px; padding: var(--e4); margin-bottom: var(--e4);
}
.campo-cliente > label {
  display: block; font-size: var(--t-peq); font-weight: 600;
  color: var(--fraco); margin-bottom: var(--e1);
}
.busca-inline { position: relative; max-width: 520px; }
.busca-inline input { width: 100%; box-sizing: border-box; }
.sugestoes {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px);
  list-style: none; margin: 0; padding: var(--e1);
  background: var(--card); border: 1px solid var(--linha-forte);
  border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.14);
  max-height: 320px; overflow-y: auto;
}
.sugestoes button {
  display: block; width: 100%; text-align: left; border: 0; cursor: pointer;
  background: transparent; font: inherit; padding: var(--e2); border-radius: 4px;
  color: var(--tinta);
}
.sugestoes button:hover { background: var(--acento-fraco); }
.sugestoes .porque { display: block; }
.sugestoes .vazia { padding: var(--e2); color: var(--fraco); font-size: var(--t-peq); }
.atalhos-cliente {
  display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center;
  margin: var(--e2) 0 0;
}
.cadastro-inline { margin-top: var(--e3); }
.cadastro-inline .grade-cadastro { margin-top: var(--e3); }
.cenario { margin-top: var(--e3); padding-top: var(--e3);
           border-top: 1px solid var(--linha); }
.cenario label .porque { display: block; }

/* O menu por AREA. O rotulo do grupo custa uma linha e economiza a pergunta
   "onde fica isso?" - que e a que mais se faz em sistema com 20 telas. */
.menu nav.grupo { margin-top: var(--e3); }
/* O ROTULO DE GRUPO tinha DUAS marcacoes e uma so tinha CSS - 31/08/2026.
 *
 * Os grupos novos usavam `<span class="rotulo-grupo">` e a regra apontava para
 * `.menu .rotulo-grupo`, mas o container e `.grupo-nav`. A regra nunca pegou:
 * "Comercial" e "Financeiro" renderizavam como texto solto NA MESMA LINHA do
 * primeiro link, e liam como se fossem itens do menu.
 *
 * Agora ha uma marcacao so - `<div class="rotulo">`, que ja tinha estilo e ja
 * tinha passado por uma correcao de contraste. Duas formas de escrever a mesma
 * coisa e como isto acaba: uma delas envelhece sem ninguem olhar. */
.grupo-nav > .rotulo { display: block; }

/* ------------------------------------------------------ A GRADE DE PRECO ---
   Uma linha por forma de pagamento, com o minimo e os tres alvos lado a lado.
   O dono le a grade e conversa com o cliente - foi o que ele pediu em
   28/08/2026, no lugar de escolher uma forma por vez. */
.grade-preco td.celula-minimo { background: var(--sol-fraco); }
.grade-preco td.celula-minimo strong { color: var(--alerta); }
.grade-preco td.celula-alvo strong { color: var(--ok); }
.grade-preco .sobra {
  display: block; font-size: var(--t-mini); color: var(--fraco);
  font-variant-numeric: tabular-nums;
}
.grade-preco td { vertical-align: top; }

/* O piso saiu da tabela: ele nunca foi preco de venda, e ficar lado a lado com
   dois precos que se usam de verdade so disputava atencao. */
.rodape-piso {
  border-left: 3px solid var(--linha-forte); padding-left: var(--e3);
  margin-top: var(--e4);
}
details.memoria { margin-top: var(--e4); }
details.memoria summary {
  cursor: pointer; font-size: var(--t-peq); color: var(--fraco);
  font-weight: 600; padding: var(--e2) 0;
}
details.memoria summary:hover { color: var(--acento); }
details.memoria td.porque { font-size: var(--t-peq); color: var(--fraco); }

/* ===========================================================================
   O PACOTE DE 28/08/2026 - modulos H a P.

   Tres regras que valem para tudo daqui para baixo:

   1. NADA DE COR SOZINHA. Cerca de 8% dos homens tem alguma deficiencia de
      visao de cor. Toda marca de estado tem tambem rotulo, sinal ou borda.
   2. NUMERO EM TABULAR. `font-variant-numeric: tabular-nums` alinha a coluna
      pela virgula sem precisar de tabela.
   3. O "porque" e sempre mais leve que o dado. Ele explica, nao compete.
   =========================================================================== */

/* ------------------------------------------------------ quatro blocos ---- */
.quatro {
  display: grid; gap: var(--e3); margin: var(--e4) 0;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* --------------------------------------------------- a barra de acao ----- */
/* A lista tem duas coisas: os itens e o botao. O botao vem antes da tabela
   porque e a acao principal - "novo orcamento" nao e um filtro. */
.barra-acao {
  display: flex; align-items: center; gap: var(--e3);
  flex-wrap: wrap; margin: var(--e4) 0;
}
.barra-acao .porque { flex: 1 1 20ch; }
.botao.grande { font-size: var(--t-med); padding: var(--e2) var(--e4); }
.botao.secundario.perigo { border-color: var(--erro); color: var(--erro); }

/* ----------------------------------------------------------- o modal ----- */
/* <dialog> nativo: o navegador ja resolve foco, tecla Esc e fundo escurecido -
   tres coisas que implementacao a mao costuma errar. */
dialog.modal {
  border: 1px solid var(--linha-forte); border-radius: var(--r-m);
  background: var(--fundo); color: var(--tinta);
  padding: var(--e5); max-width: 44rem; width: calc(100vw - 2rem);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
}
/* MODAL LARGO, e nao "grande" - 02/09/2026.
 *
 * `.grande` e a classe do NUMERO EM DESTAQUE: 30px, peso 700, entrelinha
 * apertada. `dialog.modal.grande` so acrescentava a largura, entao o modal
 * herdava a tipografia do numero - e o modal de cliente vinha assim desde que
 * nasceu, com todo o texto em 30px negrito. Ninguem tinha reclamado porque o
 * conteudo dele e curto.
 *
 * Descobri reusando a classe na ficha da conta. Uma classe que quer dizer duas
 * coisas acerta uma e estraga a outra sem avisar. */
dialog.modal.largo { max-width: 60rem; }
dialog.modal::backdrop { background: rgba(0, 0, 0, .5); }
dialog.modal h3 { margin: 0 0 var(--e3); grid-column: 1 / -1; }
.acoes-modal { display: flex; gap: var(--e2); margin-top: var(--e3); }
.aviso-documento[data-tom="ruim"] { color: var(--erro); font-weight: 600; }
.aviso-documento[data-tom="bom"]  { color: var(--ok); }

/* --------------------------------------------------- ficha do cliente ---- */
/* Os dados na propria tela, travados - "clicou em editar, libera". */
.ficha-cliente {
  display: grid; gap: var(--e2) var(--e4); margin: var(--e3) 0;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.ficha-cliente dt {
  font-size: var(--t-mini); color: var(--fraco); text-transform: uppercase;
  letter-spacing: .04em;
}
.ficha-cliente dd { margin: 0; font-weight: 600; }

/* ------------------------------------------------- uma pergunta por vez -- */
/* Seis botoes iguais viraram uma pergunta. O bloco tem peso visual proprio
   porque ele E a proxima acao, nao mais uma opcao entre outras. */
.proxima-pergunta {
  margin-top: var(--e5); padding: var(--e4);
  border: 1px solid var(--linha-forte); border-radius: var(--r-m);
  background: var(--card-2);
}
.proxima-pergunta h2 { margin-top: 0; }
.proxima-pergunta.pergunta-aprovacao { border-left: 4px solid var(--alerta); }
.proxima-pergunta.pergunta-resposta  { border-left: 4px solid var(--acento); }
.proxima-pergunta.pergunta-pedido    { border-left: 4px solid var(--ok); }

/* As tres saidas lado a lado: sao respostas a MESMA pergunta, e nao tres
   acoes independentes. Por isso dividem a mesma linha e o mesmo peso. */
.tres-respostas {
  display: grid; gap: var(--e3); margin-top: var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.tres-respostas form {
  padding: var(--e3); border: 1px solid var(--linha); border-radius: var(--r-p);
  background: var(--fundo);
}
.tres-respostas h3 { margin: 0 0 var(--e2); font-size: var(--t-med); }
.tres-respostas .resposta-sim h3 { color: var(--ok); }
.tres-respostas .resposta-nao h3 { color: var(--erro); }
.tres-respostas input, .tres-respostas select { width: 100%; box-sizing: border-box; }

/* ------------------------------------------- o destrinchado do dono ------ */
/* "Quanto foi taxa de vendedor, quanto foi cada deducao? Eu quero o
   destrinchado, nao so o preco final." Cada coluna e uma parcela do preco; a
   soma fecha por construcao. */
details.destrinchado { margin: var(--e4) 0; }
details.destrinchado summary {
  cursor: pointer; font-weight: 600; padding: var(--e2) 0; color: var(--acento);
}
details.destrinchado td.v { font-variant-numeric: tabular-nums; }
details.destrinchado td.negativo { color: var(--erro); }
.explicacao-alvo {
  border-left: 3px solid var(--acento); padding-left: var(--e3);
  margin-top: var(--e3);
}

/* ------------------------------------------ a resposta ao preco ofertado - */
/* A faixa e cor E texto: o veredito esta escrito por extenso na propria
   linha, entao quem nao distingue as cores continua sabendo a resposta. */
.proposta-do-cliente { margin: var(--e4) 0; }
.resposta-oferta tr.faixa-abaixo_do_piso   { background: var(--erro-fraco); }
.resposta-oferta tr.faixa-abaixo_do_minimo { background: var(--alerta-bg); }
.resposta-oferta tr.faixa-acima_do_alvo    { background: var(--ok-fraco); }
.resposta-oferta td { vertical-align: top; }

/* --------------------------------------------------------- o pedido ------ */
.porque.atencao { color: var(--alerta); font-weight: 600; }
.lista-seca { margin: var(--e2) 0; padding-left: var(--e4); }
.lista-seca li { margin: var(--e1) 0; }
.rastro {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-mini);
  white-space: pre-wrap; color: var(--fraco);
  border-left: 3px solid var(--linha); padding-left: var(--e3);
}
.origem-pedido { margin: var(--e2) 0; }

/* -------------------------------------------------- caixas do produto ---- */
/* A conta aparece enquanto se digita: 2455 mm e 245,5 cm sao erros que a tela
   nao distingue sozinha, mas a conta viva denuncia - 0,0567 m3 contra 0,0057. */
.conta-viva {
  font-variant-numeric: tabular-nums; padding: var(--e2);
  background: var(--card-2); border-radius: var(--r-p);
}
.conta-viva[data-tom="atencao"] { color: var(--alerta); font-weight: 600; }

/* ------------------------------------------------- notas fiscais --------- */
.texto-envio {
  white-space: pre-wrap; background: var(--card-2); padding: var(--e3);
  border-radius: var(--r-p); font-size: var(--t-peq); max-height: 14rem;
  overflow: auto;
}

/* -------------------------------------------------------- a entrada ------ */
.entrada { max-width: 26rem; margin: 12vh auto; }
.form-entrada { display: grid; gap: var(--e3); margin: var(--e4) 0; }
.form-entrada input { width: 100%; box-sizing: border-box; }

/* --------------------------------------------------- comissao do vendedor */
/* Separada do salario de proposito: fixo e variavel sao naturezas diferentes,
   e somados numa linha so some a parte que move o ponto de equilibrio. */
.comissao-do-mes .linha-comissao {
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e3) 0; border-bottom: 1px solid var(--linha);
  flex-wrap: wrap;
}
.comissao-do-mes .linha-comissao > span:first-child { flex: 1 1 24ch; }
.valor-comissao { font-variant-numeric: tabular-nums; font-size: var(--t-med); }

/* Responder quem vendeu, na propria linha em que a pergunta aparece. Mesma
   forma da linha de comissao logo acima, porque e a mesma lista lida do mesmo
   jeito - so que esta tem a resposta junto. */
/* Uma acao com o campo que ela exige, na mesma linha. Fechar o mes pede
   observacao, reabrir exige motivo - e o campo tem de estar onde o botao
   esta, senao vira outra tela. */
.linha-acao { display: flex; align-items: center; gap: var(--e3);
  flex-wrap: wrap; margin-top: var(--e3); }

.sem-vendedor { margin-top: var(--e4); }
.linha-sem-vendedor {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) 0; border-top: 1px solid var(--linha);
  flex-wrap: wrap;
}
.linha-sem-vendedor .quem { flex: 1 1 24ch; min-width: 14ch; }
.linha-sem-vendedor select { flex: 0 1 auto; min-width: 26ch; }

/* ------------------------------------------------ as tres saidas do dono -- */
/* Aprovar, devolver com outro valor, recusar. Lado a lado e com o MESMO peso:
   sao respostas a mesma pergunta, e destacar uma faria a tela torcer. */
.tres-decisoes {
  display: grid; gap: var(--e3); margin-top: var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.tres-decisoes form {
  display: flex; flex-direction: column; gap: var(--e2);
  padding: var(--e3); border: 1px solid var(--linha); border-radius: var(--r-p);
  background: var(--card);
}
.tres-decisoes h4 { margin: 0; font-size: var(--t-peq); }
.tres-decisoes .decisao-sim h4 { color: var(--ok); }
.tres-decisoes .decisao-nao h4 { color: var(--erro); }
.tres-decisoes input, .tres-decisoes label { width: 100%; box-sizing: border-box; }
.tres-decisoes label { display: flex; flex-direction: column; gap: var(--e1);
  font-size: var(--t-mini); color: var(--fraco); }
.tres-decisoes .porque { margin: 0; }
.valor-decisao {
  margin: 0; font-size: var(--t-tit); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------ o modal de desconto ----- */
/* O formulario abria dentro da celula da tabela e ficava cortado: a tabela vive
   em `.rolavel { overflow-x: auto }`, e overflow em um eixo recorta nos DOIS.
   <dialog> sobe para a camada de topo do navegador, fora de qualquer recorte. */
dialog.modal form { display: flex; flex-direction: column; gap: var(--e3); }
dialog.modal form.grade-cadastro { display: grid; }
dialog.modal label {
  display: flex; flex-direction: column; gap: var(--e1);
  font-size: var(--t-mini); color: var(--fraco);
}
dialog.modal input[type=text] { width: 100%; box-sizing: border-box; }

/* O <dialog> SOBE PARA A CAMADA DE TOPO, MAS NAO SAI DA CASCATA.
 *
 * Este e o segundo passo da correcao de 28/08/2026, e ele so apareceu depois
 * de a primeira funcionar: o modal de desconto vive dentro de
 * `<td class="acoes-nota">`, que tem `white-space: nowrap` para os botoes da
 * celula nao quebrarem em duas linhas.
 *
 * O `dialog` escapa do RECORTE da tabela - por isso ele abre inteiro - mas
 * continua sendo filho daquela celula na arvore, entao herda o nowrap. O
 * resultado era um modal centralizado e correto, com dois paragrafos saindo
 * pela direita e uma barra de rolagem horizontal.
 *
 * A regra abaixo devolve o comportamento normal de texto dentro de qualquer
 * dialog, venha ele de onde vier. */
dialog.modal, dialog.modal * { white-space: normal; }
dialog.modal .dinheiro { white-space: nowrap; }
dialog.modal form > * { min-width: 0; max-width: 100%; }
dialog.modal .ficha-cliente { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

/* ===========================================================================
   A GRADE DE ITENS DO ORCAMENTO - 28/08/2026.

   O dono mandou o print do Olist: "uma caixa maior com maior visibilidade do
   nome do item, e o produto ja fica cadastrado na propria aba de pesquisa.
   Fica mais limpo. SEMPRE PODENDO ADICIONAR MAIS E SEMPRE ABRE UM CAMPO
   ABAIXO."

   AS LARGURAS SAO A DECISAO, e nao o enfeite. Codigo tem 12 caracteres, unidade
   tem 2, quantidade tem 4. O nome tem 48 - e "AQUEC SOLAR BP 800L INOX 316 -
   KORT SD316 80BP" cortado no meio nao distingue o 800L do 1000L. Entao as
   colunas fixas ficam no seu tamanho e a do item come todo o resto.
   =========================================================================== */
.grade-itens { table-layout: auto; width: 100%; }
.grade-itens .col-n     { width: 2.5ch; color: var(--fraco); text-align: center; }
.grade-itens .col-sku   { width: 12ch; }
.grade-itens .col-qtd   { width: 7ch; }
.grade-itens .col-un    { width: 4ch; text-align: center; }
/* O NOWRAP FICA NO NUMERO, NAO NA CELULA.
   Com ele na celula, o "tabela R$ 8.250,20" que explica o desconto ficava na
   MESMA linha do preco e empurrava a coluna para 211px - roubando largura
   justamente do nome do produto, que tinha 148px. O numero nao quebra; a
   explicacao quebra e desce. */
.grade-itens .col-preco { width: 12ch; }
.grade-itens .col-preco .dinheiro { white-space: nowrap; }
.grade-itens .col-preco .porque { display: block; margin-top: 2px; }
.grade-itens .col-acao  { width: 9ch; white-space: nowrap; }
/* As colunas fixas apertam antes do nome: ele e o unico que perde sentido
   cortado. `padding` menor nas estreitas devolve dois caracteres a cada uma. */
.grade-itens .col-n, .grade-itens .col-un, .grade-itens .col-qtd {
  padding-left: var(--e2); padding-right: var(--e2);
}

/* A CELULA DO ITEM: o nome grande e o estado embaixo, mais leve. O estado e
   explicacao; competir com o nome pela atencao seria trocar o essencial pelo
   acessorio. */
.grade-itens .celula-item { min-width: 18ch; }
.grade-itens .celula-item strong {
  display: block; line-height: 1.35; font-weight: 640;
}
.grade-itens .estado-preco {
  display: flex; flex-wrap: wrap; gap: var(--e1) var(--e2);
  align-items: center; margin-top: var(--e1);
}
.grade-itens td { vertical-align: top; padding-top: var(--e3); }

/* --------------------------------------------------- a linha que sempre abre
   Ela e a ultima linha da tabela, nao um formulario a parte. Fundo levemente
   diferente para o olho saber, sem borda nova, que separaria o que e uma coisa
   so: a lista e o lugar de escrever nela. */
.grade-itens tr.linha-nova > td {
  background: var(--card-2);
  border-top: 2px solid var(--linha-forte);
  vertical-align: middle;
}
.grade-itens tr.linha-nova input {
  width: 100%; box-sizing: border-box; padding: var(--e2);
  font-size: var(--t-peq);
}
.grade-itens tr.linha-nova input.v { text-align: right; }
.grade-itens tr.linha-nova input[readonly] {
  background: transparent; border-color: transparent; color: var(--fraco);
  padding: 0; text-align: center;
}
.grade-itens tr.linha-nova .col-un input { text-align: center; }
.grade-itens tr.linha-nova .busca-inline input { font-size: var(--t-peq); }
.grade-itens tr.linha-nova .busca-inline { position: relative; }

/* A LISTA DE SUGESTOES SAI DE TODA CAIXA - versao definitiva, 28/08/2026.
 *
 * A tentativa anterior era `position: absolute` mais `overflow: visible` no
 * `.rolavel`. Nao bastou, e o dono achou de novo: medindo os ancestrais, ha
 * DOIS recortes, nao um.
 *
 *     TABLE.tabela   overflow: hidden   <- este eu nao conhecia
 *     DIV.rolavel    overflow: auto
 *
 * O da tabela existe para o canto arredondado cortar as celulas; tirar de la
 * estragaria a borda de todas as tabelas do sistema.
 *
 * `position: fixed` resolve de uma vez porque nao depende de ancestral nenhum:
 * a lista se posiciona pela JANELA. O JavaScript calcula onde ela cai e vira
 * para cima quando nao ha espaco embaixo. */
.sugestoes { z-index: 9999; }
.grade-itens tr.linha-nova .busca-inline { position: static; }

.link.perigo { color: var(--erro); }
form.em-linha { display: inline; }

/* ===========================================================================
   O DOCUMENTO: CABECALHO, HIERARQUIA E RITMO - 28/08/2026.

   O dono: "veja maneiras de deixar tudo mais bonito, mais cara de sistema
   profissional."

   O que fazia a tela parecer amadora nao era falta de enfeite: era falta de
   HIERARQUIA. Podiam aparecer seis caixas coloridas empilhadas, todas no mesmo
   tom, e seis alertas iguais nao sao seis alertas - sao zero.

   Tres niveis agora: a faixa do documento (o que ele e), o aviso unico (o que
   trava), a grade (os itens). O resto e metadado e se comporta como metadado.
   =========================================================================== */
.cabeca-documento {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e6); flex-wrap: wrap;
  padding-bottom: var(--e4); margin-bottom: var(--e5);
  border-bottom: 1px solid var(--linha);
}
.cabeca-documento .identidade { flex: 1 1 24rem; min-width: 0; }
.cabeca-documento .volta { margin: 0 0 var(--e2); font-size: var(--t-peq); }
.cabeca-documento h1 { margin: 0; display: flex; align-items: center;
  gap: var(--e3); flex-wrap: wrap; }
.cabeca-documento .meta {
  margin: var(--e2) 0 0; color: var(--fraco); font-size: var(--t-peq);
  line-height: 1.5;
}
.cabeca-documento .meta .vencido { color: var(--erro); font-weight: 600; }

/* O TOTAL E O NUMERO DA TELA. Ele fica a direita, grande, alinhado pela
   virgula - e e a unica coisa que compete com o nome do documento. */
.valor-documento {
  text-align: right; display: flex; flex-direction: column; gap: 2px;
  padding-left: var(--e4); border-left: 3px solid var(--acento);
}
.valor-documento strong {
  font-size: var(--t-g); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.valor-documento .rot {
  font-size: var(--t-mini); color: var(--fraco);
  text-transform: uppercase; letter-spacing: .05em;
}

/* ------------------------------------------------------- o aviso unico ---- */
.avisos-do-orcamento ul { margin: 0; padding-left: var(--e4); }
.avisos-do-orcamento li { margin: var(--e2) 0; }
.avisos-do-orcamento .porque { display: block; margin-top: 2px; }

/* Liberado nao e alerta: e confirmacao. Uma linha, sem caixa - caixa verde ao
   lado de caixa amarela faz as duas perderem sentido. */
.linha-liberado {
  border-left: 3px solid var(--ok); padding-left: var(--e3);
  margin: var(--e3) 0; font-size: var(--t-peq);
}
.recado-alcada {
  border-left: 3px solid var(--linha-forte); padding-left: var(--e3);
  margin: var(--e4) 0 var(--e3); color: var(--tinta-2, var(--fraco));
}
.recado-alcada.faixa-aprovacao   { border-color: var(--alerta); }
.recado-alcada.faixa-abaixo_do_piso { border-color: var(--erro); }
.recado-alcada.faixa-alcada      { border-color: var(--ok); }
.caixa.proposta-pronta {
  background: var(--acento-fraco); border-color: var(--acento-linha);
}

/* ---------------------------------------------------- ritmo da tabela ----- */
/* Linha que responde ao ponteiro: em tabela larga, e o que impede o olho de
   pular de linha no meio do caminho. */
.grade-itens tbody tr:not(.linha-nova):hover > td { background: var(--hover); }
.grade-itens tbody tr:not(:last-child) > td { border-bottom: 1px solid var(--linha); }
.grade-itens .estado-preco .marca-estado { font-size: var(--t-micro, 11px); }
.grade-itens tfoot th { font-weight: 600; }
.grade-itens tfoot tr.total th {
  font-size: var(--t-med); border-top: 2px solid var(--linha-forte);
}
.grade-itens .col-acao .link + .link { margin-left: var(--e2); }

/* ------------------------------------------------------------- o frete ---- */
/* Eram dois cartoes lado a lado, com o mesmo peso, para a MESMA decisao:
   quanto custa levar. Duas superficies para uma pergunta - a mesma confusao da
   grade de itens, so que menor. Agora e um bloco com dois caminhos, e o
   segundo fica dobrado porque e excecao. */
.bloco-frete {
  margin: var(--e5) 0; padding: var(--e4) var(--e5);
  border: 1px solid var(--linha); border-radius: var(--r-g);
  background: var(--card);
}
.bloco-frete .cabeca-bloco {
  display: flex; align-items: baseline; gap: var(--e3);
  flex-wrap: wrap; margin-bottom: var(--e3);
}
.bloco-frete h3 { margin: 0; }
.bloco-frete .porque .atencao { color: var(--alerta); }

/* Cada opcao e uma linha: quem leva, quanto custa, em quantos dias. O valor
   alinhado a direita e em tabular deixa as tres comparaveis de relance - que e
   a unica coisa que se faz com uma lista de fretes. */
.opcoes-frete .marca-check {
  display: grid; grid-template-columns: 1fr auto; gap: 0 var(--e3);
  align-items: baseline; padding: var(--e3);
  border: 1px solid var(--linha); border-radius: var(--r-p);
  margin-bottom: var(--e2); cursor: pointer;
}
.opcoes-frete .marca-check:hover { background: var(--hover); }
.opcoes-frete .marca-check:has(input:checked) {
  border-color: var(--acento); background: var(--acento-fraco);
}
.opcoes-frete .marca-check input { grid-row: 1 / 3; margin-right: var(--e2); }
.opcoes-frete .quem { font-weight: 620; }
.opcoes-frete .quanto {
  text-align: right; font-variant-numeric: tabular-nums; font-weight: 640;
}
.opcoes-frete .porque { grid-column: 1 / -1; }
.pe-do-frete {
  display: flex; align-items: center; gap: var(--e3);
  flex-wrap: wrap; margin-top: var(--e3);
}
details.frete-a-mao { margin-top: var(--e4); }
details.frete-a-mao > summary {
  cursor: pointer; color: var(--acento); font-size: var(--t-peq);
  font-weight: 600; padding: var(--e2) 0;
}


/* O FRETE ESCOLHIDO - 28/08/2026.
 *
 * Antes o frete escolhido nao tinha lugar na tela: aparecia so como uma linha
 * no rodape da tabela de itens, indistinguivel de um subtotal calculado. Uma
 * ESCOLHA precisa parecer uma escolha - e toda escolha precisa ter saida. */
.frete-escolhido {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  justify-content: space-between;
  padding: .85rem 1rem; border: 1px solid var(--borda);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio); background: var(--card-2);
}
.frete-escolhido .o-que-vale { display: grid; gap: .15rem; }
.frete-escolhido .quanto { font-size: 1.15rem; }
.frete-escolhido .quem { font-weight: 600; }
.frete-escolhido .porque { max-width: 46ch; }
.saidas-do-frete { display: flex; flex-wrap: wrap; gap: .5rem; }
.saidas-do-frete form { margin: 0; }

/* CONCILIAR O ESTOQUE - 31/08/2026.
 *
 * O dono travou no corte porque a tela de estoque so mostrava. Nao havia como
 * contar, subir planilha ou corrigir um item - a unica porta para a contagem
 * era um script Python.
 *
 * O bloco fica ANTES da lista, e nao depois: no dia do fechamento conciliar e
 * a tarefa, e a lista e a consulta. Quem chega aqui em 31/08 vem para contar. */
.conciliar-estoque {
  border: 1px solid var(--borda);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio);
  background: var(--card-2);
  padding: var(--e4);
  margin: var(--e4) 0;
}
.conciliar-estoque .tres-decisoes { margin: var(--e3) 0; }
.conciliar-estoque > .porque { max-width: 78ch; }

.linha-campos { display: flex; flex-wrap: wrap; gap: var(--e4); margin: var(--e3) 0; }
.linha-campos label { display: grid; gap: 2px; font-size: var(--t-peq); }

/* A GRADE DE CONTAGEM. A coluna CONTADO e a unica editavel, e por isso ela e a
 * unica que se destaca - tudo mais ali e referencia. */
.grade-contagem td, .grade-contagem th { padding: 4px 8px; }
.grade-contagem .contado {
  text-align: right; font-variant-numeric: tabular-nums;
  border: 1px solid var(--acento-linha); border-radius: 4px; padding: 3px 6px;
}
.grade-contagem .contado:focus { outline: none; box-shadow: var(--anel); }
.grade-contagem tr:has(.contado:not(:placeholder-shown)) { background: var(--acento-fraco); }

.tabela.compacta td, .tabela.compacta th { padding: 4px 8px; font-size: var(--t-peq); }

/* CUSTEAR O QUE ENTROU SEM NOTA - 31/08/2026.
 * Cada item e um formulario proprio. Nao e tabela: `<form>` filho de `<tr>` e
 * retirado do lugar pelo navegador e os campos ficam orfaos - a tela parece
 * certa e o envio chega vazio. */
.fila-custeio { display: grid; gap: var(--e2); margin: var(--e3) 0; }
.linha-custeio {
  display: flex; flex-wrap: wrap; gap: var(--e3); align-items: end;
  padding: var(--e2) var(--e3); border: 1px solid var(--borda);
  border-radius: var(--raio); background: var(--card);
}
.linha-custeio .quem { font-weight: 600; min-width: 22ch; flex: 1 1 22ch; }
.linha-custeio .quanto { font-variant-numeric: tabular-nums; min-width: 7ch; }
.linha-custeio label { display: grid; gap: 2px; font-size: var(--t-mini);
  color: var(--fraco); }
.linha-custeio label.cresce { flex: 2 1 26ch; }
.linha-custeio input[type="text"] { width: 100%; }


/* ABAS DE TELA - 31/08/2026.
 *
 * Diferentes das `.abas-contagem`, que filtram uma lista por estado. Estas
 * trocam O QUE a tela mostra: momentos diferentes do mesmo objeto. Por isso
 * sao maiores, tem sublinhado de selecao e carregam uma linha de explicacao -
 * quem chega precisa saber o que vai achar em cada uma antes de clicar. */
.abas-tela {
  display: flex; flex-wrap: wrap; gap: var(--e1);
  border-bottom: 2px solid var(--borda);
  margin: var(--e4) 0 var(--e4);
}
.abas-tela .aba {
  display: grid; gap: 1px; padding: var(--e2) var(--e4);
  text-decoration: none; color: var(--fraco); font-weight: 600;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  border-radius: var(--raio) var(--raio) 0 0;
}
.abas-tela .aba:hover { background: var(--hover); color: var(--tinta); }
.abas-tela .aba.ativa {
  color: var(--acento); border-bottom-color: var(--acento);
  background: var(--acento-fraco);
}
.abas-tela .aba .porque { font-weight: 400; font-size: var(--t-mini); }

/* O ATALHO GRANDE: quando uma tela deixa de mostrar algo e passa a apontar
 * para onde aquilo mora agora, o ponteiro precisa ter o peso do que saiu -
 * senao a informacao parece ter sumido. */
.atalho-grande {
  display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center;
  margin: var(--e3) 0 var(--e5);
}

/* De onde veio o numero. Fica junto do titulo do relatorio, discreto: nao e
 * aviso, e procedencia - e daqui a seis meses ela explica por que julho e
 * dezembro nao foram apurados do mesmo jeito. */
.fonte-do-numero {
  font-size: var(--t-peq); color: var(--fraco);
  border-left: 3px solid var(--acento-linha);
  padding: var(--e2) var(--e3); margin: 0 0 var(--e3);
  background: var(--card-2); border-radius: 0 var(--raio) var(--raio) 0;
  max-width: 84ch;
}

/* A BUSCA GLOBAL - 31/08/2026.
 *
 * Vive no cabecalho porque o cabecalho e o unico lugar presente em toda tela.
 * Ocupa o meio, entre o titulo e os ajustes: e o elemento mais usado dos tres,
 * e o unico que muda o que a pessoa esta fazendo. */
.busca-global { position: relative; flex: 1 1 22rem; max-width: 32rem; }
.busca-global input[type="search"] {
  width: 100%; padding: 6px 4.2rem 6px var(--e3);
  border: 1px solid var(--borda); border-radius: 999px;
  background: var(--card); color: var(--tinta); font-size: var(--t-peq);
}
.busca-global input:focus { outline: none; box-shadow: var(--anel);
  border-color: var(--acento); }
.atalho-busca {
  position: absolute; right: var(--e2); top: 50%; transform: translateY(-50%);
  font-size: var(--t-micro); color: var(--fraquissimo); pointer-events: none;
  border: 1px solid var(--borda); border-radius: 4px; padding: 1px 5px;
  background: var(--card-2); font-family: inherit;
}
.topo { gap: var(--e4); }

/* Os resultados herdam `.sugestoes` - a peca que ja sabe sair de qualquer
 * caixa com `overflow`. O cabecalho e mais um ancestral com recorte, e este
 * defeito ja voltou tres vezes por outros caminhos. */
.resultados-busca .grupo-busca { padding: var(--e2) var(--e3) 2px; }
.resultados-busca .grupo-busca .rotulo {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em;
  color: var(--fraco); font-weight: 700;
}
.resultados-busca a {
  display: grid; gap: 1px; padding: var(--e2) var(--e3);
  text-decoration: none; color: var(--tinta);
}
.resultados-busca a:hover, .resultados-busca a.destacado {
  background: var(--acento-fraco); color: var(--acento-forte);
}
.resultados-busca a .porque { font-size: var(--t-mini); color: var(--fraco); }

@media (max-width: 900px) {
  .busca-global { flex-basis: 100%; order: 3; }
  .atalho-busca { display: none; }
}


/* O NUMERO DA FILA NO MENU - 31/08/2026.
 * So existe quando ha trabalho: o macro nao desenha nada com zero. Badge que
 * mostra "0" ensina a ignorar badge. */
.fila-menu {
  display: inline-block; min-width: 1.35rem; text-align: center;
  margin-left: var(--e2); padding: 0 5px;
  font-size: var(--t-micro); font-weight: 700; line-height: 1.5;
  border-radius: 999px; background: var(--acento); color: #fff;
}
.ativo .fila-menu { background: var(--acento-forte); }

/* CONFIGURACOES - 31/08/2026.
 * Uma linha por ajuste: o que e, o valor, e desde quando vale. O "o que e"
 * ocupa a maior parte porque e onde mora a explicacao - um numero sem o porque
 * e um numero que ninguem ousa mexer. */
.lista-config { display: grid; gap: var(--e2); }
.linha-config {
  display: flex; flex-wrap: wrap; gap: var(--e3); align-items: end;
  padding: var(--e3); border: 1px solid var(--borda);
  border-radius: var(--raio); background: var(--card);
}
.linha-config .o-que-e { flex: 1 1 30ch; display: grid; gap: 2px; }
.linha-config .o-que-e .porque { max-width: 68ch; }
.linha-config .chave-tecnica { font-size: var(--t-micro); color: var(--fraquissimo); }
.linha-config .o-valor { display: flex; gap: 6px; align-items: center; }
.linha-config .o-valor input[type="text"] { width: 10ch; text-align: right; }
.linha-config .o-valor textarea { width: 42ch; }
.linha-config .unidade { font-size: var(--t-peq); color: var(--fraco); }
.linha-config .a-partir-de { display: grid; gap: 2px; font-size: var(--t-mini); }
.linha-config .a-partir-de label { display: grid; gap: 2px; color: var(--fraco); }

/* Travado e DIZENDO POR QUE. Travar sem explicar e o mesmo que esconder. */
.valor-travado {
  flex: 1 1 26ch; display: grid; gap: 2px;
  border-left: 3px solid var(--borda); padding-left: var(--e3);
}
.valor-travado .valor { font-weight: 700; font-variant-numeric: tabular-nums; }
tr.desligado { opacity: .55; }

/* CONTAS A PAGAR E A RECEBER - 01/09/2026.
 * O vencimento em destaque, nao em letra miuda: a pesquisa de telas de contas
 * e explicita sobre isso, e e o dado que decide o que fazer hoje. */
.celula-vencimento strong { font-variant-numeric: tabular-nums; display: block; }
tr.vencida { background: color-mix(in srgb, var(--erro) 6%, transparent); }
tr.vencida .celula-vencimento strong { color: var(--erro); }

/* O DESVIO CONTRA O VENCIMENTO, depois da baixa. Antes a lista voltava a dizer
 * so "realizado" e a diferenca entre o previsto e o acontecido sumia da tela -
 * e e ela que responde se o prazo cadastrado corresponde ao mundo. */
.marca-desvio {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: var(--t-mini); font-weight: 600;
}
.marca-desvio.antes { background: var(--ok-fraco, #e6f4ea); color: var(--ok); }
.marca-desvio.depois { background: var(--erro-fraco); color: var(--erro); }

/* A CONFERENCIA DE SALDO - 01/09/2026.
 * Os dois numeros lado a lado, e a diferenca em terceiro. Nao e relatorio: e a
 * primeira coisa que se ve depois de subir o extrato. */
.conferencia-saldo .dois-saldos {
  display: flex; flex-wrap: wrap; gap: var(--e5); margin-bottom: var(--e2);
}
.conferencia-saldo .dois-saldos > div { display: grid; gap: 1px; }
.conferencia-saldo .rotulo {
  font-size: var(--t-mini); text-transform: uppercase; letter-spacing: .04em;
  color: var(--fraco);
}
.conferencia-saldo .dois-saldos strong {
  font-size: 1.25rem; font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   A ABA DE AVISOS - 01/09/2026.

   O dono: "esses avisos de sistema deveriam existir uma aba de avisos, onde
   todos os avisos do sistema ficam. E esses que aparecem na tela deveriam ter
   um x para poder fechar e sumir da tela de origem mas permanecer na aba."

   O PESO VISUAL SEGUE A SEVERIDADE, e nada mais. Nao ha aviso decorativo:
   quem olha a lista tem de saber, sem ler, o que impede de operar.
   =========================================================================== */
.lista-avisos { display: grid; gap: var(--e2); margin: var(--e3) 0 var(--e5); }

.aviso {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--card);
}
.aviso .corpo-aviso { flex: 1 1 34ch; display: grid; gap: 2px; }
.aviso .corpo-aviso .porque { margin: 0; max-width: 82ch; }
.aviso .marca-tempo { font-size: var(--t-micro); color: var(--fraquissimo); }
.aviso .valor-aviso {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem;
  white-space: nowrap;
}
.aviso .acoes-aviso {
  display: flex; align-items: center; gap: var(--e3); margin-left: auto;
}

/* A tarja da esquerda e a palavra sao a MESMA informacao dita duas vezes, de
   proposito: cor sozinha nao serve a quem nao distingue vermelho de verde. */
.aviso .marca-sev {
  align-self: stretch; display: flex; align-items: center;
  min-width: 8.5ch; padding-right: var(--e3);
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700;
}
.aviso.sev-impede    { border-left: 3px solid var(--erro); background: var(--erro-fraco); }
.aviso.sev-impede    .marca-sev { color: var(--erro); }
.aviso.sev-atrapalha { border-left: 3px solid var(--alerta-linha, var(--alerta)); }
.aviso.sev-atrapalha .marca-sev { color: var(--alerta); }
.aviso.sev-informa   { border-left: 3px solid var(--borda); }
.aviso.sev-informa   .marca-sev { color: var(--fraco); }

/* DISPENSADO NAO E RESOLVIDO. Fica pálido para nao competir com o que ainda
   aparece nas telas - e continua legivel, porque a condicao continua. */
.aviso.dispensado { opacity: .62; border-style: dashed; }

/* O X DA CAIXA NA TELA DE ORIGEM.
 * Canto superior direito, dentro da propria caixa, sem empurrar o texto. */
.caixa.com-x { position: relative; padding-right: calc(var(--e4) + 1.6rem); }
.caixa.com-x .o-x { position: absolute; top: 4px; right: 6px; margin: 0; }
.caixa.com-x .o-x .x {
  border: 0; background: none; cursor: pointer;
  font-size: 1.15rem; line-height: 1; padding: 2px 6px;
  color: var(--fraco); border-radius: 4px;
}
.caixa.com-x .o-x .x:hover { background: var(--hover); color: var(--tinta); }

/* Caixa de aviso de nivel medio: existe alerta-teto (erro) e aviso-ok (ok), e
   faltava o meio-termo - a condicao que atrapalha sem impedir. */
.caixa.aviso-atencao {
  border-left: 3px solid var(--alerta); background: var(--alerta-bg);
  padding: var(--e3) var(--e4); margin: var(--e4) 0; border-radius: 6px;
}
.caixa.aviso-atencao p { margin: 0 0 var(--e2); }
.caixa.aviso-atencao p:last-child { margin-bottom: 0; }
.caixa.aviso-atencao .porque { display: block; font-size: var(--t-peq); color: var(--fraco); }

/* O contador de avisos no menu: vermelho SO quando impede. */
.fila-menu.impede { background: var(--erro); }


/* O X de uma caixa nativa. Mesmo canto do X do quadro generico, para a pessoa
 * nao ter de aprender dois lugares. */
.caixa.com-x .x-do-aviso { position: absolute; top: 4px; right: 6px; }
.caixa.com-x .x-do-aviso form { margin: 0; }
.caixa.com-x .x-do-aviso .x {
  border: 0; background: none; cursor: pointer;
  font-size: 1.15rem; line-height: 1; padding: 2px 6px;
  color: var(--fraco); border-radius: 4px;
}
.caixa.com-x .x-do-aviso .x:hover { background: var(--hover); color: var(--tinta); }


/* ===========================================================================
   A FICHA DA CONTA - 02/09/2026.

   Ela reune numa tela so o que estava espalhado: os numeros, o extrato, o
   razao, o historico e as acoes. O criterio do dono - "se pra usar uma funcao
   a pessoa tem que sair da tela, ir pra outra e voltar, isso e retrabalho".
   =========================================================================== */
.fc-numeros {
  display: flex; flex-wrap: wrap; gap: var(--e5);
  margin: var(--e3) 0 var(--e4);
}
.fc-numeros > div { display: grid; gap: 1px; }
.fc-numeros .rotulo {
  font-size: var(--t-mini); text-transform: uppercase; letter-spacing: .04em;
  color: var(--fraco);
}
.fc-numeros strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }

#ficha h4 {
  margin: var(--e4) 0 var(--e2); font-size: var(--t-peq);
  text-transform: uppercase; letter-spacing: .04em; color: var(--fraco);
}
#ficha .lista-seca { margin: 0; padding-left: 1.1rem; display: grid; gap: 4px; }
#ficha .lista-seca .porque { display: block; }

/* As acoes ficam juntas e no mesmo peso: nenhuma delas e a "principal". Anular
 * uma conta e tao legitimo quanto corrigi-la, e destacar uma empurra a
 * escolha. */
.fc-acoes {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  margin: var(--e4) 0 var(--e2);
  padding-top: var(--e3); border-top: 1px solid var(--borda);
}
#fc-form:not(:empty) {
  margin-top: var(--e3); padding: var(--e3);
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--card);
}
#fc-form form { display: grid; gap: var(--e3); }
#fc-form .grade-cadastro { display: grid; gap: var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
#fc-form label.largo { grid-column: 1 / -1; }
#fc-form textarea { width: 100%; }

/* Juros e desconto ficam DOBRADOS na baixa: a maioria das baixas nao tem
 * nenhum dos dois, e tres campos vazios em toda baixa ensinam a pular a
 * secao inteira - inclusive nas vezes em que ela importa. */
.encargos-baixa summary { cursor: pointer; font-weight: 600; }
.encargos-baixa .grade-cadastro {
  display: grid; gap: var(--e3); margin-top: var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

/* ===========================================================================
   A PORTA - 02/09/2026.

   A tela de login e a unica que alguem de fora ve. Ela tem tres tarefas: dizer
   de quem e o sistema, receber a senha, e nao entregar nada alem disso.
   =========================================================================== */
.folha.entrada { max-width: 26rem; margin: 8vh auto; padding: 0 var(--e4); }
.marca-entrada { text-align: center; margin-bottom: var(--e4); }
.marca-entrada img { max-width: 15rem; height: auto; }

/* O nome em texto, quando o arquivo da logo nao esta la. As cores sao as da
 * marca; o desenho nao e - marca redesenhada de memoria fica PARECIDA, e
 * parecida e pior que ausente. */
.marca-texto {
  font-size: 1.9rem; font-weight: 800; letter-spacing: -.04em;
  margin: 0; color: #0B1033;
}
.marca-texto b { color: #F4581C; font-weight: 800; }
:root:not([data-theme="light"]) .marca-texto,
[data-theme="dark"] .marca-texto { color: #E7EDF4; }

.folha.entrada h1 {
  text-align: center; font-size: 1.05rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fraco);
  margin: 0 0 var(--e5);
}
.form-entrada { display: grid; gap: var(--e3); }
.form-entrada label { display: grid; gap: 4px; }
.form-entrada .botao { margin-top: var(--e2); }

/* A TROCA DE SENHA. Mesma largura da porta: e a continuacao dela, e nao uma
 * tela do sistema - quem esta aqui ainda nao viu numero nenhum. */
.tela-senha { max-width: 34rem; margin: 6vh auto; padding: 0 var(--e4); }
.tela-senha .grade-cadastro {
  display: grid; gap: var(--e3); margin: var(--e4) 0;
}
.tela-senha label.largo { display: grid; gap: 4px; }
.tela-senha code {
  background: var(--hover); padding: 1px 5px; border-radius: 4px;
  font-size: .92em;
}

/* Quem esta dentro, e a porta de saida. No cabecalho porque e o unico lugar
 * que existe em toda tela - e a pergunta "eu sou quem mesmo?" e diaria num
 * sistema com quatro papeis. */
.quem-esta {
  display: flex; align-items: center; gap: var(--e2);
  padding-left: var(--e3); margin-left: var(--e2);
  border-left: 1px solid var(--borda);
}
.quem-esta form { margin: 0; }
.quem-esta .quem-nome {
  font-size: var(--t-peq); font-weight: 600; color: var(--tinta);
  max-width: 14ch; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.quem-esta .link { font-size: var(--t-peq); }

/* O nome da marca cabe em tela estreita: o painel do navegador embutido tem
 * 350px, e um logotipo que transborda e a primeira coisa que alguem ve. */
@media (max-width: 30rem) {
  .marca-texto { font-size: 1.45rem; }
  .folha.entrada { margin-top: 4vh; }
}
.marca-texto { white-space: nowrap; }


/* SALDO NA BUSCA DE PRODUTO DO ORCAMENTO.
   Sem alarme: vender sem ter na prateleira e o normal aqui - venda a ordem -
   e o que a linha precisa e informar, nao assustar. */
.tem-estoque { color: var(--verde, #1a7f37); font-weight: 600; }
.sem-estoque { color: var(--cinza-texto, #6a6a6a); }

/* CONFERENCIA DA TABELA DE FRETE, na propria tela de cotacao.
   O dono: "eu nao vou abrir relatorio separado". Entao o achado mora aqui, e
   o que so pede conferencia vem fechado para nao empurrar a cotacao para fora
   da tela. */
.conferencia-frete { border-left: 3px solid var(--laranja, #ED4300); }
.achado-frete { margin: 8px 0; }
.achado-frete summary {
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 6px 0; list-style: none;
}
.achado-frete summary::-webkit-details-marker { display: none; }
.achado-frete summary::before { content: "\25B8"; color: #6C7488; }
.achado-frete[open] summary::before { content: "\25BE"; }
.achado-frete.impede summary strong { color: var(--laranja, #ED4300); }
.achado-frete .nota { margin: 4px 0 8px 18px; }
.achado-frete .rolavel { margin-left: 18px; }

/* O AVISO DE DIVERGENCIA, junto do preco que ele afeta.
   Nao e faixa no topo: aviso longe da causa e aviso que ninguem le. */
.aviso-cotacao {
  margin: 0 0 8px; padding: 7px 11px; font-size: .88rem; line-height: 1.45;
  border-left: 3px solid var(--cinza-texto, #6C7488);
  background: #F7F8FA;
}
.aviso-cotacao.erra {
  border-left-color: var(--laranja, #ED4300); background: #FFF6F1;
}
.cotacao.com-divergencia { border-color: #F0D2C2; }