/* 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: #072a40; -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: #e8590c; --azul: #0372a3; --roxo: #0b3c5d; --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, #0b3c5d 0%, #072a40 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 3T Transportes 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: #0a3552; 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-3t.png'), url('/static/logo-3t.png'),
                    url('/static/logo-3t.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: #0a3552; color: #fff; border-bottom: 1px solid #0b3c5d;
  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-3t.png'), url('/static/logo-3t.png'),
                    url('/static/logo-3t.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
   3T Transportes. 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: #c94a08; }
.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 a 3T Transportes 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: #e8590c; }
/* "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: #e8590c !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 na 3T Transportes 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: #0a3552; 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: #0a3552; 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: #0b3c5d; }

/* 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 da 3T Transportes
   (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 da 3T Transportes 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; }
.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; } }

/* ================================================================== ENTRADA DA 3T: O PORTO
   Pedido do Richard em 05/10/2026: a entrada é a vitrine para o cliente, e a cara é de porto —
   navio, guindaste, contêiner, coisa grande. A cena é o SVG de porto.js; aqui ficam o véu que
   segura a leitura, a vitrine à esquerda e o cartão de vidro à direita. Cores da 3T:
   azul-marinho #0B3C5D e laranja #E8590C. */
.palco.porto { position: relative; overflow: hidden; background: #030d18; isolation: isolate;
  gap: clamp(32px, 6vw, 110px); padding: 40px clamp(16px, 5vw, 80px); }
.cena-porto { position: absolute; inset: 0; z-index: -2; }
.porto-svg { width: 100%; height: 100%; display: block; }
.veu-porto { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 78% 50%, rgba(3,13,24,.55), transparent 70%),
    linear-gradient(90deg, rgba(3,13,24,.82) 0%, rgba(3,13,24,.45) 42%, rgba(3,13,24,.15) 70%, rgba(3,13,24,.35) 100%),
    linear-gradient(0deg, rgba(3,13,24,.55), transparent 35%); }

/* Movimento da cena: devagar, como um porto de verdade visto de longe. */
.navio-viagem { animation: navegar 150s linear infinite; animation-delay: -62s; }
@keyframes navegar { from { transform: translate(-1100px, 290px) scale(1.2); }
                     to   { transform: translate(1960px, 290px) scale(1.2); } }
.navio-longe { animation: navegar-longe 260s linear infinite; animation-delay: -90s; }
@keyframes navegar-longe { from { transform: translate(1960px, 520px) scale(.3); }
                           to   { transform: translate(-300px, 520px) scale(.3); } }
.via-caminhao { animation: rodar 26s linear infinite; animation-delay: -8s; }
@keyframes rodar { from { transform: translate(-220px, 1006px); } to { transform: translate(2100px, 1006px); } }
.pisca { animation: piscar 2.4s ease-in-out infinite; }
@keyframes piscar { 0%, 60%, 100% { opacity: .15; } 70%, 85% { opacity: 1; } }
.cintila { animation: cintilar 4s ease-in-out infinite; }
@keyframes cintilar { 50% { opacity: .1; } }
.brilho { animation: brilhar 6s ease-in-out infinite; }
@keyframes brilhar { 50% { opacity: .03; transform: translateX(18px); } }
.cabo { animation: icar 9s ease-in-out infinite; transform-box: fill-box; transform-origin: top; }
@keyframes icar { 50% { transform: scaleY(1.6); } }
@media (prefers-reduced-motion: reduce) {
  .navio-viagem, .navio-longe, .via-caminhao, .pisca, .cintila, .brilho, .cabo { animation: none; }
  .navio-viagem { transform: translate(380px, 290px) scale(1.2); }
  .navio-longe { transform: translate(1300px, 520px) scale(.3); }
  .via-caminhao { transform: translate(300px, 1006px); }
}

