/* ==========================================================================
   CALCULADORA GPC IT — identidade visual
   Preto e vermelho da marca, sobre branco. Sóbrio e técnico, como o site.
   O vermelho está numa variável só: se o manual da marca tiver outro código,
   troque aqui e o sistema inteiro acompanha.
   ========================================================================== */

:root {
  /* --- Marca ---
     Cores tiradas pixel a pixel do arquivo LOGO_GPCIT.png do site.
     O vermelho #BF1E2D é o dominante do logotipo; o preto é puro. --- */
  --vermelho:       #BF1E2D;
  --vermelho-forte: #96131F;
  --vermelho-fraco: #FBEAEC;

  /* O mesmo vermelho, pelo papel que ele cumpre e não pela cor que ele é:
     é a cor de destaque do sistema — barra de gráfico, seta da coluna
     ordenada, marca dos 80% do Pareto. Nomear pelo papel deixa claro o que
     acompanha a marca se ela mudar, e o que é vermelho por outro motivo
     (erro, por exemplo, que continua vermelho mesmo se a marca virar azul). */
  --marca: #BF1E2D;
  --preto:          #000000;

  /* --- Neutros, com uma pitada de frio para conversar com o preto --- */
  --tinta:      #16181C;
  --tinta-fraca:#4A5058;
  --apagado:    #767D87;
  --linha:      #E1E4E8;
  --linha-leve: #EDEFF2;
  --fundo:      #F4F5F7;
  --carta:      #FFFFFF;
  --realce:     #F8F9FB;

  /* --- Sinais (separados do vermelho da marca) --- */
  --bom:        #1B7A4B;
  --bom-fundo:  #E6F4EC;
  --atencao:    #9A6206;
  --atencao-fundo:#FDF3E0;
  --erro:       #B3241C;
  --erro-fundo: #FCEAE8;

  --fonte: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  --raio: 6px;
  --sombra: 0 1px 2px rgba(22,24,28,.06), 0 4px 12px rgba(22,24,28,.05);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--vermelho-forte); }

:focus-visible {
  outline: 2px solid var(--vermelho);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------------------------------------------------------------- marca -- */

.marca { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.marca img { display: block; height: 30px; width: auto; }
.entrada-caixa .marca img { height: 40px; }

/* --------------------------------------------------------------- entrar -- */

.entrada {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1100px 520px at 50% -10%, #FFFFFF 0%, var(--fundo) 60%);
}
.entrada-caixa {
  width: 100%;
  max-width: 400px;
  background: var(--carta);
  border: 1px solid var(--linha);
  border-top: 3px solid var(--vermelho);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 34px 32px 30px;
}
.entrada-caixa .marca { margin-bottom: 22px; }
.entrada-caixa h1 {
  font-size: 19px;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.entrada-caixa .sub {
  color: var(--apagado);
  font-size: 13.5px;
  margin: 0 0 24px;
}

/* ---------------------------------------------------------- formulários -- */

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.campo > label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta-fraca);
  letter-spacing: 0.01em;
}
.campo .ajuda { font-size: 12.5px; color: var(--apagado); }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], select, textarea {
  width: 100%;
  font: inherit;
  color: var(--tinta);
  background: var(--carta);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 9px 11px;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--vermelho);
  box-shadow: 0 0 0 3px var(--vermelho-fraco);
}
input:disabled, select:disabled { background: var(--realce); color: var(--apagado); }
input.mono { font-family: var(--mono); font-size: 13.5px; }

/* -------------------------------------------------------------- botões -- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: var(--raio);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.botao:disabled { opacity: .5; cursor: not-allowed; }

.botao.principal { background: var(--vermelho); color: #fff; }
.botao.principal:hover:not(:disabled) { background: var(--vermelho-forte); }

.botao.escuro { background: var(--preto); color: #fff; }
.botao.escuro:hover:not(:disabled) { background: #000; }

.botao.contorno { background: var(--carta); color: var(--tinta); border-color: var(--linha); }
.botao.contorno:hover:not(:disabled) { border-color: var(--apagado); background: var(--realce); }

.botao.texto { background: none; color: var(--tinta-fraca); padding: 6px 8px; }
.botao.texto:hover:not(:disabled) { color: var(--vermelho-forte); background: var(--vermelho-fraco); }

.botao.perigo { background: var(--carta); color: var(--erro); border-color: #E9C2BE; }
.botao.perigo:hover:not(:disabled) { background: var(--erro-fundo); }

/* Quadrantes de giro: clicáveis, e o que está filtrando fica óbvio. */
.carta-giro.clicavel { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.carta-giro.clicavel:hover { border-color: var(--apagado); box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.carta-giro.vazia { opacity: .55; }
.carta-giro.ativa { border-color: var(--marca); box-shadow: 0 0 0 2px var(--vermelho-fraco); }
.giro-filtrando {
  display: inline-block;
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--marca);
}

/* ===========================================================================
   GRÁFICOS
   Desenhados em SVG à mão: a política de segurança não deixa carregar script
   de fora, e afrouxá-la para ganhar um gráfico de barras seria mau negócio.
   =========================================================================== */
.painel-grafico { padding: 16px 18px; margin-bottom: 14px; }
.painel-cabeca {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.painel-cabeca h3 { margin: 0 0 3px; font-size: 15px; }
.painel-cabeca p { margin: 0; font-size: 13px; color: var(--tinta-fraca); max-width: 60ch; }
.painel-corpo { overflow-x: auto; }

/* Altura fixa: sem isso o desenho escala pela largura da tela e vira um
   paredão de barras de oitocentos pixels numa tela grande. */
.gp { display: block; width: 100%; height: 300px; }
.gp-eixo { font-size: 11px; fill: var(--apagado); text-anchor: middle; }

/* Barras verticais em CSS: altura sob controle, texto no tamanho da página. */
.barras {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 230px;
  padding-top: 4px;
}
.barra-col {
  flex: 1 1 0;
  min-width: 54px;
  max-width: 130px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: default;
}
.barra-valor {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tinta-fraca);
  margin-bottom: 4px;
  white-space: nowrap;
}
.barra-trilho {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
}
.barra-preenchida {
  width: 100%;
  background: var(--marca);
  border-radius: 4px 4px 0 0;
  min-height: 3px;
  transition: height .35s ease;
}
.barra-col:hover .barra-preenchida { background: var(--vermelho-forte); }
/* Altura fixa nos rótulos: sem isso, a coluna cujo rótulo está vazio fica
   mais alta que a das outras — a barra divide o espaço com o rótulo — e a
   comparação entre as colunas sai falsa. */
.barra-rotulo {
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 600;
  min-height: 17px;
  white-space: nowrap;
}
.barra-valor { min-height: 18px; }
.barra-nota { font-size: 11.5px; color: var(--apagado); min-height: 16px; }

/* Muitas colunas estreitas, como as 24 horas do dia. */
.barras-finas { height: 190px; gap: 4px; }
.barras-finas .barra-col { min-width: 0; }
.barras-finas .barra-valor { font-size: 11px; }
.barras-finas .barra-rotulo { font-size: 10.5px; font-weight: 500; }
.barra-preenchida.barra-pico { background: var(--vermelho-forte); }
.gp-fraco { font-size: 9.5px; opacity: .8; }
.gp-guia { stroke: var(--linha-leve); stroke-width: 1; }
.gp-guia-80 { stroke: var(--marca); stroke-dasharray: 4 3; opacity: .55; }
.gp-barra-vital { fill: var(--marca); }
.gp-barra-resto { fill: var(--linha); }
.gp-linha { fill: none; stroke: var(--tinta); stroke-width: 1.6; opacity: .75; }
.gp-ponto { fill: var(--tinta); opacity: .75; }

/* --- evolução do mês, dia a dia --- */
.gp-alto { height: 340px; }
.gp-eixo-dir { text-anchor: start; }

.gp-barra { fill: var(--marca); }
.gp-barra:hover { fill: var(--vermelho-forte); }
/* Dia que ainda não chegou: existe no eixo, mas não pesa na leitura. */
.gp-barra-futuro { opacity: .35; }

/* Fim de semana com fundo: sábado parado não é ritmo caindo. */
.gp-fds { fill: var(--realce); }

.gp-linha-anterior {
  fill: none; stroke: var(--apagado); stroke-width: 1.4;
  stroke-dasharray: 5 4; opacity: .7;
}
.gp-hoje { stroke: var(--marca); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.gp-hoje-texto { fill: var(--marca); font-size: 10px; font-weight: 700; }

.legenda-grafico {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin-top: 12px; font-size: 12px; color: var(--tinta-fraca);
}
.legenda-grafico i { display: inline-block; vertical-align: middle; margin-right: 5px; }
.chave-barra { width: 11px; height: 11px; background: var(--marca); border-radius: 2px; }
.chave-linha { width: 16px; height: 0; border-top: 2px solid var(--tinta); opacity: .75; }
.chave-linha-ant { width: 16px; height: 0; border-top: 2px dashed var(--apagado); }
.chave-fds {
  width: 11px; height: 11px; background: var(--realce);
  border: 1px solid var(--linha); border-radius: 2px;
}

/* Barras horizontais: canal por canal. */
.faixas { display: flex; flex-direction: column; gap: 9px; }
.faixa-linha {
  display: grid;
  grid-template-columns: minmax(120px, 210px) 1fr auto 58px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.faixa-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faixa-trilho { background: var(--realce); border-radius: 4px; height: 15px; }
.faixa-barra { background: var(--marca); border-radius: 4px; height: 100%; min-width: 3px; }
.faixa-valor { font-weight: 600; white-space: nowrap; }
.faixa-pct { color: var(--apagado); text-align: right; }
@media (max-width: 700px) {
  .faixa-linha { grid-template-columns: 1fr auto; }
  .faixa-trilho, .faixa-pct { grid-column: 1 / -1; }
}

/* O selo do 80/20, ao lado do título do Pareto. */
.pareto-selo {
  border: 1px solid var(--linha);
  border-left: 3px solid var(--marca);
  border-radius: 8px;
  padding: 9px 14px;
  text-align: right;
  white-space: nowrap;
}
.pareto-selo strong { font-size: 24px; color: var(--marca); line-height: 1; }
.pareto-selo span { font-size: 12px; color: var(--tinta-fraca); margin-left: 5px; }
.pareto-selo em {
  display: block; margin-top: 3px; font-style: normal;
  font-size: 11.5px; color: var(--apagado);
}

/* A contagem dentro do chip de filtro: quantas peças aquele filtro abre.
   Escolher um filtro sem saber o tamanho dele é apostar. */
.chip-conta {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 9px;
  background: rgba(22, 24, 28, .08);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
.chip-filtro.ativo .chip-conta { background: rgba(255, 255, 255, .25); }

/* Quadro de total que também é filtro: clicar nele troca a lista de baixo.
   Precisa parecer clicável antes do clique, senão ninguém descobre. */
.total-bloco.clicavel { transition: background .12s, box-shadow .12s; }
.total-bloco.clicavel:hover {
  background: var(--realce);
  box-shadow: inset 0 -2px 0 var(--vermelho);
}
.total-bloco.clicavel.escolhido {
  background: var(--realce);
  box-shadow: inset 0 -3px 0 var(--vermelho);
}
.total-bloco.clicavel.escolhido span { color: var(--vermelho); font-weight: 700; }

/* As linhas que compõem os primeiros 80%. */
table.dados tbody tr.linha-vital td { background: #FDF6F6; }
table.dados tbody tr.linha-vital td[data-congelada] { background: #FDF6F6; }
table.dados tbody tr.linha-vital:hover td { background: var(--vermelho-fraco); }

/* Painel de atendimento: o que passou do tempo de espera precisa saltar aos
   olhos antes de qualquer número ser lido. */
.destaque-alerta { color: var(--erro); }

/* Filtros de pedido: dois pares de datas com propósitos diferentes — o que
   ENTROU e o que foi MEXIDO no período. Cada par ganha rótulo próprio, senão
   quatro campos de data em fila viram adivinhação. */
/* ===========================================================================
   AVISO DE ACHADO NO MONITOR
   Fica no canto até alguém fechar. Achado bom não pode piscar e sumir — se a
   pessoa estava lendo outra coisa, o aviso tem de esperar por ela.
   =========================================================================== */
.aviso-monitor {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  width: 340px;
  max-width: calc(100vw - 36px);
  background: var(--carta);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--bom);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(22, 24, 28, .16);
  animation: sobe-aviso .28s ease-out;
}
@keyframes sobe-aviso {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .aviso-monitor { animation: none; }
}

.aviso-monitor-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px 9px 14px;
  border-bottom: 1px solid var(--linha-leve);
}
.aviso-monitor-topo strong { font-size: 13.5px; color: var(--bom); }
.aviso-monitor-topo .fechar {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--apagado);
  cursor: pointer;
  padding: 0 2px;
}
.aviso-monitor-topo .fechar:hover { color: var(--tinta); }

.aviso-monitor-corpo { padding: 11px 14px; }
.am-pn { font-size: 12.5px; font-weight: 600; }
.am-titulo {
  font-size: 12.5px;
  color: var(--tinta-fraca);
  line-height: 1.4;
  margin: 3px 0 8px;
}
.am-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.am-linha strong { font-size: 16px; }
.am-linha .fraco { font-size: 12px; }
.am-vendedor { font-size: 11.5px; margin-top: 5px; }
.am-resto { font-size: 12px; margin-top: 7px; }

.aviso-monitor-pe {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 0 14px 13px;
}

/* Área de soltar arquivo. Grande e óbvia: a ação principal da tela é essa,
   e quem chega com um PDF na mão precisa ver onde ele vai. */
.solta-arquivo {
  border: 2px dashed var(--linha);
  border-radius: 10px;
  padding: 26px 18px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.solta-arquivo:hover { border-color: var(--marca); background: var(--realce); }
.solta-arquivo.sobre {
  border-color: var(--marca);
  background: var(--vermelho-fraco);
  border-style: solid;
}
.solta-icone { font-size: 30px; line-height: 1; margin-bottom: 8px; }
.solta-arquivo strong { display: block; font-size: 14.5px; margin-bottom: 4px; }
.solta-arquivo span {
  font-size: 13px; color: var(--tinta-fraca);
  display: block; max-width: 52ch; margin: 0 auto;
}

/* O "ou" entre as duas formas de mandar a lista. */
.ou-separador {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 10px;
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--apagado);
}
.ou-separador::before, .ou-separador::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--linha);
}

/* O texto extraído do arquivo, para conferência. */
.texto-lido {
  max-height: 240px;
  overflow: auto;
  background: var(--realce);
  border: 1px solid var(--linha-leve);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--tinta-fraca);
}

