@charset "UTF-8";
/* ==========================================================================
   Polishop Sinop — sistema visual
   --------------------------------------------------------------------------
   Escrito à mão, sem CDN e sem etapa de build. Basta subir o arquivo.

   Direção: um livro-caixa. A operação inteira gira em torno de números —
   custo, margem, vencimento — então os números têm tipografia própria
   (IBM Plex Mono, algarismos de largura fixa) e as tabelas ganham o peso
   visual, não os cartões. O vermelho da marca aparece pouco e sempre com
   significado: ele marca onde você está e o que exige decisão.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografia
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Superfícies e texto */
  --papel:        #F1F5F9;
  --superficie:   #FFFFFF;
  --superficie-2: #F8FAFC;
  --superficie-3: #EEF2F7;
  --tinta:        #0F172A;
  --tinta-2:      #475569;
  --tinta-3:      #94A3B8;
  --traco:        #E2E8F0;
  --traco-forte:  #CBD5E1;

  /* Lateral: escura nos dois temas, como no sistema anterior.
     Ela é o ponto fixo da tela — o conteúdo muda, ela não. */
  --menu-fundo:       #111827;
  --menu-fundo-2:     #0B1220;
  --menu-traco:       #1F2937;
  --menu-texto:       #94A3B8;
  --menu-texto-forte: #F1F5F9;
  --menu-ativo-fundo: rgba(200, 16, 46, .16);
  --menu-ativo-texto: #FF6478;

  /* Marca */
  --acento:        #C8102E;
  --acento-escuro: #9E0C24;
  --acento-veu:    #FCEEF0;

  /* Estados — cores cheias, para o número saltar da tela */
  --positivo:     #0A9E6E;
  --positivo-veu: #E4F7F0;
  --atencao:      #D97706;
  --atencao-veu:  #FEF3E2;
  --info:         #2563EB;
  --info-veu:     #E8F0FE;
  --roxo:         #6D28D9;
  --roxo-veu:     #F1EAFE;

  /* Faixas de margem — a régua do negócio */
  --faixa-prejuizo:     #15171B;
  --faixa-prejuizo-veu: #DCDCD6;
  --faixa-critica:      #A35B00;
  --faixa-critica-veu:  #FCF2E3;
  --faixa-atencao:      #C8102E;
  --faixa-atencao-veu:  #FCEEF0;
  --faixa-saudavel:     #1D5CA8;
  --faixa-saudavel-veu: #EAF1FA;

  /* Ritmo */
  --r-1: 4px;  --r-2: 8px;  --r-3: 12px; --r-4: 16px;
  --r-5: 24px; --r-6: 32px; --r-7: 48px;

  --curva:   10px;
  /* A CURVA MÉDIA ESTAVA SENDO USADA SEM EXISTIR.
     Dezesseis arquivos pediam var(--curva-m) — o cartão de combo, o
     PDV, as trocas, o catálogo — e ninguém nunca a declarou. Variável
     inexistente não é erro em CSS: a regra inteira é descartada em
     silêncio, e o canto que devia ser arredondado saía quadrado. */
  --curva-m: 8px;
  --curva-g: 16px;

  --sombra-1: 0 1px 2px rgba(21,23,27,.05);
  --sombra-2: 0 1px 3px rgba(21,23,27,.08), 0 6px 16px -6px rgba(21,23,27,.10);
  --sombra-3: 0 12px 40px -12px rgba(21,23,27,.28);

  --fonte-titulo: 'Archivo', system-ui, sans-serif;
  --fonte-corpo:  'Inter', system-ui, -apple-system, sans-serif;
  --fonte-dado:   'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --largura-menu:          252px;
  --largura-menu-recolhido: 60px;
  --altura-topo:            56px;

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

[data-tema="escuro"] {
  --papel:        #0B1220;
  --superficie:   #151C2A;
  --superficie-2: #1A2333;
  --superficie-3: #212C3E;
  --tinta:        #E8EDF5;
  --tinta-2:      #9AA7B8;
  --tinta-3:      #64748B;
  --traco:        #26324A;
  --traco-forte:  #35435E;

  --acento:        #FF4A63;
  --acento-escuro: #FF6B80;
  --acento-veu:    #2C1219;

  --positivo:     #34D399;
  --positivo-veu: #0C2B22;
  --atencao:      #FBBF24;
  --atencao-veu:  #2E2410;
  --info:         #60A5FA;
  --info-veu:     #10203A;
  --roxo:         #A78BFA;
  --roxo-veu:     #1E1633;

  --faixa-prejuizo:     #C7CBD1;
  --faixa-prejuizo-veu: #262B33;
  --faixa-critica:      #E0A050;
  --faixa-critica-veu:  #29200F;
  --faixa-atencao:      #FF4A63;
  --faixa-atencao-veu:  #2C1219;
  --faixa-saudavel:     #6BA5E8;
  --faixa-saudavel-veu: #101D2C;

  --sombra-1: 0 1px 2px rgba(0,0,0,.4);
  --sombra-2: 0 1px 3px rgba(0,0,0,.5), 0 6px 16px -6px rgba(0,0,0,.6);
  --sombra-3: 0 12px 40px -12px rgba(0,0,0,.8);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  letter-spacing: -.018em;
  margin: 0;
  color: var(--tinta);
}
h1 { font-size: 21px; font-weight: 700; }
h2 { font-size: 17px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 600; }

p { margin: 0 0 var(--r-3); }

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Números com largura fixa: colunas de dinheiro alinham na vertical. */
.dado, td.dado, .valor {
  font-family: var(--fonte-dado);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -.01em;
}

.rotulo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.apoio  { font-size: 12.5px; color: var(--tinta-2); }
.discreto { color: var(--tinta-3); }
.forte  { font-weight: 600; }

