/* Entrada da plataforma: cadastro da empresa, login e recuperação de senha.
   Não carrega o estilo do ERP de propósito — aquele monta a moldura de menu lateral e
   brigaria com esta tela, que é uma página só, sem navegação. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
  Arial, sans-serif; color: var(--texto); background: #1d2340; -webkit-font-smoothing: antialiased; }
#raiz { min-height: 100%; }

/* As cores da marca não mudam de tema: vermelho é vermelho no claro e no escuro. O que
   muda são as superfícies — fundo, papel, borda e texto —, e é por isso que elas viraram
   token. O tema escuro só troca esses seis valores. */
/* O laranja não é cor de marca: é cor de recado. Ele existe só para "isto está esperando
   você", e por isso não aparece em mais lugar nenhum — se virasse decoração, deixaria de
   chamar atenção justamente onde precisa. */
:root { --vermelho: #c8252c; --azul: #0372a3; --roxo: #313b69; --fraco: #6b7280;
  --laranja: #ea580c;
  --fundo: #eef0f4; --superficie: #fff; --realce: #f3f4f6;
  --borda: #e5e7eb; --borda-forte: #d4d4d8;
  --texto: #111827; --texto-medio: #3f3f46; --texto-fraco: #a1a1aa; }

[data-tema="escuro"] {
  --fundo: #12151f; --superficie: #1b1f2e; --realce: #232838;
  --borda: #2b3145; --borda-forte: #3a4159;
  --texto: #e8eaf0; --texto-medio: #b9bECB; --fraco: #9aa1b3;
  /* O fraco mais fraco ainda tem de ser lido: #7c8397 dava 4,3:1 no papel e menos no
     realce, e é nele que estão o cabeçalho das tabelas e a linha de baixo do sino. */
  --texto-fraco: #8a91a5;
  /* O azul e o roxo do claro somem no escuro; aqui eles clareiam o suficiente para
     continuarem legíveis sem deixarem de ser a cor da marca. */
  --azul: #3aa8dc; --roxo: #7d8ac4; --laranja: #fb923c;
  /* O vermelho da marca como letra sobre o papel escuro dava 2,9:1 — o total do pedido, o
     vencido e o "sem saldo" se apagavam. Aqui ele clareia como o azul; onde o vermelho é
     FUNDO de letra branca, o tom original volta fixo (ver os ajustes do tema escuro). */
  --vermelho: #f26b70;
  /* Sem isto o navegador desenha os controles nativos para papel claro: o ícone do
     calendário do campo de data sai preto sobre o campo escuro, e botão sem cor própria
     herda letra preta. */
  color-scheme: dark; }
[data-tema="escuro"] body { background: var(--fundo); }
[data-tema="escuro"] .principal { background: var(--fundo); }
[data-tema="escuro"] table.grade th { color: var(--texto-fraco); }
[data-tema="escuro"] .acao.claro { background: var(--realce); color: var(--texto); }
[data-tema="escuro"] input, [data-tema="escuro"] select, [data-tema="escuro"] textarea {
  background: var(--realce); color: var(--texto); border-color: var(--borda-forte); }
[data-tema="escuro"] .bolinha, [data-tema="escuro"] .menu-linha,
[data-tema="escuro"] .cartao-interno, [data-tema="escuro"] .indicador {
  background: var(--superficie); }

/* O botão que troca o tema, no alto à direita. */
.trocar-tema { background: none; border: 1px solid var(--borda); border-radius: 8px;
  width: 32px; height: 32px; cursor: pointer; color: var(--texto-medio); font-size: 15px;
  line-height: 1; }
.trocar-tema:hover { background: var(--realce); }

.palco { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 32px 16px; background: linear-gradient(160deg, #313b69 0%, #1d2340 100%); }
.cartao-palco { background: var(--superficie); border-radius: 14px; width: 100%; max-width: 460px;
  padding: 32px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.cartao-palco.largo { max-width: 720px; }
.marca { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.marca img { width: 42px; height: 42px; object-fit: contain; }
.marca b { font-size: 24px; letter-spacing: .06em; color: var(--roxo); }
.marca-sub { font-size: 12px; color: var(--fraco); text-transform: uppercase;
  letter-spacing: .12em; margin-bottom: 22px; }

.passos { display: flex; gap: 8px; margin-bottom: 20px; }
.passos div { flex: 1; height: 3px; border-radius: 2px; background: var(--borda); }
.passos div.feito { background: var(--azul); }
.passos div.agora { background: var(--vermelho); }

.grupo { margin-bottom: 18px; }
.grupo > h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--fraco); margin: 0 0 10px; font-weight: 700; }
.linha { display: flex; gap: 12px; flex-wrap: wrap; }
.linha > .campo { flex: 1; min-width: 150px; }
.campo label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.campo input, .campo select, .campo textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--borda-forte);
  border-radius: 7px; font-size: 14px; font-family: inherit; }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--azul); outline-offset: -1px; border-color: transparent; }

/* Campo de texto que abre conforme se escreve. A altura quem manda e' o JavaScript; aqui
   fica so' o que ele nao deve ter: rolagem propria, que esconderia o que foi escrito, e
   alca de arrastar, que briga com o crescimento automatico. */
.campo textarea.cresce {
  min-height: 58px; resize: none; overflow: hidden; line-height: 1.45;
}
/* Dinheiro se digita e se le alinhado a direita, como em papel de conta. */
.campo-moeda, input.campo-moeda { text-align: right; font-variant-numeric: tabular-nums; }
.dica { font-size: 11px; color: var(--fraco); margin-top: 3px; display: block; }

.socio { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 8px; }
.socio .campo { flex: 1; }
.socio button { padding: 9px 12px; }

/* O botao de acao usa o AZUL do logo, e nao o vermelho. Decisao do Richard em 03/09/2026.
   O vermelho fica para o que e' aviso e para o que apaga — botao de "+ Armazem" em
   vermelho pede a mesma atencao que "Excluir pedido", e quando tudo grita nada grita.
   O tom escuro do hover vem da propria paleta (`--azul-escuro` do brandbook). */
.acao { width: 100%; padding: 12px; font-size: 15px; font-weight: 600; border: 0;
  border-radius: 8px; background: var(--azul); color: #fff; cursor: pointer; }
.acao:hover { background: #025a80; }
.acao:disabled { opacity: .6; cursor: default; }
.acao.claro { background: var(--realce); color: var(--texto); }
.acao.claro:hover { background: var(--borda); }
.elo { background: none; border: 0; color: var(--azul); cursor: pointer; font-size: 13px;
  padding: 8px; width: 100%; font-family: inherit; }
.recado-erro { background: #fdf2f2; border: 1px solid #f5c2c7; color: #8a1c22;
  padding: 10px 12px; border-radius: 7px; font-size: 13px; margin-top: 14px; display: none; }
.recado-erro.visivel { display: block; }
form .recado-erro.visivel { margin-bottom: 12px; }
.recado-bom { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af;
  padding: 10px 12px; border-radius: 7px; font-size: 13px; margin-top: 14px; }
.rodape-marca { text-align: center; margin-top: 22px; font-size: 12px; color: rgba(255,255,255,.7); }
.rodape-marca a { color: rgba(255,255,255,.9); }

/* ---- vitrine de planos, na entrada
   Ela é vista por quem ainda não é cliente: tem de explicar o produto e terminar num
   caminho de conversa, não num botão de compra. Por isso o preço não aparece e os dois
   contatos ficam grandes no pé. */
.vitrine-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; }
.plano-vitrine { border: 1px solid var(--borda-forte); border-radius: 10px; padding: 14px;
  display: flex; flex-direction: column; background: var(--superficie); }
.plano-vitrine b { font-size: 17px; color: var(--roxo); }
.plano-vitrine .resumo { font-size: 12px; color: var(--fraco); margin-bottom: 10px; }
.plano-vitrine ul { margin: 0 0 12px; padding-left: 16px; font-size: 12.5px;
  color: var(--texto); line-height: 1.5; flex: 1; }
.plano-vitrine li { margin-bottom: 4px; }
.plano-vitrine .limites { font-size: 11px; color: var(--fraco); border-top: 1px solid
  var(--borda); padding-top: 8px; }
.plano-vitrine .preco { margin-top: 6px; font-size: 13px; font-weight: 700;
  color: var(--vermelho); text-transform: uppercase; letter-spacing: .04em; }

.fale-conosco { margin-top: 18px; padding: 16px; border-radius: 10px;
  background: var(--realce); border: 1px solid var(--borda); text-align: center; }
.fale-conosco b { display: block; font-size: 15px; margin-bottom: 12px; color: var(--texto); }
.fale-conosco .caminhos { display: flex; gap: 10px; justify-content: center;
  flex-wrap: wrap; }
/* O e-mail usa o fundo apagado e sumiria dentro do bloco, que também é apagado. */
.fale-conosco .acao.claro { border: 1px solid var(--borda-forte); }

/* Lista de empresas na tela do dono da plataforma */
.empresa-linha { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--borda); }
.empresa-linha:last-child { border-bottom: 0; }
.empresa-linha .sub { font-size: 12px; color: var(--fraco); margin-top: 2px; }
.empresa-acoes { display: flex; gap: 8px; flex-shrink: 0; }

/* Escolha do plano no cadastro */
.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.plano { border: 1px solid var(--borda-forte); border-radius: 9px; padding: 12px; cursor: pointer;
  display: block; transition: border-color .12s, background .12s; }