/* A prévia do texto de entrega, na janela de gerar proposta. Ver o texto
   antes de gerar evita escolher no escuro e descobrir depois o que foi
   enviado ao cliente. */
.previa-entrega {
  background: var(--realce);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--marca);
  border-radius: 8px;
  padding: 11px 14px;
  max-height: 190px;
  overflow-y: auto;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--tinta-fraca);
}
.previa-entrega p { margin: 0 0 8px; }
.previa-entrega p:last-child { margin-bottom: 0; }
.previa-titulo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--apagado);
  margin-bottom: 7px;
}

.filtros-pedidos {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: var(--carta);
  border: 1px solid var(--linha);
  border-radius: 10px;
}
.grupo-filtro { display: flex; flex-direction: column; gap: 6px; }
.rotulo-filtro {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--apagado);
}
.par-datas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.caixa-nota {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--tinta-fraca);
  white-space: nowrap;
  cursor: pointer;
}

/* ===========================================================================
   META DO MÊS
   O número grande é o realizado; a barra mostra onde estamos, e o risco
   vertical mostra onde deveríamos estar hoje. A distância entre os dois é o
   recado — dá para ler sem interpretar porcentagem nenhuma.
   =========================================================================== */
.metas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 820px) { .metas { grid-template-columns: 1fr; } }