.ico { width: 18px; height: 18px; flex: 0 0 auto; }
.ico-p { width: 15px; height: 15px; }
.ico-g { width: 22px; height: 22px; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

.oculto { display: none !important; }

.so-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. Estrutura
   -------------------------------------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: var(--largura-menu) minmax(0, 1fr);
  min-height: 100vh;
}
.app[data-menu="recolhido"] { grid-template-columns: var(--largura-menu-recolhido) minmax(0, 1fr); }

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

.conteudo {
  flex: 1;
  padding: var(--r-5) var(--r-5) var(--r-7);
  max-width: 1400px;
  width: 100%;
}

/* --------------------------------------------------------------------------
   5. Menu lateral
   -------------------------------------------------------------------------- */
.menu {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--menu-fundo), var(--menu-fundo-2));
  border-right: 1px solid var(--menu-traco);
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.menu-topo {
  display: flex;
  align-items: center;
  gap: var(--r-2);
  height: var(--altura-topo);
  padding: 0 var(--r-4);
  border-bottom: 1px solid var(--menu-traco);
  flex: 0 0 auto;
}
.menu-topo .botao-icone { color: var(--menu-texto); }
.menu-topo .botao-icone:hover { background: rgba(255,255,255,.07); color: #fff; }

.marca { display: flex; align-items: center; gap: 9px; min-width: 0; overflow: hidden; }

/* Selo da marca: quadrado vermelho com a inicial. Substitui a dependência
   de um arquivo de logo que pode não estar no servidor. */
.marca-selo {
  width: 26px; height: 26px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--acento);
  color: #fff;
  border-radius: var(--curva);
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -.03em;
}
.marca-selo img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }

.marca-texto { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.marca-nome {
  font-family: var(--fonte-titulo);
  font-weight: 700; font-size: 13px;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: var(--menu-texto-forte);
}
.marca-sub { font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--menu-texto); }