.plano:hover { border-color: var(--azul); }
.plano.escolhido { border-color: var(--vermelho); background: #fdf5f5; }
.plano input { position: absolute; opacity: 0; }
.plano b { display: block; font-size: 15px; margin-bottom: 2px; }
.plano .preco { display: block; font-size: 13px; color: var(--vermelho); font-weight: 600;
  margin-bottom: 6px; }
.plano .limite { display: block; font-size: 11px; color: var(--fraco); }

.selo { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; background: #e0f2fe;
  color: #075985; padding: 2px 6px; border-radius: 4px; font-weight: 700; }
.selo.apagado { background: #fee2e2; color: #991b1b; }

/* Janela de correção */
.fundo-modal { position: fixed; inset: 0; background: rgba(17, 24, 39, .55); z-index: 60;
  display: flex; align-items: flex-start; justify-content: center; padding: 32px 16px;
  overflow-y: auto; }
.modal { background: var(--superficie); border-radius: 12px; width: 100%; max-width: 460px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.modal.largo { max-width: 720px; }
.modal header { display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  border-bottom: 1px solid var(--borda); }
.modal header h2 { margin: 0; font-size: 16px; flex: 1; }
.modal .fechar { background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer;
  color: var(--fraco); padding: 0 4px; }
.modal .corpo-modal { padding: 20px; }
.modal .erro-modal { color: #8a1c22; font-size: 13px; padding: 0 20px; }
.modal .erro-modal:empty { display: none; }
.modal footer { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px;
  border-top: 1px solid var(--borda); }

/* Marca da empresa e logo do software */
.marca-empresa img { width: 46px; height: 46px; object-fit: contain; }
.marca-empresa b { font-size: 20px; color: var(--texto); letter-spacing: 0; }
.rodape-marca .selo-software { width: 16px; height: 16px; object-fit: contain;
  vertical-align: -3px; margin-right: 6px; opacity: .85; }

.area-logo { display: flex; gap: 14px; align-items: flex-start; }
.prova-logo { width: 92px; height: 92px; border: 1px dashed var(--borda-forte); border-radius: 9px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--superficie); overflow: hidden; }
.prova-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.prova-logo span { font-size: 11px; color: var(--fraco); }
.area-logo input[type=file] { font-size: 12px; max-width: 100%; }

/* Faixa de visita de suporte — precisa incomodar um pouco, para ninguém esquecer que
   está dentro da área de outra empresa. */
.faixa-visita { background: #fef3c7; border: 1px solid #fcd34d; color: #78350f;
  padding: 9px 12px; border-radius: 8px; font-size: 12px; margin-bottom: 16px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.faixa-visita button { background: none; border: 0; color: #92400e; text-decoration: underline;
  cursor: pointer; font-size: 12px; font-family: inherit; padding: 0; }
/* Na própria empresa a faixa é informativa, não um alerta. */
.faixa-visita.propria { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.faixa-visita.propria button { color: #1e40af; }

/* Mapa do que existe na área. Dizer o que falta é melhor do que deixar a tela parecer
   quebrada — quem não sabe que falta acha que não carregou. */
.mapa-area { background: var(--realce); border: 1px solid var(--borda); border-radius: 9px;
  padding: 14px 16px; margin-bottom: 20px; }
.mapa-area h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--fraco); margin: 0 0 10px; font-weight: 700; }
.mapa-area ul { margin: 0; padding: 0; list-style: none; }
.mapa-area li { font-size: 13px; color: var(--texto-fraco); padding: 3px 0 3px 22px; position: relative; }
.mapa-area li::before { content: '○'; position: absolute; left: 4px; }
.mapa-area li.pronto { color: var(--texto); }
.mapa-area li.pronto::before { content: '●'; color: var(--azul); }
.mapa-area small { display: block; margin-top: 10px; font-size: 11px; color: var(--fraco); }

/* Abas da área da empresa */
.abas { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--borda);
  margin: 0 0 18px; }
.abas button { background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 9px 12px; font-size: 13px; font-weight: 600; color: var(--fraco);
  cursor: pointer; font-family: inherit; }
.abas button:hover { color: var(--texto); }
.abas button.atual { color: var(--vermelho); border-bottom-color: var(--vermelho); }

/* Filtros e tabelas */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; align-items: flex-end; }
.filtros .campo { min-width: 130px; }
.filtros .campo.largo { flex: 1; min-width: 210px; }
.rolagem { overflow-x: auto; }
table.grade { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grade th { text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--fraco); padding: 6px 8px; border-bottom: 1px solid var(--borda);
  white-space: nowrap; }
table.grade td { padding: 8px; border-bottom: 1px solid var(--realce); vertical-align: top; }
table.grade th.num, table.grade td.num { text-align: right; }
table.grade .sub { font-size: 11px; color: var(--fraco); margin-top: 2px; }
table.grade td.alerta { color: var(--vermelho); font-weight: 700; }
/* A escala do inventário (Richard, 24/09/2026): código e saldo em letra maior, cabeçalho
   por categoria, e um traço forte quando o código muda dentro da categoria. */
table.grade.escala td.cod { font-size: 16px; font-weight: 700; white-space: nowrap; letter-spacing: .2px; }
table.grade.escala td.item { color: var(--fraco); font-size: 12px; }
table.grade.escala td.saldo { font-size: 18px; font-weight: 700; }
table.grade.escala td.apagado { color: var(--texto-fraco); }
table.grade.escala tr.grupo td { background: var(--realce); color: var(--texto-medio); font-weight: 700;
  font-size: 11px; letter-spacing: .6px; text-transform: uppercase; padding: 6px 8px; }
table.grade.escala tr.troca-base td { border-top: 2px solid var(--borda-forte); }
.acao.aba-vermelha.claro { color: var(--vermelho); border-color: var(--vermelho); }
.acao.aba-vermelha:not(.claro) { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
table.grade td.acoes { white-space: nowrap; text-align: right; }
table.grade tr[data-cliente]:hover td { background: var(--realce); }
/* Nome que leva ao cadastro: sem cara de link no meio da lista, mas clicável de verdade. */
.abre-cadastro { cursor: pointer; }
.abre-cadastro:hover { text-decoration: underline; color: var(--azul); }

/* A chamada com número e seta: o atalho para a lista inteira, quando a lista não cabe na
   coluna. O número é o que se lê de longe; a seta diz que há mais atrás dele. */
.chamada-numero { display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--realce); border: 1px solid var(--borda); border-radius: 9px;
  padding: 11px 14px; margin-bottom: 12px; cursor: pointer; font-family: inherit;
  text-align: left; color: inherit; transition: border-color .12s, transform .12s; }
.chamada-numero:hover { border-color: var(--azul); transform: translateX(2px); }
.chamada-numero .numero { font-size: 26px; font-weight: 800; line-height: 1;
  color: var(--azul); }
.chamada-numero .texto { flex: 1; font-size: 13px; font-weight: 600; }
.chamada-numero .texto small { display: block; font-weight: 400; font-size: 11px;
  color: var(--fraco); }
.chamada-numero .seta { width: 20px; height: 20px; color: var(--fraco); flex-shrink: 0; }
.chamada-numero .seta svg { width: 100%; height: 100%; display: block; }
.chamada-numero:hover .seta { color: var(--azul); }

/* ---- painel: o resumo por região, colado no mapa */
.tiras-regiao { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borda);
  display: flex; flex-direction: column; gap: 7px; }
.tira-regiao { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.tira-regiao .marca { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.tira-regiao .nome { width: 92px; font-weight: 600; flex-shrink: 0; }
.tira-regiao .barra { flex: 1; height: 7px; background: var(--realce); border-radius: 4px;
  overflow: hidden; min-width: 40px; }
.tira-regiao .barra i { display: block; height: 100%; border-radius: 4px; }
.tira-regiao .quanto { width: 92px; text-align: right; flex-shrink: 0;
  font-variant-numeric: tabular-nums; }
.tira-regiao .quanto small { color: var(--fraco); }

/* ---- painel: a série dos doze meses */
.resumo-serie { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 16px; }
.resumo-serie span { display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--fraco); }
.resumo-serie b { font-size: 17px; }
.resumo-serie b.subindo { color: #15803d; }
.resumo-serie b.caindo { color: var(--vermelho); }
.colunas-meses { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px;
  align-items: end; }
.colunas-meses .mes { display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 0; }
.colunas-meses .valor { font-size: 10px; color: var(--fraco); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.colunas-meses .haste { width: 100%; height: 110px; display: flex; align-items: flex-end;
  background: var(--realce); border-radius: 5px; overflow: hidden; }
.colunas-meses .haste i { width: 100%; display: block; border-radius: 5px;
  background: linear-gradient(180deg, var(--azul), #0a5f88); transition: height .25s; }
.colunas-meses .mes:hover .haste i { filter: brightness(1.15); }
.colunas-meses .rotulo { font-size: 11px; text-transform: capitalize; }
.colunas-meses .rotulo small { color: var(--fraco); margin-left: 2px; }

/* ---- o simulador do robô do WhatsApp: uma conversa, e não uma lista de respostas */
.conversa-robo { margin-top: 12px; max-height: 320px; overflow-y: auto; display: flex;
  flex-direction: column; gap: 8px; }
.conversa-robo .fala { max-width: 80%; padding: 9px 12px; border-radius: 12px;
  font-size: 13px; line-height: 1.5; white-space: normal; }
.conversa-robo .fala.cliente { align-self: flex-end; background: var(--azul); color: #fff;
  border-bottom-right-radius: 3px; }
.conversa-robo .fala.robo { align-self: flex-start; background: var(--realce);
  border: 1px solid var(--borda); border-bottom-left-radius: 3px; }
.conversa-robo .fala.robo.chamou-gente { border-color: var(--laranja); }

/* ---- as duas coisas que "duplicar" quer dizer, lado a lado */
.escolha-duplicar { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px; }
.escolha-duplicar .opcao { text-align: left; background: var(--superficie); cursor: pointer;
  border: 1px solid var(--borda-forte); border-radius: 10px; padding: 14px 16px;
  font-family: inherit; color: inherit; transition: border-color .12s, transform .12s; }
.escolha-duplicar .opcao:hover { border-color: var(--azul); transform: translateY(-1px); }
.escolha-duplicar .opcao:disabled { opacity: .5; cursor: wait; }
/* Só o título da opção vira bloco. O `>` importa: sem ele, um `<b>` dentro do texto
   explicativo quebrava a frase em três linhas soltas. */
.escolha-duplicar .opcao > b { display: block; font-size: 14px; margin-bottom: 6px; }
.escolha-duplicar .opcao span { display: block; font-size: 12px; color: var(--fraco);
  line-height: 1.5; }
.escolha-duplicar .opcao span b { color: var(--texto-medio); }

/* ---- as parcelas do pedido: a conta tem de fechar, e isso se vê de longe */
.resumo-parcelas { display: flex; gap: 22px; align-items: center; margin-top: 10px;
  font-size: 13px; color: var(--fraco); }
.resumo-parcelas b { color: var(--texto); font-variant-numeric: tabular-nums; }
[data-tema="escuro"] .resumo-parcelas b { color: inherit; }
.resumo-parcelas b.sobra { color: var(--vermelho); }
#tabela-parcelas input[type="date"] { width: 150px; }

/* ---- a procura de cliente do pedido */
.procura-cliente { position: relative; }
.procura-cliente .lupa { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--fraco); pointer-events: none; }
.procura-cliente .lupa svg { width: 100%; height: 100%; display: block; }
.procura-cliente input[type="search"] { padding-left: 32px; padding-right: 30px; }
.procura-cliente input[type="search"]::-webkit-search-cancel-button { display: none; }
.procura-cliente #limpar-cliente { position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%); background: none; border: 0; cursor: pointer;
  color: var(--fraco); font-size: 19px; line-height: 1; padding: 2px 6px; }
.procura-cliente #limpar-cliente:hover { color: var(--vermelho); }
.achados-cliente { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: 9px;
  box-shadow: 0 10px 28px rgba(0,0,0,.16); max-height: 280px; overflow-y: auto; }
.achados-cliente button { display: block; width: 100%; text-align: left; background: none;
  border: 0; border-bottom: 1px solid var(--realce); padding: 9px 12px; cursor: pointer;
  font-family: inherit; font-size: 13px; color: inherit; }
.achados-cliente button:last-child { border-bottom: 0; }
.achados-cliente button:hover, .achados-cliente button.marcado { background: var(--realce); }
.achados-cliente button small { display: block; color: var(--fraco); font-size: 11px;
  margin-top: 2px; }
.achados-cliente .nada { padding: 11px 12px; font-size: 13px; color: var(--fraco); }

/* ---- painel: recebíveis, positivação e mix */
.faixa-vencimento { cursor: pointer; border-radius: 6px; padding: 2px 4px; margin: 0 -4px;
  transition: background .12s; }
.faixa-vencimento:hover { background: var(--realce); }
.faixa-vencimento.atencao .quanto b { color: var(--laranja); }
.faixa-vencimento.atrasado .quanto b { color: var(--vermelho); }
.faixa-vencimento .barra i { background: var(--azul); }
.faixa-vencimento.atencao .barra i { background: var(--laranja); }
.faixa-vencimento.atrasado .barra i { background: var(--vermelho); }
.pe-do-cartao { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--borda); }
.pe-do-cartao span { display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--fraco); }
.pe-do-cartao b { font-size: 15px; }
.pe-do-cartao b.subindo { color: #15803d; }
.pe-do-cartao b.caindo { color: var(--vermelho); }
.numerao { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.numerao b { font-size: 34px; font-weight: 800; line-height: 1; color: var(--azul); }
.numerao span { font-size: 12px; color: var(--fraco); }
.barra-positivacao.larga { width: 100%; height: 9px; margin: 0; }

@media (max-width: 700px) {
  .colunas-meses .valor { display: none; }
  .tira-regiao .nome { width: 70px; }
  .tira-regiao .quanto { width: 70px; }
}
button.mini { background: var(--realce); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 6px;
  padding: 4px 9px; font-size: 12px; cursor: pointer; font-family: inherit; margin-left: 4px; }
button.mini:hover { background: var(--borda); }
/* Apagar continua vermelho: e' a unica cor honesta para o que nao tem volta. */
/* O bloco de planilha anda junto e tem nome: é assim que ele deixa de ser mais três
   botõezinhos cinzas na fileira e passa a ser um lugar. */
.bloco-planilha { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 4px 8px 4px 10px; border: 1px solid var(--borda); border-radius: 9px; }
.rotulo-planilha { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-medio); font-weight: 700; margin-right: 2px; }
/* Número que o sistema calcula: tem a altura de um campo para a linha não desalinhar,
   mas não a borda — ninguém tenta digitar dentro do que o sistema já sabe. */
.valor-calculado { padding: 9px 0; font-weight: 700; color: var(--azul); font-size: 14px; }
button.mini.perigo { color: var(--vermelho); }
button.mini.perigo:hover { background: #fef2f2; }
button.mini[disabled] { opacity: .45; cursor: not-allowed; }
button.mini[disabled]:hover { background: var(--realce); }
table.grade td.celula-marcar, table.grade th.celula-marcar { width: 30px; padding-right: 0; }
table.grade .celula-marcar input { width: 16px; height: 16px; cursor: pointer; }
.vazio { padding: 28px; text-align: center; color: var(--fraco); font-size: 13px; }
.marcar { display: flex; gap: 8px; align-items: center; font-size: 13px; margin-top: 12px; }
.marcar input { width: auto; }
/* A área da empresa precisa de largura: tabela de produto com coluna por armazém não
   cabe na caixa de login. */
.cartao-palco.amplo { max-width: 1140px; }

/* Pedido */
.selo.situacao-rascunho { background: var(--realce); color: var(--texto-medio); }
/* Orçamento é laranja porque espera uma decisão — virar pedido ou não. */
.selo.situacao-orcamento { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.selo.situacao-confirmado { background: #dbeafe; color: #1e40af; }
.selo.situacao-faturado { background: #dcfce7; color: #166534; }
.selo.situacao-cancelado { background: #fee2e2; color: #991b1b; }
.cabecalho-pedido { display: flex; justify-content: space-between; gap: 16px;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--borda); }
.cabecalho-pedido .sub { font-size: 12px; color: var(--fraco); }
.resumo-pedido { display: flex; gap: 22px; flex-wrap: wrap; justify-content: flex-end;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borda); }
.resumo-pedido > div { font-size: 15px; font-weight: 600; text-align: right; }
.resumo-pedido span { display: block; font-size: 11px; font-weight: 400; color: var(--fraco);
  text-transform: uppercase; letter-spacing: .04em; }
.resumo-pedido .destaque { color: var(--vermelho); }
table.grade tfoot td { padding: 10px 8px; border-top: 2px solid var(--borda); }

/* Busca de produto dentro do pedido */
.achados { display: flex; flex-direction: column; gap: 2px; margin: -6px 0 12px; }
.achado { text-align: left; background: var(--realce); border: 1px solid var(--borda); border-radius: 7px;
  padding: 7px 10px; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--texto); }
/* A cor acima é porque o achado é <button>, e botão não herda a cor do texto: no tema
   escuro o nome do produto saía preto sobre o fundo escuro. */
.achado:hover { background: #eff6ff; border-color: var(--azul); }
.achado span { display: block; font-size: 11px; color: var(--fraco); margin-top: 2px; }

/* ================================================== A moldura do sistema
   Menu lateral fixo, topo e conteúdo largo. Quem opera passa o dia aqui: o menu não
   pode sumir a cada clique, e a tabela precisa da largura toda. */
.sistema { display: flex; min-height: 100vh; background: #f4f5f7; }
/* A lateral é mais escura que o roxo da marca e leva o X da XFutto ao fundo — o logo
   mesmo, não um X desenhado à mão. São seis marcas soltas, em tamanhos diferentes e nos
   dois sentidos: as três de ::before na posição normal e as três de ::after espelhadas.
   Poucas e espalhadas de propósito; ladrilhado virava papel de parede e brigava com o
   nome do menu.

   A opacidade vive no pseudo-elemento porque a imagem é PNG — não dá para apagar camada
   de fundo por camada como daria num SVG embutido. */
.lateral { position: relative; width: 210px; flex-shrink: 0; color: #fff;
  background: #232a4d; display: flex; flex-direction: column; overflow: hidden; }
.lateral::before, .lateral::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .16;
  background-image: url('/static/logo-xfutto.png'), url('/static/logo-xfutto.png'),
                    url('/static/logo-xfutto.png');
  background-repeat: no-repeat; }
.lateral::before {
  background-position: 14px 6%, 128px 33%, 26px 63%;
  background-size: 60px auto, 40px auto, 52px auto; }
.lateral::after {
  transform: scaleX(-1);
  background-position: 20px 19%, 138px 48%, 34px 82%;
  background-size: 34px auto, 56px auto, 44px auto; }
/* O menu passa por cima das marcas, sem disputa. */
.lateral > * { position: relative; z-index: 1; }
.marca-lateral { display: flex; gap: 10px; align-items: center; padding: 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,.12); }
.marca-lateral img { width: 34px; height: 34px; object-fit: contain; background: var(--superficie);
  border-radius: 6px; padding: 3px; }
.marca-lateral b { display: block; font-size: 15px; line-height: 1.2; }
.lateral nav { display: flex; flex-direction: column; padding: 10px 0; flex: 1; }
.lateral nav button { background: none; border: 0; color: rgba(255,255,255,.75);
  text-align: left; padding: 10px 16px; font-size: 13.5px; cursor: pointer;
  font-family: inherit; border-left: 3px solid transparent; }
.lateral nav button:hover { color: #fff; background: rgba(255,255,255,.06); }
.lateral nav button.atual { color: #fff; background: rgba(255,255,255,.14);
  box-shadow: inset 3px 0 0 var(--vermelho);
  border-left-color: var(--vermelho); font-weight: 600; }
.rodape-lateral { display: flex; gap: 8px; align-items: center; padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.12); font-size: 10px; opacity: .7; line-height: 1.35; }
.rodape-lateral img { width: 18px; height: 18px; object-fit: contain; }
.rodape-lateral a { color: #fff; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* A faixa do alto tem a MESMA cor da lateral, com a mesma marca d'agua. Antes ela era
   clara e o sistema parecia dois programas colados: coluna escura de um lado, faixa branca
   em cima.
   Como a lateral, ela e' escura nos dois temas. Por isso tudo aqui dentro tem cor fixa e
   nao token — token de texto vira quase preto no tema claro, e foi assim que o nome da
   marca ja sumiu sobre o azul uma vez. */
.topo { display: flex; align-items: center; gap: 12px; padding: 12px 22px;
  background: #232a4d; color: #fff; border-bottom: 1px solid #313b69;
  position: relative; overflow: visible; }
/* SEM `overflow: hidden` aqui. Ele foi posto para conter a marca d'agua e cortava a lista
   do sino e os achados da busca, que descem para fora da faixa: aparecia so' a fatia que
   cabia na altura do cabecalho. A marca ja e' contida pelo proprio ::after — fundo nao
   transborda da caixa —, entao o `overflow` nao servia para nada alem de cortar. */
/* Poucas marcas, na cor original do logo — como a lateral ja faz. A versao repetida
   em fita e dessaturada virava textura de fundo e nao lia como marca; e tirar a cor
   apagava justamente o que identifica a empresa. Ficam a esquerda e no meio, longe da
   busca e do canto do nome, para nao passar por tras de texto. */
.topo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .22;
  background-image: url('/static/logo-xfutto.png'), url('/static/logo-xfutto.png'),
                    url('/static/logo-xfutto.png');
  background-repeat: no-repeat;
  background-position: 15% 30%, 27% 78%, 40% 22%;
  background-size: 30px auto, 22px auto, 26px auto; }
.topo > * { position: relative; z-index: 1; }
.topo h1 { margin: 0; font-size: 17px; color: #fff; }
.topo .respiro { flex: 1; }
.topo .alternar { color: #fff; }
.topo .trocar-tema, .topo .sino {
  color: #fff; border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .07); }
.topo .trocar-tema:hover, .topo .sino:hover { background: rgba(255, 255, 255, .17); }
.topo .acao.claro {
  color: #fff; border-color: rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .09); }
.topo .acao.claro:hover { background: rgba(255, 255, 255, .19); }
/* A lista de avisos continua papel claro: e' conteudo para ler, e nao moldura. */
.topo .lista-avisos { color: var(--texto); }

/* O canto direito: a empresa manda, quem entrou vem abaixo em letra menor. */
.topo .quem-sou { display: flex; align-items: center; gap: 10px; text-align: right; }
.topo .quem-sou > div { line-height: 1.2; }
.topo .quem-sou b { display: block; font-size: 14px; font-weight: 700; color: #fff; }
.topo .quem-sou span { display: block; font-size: 10.5px; color: rgba(255, 255, 255, .62); }
/* O logo da empresa sobre um quadrado branco: marca desenhada para papel branco some
   sobre faixa escura, e ha muita. */
.topo .logo-topo { width: 30px; height: 30px; object-fit: contain; border-radius: 6px;
  background: #fff; padding: 3px; flex: 0 0 auto; }

/* A busca: largura travada. Com `flex: 0 1` ela encolhia e crescia conforme o resto da
   faixa mudava de tamanho — trocar de tela mexia na caixa, e digitar parecia mover o
   campo. Campo de busca que se mexe enquanto se digita e' o tipo de coisa que faz a
   pessoa errar a tecla. */
/* O "← Voltar" do topo: um passo para trás por clique; sem tela anterior, vai ao começo. */
.voltar-tela { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px; height: 32px; padding: 0 12px; cursor: pointer; color: #fff;
  font: inherit; font-size: 13px; white-space: nowrap; }
.voltar-tela:hover { background: rgba(255, 255, 255, .17); }
/* O elo para a administração da plataforma, no pé da coluna: só o dono da plataforma vê,
   e discreto de propósito — não é botão de trabalho, é passagem. Letra fixa em branco
   porque a coluna é escura nos dois temas. */
.elo-lateral { display: block; margin-top: 8px; background: none; border: 0; padding: 0;
  color: rgba(255, 255, 255, .7); font: inherit; font-size: 12px; text-decoration: underline;
  cursor: pointer; }
.elo-lateral:hover { color: #fff; }
.busca-topo { position: relative; flex: 0 0 290px; }
.busca-topo input {
  width: 100%; box-sizing: border-box; padding: 9px 12px 9px 36px; border-radius: 9px;
  font: inherit; font-size: 13px; color: #fff;
  background: rgba(255, 255, 255, .1) url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff'\
 stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' opacity='.75'>\
<circle cx='10.5' cy='10.5' r='6.5'/><path d='M20 20l-4.9-4.9'/></svg>")
    no-repeat 11px center / 15px;
  border: 1px solid rgba(255, 255, 255, .24); }
.busca-topo input::placeholder { color: rgba(255, 255, 255, .55); }
.busca-topo input:focus { outline: none; border-color: rgba(255, 255, 255, .5);
  background-color: rgba(255, 255, 255, .16); }
/* O "x" que o navegador coloca em campo de busca muda a largura util quando aparece, e
   com ele o texto pula. Fora. */
.busca-topo input::-webkit-search-cancel-button,
.busca-topo input::-webkit-search-decoration { -webkit-appearance: none; display: none; }

.achados-busca {
  position: absolute; top: calc(100% + 6px); right: 0; width: 380px; max-height: 60vh;
  overflow-y: auto; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .22); z-index: 40; padding: 6px;
  color: var(--texto); }
.achados-busca .achado { display: block; width: 100%; text-align: left; border: 0;
  background: none; padding: 8px 10px; border-radius: 7px; cursor: pointer; font: inherit;
  color: var(--texto); }
.achados-busca .achado:hover { background: var(--realce); }
.achados-busca .achado i { display: block; font-style: normal; font-size: 10px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--fraco); }
.achados-busca .achado b { display: block; font-size: 13px; }
.achados-busca .achado small { display: block; font-size: 11px; color: var(--fraco); }
.achado-vazio { padding: 14px 10px; font-size: 13px; color: var(--fraco); text-align: center; }
@media (max-width: 900px) { .busca-topo { display: none; } }
.topo .alternar { display: none; background: none; border: 0; font-size: 18px; cursor: pointer; }
.quem-sou { text-align: right; line-height: 1.25; }
.quem-sou b { display: block; font-size: 13px; }
.quem-sou span { font-size: 11px; color: var(--fraco); }
.conteudo { padding: 20px 22px 40px; flex: 1; }
.conteudo > .filtros:first-child { margin-top: 0; }
.principal .faixa-visita { margin: 12px 22px 0; }

/* Cartões internos e indicadores do painel */
.cartao-interno { background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px;
  padding: 16px; margin-bottom: 16px; }
.cartao-interno h3 { margin: 0 0 12px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--fraco); font-weight: 700; }
.cartao-interno h3 small { text-transform: none; letter-spacing: 0; font-weight: 400;
  margin-left: 8px; }
.colunas-painel { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px; }
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 12px; margin-bottom: 16px; }
.indicador { background: var(--superficie); border: 1px solid var(--borda); border-left: 3px solid var(--roxo);
  border-radius: 9px; padding: 13px 15px; text-align: left; cursor: pointer;
  font-family: inherit; color: var(--texto); }
/* A cor acima não é enfeite: no painel o cartão é um <button>, e botão não herda a cor do
   texto — no tema escuro o número ficava preto sobre o fundo escuro. */
.indicador:hover { border-color: var(--azul); border-left-color: var(--azul); }
.indicador span { display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--fraco); margin-bottom: 4px; }
.indicador b { display: block; font-size: 19px; }
.indicador small { font-size: 11px; color: var(--fraco); }
.indicador.azul { border-left-color: var(--azul); }
/* Cartão de armazém escolhido no inventário: a tabela abaixo está falando só dele, e
   isso tem de estar visível — senão a pessoa lê a lista curta como se fosse a lista toda. */
.indicador.escolhido { border-color: var(--azul); border-left-color: var(--azul);
  background: #f1f7fb; box-shadow: inset 0 0 0 1px var(--azul); }
/* O tema do sistema é o atributo data-tema="escuro". Esta regra já foi escrita com
   :root:not([data-theme="light"]), que casa sempre — ninguém põe data-theme —, e deixava o
   cartão escolhido azul-escuro com letra preta também no tema claro. */
[data-tema="escuro"] .indicador.escolhido { background: #16233a; }
.indicador.vermelho { border-left-color: var(--vermelho); }
.indicador.vermelho b { color: var(--vermelho); }

/* O mapa */
.mapa { position: relative; }
.mapa svg { width: 100%; height: auto; }
.mapa path { stroke: var(--superficie); stroke-width: 1.4; cursor: pointer; transition: opacity .12s; }
.mapa path:hover { opacity: .78; }
/* O estado que tem gente ganha um traço próprio: num mapa colorido por região, o contorno
   é o que separa dois estados vizinhos de tom parecido. */
.mapa path.com-dado { stroke: rgba(255,255,255,.85); }
/* A sigla do estado fica sobre a cor do mapa, que é clara nos dois temas — e não sobre o
   papel. Com token, no escuro ela virava letra clara sobre estado claro (e letra escura
   sobre o tom forte). Por isso cor fixa, como toda letra sobre fundo colorido. */
.mapa text { font-size: 15px; fill: #3f3f46; pointer-events: none; font-weight: 600; }
.mapa text.clara { fill: #fff; }
.dica-mapa { position: absolute; background: var(--texto); color: #fff; padding: 7px 10px;
  border-radius: 7px; font-size: 12px; pointer-events: none; opacity: 0; max-width: 230px;
  line-height: 1.4; z-index: 5; }
.dica-mapa.visivel { opacity: 1; }
.dica-mapa b { display: block; margin-bottom: 2px; }
.legenda { display: flex; gap: 8px 12px; align-items: center; justify-content: center;
  flex-wrap: wrap; font-size: 10.5px; color: var(--fraco); margin-top: 6px; }
.legenda .escala { display: flex; }
.legenda i { width: 22px; height: 9px; display: block; }
.legenda .regiao-legenda { display: inline-flex; align-items: center; gap: 4px; }
.legenda .regiao-legenda i { width: 11px; height: 11px; border-radius: 3px; }
.legenda .sub { flex-basis: 100%; text-align: center; }
.barra-uf { height: 9px; background: var(--vermelho); border-radius: 3px; min-width: 3px; }

/* Avisos flutuantes dentro do sistema. `#avisos` e' o cantinho de tela.html; a regra dele
   so' existia no estilo.css, que nenhuma tela carrega, e o balao caia no fim da pagina —
   o "Cancele primeiro" da lixeira, por exemplo, nunca aparecia para quem clicava. */
#avisos, #avisos-area { position: fixed; right: 18px; bottom: 18px; display: flex;
  flex-direction: column; gap: 8px; z-index: 80; }
.balao { padding: 11px 15px; border-radius: 9px; font-size: 13px; max-width: 340px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.balao.bom { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.balao.ruim { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

@media (max-width: 860px) {
  .lateral { position: fixed; inset: 0 auto 0 0; z-index: 40; transform: translateX(-100%);
    transition: transform .18s; }
  .lateral.aberta { transform: none; }
  .topo .alternar { display: block; }
  .conteudo { padding: 14px; }
}
/* Campo consultando um serviço de fora */
input.consultando { background: #eff6ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%230372a3' stroke-width='2' stroke-dasharray='9 25'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") no-repeat right 8px center; }

/* Armazém em foco: precisa ser visível o tempo todo, senão o operador cadastra trinta
   produtos no lugar errado sem perceber. */
.foco-armazem { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: var(--realce); border: 1px solid var(--borda); border-radius: 9px; padding: 9px 14px;
  margin-bottom: 14px; font-size: 13px; }
.foco-armazem span { color: var(--fraco); font-size: 12px; }
.foco-armazem select { padding: 5px 8px; font-size: 13px; border: 1px solid var(--borda-forte);
  border-radius: 6px; font-family: inherit; }
.foco-armazem small { color: var(--fraco); font-size: 11px; }
.foco-armazem.ligado { background: #eff6ff; border-color: #bfdbfe; }
.foco-armazem.ligado b { color: var(--azul); }

/* Ações de documento no pedido, e atalhos de período no inventário */
.acoes-documento { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--borda); }
.botao-documento { display: inline-flex; align-items: center; gap: 5px; background: var(--realce);
  border: 1px solid var(--borda); border-radius: 7px; padding: 6px 12px; font-size: 12.5px;
  color: var(--texto); text-decoration: none; }
.botao-documento:hover { background: #eff6ff; border-color: var(--azul); color: var(--azul); }
a.mini { display: inline-block; text-decoration: none; color: var(--texto); }
.atalhos-periodo { display: flex; gap: 6px; margin: -6px 0 14px; flex-wrap: wrap; }
.atalhos-periodo button { background: var(--realce); border: 1px solid var(--borda); border-radius: 20px;
  padding: 4px 12px; font-size: 12px; cursor: pointer; font-family: inherit; color: var(--texto); }
/* Mesma história do achado: botão não herda cor, e "7 dias" / "Clientes" sumiam no escuro. */
.atalhos-periodo button:hover { background: var(--azul); color: #fff; border-color: var(--azul); }
.exportar { display: flex; gap: 6px; align-items: flex-end; }
.linha-acoes { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 14px;
  flex-wrap: wrap; }
.atalhos-periodo button.atual { background: var(--azul); color: #fff; border-color: var(--azul); }

/* Ícones de ação na lista de pedidos. A cor conta a fase sem ninguém ler: cinza é o que
   ainda não aconteceu, verde é o que já aconteceu, vermelho é cancelado. */
.icones { display: flex; gap: 3px; justify-content: center; }
.icone-acao { width: 27px; height: 27px; padding: 5px; border: 1px solid transparent;
  border-radius: 6px; background: none; cursor: pointer; color: #71717a; }
.icone-acao svg { width: 100%; height: 100%; display: block; }
.icone-acao:hover:not(:disabled) { background: var(--realce); border-color: var(--borda); }
.icone-acao:disabled { opacity: .35; cursor: default; }
/* As cores dos ícones saem da paleta da marca: o roxo, o azul e o vermelho do X da
   XFutto. O verde é a única exceção e continua verde porque significa "deu certo" —
   trocá-lo por uma cor da marca custaria a leitura imediata da linha. */
.icone-acao.preto, .icone-acao.roxo { color: var(--roxo); }
.icone-acao.cinza { color: var(--texto-fraco); }
/* Imprimir, PDF e baixar ficam sem cor de propósito: são ações de papel, não de estado.
   Deixá-las cinzas faz a cor do resto da linha significar alguma coisa. */
.icone-acao.neutro { color: var(--texto-medio); }
.icone-acao.verde { color: #16a34a; }
.icone-acao.vermelho { color: var(--vermelho); }
.icone-acao.azul { color: var(--azul); }
.icone-acao.apagado { color: var(--borda-forte); }
/* O ícone que confirma o pedido do vendedor. Cor de recado e borda acesa, sem animação:
   a etiqueta laranja da coluna Situação já chama, e dez linhas pulsando ao mesmo tempo
   viram ruído em vez de aviso. */
.icone-acao.laranja { color: var(--laranja); border-color: var(--laranja); }
.icone-acao.laranja:hover:not(:disabled) { background: #fff7ed; border-color: var(--laranja); }
[data-tema="escuro"] .icone-acao.laranja:hover:not(:disabled) {
  background: rgba(234,88,12,.18); }
.icone-acao.roxo:hover:not(:disabled) { background: #eef0f7; border-color: #d5d9ea; }
.icone-acao.azul:hover:not(:disabled) { background: #e8f3f8; border-color: #c5e0ec; }
.icone-acao.vermelho:hover:not(:disabled) { background: #fdeced; border-color: #f6ccce; }

/* Devolução de mercadoria */
.atalhos-devolucao { display: flex; gap: 8px; margin-bottom: 10px; }
.resumo-devolucao { margin-top: 12px; padding: 9px 12px; border-radius: 8px;
  background: #eef0f7; border: 1px solid #d5d9ea; font-size: 13px; color: var(--roxo); }
table.grade th.centro, table.grade td.centro { text-align: center; }
.barra-selecao { display: flex; gap: 10px; align-items: center; background: #eff6ff;
  border: 1px solid #bfdbfe; border-radius: 8px; padding: 8px 14px; margin-bottom: 12px;
  font-size: 13px; }
/* `display:flex` na classe vence o `hidden` do navegador; sem esta linha a barra aparece
   mesmo sem nada marcado. */
.barra-selecao[hidden] { display: none; }

/* ---- ficha do cliente dentro do pedido
   Aparece assim que o cliente é escolhido, antes de digitar item nenhum. A cor da faixa
   vem do fato — vencido ou limite estourado é vermelho porque o pedido vai ser barrado —
   e nunca de gosto: cliente sem limite cadastrado não recebe alarme. */
.ficha-cliente { margin-top: 10px; border: 1px solid var(--borda-forte); border-left: 4px solid var(--azul);
  border-radius: 8px; padding: 9px 12px; background: var(--realce); font-size: 12.5px; }
.ficha-cliente.atencao { border-left-color: #d97706; background: #fffbeb; border-color: #fde68a; }
.ficha-cliente.grave { border-left-color: var(--vermelho); background: #fef2f2;
  border-color: #fecaca; }
.numeros-ficha { display: flex; flex-wrap: wrap; gap: 20px; }
.numeros-ficha div { display: flex; flex-direction: column; line-height: 1.35; }
.numeros-ficha span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--fraco); }
.numeros-ficha b { font-size: 14px; color: var(--texto); }
.numeros-ficha i { font-style: normal; font-size: 11px; color: var(--fraco); }
.numeros-ficha .ruim b { color: var(--vermelho); }
.recado-ficha { margin-bottom: 8px; font-weight: 600; color: var(--vermelho); }
.ultimos-pedidos { margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--borda-forte);
  font-size: 11.5px; color: var(--fraco); }
.ultimos-pedidos a { color: var(--azul); font-weight: 600; text-decoration: none; }
.ultimos-pedidos a:hover { text-decoration: underline; }
.ultimos-pedidos i { font-style: normal; }

/* ---- botões de dentro de formulário
   Existiam nas telas em `class="botao-primario"` e `botao-secundario` sem nenhuma regra
   correspondente: saíam com a cara crua do navegador. */
.botao-primario, .botao-secundario { border-radius: 7px; padding: 8px 15px; font-size: 13px;
  font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.botao-primario { background: var(--vermelho); color: #fff; }
.botao-primario:hover:not(:disabled) { background: #b52a34; }
.botao-secundario { background: var(--realce); color: var(--texto-medio); border-color: var(--borda); }
.botao-secundario:hover:not(:disabled) { background: var(--borda); }
.botao-primario:disabled, .botao-secundario:disabled { opacity: .55; cursor: default; }

/* Atalho de texto dentro de um rótulo — "＋ cadastrar" ao lado de "Cliente". */
.link-inline { background: none; border: 0; padding: 0 0 0 8px; cursor: pointer;
  color: var(--azul); font-size: 11.5px; font-weight: 700; text-transform: none;
  letter-spacing: 0; }
.link-inline:hover { text-decoration: underline; }

/* ---- painel que abre dentro de outro formulário
   O cadastro de cliente mora dentro do pedido: o vendedor está com o comprador na frente
   e não pode perder o que já digitou para ir até a tela de clientes. */
.painel-embutido { margin-top: 10px; border: 1px solid var(--azul); border-radius: 9px;
  padding: 12px 14px; background: #f6fbfd; }
.titulo-embutido { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--azul); margin-bottom: 10px; }
.acoes-embutido { display: flex; gap: 8px; margin-top: 12px; }
.sub.bom { color: #15803d; }
.sub.ruim { color: var(--vermelho); }

/* ---- faixa de bolinhas no topo da lista de pedidos
   Duas famílias com pesos diferentes: o ciclo de vida (que manda no estoque e no dinheiro)
   vem com a cor do estado; a situação da operação vem neutra, porque é só um recado. */
.bolinhas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.bolinha { display: inline-flex; align-items: center; gap: 6px; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: 999px; padding: 5px 12px 5px 9px;
  font-size: 12px; cursor: pointer; color: var(--texto-medio); }
.bolinha:hover { border-color: var(--texto-fraco); }
.bolinha.ativa { border-color: var(--roxo); background: #eef0f7; font-weight: 600; }
/* O realce da bolinha escolhida era um cinza-azulado fixo. No tema escuro isso virava
   letra clara sobre fundo claro, e a bolinha ativa era a única ilegível da faixa. */
[data-tema="escuro"] .bolinha.ativa { background: rgba(125,138,196,.24);
  border-color: var(--roxo); color: var(--texto); }
.bolinha i { width: 8px; height: 8px; border-radius: 50%; background: var(--texto-fraco); }
.bolinha b { font-weight: 700; color: var(--texto); }
.bolinha.todos i { background: var(--texto-medio); }
.bolinha.ciclo-orcamento i { background: var(--laranja); }
.bolinha.ciclo-rascunho i { background: var(--texto-fraco); }
.bolinha.ciclo-confirmado i { background: var(--azul); }
.bolinha.ciclo-faturado i { background: #16a34a; }
.bolinha.ciclo-cancelado i { background: var(--vermelho); }
.bolinha.operacao i { background: var(--roxo); }
.bolinha.lixeira i { background: var(--borda-forte); }
/* "Esperando liberação" não é fase do ciclo do pedido — é fila de gente esperando
   decisão. Vem em laranja e destacada das outras para o olho cair nela primeiro. */
.bolinha.aguardando { border-color: var(--laranja); color: var(--laranja);
  font-weight: 600; }
.bolinha.aguardando i { background: var(--laranja); }
.bolinha.aguardando b { color: var(--laranja); }
.bolinha.aguardando.ativa { background: var(--laranja); border-color: var(--laranja); }
.bolinha.aguardando.ativa, .bolinha.aguardando.ativa b { color: #fff; }
.bolinha.aguardando.ativa i { background: #fff; }
/* O selo na linha da lista: o pedido continua rascunho, mas quem olha precisa saber que
   ele não está parado por descuido do vendedor — está parado esperando o escritório. */
/* Etiqueta que é botão. Precisa parecer clicável sem deixar de parecer etiqueta: mesma
   forma e mesma cor, mais o dedo do cursor e um leve preenchimento ao passar por cima. */
.selo-clicavel { cursor: pointer; font-family: inherit; }
.selo-clicavel:hover:not(:disabled) { background: var(--laranja); color: #fff;
  border-color: var(--laranja); }
.selo-clicavel:disabled { cursor: default; }

.selo.aguardando { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
[data-tema="escuro"] .selo.aguardando { background: rgba(234,88,12,.18);
  color: #fdba74; border-color: rgba(234,88,12,.4); }
/* Reprovado tem estilo próprio e não reaproveita um selo de outro assunto: o `.selo` sem
   cor cai no azul do tema escuro, e um "reprovado" azul não comunica nada. */
.selo.reprovado { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
[data-tema="escuro"] .selo.reprovado { background: rgba(248,113,113,.16);
  color: #fca5a5; border-color: rgba(248,113,113,.35); }
.marca-situacao { display: inline-block; margin-top: 3px; font-size: 10.5px; font-weight: 600;
  color: var(--roxo); background: #eef0f7; border-radius: 4px; padding: 1px 6px; }

/* ---- menu de três pontos da linha */
.menu-linha { position: fixed; z-index: 60; min-width: 210px; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: 9px; padding: 5px;
  box-shadow: 0 10px 30px rgba(0,0,0,.16); }
.menu-linha button { display: block; width: 100%; text-align: left; background: none;
  border: 0; border-radius: 6px; padding: 7px 10px; font-size: 12.5px; cursor: pointer;
  color: var(--texto-medio); }
.menu-linha button:hover { background: var(--realce); }
.menu-linha button.perigo { color: var(--vermelho); }
.menu-linha button.perigo:hover { background: #fef2f2; }
.titulo-menu { font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--fraco); padding: 8px 10px 3px; }

/* O item do pedido avisa quando o armazém escolhido não cobre a quantidade. É um aviso,
   não um bloqueio: quem barra de verdade é a confirmação, no servidor. */
.falta-estoque { margin-top: 3px; font-size: 10.5px; font-weight: 700; color: var(--vermelho); }

/* O código do cliente na lista de pedidos: identifica sem roubar a leitura do nome. */
.codigo-cliente { display: inline-block; font-size: 10.5px; font-weight: 700; color: var(--roxo);
  background: #eef0f7; border-radius: 4px; padding: 1px 5px; margin-right: 4px; }

/* ---- relatórios */
.abas-relatorio { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--borda); }
.abas-relatorio button { background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--fraco); cursor: pointer; }
.abas-relatorio button:hover { color: var(--roxo); }
.abas-relatorio button.atual { color: var(--roxo); border-bottom-color: var(--vermelho); }
.classe-abc { display: inline-block; width: 20px; height: 20px; line-height: 20px;
  text-align: center; border-radius: 5px; font-size: 11px; font-weight: 700; color: #fff; }
.classe-abc.A { background: #16a34a; }
.classe-abc.B { background: var(--azul); }
.classe-abc.C { background: var(--texto-fraco); }
.queda { color: var(--vermelho); }
.subida { color: #15803d; }

/* ---- abas de armazém na tela de produtos
   Clicar numa aba faz duas coisas ao mesmo tempo: filtra a lista para aquele armazém e
   define para onde vai tudo o que for cadastrado em seguida. É uma decisão só, e é a que
   quem está conferindo uma carga toma uma vez ao começar. */
.abas-armazem { display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  margin-bottom: 12px; border-bottom: 1px solid var(--borda); }
.abas-armazem button { background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--fraco); cursor: pointer; }
.abas-armazem button:hover { color: var(--roxo); }
.abas-armazem button.atual { color: var(--roxo); border-bottom-color: var(--vermelho); }
.recado-armazem { font-size: 11.5px; color: var(--fraco); margin-left: auto; padding: 0 4px 6px; }

/* ---- painel: o mapa e a coluna da direita
   O mapa saiu 15% menor a pedido: ele já respondia "onde eu vendo" de relance, e o
   tamanho anterior empurrava para baixo o que precisa de ação. */
#area-mapa { max-width: 85%; margin: 0 auto; }
.pilha-direita { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pilha-direita > .cartao-interno, .pilha-direita #onde-parados > .cartao-interno { margin: 0; }

/* ---- positivação e roteiro */
.titulo-secao { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--fraco); margin: 0 0 8px; }
.barra-positivacao { display: inline-block; width: 90px; height: 6px; border-radius: 3px;
  background: var(--borda); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.barra-positivacao i { display: block; height: 100%; background: var(--azul); }
.ponto-positivado, .ponto-parado { display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; }
.ponto-positivado { background: #16a34a; }
.ponto-parado { background: var(--vermelho); }
.atencao-texto { color: #b45309; }

/* ---- metas
   A barra tem duas marcas: o preenchimento é quanto da meta já saiu, e o risco vertical é
   quanto do mês já passou. Quem está atrás do risco não fecha mantendo o passo de hoje —
   é a leitura que interessa no dia 12, e que um número sozinho não dá. */
.barra-meta { position: relative; display: inline-block; width: 120px; height: 8px;
  border-radius: 4px; background: var(--borda); overflow: hidden; vertical-align: middle;
  margin-right: 6px; }
.barra-meta i { display: block; height: 100%; background: var(--azul); }
.barra-meta u { position: absolute; top: -2px; width: 2px; height: 12px; background: var(--texto);
  opacity: .55; }
.barra-meta.boa i { background: #16a34a; }
.barra-meta.no-ritmo i { background: var(--azul); }
.barra-meta.atrasada i { background: var(--vermelho); }
.cartao-meta-casa { display: flex; flex-wrap: wrap; gap: 26px; background: var(--superficie);
  border: 1px solid var(--borda); border-left: 3px solid var(--roxo); border-radius: 9px;
  padding: 12px 16px; margin-bottom: 14px; }
.cartao-meta-casa.boa { border-left-color: #16a34a; }
.cartao-meta-casa.no-ritmo { border-left-color: var(--azul); }
.cartao-meta-casa.atrasada { border-left-color: var(--vermelho); }
.cartao-meta-casa > div { display: flex; flex-direction: column; gap: 2px; }
.cartao-meta-casa span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--fraco); }
.cartao-meta-casa b { font-size: 17px; }
.cartao-meta-casa input { width: 150px; font-size: 15px; }

/* ---- menu lateral em grupos
   Dezesseis telas numa lista reta viravam uma coluna de rolagem em que nada se achava. O
   grupo da tela aberta nasce aberto, e o que a pessoa abrir fica aberto pela sessão. */
.grupo-menu { display: flex; flex-direction: column; }
.cabeca-grupo { display: flex; align-items: center; justify-content: space-between;
  background: none; border: 0; width: 100%; cursor: pointer; text-align: left;
  color: rgba(255,255,255,.55); font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; padding: 12px 16px 6px; }
.cabeca-grupo:hover { color: rgba(255,255,255,.85); }
.cabeca-grupo i { width: 0; height: 0; border-left: 4px solid currentColor;
  border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
  transition: transform .15s; }
.grupo-menu.aberto .cabeca-grupo i { transform: rotate(90deg); }
.grupo-menu.aberto .cabeca-grupo { color: rgba(255,255,255,.8); }
.itens-grupo { display: none; flex-direction: column; }
.grupo-menu.aberto .itens-grupo { display: flex; }
.itens-grupo button { padding-left: 26px; }

/* ---- o aviso laranja de "está esperando você"
   Quem opera passa o dia na tela de pedidos. Sem uma marca no menu, o pedido que o
   vendedor mandou para liberação só aparece para quem lembra de abrir Aprovações — e
   ninguém lembra de abrir uma tela para descobrir que ela está vazia. Por isso o número
   sobe até o cabeçalho do grupo fechado: fechado ou aberto, o recado chega.
   O laranja é sobre fundo colorido, então a letra é #fff fixo e não token: no tema escuro
   um token de superfície apagaria o número dentro da bolha. */
.lateral nav button.com-aviso { display: flex; align-items: center;
  justify-content: space-between; gap: 8px; }
.aviso-menu { background: var(--laranja); color: #fff; border-radius: 999px;
  min-width: 18px; padding: 1px 6px; font-size: 10.5px; font-weight: 700;
  line-height: 1.55; text-align: center; letter-spacing: 0; }
.cabeca-grupo .aviso-menu { margin-left: auto; margin-right: 7px; }
/* Com o grupo aberto o número já está no item; repetir no cabeçalho é ruído. */
.grupo-menu.aberto .cabeca-grupo .aviso-menu { display: none; }
/* Grupo fechado que contém a tela aberta não existe — mas se a pessoa fechar o grupo em
   que está, a marca continua visível quando ela reabrir. */
.lista-simples { margin: 0; padding: 0 0 0 18px; font-size: 13px; }
.lista-simples li { margin: 3px 0; }
.motivo-parada { font-size: 12px; color: var(--vermelho); max-width: 340px; }

/* ---- importação de planilha */
.obrigatorio { display: block; font-size: 10px; font-weight: 700; color: var(--vermelho);
  text-transform: uppercase; letter-spacing: .05em; }
.exemplo-import { max-width: 320px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.resumo-import { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px;
  padding: 10px 14px; font-size: 14px; color: #14532d; }
.problemas-import { margin-top: 10px; background: #fef2f2; border: 1px solid #fecaca;
  border-radius: 8px; padding: 10px 14px; font-size: 12.5px; color: #7f1d1d; }
.problemas-import ul { margin: 6px 0 0; padding-left: 18px; }

/* O símbolo de marca registrada acompanha o nome sem competir com ele: sobe um pouco,
   fica bem menor e sai do preto cheio. Um ® do tamanho da letra vira ruído. */
.registrada { font-size: .42em; vertical-align: super; line-height: 0; margin-left: .12em;
  font-weight: 600; opacity: .75; letter-spacing: 0; }
.marca .registrada { opacity: .6; }

/* Chaves do que sai no documento: caixa por linha, com a explicação do efeito embaixo do
   nome. Uma lista de nomes sem o efeito faria o lojista ligar coisa sem saber o que muda. */
.chaves-documento { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px; }
.chave-documento { display: flex; gap: 9px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--borda); border-radius: 8px; padding: 9px 11px;
  background: var(--superficie); }
.chave-documento:hover { border-color: var(--azul); }
.chave-documento input { margin-top: 2px; }
.chave-documento b { display: block; font-size: 13px; }
.chave-documento small { display: block; font-size: 11px; color: var(--fraco); margin-top: 2px; }

/* Foto do produto: miniatura na lista e prova no formulário. O quadrado tracejado do
   "sem foto" ocupa o mesmo espaço da imagem — sem ele a lista dança conforme quem tem
   foto e quem não tem. */
.celula-foto { width: 40px; padding-right: 0 !important; }
.mini-foto { width: 32px; height: 32px; object-fit: contain; border-radius: 4px;
  display: block; background: var(--realce); }
.mini-foto.vazia { border: 1px dashed var(--borda-forte); background: none; }
.area-foto { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--borda); }
.prova-foto { width: 74px; height: 74px; flex-shrink: 0; border: 1px solid var(--borda);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: var(--realce); overflow: hidden; }
.prova-foto img { width: 100%; height: 100%; object-fit: contain; }
.prova-foto span { font-size: 11px; color: var(--fraco); }

/* O saldo embaixo da quantidade: quem digita vê quanto há antes de prometer ao cliente.
   Fica vermelho quando o pedido passa do disponível — a trava de verdade é na
   confirmação, no servidor, mas descobrir ali é tarde para quem está com o comprador. */
.saldo-do-item { font-size: 10px; color: var(--fraco); margin-top: 2px; }
.saldo-do-item.sem { color: var(--vermelho); font-weight: 700; }
/* Campo que o sistema nao soube preencher e espera a pessoa. Laranja porque e' a cor de
   recado da casa — "isto espera voce" —, e nao vermelho: nao ha erro nenhum ali, so' uma
   conta que o cadastro nao tinha como fazer sozinho. */
.campo-pendente {
  border-color: var(--laranja) !important;
  box-shadow: 0 0 0 2px rgba(234, 88, 12, .18);
}
.achado .tem-saldo { color: #15803d; }
.achado .sem-saldo { color: var(--vermelho); }

/* A empresa em que a pessoa está, no canto superior direito — do lado de quem está
   logado, porque as duas respondem à mesma pergunta: quem sou e onde estou. */
.empresa-no-topo { display: flex; align-items: center; gap: 9px; padding: 5px 14px 5px 6px;
  margin-right: 8px; border-right: 1px solid var(--borda); }
.empresa-no-topo img { width: 32px; height: 32px; object-fit: contain; border-radius: 6px;
  background: #fff; padding: 2px; }
/* O nome da empresa é a informação mais forte do canto: quem opera precisa ver de relance
   em que empresa está, sobretudo quem tem mais de uma. */
.empresa-no-topo b { font-size: 15px; font-weight: 700; color: var(--texto);
  letter-spacing: -.01em; }
/* O nome do sistema no alto da coluna, com a linha "Gestão de Negócios" embaixo. */
/* A marca virou botão: precisa zerar o visual de botão e ganhar o affordance de clique,
   senão parece um enfeite que por acaso responde ao mouse. */
.marca-lateral { width: 100%; background: none; border: 0; font-family: inherit;
  cursor: pointer; text-align: left; }
.marca-lateral:hover { background: rgba(255,255,255,.06); }
.marca-lateral small { display: block; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .09em; color: rgba(255,255,255,.62); margin-top: 1px; }
/* A coluna é escura no tema claro e no escuro: o nome do sistema e o menu são sempre
   brancos ali. Foi o que quebrou quando as cores viraram token — o branco do texto virou
   a cor de superfície, e no escuro o XFutto ficou preto sobre azul-escuro. */
.lateral, .lateral b, .lateral nav button, .marca-lateral b, .rodape-lateral span {
  color: #fff; }
.lateral .marca-lateral img { background: #fff; }
@media (max-width: 760px) { .empresa-no-topo b { display: none; } }


/* ---- ajustes de leitura no tema escuro
   Os selos e etiquetas foram feitos com fundo pastel e letra escura, que é a combinação
   certa no claro e some no escuro. Aqui eles viram o contrário: fundo apagado e letra
   clara, mantendo a mesma cor de significado. */
[data-tema="escuro"] .selo { background: rgba(56,189,248,.14); color: #7dd3fc; }
[data-tema="escuro"] .selo.apagado { background: rgba(248,113,113,.14); color: #fca5a5; }
[data-tema="escuro"] .selo.situacao-rascunho { background: var(--realce); color: #cbd0dc; }
[data-tema="escuro"] .selo.situacao-orcamento { background: rgba(234,88,12,.18); color: #fdba74;
  border-color: rgba(234,88,12,.4); }
[data-tema="escuro"] .selo.situacao-confirmado { background: rgba(59,130,246,.16); color: #93c5fd; }
[data-tema="escuro"] .selo.situacao-faturado { background: rgba(34,197,94,.16); color: #86efac; }
[data-tema="escuro"] .selo.situacao-cancelado { background: rgba(248,113,113,.16); color: #fca5a5; }
[data-tema="escuro"] .marca-situacao { background: rgba(125,138,196,.18); color: #b6bff0; }
[data-tema="escuro"] .codigo-cliente { background: rgba(125,138,196,.18); color: #b6bff0; }
[data-tema="escuro"] .barra-selecao { background: rgba(56,189,248,.10);
  border-color: rgba(56,189,248,.28); color: var(--texto); }
[data-tema="escuro"] .resumo-import { background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.3); color: #86efac; }
[data-tema="escuro"] .problemas-import { background: rgba(248,113,113,.12);
  border-color: rgba(248,113,113,.3); color: #fca5a5; }
[data-tema="escuro"] .ficha-cliente { background: var(--realce); }
[data-tema="escuro"] .ficha-cliente.atencao { background: rgba(217,119,6,.12);
  border-color: rgba(217,119,6,.35); }
[data-tema="escuro"] .ficha-cliente.grave { background: rgba(200,37,44,.14);
  border-color: rgba(200,37,44,.4); }
[data-tema="escuro"] .numeros-ficha b { color: var(--texto); }
[data-tema="escuro"] .painel-embutido { background: rgba(58,168,220,.08); }
[data-tema="escuro"] .foco-armazem, [data-tema="escuro"] .cartao-meta-casa { background: var(--superficie); }
/* Os fundos pastel que sobraram: letra clara do tema sobre eles não se lia (o plano
   escolhido, o campo consultando, o resumo da devolução, o documento sob o mouse), e os
   que têm letra fixa escura viravam um retalho claro no meio da tela. */
[data-tema="escuro"] .plano.escolhido { background: rgba(200,37,44,.14); }
[data-tema="escuro"] input.consultando { background-color: rgba(56,189,248,.10); }
[data-tema="escuro"] .resumo-devolucao { background: rgba(125,138,196,.14);
  border-color: rgba(125,138,196,.35); }
[data-tema="escuro"] .botao-documento:hover, [data-tema="escuro"] .achado:hover {
  background: rgba(56,189,248,.10); }
[data-tema="escuro"] .foco-armazem.ligado { border-color: rgba(56,189,248,.35); }
[data-tema="escuro"] button.mini.perigo:hover,
[data-tema="escuro"] .menu-linha button.perigo:hover { background: rgba(248,113,113,.14); }
[data-tema="escuro"] .icone-acao.roxo:hover:not(:disabled) { background: rgba(125,138,196,.16);
  border-color: rgba(125,138,196,.4); }
[data-tema="escuro"] .icone-acao.azul:hover:not(:disabled) { background: rgba(56,189,248,.12);
  border-color: rgba(56,189,248,.35); }
[data-tema="escuro"] .icone-acao.vermelho:hover:not(:disabled) { background: rgba(248,113,113,.14);
  border-color: rgba(248,113,113,.35); }
[data-tema="escuro"] .recado-erro, [data-tema="escuro"] .modal .erro-modal { color: #fca5a5; }
[data-tema="escuro"] .recado-erro { background: rgba(248,113,113,.12);
  border-color: rgba(248,113,113,.3); }
[data-tema="escuro"] .recado-bom, [data-tema="escuro"] .faixa-visita.propria {
  background: rgba(56,189,248,.10); border-color: rgba(56,189,248,.28); color: #93c5fd; }
[data-tema="escuro"] .faixa-visita.propria button { color: #93c5fd; }
[data-tema="escuro"] .faixa-visita:not(.propria) { background: rgba(217,119,6,.14);
  border-color: rgba(217,119,6,.4); color: #fcd34d; }
[data-tema="escuro"] .faixa-visita:not(.propria) button { color: #fcd34d; }
[data-tema="escuro"] .balao.bom { background: #12301f; color: #86efac; border-color: #166534; }
[data-tema="escuro"] .balao.ruim { background: #3a1719; color: #fca5a5; border-color: #7f1d1d; }
/* O verde e o âmbar escuros do claro dão 3,3:1 no papel escuro. */
[data-tema="escuro"] .resumo-serie b.subindo, [data-tema="escuro"] .pe-do-cartao b.subindo,
[data-tema="escuro"] .sub.bom, [data-tema="escuro"] .subida,
[data-tema="escuro"] .achado .tem-saldo { color: #4ade80; }
[data-tema="escuro"] .atencao-texto { color: #fbbf24; }
/* A dica do mapa tinha o fundo no token de texto — que no escuro é quase branco — e a letra
   branca fixa: a caixa aparecia vazia. */
[data-tema="escuro"] .dica-mapa { background: #0b0f1a; border: 1px solid var(--borda-forte); }
/* Letra branca sobre cor: o azul, o vermelho e o laranja clareados para servir de letra
   no escuro deixavam o branco de cima a 2,3–3:1. Onde a cor é fundo, volta o tom da marca. */
[data-tema="escuro"] .acao:not(.claro), [data-tema="escuro"] .conversa-robo .fala.cliente,
[data-tema="escuro"] .atalhos-periodo button:hover,
[data-tema="escuro"] .atalhos-periodo button.atual, [data-tema="escuro"] .classe-abc.B {
  background: #0372a3; border-color: #0372a3; }
[data-tema="escuro"] .acao:not(.claro):hover { background: #025a80; }
[data-tema="escuro"] .botao-primario { background: #c8252c; }
/* "Desfaturar" e "Apagar os testes" pintam o vermelho no próprio style do botão; o
   `!important` é o único jeito de a folha alcançar um style escrito na marcação. */
[data-tema="escuro"] #desfaturar, [data-tema="escuro"] #limpar { background: #c8252c !important; }
[data-tema="escuro"] .aviso-menu, [data-tema="escuro"] .conta-sino,
[data-tema="escuro"] .bolinha.aguardando.ativa,
[data-tema="escuro"] .selo-clicavel:hover:not(:disabled) {
  background: #ea580c; border-color: #ea580c; }


/* ================= sininho de avisos e atualizações do sistema =================
   O sino junta num lugar só o que precisa de atenção. A cor é o laranja de recado, o
   mesmo do aviso no menu — quem vê laranja no XFutto sabe que é "isto espera você", e
   não decoração. */
.caixa-sino { position: relative; display: flex; }
.sino { position: relative; background: none; border: 1px solid var(--borda);
  border-radius: 8px; width: 34px; height: 32px; cursor: pointer; font-size: 15px;
  color: var(--texto-medio); line-height: 1; }
.sino:hover { border-color: var(--texto-fraco); }
.sino.aceso { border-color: var(--laranja); color: var(--laranja); }
/* A contagem pulsa de leve. Ele pediu que "apitasse"; som num escritório incomoda quem
   está do lado o dia inteiro, e o navegador só toca depois de um clique na página — a
   pulsada avisa sem depender de nada disso. */
.conta-sino { position: absolute; top: -7px; right: -7px; background: var(--laranja);
  color: #fff; border-radius: 999px; min-width: 17px; padding: 0 5px; font-size: 10px;
  font-weight: 700; line-height: 17px; animation: pulsa-aviso 2.6s ease-in-out infinite; }
@keyframes pulsa-aviso {
  0%, 70%, 100% { transform: scale(1); }
  82% { transform: scale(1.16); }
}
@media (prefers-reduced-motion: reduce) { .conta-sino { animation: none; } }


.lista-avisos { position: absolute; top: calc(100% + 9px); right: 0; z-index: 70;
  min-width: 320px; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.18); padding: 6px; }
.aviso-linha { display: flex; gap: 9px; align-items: flex-start; width: 100%;
  text-align: left; background: none; border: 0; border-radius: 7px; padding: 9px 10px;
  font-family: inherit; cursor: pointer; }
.aviso-linha:hover { background: var(--realce); }
/* O sino é de ver e dar OK: a linha não leva a lugar nenhum, só o OK a tira da lista. */
.texto-aviso { flex: 1; min-width: 0; }
.ok-aviso { flex: 0 0 auto; align-self: center; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: 6px; padding: 4px 10px; font-size: 12px;
  font-weight: 700; color: var(--roxo); cursor: pointer; font-family: inherit; }
.ok-aviso:hover { border-color: var(--roxo); }
.ok-aviso:disabled { opacity: .5; cursor: default; }
.marca-aviso { width: 8px; height: 8px; border-radius: 50%; background: var(--laranja);
  margin-top: 5px; flex: 0 0 auto; }
/* Chegada de pedido e recado do sistema não são a mesma coisa, e o sino mistura os dois
   na mesma lista. A etiqueta em cima e a cor da bolinha separam: laranja é trabalho que
   chegou, roxo é assunto do software. */
.categoria-aviso { display: block; font-style: normal; font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--laranja); margin-bottom: 2px; }
.aviso-linha.de-sistema .categoria-aviso { color: var(--roxo); }
.aviso-linha.de-sistema .marca-aviso { background: var(--roxo); }
/* Cheque que já passou do vencimento é a única coisa vermelha do sino: laranja é "faça
   isso hoje", vermelho é "isso já devia estar feito". */
.aviso-linha.atrasado .categoria-aviso { color: var(--vermelho); }
.aviso-linha.atrasado .marca-aviso { background: var(--vermelho); }
.aviso-linha b { display: block; font-size: 13px; color: var(--texto); }
.aviso-linha small { display: block; font-size: 11.5px; color: var(--texto-fraco);
  margin-top: 2px; line-height: 1.35; }
/* A atualização no sino tem os mesmos dois botões da tela de novidades; a linha dela não é
   clicável, só os botões. */
.aviso-linha.de-sistema { cursor: default; }
.botoes-aviso { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.botoes-aviso .acao.pequena { width: auto; padding: 5px 11px; font-size: 12px; }
/* A lista do sino mora dentro da faixa escura, e a regra dos botões claros da faixa (letra
   branca) apagava o "Ver o que muda" sobre o papel claro da lista. */
.topo .lista-avisos .acao.claro { background: var(--realce); color: var(--texto);
  border-color: var(--borda); }
.topo .lista-avisos .acao.claro:hover { background: var(--borda); }
.aviso-vazio { padding: 15px 12px; font-size: 12.5px; color: var(--texto-fraco);
  text-align: center; }

/* O cartão de pedido que chegou abre o painel. Borda laranja à esquerda e não fundo
   inteiro colorido: é uma tabela que precisa ser lida, e fundo de alerta atrás de números
   cansa a vista de quem olha o painel várias vezes por dia. */
.cartao-interno.chegou-pedido { border-left: 3px solid var(--laranja); margin-bottom: 14px; }
.cartao-interno.chegou-pedido h3 { color: var(--laranja); }

/* A lista de pedidos que aparece ao digitar o número, no cadastro de cheque. */
.sugestoes { position: relative; margin-top: 4px; border: 1px solid var(--borda);
  border-radius: 8px; background: var(--superficie); overflow: hidden; }
.sugestoes button { display: block; width: 100%; text-align: left; background: none;
  border: 0; padding: 8px 10px; font-size: 12.5px; cursor: pointer; font-family: inherit;
  color: var(--texto); }
.sugestoes button:hover { background: var(--realce); }
.sugestoes i { display: block; padding: 8px 10px; font-size: 12px; color: var(--texto-fraco); }

/* A conta da venda quando há especial: nota + especial = venda. Fica acima da tabela de
   parcelas porque é a leitura que explica por que a soma delas passa do valor do pedido. */
.resumo-especial { display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline;
  background: var(--realce); border: 1px solid var(--borda); border-radius: 8px;
  padding: 9px 12px; margin: 8px 0 10px; font-size: 12px; color: var(--texto-medio); }
.resumo-especial b { display: block; font-size: 15px; color: var(--texto); }
.resumo-especial .total b { color: var(--vermelho); }
.resumo-especial i { flex-basis: 100%; font-size: 11px; color: var(--texto-fraco);
  font-style: normal; }

/* A comissão virou campo digitável dentro do resumo do pedido. Precisa parecer parte do
   resumo, e não um formulário colado nele. */
.campo-comissao { display: flex; flex-direction: column; gap: 2px; }
.campo-comissao span { font-size: 11px; color: var(--texto-fraco); }
.campo-comissao input { width: 84px; padding: 4px 7px; font-size: 15px; font-weight: 700;
  border: 1px solid var(--borda-forte); border-radius: 6px; font-family: inherit;
  text-align: right; }

/* A grade de telas por pessoa. O que está diferente do padrão da função ganha a cor de
   recado — assim o administrador enxerga o que ele mesmo mexeu, sem ler item a item. */
.grade-telas { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 6px; margin-top: 12px; }
.tela-permissao { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border: 1px solid var(--borda); border-radius: 7px; font-size: 12.5px; cursor: pointer;
  color: var(--texto); }
.tela-permissao:hover { border-color: var(--texto-fraco); }
.tela-permissao.mudada { border-color: var(--laranja); background: #fff7ed;
  color: #9a3412; font-weight: 600; }
[data-tema="escuro"] .tela-permissao.mudada { background: rgba(234,88,12,.14);
  color: #fdba74; }
.tela-permissao.trancada { opacity: .5; cursor: not-allowed; }

.faixa-atualizacao { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
  border-radius: 9px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }
[data-tema="escuro"] .faixa-atualizacao { background: rgba(234,88,12,.14);
  border-color: rgba(234,88,12,.35); color: #fdba74; }
.cartao-interno.atualizacao.pendente { border-left: 3px solid var(--laranja); }
.topo-atualizacao { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; }
/* O titulo da novidade e' titulo, e nao rotulo de secao. Dentro de `.cartao-interno` o
   h3 vira 12px em maiusculas espacadas — bom para "Estoque inicial", pessimo para o nome
   de uma atualizacao: o titulo saia menor que a data embaixo dele, e a tela parecia vazia.
   Aqui ele volta a ter cara de titulo. */
.topo-atualizacao h3 {
  margin: 0 0 2px; font-size: 15.5px; font-weight: 700; text-transform: none;
  letter-spacing: -.01em; color: var(--texto); line-height: 1.25;
}
.topo-atualizacao .sub { font-size: 11.5px; color: var(--fraco); }
.resumo-atualizacao { font-size: 13.5px; color: var(--texto-medio); margin: 8px 0 6px; }
.lista-mudancas { margin: 0; padding-left: 18px; font-size: 13px; color: var(--texto-medio);
  line-height: 1.55; }
.acoes-atualizacao { display: flex; gap: 8px; margin-top: 13px; flex-wrap: wrap; }
.acoes-atualizacao .acao[disabled] { opacity: .5; cursor: not-allowed; }
.decidida { margin-top: 9px; }
/* Atualização em uma linha: versão, título curto e os botões. O detalhe abre embaixo. */
.linha-atualizacao { display: flex; justify-content: space-between; align-items: center;
  gap: 10px 14px; flex-wrap: wrap; }
.nome-atualizacao { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.versao-atualizacao { font-size: 11.5px; color: var(--fraco); font-weight: 600; }
.nome-atualizacao b { font-size: 15px; color: var(--texto); line-height: 1.25; }
.botoes-atualizacao { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.botoes-atualizacao .acao.pequena, .detalhe-atualizacao .acao.pequena {
  width: auto; padding: 8px 14px; font-size: 13.5px; }
.detalhe-atualizacao { margin-top: 10px; border-top: 1px solid var(--borda); padding-top: 8px; }
.detalhe-atualizacao .sub { font-size: 11.5px; color: var(--fraco); margin-top: 8px; }
.link-discreto { background: none; border: 0; padding: 0; margin-top: 10px; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--fraco); text-decoration: underline; }
.ja-instaladas { margin-top: 18px; }
.ja-instaladas summary { cursor: pointer; font-size: 13px; color: var(--texto-medio);
  font-weight: 600; margin-bottom: 10px; }
.ja-instaladas .cartao-interno.atualizacao { opacity: .85; }
.termo-recusa { background: var(--realce); border: 1px solid var(--borda);
  border-radius: 8px; padding: 12px; font-size: 12.5px; line-height: 1.5; }
.termo-recusa .marcar { display: flex; gap: 9px; align-items: flex-start; }
.selo.aceita { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
[data-tema="escuro"] .selo.aceita { background: rgba(34,197,94,.16); color: #86efac;
  border-color: rgba(34,197,94,.35); }
.selo.cinza-claro { background: var(--realce); color: var(--texto-medio);
  border: 1px solid var(--borda); }

/* ------------------------------------------------- a faixa de números do painel
 *
 * Os quatro números do período numa faixa única, na cor da coluna e do topo. O painel era
 * uma folha branca, e o que se abre o sistema para ver competia com o mapa e com a lista
 * de pedidos. Aqui eles se leem do outro lado da mesa.
 *
 * Escura nos dois temas, como a coluna: por isso cor fixa e não token em tudo o que está
 * dentro. O miolo do painel continua claro — é onde se lê por horas, e escuro cansa.
 */
.indicadores.faixa-numeros {
  background: #232a4d; border-radius: 12px; padding: 3px; gap: 1px;
}
.faixa-numeros .indicador {
  background: transparent; border: 0; border-radius: 9px; padding: 14px 16px;
}
.faixa-numeros .indicador span { color: rgba(255, 255, 255, .58); }
.faixa-numeros .indicador b { color: #fff; font-size: 22px; }
.faixa-numeros .indicador small { color: rgba(255, 255, 255, .5); }
.faixa-numeros .indicador:hover { background: rgba(255, 255, 255, .08); border: 0; }
/* O vencido continua avisando: o vermelho da marca some sobre fundo escuro, então aqui
   ele clareia. Perder o aviso seria pior do que perder a cor exata. */
.faixa-numeros .indicador.vermelho b { color: #ff9ea3; }
.faixa-numeros .indicador.azul b { color: #9fd8f2; }

/* O catálogo na aba Catálogo, do tamanho da tela: é para ler a página, não uma miniatura. */
.visualizar-catalogo { display: block; width: 100%; height: calc(100vh - 230px);
  min-height: 520px; border: 1px solid var(--borda); border-radius: 8px; margin-top: 10px;
  background: #525659; }

/* A janela do pedido: toda a área do conteúdo, com o menu do alto e o lateral à vista. */
.fundo-modal.cheio { right: 0; bottom: 0; padding: 12px; align-items: stretch;
  background: rgba(17, 24, 39, .35); }
.fundo-modal.cheio[hidden] { display: none; }
.fundo-modal.cheio .modal, .fundo-modal.cheio .modal.largo { max-width: none; width: 100%;
  display: flex; flex-direction: column; min-height: 100%; height: max-content; }
.fundo-modal.cheio .corpo-modal { flex: 1; }
.modal .minimizar { background: none; border: 1px solid var(--borda); border-radius: 6px;
  font-size: 18px; line-height: 1; width: 30px; height: 28px; cursor: pointer;
  color: var(--fraco); font-family: inherit; }
.modal .minimizar:hover { color: var(--texto); border-color: var(--fraco); }
/* O pedido minimizado espera no canto de baixo, por cima de qualquer tela. */
.bandeja-minimizados { position: fixed; right: 18px; bottom: 18px; z-index: 80;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.pilula-minimizada { background: #232a4d; color: #fff; border: 0; border-radius: 22px;
  padding: 10px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.3); font-family: inherit; }
.pilula-minimizada:hover { background: #313b69; }

/* Fica no fim do arquivo de propósito: as regras da faixa e do sino vêm antes, e com a
   mesma força a que vem depois ganha.
   Celular (390 px): a faixa do alto tinha título, sino, tema, engrenagem, empresa, pessoa e
   Sair numa linha só, e o Sair era empurrado para fora da tela — a página inteira passava a
   rolar para o lado. Aqui saem os nomes da empresa e de quem entrou (o logo fica), o título
   encolhe com reticências, e os botões ficam do tamanho do dedo, sem sobra. */
@media (max-width: 560px) {
  .topo { padding: 9px 10px; gap: 6px; }
  .topo h1 { font-size: 15px; flex: 0 1 auto; min-width: 0; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .topo .respiro { flex: 1 1 0; min-width: 0; }
  .topo .quem-sou > div { display: none; }
  .topo .quem-sou { gap: 0; }
  .topo .trocar-tema, .topo .sino { flex: 0 0 auto; }
  .topo #sair-area { flex: 0 0 auto; padding: 6px 9px !important; font-size: 12.5px !important; }
  /* A lista do sino desce presa à tela, e não ao sino: com 320 px fixos a partir do sino
     ela saía pela borda direita da tela. */
  .lista-avisos { position: fixed; top: 56px; left: 8px; right: 8px; min-width: 0;
    max-height: 70vh; overflow-y: auto; }
}

/* Pedido de 21/09/2026: as informações do cliente estavam claras e miúdas demais para ler
   de relance. Tudo o que é dado do cliente fica em negrito e maior; o especial também,
   porque é dinheiro combinado por fora e não pode passar despercebido. */
.cabecalho-pedido .sub { font-size: 13.5px; font-weight: 700; color: var(--texto); }
.ficha-cliente { font-size: 13.5px; }
.numeros-ficha span { font-size: 11.5px; font-weight: 700; color: var(--texto-medio); }
.numeros-ficha b { font-size: 16px; font-weight: 800; }
.numeros-ficha i { font-size: 12.5px; font-weight: 700; color: var(--texto-medio); }
.ultimos-pedidos { font-size: 13px; font-weight: 700; color: var(--texto-medio); }
.selo.aguardando { font-size: 12px; font-weight: 800; padding: 3px 8px; }
.resumo-especial { font-size: 13.5px; font-weight: 700; color: var(--texto); }
.resumo-especial b { font-size: 17px; font-weight: 800; }
.resumo-especial i { font-size: 12.5px; font-weight: 700; color: var(--texto-medio); }
/* a linha do produto que alguém tentou pôr de novo pisca, para o olho achar onde mexer */
.linha-repetida td { background: #fff7ed !important; transition: background .3s; }
[data-tema="escuro"] .linha-repetida td { background: rgba(234,88,12,.18) !important; }

/* O olho do campo de senha: fica por dentro do campo, na ponta direita. */
.campo-senha { position: relative; display: block; width: 100%; }
.campo-senha > input { width: 100%; padding-right: 42px !important; box-sizing: border-box; }
.olho-senha { position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
  border: 0; background: none; cursor: pointer; color: var(--texto-medio); border-radius: 6px; }
.olho-senha:hover { background: var(--realce); color: var(--texto); }
.olho-senha svg { width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Embaixo de FATURADO: número da nota e data do faturamento, pequeno e em verde. */
.nota-faturada { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 700;
  color: #15803d; letter-spacing: .02em; white-space: nowrap; background: none; border: 0;
  padding: 0; font-family: inherit; text-align: inherit; }
button.nota-faturada { cursor: pointer; }
button.nota-faturada:hover { text-decoration: underline; }
.nota-faturada.sem-nota { color: #b45309; }
[data-tema="escuro"] .nota-faturada { color: #4ade80; }
[data-tema="escuro"] .nota-faturada.sem-nota { color: #fbbf24; }

/* No pedido, o convite para cadastrar um CNPJ que ainda não é cliente. */
.achados-cliente .cadastrar-cnpj { color: var(--azul); font-weight: 700; }

/* Selo azul embaixo de FATURADO: parcela especial que já foi num arquivo CNAB */
.selo-boleto { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px;
  font-size: 10.5px; font-weight: 700; color: #0372A3; background: #e0f2fe;
  padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.selo-boleto svg { width: 12px; height: 12px; }
[data-tema="escuro"] .selo-boleto { color: #7dd3fc; background: rgba(3, 114, 163, .25); }

/* Inventário: a linha que fecha cada item e os totais por armazém no pé da lista.
   Na conferência do galpão a folha é lida de longe, então aqui tudo é negrito e um
   ponto maior do que a linha comum (Richard, 22/09/2026). */
table.grade tr.fecha-item td { font-weight: 800; font-size: 14px; background: var(--realce);
  border-top: 2px solid var(--borda-forte); border-bottom: 2px solid var(--borda-forte); }
table.grade td.total-linha { font-weight: 800; font-size: 14px; }
table.grade tfoot td { font-weight: 800; font-size: 14px; }
table.grade tfoot tr.total-geral td { font-size: 16px; border-top: 2px solid var(--borda-forte); }

/* Catálogo: a página cuja mala grande esgotou precisa de arte nova */
.aviso-trocar-mala { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px;
  background: rgba(234, 88, 12, .12); border: 1px solid rgba(234, 88, 12, .45);
  font-size: 13px; color: var(--texto); }
.aviso-trocar-mala ul { margin: 4px 0 0 18px; }
.aviso-trocar-mala li { margin: 2px 0; }

/* O aviso grande (pedidos.js, alertaGrande): laranja, texto por extenso, um botão de
   ciência. É a cor de recado da casa — "isto espera você" — e por isso não vira decoração
   em mais lugar nenhum. */
.alerta-grande { border: 2px solid var(--laranja); border-radius: 10px; padding: 14px 16px 6px;
  font-size: 14px; line-height: 1.5; background: #fff7ed; color: #431407; }
.alerta-grande .faixa { display: inline-block; background: var(--laranja); color: #fff;
  font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; margin: 0 0 10px; }
.alerta-grande p { margin: 0 0 10px; }
.alerta-grande .escolha { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0;
  padding: 8px 10px; border: 1px solid #fed7aa; border-radius: 8px; background: #fff; cursor: pointer; }
.alerta-grande .escolha input { width: auto; margin-top: 3px; }
[data-tema="escuro"] .alerta-grande { background: rgba(234,88,12,.12); color: #fde68a; }
[data-tema="escuro"] .alerta-grande .escolha { background: rgba(0,0,0,.25); border-color: rgba(234,88,12,.4); }

/* Pedido ou orçamento, escolhido no alto do formulário de pedido novo. */
.tipo-do-lancamento { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.tipo-do-lancamento label { flex: 1 1 220px; display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 12px; border: 1px solid var(--borda); border-radius: 8px; cursor: pointer;
  font-size: 13px; background: var(--superficie); }
.tipo-do-lancamento label:has(input:checked) { border-color: var(--laranja); }
.tipo-do-lancamento input { width: auto; margin-top: 3px; }
.tipo-do-lancamento b { display: block; }
.tipo-do-lancamento span { color: var(--texto-medio); font-size: 12px; }

/* ---- Atendimento pelo WhatsApp: lista à esquerda, conversa à direita (30/09/2026) */
.atendimento { display: grid; grid-template-columns: 300px 1fr; gap: 14px; min-height: 520px; }
.atendimento-lista { background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.atendimento-topo { padding: 10px; border-bottom: 1px solid var(--borda); }
.atendimento-topo input { width: 100%; }
#atendimento-conversas { overflow-y: auto; max-height: 70vh; }
.atendimento-item { display: block; width: 100%; text-align: left; background: none;
  border: 0; border-bottom: 1px solid var(--borda); padding: 10px 12px; cursor: pointer;
  color: var(--texto); font: inherit; }
.atendimento-item:hover { background: var(--realce); }
.atendimento-item.aberta { background: var(--realce); box-shadow: inset 3px 0 0 var(--azul); }
.atendimento-item.espera { box-shadow: inset 3px 0 0 var(--laranja); }
.atendimento-item .linha-nome { display: flex; justify-content: space-between; gap: 8px; }
.atendimento-item .ultima { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atendimento-conversa { background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 10px; display: flex; flex-direction: column; min-height: 520px; }
.atendimento-cabeca { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--borda); }
.atendimento-acoes { display: flex; gap: 8px; align-items: center; }
.atendimento-falas.conversa-robo { flex: 1; max-height: none; margin: 0; padding: 14px; }
.atendimento-falas .fala.gente { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
[data-tema="escuro"] .atendimento-falas .fala.gente { background: #12301f; color: #86efac; border-color: #166534; }
.atendimento-falas .fala .quem { font-size: 11px; opacity: .75; margin-bottom: 3px; }
.atendimento-responder { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--borda); align-items: flex-end; }
.atendimento-responder textarea { flex: 1; resize: vertical; }
@media (max-width: 800px) { .atendimento { grid-template-columns: 1fr; } .atendimento-conversa { min-height: 60vh; } }
.atendimento-falas .fala.nota { align-self: center; max-width: 90%; background: #fef3c7; color: #78350f;
  border: 1px dashed #f59e0b; font-size: 12px; }
[data-tema="escuro"] .atendimento-falas .fala.nota { background: #3a2e0c; color: #fcd34d; border-color: #b45309; }

.atendimento-prontas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.atendimento-prontas .mini { white-space: nowrap; }

.avisos-painel { padding: 12px 14px; overflow: auto; }
.avisos-painel .linha { display: flex; gap: 12px; flex-wrap: wrap; }
.avisos-painel .campo { flex: 1; min-width: 200px; }
.atendimento-topo { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.atendimento-topo input { flex: 1 1 100%; min-width: 0; }

/* ------------------------------------------------------------ WhatsApp flutuante
   O ícone no topo, a lista de quem mandou e a janela que fica por cima do trabalho, com
   contatos à esquerda e conversa à direita (Richard, 04/10/2026). Mora no body: trocar de
   aba não a derruba. Arrasta pelo cabeçalho, redimensiona pelo canto, "aumenta" no lugar. */
.caixa-zap { position: relative; display: flex; }
.sino.zap { display: inline-flex; align-items: center; justify-content: center; }
.sino.zap.aceso { border-color: #25d366; color: #25d366; }
.sino.zap.aceso .conta-sino { background: #25d366; }
.sino.zap.aceso.de-vendedor { border-color: var(--laranja); color: var(--laranja); }
.sino.zap.aceso.de-vendedor .conta-sino { background: var(--laranja); }
.zap-tipo { display: inline-block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 1px 6px; border-radius: 999px; margin-right: 5px; vertical-align: middle; color: #fff; background: #25d366; }
.zap-tipo.vendedor { background: var(--laranja); }
.zap-tipo.desconhecido { background: #64748b; }
.lista-zap { min-width: 340px; max-height: 70vh; overflow-y: auto; }
.zap-linha .ok-aviso { font-size: 11px; padding: 2px 8px; }

/* As cores da janela são as do WhatsApp, e não os tokens do sistema: o botão ☾/☀ no
   cabeçalho troca entre o padrão dia e o padrão noite sem mexer no tema do XFutto
   (Richard, 04/10/2026). Letra sobre o verde do cabeçalho é #fff fixo nos dois. */
.zap-janela, .zap-janela.dia { --zap-cabeca: #008069; --zap-painel: #fff; --zap-fundo: #efeae2; --zap-marca: url(/static/zap-fundo-dia.png);
  --zap-texto: #111b21; --zap-fraco: #667781; --zap-borda: #e9edef; --zap-realce: #f0f2f5; --zap-campo: #fff;
  --zap-rodape: #f0f2f5; --zap-balao-in: #fff; --zap-balao-out: #d9fdd3; --zap-balao-texto: #111b21;
  --zap-nota: #fef3c7; --zap-nota-texto: #78350f; --zap-nota-borda: #fcd34d; }
.zap-janela.noite { --zap-cabeca: #202c33; --zap-painel: #111b21; --zap-fundo: #0b141a; --zap-marca: url(/static/zap-fundo-noite.png);
  --zap-texto: #e9edef; --zap-fraco: #8696a0; --zap-borda: #222d34; --zap-realce: #2a3942; --zap-campo: #2a3942;
  --zap-rodape: #202c33; --zap-balao-in: #202c33; --zap-balao-out: #005c4b; --zap-balao-texto: #e9edef;
  --zap-nota: #3a2e0c; --zap-nota-texto: #fcd34d; --zap-nota-borda: #b45309; color-scheme: dark; }
.zap-janela { position: fixed; right: 18px; bottom: 18px; width: 420px; height: 580px; min-width: 320px; min-height: 360px;
  max-width: calc(100vw - 20px); max-height: calc(100vh - 20px); resize: both;
  background: var(--zap-painel); color: var(--zap-texto); border: 1px solid var(--zap-borda); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.28); z-index: 90; display: flex; flex-direction: column; overflow: hidden; }
.zap-janela.grande { width: min(960px, calc(100vw - 40px)) !important; height: min(760px, calc(100vh - 40px)) !important; }
.zap-cabeca { display: flex; align-items: center; gap: 8px; padding: 9px 10px; background: var(--zap-cabeca); color: #fff; cursor: move; flex: 0 0 auto; }
.zap-quem { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.zap-quem b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zap-quem small { font-size: 11px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zap-botoes { display: flex; gap: 4px; flex: 0 0 auto; }
.zap-bt { background: rgba(255,255,255,.14); border: 0; color: #fff; width: 28px; height: 28px; border-radius: 7px;
  font-size: 16px; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.zap-bt:hover { background: rgba(255,255,255,.28); }
.zap-bt[hidden] { display: none; }
.zap-corpo { flex: 1; min-height: 0; display: flex; }
.zap-contatos { display: none; flex-direction: column; width: 100%; min-width: 0; border-right: 1px solid var(--zap-borda); background: var(--zap-painel); }
.zap-conversa { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Janela estreita: ou a lista, ou a conversa. Larga ou grande: as duas, lado a lado. */
.zap-janela.so-lista .zap-contatos { display: flex; }
.zap-janela.so-lista .zap-conversa { display: none; }
.zap-janela.larga .zap-contatos, .zap-janela.grande .zap-contatos { display: flex; width: 300px; flex: 0 0 300px; }
.zap-janela.larga .zap-conversa, .zap-janela.grande .zap-conversa { display: flex; }
.zap-janela.larga .zap-voltar, .zap-janela.grande .zap-voltar { visibility: hidden; }
.zap-busca { padding: 8px; border-bottom: 1px solid var(--zap-borda); display: flex; gap: 6px; align-items: center; background: var(--zap-rodape); }
.zap-busca input { flex: 1; min-width: 0; box-sizing: border-box; font-size: 13px; background: var(--zap-campo); color: var(--zap-texto); border-color: var(--zap-borda); }
.zap-janela .zap-mais { background: var(--zap-cabeca); font-size: 18px; width: 30px; height: 30px; }
.zap-janela .zap-mais:hover { background: var(--zap-cabeca); filter: brightness(1.15); }
.zap-contatos-lista { flex: 1; overflow-y: auto; }
.zap-contatos-rodape { padding: 6px 8px; border-top: 1px solid var(--zap-borda); text-align: center; background: var(--zap-rodape); }
.zap-contatos-rodape .mini { color: var(--zap-fraco); }
.zap-contato { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--zap-borda); padding: 9px 10px; cursor: pointer; font-family: inherit; color: var(--zap-texto); }
.zap-contato:hover, .zap-contato.aberto { background: var(--zap-realce); }
.zap-contato.espera b { color: var(--laranja); }
.zap-avatar { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #fff; background: #25d366; }
.zap-avatar.vendedor { background: var(--laranja); }
.zap-avatar.desconhecido { background: #64748b; }
.zap-avatar.equipe { background: #6366f1; }
.zap-contato-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zap-contato-linha { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.zap-contato-linha b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zap-contato-linha small { font-size: 11px; color: var(--zap-fraco); flex: 0 0 auto; }
.zap-previa { flex: 1 1 auto !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zap-novas { flex: 0 0 auto; background: #25d366; color: #fff; border-radius: 999px; min-width: 18px; padding: 0 6px; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.zap-espera { color: var(--laranja); font-size: 10px; }
/* O fundo da conversa leva o logo do XFutto repetido, como marca d'água — para não ficar
   a janela branca atrás dos balões (Richard, 04/10/2026). O azulejo já nasce quase
   transparente (zap-fundo-dia/noite.png), por cima da cor de fundo do WhatsApp. */
.zap-conversa { background: var(--zap-fundo) var(--zap-marca) repeat; background-size: 240px 240px; }
.zap-vazio { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--zap-fraco); font-size: 13px; padding: 20px; text-align: center; }
.zap-vazio[hidden], .zap-falas[hidden], .zap-responder[hidden] { display: none; }
.zap-falas.conversa-robo { flex: 1; max-height: none; margin: 0; padding: 12px; }
/* Balões como no WhatsApp: quem escreveu de fora fica à esquerda, em branco; o que a casa
   mandou (robô ou gente) fica à direita, em verde. Tela de Atendimento tem a convenção
   antiga; aqui o Richard pediu a cara do WhatsApp. */
.zap-janela .zap-falas .fala { box-shadow: 0 1px 1px rgba(0,0,0,.08); border: 0; }
.zap-janela .zap-falas .fala.cliente { align-self: flex-start; background: var(--zap-balao-in); color: var(--zap-balao-texto);
  border-radius: 12px; border-top-left-radius: 3px; border-bottom-right-radius: 12px; }
.zap-janela .zap-falas .fala.robo, .zap-janela .zap-falas .fala.gente { align-self: flex-end; background: var(--zap-balao-out); color: var(--zap-balao-texto);
  border-radius: 12px; border-top-right-radius: 3px; border-bottom-left-radius: 12px; }
.zap-janela .zap-falas .fala.nota { align-self: center; background: var(--zap-nota); color: var(--zap-nota-texto); border: 1px solid var(--zap-nota-borda); }
.zap-janela .zap-falas .fala .quem { opacity: .65; }
.zap-janela .zap-falas .recado-erro, .zap-janela .zap-falas .vazio { align-self: center; background: var(--zap-painel); color: var(--zap-fraco); padding: 6px 10px; border-radius: 8px; }
.zap-prontas { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 10px 0; }
.zap-prontas:empty { display: none; }
.zap-prontas .mini { background: var(--zap-painel); color: var(--zap-texto); border-color: var(--zap-borda); }
.zap-responder { display: flex; gap: 8px; align-items: flex-end; padding: 10px; border-top: 1px solid var(--zap-borda); background: var(--zap-rodape); }
.zap-responder textarea { flex: 1; min-width: 0; resize: none; font-family: inherit; font-size: 13.5px; background: var(--zap-campo); color: var(--zap-texto); border-color: var(--zap-borda); }
.zap-responder textarea:disabled { font-size: 12px; color: var(--zap-fraco); }
.zap-janela .zap-responder .zap-enviar { background: var(--zap-cabeca); border-color: var(--zap-cabeca); color: #fff; }
/* O formulário de contato cobre a janela por dentro — nada de window.prompt. */
.zap-form { position: absolute; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 2; padding: 16px; }
.zap-form[hidden] { display: none; }
.zap-form-cartao { background: var(--zap-painel); color: var(--zap-texto); border-radius: 12px; padding: 16px; width: 100%; max-width: 340px;
  display: flex; flex-direction: column; gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.zap-form-cartao b { font-size: 14px; }
.zap-form-cartao small.zap-form-ajuda { color: var(--zap-fraco); font-size: 12px; line-height: 1.4; }
.zap-form-cartao label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--zap-fraco); }
.zap-form-cartao input { font-size: 14px; background: var(--zap-campo); color: var(--zap-texto); border-color: var(--zap-borda); }
.zap-form-cartao input:disabled { opacity: .7; }
.zap-form-botoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.zap-form-botoes .mini { color: var(--zap-texto); border-color: var(--zap-borda); }
.zap-janela .zap-form-botoes .acao { background: var(--zap-cabeca); border-color: var(--zap-cabeca); color: #fff; }
/* Filtros, menu da conversa, seleção em lote, etiquetas e listas de transmissão
   (06/10/2026) — "como um WhatsApp de verdade". */
.zap-filtros { display: flex; gap: 6px; padding: 7px 8px; overflow-x: auto; flex: 0 0 auto; border-bottom: 1px solid var(--zap-borda);
  background: var(--zap-painel); scrollbar-width: thin; }
.zap-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 999px; padding: 4px 11px;
  font: inherit; font-size: 12px; cursor: pointer; background: var(--zap-realce); color: var(--zap-fraco); white-space: nowrap; }
.zap-chip b { font-size: 11px; color: var(--zap-texto); }
.zap-chip:hover { filter: brightness(.96); }
.zap-chip.ativo { background: #d9fdd3; color: #008069; font-weight: 600; }
.zap-janela.noite .zap-chip.ativo { background: #0a332c; color: #25d366; }
.zap-chip.ativo b { color: inherit; }
.zap-bolinha { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--etq); flex: 0 0 auto; }
.zap-bolinha.grande { width: 22px; height: 22px; border: 2px solid var(--zap-painel); box-shadow: 0 0 0 1px var(--zap-borda); cursor: pointer; padding: 0; }
.zap-contato { position: relative; }
.zap-contato.marcada { background: var(--zap-realce); }
.zap-hora-nova { color: #25d366 !important; font-weight: 600; }
.zap-icones { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }
.zap-icones i { font-style: normal; font-size: 11px; color: var(--zap-fraco); }
.zap-icones .zap-estrela { color: #f5a623; font-size: 12px; }
.zap-novas.zap-ponto { min-width: 10px; width: 10px; height: 10px; padding: 0; line-height: 10px; }
.zap-seta { display: none; border: 0; background: none; color: var(--zap-fraco); font-size: 15px; line-height: 1; padding: 0 2px; cursor: pointer; }
.zap-contato:hover .zap-seta, .zap-contato:focus-within .zap-seta { display: inline-block; }
@media (hover: none) { .zap-seta { display: inline-block; } }
.zap-etiquetas-linha { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.zap-etq { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; line-height: 1.5; padding: 0 7px; border-radius: 999px;
  color: var(--zap-texto); background: color-mix(in srgb, var(--etq) 22%, transparent); border: 1px solid color-mix(in srgb, var(--etq) 55%, transparent); white-space: nowrap; }
.zap-etq::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--etq); }
.zap-check { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--zap-fraco); display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; box-sizing: border-box; }
.zap-check.marcado, .zap-check.parcial { background: #25d366; border-color: #25d366; }
.zap-ocultas-linha { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; border-bottom: 1px solid var(--zap-borda);
  background: none; color: var(--zap-texto); font: inherit; font-size: 13px; padding: 10px 14px; cursor: pointer; text-align: left; }
.zap-ocultas-linha:hover { background: var(--zap-realce); }
.zap-ocultas-linha small { color: var(--zap-fraco); flex: 1; }
.zap-selecao { flex: 0 0 auto; border-top: 1px solid var(--zap-borda); background: var(--zap-rodape); padding: 7px 8px; display: flex; flex-direction: column; gap: 6px; }
.zap-selecao[hidden] { display: none; }
.zap-selecao-topo { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.zap-selecao-topo b { flex: 1; }
.zap-selecao-acoes { display: flex; gap: 5px; flex-wrap: wrap; }
.zap-janela .zap-selecao .mini, .zap-janela .zap-sobre .mini { background: var(--zap-painel); color: var(--zap-texto); border-color: var(--zap-borda); }
.zap-janela .mini.perigo, .zap-janela .zap-menu .perigo { color: #dc2626 !important; }
.zap-janela .mini:disabled { opacity: .45; cursor: default; }
.zap-menu { position: absolute; z-index: 4; min-width: 210px; max-height: 80%; overflow-y: auto; background: var(--zap-painel); color: var(--zap-texto);
  border: 1px solid var(--zap-borda); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.22); padding: 5px 0; }
.zap-menu[hidden] { display: none; }
.zap-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; color: inherit; font: inherit; font-size: 13px; padding: 8px 16px; cursor: pointer; }
.zap-menu button:hover { background: var(--zap-realce); }
.zap-menu hr { border: 0; border-top: 1px solid var(--zap-borda); margin: 4px 0; }
.zap-sobre { z-index: 3; }
.zap-sobre-cartao { max-height: calc(100% - 8px); overflow-y: auto; max-width: 380px; }
.zap-sobre-cartao b { font-size: 14px; }
.zap-sobre-cartao textarea, .zap-sobre-cartao select, .zap-sobre-cartao input[type=search] { font: inherit; font-size: 13.5px; background: var(--zap-campo);
  color: var(--zap-texto); border-color: var(--zap-borda); box-sizing: border-box; width: 100%; }
.zap-sobre-cartao textarea { resize: vertical; }
.zap-janela .zap-perigo { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; width: auto; padding: 8px 16px; }
.zap-janela .zap-sobre .acao { width: auto; padding: 8px 16px; background: var(--zap-cabeca); border-color: var(--zap-cabeca); color: #fff; }
.zap-etq-lista, .zap-listas { display: flex; flex-direction: column; gap: 2px; }
.zap-opcao { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none; color: var(--zap-texto); font: inherit; font-size: 13px;
  padding: 7px 6px; border-radius: 8px; cursor: pointer; text-align: left; }
.zap-opcao:hover { background: var(--zap-realce); }
.zap-opcao small { color: var(--zap-fraco); font-size: 11px; margin-left: auto; }
.zap-opcao-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zap-etq-nova { display: flex; gap: 6px; }
.zap-etq-nova input { flex: 1; min-width: 0; font-size: 13px; background: var(--zap-campo); color: var(--zap-texto); border-color: var(--zap-borda); }
.zap-etq-editar { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.zap-etq-editar input { flex: 1; min-width: 0; font-size: 13px; background: var(--zap-campo); color: var(--zap-texto); border-color: var(--zap-borda); }
.zap-etq-editar small { color: var(--zap-fraco); font-size: 11px; min-width: 18px; text-align: right; }
.zap-lista-linha { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--zap-borda); }
.zap-lista-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zap-lista-nome b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zap-lista-nome small { color: var(--zap-fraco); font-size: 11px; }
.zl-busca-linha { display: flex; gap: 6px; }
.zl-busca-linha select { width: auto; max-width: 48%; }
.zl-contatos { max-height: 230px; overflow-y: auto; border: 1px solid var(--zap-borda); border-radius: 8px; padding: 2px; }
.zl-resultado:empty { display: none; }
.zap-pill { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--zap-cabeca); color: #fff;
  cursor: pointer; font-weight: 700; font-size: 13px; }
.zap-pill[hidden] { display: none; }
.zap-pill-conta:empty { display: none; }
.zap-janela.minimizada { height: auto !important; width: auto !important; min-height: 0; min-width: 0; max-width: 320px; resize: none; }
.zap-janela.minimizada .zap-cabeca, .zap-janela.minimizada .zap-corpo { display: none; }
@media (max-width: 560px) {
  .zap-janela, .zap-janela.grande { right: 0 !important; bottom: 0 !important; left: 0 !important; top: 0 !important; width: auto !important; height: 100vh !important; max-height: 100vh; border-radius: 0; resize: none; }
  .zap-janela.minimizada { left: auto !important; right: 10px !important; top: auto !important; bottom: 10px !important; height: auto !important; border-radius: 12px; }
  .lista-zap { position: fixed; top: 56px; left: 8px; right: 8px; min-width: 0; }
}
@media print { .zap-janela, .caixa-zap { display: none !important; } }