.carta-meta {
  background: var(--carta);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--apagado);
  border-radius: 10px;
  padding: 15px 17px;
}
.carta-meta.ml { border-left-color: #C79A2E; }
.carta-meta.comercial { border-left-color: #1B7F3B; }
.carta-meta.batida { border-left-color: var(--bom); background: var(--bom-fundo); }

.meta-topo {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 6px;
}
.meta-topo strong { font-size: 14px; }
.meta-alvo { font-size: 12px; color: var(--apagado); white-space: nowrap; }

.meta-numero {
  font-size: 27px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.meta-numero em {
  font-style: normal; font-size: 14px; font-weight: 600;
  color: var(--apagado); margin-left: 8px;
}

.barra-meta {
  position: relative;
  height: 10px;
  margin: 11px 0 12px;
  background: var(--realce);
  border: 1px solid var(--linha-leve);
  border-radius: 5px;
  overflow: visible;
}
.barra-meta-cheia {
  height: 100%;
  background: var(--marca);
  border-radius: 5px 0 0 5px;
  transition: width .5s ease;
}
.carta-meta.batida .barra-meta-cheia { background: var(--bom); border-radius: 5px; }
/* Onde a meta estaria se o mês corresse parelho. */
.barra-meta-hoje {
  position: absolute; top: -4px; bottom: -4px;
  width: 2px;
  background: var(--tinta);
  opacity: .55;
}

.meta-recado { font-size: 13px; color: var(--tinta-fraca); line-height: 1.65; }
.meta-recado.bom { color: var(--bom); }
.meta-recado strong { color: var(--tinta); }
.meta-porDia strong { font-size: 15px; color: var(--marca); }
.meta-ritmo { margin-top: 5px; font-size: 12.5px; color: var(--apagado); }
.meta-ok { color: var(--bom); font-weight: 600; }
.meta-risco { color: var(--atencao); font-weight: 600; }

/* Dia que o Gestão Click ainda não alcançou: em cinza, para ninguém ler
   "sem venda" onde na verdade é "sem sincronização". */
table.dados tbody tr.linha-sem-dados td { opacity: .5; }

/* O rodapé de totais gruda no fim da tabela. */
table.dados tfoot td {
  position: sticky;
  bottom: 0;
  background: var(--realce);
  border-top: 2px solid var(--linha);
  font-weight: 600;
}
table.dados tbody tr.linha-alerta td { background: var(--erro-fundo); }
table.dados tbody tr.linha-alerta td[data-congelada] { background: var(--erro-fundo); }
table.dados tbody tr.linha-alerta:hover td { background: #F9DEDB; }

/* Número com barra de fundo proporcional: dá para ver a evolução correndo o
   olho pela linha, sem precisar comparar número por número. */
.celula-barra {
  display: inline-block;
  position: relative;
  padding: 3px 8px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  z-index: 0;
}
.celula-barra::before {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: var(--parte, 0%);
  background: var(--vermelho-fraco);
  border-radius: 4px;
  z-index: -1;
}

.etiqueta {
  display: inline-block;
  margin: 1px 3px 1px 0;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--realce);
  border: 1px solid var(--linha);
  font-size: 11.5px;
  color: var(--tinta-fraca);
  white-space: nowrap;
}

/* Colunas congeladas: ficam paradas enquanto o resto rola para o lado, para
   nunca se perder de vista de qual peça são aqueles números. Precisam de fundo
   opaco, senão o conteúdo que passa por baixo aparece através delas. */
table.dados td[data-congelada] { background: var(--carta); z-index: 1; }
table.dados tbody tr:hover td[data-congelada] { background: var(--realce); }
table.dados th[data-congelada] { z-index: 6; }
/* A BORDA SAIU, A SOMBRA FICOU (22/10/2026). Com border-collapse, a borda de
   uma célula sticky é pintada pela TABELA e não acompanha a célula: ao
   arrastar a tela para o lado, a linha da coluna congelada ficava para trás,
   atravessando o conteúdo. A sombra é pintada pelo próprio elemento e viaja
   junto — e já fazia o mesmo trabalho visual, com a borda por cima. */
table.dados [data-congelada="ultima"] {
  box-shadow: 1px 0 0 var(--linha), 3px 0 5px -2px rgba(0, 0, 0, 0.07);
}

/* Cabeçalho que pode quebrar em duas linhas, para a coluna não ficar larga
   só por causa do título. */
table.dados th.quebra {
  white-space: normal;
  line-height: 1.25;
  max-width: 86px;
}

/* Cabeçalho em dois andares: o de cima agrupa "Vendas" e "Faturado" sob o
   canal a que pertencem. Sem ele, quatro colunas de números parecidos ficam
   indistinguíveis. A linha vertical marca onde cada grupo começa. */
table.dados thead tr.grupo-cabeca th {
  padding: 0 14px;
  height: 26px;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-align: center;
  border-bottom: none;
  cursor: default;
  top: 0;
}
/* O cabeçalho é fixo ao rolar. Com dois andares, o de baixo precisa grudar
   logo abaixo do de cima — senão os dois disputam o topo e se sobrepõem. */
table.dados thead tr.grupo-cabeca + tr th { top: 26px; }
table.dados thead tr.grupo-cabeca th::after { content: ''; margin: 0; }
table.dados thead tr.grupo-cabeca th:hover { color: var(--apagado); }
table.dados thead th.grupo-ml    { color: var(--tinta); background: #FFF6E3; }
table.dados thead th.grupo-whats { color: #1B7F3B;      background: #E7F7EC; }

table.dados th.grupo-inicio,
table.dados td.grupo-inicio { border-left: 1px solid var(--linha); }

/* TABELA COM LINHA ENTRE TODAS AS COLUNAS (22/10/2026, pedido dela: "separe
   todas as colunas com linhas igual fez entre ultima alteracao e dias"). É a
   mesma linha do grupo-inicio, estendida a todas — numa tabela de dezoito
   colunas, o olho perde a trilha sem ela.

   Vai como modificador, e não na regra geral: table.dados é usada em mais de
   vinte telas, e linha vertical em tabela de quatro colunas é só ruído. */
   SOMBRA INTERNA, E NÃO BORDA. Numa tabela com colunas congeladas
   (position: sticky) e border-collapse, a BORDA não viaja com a célula: ela é
   pintada pela tabela e fica para trás ao arrastar para o lado, que é o
   defeito de "a tela não está funcionando direito" quando se rola. A sombra
   interna é pintada pelo próprio elemento e acompanha. */
table.dados[data-colunada] td + td:not([data-congelada]),
table.dados[data-colunada] th + th:not([data-congelada]) {
  box-shadow: inset 1px 0 0 var(--linha-leve);
}
table.dados[data-colunada] thead th + th:not([data-congelada]) {
  box-shadow: inset 1px 0 0 var(--linha);
}

/* ALINHAR TUDO PELO TOPO (22/10/2026, mesmo pedido: "organize os dados na
   tela que estao quebrando e ficando tudo fora da ordem das colunas").

   A causa era `vertical-align: middle`: numa linha alta — e as de Pedidos
   ficaram altas quando ganharam serial por peça e rastreio —, as células
   curtas flutuam no meio enquanto as compridas começam em cima, e nada se
   alinha de uma coluna para a outra. Pelo topo, tudo começa na mesma régua. */
table.dados[data-alinha-topo] td { vertical-align: top; }
table.dados thead th.grupo-ml    { border-left: 1px solid var(--linha); }
table.dados thead th.grupo-whats { border-left: 1px solid var(--linha); }

/* Venda que veio do anúncio mas fechou no WhatsApp. Verde do WhatsApp, para
   ser reconhecida sem precisar ler o cabeçalho da coluna. */
.selo-whats {
  display: inline-block;
  min-width: 30px;
  padding: 2px 8px;
  border-radius: 5px;
  background: #E7F7EC;
  color: #1B7F3B;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.destaque-whats { color: #1B7F3B; }
.total-nota {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 11.5px;
  color: var(--apagado);
}

/* A margem em porcentagem, com a cor dizendo o recado antes do número ser
   lido. Fundo suave em vez de texto colorido: numa coluna inteira de números,
   texto colorido vira poluição e o olho para de distinguir. */
.margem-selo {
  display: inline-block;
  min-width: 52px;
  padding: 3px 8px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 12.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.margem-selo.erro    { background: var(--erro-fundo);    color: var(--erro); }
.margem-selo.atencao { background: var(--atencao-fundo); color: var(--atencao); }
.margem-selo.bom     { background: var(--bom-fundo);     color: var(--bom); }
.margem-selo.neutro  { background: var(--realce);        color: var(--tinta-fraca); }

/* O critério da análise, por extenso. Fica logo abaixo dos quadrantes, fechado
   por padrão: quem já entendeu não precisa vê-lo todo dia, e quem tem dúvida
   acha na hora, sem rolar a tabela inteira. */
.entenda {
  background: var(--carta);
  border: 1px solid var(--linha);
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
}
.entenda > summary {
  cursor: pointer;
  padding: 13px 18px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  list-style: none;
  user-select: none;
}
.entenda > summary::-webkit-details-marker { display: none; }
.entenda > summary::before {
  content: '▸';
  color: var(--marca);
  font-size: 12px;
  transition: transform .15s;
}
.entenda[open] > summary::before { transform: rotate(90deg); }
.entenda > summary:hover { background: var(--realce); }
.entenda > summary strong { font-size: 14px; }
.entenda > summary span { font-size: 12.5px; color: var(--apagado); }

.entenda-corpo {
  padding: 4px 18px 18px;
  font-size: 13.5px;
  color: var(--tinta-fraca);
  line-height: 1.6;
  border-top: 1px solid var(--linha-leve);
}
.entenda-corpo h4 {
  margin: 18px 0 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--apagado);
}
.entenda-corpo h4:first-child { margin-top: 14px; }
.entenda-corpo p { margin: 0 0 10px; }
.entenda-ajustes { color: var(--apagado); font-size: 13px; }

.regra-giro { margin: 0; padding-left: 20px; }
.regra-giro li { margin-bottom: 9px; }
.regra-giro li em { font-style: normal; color: var(--apagado); }
.regra-giro .selo { margin-right: 4px; }

.dois-casos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 780px) { .dois-casos { grid-template-columns: 1fr; } }

.dois-casos .caso {
  border: 1px solid var(--linha);
  border-left-width: 3px;
  border-radius: 8px;
  padding: 12px 14px;
}
.dois-casos .caso.bom  { border-left-color: var(--bom); }
.dois-casos .caso.ruim { border-left-color: var(--apagado); }
.dois-casos .caso strong { display: block; font-size: 13.5px; }
.dois-casos .caso p { margin: 8px 0 0; font-size: 13px; color: var(--tinta-fraca); }

.caso-numeros { margin-top: 6px; display: flex; align-items: baseline; gap: 8px; }
.caso-numeros span {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.caso-numeros em { font-style: normal; font-size: 13px; color: var(--apagado); }
.caso.bom .caso-numeros span  { color: var(--bom); }
.caso.ruim .caso-numeros span { color: var(--tinta-fraca); }

/* O que vai ser apagado, antes de confirmar: ver o cliente e o valor evita
   apagar o pré-pedido errado. */
.resumo-exclusao {
  margin: 14px 0;
  border: 1px solid var(--linha);
  border-radius: 8px;
  overflow: hidden;
}
.resumo-exclusao > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--linha-leve);
}
.resumo-exclusao > div:last-child { border-bottom: none; }
.resumo-exclusao span { color: var(--apagado); font-size: 13px; }

.botao.largo { width: 100%; }
.botao.miudo { font-size: 13px; padding: 6px 11px; }

/* -------------------------------------------------------------- avisos -- */

.aviso {
  border-radius: var(--raio);
  padding: 11px 14px;
  font-size: 13.5px;
  margin-bottom: 16px;
  border: 1px solid transparent;
}
.aviso.erro    { background: var(--erro-fundo);    color: var(--erro);    border-color: #F0CFCB; }
.aviso.bom     { background: var(--bom-fundo);     color: var(--bom);     border-color: #C4E4D2; }
.aviso.atencao { background: var(--atencao-fundo); color: var(--atencao); border-color: #EDD9AE; }
.aviso:empty { display: none; }

/* Andamento da coleta de visitas: ela leva meia hora, e ver a barra andar é o
   que diferencia "está trabalhando" de "travou". */
.barra-andamento {
  margin-top: 8px;
  height: 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.09);
  overflow: hidden;
}
.barra-cheia {
  height: 100%;
  background: var(--marca);
  border-radius: 3px;
  transition: width 0.6s ease;
}

/* ------------------------------------------------------------- estrutura -- */

/* ===================================================== MENU LATERAL ===== */
/* O sistema passou de sete para treze telas. Numa barra horizontal elas
   começariam a se espremer; de lado, cabem agrupadas por assunto e sobra
   espaço para as tabelas largas, que é onde o trabalho acontece. */

.tela { display: flex; min-height: 100vh; }

.lateral {
  width: 236px;
  flex: none;
  background: var(--carta);
  border-right: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  transition: width .16s ease;
}
.lateral.encolhida { width: 62px; }

.lateral-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 16px 14px 14px;
  border-bottom: 1px solid var(--linha-leve);
}
.lateral .marca img { height: 26px; }
.lateral.encolhida .marca img { height: 22px; }
.lateral.encolhida .marca { overflow: hidden; width: 26px; }

.encolher {
  background: none; border: 1px solid var(--linha); border-radius: var(--raio);
  width: 24px; height: 24px; flex: none; cursor: pointer;
  color: var(--apagado); font-size: 15px; line-height: 1; padding: 0;
}
.encolher:hover { border-color: var(--vermelho); color: var(--vermelho-forte); }
.lateral.encolhida .encolher { transform: rotate(180deg); }

.menu-lateral { flex: 1; overflow-y: auto; padding: 12px 10px; }

/* O TÍTULO DA SEÇÃO É O QUE ORIENTA A NAVEGAÇÃO.
   Ele era 10px apagado, do tamanho de uma legenda — num menu de trinta itens
   isso faz as seções sumirem e a pessoa varre a lista inteira com o olho.
   Agora ele tem peso, e é clicável para recolher a seção. */
/* O SELETOR PRECISA SER MAIS FORTE QUE `.menu-lateral button`, que vem mais
   abaixo e define fonte 14px e cor apagada. Sem isso o título ficava com o
   tamanho dos itens e a mudança não aparecia. */
.menu-lateral button.menu-grupo {
  display: flex; align-items: center; gap: 6px; width: 100%;
  /* Maiúscula larga precisa de menos espaçamento para não esparramar: quanto
     maior a fonte, mais o tracking que ajudava a 10px atrapalha. */
  font-size: 15px; font-weight: 800; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--tinta);
  padding: 20px 10px 8px; background: none; border: 0;
  text-align: left; cursor: pointer; font-family: inherit;
  line-height: 1.2;
}
/* A primeira seção não precisa do respiro de cima — ali não há nada para
   separar dela. */
.menu-lateral button.menu-grupo:first-child { padding-top: 6px; }
.menu-lateral button.menu-grupo:hover {
  color: var(--vermelho-forte); background: none;
}
/* A setinha gira quando a seção fecha — é o único aviso de que há algo
   escondido ali, e sem ele a seção recolhida parece seção que sumiu. */
.menu-grupo .seta {
  margin-left: auto; transition: transform .15s; opacity: .5;
  font-size: 12px; line-height: 1;
}
.menu-grupo.fechado .seta { transform: rotate(-90deg); }

/* O DESTAQUE: uma barra vermelha antes do nome e uma linha fina embaixo.
   Só aumentar a fonte deixava o título grande mas ainda solto no meio dos
   itens; o que separa uma seção da outra é ter uma borda, não ter corpo. */
.menu-grupo::before {
  content: ''; width: 3px; align-self: stretch; min-height: 15px;
  background: var(--vermelho); border-radius: 2px; flex: 0 0 auto;
}
.menu-lateral button.menu-grupo {
  border-top: 1px solid var(--linha-leve);
  margin-top: 6px; margin-bottom: 2px;
}
.menu-lateral button.menu-grupo:first-child { border-top: 0; margin-top: 0; }

/* Seção fechada fica cinza e sem a barra: a diferença precisa ser visível de
   relance, senão a pessoa não sabe onde escondeu o que procura. */
.menu-lateral button.menu-grupo.fechado { color: var(--apagado); }
.menu-grupo.fechado::before { background: var(--linha); }
.lateral.encolhida .menu-grupo {
  padding: 12px 0 6px; text-align: center; font-size: 0;
}
.lateral.encolhida .menu-grupo::after {
  content: ''; display: block; height: 1px; background: var(--linha-leve); margin: 0 8px;
}

/* ITEM ESCONDIDO PRECISA SUMIR DE VERDADE.
   A regra abaixo dá `display: flex` a todo botão do menu, e isso vence o
   `display: none` que o navegador aplica a [hidden] — então recolher uma seção
   não escondia nada. Foi exatamente o que quebrou o botão de recolher. */
.menu-lateral button[hidden] { display: none; }

.menu-lateral button {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  font: inherit; font-size: 14px; font-weight: 500;
  color: var(--tinta-fraca);
  background: none; border: none; border-radius: var(--raio);
  padding: 9px 11px; margin-bottom: 1px;
  cursor: pointer; white-space: nowrap;
  transition: background .1s, color .1s;
}
.menu-lateral button:hover { background: var(--realce); color: var(--preto); }
.menu-lateral button.ativo {
  background: var(--vermelho); color: #fff; font-weight: 600;
}
.menu-lateral button .icone {
  flex: none; width: 18px; height: 18px; opacity: .75;
}
.menu-lateral button.ativo .icone { opacity: 1; }
.lateral.encolhida .menu-lateral button { justify-content: center; padding: 10px 0; }
.lateral.encolhida .menu-lateral button .rotulo { display: none; }

.lateral-pe {
  border-top: 1px solid var(--linha-leve);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
}
.eu-lateral {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--apagado); line-height: 1.35;
}
.eu-lateral strong {
  display: block; color: var(--tinta); font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lateral.encolhida .eu-lateral { display: none; }

.lateral-pe .sair {
  background: none; border: 1px solid var(--linha); color: var(--tinta-fraca);
  border-radius: var(--raio); padding: 5px 10px; font: inherit; font-size: 12.5px;
  cursor: pointer; flex: none;
}
.lateral-pe .sair:hover { border-color: var(--vermelho); color: var(--vermelho-forte); }

/* ------------------------------------------------------------ conteúdo -- */
.conteudo { flex: 1; min-width: 0; position: relative; }
.pagina { max-width: 1500px; margin: 0 auto; padding: 24px 24px 60px; }

.abrir-menu {
  display: none;
  position: fixed; top: 12px; left: 12px; z-index: 40;
  width: 38px; height: 38px;
  background: var(--carta); border: 1px solid var(--linha);
  border-radius: var(--raio); cursor: pointer; font-size: 17px;
  box-shadow: var(--sombra);
}

@media (max-width: 900px) {
  .lateral {
    position: fixed; z-index: 45; left: -240px;
    box-shadow: 4px 0 22px rgba(0,0,0,.16);
  }
  .lateral.aberta { left: 0; }
  .abrir-menu { display: block; }
  .pagina { padding-top: 60px; }
}

.cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.cabeca h1 { font-size: 25px; margin: 0 0 3px; letter-spacing: -0.02em; }
.titulo-editavel { cursor: pointer; display: inline-block; border-radius: 4px; padding: 0 4px; margin-left: -4px; }
.titulo-editavel:hover { background: var(--vermelho-fraco); color: var(--vermelho-forte); }
.titulo-editavel::after { content: ' ✎'; font-size: 15px; opacity: 0; }
.titulo-editavel:hover::after { opacity: .6; }
.cabeca p { margin: 0; color: var(--apagado); font-size: 14px; max-width: 65ch; }
.cabeca .acoes { display: flex; gap: 8px; }

/* --------------------------------------------------------------- cartas -- */

.carta {
  background: var(--carta);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  margin-bottom: 16px;
}
.carta-cabeca {
  padding: 15px 19px;
  border-bottom: 1px solid var(--linha-leve);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.carta-cabeca h2 { font-size: 16px; margin: 0; letter-spacing: -0.01em; }
.carta-cabeca .desc { font-size: 13px; color: var(--apagado); margin: 3px 0 0; max-width: 60ch; }
.carta-corpo { padding: 19px; }

/* --------------------------------------------------------------- tabela -- */

.rolagem { overflow-x: auto; }

/* CABEÇALHO QUE FICA NA TELA.

   `table.dados th` já pede `position: sticky`, e mesmo assim o cabeçalho sumia
   ao rolar. O motivo está uma linha acima: `.rolagem` tem `overflow-x: auto`, e
   o CSS converte o `overflow-y` de `visible` para `auto` quando o outro eixo
   não é visível. Com isso a caixa vira um container de rolagem — e o sticky
   passa a se medir por ELA, não pela página. Como a caixa tem a altura do
   conteúdo, ela nunca rola por dentro: quem rola é a página, e o cabeçalho vai
   embora junto.

   Dar uma altura máxima à caixa devolve ao sticky o que ele precisa: agora a
   tabela rola por dentro e o cabeçalho encosta no topo dela. Fica opt-in
   porque nem toda tabela é longa — numa lista de seis linhas, a caixa com
   altura fixa só criaria uma barra de rolagem sem motivo. */
.rolagem-alta {
  max-height: calc(100vh - 170px);
  overflow: auto;
}
/* A ordem de quem passa por cima de quem. O canto superior esquerdo é o ponto
   de briga: ali a célula é congelada na horizontal E fixa na vertical, e
   precisa vencer as duas. */
.rolagem-alta table.dados thead th { z-index: 4; }
.rolagem-alta table.dados thead th[data-congelada] { z-index: 5; }
.rolagem-alta table.dados tbody td[data-congelada] { z-index: 2; }
/* Célula congelada precisa de fundo opaco: sem ele, o conteúdo das colunas de
   trás aparece por baixo dela quando a tabela rola para o lado. */
.rolagem-alta table.dados tbody td[data-congelada] { background: var(--papel, #fff); }
.rolagem-alta table.dados tbody tr:hover td[data-congelada] { background: var(--realce); }

table.dados { width: 100%; border-collapse: collapse; font-size: 14px; }
table.dados th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--apagado);
  padding: 11px 14px;
  background: var(--realce);
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
/* Clicar no cabeçalho ordena a coluna. A setinha apagada avisa que dá para
   clicar; ela acende e aponta para o lado que está valendo. */
table.dados thead th { cursor: pointer; user-select: none; }
/* Cabeçalho que tem explicação ganha um sublinhado pontilhado discreto: sem
   ele ninguém descobre que há algo a ler passando o mouse. */
table.dados thead th[title] { text-decoration: underline dotted 1px; text-underline-offset: 3px; }
.grade-cabeca [data-campo][title] { text-decoration: underline dotted 1px; text-underline-offset: 3px; }
table.dados thead th::after {
  content: '⇅';
  margin-left: 6px;
  font-size: 10px;
  opacity: 0.3;
  font-weight: 400;
}
table.dados thead th:hover { color: var(--tinta); }
table.dados thead th:hover::after { opacity: 0.65; }
table.dados thead th[data-ordenado]::after { opacity: 1; color: var(--marca); }
table.dados thead th[data-ordenado="asc"]::after  { content: '▲'; }
table.dados thead th[data-ordenado="desc"]::after { content: '▼'; }
table.dados thead th[data-ordenado] { color: var(--tinta); }
table.dados thead th[data-sem-ordem] { cursor: default; }
table.dados thead th[data-sem-ordem]::after { content: ''; margin: 0; }
table.dados thead th[data-sem-ordem]:hover { color: var(--apagado); }

table.dados td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--linha-leve);
  vertical-align: middle;
}
table.dados tbody tr:hover { background: var(--realce); }
table.dados td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* O título da coluna de número alinhado com o número (07/10/2026: em "Por
   serviço" o título ficava à esquerda e o valor à direita — parecia quebrado). */
table.dados th.num { text-align: right; }
.carta > h3 { padding: 14px 16px 6px; margin: 0; }
table.dados td.acoes { text-align: right; white-space: nowrap; }
table.dados .principal-col { font-weight: 600; }
table.dados .fraco { color: var(--apagado); font-size: 13px; }

/* --------------------------------------------------------------- selos -- */

.selo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 9px;
  border-radius: 99px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.selo.bom     { background: var(--bom-fundo);     color: var(--bom);     border-color: #C4E4D2; }
.selo.erro    { background: var(--erro-fundo);    color: var(--erro);    border-color: #F0CFCB; }
.selo.atencao { background: var(--atencao-fundo); color: var(--atencao); border-color: #EDD9AE; }
.selo.neutro  { background: var(--realce);        color: var(--tinta-fraca); border-color: var(--linha); }
.selo.marca   { background: var(--vermelho-fraco);color: var(--vermelho-forte); border-color: #F5C9CD; }

/* --------------------------------------------------------------- janela -- */

.cortina {
  position: fixed; inset: 0;
  background: rgba(22,24,28,.5);
  display: grid; place-items: center;
  padding: 22px;
  z-index: 60;
}
.janela {
  background: var(--carta);
  border-radius: 8px;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
}
.janela.larga { max-width: 780px; }
.janela-cabeca {
  padding: 18px 22px;
  border-bottom: 1px solid var(--linha-leve);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  position: sticky; top: 0; background: var(--carta);
}
.janela-cabeca h2 { margin: 0; font-size: 17px; }
.janela-corpo { padding: 22px; }
.janela-pe {
  padding: 15px 22px;
  border-top: 1px solid var(--linha-leve);
  display: flex; justify-content: flex-end; gap: 9px;
  position: sticky; bottom: 0; background: var(--carta);
}
.fechar {
  background: none; border: none; cursor: pointer;
  color: var(--apagado); font-size: 22px; line-height: 1; padding: 0 4px;
}
.fechar:hover { color: var(--tinta); }

/* --------------------------------------------------------- permissões -- */

.grupo-perm { margin-bottom: 18px; }
.grupo-perm h4 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--apagado); margin: 0 0 8px; font-weight: 700;
}
.perm-linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linha-leve);
}
.perm-linha:last-child { border-bottom: none; }
.perm-nome { font-size: 14px; }
.perm-nome .chave { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--apagado); }

.tri { display: flex; gap: 0; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.tri button {
  font: inherit; font-size: 12px; font-weight: 600;
  background: var(--carta); border: none; padding: 5px 11px; cursor: pointer;
  color: var(--apagado); border-right: 1px solid var(--linha);
}
.tri button:last-child { border-right: none; }
.tri button.on-sim  { background: var(--bom-fundo);  color: var(--bom); }
.tri button.on-nao  { background: var(--erro-fundo); color: var(--erro); }
.tri button.on-papel{ background: var(--realce);     color: var(--tinta); }

/* ---------------------------------------------------------------- misc -- */

.vazio { text-align: center; padding: 46px 20px; color: var(--apagado); }
.vazio strong { display: block; color: var(--tinta); font-size: 16px; margin-bottom: 5px; }

.senha-revelada {
  font-family: var(--mono);
  font-size: 21px;
  letter-spacing: 0.06em;
  background: var(--realce);
  border: 1px dashed var(--linha);
  border-radius: var(--raio);
  padding: 15px;
  text-align: center;
  margin: 14px 0;
  user-select: all;
}

.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 16px; }

.carregando { color: var(--apagado); padding: 40px; text-align: center; font-size: 14px; }

.mono { font-family: var(--mono); }
.tabular { font-variant-numeric: tabular-nums; }

.recado {
  position: fixed; bottom: 20px; right: 20px; z-index: 90;
  box-shadow: var(--sombra); max-width: 380px; margin: 0;
}

table.dados tr.clicavel { cursor: pointer; }
.volta { margin-bottom: 4px; }
.volta .botao { padding-left: 0; }

/* =========================== TELA DE COTAÇÃO ============================= */

.pagina-larga { max-width: 100%; padding-left: 18px; padding-right: 18px; }

.cotacao-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) {
  .cotacao-grade { grid-template-columns: minmax(0, 1fr); }
}

/* --- barra de andamento --- */
.progresso {
  height: 5px; background: var(--linha-leve);
  border-radius: 99px; overflow: hidden; max-width: 460px; margin-top: 8px;
}
.progresso-barra {
  height: 100%; width: 0;
  background: var(--vermelho);
  border-radius: 99px;
  transition: width .35s ease;
}

/* --- a grade de itens --- */
/* UMA barra de rolagem só, para os dois sentidos. Antes eram duas — uma aqui
   e outra no corpo — e ficavam empilhadas no rodapé da tabela. */
.grade {
  background: var(--carta);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: auto;
  height: calc(100vh - 300px);
  min-height: 340px;
}
.grade-interna { min-width: 1600px; }

/* O cabeçalho gruda no topo enquanto a tabela rola, e acompanha as colunas
   quando ela rola para o lado. */
.grade-cabeca { position: sticky; top: 0; z-index: 4; }

/* Clicar no cabeçalho da grade ordena por aquela coluna. */
.grade-cabeca [data-campo] { cursor: pointer; user-select: none; }
.grade-cabeca [data-campo]:hover { text-decoration: underline; }
.grade-cabeca [data-campo][data-ordenado]::after {
  margin-left: 4px;
  font-size: 9px;
  color: var(--marca);
}
.grade-cabeca [data-campo][data-ordenado="asc"]::after  { content: '▲'; }
.grade-cabeca [data-campo][data-ordenado="desc"]::after { content: '▼'; }

.grade-cabeca, .grade-linha {
  display: grid;
  grid-template-columns:
    38px                  /* a marca do que segue adiante */
    54px                  /* # — cabe 3 algarismos (27/10/2026: a partir de 100 cortava) */
    132px                 /* part number */
    280px                 /* descrição — largura fixa para poder congelar */
    repeat(6, 92px)       /* as seis referências do eBay */
    repeat(3, 128px)      /* concorrentes no Brasil */
    118px                 /* nosso preço no Mercado Livre */
    78px                  /* peças em estoque */
    112px                 /* menor no ML */
    112px                 /* menor fora do ML */
    190px                 /* novo preço no ML + botão */
    148px                 /* última alteração */
    150px                 /* custo escolhido */
    96px;                 /* quem escolheu, fechando a linha */
  align-items: center;
  gap: 0;
}

/* As três primeiras colunas ficam paradas quando a tabela rola para o lado.
   Sem isso, você chega no Concorrente 3 e não sabe mais de qual peça é a
   linha — que é exatamente a hora em que precisa saber. */
/* As quatro primeiras ficam paradas. Os `left` são a soma das larguras das
   anteriores — 38, 38+54, 38+54+132 —, então mexer numa largura lá em cima
   obriga a refazer esta conta. */
.grade-cabeca .c-marca, .grade-linha .c-marca { position: sticky; left: 0;     z-index: 2; }
.grade-cabeca .c-linha, .grade-linha .c-linha { position: sticky; left: 38px;  z-index: 2; }
.grade-cabeca .c-pn,    .grade-linha .c-pn    { position: sticky; left: 92px;  z-index: 2; }
.grade-cabeca .c-desc,  .grade-linha .c-desc  { position: sticky; left: 224px; z-index: 2; }

.c-marca { text-align: center; }
.c-marca input { width: auto; margin: 0; cursor: pointer; }
/* Linha que não segue adiante fica apagada, e se lê de relance. */
.grade-linha.fora { opacity: .42; }

.grade-linha .c-marca, .grade-linha .c-linha,
.grade-linha .c-pn, .grade-linha .c-desc { background: var(--carta); }
.grade-linha:hover .c-marca,
.grade-linha:hover .c-linha,
.grade-linha:hover .c-pn,
.grade-linha:hover .c-desc { background: var(--realce); }
.grade-linha.escolhida .c-marca,
.grade-linha.escolhida .c-linha,
.grade-linha.escolhida .c-pn,
.grade-linha.escolhida .c-desc { background: #FFFCFC; }
.grade-linha.escolhida:hover .c-marca,
.grade-linha.escolhida:hover .c-linha,
.grade-linha.escolhida:hover .c-pn,
.grade-linha.escolhida:hover .c-desc { background: var(--vermelho-fraco); }
/* No cruzamento do cabeçalho fixo com as colunas congeladas, quem manda é o
   cabeçalho — por isso a camada mais alta. */
.grade-cabeca .c-marca,
.grade-cabeca .c-linha,
.grade-cabeca .c-pn,
.grade-cabeca .c-desc { background: var(--realce); z-index: 6; }

/* Uma sombrinha marca onde as colunas congeladas terminam. */
.grade-cabeca .c-desc, .grade-linha .c-desc {
  box-shadow: 4px 0 6px -4px rgba(22,24,28,.18);
}

.grade-cabeca {
  background: var(--realce);
  border-bottom: 1px solid var(--linha);
  box-shadow: 0 2px 4px -2px rgba(22,24,28,.16);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--apagado);
  height: 40px;
}
.grade-cabeca > div { padding: 0 10px; }
.grade-cabeca .cabeca-novo  { color: var(--tinta-fraca); }
.grade-cabeca .cabeca-usado { color: var(--apagado); }
.grade-cabeca .cabeca-conc  { color: var(--apagado); }
.grade-cabeca .c-preco,
.grade-cabeca .c-escolha { text-align: right; }
/* Linhas separando os três blocos: custo no eBay, concorrentes, e a decisão. */
.grade-cabeca .c-conc:first-of-type,
.grade-linha  .c-conc:first-of-type { border-left: 1px solid var(--linha); }
.grade-cabeca .c-escolha,
.grade-linha  .c-escolha { border-left: 1px solid var(--linha); }

.grade-rolagem { position: relative; }
.virtual-espaco { position: relative; }
.virtual-trilho { position: absolute; top: 0; left: 0; right: 0; }

/* A altura vem por linha, calculada a partir do tamanho da descrição. */
.grade-linha {
  min-height: 40px;
  border-bottom: 1px solid var(--linha-leve);
  font-size: 13.5px;
}

/* Elemento invisível que serve só para medir quantas linhas a descrição ocupa. */
.medidor-desc {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  top: -9999px; left: -9999px;
  font-size: 13.5px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}
.grade-linha:hover { background: var(--realce); }
.grade-linha.escolhida { background: #FFFCFC; }
.grade-linha.escolhida:hover { background: var(--vermelho-fraco); }

.grade-linha > div {
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-linha { color: var(--apagado); font-size: 12px; font-variant-numeric: tabular-nums; }
.c-pn { font-family: var(--mono); font-size: 12.5px; font-weight: 500; }
.c-pn:hover { color: var(--vermelho-forte); text-decoration: underline; }

/* A descrição aparece inteira, quebrando em quantas linhas precisar. */
.c-desc {
  color: var(--tinta-fraca);
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.4;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  overflow-wrap: anywhere;
  align-self: center;
}

/* --- as células de preço, que são o coração da tela --- */
.c-preco { text-align: right; font-variant-numeric: tabular-nums; }

.preco {
  border-radius: 3px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  margin: 0 3px;
  padding: 0 6px !important;
  transition: background .1s, color .1s, box-shadow .1s;
}
.preco.clicavel { cursor: pointer; }
.preco.usado { color: var(--tinta-fraca); }
.preco.vazio { color: var(--linha); }
.preco .valor { flex: none; }

/* A seta que abre o anúncio. Fica invisível até o mouse chegar na célula —
   seis setas visíveis em cada uma das mil linhas seria ruído demais. */
.preco .seta {
  flex: none;
  margin-right: auto;
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
  color: var(--apagado);
  opacity: 0;
  padding: 3px;
  border-radius: 3px;
  transition: opacity .1s, color .1s, background .1s;
}
.preco:hover .seta { opacity: 1; }
.preco .seta:hover { color: var(--vermelho); background: #fff; }
.preco .seta:focus-visible { opacity: 1; }

.preco:not(.vazio):hover {
  background: var(--vermelho-fraco);
  color: var(--vermelho-forte);
  box-shadow: inset 0 0 0 1px var(--vermelho);
}
.preco.marcado { background: var(--vermelho); color: #fff; font-weight: 600; }
.preco.marcado:hover { background: var(--vermelho-forte); color: #fff; }
.preco.marcado .seta { color: rgba(255,255,255,.75); }
.preco.marcado .seta:hover { color: #fff; background: rgba(0,0,0,.2); }

/* --- concorrentes no Brasil --- */
.c-conc { overflow: hidden; }
.conc-link { text-decoration: none; color: inherit; display: block; }

.conc-caixa {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  line-height: 1.25;
  padding: 2px 4px;
  border-radius: 3px;
  transition: background .1s;
}
.conc-link:hover .conc-caixa { background: var(--vermelho-fraco); }

.conc-loja {
  font-size: 10.5px;
  color: var(--apagado);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Anúncio do Mercado Livre ganha destaque: ele tem preferência nas colunas. */
.conc-loja.conc-ml { color: var(--vermelho-forte); font-weight: 700; }

.conc-preco { font-size: 13px; font-weight: 600; color: var(--tinta); }
.conc-link:hover .conc-preco { color: var(--vermelho-forte); }

.conc-espera {
  font-size: 11.5px; color: var(--linha); font-style: italic;
}
.conc-espera.erro-texto { color: var(--erro); font-style: normal; }

/* --- o nosso próprio preço no Mercado Livre --- */
.c-nosso {
  text-align: right;
  border-left: 1px solid var(--linha);
  overflow: hidden;
}
.grade-cabeca .cabeca-nosso { color: var(--vermelho-forte); text-align: right; }

/* --- o campo que muda o preço lá no Mercado Livre ---
   Ele grava numa vitrine pública, então não pode parecer mais uma célula:
   a borda tracejada diz "isto escreve fora daqui". */
/* O campo e o botão dividem a célula por grid, com largura própria. Antes eram
   dois elementos inline num td sem largura mínima: o input crescia, o botão
   era empurrado para fora e ia parar em cima da coluna seguinte. */
.celula-novo-preco {
  vertical-align: middle;      /* a célula continua célula: alinha no meio */
  text-align: right;
  white-space: nowrap;
  min-width: 186px;
}
.novo-preco-caixa {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px;
}
.novo-preco-caixa .botao { flex: 0 0 auto; margin: 0; }

/* A margem que o preço digitado daria, antes de alterar. Fica vazia enquanto
   ninguém digitou nada — um traço permanente ali só faria ruído. */
.grupo-simulado { display: inline-flex; flex-direction: column; gap: 2px; }

.margem-simulada {
  flex: 0 0 auto; text-align: right; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  border-radius: 4px; padding: 0 5px; line-height: 17px;
}
/* A etiqueta de qual custo gerou aquela margem. Sem ela, dois percentuais
   diferentes na mesma célula pareceriam contradição. */
.margem-simulada em {
  font-style: normal; font-weight: 600; font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .04em; opacity: .75;
}
.margem-simulada:empty { padding: 0; }
.margem-simulada.erro    { background: var(--erro-fundo);    color: var(--erro); }
.margem-simulada.atencao { background: var(--atencao-fundo); color: var(--atencao); }
.margem-simulada.bom     { background: var(--bom-fundo);     color: var(--bom); }
.margem-simulada.neutro  { background: var(--realce);        color: var(--tinta-fraca); }

/* ------------------------------------------------- perfis de acesso -- */

.blocos-permissao {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
@media (max-width: 700px) { .blocos-permissao { grid-template-columns: 1fr; } }

.bloco-permissao {
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 10px 12px; background: var(--realce);
}
.bloco-cabeca {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px; margin-bottom: 6px;
  border-bottom: 1px solid var(--linha); cursor: pointer;
}
.bloco-cabeca strong { font-size: 13px; }

.linha-permissao {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 4px 0; font-size: 13px; cursor: pointer; line-height: 1.35;
}
.linha-permissao:hover { color: var(--vermelho-forte); }
.linha-permissao input { margin-top: 2px; flex: 0 0 auto; }

/* A chave técnica, para quem precisa conferir contra o código. Discreta:
   quem administra acesso pensa em "gerar proposta", não em proposta.gerar. */
.chave-permissao {
  display: block; font-family: var(--mono); font-size: 10.5px;
  color: var(--apagado); margin-top: 1px;
}

.barra-salvar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linha);
}

.atalho.ativo {
  border-color: var(--vermelho);
  box-shadow: 0 0 0 2px var(--vermelho-fraco);
}

/* As setinhas do input numérico comiam largura e não servem para preço. */
.campo-novo-ml::-webkit-outer-spin-button,
.campo-novo-ml::-webkit-inner-spin-button { appearance: none; margin: 0; }
.campo-novo-ml { appearance: textfield; -moz-appearance: textfield; }

/* O grupo de precificação, no cabeçalho de cima da tabela do Mercado Livre. */
.grupo-cabeca .grupo-preco {
  background: var(--vermelho-fraco); color: var(--vermelho-forte);
  text-align: center; font-weight: 700;
}

.campo-novo-ml {
  flex: 0 0 92px; width: 92px; vertical-align: middle;
  font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums;
  text-align: right; padding: 4px 7px;
  border: 1px dashed var(--linha); border-radius: 5px;
  background: var(--carta); color: var(--tinta);
}
.campo-novo-ml:hover:not(:disabled) { border-color: var(--vermelho); }
.campo-novo-ml:focus {
  outline: none; border-style: solid; border-color: var(--vermelho);
  box-shadow: 0 0 0 2px var(--vermelho-fraco);
}
.campo-novo-ml:disabled { border-color: transparent; background: transparent; }

/* Ha uma ressalva — o saldo nao cobre, ou o anuncio esta no teto — mas gravar
   continua permitido. A borda avisa; quem decide e quem esta olhando, e o
   servidor confere de novo na hora de gravar. */
.campo-novo-ml-ressalva { border-color: var(--atencao) !important; }
.campo-novo-ml-ressalva:focus { box-shadow: 0 0 0 3px var(--atencao-fundo); }
.campo-novo-ml.gravando { border-style: solid; border-color: var(--atencao); }
.campo-novo-ml.gravou {
  border-style: solid; border-color: var(--bom); background: var(--bom-fundo);
}

.nosso-valor {
  display: block;
  font-size: 13px; font-weight: 600; color: var(--tinta);
  line-height: 1.2;
}
.nosso-margem {
  display: block; font-size: 10.5px; font-weight: 600; line-height: 1.2;
}
.nosso-margem.boa      { color: var(--bom); }
.nosso-margem.apertada { color: var(--atencao); }
.nosso-margem.ruim     { color: var(--erro); }

/* --- peças em estoque, vindas do Gestão Click --- */
.c-estoque { text-align: center; overflow: hidden; }
.grade-cabeca .cabeca-estoque { text-align: center; color: var(--apagado); }

.selo-estoque {
  display: inline-block;
  min-width: 30px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.selo-estoque.ok     { background: var(--bom-fundo);     color: var(--bom);     border-color: #C4E4D2; }
.selo-estoque.baixo  { background: var(--atencao-fundo); color: var(--atencao); border-color: #EDD9AE; }
.selo-estoque.zerado { background: var(--erro-fundo);    color: var(--erro);    border-color: #F0CFCB; }

/* --- link do custo escolhido --- */
.escolha-link {
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  color: var(--tinta);
}
.escolha-link:hover { color: var(--vermelho-forte); text-decoration: underline; }

/* --- cartão que mostra de onde veio o preço --- */
.cartao-anuncio {
  position: fixed;
  z-index: 80;
  width: 310px;
  background: var(--carta);
  border: 1px solid var(--linha);
  border-top: 3px solid var(--vermelho);
  border-radius: var(--raio);
  box-shadow: 0 8px 28px rgba(22,24,28,.18);
  padding: 12px 14px 10px;
  font-size: 13px;
  animation: surgir .09s ease-out;
}
@keyframes surgir { from { opacity: 0; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .cartao-anuncio { animation: none; } }

.cartao-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.cartao-topo strong { font-size: 15px; }

.cartao-titulo {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--tinta);
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--linha-leve);
}

.cartao-dados { display: flex; flex-direction: column; gap: 5px; }
.cartao-linha { display: grid; grid-template-columns: 68px 1fr; gap: 8px; align-items: baseline; }
.cartao-rotulo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--apagado); font-weight: 700;
}
.cartao-valor { font-size: 12.5px; color: var(--tinta-fraca); }
.cartao-extra { display: block; font-size: 11.5px; color: var(--apagado); }

/* O endereço por extenso, dentro do cartão. Quebra em qualquer ponto para
   caber, porque link do Mercado Livre é comprido. */
.cartao-endereco {
  display: block;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid var(--linha-leve);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
  color: var(--vermelho-forte);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.cartao-endereco:hover { text-decoration: underline; }

/* ------------------------------------------------ seleção no estoque -- */

.celula-marca { width: 40px; text-align: center; padding-right: 0 !important; }
.marca-item {
  width: 16px; height: 16px; cursor: pointer;
  accent-color: var(--vermelho);
  vertical-align: middle;
}
.marca-item:disabled { cursor: not-allowed; opacity: .35; }

table.tabela-marcavel tbody tr { cursor: pointer; }
table.tabela-marcavel tbody tr:has(.marca-item:checked) { background: var(--vermelho-fraco); }
table.tabela-marcavel tbody tr:has(.marca-item:disabled) { cursor: default; }

/* A barra só aparece quando há algo marcado — fica no rodapé, para não
   obrigar a pessoa a voltar ao topo depois de marcar lá embaixo. */
.barra-selecao {
  display: none;
  position: sticky;
  bottom: 0;
  z-index: 25;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 13px 18px;
  background: var(--preto);
  color: #fff;
  border-radius: var(--raio);
  box-shadow: 0 -2px 16px rgba(0,0,0,.22);
}
.barra-selecao.visivel { display: flex; }
.selecao-conta { font-size: 14px; color: #C9CDD3; }
.selecao-conta strong { color: #fff; font-size: 17px; margin-right: 3px; }
.barra-selecao .botao.texto { color: #B9BDC4; }
.barra-selecao .botao.texto:hover { color: #fff; background: rgba(255,255,255,.12); }

.preco-ml { font-weight: 600; text-decoration: none; color: var(--tinta); }
.preco-ml:hover { color: var(--vermelho-forte); text-decoration: underline; }

.cartao-abrir {
  display: block;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid var(--linha-leve);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vermelho-forte);
  text-decoration: none;
}
.cartao-abrir:hover { text-decoration: underline; }

.c-espera {
  grid-column: span 6;
  text-align: center;
  color: var(--apagado);
  font-size: 12.5px;
  font-style: italic;
}
.c-espera.erro-texto { color: var(--erro); font-style: normal; }

/* --- o bloco de precificação dentro da grade da cotação ---
   Separado por uma linha do resto: até aqui a tela lê o mercado; daqui em
   diante ela escreve nele. */
.grade-cabeca .c-menor:first-of-type,
.grade-linha  .c-menor:first-of-type { border-left: 2px solid var(--vermelho-fraco); }
.grade-cabeca .cabeca-preco { color: var(--vermelho-forte); text-align: right; }

.c-menor { text-align: right; overflow: hidden; padding-right: 8px; line-height: 1.25; }
.menor-valor { display: block; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.menor-loja  { display: block; font-size: 10.5px; color: var(--apagado); }

.grade-linha .c-novo-ml { text-align: right; overflow: visible; padding-right: 6px; }
.grade-linha .c-novo-ml .novo-preco-caixa { justify-content: flex-end; }

/* Quem mexeu no preço, e quando. Nome inteiro na tela: mudar preço é ação
   para fora, e "quem foi?" não pode depender de passar o mouse. */
.celula-alterado { line-height: 1.3; vertical-align: middle; padding-right: 8px; }
.alterado-quem {
  display: block; font-size: 12px; font-weight: 600; color: var(--tinta-fraca);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alterado-quando {
  display: block; font-size: 10.5px; color: var(--apagado);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.alterado-de-para {
  display: block; font-size: 10.5px; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.alterado-de-para.subiu { color: var(--bom); }
.alterado-de-para.caiu  { color: var(--atencao); }

/* A promoção que mexeu neste anúncio. Marcada de propósito: alteração em
   massa e alteração avulsa precisam ser distinguíveis de relance. */
.alterado-promocao {
  display: inline-block;
  margin-top: 2px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--vermelho-fraco, rgba(168,34,31,.1));
  color: var(--vermelho);
  font-size: 10px;
  font-weight: 700;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-alterado { text-align: right; overflow: hidden; }
.grade-linha .c-alterado .alterado-quem,
.grade-linha .c-alterado .alterado-quando,
.grade-linha .c-alterado .alterado-de-para { text-align: right; }

/* Quem escolheu o custo. Discreta de propósito: é rastreabilidade, não
   destaque — a coluna que importa ao lado é o número. */
.c-quem { overflow: hidden; padding-left: 8px; line-height: 1.25; }
.grade-cabeca .c-quem { color: var(--apagado); }
.quem-nome  { display: block; font-size: 12px; color: var(--tinta-fraca); }
.quem-quando {
  display: block; font-size: 10.5px; color: var(--apagado);
  font-variant-numeric: tabular-nums;
}

.c-escolha { text-align: right; font-variant-numeric: tabular-nums; }
.c-escolha strong { display: block; font-size: 13.5px; }
.c-escolha .escolha-nome { display: block; font-size: 10.5px; line-height: 1.2; }
.c-escolha .fraco { font-size: 12px; }

/* --- painel lateral dos escolhidos --- */
.painel {
  background: var(--carta);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 96px);
}
.painel-cabeca {
  padding: 14px 16px;
  border-bottom: 1px solid var(--linha-leve);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.painel-cabeca h3 { margin: 0; font-size: 15px; }
.painel-vazio { padding: 30px 18px; text-align: center; color: var(--apagado); }
.painel-vazio strong { display: block; color: var(--tinta); margin-bottom: 6px; font-size: 14px; }
.painel-vazio p { margin: 0; font-size: 13px; line-height: 1.5; }

.painel-lista { overflow-y: auto; flex: 1; }
.painel-item {
  padding: 10px 16px 10px 14px;
  border-bottom: 1px solid var(--linha-leve);
  display: grid;
  grid-template-columns: 1fr auto 18px;
  gap: 2px 8px;
  align-items: baseline;
  position: relative;
}
.painel-item:hover { background: var(--realce); }

.painel-tirar {
  grid-row: 1 / 3; grid-column: 3;
  align-self: center;
  background: none; border: none; cursor: pointer;
  font-size: 17px; line-height: 1; padding: 2px 4px;
  color: var(--linha); border-radius: 3px;
  transition: color .1s, background .1s;
}
.painel-item:hover .painel-tirar { color: var(--apagado); }
.painel-tirar:hover { color: #fff !important; background: var(--vermelho); }
.painel-item-pn { font-size: 12.5px; font-weight: 600; }
.painel-item-desc {
  grid-column: 1;
  font-size: 12px; color: var(--apagado);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.painel-item-preco {
  grid-row: 1 / 3; grid-column: 2;
  align-self: center;
  text-align: right; font-variant-numeric: tabular-nums;
}
.painel-item-preco strong { display: block; font-size: 13px; }
.painel-item-preco .fraco { font-size: 10.5px; }

.painel-pe { padding: 14px 16px; border-top: 1px solid var(--linha); }
.painel-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px; font-size: 14px;
}
.painel-total strong { font-size: 18px; font-variant-numeric: tabular-nums; }

/* --- atalhos da tela inicial --- */
.atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.atalho {
  font: inherit; text-align: left; cursor: pointer;
  background: var(--carta);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--vermelho);
  border-radius: var(--raio);
  padding: 16px 18px;
  box-shadow: var(--sombra);
  transition: border-color .12s, transform .12s;
}
.atalho:hover { border-color: var(--vermelho); transform: translateY(-1px); }
.atalho strong { display: block; font-size: 15px; margin-bottom: 3px; }
.atalho span { font-size: 13px; color: var(--apagado); }

/* --- campo de preço editável no histórico --- */
.celula-preco { padding: 5px 14px !important; }
.preco-gestor {
  width: 120px; text-align: right; padding: 5px 9px; font-size: 13.5px;
}
.preco-gestor.salvando { border-color: var(--atencao); }
.preco-gestor.salvo { border-color: var(--bom); background: var(--bom-fundo); }

/* ------------------------------------------------------------- análise -- */

.carta-giro {
  background: var(--carta);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--linha);
  border-radius: var(--raio);
  padding: 14px 16px;
  box-shadow: var(--sombra);
}
.carta-giro.bom     { border-left-color: var(--bom); }
.carta-giro.atencao { border-left-color: var(--atencao); }
.carta-giro.neutro  { border-left-color: var(--apagado); }
.carta-giro.erro    { border-left-color: var(--erro); }

.giro-numero {
  font-size: 27px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; margin-bottom: 4px;
}
.carta-giro.bom     .giro-numero { color: var(--bom); }
.carta-giro.atencao .giro-numero { color: var(--atencao); }
.carta-giro.erro    .giro-numero { color: var(--erro); }
.carta-giro strong { display: block; font-size: 14px; margin-bottom: 3px; }
.carta-giro span   { font-size: 12.5px; color: var(--apagado); line-height: 1.45; }

.conv { font-weight: 600; }
.conv.boa   { color: var(--bom); }
.conv.media { color: var(--atencao); }
.conv.fraca { color: var(--apagado); }

/* --------------------------------------------------------- precificação -- */

.faixa-totais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.total-bloco {
  background: var(--carta);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 12px 16px;
  box-shadow: var(--sombra);
}
.total-bloco span {
  display: block; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--apagado); font-weight: 700; margin-bottom: 3px;
}
.total-bloco strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.total-bloco .destaque-venda { color: var(--vermelho-forte); }
.total-bloco .boa  { color: var(--bom); }
.total-bloco .ruim { color: var(--erro); }

.campo-qtd { width: 62px; text-align: center; padding: 5px 6px; font-size: 13.5px; }
.campo-ncm { width: 96px; padding: 5px 8px; font-size: 12.5px; }

.venda-caixa { display: flex; align-items: center; gap: 6px; }
.sugestao {
  font-size: 11.5px; padding: 3px 7px; white-space: nowrap;
  border: 1px dashed var(--linha); border-radius: var(--raio);
}
.sugestao:hover { border-color: var(--vermelho); }

td.margem.boa      { color: var(--bom); font-weight: 600; }
td.margem.apertada { color: var(--atencao); font-weight: 600; }
td.margem.ruim     { color: var(--erro); font-weight: 600; }

.aviso-inline { color: var(--atencao); font-weight: 600; }

/* ---------------------------------------------------- filtro da cotação -- */

.barra-filtro {
  display: flex; align-items: center; gap: 7px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.chip-filtro {
  font: inherit; font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--carta); color: var(--tinta-fraca);
  border: 1px solid var(--linha); border-radius: 99px;
  padding: 5px 13px; cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.chip-filtro:hover:not(:disabled) { border-color: var(--vermelho); color: var(--vermelho-forte); }
.chip-filtro.ativo {
  background: var(--vermelho); color: #fff; border-color: var(--vermelho);
  font-weight: 600;
}
.chip-filtro:disabled { opacity: .45; cursor: not-allowed; }

.chip-conta {
  font-size: 11.5px; font-variant-numeric: tabular-nums;
  background: var(--realce); color: var(--apagado);
  border-radius: 99px; padding: 0 6px; min-width: 20px; text-align: center;
}
.chip-filtro.ativo .chip-conta { background: rgba(255,255,255,.22); color: #fff; }

.procura-tabela { max-width: 260px; margin-left: auto; padding: 5px 11px; font-size: 13px; }

/* Quantos clientes diferentes compraram a peça. Um só é risco de concentração,
   e risco tem que saltar aos olhos sem ninguém comparar números. */
.selo-clientes {
  display: inline-block; min-width: 28px; padding: 1px 7px;
  border-radius: 99px; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; border: 1px solid transparent;
}
.selo-clientes.um     { background: var(--atencao-fundo); color: var(--atencao);     border-color: #EDD9AE; }
.selo-clientes.poucos { background: var(--realce);        color: var(--tinta-fraca); border-color: var(--linha); }
.selo-clientes.varios { background: var(--bom-fundo);     color: var(--bom);         border-color: #C4E4D2; }

.rotulo-filtro {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--apagado); font-weight: 700; align-self: center;
}

.aviso-cota { display: none; }
.aviso-cota.visivel { display: block; margin-bottom: 14px; }

/* -------------------------------------------------------------- ajustes -- */

.ajustes-corpo { display: flex; flex-direction: column; gap: 0; }
.ajuste-linha {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.1fr);
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--linha-leve);
  align-items: start;
}
.ajuste-linha:first-child { padding-top: 0; }
.ajuste-linha:last-child { border-bottom: none; padding-bottom: 0; }
@media (max-width: 800px) {
  .ajuste-linha { grid-template-columns: 1fr; gap: 8px; }
}

.ajuste-texto label { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 4px; }
.ajuste-texto p { margin: 0 0 6px; font-size: 13px; line-height: 1.5; max-width: 52ch; }
.ajuste-chave {
  font-size: 11px; color: var(--apagado);
  background: var(--realce); padding: 1px 6px; border-radius: 3px;
  display: inline-block;
}
.ajuste-campo { display: flex; flex-direction: column; gap: 5px; }

.lista-ajuste {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  resize: vertical;
}

.previa-tabela { margin-top: 12px; }
textarea { resize: vertical; font-family: var(--mono); }

/* ------------------------------------------------------------- compras -- */

/* O carrinho que aparece na Busca em estoque e no Estoque. Três estados, e
   cada um precisa se distinguir de relance numa tabela cheia de números. */
.carrinho-celula { display: inline-flex; align-items: center; gap: 6px; }

.botao-carrinho {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  background: var(--carta); color: var(--apagado);
  border: 1px solid var(--linha); border-radius: var(--raio);
  cursor: pointer; transition: border-color .12s, color .12s, background .12s;
}
.botao-carrinho:hover:not(:disabled) {
  border-color: var(--vermelho); color: var(--vermelho); background: var(--vermelho-fraco);
}
.botao-carrinho:disabled { opacity: .35; cursor: not-allowed; }

/* Já está na fila: não é botão, é estado. Não deve convidar ao clique. */
span.botao-carrinho.na-fila {
  color: var(--vermelho); border-color: var(--vermelho); background: var(--vermelho-fraco);
  cursor: default;
}
.botao-carrinho.comprado { color: var(--bom); border-color: var(--bom); background: var(--bom-fundo); }

/* SR — sem reposicao. Fica ao lado do carrinho e tem a mesma altura, mas e
   texto e nao icone: a decisao de nao repor precisa estar escrita, nao
   desenhada. Apagado quando solto, firme quando ligado. */
.botao-sr {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  background: var(--carta); color: var(--apagado);
  border: 1px solid var(--linha); border-radius: var(--raio);
  cursor: pointer; transition: border-color .12s, color .12s, background .12s;
}
.botao-sr:hover:not(:disabled) {
  border-color: var(--apagado); color: var(--texto);
}
.botao-sr.ativo {
  color: var(--texto); border-color: var(--apagado);
  background: var(--linha-leve);
}
.botao-sr:disabled { opacity: .35; cursor: not-allowed; }

/* O 15D e irmao do SR e por isso herda o estilo dele — mas ligado ele fica
   AMBAR, nao cinza: adiar e estado temporario, e a cor tem de dizer isso sem
   precisar passar o mouse. */
.botao-adiar.ativo {
  color: var(--atencao, #8F6413);
  border-color: var(--atencao, #8F6413);
  background: var(--atencao-fundo, #FAF2E2);
}

/* O FEITO da aba SR (28/09/2026): ligado fica VERDE — "já tratei esta
   peça" é o fim da tarefa, e a cor diz isso de longe. */
.botao-feito.ativo {
  color: var(--bom);
  border-color: var(--bom);
  background: var(--bom-fundo);
}

.carrinho-nota { font-size: 11.5px; color: var(--apagado); line-height: 1.25; }
.carrinho-nota.comprado { color: var(--bom); }
.carrinho-nota strong { font-variant-numeric: tabular-nums; }

/* A lista da tela de Compras: linha de carrinho, não linha de tabela. */
.carrinho-lista { display: flex; flex-direction: column; gap: 1px; background: var(--linha-leve); }

.carrinho-item {
  display: grid;
  grid-template-columns: 54px 1fr auto auto;
  align-items: center; gap: 14px;
  padding: 12px 16px; background: var(--carta);
}
.carrinho-item:hover { background: var(--realce); }

.carrinho-saldo { text-align: center; }
.carrinho-peca .mono { font-family: var(--mono); font-weight: 600; font-size: 13.5px; }
.carrinho-peca .fraco { font-size: 12.5px; margin-top: 1px; }

.carrinho-refs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 5px; font-size: 12px; color: var(--tinta-fraca); }
.carrinho-refs strong { font-variant-numeric: tabular-nums; }

.carrinho-quem { font-size: 11.5px; color: var(--apagado); margin-top: 4px; }
.carrinho-obs {
  font-size: 12px; color: var(--tinta-fraca); margin-top: 5px;
  border-left: 2px solid var(--linha); padding-left: 8px;
}

.carrinho-qtd-caixa { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.carrinho-qtd-caixa label { font-size: 11px; color: var(--apagado); text-transform: uppercase; letter-spacing: .04em; }
.carrinho-qtd { width: 66px; text-align: center; padding: 5px 6px; font-variant-numeric: tabular-nums; }

.carrinho-acoes { display: flex; gap: 6px; }

/* A linha marcada na tela de Estoque. Numa lista de 2.698 peças, o ícone
   sozinho não responde "eu já olhei esta?" — a linha inteira responde. */
table.dados tbody tr.linha-no-carrinho { background: var(--vermelho-fraco); }
table.dados tbody tr.linha-no-carrinho:hover { background: #F7DDE0; }
table.dados tbody tr.linha-no-carrinho td:first-child { box-shadow: inset 3px 0 0 var(--vermelho); }

table.dados tbody tr.linha-comprada { background: var(--bom-fundo); }
table.dados tbody tr.linha-comprada:hover { background: #DCEEE4; }
table.dados tbody tr.linha-comprada td:first-child { box-shadow: inset 3px 0 0 var(--bom); }

@media (max-width: 820px) {
  .carrinho-item { grid-template-columns: 46px 1fr; }
  .carrinho-qtd-caixa, .carrinho-acoes { grid-column: 2; justify-self: start; }
}

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

/* ==========================================================================
   LOJA — a seção que cuida da vitrine em vendas.gpcit.com.br
   ========================================================================== */

.loja-carta { padding: 16px 18px; margin: 18px 0; }

.loja-regras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin: 14px 0 4px;
}
.loja-regra { display: flex; flex-direction: column; gap: 2px; }
.loja-regra strong { font-size: 22px; letter-spacing: -.02em; }
.loja-regra span { font-size: 13px; color: var(--apagado); }

.loja-acao { margin-top: 14px; }

.loja-sinc { font-size: 13px; color: var(--apagado); margin: 12px 0; }

.loja-filtros {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 20px 0 12px;
}
.loja-busca {
  flex: 1;
  min-width: 260px;
  max-width: 460px;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--carta);
  color: var(--tinta);
}

/* A miniatura confirma num relance que a foto do anuncio chegou junto — sem
   ela a conferencia do catalogo vira leitura de titulo, que e bem mais lenta. */
.loja-miniatura {
  width: 44px; height: 44px;
  object-fit: contain;
  background: var(--realce);
  border-radius: 6px;
  display: block;
}
.loja-miniatura.vazia { background: var(--realce); }

.loja-sub { font-size: 12px; color: var(--apagado); margin-top: 2px; }

.loja-paginas {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  padding: 18px 0;
  font-size: 13px;
  color: var(--apagado);
}

/* ==========================================================================
   FILTROS DA TELA DE COTAÇÕES

   Uma linha só de campos, que quebra sozinha em telas estreitas. Os campos
   têm larguras diferentes de propósito: part number é curto e data é fixa,
   enquanto o nome da cotação precisa de espaço para caber uma frase.
   ========================================================================== */

.filtros-cotacao { padding: 16px 18px; margin-bottom: 16px; }

.linha-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}

.linha-filtros .campo { flex: 1 1 150px; min-width: 130px; margin: 0; }
.linha-filtros .campo:first-child { flex: 2 1 220px; }
.linha-filtros .campo input[type="date"] { flex: 0 0 auto; }
.linha-filtros .campo label { font-size: 12px; }

.linha-filtros .acoes-filtro {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

.sub-filtro {
  color: var(--suave, #6B6462);
  font-size: 13px;
  margin: 0 0 12px 2px;
}

@media (max-width: 720px) {
  .linha-filtros .campo,
  .linha-filtros .campo:first-child { flex: 1 1 100%; }
  .linha-filtros .acoes-filtro { flex: 1 1 100%; }
  .linha-filtros .acoes-filtro .botao { flex: 1; }
}

/* ===========================================================================
   O PAINEL DA TELA INICIAL

   Gráfico desenhado à mão em SVG: a política de segurança da página só aceita
   script do próprio servidor, então biblioteca de gráfico de fora não carrega.
   =========================================================================== */

.painel-cartoes {
  display: grid;
  /* QUATRO E QUATRO, e nao "o que couber".

     Com auto-fit a faixa quebrava onde desse: seis cartoes em cima e dois
     embaixo, um vazio do tamanho de meia tela. Sao oito cartoes; quatro por
     linha dao duas linhas iguais, e cada cartao fica largo o bastante para
     R$ 2.973.601,00 caber sem quebrar no meio. */
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (min-width: 900px) {
  .painel-cartoes { grid-template-columns: repeat(4, 1fr); }
}

.painel-cartao {
  background: var(--carta);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
/* Uma faixa de cor no topo, só no cartão que está bem: destaque que não grita. */
.painel-cartao.bom { border-top: 3px solid var(--verde, #15803d); }
/* E o contrário, para o cancelado: destaque porque foi pedido, vermelho
   porque é dinheiro que voltou — mas faixa fina, não cartão inteiro pintado. */
.painel-cartao.ruim { border-top: 3px solid var(--vermelho, #9E2A2B); }
.painel-cartao.ruim .painel-cartao-valor { color: var(--vermelho, #9E2A2B); }

.painel-cartao-titulo {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--apagado);
}
.painel-cartao-valor {
  /* O tamanho acompanha a largura, e o numero NAO quebra: um numero um pouco
     menor e melhor do que um numero partido ao meio. */
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.painel-cartao-nota { font-size: 11.5px; color: var(--tinta-fraca); }

.painel-var { font-size: 12px; font-weight: 600; }
.painel-var.sobe   { color: var(--verde, #15803d); }
.painel-var.desce  { color: var(--vermelho-forte, #b91c1c); }
.painel-var.neutro { color: var(--apagado); font-weight: 400; }

/* --- o gráfico de barras por dia --- */
.grafico { width: 100%; min-width: 700px; height: auto; display: block; }
.g-grade { stroke: var(--linha-leve); stroke-width: 1; }
.g-eixo  { font-size: 10px; fill: var(--apagado); }
/* O valor de cada dia, fixo em cima da barra. Mais escuro que o eixo porque é
   o número que se lê primeiro; tabular para as casas ficarem alinhadas quando
   os rótulos estão deitados um ao lado do outro. */
.g-valor { font-size: 10px; fill: var(--tinta-fraca, #55606e); font-weight: 600;
           font-variant-numeric: tabular-nums; }
.g-barra    { fill: var(--marca, #8a1c1c); opacity: .30; }
.g-barra-ml { fill: var(--marca, #8a1c1c); opacity: .95; }

.legenda { display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--tinta-fraca); }
.legenda i {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin-right: 5px; vertical-align: middle;
  background: var(--marca, #8a1c1c); opacity: .30;
}
.legenda i.ml { opacity: .95; }

/* --- barras horizontais: vendedor e canal --- */
.barras-h { display: flex; flex-direction: column; gap: 7px; padding: 4px 2px 2px; }
.barra-h {
  display: grid;
  grid-template-columns: 130px 1fr 120px;
  gap: 10px;
  align-items: center;
}
.barra-h-nome {
  font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barra-h-trilho {
  background: var(--linha-leve); border-radius: 3px; height: 15px; overflow: hidden;
}
.barra-h-cheia {
  height: 100%; border-radius: 3px;
  background: var(--marca, #8a1c1c); opacity: .32;
}
.barra-h-cheia.ml { opacity: .95; }
.barra-h-valor { text-align: right; font-variant-numeric: tabular-nums; line-height: 1.15; }
.barra-h-valor strong { display: block; font-size: 12.5px; }
.barra-h-valor span   { display: block; font-size: 10.5px; color: var(--apagado); }

/* --- duas colunas que viram uma no celular --- */
.painel-duas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px;
}

/* --- o que pede atenção --- */
.painel-pendencias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  padding: 4px 2px 2px;
}
.painel-pendencia {
  text-align: left;
  background: var(--realce);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font: inherit;
}
.painel-pendencia:hover { border-color: var(--marca, #8a1c1c); }
.painel-pendencia strong { font-size: 21px; font-variant-numeric: tabular-nums; }
.painel-pendencia span   { font-size: 12.5px; }
.painel-pendencia em     { font-size: 11px; color: var(--apagado); font-style: normal; }

/* ==========================================================================
   FINANCEIRO
   ========================================================================== */

.titulo-secao {
  font-size: 15px;
  margin: 26px 0 10px;
  color: var(--suave, #6B6462);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.duas-colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  align-items: start;
}

/* Linha de conta atrasada ou de dia negativo: o vermelho precisa saltar sem
   deixar o texto ilegivel, entao e o fundo que muda, nao a letra. */
tr.linha-alerta > td { background: #FBEAEA; }
tr.linha-alerta:hover > td { background: #F7DEDE; }

.valor-grande { font-size: 20px; letter-spacing: -.02em; }

.carta-cabeca.clicavel { cursor: pointer; }
.carta-cabeca.clicavel:hover { background: #FAF8F7; }

/* A seta que diz que a linha abre. Sem ela, o clique é um segredo: só o
   cursor de mão avisava, e ninguém passa o mouse em tudo para descobrir. */
.seta-abre {
  color: var(--vermelho);
  font-size: 13px;
  line-height: 1;
  width: 12px;
  flex: none;
  user-select: none;
}
.carta-cabeca.clicavel:hover .seta-abre { transform: scale(1.25); }

/* ---------------------------------------------------------- pendencias -- */
/* Conclusao e anexos sao blocos separados dentro da mesma janela porque sao
   dois momentos diferentes: um e o pedido, o outro e a prestacao de contas.
   A linha no topo e o que separa os dois sem precisar de outra janela. */
.bloco-conclusao,
.bloco-anexos {
  border-top: 1px solid var(--linha);
  margin-top: 18px;
  padding-top: 14px;
}

.bloco-conclusao h4,
.bloco-anexos h4 {
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--apagado);
}

.bloco-anexos > p { margin: 0 0 10px; font-size: 12.5px; }
.bloco-anexos input[type="file"] { font-size: 13px; margin-bottom: 12px; }

.anexos-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.anexo-cartao {
  position: relative;
  border: 1px solid var(--linha);
  border-radius: 8px;
  overflow: hidden;
  background: var(--realce);
}

/* Altura fixa e cover: os prints vem em proporcoes diferentes e, sem isso, a
   galeria vira uma escada. Quem precisa ver inteiro clica e abre em outra aba. */
.anexo-cartao img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
  background: var(--carta);
}

.anexo-pdf {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--apagado);
  background: var(--carta);
}

.anexo-pe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  padding: 6px 8px;
  font-size: 11.5px;
}

.anexo-pe a { color: var(--tinta); text-decoration: none; }
.anexo-pe a:hover { text-decoration: underline; }

.anexo-tirar {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  line-height: 1;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  transition: opacity .12s;
}

.anexo-cartao:hover .anexo-tirar { opacity: 1; }
.anexo-tirar:hover { background: var(--erro); }
/* Sem teclado o botao de tirar seria inalcancavel: ele so aparece no hover. */
.anexo-tirar:focus-visible { opacity: 1; }

/* Os passos de um cancelamento, antes de confirmar. O que nao se aplica ao
   pedido fica apagado em vez de sumir: saber que o sistema NAO vai estornar
   (porque nao houve pagamento) e tao importante quanto saber que vai. */
.lista-reversao { margin: 8px 0 14px; padding-left: 20px; line-height: 1.9; }
.lista-reversao li { font-size: 13.5px; }
.lista-reversao li.fraco { color: var(--apagado); }

/* A saida de emergencia do cancelamento. Fica visivelmente separada do resto
   do formulario porque nao e um campo a mais: e a diferenca entre devolver o
   dinheiro e nao devolver. */
.sem-estorno {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #EDD9AE;
  border-left: 3px solid var(--atencao);
  border-radius: 0 8px 8px 0;
  background: var(--atencao-fundo);
  cursor: pointer;
}

.sem-estorno input { margin-top: 3px; flex: none; }
.sem-estorno > span { display: block; }
.sem-estorno strong { display: block; font-size: 13.5px; margin-bottom: 3px; }
.sem-estorno span span { font-size: 12.5px; color: var(--tinta-fraca); line-height: 1.5; }

/* Os tres quadrantes de venda: dona, Mercado Livre e time comercial. Sao
   clicaveis e precisam parecer clicaveis — cartao que abre algo e cartao que
   so mostra numero nao podem ter a mesma cara. */
.quadrantes-venda .total-bloco.clicavel {
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.quadrantes-venda .total-bloco.clicavel:hover {
  border-color: var(--vermelho);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  transform: translateY(-1px);
}

.quadrantes-venda .total-bloco.clicavel:active { transform: none; }
.quadrantes-venda .total-nota + .total-nota { margin-top: 1px; }

.total-nota { display: block; font-size: 11.5px; color: var(--suave, #6B6462);
              font-style: normal; margin-top: 2px; }

/* --- registrar compra já feita --- */
.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.jc-vendas {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 180px; overflow-y: auto;
  border: 1px solid var(--linha); border-radius: 6px; padding: 8px;
}
.jc-venda { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; cursor: pointer; }
.jc-venda:hover { background: var(--realce); }

/* Uma peça que já foi comprada continua na lista até chegar, mas mais fraca:
   ela não é mais decisão, é espera. */
.espera-linha { font-size: 11.5px; line-height: 1.35; }

/* ===========================================================================
   O DRE
   A cascata precisa ler como um documento contábil: o total salta, o detalhe
   recua, e o sinal fica numa coluna própria para os (=) e (−) se alinharem.
   =========================================================================== */
table.dados.dre td, table.dados.dre th { padding: 7px 10px; }
table.dados.dre tr.dre-total td {
  border-top: 1px solid var(--linha);
  background: var(--realce);
  font-size: 14px;
}
table.dados.dre tr.dre-total td:first-child { letter-spacing: .01em; }
.dre-sinal {
  display: inline-block; width: 26px; color: var(--apagado);
  font-variant-numeric: tabular-nums;
}
.dre-pct {
  width: 70px; text-align: right; font-size: 11.5px;
  color: var(--apagado); font-variant-numeric: tabular-nums;
}
.dre-valor { font-variant-numeric: tabular-nums; font-size: 13.5px; }
table.dados.dre tr.clicavel { cursor: pointer; }
table.dados.dre tr.clicavel:hover { background: var(--realce); }
table.dados.dre tr.dre-filha td { font-size: 12px; padding-top: 3px; padding-bottom: 3px; }
.ruim { color: var(--vermelho-forte, #b91c1c); }
.bom  { color: var(--verde, #15803d); }

/* --------------------------------------------- garantias (RMA) -- */
/* A janela de um chamado. O texto do cliente — defeito e tentativa de reparo —
   fica em bloco próprio, com a quebra de linha dele preservada: é o relato de
   quem está com a peça parada, e reformatar isso perde informação. */
.rma-topo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 14px; font-size: 12.5px;
}
.rma-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px 18px;
}
.rma-par { display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; }
.rma-par > span { font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--apagado); }

/* O gráfico de chamados por mês. Barras simples, sem biblioteca: o que
   importa é a forma da curva, não a precisão do pixel. */
.rma-meses {
  display: flex; align-items: flex-end; gap: 6px;
  height: 150px; padding: 8px 2px 0; overflow-x: auto;
}
.rma-mes {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 3px; min-width: 38px; height: 100%; flex: 1 1 38px;
}
.rma-mes-n { font-size: 11px; color: var(--tinta-fraca); font-variant-numeric: tabular-nums; }
.rma-mes-barra {
  width: 100%; background: var(--vermelho-fraco, #E9C2BE);
  border-top: 3px solid var(--vermelho, #9E2A2B);
  border-radius: 3px 3px 0 0; min-height: 4px;
}
.rma-mes-rotulo { font-size: 10.5px; color: var(--apagado); white-space: nowrap; }

/* Com quem está o chamado. Fica no alto, antes dos dados do cliente: numa
   fila de garantia, a primeira pergunta é "quem está cuidando disto?". */
.rma-tecnico {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 12px 0 4px; padding: 10px 12px;
  background: var(--realce); border-radius: 8px; font-size: 13.5px;
}
.rma-tecnico-rotulo {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--apagado);
}

.rma-titulo {
  margin: 20px 0 6px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--apagado);
}
.rma-texto {
  white-space: pre-wrap; line-height: 1.55; font-size: 14px;
  background: var(--realce); border-radius: 8px; padding: 11px 13px;
}

.rma-anexos { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rma-pn { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rma-pn label { font-size: 13.5px; }
.rma-pn .ajuda { flex-basis: 100%; font-size: 12.5px; color: var(--apagado); }

.rma-historia {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12.5px; line-height: 1.5;
}
.rma-historia strong { text-transform: uppercase; font-size: 11px;
  letter-spacing: .05em; color: var(--tinta-fraca); }
.rma-historia em { font-style: normal; }

/* ------------------------------- criar a venda no Gestão Click -- */
/* Três blocos com peso visual diferente: o que impede é vermelho e vem
   primeiro; o que só merece conferência é âmbar; o que está pronto é cinza e
   fica por último, porque ninguém precisa ler o que já deu certo. */
.vgc-bloco {
  border: 1px solid var(--linha); border-left-width: 3px;
  border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
}
.vgc-bloco.impede { border-left-color: var(--erro, #9E2A2B); background: var(--erro-fundo, #FBEAEA); }
.vgc-bloco.avisa  { border-left-color: var(--atencao); background: var(--atencao-fundo); }
.vgc-bloco.pronto { border-left-color: var(--linha); }
.vgc-bloco > strong { display: block; margin-bottom: 6px; font-size: 13px; }

.vgc-item {
  display: grid; grid-template-columns: 150px 1fr; gap: 4px 10px;
  font-size: 12.5px; line-height: 1.5; padding: 4px 0;
  border-top: 1px solid rgba(0,0,0,.06);
}
.vgc-item:first-of-type { border-top: 0; }
.vgc-o { font-weight: 600; }
.vgc-item em { grid-column: 2; font-style: normal; color: var(--apagado); font-size: 12px; }

/* --------------------------------------------- faturado × a faturar -- */
/* Dois painéis lado a lado, e uma barra em cima mostrando a divisão. O verde
   é o que já virou nota; o âmbar é trabalho a fazer, não dinheiro perdido —
   por isso âmbar e não vermelho. */
.fat-trilho {
  height: 12px; border-radius: 6px; background: var(--atencao-fundo);
  overflow: hidden; margin: 6px 0 16px;
}
.fat-feito { height: 100%; background: var(--bom, #15803d); border-radius: 6px; }

.fat-dois { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .fat-dois { grid-template-columns: 1fr; } }

.fat-lado {
  border: 1px solid var(--linha); border-radius: 10px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.fat-lado.feito    { border-top: 3px solid var(--bom, #15803d); }
.fat-lado.pendente { border-top: 3px solid var(--atencao); }

.fat-titulo {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--apagado);
}
.fat-valor { font-size: 25px; letter-spacing: -0.02em; }
.fat-lado.feito    .fat-valor { color: var(--bom, #15803d); }
.fat-lado.pendente .fat-valor { color: var(--atencao); }
.fat-nota { font-size: 12.5px; color: var(--tinta-fraca); }

/* O que trava cada venda que falta faturar: "aguardando compra" e "separar
   pedido" pedem coisas diferentes, e a tela tem que dizer qual é qual. */
.fat-situacoes {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linha);
  display: flex; flex-direction: column; gap: 5px; font-size: 12.5px;
}
.fat-linha { display: flex; justify-content: space-between; gap: 10px; }
.fat-linha em { font-style: normal; color: var(--apagado); }

/* ---------------------------------------------------------- metas do mês -- */
/* Três barras no painel inicial: global, Mercado Livre e time comercial.
   A cor só muda quando há o que dizer — verde quando a meta já foi batida,
   âmbar quando o ritmo atual não chega lá. No resto, cinza: barra colorida
   o tempo todo não informa nada. */
.metas-lista { display: flex; flex-direction: column; gap: 18px; margin-top: 4px; }

.meta-linha { display: flex; flex-direction: column; gap: 6px; }
.meta-topo {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; font-size: 14px;
}
.meta-topo em { font-style: normal; color: var(--apagado); }

.meta-trilho {
  height: 10px; border-radius: 5px; background: var(--realce);
  overflow: hidden;
}
.meta-cheia {
  height: 100%; border-radius: 5px; background: var(--apagado);
  transition: width .3s;
}
.meta-linha.batida   .meta-cheia { background: var(--bom, #15803d); }
.meta-linha.atrasada .meta-cheia { background: var(--atencao); }

.meta-pe {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--tinta-fraca);
}

/* A linha de quem ficou fora da conta, e a do canal: contexto embaixo da
   barra, discreto, mas sempre presente — número ajustado sem explicação é
   número que ninguém confere. */
.meta-fora {
  margin-top: 2px; padding: 8px 10px; font-size: 12.5px;
  background: var(--realce); border-radius: 8px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.meta-fora .selo { margin: 0; }
.meta-fora > div { flex-basis: 100%; }

/* A TRAVA DA EMISSÃO (06/10/2026): outra pessoa está emitindo esta venda. */
.travado { pointer-events: none; opacity: .6; cursor: not-allowed; }

/* A BARRA DE ROLAGEM LATERAL SEMPRE À VISTA (06/10/2026): ver base.js. */
.barra-lateral-fixa {
  position: fixed; bottom: 0; z-index: 60; display: none;
  height: 16px; overflow-x: scroll; overflow-y: hidden;
  background: rgba(255, 255, 255, 0.92); border-top: 1px solid var(--linha);
}
.barra-lateral-fixa > div { height: 1px; }
/* A barra de verdade das tabelas largas, mais grossa e fácil de pegar. */
.rolagem::-webkit-scrollbar, .rolagem-alta::-webkit-scrollbar, .barra-lateral-fixa::-webkit-scrollbar { height: 14px; }
.rolagem::-webkit-scrollbar-thumb, .rolagem-alta::-webkit-scrollbar-thumb, .barra-lateral-fixa::-webkit-scrollbar-thumb {
  background: #b9b9b9; border-radius: 7px; border: 3px solid transparent; background-clip: padding-box;
}
.rolagem::-webkit-scrollbar-thumb:hover, .barra-lateral-fixa::-webkit-scrollbar-thumb:hover { background-color: #8d8d8d; }

/* A ABA ATIVA COM O MOUSE EM CIMA (07/10/2026): o hover pintava o texto de
   vermelho sobre o fundo vermelho — ilegível. A ativa mantém o texto branco. */
.chip-filtro.ativo:hover:not(:disabled) { color: #fff; }

/* ======================= CHAT INTERNO (17/10/2026) ======================= */
.chat { display: grid; grid-template-columns: 330px 1fr; gap: 0; height: calc(100vh - 190px); min-height: 460px;
  background: var(--carta); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.chat-lado { display: flex; flex-direction: column; border-right: 1px solid var(--linha); min-height: 0; }
.chat-acoes { display: flex; gap: 6px; padding: 10px; }
.chat-abas { display: flex; gap: 4px; padding: 0 10px; }
.chat-aba { flex: 1; border: 1px solid var(--linha); background: var(--carta); padding: 5px 6px; font-size: 12.5px; border-radius: var(--raio); cursor: pointer; color: var(--tinta-fraca); }
.chat-aba.ativa { border-color: var(--marca); color: var(--marca); font-weight: 600; background: var(--vermelho-fraco); }
.chat-busca { margin: 8px 10px; }
.chat-lista-itens { overflow-y: auto; flex: 1; min-height: 0; }
.chat-item { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--linha-leve); background: none;
  padding: 9px 12px; cursor: pointer; color: var(--tinta); font: inherit; }
.chat-item:hover { background: var(--realce); }
.chat-item.ativo { background: var(--vermelho-fraco); }
.chat-item-topo { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.chat-item-topo strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-topo .fraco { font-size: 11.5px; flex: none; }
.chat-item-previa { display: flex; justify-content: space-between; gap: 6px; font-size: 12.5px; color: var(--apagado); margin-top: 2px; }
.chat-item-previa > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item.nova .chat-item-previa > span:first-child { color: var(--tinta); font-weight: 600; }
.chat-item-clientes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chat-item-clientes .selo { font-size: 10.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-contador { background: var(--marca); color: #fff; border-radius: 10px; font-size: 11px; font-weight: 700; padding: 0 6px;
  line-height: 18px; min-width: 18px; text-align: center; flex: none; margin-left: auto; }
.menu-lateral button .chat-contador { margin-left: auto; }
.chat-painel { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat-vazio { color: var(--apagado); padding: 30px 16px; text-align: center; }
.chat-cabeca { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--linha); }
.chat-membros { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-voltar { display: none; }
.chat-nota { border-bottom: 1px solid var(--linha); background: #FFFBEA; max-height: 38%; overflow-y: auto; flex: none; }
.chat-nota-titulo { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; color: var(--tinta); }
.chat-nota-corpo { padding: 0 14px 10px; font-size: 13px; }
.chat-nota-geral { margin: 0 0 8px; }
.chat-assunto { padding: 6px 0; border-top: 1px dashed #E8DDB0; }
.chat-assunto-topo { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 2px; }
.chat-nota-pe { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px; font-size: 11.5px; }
.chat-mensagens { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; background: var(--fundo); min-height: 0; }
.chat-msg { max-width: 72%; align-self: flex-start; background: var(--carta); border: 1px solid var(--linha); border-radius: 10px; padding: 6px 10px; }
.chat-msg.minha { align-self: flex-end; background: var(--vermelho-fraco); border-color: #F0CDD2; }
.chat-msg.sistema { align-self: center; background: none; border: 0; color: var(--apagado); font-size: 12px; text-align: center; max-width: 90%; }
.chat-autor { font-size: 12px; font-weight: 700; color: var(--marca); margin-bottom: 2px; }
.chat-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-hora { font-size: 10.5px; color: var(--apagado); text-align: right; margin-top: 2px; }
.chat-visto { font-size: 10.5px; color: var(--bom); text-align: right; }
.chat-imagem { max-width: 260px; max-height: 220px; border-radius: 6px; display: block; margin-top: 4px; }
.chat-anexo { display: inline-block; margin-top: 4px; }
.chat-antigas { align-self: center; }
.chat-escrever { display: flex; gap: 6px; align-items: flex-end; padding: 10px; border-top: 1px solid var(--linha); }
.chat-escrever textarea { flex: 1; resize: vertical; min-height: 40px; max-height: 200px; font: inherit; }
.chat-so-leitura { padding: 10px 14px; border-top: 1px solid var(--linha); background: var(--atencao-fundo); color: var(--atencao); font-size: 13px; }
.chat-aviso-admin { font-size: 12px; color: var(--apagado); margin-top: 2px; }
.chat-pessoas { display: grid; gap: 2px; max-height: 50vh; overflow-y: auto; }
.chat-pessoa { display: flex; align-items: center; gap: 6px; text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: var(--raio); font: inherit; color: var(--tinta); cursor: pointer; }
.chat-pessoa:hover { background: var(--realce); }
.chat-toast { position: fixed; right: 18px; bottom: 88px; z-index: 300; max-width: 340px; text-align: left; background: var(--carta);
  border: 1px solid var(--linha); border-left: 4px solid var(--marca); border-radius: var(--raio); box-shadow: 0 6px 24px rgba(0,0,0,.18);
  padding: 10px 14px; cursor: pointer; font: inherit; color: var(--tinta); display: grid; gap: 3px; }
@media (max-width: 800px) {
  .chat { grid-template-columns: 1fr; height: calc(100vh - 150px); }
  .chat.com-conversa .chat-lado { display: none; }
  .chat:not(.com-conversa) .chat-painel { display: none; }
  .chat-voltar { display: inline-block; }
  .chat-msg { max-width: 88%; }
}

/* Botão flutuante do chat (19/10/2026): pisca enquanto houver mensagem não lida. */
.chat-flutuante { position: fixed; right: 18px; bottom: 18px; z-index: 290; width: 58px; height: 58px; border-radius: 50%;
  border: 0; background: var(--marca); color: #fff; font-size: 26px; line-height: 58px; text-align: center; padding: 0; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.25); transition: transform .15s; }
.chat-flutuante:hover { transform: scale(1.07); }
.chat-flutuante[hidden] { display: none; }
.chat-flutuante-contador { position: absolute; top: -4px; right: -4px; background: #fff; color: var(--marca); border: 2px solid var(--marca);
  border-radius: 12px; font-size: 12px; font-weight: 800; line-height: 18px; min-width: 22px; padding: 0 5px; }
.chat-flutuante.piscando { animation: chat-pisca 1s ease-in-out infinite; }
@keyframes chat-pisca {
  0%, 100% { background: var(--marca); box-shadow: 0 4px 16px rgba(0,0,0,.25), 0 0 0 0 rgba(191,30,45,.55); }
  50%      { background: #F59E0B; box-shadow: 0 4px 16px rgba(0,0,0,.25), 0 0 0 12px rgba(191,30,45,0); }
}
@media (max-width: 800px) { .chat-flutuante { right: 12px; bottom: 12px; width: 52px; height: 52px; line-height: 52px; font-size: 23px; } .chat-toast { bottom: 76px; right: 12px; } }
/* Som e notificação do chat (19/10/2026). */
.chat-avisos-pref { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 4px 0 6px; }

/* ======================= ANÁLISE › SITE (19/10/2026) ======================= */
.site-filtros { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.site-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 12px; }
.site-cartao { background: var(--carta); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: 12px 14px; }
.site-cartao-rotulo { font-size: 12.5px; color: var(--tinta-fraca); }
.site-cartao-valor { font-size: 26px; font-weight: 700; margin: 2px 0; font-variant-numeric: tabular-nums; }
.site-cartao-nota { font-size: 12px; }
.site-barras { display: flex; gap: 3px; align-items: flex-end; overflow-x: auto; padding-bottom: 4px; }
.site-barra-col { flex: 1 0 22px; max-width: 46px; display: flex; flex-direction: column; align-items: center; }
.site-barra-valor { font-size: 10.5px; color: var(--apagado); }
.site-barra-trilho { height: 150px; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.site-barra { width: 60%; background: #9AA3AE; border-radius: 3px 3px 0 0; }
.site-barra.zap { width: 30%; background: #25D366; }
.site-barra-rotulo { font-size: 10.5px; color: var(--apagado); margin-top: 3px; white-space: nowrap; }
.site-mini { height: 3px; background: var(--linha-leve); border-radius: 2px; margin-top: 4px; }
.site-mini > div { height: 3px; background: var(--marca); border-radius: 2px; }
.site-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 12px; }
@media (max-width: 800px) { .site-grade { grid-template-columns: 1fr; } }

/* Frase na descrição em massa (19/10/2026). */
.mldesc-exemplo { border-top: 1px solid var(--linha-leve); padding: 8px 0; }
.mldesc-texto { white-space: pre-wrap; font: 12.5px/1.45 var(--fonte); background: var(--realce); border: 1px solid var(--linha); border-radius: var(--raio); padding: 8px 10px; margin: 6px 0 0; max-height: 180px; overflow: auto; }
.mldesc-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.mldesc-filtros .mldesc-sel { width: auto; min-width: 0; flex: 0 0 auto; }
.mldesc-filtros .mldesc-busca { flex: 1 1 320px; min-width: 220px; width: auto; }

/* Abrir RMA pela venda do ML (19/10/2026). */
.rmaml fieldset { border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px 12px; margin: 0 0 12px; }
.rmaml legend { font-weight: 700; padding: 0 6px; }
.rmaml-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.rmaml-campo { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.rmaml-campo small { font-size: 11.5px; }

/* Botões do rodapé das janelas quebram linha em vez de cortar (19/10/2026). */
.janela-pe { flex-wrap: wrap; }
/* Os e-mails do RMA (19/10/2026). */
.rma-emails { border: 1px solid var(--linha); border-left: 4px solid #2563eb; border-radius: var(--raio); padding: 8px 12px; margin: 8px 0 12px; background: var(--realce); }
.rma-emails-titulo { font-weight: 700; margin-bottom: 6px; }
.rma-email-linha { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; padding: 2px 0; flex-wrap: wrap; }
/* Meus RMAs (19/10/2026). */
.meusrma-alerta { border-left: 4px solid #0f766e; background: var(--realce); border-radius: var(--raio); padding: 8px 10px; margin-bottom: 6px; }
/* Revisar pareamento (19/10/2026). */
.parrev-cand { display: flex; gap: 10px; align-items: center; border: 1px solid var(--linha); border-radius: var(--raio); padding: 8px 10px; margin-top: 6px; }
.parrev-cand:hover { background: var(--realce); }
/* Histórico do furo (19/10/2026). */
.furo-passo { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linha-leve); }


/* MENSAGEM DE VOZ NO CHAT (22/10/2026, pedido dela). */

/* O `hidden` PRECISA GANHAR AQUI.
   `.botao` declara `display: inline-flex`, e uma classe vence o
   `display: none` que o navegador dá a [hidden] — os botões de parar e
   cancelar apareceriam o tempo todo, mesmo "escondidos". Esta casa já perdeu
   tempo com isso em outra tela; a regra é escrita para o compositor do chat e
   não para a folha inteira, porque [hidden] global muda vinte telas de uma
   vez. */
.chat-escrever [hidden] { display: none !important; }
.chat-voz { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.chat-voz audio { max-width: 100%; width: 240px; height: 34px; }
/* O relógio da gravação. Pisca porque microfone aberto tem de ser visível:
   quem está gravando precisa saber que ainda está. */
.chat-gravando {
  font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap;
  color: var(--erro, #dc2626); animation: chat-pulsa 1.1s ease-in-out infinite;
}
@keyframes chat-pulsa { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .chat-gravando { animation: none; } }


/* A EMPRESA NA TELA DE NCM (22/10/2026, pedido dela: separar por empresa e,
   dentro dela, entrada de saída). É o cabeçalho que abre e fecha o bloco. */
.cabeca-empresa-ncm {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  border: 0; border-top: 1px solid var(--linha); background: none;
  padding: 10px 8px; font: inherit; font-size: 15px; font-weight: 600;
  color: var(--tinta); cursor: pointer; border-radius: var(--raio);
}
.cabeca-empresa-ncm:hover { background: var(--realce); }