.menu-rolagem { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--r-3) var(--r-2); }
.menu-rolagem::-webkit-scrollbar { width: 8px; }
.menu-rolagem::-webkit-scrollbar-thumb { background: var(--menu-traco); border-radius: 99px; border: 2px solid var(--menu-fundo); }
.menu-rolagem::-webkit-scrollbar-thumb:hover { background: #334155; }

.menu-grupo + .menu-grupo { margin-top: var(--r-4); }

.menu-grupo-titulo {
  display: block;
  padding: 0 var(--r-3) 6px;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  color: #64748B;
}

/* O item ativo ganha uma barra vermelha à esquerda — a "lombada". É o único
   lugar do menu onde a cor da marca aparece, então ela sempre quer dizer
   "você está aqui". */
.menu-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 9px var(--r-3);
  margin-bottom: 2px;
  border-radius: var(--curva);
  color: var(--menu-texto);
  font-size: 13.5px; font-weight: 500;
  text-decoration: none;
  transition: background var(--transicao), color var(--transicao);
}
.menu-item:hover { background: rgba(255,255,255,.06); color: var(--menu-texto-forte); text-decoration: none; }
.menu-item .ico { color: #64748B; transition: color var(--transicao); }
.menu-item:hover .ico { color: var(--menu-texto); }

.menu-item.ativo {
  background: var(--menu-ativo-fundo);
  color: var(--menu-ativo-texto);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(200,16,46,.28);
}
.menu-item.ativo .ico { color: var(--menu-ativo-texto); }

.menu-item-texto { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.menu-contador {
  flex: 0 0 auto;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  display: grid; place-items: center;
  background: var(--acento); color: #fff;
  border-radius: 99px;
  font-family: var(--fonte-dado);
  font-size: 10.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.menu-rodape {
  flex: 0 0 auto;
  border-top: 1px solid var(--menu-traco);
  padding: var(--r-3);
  background: rgba(0,0,0,.25);
}

.menu-usuario {
  display: flex; align-items: center; gap: 9px;
  padding: 6px var(--r-2);
  border-radius: var(--curva);
  color: inherit; text-decoration: none;
  min-width: 0;
}
.menu-usuario:hover { background: rgba(255,255,255,.06); text-decoration: none; }

.avatar {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 99px;
  background: var(--acento);
  border: 0;
  color: #fff;
  font-family: var(--fonte-titulo);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
}

.menu-usuario-dados { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.menu-usuario-nome { font-size: 12.5px; font-weight: 600; color: var(--menu-texto-forte);
                     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-usuario-perfil { font-size: 10px; color: #64748B; text-transform: capitalize; }

/* Estado recolhido */
.app[data-menu="recolhido"] .marca-texto,
.app[data-menu="recolhido"] .menu-grupo-titulo,
.app[data-menu="recolhido"] .menu-item-texto,
.app[data-menu="recolhido"] .menu-usuario-dados { display: none; }

.app[data-menu="recolhido"] .menu-topo,
.app[data-menu="recolhido"] .menu-item,
.app[data-menu="recolhido"] .menu-usuario { justify-content: center; padding-left: 0; padding-right: 0; }

/* A LINHA ENTRE GRUPOS USAVA A COR DO TEMA CLARO.
   `--traco` é quase branco; no menu escuro ele sumia, e os grupos
   viravam uma faixa preta contínua sem separação nenhuma. A cor certa
   é `--menu-traco`, que existe justamente para as bordas daqui. */
.app[data-menu="recolhido"] .menu-grupo + .menu-grupo {
  margin-top: var(--r-3);
  padding-top: var(--r-3);
  border-top: 1px solid var(--menu-traco);
}

/* O ÍCONE PRECISA APARECER.
   Recolhido, ele é a única coisa que identifica o item — e estava
   herdando o tamanho de quando havia texto ao lado, ficando pequeno
   demais para ser reconhecido de relance. */
.app[data-menu="recolhido"] .menu-item { position: relative; }
.app[data-menu="recolhido"] .menu-item .ico { width: 20px; height: 20px; }


.app[data-menu="recolhido"] .menu-contador {
  position: absolute; top: 2px; right: 4px;
  min-width: 15px; height: 15px; font-size: 9px; padding: 0 3px;
}

/* --------------------------------------------------------------------------
   6. Barra superior
   -------------------------------------------------------------------------- */
.topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--r-3);
  height: var(--altura-topo);
  padding: 0 var(--r-5);
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--traco);
}

.topo-acoes { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.botao-icone {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid transparent;
  border-radius: var(--curva);
  background: transparent;
  color: var(--tinta-2);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.botao-icone:hover { background: var(--superficie-3); color: var(--tinta); }

.abrir-menu { display: none; }

/* --------------------------------------------------------------------------
   6b. Abas do módulo
   --------------------------------------------------------------------------
   Segundo nível de navegação. A lateral escolhe o assunto, as abas
   escolhem a tela. Ficam grudadas embaixo da barra superior e rolam na
   horizontal no celular, sem quebrar linha.
   -------------------------------------------------------------------------- */
/* Botões-pílula, do jeito do painel antigo: cinza claro quando em
   repouso, vermelho cheio quando selecionado. Ficam DENTRO da barra
   superior, não numa faixa separada — assim o topo diz de uma vez só
   onde você está e para onde pode ir. */
.abas {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-end;
}

/* A FILEIRA QUEBRA EM VEZ DE SUMIR NA BORDA.

   Ela rolava na horizontal com a barra escondida: item que nao cabia
   saia da tela sem nenhum sinal de que existia. Sistema chegou a treze
   itens e os ultimos ficaram inalcancaveis -- so quem ja sabia que
   estavam la pensava em arrastar.

   Com `wrap`, a fileira passa para a linha de baixo e tudo continua
   visivel. A barra fica mais alta em telas estreitas, que e um preco
   menor que esconder navegacao.

   A rolagem continua para quem precisar dela em telas muito pequenas. */
.abas-rolagem {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 0;
  scrollbar-width: none;
}
.abas-rolagem::-webkit-scrollbar { display: none; }

/* --- Abas em menus suspensos -----------------------------------------

   Operacao tem quinze telas. Numa fileira so, quem vende passa os olhos
   por dez itens que nao usa para achar o PDV.

   Com menus, a barra tem quatro botoes.
*/

/* Os menus suspensos tambem quebram: com quatro ou cinco grupos numa
   tela estreita, o ultimo sairia da borda do mesmo jeito. */
.abas-menus .abas-rolagem { gap: 4px; overflow: visible; flex-wrap: wrap; }

.aba-menu { position: relative; flex: 0 0 auto; }

.aba-gatilho {
  font: inherit;
  cursor: pointer;
  background: transparent;
}

.aba-seta {
  width: 13px;
  height: 13px;
  margin-left: 1px;
  color: var(--tinta-3);
  transition: transform var(--transicao);
}

.aba-menu.aberto .aba-seta { transform: rotate(180deg); }
.aba-menu.aberto .aba-gatilho { background: var(--traco); color: var(--tinta); }

.aba-lista {
  position: absolute;
  z-index: 80;
  top: calc(100% + 5px);
  left: 0;
  min-width: 208px;
  padding: 5px;
  background: var(--superficie);
  border: 1px solid var(--traco-forte);
  border-radius: var(--curva-g);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
}

/* O ultimo menu da barra abriria para fora da tela. */
.aba-lista.para-esquerda { left: auto; right: 0; }

.aba-opcao {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--curva-m);
  font-size: 13px;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
}

.aba-opcao:hover {
  background: var(--superficie-2);
  color: var(--tinta);
  text-decoration: none;
}

.aba-opcao.ativa {
  background: var(--acento-veu);
  color: var(--acento);
  font-weight: 500;
}

.aba-opcao .ico-p { width: 15px; height: 15px; color: var(--tinta-3); }
.aba-opcao.ativa .ico-p { color: var(--acento); }
.aba-opcao span:first-of-type { flex: 1; }
.aba-opcao .aba-contador { margin-left: auto; }



.aba {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--curva);
  background: var(--superficie-3);
  color: var(--tinta-2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--transicao), color var(--transicao), box-shadow var(--transicao);
}
.aba:hover { background: var(--traco); color: var(--tinta); text-decoration: none; }
.aba .ico-p { width: 14px; height: 14px; color: var(--tinta-3); transition: color var(--transicao); }
.aba:hover .ico-p { color: var(--tinta-2); }

.aba.ativa {
  background: var(--acento);
  color: #fff;
  box-shadow: var(--sombra-1);
}
.aba.ativa .ico-p { color: #fff; }

.aba-contador {
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  background: var(--acento);
  color: #fff;
  border-radius: 99px;
  font-family: var(--fonte-dado);
  font-size: 10px;
  font-weight: 700;
}
.aba.ativa .aba-contador { background: rgba(255,255,255,.24); }

/* --------------------------------------------------------------------------
   7. Cabeçalho de página
   -------------------------------------------------------------------------- */
.pagina-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--r-4); flex-wrap: wrap;
  margin-bottom: var(--r-5);
}
.pagina-titulo h1 { font-size: 22px; }
.pagina-titulo .apoio { margin-top: 2px; }
.pagina-acoes { display: flex; align-items: center; gap: var(--r-2); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   8. Cartões
   -------------------------------------------------------------------------- */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--traco);
  border-radius: var(--curva-g);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
}
.cartao-cabeca {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r-3); flex-wrap: wrap;
  padding: var(--r-3) var(--r-4);
  border-bottom: 1px solid var(--traco);
}
.cartao-corpo { padding: var(--r-4); }
.cartao-pe {
  padding: var(--r-3) var(--r-4);
  border-top: 1px solid var(--traco);
  background: var(--superficie-2);
  border-radius: 0 0 var(--curva-g) var(--curva-g);
}