/* A vitrine: o que a 3T faz, em letra grande, à esquerda. */
.palco.com-vitrine { justify-content: space-between; max-width: none; }
.vitrine-3t { color: #fff; max-width: 560px; animation: subir .9s cubic-bezier(.2,.7,.2,1) both; }
.selo-3t-topo { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: #ffb37a;
  padding: 7px 14px; border: 1px solid rgba(255,179,122,.35); border-radius: 99px;
  background: rgba(232,89,12,.12); backdrop-filter: blur(6px); }
.selo-3t-topo span { width: 7px; height: 7px; border-radius: 50%; background: #ff7a2e;
  box-shadow: 0 0 0 0 rgba(255,122,46,.7); animation: pulso 2s infinite; }
@keyframes pulso { 70% { box-shadow: 0 0 0 10px rgba(255,122,46,0); } 100% { box-shadow: 0 0 0 0 rgba(255,122,46,0); } }
.vitrine-3t h1 { font-size: clamp(38px, 4.6vw, 68px); line-height: 1.02; letter-spacing: -.035em;
  margin: 22px 0 18px; font-weight: 800; text-shadow: 0 6px 40px rgba(0,0,0,.45); }
.vitrine-3t h1 em { font-style: normal; background: linear-gradient(92deg, #ffb37a, #e8590c 60%, #ff7a2e);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.vitrine-3t > p { font-size: 17px; line-height: 1.55; color: rgba(225,236,245,.86); margin: 0 0 28px; max-width: 470px; }
.trilhos { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trilhos li { padding: 14px 16px; border-radius: 12px; background: rgba(11,60,93,.38);
  border: 1px solid rgba(159,211,236,.16); backdrop-filter: blur(10px); border-left: 3px solid #e8590c; }
.trilhos b { display: block; font-size: 14px; color: #fff; }
.trilhos span { display: block; font-size: 12.5px; color: rgba(207,224,236,.78); margin-top: 3px; line-height: 1.35; }
.numeros-3t { display: flex; gap: 34px; }
.numeros-3t b { display: block; font-size: 38px; font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1; }
.numeros-3t span { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: #ffb37a; }

/* O cartão de vidro. */
.porto .coluna-cartao { position: relative; width: 100%; max-width: 440px; flex-shrink: 0;
  animation: subir .9s .15s cubic-bezier(.2,.7,.2,1) both; }
.porto .cartao-palco.largo, .porto .cartao-palco.amplo { margin: 0 auto; }
.porto:not(.com-vitrine) .coluna-cartao { max-width: 760px; }
.porto .cartao-palco { background: rgba(6,22,36,.72); color: #eef5fa; border-radius: 20px;
  border: 1px solid rgba(159,211,236,.18); backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 40px 100px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); padding: 36px; }
.porto .cartao-palco::before { content: ''; position: absolute; left: 36px; right: 36px; top: 0; height: 3px;
  border-radius: 0 0 3px 3px; background: linear-gradient(90deg, #0b3c5d, #e8590c, #ffb37a); }
.porto .marca b { color: #fff; letter-spacing: .1em; }
.porto .marca img { width: 48px; height: 48px; border-radius: 11px; }
.porto .marca-sub { color: #ffb37a; }
.porto .campo label { color: rgba(225,236,245,.9); }
.porto .campo input, .porto .campo select, .porto .campo textarea { background: rgba(255,255,255,.06);
  border: 1px solid rgba(159,211,236,.25); color: #fff; padding: 12px 13px; border-radius: 10px; }
.porto .campo input::placeholder { color: rgba(207,224,236,.45); }
.porto .campo input:focus, .porto .campo select:focus, .porto .campo textarea:focus {
  outline: 2px solid #e8590c; outline-offset: -1px; border-color: transparent; background: rgba(255,255,255,.1); }
.porto .dica, .porto .sub, .porto .grupo > h3 { color: rgba(207,224,236,.65); }
.porto .cartao-palco .acao { background: linear-gradient(92deg, #e8590c, #ff7a2e); border: 0; color: #fff; font-weight: 700;
  letter-spacing: .02em; padding: 14px; border-radius: 10px; box-shadow: 0 12px 30px rgba(232,89,12,.35);
  transition: transform .15s, box-shadow .15s; }
.porto .cartao-palco .acao:hover { background: linear-gradient(92deg, #d14f09, #f06a1e); transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(232,89,12,.45); }
.porto .cartao-palco .acao.claro { background: rgba(255,255,255,.08); box-shadow: none; border: 1px solid rgba(159,211,236,.25); }
.porto .elo { color: #9fd3ec; }
.porto .rodape-marca { color: rgba(207,224,236,.6); }
.porto .rodape-marca a { color: #ffb37a; }
.porto .passos div { background: rgba(159,211,236,.18); }
.porto .passos div.agora { background: #e8590c; }
.porto .plano, .porto .plano-vitrine { background: rgba(255,255,255,.04); border-color: rgba(159,211,236,.2); color: #eef5fa; }
.porto .plano.escolhido { background: rgba(232,89,12,.14); border-color: #e8590c; }
@keyframes subir { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

@media (max-width: 980px) {
  .palco.com-vitrine { flex-direction: column; justify-content: center; }
  .vitrine-3t { max-width: 600px; text-align: left; }
  .trilhos, .numeros-3t { display: none; }
  .vitrine-3t h1 { font-size: 34px; margin: 14px 0 8px; }
  .vitrine-3t > p { font-size: 15px; margin-bottom: 0; }
}
@media (max-width: 520px) {
  .palco.porto { padding: 28px 16px; }
  .porto .cartao-palco { padding: 26px 20px; }
  .vitrine-3t > p { display: none; }
}

/* ================================================================== PAINEL DA 3T (logística)
   Centro de operações: números grandes no alto, mapa das rotas, viagens com a barra do
   trajeto, e o que pede ação embaixo. Azul-marinho e laranja da 3T; laranja é atraso. */
:root { --log-fundo: #f3f6f9; --log-cartao: #ffffff; --log-borda: #dfe6ee; --log-texto: #0d2233;
  --log-fraco: #5f7385; --log-azul: #1f8ac0; --log-laranja: #e8590c; --log-verde: #1f9d6b;
  --log-mapa-vazio: #e3e9ef; --log-trilho: #e3e9ef; }
[data-tema="escuro"] { --log-fundo: #07131f; --log-cartao: #0d1f30; --log-borda: #1a3349;
  --log-texto: #e8f1f8; --log-fraco: #8ea6ba; --log-azul: #3aa8dc; --log-laranja: #ff7a2e;
  --log-verde: #34c38f; --log-mapa-vazio: #15293b; --log-trilho: #1a3349; }

.painel-log { color: var(--log-texto); }
.topo-log { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18px;
  padding: 22px 26px; border-radius: 16px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 85% 120%, rgba(232,89,12,.45), transparent 55%),
              linear-gradient(120deg, #072a40 0%, #0b3c5d 55%, #12507a 100%); }
.topo-log::after { content: ''; position: absolute; right: -40px; bottom: -30px; width: 340px; height: 120px;
  opacity: .18; background:
    repeating-linear-gradient(90deg, #fff 0 34px, transparent 34px 38px) bottom / 100% 26px no-repeat,
    repeating-linear-gradient(90deg, #ffb37a 0 34px, transparent 34px 38px) 0 66px / 70% 26px no-repeat,
    repeating-linear-gradient(90deg, #9fd3ec 0 34px, transparent 34px 38px) 0 38px / 45% 26px no-repeat; }
.topo-log h2 { margin: 8px 0 0; font-size: 28px; letter-spacing: -.02em; }
.selo-ao-vivo { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: #ffb37a; }
.selo-ao-vivo i { width: 8px; height: 8px; border-radius: 50%; background: #34c38f;
  box-shadow: 0 0 0 0 rgba(52,195,143,.7); animation: aoVivo 2s infinite; }
@keyframes aoVivo { 70% { box-shadow: 0 0 0 9px rgba(52,195,143,0); } 100% { box-shadow: 0 0 0 0 rgba(52,195,143,0); } }
.relogio-log { text-align: right; position: relative; z-index: 1; }
.relogio-log b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.relogio-log span { font-size: 12px; color: rgba(255,255,255,.75); text-transform: capitalize; }

.kpis-log { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi-log { background: var(--log-cartao); border: 1px solid var(--log-borda); border-radius: 14px;
  padding: 16px 18px; position: relative; overflow: hidden; }
.kpi-log::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--log-azul); }
.kpi-log span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--log-fraco); }
.kpi-log b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 2px; }
.kpi-log b em { font-style: normal; font-size: 18px; color: var(--log-fraco); font-weight: 600; }
.kpi-log small { font-size: 12px; color: var(--log-fraco); }
.kpi-log.kpi-destaque { background: linear-gradient(135deg, #0b3c5d, #12507a); border-color: transparent; color: #fff; }
.kpi-log.kpi-destaque::before { background: #ff7a2e; }
.kpi-log.kpi-destaque span, .kpi-log.kpi-destaque small { color: rgba(255,255,255,.75); }
.kpi-log.kpi-alerta::before, .kpi-log.kpi-atencao::before { background: var(--log-laranja); }
.kpi-log.kpi-alerta b { color: var(--log-laranja); }
.kpi-log.kpi-bom::before { background: var(--log-verde); }
.kpi-log.kpi-bom b { color: var(--log-verde); }
.kpi-log .trilho { height: 6px; border-radius: 3px; background: var(--log-trilho); margin-top: 10px; overflow: hidden; }
.kpi-log .trilho div { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--log-azul), var(--log-laranja)); }

.grade-log { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; }
.cartao-log { background: var(--log-cartao); border: 1px solid var(--log-borda); border-radius: 16px; padding: 18px 20px; }
.cartao-log h3 { margin: 0 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cartao-log h3 small { font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--log-fraco); }
.cartao-log h3 small i, .legenda-log i { display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  vertical-align: -1px; margin-right: 4px; }
.l-azul { background: var(--log-azul); } .l-laranja { background: var(--log-laranja); }
.l-verde { background: var(--log-verde); } .l-ponto { background: #fff; border: 3px solid var(--log-laranja); border-radius: 50% !important; }
.vazio-log { margin-bottom: 16px; text-align: center; padding: 34px; }
.vazio-log p { color: var(--log-fraco); }

.mapa-log { grid-row: span 2; }
.mapa-rotas { width: 100%; max-height: 560px; display: block; }
.uf-log { stroke: var(--log-cartao); stroke-width: 1.4; transition: opacity .2s; }
.uf-log:hover { opacity: .75; }
.rota-log .arco { fill: none; stroke: var(--log-azul); stroke-width: 3.2; stroke-dasharray: 9 7;
  stroke-linecap: round; animation: tracejar 1.6s linear infinite; }
.rota-log.atrasada .arco { stroke: var(--log-laranja); }
@keyframes tracejar { to { stroke-dashoffset: -32; } }
.rota-log .destino { fill: var(--log-cartao); stroke: var(--log-azul); stroke-width: 3; }
.rota-log.atrasada .destino { stroke: var(--log-laranja); }
.rota-log .caminhao-ponto { fill: #fff; stroke: var(--log-laranja); stroke-width: 4; }
.rota-log .onda { fill: none; stroke: var(--log-laranja); stroke-width: 2; transform-box: fill-box;
  transform-origin: center; animation: onda 2.2s ease-out infinite; }
@keyframes onda { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.legenda-log { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--log-fraco); margin-top: 6px; }

.lista-viagens { display: flex; flex-direction: column; gap: 10px; max-height: 520px; overflow: auto; padding-right: 4px; }
.viagem { border: 1px solid var(--log-borda); border-radius: 12px; padding: 12px 14px; border-left: 4px solid var(--log-azul); }
.viagem.planejada { border-left-color: var(--log-fraco); opacity: .85; }
.viagem.atrasada { border-left-color: var(--log-laranja); }
.viagem-topo { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.viagem-topo b { font-size: 14px; }
.viagem-topo .seta { color: var(--log-laranja); margin: 0 4px; }
.estado-viagem { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 99px; background: rgba(58,168,220,.14); color: var(--log-azul); white-space: nowrap; }
.viagem.planejada .estado-viagem { background: var(--log-trilho); color: var(--log-fraco); }
.viagem.atrasada .estado-viagem { background: rgba(232,89,12,.14); color: var(--log-laranja); }
.trajeto { position: relative; height: 6px; background: var(--log-trilho); border-radius: 3px; margin: 12px 8px 10px 0; }
.trajeto .feito { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--log-azul), var(--log-laranja)); }
.viagem.planejada .trajeto .feito { background: none; }
.caminhao-ico { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 11px; line-height: 18px;
  width: 18px; height: 18px; text-align: center; border-radius: 50%; background: var(--log-laranja); color: #fff;
  box-shadow: 0 0 0 4px rgba(232,89,12,.2); }
.viagem.planejada .caminhao-ico { background: var(--log-fraco); box-shadow: none; }
.viagem-info { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--log-fraco); }
.viagem-info i { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  background: rgba(232,89,12,.12); color: var(--log-laranja); padding: 1px 6px; border-radius: 4px; }

.grafico-entregas { width: 100%; display: block; }
.grafico-entregas .barra-feita { fill: var(--log-azul); opacity: .35; }
.grafico-entregas .barra-prazo { fill: var(--log-verde); }
.grafico-entregas text { font-size: 10px; fill: var(--log-fraco); }

.lista-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lista-log li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start;
  padding-bottom: 10px; border-bottom: 1px solid var(--log-borda); }
.lista-log li:last-child { border-bottom: 0; padding-bottom: 0; }
.lista-log b { font-size: 13px; } .lista-log small { display: block; font-size: 11px; color: var(--log-fraco); }
.lista-log p { margin: 3px 0 0; font-size: 12px; color: var(--log-fraco); }
.lista-log time { font-size: 11px; color: var(--log-fraco); white-space: nowrap; }
.tag-ocorrencia, .tag-doc { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 6px; background: rgba(232,89,12,.13); color: var(--log-laranja); white-space: nowrap; }
.tag-doc { background: rgba(58,168,220,.13); color: var(--log-azul); }
.tag-doc.urgente { background: rgba(232,89,12,.13); color: var(--log-laranja); }
.tabela-log td.alerta { color: var(--log-laranja); font-weight: 700; }

@media (max-width: 1100px) { .kpis-log { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-log { grid-template-columns: 1fr; } .mapa-log { grid-row: auto; } }
@media (max-width: 560px) { .topo-log { flex-direction: column; align-items: flex-start; gap: 10px; }
  .relogio-log { text-align: left; } .kpi-log b { font-size: 24px; } }
.siglas-log text { font-size: 15px; font-weight: 800; fill: rgba(255,255,255,.85); paint-order: stroke;
  stroke: rgba(7,19,31,.55); stroke-width: 3px; pointer-events: none; }

/* Telas de operação da 3T: viagens, entregas, frota e motoristas. */
.clientes-log { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.clientes-log > span { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--log-fraco); margin-right: 4px; }
.clientes-log button { border: 1px solid var(--log-borda); background: var(--log-cartao); color: var(--log-texto);
  border-radius: 99px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.clientes-log button em { font-style: normal; font-size: 11px; color: var(--log-fraco); }
.clientes-log button i { font-style: normal; font-size: 10px; font-weight: 800; background: var(--log-laranja);
  color: #fff; border-radius: 99px; padding: 1px 6px; }
.clientes-log button.atual { background: #0b3c5d; border-color: #0b3c5d; color: #fff; }
.clientes-log button.atual em { color: #ffb37a; }
.hoje-log { margin-bottom: 16px; }
.status-log { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; white-space: nowrap; background: var(--log-trilho); color: var(--log-fraco); }
.status-log.entregue { background: rgba(31,157,107,.14); color: var(--log-verde); }
.status-log.em_rota { background: rgba(58,168,220,.14); color: var(--log-azul); }
.status-log.atrasada, .status-log.ocorrencia { background: rgba(232,89,12,.14); color: var(--log-laranja); }
.tela-log { color: var(--log-texto); }
.cabecalho-log { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px;
  padding: 18px 22px; border-radius: 14px; color: #fff;
  background: radial-gradient(ellipse at 90% 130%, rgba(232,89,12,.4), transparent 55%), linear-gradient(120deg, #072a40, #0b3c5d 60%, #12507a); }
.cabecalho-log h2 { margin: 0; font-size: 22px; }
.cabecalho-log p { margin: 4px 0 0; font-size: 13px; color: rgba(255,255,255,.75); }
.tela-log .filtros { margin-bottom: 12px; }
.tela-log tr[data-id] { cursor: pointer; }
.tela-log tr[data-id]:hover td { background: rgba(58,168,220,.06); }
.tela-log tr.inativo td { opacity: .5; }
.placa-log { font-family: ui-monospace, Menlo, monospace; letter-spacing: .06em; padding: 2px 6px; border-radius: 4px;
  border: 1px solid var(--log-borda); background: var(--log-trilho); }
.kpis-curtos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis-curtos .kpi-log b { font-size: 26px; }
.grade-viagens { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); max-height: none; }
.grade-viagens .viagem { background: var(--log-cartao); }
.viagem-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.atalhos-log { margin: 0 0 12px; }
.form-log { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.form-log .campo input, .form-log .campo select { width: 100%; }
@media (max-width: 640px) { .form-log { grid-template-columns: 1fr; } .form-log .campo { grid-column: auto !important; }
  .grade-viagens { grid-template-columns: 1fr; } .kpis-curtos { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.tela-log .tabela-log td, .hoje-log .tabela-log td { white-space: nowrap; }
.bairros-log { display: flex; flex-direction: column; gap: 9px; }
.bairro-log { display: grid; grid-template-columns: 170px 1fr 92px; gap: 10px; align-items: center; font-size: 12.5px; }
.bairro-log > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bairro-log > span span { font-size: 10px; color: var(--log-fraco); margin-left: 4px; }
.bairro-log em { font-style: normal; font-size: 11.5px; color: var(--log-fraco); text-align: right; }
.bairro-log em i { font-style: normal; color: var(--log-laranja); font-weight: 700; }
.barra-bairro { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--log-trilho); }
.barra-bairro .feitas { background: var(--log-verde); } .barra-bairro .atrasadas { background: var(--log-laranja); }
.barra-bairro .resto { background: var(--log-azul); opacity: .55; }
.viagem-topo small.sub { font-weight: 500; font-size: 11px; margin-left: 6px; }
/* Tabelas de frete */
.frete-grade { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.frete-tabelas { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tabela-frete header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.tabela-frete header h3 { margin-bottom: 6px; }
.tabela-frete.inativa { opacity: .55; }
.taxas-frete { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; color: var(--log-fraco); margin: 6px 0 12px; }
.taxas-frete b { color: var(--log-texto); }
.matriz-frete th, .matriz-frete td { text-align: right; }
.matriz-frete th:first-child, .matriz-frete td:first-child { text-align: left; }
.matriz-frete.editar input { width: 84px; text-align: right; padding: 6px 7px; border-radius: 6px; border: 1px solid var(--log-borda);
  background: var(--log-fundo); color: var(--log-texto); font-size: 13px; }
.cotacao-frete { position: sticky; top: 76px; }
.total-cotacao { margin: 14px 0 10px; padding: 16px; border-radius: 12px; color: #fff;
  background: linear-gradient(120deg, #0b3c5d, #12507a); }
.total-cotacao span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #ffb37a; font-weight: 800; }
.total-cotacao b { display: block; font-size: 32px; letter-spacing: -.02em; margin: 2px 0; }
.total-cotacao small { color: rgba(255,255,255,.75); font-size: 12px; }
@media (max-width: 1100px) { .frete-grade { grid-template-columns: minmax(0, 1fr); } .cotacao-frete { position: static; } }

/* ===================================================================== 05/10/2026 — leva 4
   Atalhos do painel, logo que leva ao menu principal, mapa e rastreio, app do motorista,
   marketplaces, dashboard e menu principal. */
.clicavel { cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s; }
.kpi-log.clicavel:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(11, 60, 93, .14); }
tr.clicavel:hover td, li.clicavel:hover, .bairro-log.clicavel:hover, .linha-barra.clicavel:hover { background: rgba(31, 138, 192, .07); }
.clicavel:focus-visible { outline: 2px solid var(--log-laranja); outline-offset: 2px; }
.viagem.clicavel:hover { border-color: var(--log-azul); }

.logo-menu { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
  padding: 4px; width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.logo-menu img { width: 28px; height: 28px; border-radius: 6px; display: block; }
.logo-menu:hover { background: rgba(255,255,255,.2); }

.abas-log { display: flex; gap: 6px; margin: 0 0 16px; flex-wrap: wrap; }
.abas-log button { border: 1px solid var(--log-borda); background: var(--log-cartao); color: var(--log-fraco);
  border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 13px; cursor: pointer; }
.abas-log button.atual { background: #0b3c5d; color: #fff; border-color: #0b3c5d; }

/* Mapa */
.mapa-3t { position: relative; overflow: hidden; background: #dfe7ee; border-radius: 12px; touch-action: none; user-select: none; cursor: grab; }
.mapa-3t.arrastando { cursor: grabbing; }
.mapa-3t.satelite { background: #1b2733; }
.mapa-tiles img { position: absolute; left: 0; top: 0; width: 256px; height: 256px; max-width: none; pointer-events: none; }
.mapa-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mapa-svg polyline.rastro { fill: none; stroke: #e8590c; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.mapa-pinos { position: absolute; inset: 0; pointer-events: none; }
.pino-mapa { position: absolute; left: 0; top: 0; pointer-events: auto; }
.pino-mapa.caminhao i { position: absolute; width: 18px; height: 18px; left: -9px; top: -9px; border-radius: 50%;
  background: #e8590c; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); cursor: pointer; }
.pino-mapa.caminhao.ao_vivo i::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid #e8590c; animation: pulso-mapa 1.8s infinite; }
.pino-mapa.caminhao.sem_sinal i { background: #8a98a6; }
.pino-mapa.caminhao em { position: absolute; left: 14px; top: -11px; white-space: nowrap; font-style: normal; font-size: 11px; font-weight: 700;
  background: #0b3c5d; color: #fff; padding: 3px 7px; border-radius: 6px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.pino-mapa.base span { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 8px; background: #0b3c5d;
  color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.pino-mapa.parada span { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; background: #1f8ac0; color: #fff;
  font-size: 11px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.pino-mapa.parada.entregue span { background: #1f9d6b; }
.pino-mapa.parada.ocorrencia span { background: #e8590c; }
@keyframes pulso-mapa { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.mapa-botoes { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; }
.mapa-botoes button, .mapa-camadas button { border: 0; background: #fff; color: #0d2233; font-weight: 800; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.mapa-botoes button { width: 32px; height: 32px; border-radius: 8px; font-size: 18px; }
.mapa-camadas { position: absolute; left: 10px; top: 10px; display: flex; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.mapa-camadas button { padding: 7px 12px; font-size: 12px; box-shadow: none; }
.mapa-camadas button.atual { background: #0b3c5d; color: #fff; }
.mapa-credito { position: absolute; right: 0; bottom: 0; font-size: 10px; background: rgba(255,255,255,.8); color: #333; padding: 2px 6px; border-top-left-radius: 6px; }

/* Rastreio */
.rastreio-grade { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.lista-rastreio { padding: 10px; display: flex; flex-direction: column; gap: 6px; max-height: 640px; overflow: auto; }
.item-rastreio { text-align: left; border: 1px solid var(--log-borda); background: transparent; color: var(--log-texto); border-radius: 10px;
  padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.item-rastreio small { color: var(--log-fraco); font-size: 12px; }
.item-rastreio.atual { border-color: #e8590c; box-shadow: inset 3px 0 0 #e8590c; }
.linha-rastreio { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.sinal-rastreio { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; background: var(--log-trilho); color: var(--log-fraco); white-space: nowrap; }
.sinal-rastreio.ao_vivo { background: rgba(31,157,107,.15); color: var(--log-verde); }
.sinal-rastreio.recente { background: rgba(31,138,192,.15); color: var(--log-azul); }
.sinal-rastreio.sem_sinal { background: rgba(232,89,12,.14); color: var(--log-laranja); }
.mapa-cartao { padding: 10px; position: relative; }
.mapa-area { height: 600px; }
.nota-mapa { margin: 8px 4px 0; font-size: 12px; }
.ficha-rastreio { position: absolute; left: 22px; bottom: 60px; max-width: 360px; background: var(--log-cartao); color: var(--log-texto);
  border: 1px solid var(--log-borda); border-radius: 12px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.2); display: flex; flex-direction: column; gap: 4px; }
.ficha-rastreio small { color: var(--log-fraco); }
.acoes-ficha { display: flex; gap: 6px; margin-top: 6px; }
a.mini { display: inline-block; text-decoration: none; background: var(--realce); color: var(--texto); border-radius: 6px; padding: 5px 10px; font-size: 12px; font-weight: 600; }
@media (max-width: 900px) { .rastreio-grade { grid-template-columns: minmax(0, 1fr); } .lista-rastreio { max-height: 260px; } .mapa-area { height: 420px; } }

/* Comprovante */
.cab-comprovante { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.cab-comprovante small { display: block; color: var(--texto-fraco, #667); }
.bloco-comprovante { border-top: 1px solid var(--borda); padding-top: 10px; margin-top: 10px; }
.imagens-comprovante { display: flex; gap: 12px; flex-wrap: wrap; }
.imagens-comprovante figure { margin: 0; flex: 1 1 220px; }
.imagens-comprovante img { width: 100%; border-radius: 8px; border: 1px solid var(--borda); background: #fff; }
.imagens-comprovante figcaption { font-size: 12px; color: #667; }

/* App do motorista */
.app-motorista.previa { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; }
.previa-app { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center;
  background: rgba(232,89,12,.08); border: 1px dashed #e8590c; border-radius: 12px; padding: 10px 14px; font-size: 13px; color: var(--log-texto); }
.previa-app select { margin-left: 6px; padding: 6px 8px; border-radius: 8px; }
.app-motorista.previa .tela-app { width: 400px; max-width: 100%; border: 10px solid #0d1b2a; border-radius: 34px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.tela-app { background: #f2f5f8; color: #0d2233; border-radius: 24px; overflow: hidden; padding-bottom: 16px; }
.app-motorista.sozinho .tela-app { border-radius: 0; max-width: 560px; margin: 0 auto; min-height: calc(100vh - 60px); }
.cabeca-app { display: flex; justify-content: space-between; align-items: center; padding: 18px 18px 12px; background: #0b3c5d; color: #fff; }
.cabeca-app small { display: block; opacity: .7; font-size: 12px; } .cabeca-app b { font-size: 20px; }
.gps-app { font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.15); max-width: 55%; text-align: right; }
.gps-app.ok { background: rgba(52,195,143,.25); } .gps-app.sem { background: rgba(232,89,12,.4); }
.viagem-app { margin: 12px; background: #fff; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 2px 8px rgba(11,60,93,.08); }
.viagem-app small { color: #5f7385; } .viagem-app b { font-size: 18px; } .viagem-app span { font-size: 13px; color: #34495e; display: block; }
.viagem-app.vazia { text-align: center; padding: 26px 14px; }
.trilho-app { height: 8px; background: #e3e9ef; border-radius: 4px; overflow: hidden; }
.trilho-app div { height: 100%; background: linear-gradient(90deg, #1f8ac0, #e8590c); }
.resumo-app { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 12px; }
.resumo-app div { background: #fff; border-radius: 12px; padding: 10px 6px; text-align: center; box-shadow: 0 1px 4px rgba(11,60,93,.06); }
.resumo-app b { display: block; font-size: 20px; } .resumo-app span { font-size: 10.5px; color: #5f7385; }
.resumo-app .alerta b { color: #e8590c; }
.bipar-app { display: flex; gap: 6px; margin: 12px; }
.bipar-app input { flex: 1; min-width: 0; padding: 12px; border-radius: 12px; border: 1px solid #cfd9e2; font-size: 15px; }
.paradas-app { margin: 0 12px; } .paradas-app h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #5f7385; margin: 14px 4px 8px; }
.paradas-app details summary { cursor: pointer; margin: 14px 4px 8px; font-weight: 700; color: #5f7385; }
.parada-app { display: flex; gap: 10px; background: #fff; border-radius: 14px; padding: 12px; margin-bottom: 8px; box-shadow: 0 1px 4px rgba(11,60,93,.08); border-left: 4px solid #1f8ac0; }
.parada-app.entregue { border-left-color: #1f9d6b; opacity: .8; } .parada-app.ocorrencia, .parada-app.atrasada { border-left-color: #e8590c; }
.ordem-app { width: 30px; height: 30px; border-radius: 50%; background: #0b3c5d; color: #fff; font-weight: 800; display: grid; place-items: center; flex: 0 0 auto; }
.dados-app { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dados-app small { color: #5f7385; font-size: 12.5px; } .dados-app i { color: #e8590c; font-style: normal; font-weight: 700; }
.botoes-app { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.botao-app { border: 1px solid #cfd9e2; background: #fff; color: #0b3c5d; border-radius: 10px; padding: 10px 12px; font-weight: 700; font-size: 14px;
  cursor: pointer; text-decoration: none; text-align: center; display: inline-block; }
.botao-app.principal { background: #e8590c; border-color: #e8590c; color: #fff; flex: 1; }
.botao-app.largo { width: 100%; margin-top: 6px; padding: 13px; font-size: 16px; }
.baixa-app { display: flex; flex-direction: column; gap: 12px; }
.baixa-app label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; }
.baixa-app input:not([type=radio]):not([type=file]), .baixa-app textarea { padding: 11px; border-radius: 10px; border: 1px solid var(--borda); font-size: 15px; }
.cab-baixa b { display: block; font-size: 16px; } .cab-baixa small { color: #667; }
.foto-app { display: flex; gap: 10px; align-items: center; } .foto-app img { width: 90px; height: 90px; object-fit: cover; border-radius: 10px; }
.assinatura-app { position: relative; } .assinatura-app span { font-weight: 600; font-size: 13px; }
.assinatura-app canvas { display: block; width: 100%; height: 160px; background: #fff; border: 1px dashed #98a9b8; border-radius: 10px; touch-action: none; margin-top: 4px; }
.assinatura-app [data-limpar] { position: absolute; right: 6px; top: 26px; }
.tipos-app { display: flex; flex-direction: column; gap: 8px; }
.tipos-app label { flex-direction: row; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--borda); border-radius: 10px; font-weight: 600; }
.leitor-codigo { position: relative; } .leitor-codigo video { width: 100%; border-radius: 10px; background: #000; }
.leitor-codigo .mira { position: absolute; left: 10%; right: 10%; top: 40%; height: 20%; border: 3px solid #e8590c; border-radius: 8px; pointer-events: none; }
.casca-motorista { min-height: 100vh; background: #f2f5f8; }
.topo-motorista { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #08304b; color: #fff; position: sticky; top: 0; z-index: 5; }
.topo-motorista div { flex: 1; line-height: 1.2; } .topo-motorista small { display: block; opacity: .7; font-size: 12px; }
.topo-motorista .acao.claro { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2); }

/* Marketplaces */
.caminhos-mkt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.caminhos-mkt article { background: linear-gradient(135deg, #0b3c5d, #12507a); color: #fff; border-radius: 14px; padding: 14px 16px; }
.caminhos-mkt b { display: block; color: #ffb37a; margin-bottom: 4px; } .caminhos-mkt span { font-size: 13px; opacity: .9; }
.barras-mkt { display: flex; gap: 10px; align-items: flex-end; height: 170px; padding-top: 10px; }
.barra-mkt { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.barra-mkt .col { width: 70%; max-width: 42px; background: var(--log-azul); border-radius: 4px 4px 0 0; display: flex; align-items: flex-end; overflow: hidden; }
.barra-mkt .ok { width: 100%; background: var(--log-verde); }
.barra-mkt small { font-size: 11px; color: var(--log-fraco); } .barra-mkt b { font-size: 12px; }
.nota-mkt { margin: 0 0 12px; }
.canais-mkt { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.canal-mkt header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.canal-mkt header small { color: var(--log-fraco); } .canal-mkt.aprovado { border-color: var(--log-verde); }
.selo-mkt { font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: var(--log-trilho); color: var(--log-fraco); white-space: nowrap; }
.selo-mkt.aprovado { background: rgba(31,157,107,.15); color: var(--log-verde); } .selo-mkt.enviado { background: rgba(31,138,192,.15); color: var(--log-azul); }
.selo-mkt.preparando { background: rgba(232,89,12,.12); color: var(--log-laranja); } .selo-mkt.recusado { background: #fde8e8; color: #b42318; }
.onde-mkt a { color: var(--log-azul); font-weight: 700; }
.trilho-mkt { height: 6px; border-radius: 3px; background: var(--log-trilho); overflow: hidden; margin: 8px 0 2px; }
.trilho-mkt div { height: 100%; background: var(--log-verde); }
.requisitos-mkt { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.requisitos-mkt label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
@media (max-width: 900px) { .caminhos-mkt { grid-template-columns: minmax(0, 1fr); } }

/* Dashboard */
.filtros-dash { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filtros-dash select { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--log-borda); background: var(--log-cartao); color: var(--log-texto); }
.segmentos { display: flex; border: 1px solid var(--log-borda); border-radius: 10px; overflow: hidden; }
.segmentos button { border: 0; background: var(--log-cartao); color: var(--log-fraco); padding: 8px 12px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.segmentos button.atual { background: #0b3c5d; color: #fff; }
.grade-dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.largo-dash { grid-column: span 2; }
.grafico-dash { width: 100%; height: auto; display: block; }
.grafico-dash .eixo { stroke: var(--log-borda); }
.grafico-dash .coluna { fill: var(--log-azul); }
.grafico-dash .barra-dash:hover .coluna { fill: #0b3c5d; }
[data-tema="escuro"] .grafico-dash .barra-dash:hover .coluna { fill: #7cc8ec; }
.grafico-dash .alvo { fill: transparent; }
.grafico-dash .rotulo { fill: var(--log-fraco); font-size: 12px; text-anchor: middle; }
.grafico-dash .rotulo.fim { text-anchor: end; }
.grafico-dash .meta { stroke: var(--log-verde); stroke-dasharray: 6 5; stroke-width: 1.5; }
.grafico-dash .linha { fill: none; stroke: var(--log-azul); stroke-width: 2; }
.grafico-dash circle { fill: var(--log-azul); stroke: var(--log-cartao); stroke-width: 2; }
.grafico-dash circle.abaixo { fill: var(--log-laranja); }
.grafico-dash .ponto-dash:hover circle { r: 7; }
.var-dash { font-style: normal; font-weight: 800; } .var-dash.bom { color: var(--log-verde); } .var-dash.ruim { color: var(--log-laranja); }
.lista-barras { display: flex; flex-direction: column; gap: 4px; }
.linha-barra { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.5fr) auto; grid-template-rows: auto auto; column-gap: 10px;
  align-items: center; padding: 6px 8px; border-radius: 8px; }
.linha-barra .nome { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-barra b { font-size: 13px; text-align: right; } .linha-barra small { grid-column: 2 / 4; font-size: 11.5px; color: var(--log-fraco); }
.trilho-barra { height: 8px; border-radius: 4px; background: var(--log-trilho); overflow: hidden; }
.trilho-barra div { height: 100%; border-radius: 4px; background: var(--log-azul); }
.trilho-barra div.abaixo { background: var(--log-laranja); }
.otif-celula { display: flex; align-items: center; gap: 8px; min-width: 130px; } .otif-celula .trilho-barra { flex: 1; }
@media (max-width: 1000px) { .grade-dash { grid-template-columns: minmax(0, 1fr); } .largo-dash { grid-column: auto; } }

/* Menu principal */
.boas-vindas { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.boas-vindas img { width: 56px; height: 56px; border-radius: 12px; }
.boas-vindas h2 { margin: 0; } .boas-vindas p { margin: 2px 0 0; color: var(--log-fraco); }
.grupo-inicio { margin-bottom: 18px; }
.grupo-inicio h3 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--log-fraco); margin: 0 0 8px; }
.blocos-inicio { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.bloco-inicio { text-align: left; border: 1px solid var(--log-borda); background: var(--log-cartao); color: var(--log-texto); border-radius: 14px;
  padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: transform .12s, border-color .12s; }
.bloco-inicio:hover { transform: translateY(-2px); border-color: #e8590c; }
.bloco-inicio small { color: var(--log-fraco); font-size: 12px; }
.sigla-inicio { width: 34px; height: 34px; border-radius: 10px; background: #0b3c5d; color: #ffb37a; font-weight: 800; font-size: 13px;
  display: grid; place-items: center; margin-bottom: 6px; }
.viagem-app div > small { display: block; }
.tela-app input, .tela-app textarea, .tela-app select { background: #fff; color: #0d2233; }
.tela-app input::placeholder { color: #8a98a6; }
.grade-log > *, .grade-dash > * { min-width: 0; }

/* NF-e (05/10/2026) */
.nota-xml { border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.nota-xml header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.nota-xml header small { display: block; color: var(--fraco); }
.nota-xml.bloqueada { border-color: #f5c2c2; background: rgba(220, 38, 38, .05); }
.chave-xml { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--fraco); margin: 4px 0; }
.avisos-xml { margin: 6px 0; padding-left: 18px; color: #b45309; font-size: 13px; }
.nota-retorno p { margin: 4px 0; font-size: 13px; } .nota-retorno code { font-size: 11px; }
.nota-retorno ul { margin: 6px 0 0 16px; padding: 0; }
.linha-nfe { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--borda); }
.linha-nfe small { display: block; color: var(--fraco); }
.botoes-nfe { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.form-nfe { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.form-nfe .largo-nfe { grid-column: 1 / -1; }

/* Cobrança e inventário da 3T (05/10/2026) */
.cobranca-cliente { margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--borda); }
.cobranca-cliente h3 { margin: 0 0 4px; } .cobranca-cliente h4 { margin: 14px 0 6px; font-size: 13px; }
.form-cob { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.form-cob .largo-cob { grid-column: 1 / -1; }
.exemplo-cob { margin-top: 10px; font-size: 13px; padding: 8px 12px; border-radius: 10px; background: rgba(31, 138, 192, .08); }
.exemplo-cob:empty { display: none; }
.tabela-cob input { width: 100%; min-width: 60px; padding: 5px 6px; border-radius: 6px; border: 1px solid var(--borda); }
.tag-natureza { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--log-trilho); color: var(--log-texto); white-space: nowrap; }
.tag-natureza.transporte { background: rgba(31, 138, 192, .15); color: var(--log-azul); }
.tag-natureza.armazenagem { background: rgba(31, 157, 107, .15); color: var(--log-verde); }
.tag-natureza.frete { background: rgba(11, 60, 93, .12); }
.tag-natureza.marketplace { background: rgba(232, 89, 12, .14); color: var(--log-laranja); }
.apuracao-cliente { border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; margin-top: 10px; }
.apuracao-cliente header { display: flex; justify-content: space-between; font-size: 15px; }
.linha-apuracao { display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px dashed var(--borda); font-size: 13px; }
.linha-apuracao em { grid-column: 3 / 5; font-style: normal; font-size: 11px; color: var(--fraco); }
.linha-apuracao.feita { opacity: .55; }
.cartao-cliente-inv header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cartao-cliente-inv h3 { margin: 0; }
.numeros-inv { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 12px 0; }
.numeros-inv div { background: var(--log-fundo); border-radius: 10px; padding: 10px 12px; }
.numeros-inv b { display: block; font-size: 20px; } .numeros-inv span { font-size: 12px; color: var(--log-fraco); }
.conta-inv { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.conta-inv .total-inv { border-top: 1px solid var(--log-borda); padding-top: 8px; font-size: 15px; }
.cartao-cliente-inv { margin-bottom: 16px; }
tr.total-linha td { border-top: 2px solid var(--log-borda); }

/* ===================================================================== Tema 3T (05/10/2026)
   "Botões laranjas para descontrair, está muito azul, brincar com as cores e deixar mais
   intuitivo." O laranja da marca vira a cor da ação; cada área do menu ganha a sua cor
   (transporte azul, armazém verde, financeiro âmbar, cadastros roxo); o vermelho de verdade
   fica só para o que é perigo. */
:root { --botao: #e8590c; --botao-escuro: #c2410c; --perigo: #dc2626;
  --c-azul: #0284c7; --c-verde: #16a34a; --c-ambar: #d97706; --c-roxo: #7c3aed; --c-cinza: #64748b; --c-laranja: #e8590c; }
.acao:not(.claro) { background: var(--botao); box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.acao:not(.claro):hover { background: var(--botao-escuro); }
[data-tema="escuro"] .acao:not(.claro) { background: var(--botao) !important; }
[data-tema="escuro"] .acao:not(.claro):hover { background: var(--botao-escuro) !important; }
.elo { color: var(--botao-escuro); }
[data-tema="escuro"] .elo { color: #ff9a5c; }
button.mini.perigo { color: var(--perigo); }
.abas-log button.atual, .clientes-log button.atual, .segmentos button.atual, .mapa-camadas button.atual,
.atalhos-periodo button.atual, .abas-portal button.atual { background: var(--botao) !important; border-color: var(--botao) !important; color: #fff !important; }
.abas-log button:hover:not(.atual), .clientes-log button:hover:not(.atual) { border-color: var(--botao); color: var(--botao-escuro); }
.kpi-log.kpi-destaque { background: linear-gradient(135deg, #e8590c, #f59e0b); }
.kpi-log.kpi-destaque::before { background: rgba(255,255,255,.55); }
.kpi-log.kpi-destaque span, .kpi-log.kpi-destaque small { color: rgba(255,255,255,.88); }
.kpis-log .kpi-log:not(.kpi-destaque):not(.kpi-alerta):not(.kpi-atencao):not(.kpi-bom):nth-child(4n+2)::before { background: var(--c-azul); }
.kpis-log .kpi-log:not(.kpi-destaque):not(.kpi-alerta):not(.kpi-atencao):not(.kpi-bom):nth-child(4n+3)::before { background: var(--c-roxo); }
.kpis-log .kpi-log:not(.kpi-destaque):not(.kpi-alerta):not(.kpi-atencao):not(.kpi-bom):nth-child(4n)::before { background: var(--c-verde); }
.topo { border-bottom: 3px solid var(--botao); }
.lateral nav button { display: flex; align-items: center; gap: 10px; }
.lateral nav .icone-tela { flex: 0 0 auto; }
.lateral nav button.atual { background: rgba(232, 89, 12, .24); box-shadow: inset 3px 0 0 #ff8a3d; border-left-color: #ff8a3d; }
.lateral .cor-azul .icone-tela { color: #7dd3fc; } .lateral .cor-verde .icone-tela { color: #86efac; }
.lateral .cor-ambar .icone-tela { color: #fcd34d; } .lateral .cor-roxo .icone-tela { color: #c4b5fd; }
.lateral .cor-cinza .icone-tela { color: #cbd5e1; } .lateral .item-solto .icone-tela { color: #fdba74; }
.bloco-inicio .sigla-inicio { color: var(--c-laranja); background: rgba(232, 89, 12, .12); }
.bloco-inicio.cor-azul .sigla-inicio { color: var(--c-azul); background: rgba(2, 132, 199, .12); }
.bloco-inicio.cor-verde .sigla-inicio { color: var(--c-verde); background: rgba(22, 163, 74, .12); }
.bloco-inicio.cor-ambar .sigla-inicio { color: var(--c-ambar); background: rgba(217, 119, 6, .13); }
.bloco-inicio.cor-roxo .sigla-inicio { color: var(--c-roxo); background: rgba(124, 58, 237, .12); }
.bloco-inicio.cor-cinza .sigla-inicio { color: var(--c-cinza); background: rgba(100, 116, 139, .14); }
[data-tema="escuro"] .bloco-inicio .sigla-inicio { filter: brightness(1.5); }
.bloco-inicio.cor-azul:hover { border-color: var(--c-azul); } .bloco-inicio.cor-verde:hover { border-color: var(--c-verde); }
.bloco-inicio.cor-ambar:hover { border-color: var(--c-ambar); } .bloco-inicio.cor-roxo:hover { border-color: var(--c-roxo); }
.grupo-inicio h3 { display: flex; align-items: center; gap: 8px; }
.icone-os.aceso { color: #ffb37a; }

/* Portal do cliente e OS */
.casca-portal { min-height: 100vh; background: var(--log-fundo); color: var(--log-texto); }
.topo-portal { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: #0a3552; color: #fff; border-bottom: 3px solid var(--botao); }
.topo-portal img { width: 40px; height: 40px; border-radius: 8px; background: #fff; padding: 3px; }
.topo-portal div { flex: 1; line-height: 1.2; } .topo-portal small { display: block; opacity: .75; }
.topo-portal .acao.claro { background: rgba(255,255,255,.12); color: #fff; }
.abas-portal { display: flex; gap: 6px; padding: 12px 20px; flex-wrap: wrap; background: var(--log-cartao); border-bottom: 1px solid var(--log-borda); }
.abas-portal button { border: 1px solid var(--log-borda); background: transparent; color: var(--log-texto); border-radius: 999px; padding: 8px 16px; font-weight: 700; cursor: pointer; }
.area-portal { max-width: 1100px; margin: 0 auto; padding: 20px 16px 40px; }
.os-cartao { border: 1px solid var(--log-borda); border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.os-cartao header { display: flex; justify-content: space-between; gap: 10px; }
.os-cartao ul { margin: 6px 0; padding-left: 18px; font-size: 13px; }
.painel-os h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--fraco); margin: 6px 0; }
.linha-os { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--borda); }
.linha-os small { display: block; color: var(--fraco); font-size: 12px; margin-top: 2px; }
.linha-os .erro-os { color: var(--perigo); }
.portal-cadastro h2 { color: #fff; }
.bloco-furo { margin-bottom: 14px; }
.bloco-furo header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.bloco-furo h3 { margin: 0; }
.numeros-furo { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 10px 0; font-size: 13px; }
.contagem-furo { display: flex; align-items: center; gap: 10px; }
.contagem-furo label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--log-fraco); }
.contagem-furo input { width: 110px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--log-borda); }
.diferenca.bate { color: var(--c-verde); } .diferenca.furo { color: var(--perigo); }
.tabela-cob td:nth-child(1) input { min-width: 110px; }
.tabela-cob td:nth-child(2) input { min-width: 210px; }
/* As marcas d'água da coluna ficaram atrás dos ícones e do texto do menu novo: bem mais leves. */
.lateral::before, .lateral::after { opacity: .045; }

/* ===== Operação do dia: carregamento, CT-e e coleta (06/10/2026) ===== */
.grupo-destaque { background: rgba(232, 89, 12, .12); border-radius: 10px; margin: 4px 6px 8px; padding-bottom: 4px; }
.grupo-destaque .cabeca-grupo { color: #ffb37a !important; font-weight: 800; }
.grupo-destaque .itens-grupo button { color: #fff; font-weight: 600; }
.grupo-destaque .itens-grupo button .icone-tela { color: #ff8a3d; }

.carga-topo { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .carga-topo { grid-template-columns: minmax(0, 1fr); } }
.carga-caminhoes h3, .carga-caminhoes h4 { margin: 0 0 10px; }
.caminhao-carga { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; margin-bottom: 8px;
  padding: 10px 12px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); color: var(--texto); cursor: pointer; }
.caminhao-carga b { font-size: 16px; letter-spacing: .5px; }
.caminhao-carga small { color: var(--fraco); }
.caminhao-carga.atual { border-color: #e8590c; box-shadow: 0 0 0 2px rgba(232, 89, 12, .25); background: rgba(232, 89, 12, .06); }
.abrir-carga { border-top: 1px dashed var(--borda-forte); margin-top: 12px; padding-top: 12px; display: grid; gap: 8px; }
.vazio-carga { text-align: center; padding: 40px 20px; }
.cab-carga { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 12px; }
.cab-carga h3 { margin: 0; font-size: 20px; }
.botoes-carga { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
button.mini.destaque-mini { background: #e8590c; color: #fff; border-color: #e8590c; font-weight: 700; }
.usos-carga { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (max-width: 700px) { .usos-carga { grid-template-columns: minmax(0, 1fr); } }
.uso-carga { border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.uso-carga span { font-size: 12px; color: var(--fraco); text-transform: uppercase; letter-spacing: .4px; }
.uso-carga b { font-size: 20px; } .uso-carga b small { font-size: 12px; color: var(--fraco); font-weight: 500; }
.uso-carga i { display: block; height: 8px; border-radius: 4px; background: var(--realce); overflow: hidden; }
.uso-carga i em { display: block; height: 100%; background: #16a34a; border-radius: 4px; }
.uso-carga.quase i em { background: #f59e0b; } .uso-carga.estourou i em { background: #dc2626; }
.uso-carga.estourou small { color: #dc2626; font-weight: 700; }
.uso-carga small { color: var(--fraco); font-size: 12px; }
.leitor-carga { display: flex; align-items: stretch; gap: 8px; background: #0b3c5d; border-radius: 14px; padding: 10px; }
.leitor-carga label { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; padding: 0 6px; white-space: nowrap; }
.leitor-carga label svg { color: #ff8a3d; }
.leitor-carga input { flex: 1; min-width: 0; font-size: 20px; padding: 12px 14px; border-radius: 10px; border: 2px solid #ff8a3d;
  font-family: ui-monospace, Menlo, monospace; letter-spacing: .5px; }
.leitor-carga input:focus { outline: 3px solid rgba(255, 138, 61, .5); }
@media (max-width: 700px) { .leitor-carga { flex-wrap: wrap; } .leitor-carga input { flex-basis: 100%; } }
.recado-carga { margin: 8px 0; padding: 9px 12px; border-radius: 10px; background: var(--realce); font-weight: 600; }
.recado-carga.bom { background: #dcfce7; color: #14532d; } .recado-carga.aviso { background: #fef3c7; color: #78350f; }
.recado-carga.erro { background: #fee2e2; color: #7f1d1d; }
.xml-carga { border: 2px dashed var(--borda-forte); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; font-size: 14px; }
.xml-carga.sobre { border-color: #e8590c; background: rgba(232, 89, 12, .07); }
.marca-carga { display: block; margin-top: 6px; font-weight: 600; } .marca-carga input { margin-right: 6px; }
.pendencias-carga { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pendencias-carga span { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--realce); font-weight: 600; }
.pendencias-carga .pend-amarela { background: #fef3c7; color: #78350f; }
.tabela-carga tr.linha-incompleta td { background: #fffbeb; }
.falta-carga { color: #b45309; }
[data-tema="escuro"] .tabela-carga tr.linha-incompleta td { background: rgba(245, 158, 11, .1); }
.cota-coleta { padding: 10px 12px; border-radius: 10px; background: var(--realce); }
.mini-sel { font-size: 12px; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--borda-forte); max-width: 190px; }

.faixa-cte { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 14px; margin-bottom: 12px; border-radius: 12px;
  background: rgba(232, 89, 12, .08); border: 1px solid rgba(232, 89, 12, .25); font-size: 13px; }
.busca-cte { margin-left: 8px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--borda-forte); min-width: 220px; }
.conta-mini { background: #e8590c; color: #fff; border-radius: 999px; padding: 0 6px; font-size: 11px; }
.editor-cte { display: flex; flex-direction: column; gap: 12px; }
.cab-cte { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.cab-cte small { color: var(--fraco); font-family: ui-monospace, Menlo, monospace; }
.pend-cte { background: #fef3c7; color: #78350f; border-radius: 12px; padding: 10px 14px; }
.pend-cte ul { margin: 4px 0 0 18px; padding: 0; }
.aviso-cte { background: #e0f2fe; color: #0c4a6e; border-radius: 12px; padding: 10px 14px; }
.bloco-cte { border: 1px solid var(--borda); border-radius: 12px; padding: 10px 14px 14px; margin: 0; }
.bloco-cte legend { font-weight: 800; padding: 0 6px; color: #e8590c; }
.grade-cte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; }
.grade-cte .campo.largo { grid-column: span 2; }
@media (max-width: 760px) { .grade-cte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.leitor-cte { margin-bottom: 8px; } .leitor-cte input { font-size: 16px; padding: 9px 12px; }
.chaves-cte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.chaves-cte li { display: flex; gap: 10px; align-items: center; }
.chaves-cte code { font-size: 13px; }
.total-cte { font-size: 22px; color: #e8590c; display: block; padding-top: 6px; }

.acoes-rapidas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
@media (max-width: 860px) { .acoes-rapidas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.acoes-rapidas button { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 0; cursor: pointer;
  background: #e8590c; color: #fff; font-weight: 800; font-size: 15px; text-align: left; box-shadow: 0 4px 14px rgba(232, 89, 12, .25); }
.acoes-rapidas button:hover { background: #d9480f; }
.acoes-rapidas button small { display: block; font-weight: 500; font-size: 12px; opacity: .9; }
.acoes-rapidas button.secundaria { background: #0b3c5d; box-shadow: 0 4px 14px rgba(11, 60, 93, .25); }
.entrega-3t-os { border: 1px dashed var(--borda-forte); border-radius: 12px; padding: 10px 12px; margin-top: 12px; }
.xml-carga button.elo { display: inline; width: auto; padding: 0; margin: 0; font: inherit; text-decoration: underline; }
/* Na doca a tabela precisa da largura toda: os caminhões ficam numa faixa no alto. */
.carga-topo { grid-template-columns: minmax(0, 1fr) !important; }
.carga-caminhoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.carga-caminhoes > h3 { flex-basis: 100%; margin-bottom: 2px; }
.carga-caminhoes .caminhao-carga { width: auto; min-width: 200px; margin: 0; }
.carga-caminhoes > .sub { flex-basis: 100%; }
.abrir-carga { flex-basis: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; }
.abrir-carga h4 { grid-column: 1 / -1; margin: 0; }
.abrir-carga .acao { width: auto; padding: 10px 18px; }
@media (max-width: 760px) { .abrir-carga { grid-template-columns: minmax(0, 1fr); } }
.tabela-carga td:nth-child(3) { max-width: 200px; white-space: normal; overflow-wrap: anywhere; padding-right: 14px; }
.parcela-cob { display: inline-block; margin-top: 3px; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.parcela-cob.a { background: #dbeafe; color: #1e3a8a; } .parcela-cob.ad { background: #ffedd5; color: #9a3412; }
.tabela-linhas-cob input, .tabela-linhas-cob select { min-width: 0; }
.notas-os { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.nota-os { border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; background: var(--superficie); }
.nota-os header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-weight: 700; }
.cartoes-os-cte { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cartao-os-cte { position: relative; border: 2px solid var(--borda); border-radius: 14px; padding: 12px; cursor: pointer; background: var(--superficie); text-align: left; }
.cartao-os-cte.marcado { border-color: #e8590c; box-shadow: 0 0 0 3px rgba(232, 89, 12, .2); }
.cartao-os-cte b { display: block; font-size: 15px; } .cartao-os-cte .valor-a { color: #e8590c; font-weight: 800; font-size: 17px; }
.cartao-os-cte .marca-cartao { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; }
.valores-os { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.valores-os span { padding: 1px 7px; border-radius: 999px; background: var(--realce); }
.barra-cat { display: grid; grid-template-columns: 200px 1fr 110px; gap: 10px; align-items: center; margin: 4px 0; font-size: 13px; }
.barra-cat i, .barra-saldo { display: block; height: 10px; border-radius: 5px; background: var(--realce); overflow: hidden; }
.barra-cat i em, .barra-saldo em { display: block; height: 100%; background: #e8590c; border-radius: 5px; }
.barra-saldo em { background: #16a34a; } .barra-saldo.neg em { background: #dc2626; }
.barra-cat b { text-align: right; }
.linha-prevista td { font-style: italic; color: var(--texto-medio); }
@media (max-width: 640px) { .barra-cat { grid-template-columns: 1fr 90px; } .barra-cat i { display: none; } }
.form-log[hidden], [data-end-nota][hidden], [data-destino-3t][hidden] { display: none !important; }
.desc-cob { max-width: 420px; white-space: normal; }

/* Contas a receber: os filtros a mais (OS, pedido, NF, armazém, placa, CT-e). */
.mais-filtros{margin:4px 0 8px}
.mais-filtros>summary{cursor:pointer;font-size:13px;color:var(--texto-suave,#555);padding:4px 0}
/* O sino: faturas do dia, um botão por cliente. */
.faturas-sino{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.faturas-sino button{display:flex;justify-content:space-between;gap:10px;text-align:left;border:1px solid #e5e7eb;background:#fff;border-radius:6px;padding:6px 8px;cursor:pointer;font:inherit;font-size:12px}
.faturas-sino button:hover{border-color:#E8590C;background:#fff7ed}
.faturas-sino button b{white-space:nowrap}

/* As três portas do login (07/10/2026). */
.portas-login{display:flex;gap:4px;background:#f1f3f5;border-radius:10px;padding:4px;margin-bottom:10px}
.portas-login button{flex:1;border:0;background:transparent;border-radius:8px;padding:8px 4px;font:inherit;font-size:12.5px;font-weight:700;color:#334;cursor:pointer}
.portas-login button.atual{background:#fff;color:#E8590C;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.texto-porta{margin:0 0 12px;font-size:12.5px;min-height:2.6em}
/* Painel do cliente: notas uma embaixo da outra. */
.nota-simples{display:grid;grid-template-columns:minmax(150px,1.2fr) minmax(110px,.7fr) minmax(160px,2fr) auto;gap:8px;align-items:end;border:1px solid var(--log-borda,#e5e7eb);border-radius:10px;padding:8px 10px;margin-top:6px}
.nota-simples .dest-nota{grid-column:1 / -1;margin:0}
.nota-simples .campo label{font-size:11px}
@media (max-width:640px){.nota-simples{grid-template-columns:1fr 1fr}.nota-simples .campo.largo{grid-column:1 / -1}}
.botao-arquivo{display:inline-flex;align-items:center;cursor:pointer}
.valor-os-portal .total-os td{background:#fff7ed}
.moldura-previa{border:2px dashed #cbd5e1;border-radius:14px;margin-top:10px;overflow:hidden}
/* Cotação: a conta de cada cobrança quebra linha e o valor fica à vista. */
.resultado-cotacao table{table-layout:fixed;width:100%}
.resultado-cotacao td.num{width:96px;white-space:nowrap}
.resultado-cotacao td .sub{white-space:normal;word-break:break-word;font-size:11px}
/* Linhas de cobrança (cliente e tabela): colunas enxutas para caber valor, mínimo e % no CT-e. */
.tabela-linhas-cob [data-l=item_id]{max-width:190px}
.tabela-linhas-cob [data-l=descricao]{width:170px}
.tabela-linhas-cob [data-l=base]{max-width:170px}
/* Seleção de várias linhas (abas OS e CT-e). */
.barra-selecao{position:sticky;top:0;z-index:5;background:#E8590C;color:#fff;border-radius:12px;padding:10px 14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.barra-selecao .bt-selecao{background:#fff;color:#c2410c;border:0;border-radius:8px;padding:8px 14px;font-weight:800;cursor:pointer;font:inherit;font-weight:800}
.barra-selecao .bt-selecao.escuro{background:#7c2d12;color:#fff}
.marca-linha{width:20px;height:20px;accent-color:#E8590C;cursor:pointer}
tr.linha-marcada td{background:rgba(232,89,12,.12)}
.lista-caminhoes{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.caminhao-op{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border:1px solid var(--log-borda,#d0d7de);border-radius:10px;padding:8px 10px;cursor:pointer}
.caminhao-op .sub{flex-basis:100%;margin-left:26px}
.valor-os-col{white-space:nowrap}
.valores-os span{display:block;white-space:nowrap}
/* Faixa do seguro no alto do CT-e. */
.faixa-seguro{display:flex;gap:22px;align-items:center;flex-wrap:wrap;border:2px solid #16a34a;background:linear-gradient(90deg,rgba(22,163,74,.14),rgba(22,163,74,.04));border-radius:14px;padding:12px 18px;margin:0 0 14px}
.faixa-seguro.ruim{border-color:#dc2626;background:linear-gradient(90deg,rgba(220,38,38,.14),rgba(220,38,38,.04))}
.faixa-seguro .itens-seg{display:flex;gap:22px;flex:1;flex-wrap:wrap}
.faixa-seguro small{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;opacity:.7}
.faixa-seguro .selo-seg{background:#16a34a;color:#fff;font-size:10.5px;font-weight:800;border-radius:999px;padding:2px 9px;margin-left:6px}
.faixa-seguro.ruim .selo-seg{background:#dc2626}