/* Indicadores numéricos */
.grade-indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--r-3);
  margin-bottom: var(--r-5);
}

/* O cartão ganha a cor do que ele informa: uma faixa no topo, o ícone
   colorido e um fundo de leve tingido. Números importantes precisam ser
   vistos de longe — antes eram todos cinza e se perdiam entre si. */
.indicador {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--traco);
  border-radius: var(--curva-g);
  padding: var(--r-4);
  box-shadow: var(--sombra-1);
  overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.indicador::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--tinta-3);
}
a.indicador:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); text-decoration: none; }

.indicador-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--r-2); margin-bottom: 10px; }

.indicador-topo .ico {
  width: 30px; height: 30px;
  padding: 6px;
  border-radius: 8px;
  background: var(--superficie-3);
  color: var(--tinta-2);
}

.indicador-valor {
  font-family: var(--fonte-dado);
  font-variant-numeric: tabular-nums;
  font-size: 26px; font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--tinta);
}
.indicador-nota { margin-top: 5px; font-size: 11.5px; color: var(--tinta-3); }

.indicador[data-tom="positivo"]::before { background: var(--positivo); }
.indicador[data-tom="positivo"] .indicador-valor { color: var(--positivo); }
.indicador[data-tom="positivo"] .indicador-topo .ico { background: var(--positivo-veu); color: var(--positivo); }

.indicador[data-tom="atencao"]::before { background: var(--atencao); }
.indicador[data-tom="atencao"] .indicador-valor { color: var(--atencao); }
.indicador[data-tom="atencao"] .indicador-topo .ico { background: var(--atencao-veu); color: var(--atencao); }

.indicador[data-tom="negativo"]::before { background: var(--acento); }
.indicador[data-tom="negativo"] .indicador-valor { color: var(--acento); }
.indicador[data-tom="negativo"] .indicador-topo .ico { background: var(--acento-veu); color: var(--acento); }

.indicador[data-tom="info"]::before { background: var(--info); }
.indicador[data-tom="info"] .indicador-valor { color: var(--info); }
.indicador[data-tom="info"] .indicador-topo .ico { background: var(--info-veu); color: var(--info); }

.indicador[data-tom="neutro"]::before { background: var(--acento); }
.indicador[data-tom="neutro"] .indicador-topo .ico { background: var(--acento-veu); color: var(--acento); }

/* Cartão de destaque: o número que a pessoa abre o sistema para ver.
   Fundo cheio, para não competir com os demais. */
.indicador[data-destaque] {
  border: 0;
  color: #fff;
  box-shadow: var(--sombra-2);
}
.indicador[data-destaque]::before { display: none; }
.indicador[data-destaque] .rotulo,
.indicador[data-destaque] .indicador-nota { color: rgba(255,255,255,.72); }
.indicador[data-destaque] .indicador-valor { color: #fff; font-size: 28px; }
.indicador[data-destaque] .indicador-topo .ico { background: rgba(255,255,255,.16); color: #fff; }

.indicador[data-destaque="vermelho"] { background: linear-gradient(135deg, #C8102E, #8E0B20); }
.indicador[data-destaque="verde"]    { background: linear-gradient(135deg, #0A9E6E, #05744F); }
.indicador[data-destaque="azul"]     { background: linear-gradient(135deg, #2563EB, #1E3A8A); }
.indicador[data-destaque="roxo"]     { background: linear-gradient(135deg, #6D28D9, #4C1D95); }
.indicador[data-destaque="escuro"]   { background: linear-gradient(135deg, #1F2937, #0F172A); }

/* --------------------------------------------------------------------------
   9. Tabelas — o centro do sistema
   -------------------------------------------------------------------------- */
.tabela-caixa {
  border: 1px solid var(--traco);
  border-radius: var(--curva-g);
  background: var(--superficie);
  overflow: hidden;
  box-shadow: var(--sombra-1);
}
.tabela-rolagem { overflow-x: auto; }

table.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }

table.tabela thead th {
  position: sticky; top: 0; z-index: 1;
  padding: 9px var(--r-4);
  background: var(--superficie-2);
  border-bottom: 1px solid var(--traco);
  text-align: left;
  font-size: 10px; font-weight: 700;
  letter-spacing: .085em; text-transform: uppercase;
  color: var(--tinta-3);
  white-space: nowrap;
}

/* CABECALHO QUE ACOMPANHA A ROLAGEM -- SO ONDE FAZ FALTA.

   Tabela longa demais para caber na tela perde os titulos das colunas
   logo no comeco da rolagem, e ai as caixas de marcar viram caixas sem
   nome. E o caso da tela de permissoes, com dezenas de linhas e tres
   colunas identicas.

   ISTO NAO E GLOBAL, E JA FOI.
   Eu tinha aplicado o deslocamento em `table.tabela thead th`, para
   todas as tabelas do sistema. O cabecalho passou a flutuar a 56px do
   topo em toda lista, e nas telas curtas isso deixa uma linha aparecendo
   acima dele -- feio e sem motivo. Uma classe declarada onde a tabela
   precisa custa uma palavra e nao mexe em mais nada. */
.tabela-fixa thead th {
  top: var(--altura-topo, 56px);
  z-index: 5;
}

/* A linha do modulo se distingue das acoes recuadas dele. */
table.tabela tbody tr.linha-modulo > td {
  border-top: 1px solid var(--traco);
  background: color-mix(in srgb, var(--superficie-2) 55%, transparent);
}

table.tabela tbody td {
  padding: 10px var(--r-4);
  border-bottom: 1px solid var(--traco);
  vertical-align: middle;
  color: var(--tinta-2);
}
table.tabela tbody tr:last-child td { border-bottom: 0; }
table.tabela tbody tr { transition: background var(--transicao); }
table.tabela tbody tr:hover { background: var(--superficie-2); }

table.tabela td.principal { color: var(--tinta); font-weight: 600; }
table.tabela .direita, table.tabela th.direita { text-align: right; }
table.tabela .centro,  table.tabela th.centro  { text-align: center; }
table.tabela td.dado { color: var(--tinta); }

.tabela-vazia { padding: var(--r-7) var(--r-4); text-align: center; }
.tabela-vazia .ico-g { color: var(--traco-forte); margin-bottom: var(--r-3); }
.tabela-vazia p { color: var(--tinta-3); font-size: 13px; margin-bottom: var(--r-3); }

.acoes-linha { display: flex; gap: var(--r-1); justify-content: flex-end; }

/* --------------------------------------------------------------------------
   10. Etiquetas e faixas de margem
   -------------------------------------------------------------------------- */
.etiqueta {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid transparent;
  font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.etiqueta .ico-p { width: 12px; height: 12px; }

.etiqueta[data-tom="neutro"]   { background: var(--superficie-3); color: var(--tinta-2); border-color: var(--traco); }
.etiqueta[data-tom="positivo"] { background: var(--positivo-veu); color: var(--positivo); border-color: color-mix(in srgb, var(--positivo) 22%, transparent); }
.etiqueta[data-tom="atencao"]  { background: var(--atencao-veu);  color: var(--atencao);  border-color: color-mix(in srgb, var(--atencao) 24%, transparent); }
.etiqueta[data-tom="negativo"] { background: var(--acento-veu);   color: var(--acento-escuro); border-color: color-mix(in srgb, var(--acento) 24%, transparent); }
.etiqueta[data-tom="info"]     { background: var(--info-veu);     color: var(--info);     border-color: color-mix(in srgb, var(--info) 24%, transparent); }

/* A régua de margem: mesma escala em toda tela que fala de dinheiro. */
.faixa {
  display: inline-flex; align-items: baseline; gap: 6px;
  min-width: 86px;
  padding: 2px 9px;
  border-radius: var(--curva);
  border: 1px solid transparent;
  font-family: var(--fonte-dado);
  font-variant-numeric: tabular-nums;
  font-size: 12px; font-weight: 600;
  justify-content: flex-end;
}
.faixa::before {
  content: '';
  width: 5px; height: 5px; border-radius: 99px;
  background: currentColor;
  align-self: center;
  margin-right: auto;
}
.faixa[data-faixa="prejuizo"] { background: var(--faixa-prejuizo-veu); color: var(--faixa-prejuizo); border-color: color-mix(in srgb, var(--faixa-prejuizo) 25%, transparent); }
.faixa[data-faixa="critica"]  { background: var(--faixa-critica-veu);  color: var(--faixa-critica);  border-color: color-mix(in srgb, var(--faixa-critica) 25%, transparent); }
.faixa[data-faixa="atencao"]  { background: var(--faixa-atencao-veu);  color: var(--faixa-atencao);  border-color: color-mix(in srgb, var(--faixa-atencao) 25%, transparent); }
.faixa[data-faixa="saudavel"] { background: var(--faixa-saudavel-veu); color: var(--faixa-saudavel); border-color: color-mix(in srgb, var(--faixa-saudavel) 25%, transparent); }

.legenda-faixas { display: flex; flex-wrap: wrap; gap: var(--r-4); align-items: center; font-size: 11.5px; color: var(--tinta-2); }
.legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.legenda-ponto { width: 8px; height: 8px; border-radius: 99px; }

/* --------------------------------------------------------------------------
   11. Botões
   -------------------------------------------------------------------------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--traco-forte);
  border-radius: var(--curva);
  background: var(--superficie);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: 13px; font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.botao:hover { background: var(--superficie-3); text-decoration: none; }
.botao:disabled, .botao[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.botao[data-tipo="principal"] { background: var(--acento); border-color: var(--acento); color: #fff; }
.botao[data-tipo="principal"]:hover { background: var(--acento-escuro); border-color: var(--acento-escuro); }

.botao[data-tipo="perigo"] { background: transparent; border-color: color-mix(in srgb, var(--acento) 35%, transparent); color: var(--acento); }
.botao[data-tipo="perigo"]:hover { background: var(--acento-veu); }

.botao[data-tipo="fantasma"] { background: transparent; border-color: transparent; color: var(--tinta-2); }
.botao[data-tipo="fantasma"]:hover { background: var(--superficie-3); color: var(--tinta); }

.botao[data-porte="pequeno"] { padding: 4px 10px; font-size: 12px; }
.botao[data-porte="largo"]   { padding: 10px 18px; font-size: 14px; width: 100%; }

/* --------------------------------------------------------------------------
   12. Formulários
   -------------------------------------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--r-4); }

.campo > label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--tinta-2);
}

.entrada, select.entrada, textarea.entrada {
  width: 100%;
  padding: 8px 11px;
  background: var(--superficie);
  border: 1px solid var(--traco-forte);
  border-radius: var(--curva);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: 13.5px;
  line-height: 1.5;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.entrada::placeholder { color: var(--tinta-3); }
.entrada:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent);
}
.entrada:disabled { background: var(--superficie-3); color: var(--tinta-3); cursor: not-allowed; }
.entrada.dado { font-family: var(--fonte-dado); }
textarea.entrada { min-height: 90px; resize: vertical; }

select.entrada {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A9099' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 15px;
  padding-right: 30px;
}

.campo-dica { font-size: 11.5px; color: var(--tinta-3); }
.campo-erro { font-size: 11.5px; color: var(--acento); font-weight: 500; }
.campo.tem-erro .entrada { border-color: var(--acento); }

.grade-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--r-4); }

.barra-filtros {
  display: flex; align-items: flex-end; gap: var(--r-3); flex-wrap: wrap;
  padding: var(--r-3) var(--r-4);
  background: var(--superficie-2);
  border-bottom: 1px solid var(--traco);
}
.barra-filtros .campo { margin-bottom: 0; }

.busca { position: relative; flex: 1; min-width: 200px; }
.busca .ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); pointer-events: none; }
.busca .entrada { padding-left: 34px; }

/* --------------------------------------------------------------------------
   13. Avisos
   -------------------------------------------------------------------------- */
.avisos { display: flex; flex-direction: column; gap: var(--r-2); margin-bottom: var(--r-4); }

.aviso {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px var(--r-4);
  border: 1px solid var(--traco);
  border-left-width: 3px;
  border-radius: var(--curva);
  background: var(--superficie);
  font-size: 13px;
  box-shadow: var(--sombra-1);
}
.aviso .ico { margin-top: 1px; }
.aviso-texto { flex: 1; }
.aviso-fechar { margin-left: auto; }

.aviso[data-tipo="sucesso"] { border-left-color: var(--positivo); background: var(--positivo-veu); color: var(--positivo); }
.aviso[data-tipo="erro"]    { border-left-color: var(--acento);   background: var(--acento-veu);   color: var(--acento-escuro); }
.aviso[data-tipo="aviso"]   { border-left-color: var(--atencao);  background: var(--atencao-veu);  color: var(--atencao); }
.aviso[data-tipo="info"]    { border-left-color: var(--info);     background: var(--info-veu);     color: var(--info); }

/* --------------------------------------------------------------------------
   14. Tela de entrada
   -------------------------------------------------------------------------- */
.entrar {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding: var(--r-5);
  background:
    radial-gradient(1100px 520px at 50% -10%, color-mix(in srgb, var(--acento) 7%, transparent), transparent 65%),
    var(--papel);
}

.entrar-caixa { width: 100%; max-width: 372px; }

.entrar-marca { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: var(--r-5); }
.entrar-marca .marca-selo { width: 42px; height: 42px; font-size: 19px; border-radius: 9px; }
.entrar-marca h1 { font-size: 20px; }
.entrar-marca .rotulo { margin-top: -6px; }

.entrar-cartao {
  background: var(--superficie);
  border: 1px solid var(--traco);
  border-radius: var(--curva-g);
  padding: var(--r-5);
  box-shadow: var(--sombra-2);
}

.entrar-pe { margin-top: var(--r-4); text-align: center; font-size: 11.5px; color: var(--tinta-3); }

/* --------------------------------------------------------------------------
   15. Diálogo
   -------------------------------------------------------------------------- */
dialog.dialogo {
  border: 1px solid var(--traco);
  border-radius: var(--curva-g);
  background: var(--superficie);
  color: var(--tinta);
  padding: 0;
  width: min(520px, calc(100vw - 32px));
  box-shadow: var(--sombra-3);
}
dialog.dialogo::backdrop { background: rgba(10, 12, 15, .5); backdrop-filter: blur(2px); }
.dialogo-cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--r-3); padding: var(--r-4); border-bottom: 1px solid var(--traco); }
.dialogo-corpo { padding: var(--r-4); }
.dialogo-pe { display: flex; justify-content: flex-end; gap: var(--r-2); padding: var(--r-3) var(--r-4); border-top: 1px solid var(--traco); background: var(--superficie-2); }

/* --------------------------------------------------------------------------
   16. Estado vazio e páginas de erro
   -------------------------------------------------------------------------- */
.vazio { padding: var(--r-7) var(--r-4); text-align: center; max-width: 420px; margin: 0 auto; }
.vazio .ico-g { color: var(--traco-forte); }
.vazio h2 { margin: var(--r-3) 0 6px; }
.vazio p { color: var(--tinta-2); }

.erro-pagina { display: grid; place-items: center; min-height: 60vh; text-align: center; padding: var(--r-5); }
.erro-codigo {
  font-family: var(--fonte-dado);
  font-size: 56px; font-weight: 600;
  letter-spacing: -.05em;
  color: var(--traco-forte);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   17. Auditoria
   -------------------------------------------------------------------------- */
.diff { display: grid; grid-template-columns: minmax(110px, auto) 1fr 1fr; gap: 1px; background: var(--traco); border: 1px solid var(--traco); border-radius: var(--curva); overflow: hidden; font-size: 12px; }
.diff > * { background: var(--superficie); padding: 6px 10px; }
.diff-cabeca { background: var(--superficie-2); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.diff-campo { font-weight: 600; color: var(--tinta-2); }
.diff-antes { font-family: var(--fonte-dado); color: var(--acento); text-decoration: line-through; text-decoration-thickness: 1px; }
.diff-depois { font-family: var(--fonte-dado); color: var(--positivo); }

.linha-tempo { display: flex; align-items: center; gap: 8px; }
.linha-tempo .dado { font-size: 12px; color: var(--tinta-2); }

/* --------------------------------------------------------------------------
   18. Impressão
   -------------------------------------------------------------------------- */
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  body { background: #fff; font-size: 10.5pt; }
  .menu, .topo, .abas, .pagina-acoes, .barra-filtros, .nao-imprimir, .acoes-linha { display: none !important; }
  .app { display: block; }
  .conteudo { padding: 0; max-width: none; }
  .cartao, .tabela-caixa, .indicador { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  table.tabela thead th { position: static; background: #f2f2f2 !important; color: #000 !important; }
  table.tabela tbody td { padding: 5px 8px; }
  .faixa, .etiqueta { border: 1px solid #999 !important; color: #000 !important; background: #fff !important; -webkit-print-color-adjust: exact; }
}

/* --------------------------------------------------------------------------
   19. Telas menores
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .app, .app[data-menu="recolhido"] { grid-template-columns: minmax(0, 1fr); }

  .menu {
    position: fixed; inset: 0 auto 0 0; z-index: 60;
    width: min(280px, 84vw);
    transform: translateX(-100%);
    transition: transform var(--transicao);
    box-shadow: var(--sombra-3);
  }
  .app[data-menu="aberto"] .menu { transform: translateX(0); }

  .app[data-menu="aberto"]::after {
    content: '';
    position: fixed; inset: 0; z-index: 50;
    background: rgba(10, 12, 15, .45);
  }

  .app[data-menu="recolhido"] .marca-texto,
  .app[data-menu="recolhido"] .menu-grupo-titulo,
  .app[data-menu="recolhido"] .menu-item-texto,
  .app[data-menu="recolhido"] .menu-usuario-dados { display: initial; }
  .app[data-menu="recolhido"] .menu-topo,
  .app[data-menu="recolhido"] .menu-item,
  .app[data-menu="recolhido"] .menu-usuario { justify-content: flex-start; padding-left: var(--r-3); padding-right: var(--r-3); }

  .abrir-menu { display: grid; }
  .recolher-menu { display: none; }

  .conteudo { padding: var(--r-4) var(--r-4) var(--r-6); }
  .topo { padding: 0 var(--r-4); }
  .aba { padding: 6px 10px; font-size: 11.5px; }
  .topo-caminho .grupo { display: none; }
  .topo-caminho .separador { display: none; }
  .grade-indicadores { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .indicador-valor { font-size: 21px; }
  table.tabela thead th, table.tabela tbody td { padding-left: var(--r-3); padding-right: var(--r-3); }
}

@media (max-width: 560px) {
  .pagina-acoes { width: 100%; }
  .pagina-acoes .botao { flex: 1; }
  .diff { grid-template-columns: 1fr; }
  .diff-cabeca:nth-child(2), .diff-cabeca:nth-child(3) { display: none; }
}

/* --------------------------------------------------------------------------
   20. Menos movimento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* --------------------------------------------------------------------------
   14. Recados e confirmações do sistema

   Ficam AQUI, e não no parcial de avisos, por um motivo prático: o
   parcial só é renderizado quando existe mensagem para mostrar. A caixa
   de confirmação é montada pelo app.js a qualquer momento, inclusive
   numa tela sem nenhum aviso — e sairia sem estilo nenhum.

   As duas coisas usam o mesmo desenho de propósito: recado e pergunta
   são o mesmo objeto na cabeça de quem usa.
   -------------------------------------------------------------------------- */

.recado-fundo {
    position: fixed; inset: 0; z-index: 1200;
    display: flex; align-items: center; justify-content: center;
    padding: var(--r-4);
    background: rgba(15, 23, 42, .45);
    animation: recado-surge .12s ease-out;
  }
@keyframes recado-surge { from { opacity: 0 } to { opacity: 1 } }

.recado-caixa {
    width: 100%; max-width: 440px;
    background: var(--superficie);
    border-radius: var(--curva-g);
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .38);
    animation: recado-sobe .16s ease-out;

    /* A CAIXA NUNCA PASSA DA ALTURA DA JANELA.
       Sem isto ela cresce com o conteúdo e passa da tela: numa janela
       de correção com dez campos, o botão Salvar ficava abaixo do
       visível e não havia como chegar nele — a janela não rola porque
       o fundo é fixo.

       O corpo é que rola; topo e rodapé ficam presos, então o botão
       está sempre à vista. */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2 * var(--r-4));
    overflow: hidden;
  }

  /* Topo e rodapé não encolhem: eles são a moldura. */
.recado-topo, .recado-pe { flex-shrink: 0; }
@keyframes recado-sobe {
    from { transform: translateY(10px) scale(.98) }
    to   { transform: none }
  }

  /* A faixa de cima diz o tom antes de a pessoa ler qualquer palavra. */
.recado-topo {
    display: flex; align-items: center; gap: 10px;
    padding: 15px 18px;
    font-size: 15px; font-weight: 600;
  }
.recado-topo[data-grave="sucesso"] { background: var(--positivo-veu); color: var(--positivo); }
.recado-topo[data-grave="info"]    { background: var(--info-veu);     color: var(--info); }
.recado-topo[data-grave="aviso"]   { background: var(--atencao-veu);  color: var(--atencao); }
.recado-topo[data-grave="erro"]    { background: var(--acento-veu);   color: var(--acento); }

.recado-corpo {
    padding: 16px 18px;

    /* É AQUI QUE A ROLAGEM ACONTECE. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Diálogo de formulário: mais largo, porque campo espremido em duas
     colunas de 200px vira formulário de cinco linhas que ninguém lê. */
.recado-caixa[data-porte="largo"] { max-width: 880px; }

.recado-linha {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 13.5px; line-height: 1.55;
    color: var(--tinta);
  }
.recado-linha + .recado-linha {
    margin-top: 11px; padding-top: 11px;
    border-top: 1px solid var(--traco);
  }
.recado-linha[data-tipo="erro"]  { color: var(--acento); }
.recado-linha[data-tipo="aviso"] { color: var(--atencao-escuro, var(--atencao)); }

.recado-pe { padding: 0 18px 16px; display: flex; justify-content: flex-end; }

  /* A barra que corre enquanto o recado se fecha sozinho: sem ela, o
     sumiço parece defeito. */
.recado-tempo { height: 3px; background: var(--traco); overflow: hidden; }
.recado-tempo span {
    display: block; height: 100%; width: 100%;
    background: currentColor; opacity: .5;
    transform-origin: left;
    animation: recado-corre var(--recado-segundos, 5s) linear forwards;
  }
@keyframes recado-corre { from { transform: scaleX(1) } to { transform: scaleX(0) } }

@media (prefers-reduced-motion: reduce) {
  .recado-fundo, .recado-caixa { animation: none; }
  .recado-tempo span { animation-duration: var(--recado-segundos, 5s); }
  }


  /* ------------------------------------------------------------------
     SUGESTÕES ENQUANTO SE DIGITA

     Substituem os datalist que carregavam o catálogo inteiro. Além do
     peso, aqueles cortavam em 400 itens — e o produto 401 não aparecia,
     sem aviso nenhum.
     ------------------------------------------------------------------ */
.sugestoes-caixa {
    position: absolute;
    z-index: 60;
    max-height: 320px;
    overflow-y: auto;
    background: var(--superficie);
    border: 1px solid var(--traco);
    border-radius: var(--curva-m);
    box-shadow: 0 10px 30px -8px rgba(15, 23, 42, .22);
  }

.sugestao {
    display: block; width: 100%;
    padding: 8px 12px;
    border: 0; border-bottom: 1px solid var(--traco);
    background: transparent;
    text-align: left; cursor: pointer;
    font: inherit; color: var(--tinta);
  }
.sugestao:last-child { border-bottom: 0; }
.sugestao:hover,
.sugestao[data-marcada="1"] { background: var(--superficie-2); }

.sugestao-nome { display: block; font-size: 13px; line-height: 1.3; }
.sugestao-apoio {
    display: block; margin-top: 1px;
    font-size: 10.5px; color: var(--tinta-3);
    font-family: var(--fonte-dado, monospace);
  }

.sugestao-vazia { padding: 10px 12px; font-size: 12px; color: var(--tinta-3); }

/* O aviso de erro na busca se distingue do "nada encontrado": um é
   resultado, o outro é problema — e a cor diz qual é qual. */
.sugestao-aviso { color: var(--acento); font-weight: 500; }


  /* ------------------------------------------------------------------
     O BALÃO DE DICA DO SISTEMA

     Substitui o `title` do navegador, que cada um desenha do seu jeito:
     preto no Chrome, cinza no Firefox, fonte diferente da do sistema, e
     quase um segundo de espera. No meio de uma tela cuidada, parecia
     defeito.

     O script lê o title, guarda em data-dica e remove o atributo — o
     navegador para de desenhar o dele e este assume. Nenhuma das 50
     telas precisou ser tocada.
     ------------------------------------------------------------------ */
.dica-balao {
    position: absolute;
    z-index: 90;
    max-width: 280px;
    padding: 7px 10px;
    background: var(--superficie);
    color: var(--tinta);
    border: 1px solid var(--traco);
    border-radius: var(--curva-m);
    box-shadow: 0 8px 24px -6px rgba(15, 23, 42, .22);
    font-size: 12px;
    line-height: 1.45;
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity .12s ease, transform .12s ease;
  }

.dica-balao[data-visivel="1"] { opacity: 1; transform: translateY(0); }

  /* A setinha aponta para o elemento — sem ela, o balão parece solto
     quando há dois elementos próximos. */
.dica-balao::after {
    content: '';
    position: absolute;
    left: 50%; margin-left: -5px;
    width: 0; height: 0;
    border: 5px solid transparent;
  }

.dica-balao[data-lado="acima"]::after {
    top: 100%;
    border-top-color: var(--superficie);
    filter: drop-shadow(0 1px 0 var(--traco));
  }

.dica-balao[data-lado="abaixo"]::after {
    bottom: 100%;
    border-bottom-color: var(--superficie);
    filter: drop-shadow(0 -1px 0 var(--traco));
  }


  /* ------------------------------------------------------------------
     BARRA DE AÇÃO EM LOTE

     Nasceu na tela de notas recebidas, para dar ciência em várias de uma
     vez. A devolução ao fornecedor precisa do mesmo gesto — marcar
     algumas linhas e agir sobre todas —, então o estilo saiu de lá para
     cá em vez de ser copiado.
     ------------------------------------------------------------------ */
.barra-massa {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  width: min(760px, calc(100% - 32px));
  z-index: 40;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 15px;
  background: var(--superficie);
  border: 1px solid var(--acento);
  border-radius: var(--curva-g);
  box-shadow: 0 6px 24px rgba(15, 23, 42, .18);
  font-size: 13px;
}
.barra-massa[hidden] { display: none; }


  /* ------------------------------------------------------------------
     DUAS COLUNAS LADO A LADO

     Cinco telas já usavam `painel-linha` — e a classe nunca existiu na
     folha de estilo. Os cartões empilhavam, e ninguém tinha reparado
     porque empilhado também funciona; só fica pior.

     Em tela estreita volta a empilhar, que é o certo: duas colunas de
     300px não cabem num celular.
     ------------------------------------------------------------------ */
.painel-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--r-4, 16px);
    align-items: start;
  }

@media (max-width: 900px) {
  .painel-linha { grid-template-columns: minmax(0, 1fr); }
}


  /* ------------------------------------------------------------------
     CARTÕES DE NÚMERO

     Três telas os usavam — cobranças, e mais duas — e a folha de estilo
     nunca teve as regras. Eles apareciam como texto empilhado, sem
     caixa e sem destaque no número, e ninguém tinha reparado porque
     texto empilhado também se lê.

     É o mesmo caso de `painel-linha`: classe inventada na tela e nunca
     escrita aqui.
     ------------------------------------------------------------------ */
.cartoes-numero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--r-3, 12px);
  }

.cartao-numero {
    background: var(--superficie);
    border: 1px solid var(--traco);
    border-radius: var(--curva-m);
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 2px;
  }

.cartao-numero .numero {
    font-size: 26px; line-height: 1.1;
    font-family: var(--fonte-dado, inherit);
    color: var(--tinta);
  }

.cartao-numero .numero[data-tom="atencao"] { color: var(--atencao); }
.cartao-numero .numero[data-tom="positivo"] { color: var(--positivo); }
.cartao-numero .numero[data-tom="acento"]   { color: var(--acento); }

  /* A COLUNA DAS CAIXAS DE SELEÇÃO.
     Estreita e centralizada — a caixa é pequena, e uma coluna larga
     deixaria o clique longe do que ela marca. */
.col-massa { width: 34px; text-align: center; }
.marca-linha { cursor: pointer; }