/* Componentes do tema Empresarial reaproveitados pela área pública e pelo sistema.
   Formulários e mensagens entram na Etapa 2B; o restante, na Etapa 4. */

/* ── Botões ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--raio);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn i {
  font-size: 13px;
}

.btn-grande {
  min-height: 46px;
  padding: 12px 22px;
  font-size: 15px;
}

.btn-principal {
  background: var(--acento);
  color: var(--sobre-acento);
}

.btn-principal:hover {
  background: var(--acento-hover);
  color: var(--sobre-acento);
}

.btn-secundario {
  border-color: var(--campo-borda);
  background: var(--superficie);
  color: var(--texto);
}

.btn-secundario:hover {
  border-color: var(--texto-2);
  color: var(--texto);
}

/* Sobre o azul-marinho do cabeçalho */
.btn-claro {
  background: #fff;
  color: var(--cabecalho);
}

.btn-claro:hover {
  background: var(--acento-suave);
  color: var(--sobre-acento-suave);
}

.btn-contorno-claro {
  border-color: rgba(255, 255, 255, 0.6);
  background: transparent;
  color: #fff;
}

.btn-contorno-claro:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* ── Selo da TSA (logo branco sobre o azul institucional) ───────────────── */
.selo-tsa {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: var(--raio-lg);
  background: var(--tsa);
}

.selo-tsa img {
  width: auto;
  height: 20px;
}

/* ── Pílulas de situação ────────────────────────────────────────────────── */
.pilula {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--raio-pilula);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}

.pilula-ok {
  background: var(--ok-fundo);
  color: var(--ok);
}

.pilula-info {
  background: var(--info-fundo);
  color: var(--info);
}

.pilula-alerta {
  background: var(--alerta-fundo);
  color: var(--alerta);
}

.pilula-neutro {
  background: var(--neutro-fundo);
  color: var(--neutro);
}

/* ── Faixa de indicadores (divisórias, não cartões soltos) ──────────────── */
.indicadores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
}

.indicador {
  min-width: 0;
  padding: 12px 16px;
  border-left: 1px solid var(--linha);
}

.indicador:first-child {
  border-left: 0;
}

.indicador-rotulo {
  display: block;
  font-size: var(--tam-rotulo);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.indicador-valor {
  display: block;
  margin-top: 3px;
  font-size: var(--tam-indicador);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}

.indicador-detalhe {
  display: block;
  font-size: 11.5px;
  color: var(--texto-3);
}

/* ── Painel com barra de título ─────────────────────────────────────────── */
/* position: relative faz o painel conter o que é posicionado dentro dele (o texto oculto
   dos botões só com ícone escapava do corte e empurrava a página para o lado). */
.painel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
}

.painel-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--linha);
  background: var(--superficie-2);
}

.painel-titulo-texto {
  font-size: 13px;
  font-weight: 600;
}

.painel-titulo-detalhe {
  font-size: 11.5px;
  color: var(--texto-3);
}

/* ── Tabela densa ───────────────────────────────────────────────────────── */
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.tabela th {
  padding: 7px 12px;
  border-bottom: 1px solid var(--th-borda);
  background: var(--th-fundo);
  font-size: var(--tam-rotulo);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--texto-3);
}

.tabela td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--linha-tabela);
  vertical-align: middle;
}

.tabela tbody tr:last-child td {
  border-bottom: 0;
}

.tabela .codigo {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rota {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.rota i {
  font-size: 10px;
  color: var(--icone);
}

.btn-largo {
  width: 100%;
}

/* ── Campos de formulário ───────────────────────────────────────────────── */
.campo + .campo {
  margin-top: 16px;
}

.campo-rotulo {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
}

/* Borda com contraste de 3,4:1, como pede a WCAG para o limite de controles. */
.campo-entrada {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--campo-borda);
  border-radius: var(--raio);
  background: var(--superficie);
  font: inherit;
  font-size: 15px;
  color: var(--texto);
}

.campo-entrada:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 0;
  border-color: var(--acento);
}

.campo-com-erro .campo-entrada {
  border-color: var(--erro);
}

.campo-erro {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--erro);
}

.campo-ajuda {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--texto-3);
}

/* Resumo dos erros que não são de um campo (ex.: usuário ou senha incorretos) */
.erros-formulario {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  padding: 11px 13px;
  border: 1px solid var(--erro);
  border-radius: var(--raio);
  background: var(--erro-fundo);
  font-size: 14px;
  font-weight: 500;
  color: var(--erro);
}

.erros-formulario i {
  margin-top: 3px;
}

/* ═══ Etapa 4: componentes das telas internas ═══════════════════════════════ */

.btn-texto {
  min-height: 34px;
  padding: 6px 8px;
  background: transparent;
  color: var(--acento);
}

.btn-texto:hover {
  background: var(--acento-suave);
  color: var(--acento-hover);
}

/* Ações destrutivas (cancelar, inativar): sempre com página de confirmação. */
.btn-perigo {
  background: var(--erro);
  color: var(--sobre-erro);
}

.btn-perigo:hover {
  background: var(--erro-hover);
  color: var(--sobre-erro);
}

.pilula-cancelado {
  background: var(--neutro-fundo);
  color: var(--cancelado);
  text-decoration: line-through;
}

/* Selo de ambiente: aparece fora da produção */
.selo-ambiente {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--raio-pilula);
  background: var(--alerta-fundo);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--alerta);
}

/* Indicadores que levam a uma lista filtrada */
.indicadores-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.indicador-link {
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s;
}

.indicador-link:hover {
  background: var(--linha-hover);
  color: inherit;
}

.indicador-link .indicador-rotulo {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.indicador-link .indicador-rotulo i {
  font-size: 9px;
  color: var(--icone);
}

/* Faixa de filtro: rótulo, segmentos e busca numa linha */
/* Faixa de filtro: cada coisa tem lugar fixo, em qualquer largura de tela.
   1ª linha: período e busca. 2ª linha: situação à esquerda e os demais filtros à
   direita (.faixa-filtro-fim). Só no celular os blocos ocupam a largura toda. */
.faixa-filtro {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 8px 10px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
}

.faixa-filtro-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.faixa-filtro-linha + .faixa-filtro-linha {
  padding-top: 10px;
  border-top: 1px solid var(--linha);
}

.faixa-filtro-fim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
}

.periodo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Busca: a lupa é o botão que aplica; o "×" limpa só a busca */
.busca {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 260px;
  min-width: 0;
  max-width: 420px;
}

.busca-campo {
  width: 100%;
  min-height: 36px;
  padding: 6px 34px;
  font-size: 13px;
}

.busca-campo::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.busca-botao,
.busca-limpar {
  position: absolute;
  top: 1px;
  bottom: 1px;
  display: grid;
  place-items: center;
  width: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--raio);
  background: transparent;
  font-size: 12px;
  color: var(--icone);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.busca-botao {
  left: 1px;
}

.busca-limpar {
  right: 1px;
  text-decoration: none;
}

.busca-botao:hover,
.busca-botao:focus-visible,
.busca-limpar:hover,
.busca-limpar:focus-visible {
  background: var(--superficie-2);
  color: var(--acento);
}

.faixa-filtro-rotulo {
  font-size: var(--tam-rotulo);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-3);
}

/* Grupo de opções (período, situação, módulo): um trilho cinza-claro com a opção escolhida
   em destaque, como um interruptor. No período, a escolhida desliza até a nova ao trocar
   de tela (transição de página do navegador, como a barra das abas). */
.segmentos {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--superficie-2);
}

.segmentos a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 4px 11px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--texto-2);
}

.segmentos a:hover {
  background: var(--superficie);
  color: var(--texto);
}

.segmentos a[aria-current] {
  background: var(--acento-suave);
  color: var(--sobre-acento-suave);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
}

.segmentos span {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--texto-3);
}

/* Tabela: números à direita, código como link, corpo de painel, rodapé com totais */
.tabela .numero,
.tabela th.numero {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tabela a.codigo {
  text-decoration: none;
  color: var(--acento);
}

.tabela a.codigo:hover {
  text-decoration: underline;
}

.tabela tbody tr:hover {
  background: var(--linha-hover);
}

.tabela-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  border-top: 1px solid var(--linha);
  background: var(--th-fundo);
  font-size: 12.5px;
  color: var(--texto-3);
}

.tabela-rodape b {
  color: var(--texto);
}

.painel-corpo {
  padding: 16px;
}

/* Linha do tempo horizontal (andamento do frete) */
.linha-do-tempo {
  display: flex;
  margin: 0 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--linha);
  list-style: none;
}

.linha-do-tempo li {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding-right: 8px;
}

.linha-do-tempo li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 6px;
  left: 26px;
  height: 2px;
  background: var(--linha);
}

.linha-do-tempo li.feito:not(:last-child)::before {
  background: var(--ok-marca);
  transform-origin: left;
  animation: linha-avanca 0.4s ease-out both;
}

/* Ao abrir a ficha, o verde avança de um passo ao outro até o atual. */
.linha-do-tempo li:nth-child(2)::before {
  animation-delay: 0.12s;
}

.linha-do-tempo li:nth-child(3)::before {
  animation-delay: 0.24s;
}

.linha-do-tempo li:nth-child(4)::before {
  animation-delay: 0.36s;
}

@keyframes linha-avanca {
  from {
    transform: scaleX(0);
  }
}

@keyframes linha-desce {
  from {
    transform: scaleY(0);
  }
}

.linha-do-tempo .marco {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--linha-2);
  border-radius: 50%;
  background: var(--superficie);
  font-size: 9px;
  color: transparent;
}

/* Cores do andamento: feito em verde, o passo atual em azul, o que falta em cinza. */
.linha-do-tempo li.feito .marco {
  border-color: var(--ok-marca);
  background: var(--ok-marca);
  color: var(--superficie);
}

.linha-do-tempo li.atual .marco {
  border-color: var(--info-marca);
  color: var(--info-marca);
}

.linha-do-tempo li.atual b {
  color: var(--info);
}

/* Frete cancelado: o processo parou; tudo em cinza, o × no lugar do passo atual. */
.linha-do-tempo-cancelada li.feito .marco {
  border-color: var(--neutro-marca);
  background: var(--neutro-marca);
}

.linha-do-tempo-cancelada li.feito:not(:last-child)::before {
  background: var(--neutro-marca);
}

.linha-do-tempo-cancelada li.atual .marco {
  border-color: var(--cancelado);
  color: var(--cancelado);
}

.linha-do-tempo-cancelada li.atual b {
  color: var(--cancelado);
}

.linha-do-tempo b {
  font-size: 13px;
  font-weight: 600;
}

.linha-do-tempo li:not(.feito):not(.atual) b {
  font-weight: 500;
  color: var(--texto-3);
}

.linha-do-tempo small {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--texto-3);
}

.ficha-colunas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
}

/* Cartão de rota: origem → destino */
.cartao-rota {
  padding: 14px 16px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie-2);
}

.cartao-rota-ponto {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cartao-rota-ponto small {
  display: block;
  font-size: 11px;
  color: var(--texto-3);
}

.cartao-rota-ponto b {
  font-size: 14px;
}

.cartao-rota .ponto {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border: 3px solid var(--texto-2);
  border-radius: 50%;
  background: var(--superficie);
}

.cartao-rota .ponto-final {
  background: var(--texto-2);
}

.cartao-rota-carga {
  margin: 3px 0 3px 5px;
  padding: 8px 0 8px 17px;
  border-left: 2px solid var(--linha-2);
  font-size: 12px;
  color: var(--texto-3);
}

/* Pares rótulo e valor (uma linha cada, valor à direita) */
.pares {
  margin: 12px 0 0;
}

.pares > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--linha-tabela);
}

.pares dt {
  color: var(--texto-3);
}

.pares dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.subtitulo-bloco {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.nome-destaque {
  font-size: 14px;
  font-weight: 700;
}

.texto-apoio {
  margin-top: 2px;
  color: var(--texto-2);
}

/* Mini-indicadores (ficha do cliente) */
.mini-indicadores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

.mini-indicadores > div {
  min-width: 0;
  padding: 10px 12px;
  border-left: 1px solid var(--linha);
}

.mini-indicadores > div:first-child {
  border-left: 0;
}

.mini-indicadores small {
  display: block;
  font-size: 11px;
  color: var(--texto-3);
}

/* O valor quebra a linha em vez de virar "R$ 2…" (não havia como ver o valor inteiro). */
.mini-indicadores b {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Mensagens do sistema (messages do Django) */
.mensagens {
  display: grid;
  gap: 8px;
  max-width: 720px;
  margin-bottom: 16px;
}

.mensagem {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 13px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
  font-weight: 500;
  color: var(--texto-2);
}

.mensagem-success {
  border-color: var(--ok-borda);
  background: var(--ok-fundo);
  color: var(--ok);
}

.mensagem-warning {
  border-color: var(--alerta-borda);
  background: var(--alerta-fundo);
  color: var(--alerta);
}

.mensagem-error {
  border-color: var(--erro);
  background: var(--erro-fundo);
  color: var(--erro);
}

/* Nota informativa */
.nota {
  display: flex;
  gap: 10px;
  max-width: 720px;
  margin-bottom: 16px;
  padding: 11px 13px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--texto-2);
}

.nota i {
  margin-top: 3px;
  color: var(--icone);
}

.nota p + p {
  margin-top: 4px;
}

.nota-alerta {
  border-color: var(--alerta-borda);
  background: var(--alerta-fundo);
  color: var(--alerta);
}

.nota-alerta i {
  color: var(--alerta);
}

/* Formulário em painel branco */
.formulario-painel {
  max-width: 520px;
  padding: 20px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
}

.formulario-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.campo-ajuda ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.campo-obrigatorio {
  color: var(--erro);
}

select.campo-entrada {
  appearance: auto;
}

.campo-com-prefixo {
  display: flex;
}

.campo-prefixo {
  display: grid;
  place-items: center;
  padding: 0 12px;
  border: 1px solid var(--campo-borda);
  border-right: 0;
  border-radius: var(--raio) 0 0 var(--raio);
  background: var(--superficie-2);
  font-weight: 600;
  color: var(--texto-2);
}

.campo-com-prefixo .campo-entrada {
  border-radius: 0 var(--raio) var(--raio) 0;
}

.campo-com-erro .campo-prefixo {
  border-color: var(--erro);
}

/* Página de confirmação de ação */
.confirmacao-texto {
  margin-bottom: 4px;
  color: var(--texto-2);
}

.confirmacao-texto p + p {
  margin-top: 4px;
}

.confirmacao-texto b {
  color: var(--texto);
}

/* Paginação */
.paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.paginacao-resumo,
.paginacao-atual {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--texto-3);
}

.paginacao-links {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Estado vazio, com ação */
.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 20px;
  border: 1px dashed var(--linha-2);
  border-radius: var(--raio);
  background: var(--superficie);
  text-align: center;
}

.vazio-icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--acento-suave);
  font-size: 18px;
  color: var(--acento);
}

.vazio-titulo {
  font-size: 15px;
  font-weight: 600;
}

.vazio-texto {
  max-width: 52ch;
  color: var(--texto-2);
}

.vazio .btn {
  margin-top: 8px;
}

/* ═══ Etapa 5A: peças usadas a partir dos cadastros ═══════════════════════ */

/* Iniciais do cliente (na lista e na página dele) */
.avatar {
  display: inline-grid;
  flex: 0 0 28px;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--raio);
  background: var(--superficie-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--texto-2);
}

.avatar-grande {
  flex-basis: 40px;
  width: 40px;
  height: 40px;
  font-size: 13px;
}

/* Pares dentro de um painel: sem margem em cima nem linha embaixo do último */
.painel-corpo > .pares:first-child {
  margin-top: 0;
}

.painel-corpo > .pares > div:last-child {
  border-bottom: 0;
}

.pares dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Formulário de cadastro: grupos de campos e campos lado a lado */
.formulario-largo {
  max-width: 760px;
}

.grupo-campos {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.grupo-campos + .grupo-campos {
  margin-top: 26px;
}

.grupo-campos legend {
  margin-bottom: 12px;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texto-3);
}

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

.campos-linha .campo + .campo {
  margin-top: 0;
}

.campo + .campos-linha,
.campos-linha + .campo,
.campos-linha + .campos-linha {
  margin-top: 16px;
}

.campos-cidade-uf {
  grid-template-columns: minmax(0, 1fr) 96px;
}

textarea.campo-entrada {
  min-height: 88px;
  line-height: 1.45;
  resize: vertical;
}

/* ═══ Etapa 5B: filtros da lista e listas curtas ═════════════════════════ */

/* Seleção dentro da faixa de filtro (ex.: cliente) */
.campo-filtro {
  flex: 0 1 220px;
  width: auto;
  min-width: 0;
  min-height: 36px;
  padding: 6px 10px;
  font-size: 13px;
}

/* Filtros ativos, cada um com um link para tirá-lo */
.filtros-ativos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -4px 0 14px;
  font-size: 12.5px;
  color: var(--texto-3);
}

.filtro-ativo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-pilula);
  background: var(--superficie);
  font-weight: 600;
  text-decoration: none;
  color: var(--texto-2);
}

a.filtro-ativo:hover {
  border-color: var(--campo-borda);
  color: var(--texto);
}

.filtro-ativo i {
  font-size: 11px;
}

.filtro-ativo-texto {
  font-weight: 500;
}

.filtros-ativos .btn {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 12.5px;
}

.texto-apoio-inline {
  font-size: 11.5px;
  color: var(--texto-3);
}

/* Lista curta de fretes (outros fretes do cliente) */
.lista-fretes {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

.lista-fretes li + li {
  border-top: 1px solid var(--linha);
}

.lista-fretes a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--texto);
}

.lista-fretes a:hover {
  background: var(--linha-hover);
}

.lista-fretes b {
  display: block;
  font-weight: 600;
}

.lista-fretes small {
  display: block;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--texto-3);
}

.lista-fretes .pilula {
  flex: 0 0 auto;
}

.subtitulo-com-espaco {
  margin-top: 18px;
}

.nota-rodape {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--texto-3);
}

.historico-observacao {
  display: block;
  font-size: 12px;
  color: var(--texto-2);
}

.ficha-observacoes {
  margin-top: 14px;
}

/* ═══ Etapa 10A: peças do protótipo completo ═════════════════════════════ */

/* Faixa de filtros: período, separador, busca com ícone, situação e execução */
.segmentos-periodo a[aria-current] {
  background: var(--acento);
  color: var(--sobre-acento);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--acento) 35%, transparent);
  view-transition-name: periodo-atual;
}

.segmentos-periodo a[aria-current] span {
  color: var(--sobre-acento);
}

/* Aviso de que a busca vale para todo o histórico */
.nota-busca {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: -4px 0 12px;
  font-size: 12.5px;
  color: var(--texto-2);
}

.nota-busca i {
  color: var(--acento);
}

/* "Outro período": botão no fim dos atalhos que abre a escolha de mês, ano ou intervalo
   (details/summary: abre e fecha sem JavaScript). */
/* O painel se ancora no começo da linha do período (.periodo), não no botão: ancorado
   no botão, ele passava da borda direita da tela a 768 e 1024px. */
.periodo-outro {
  position: static;
}

/* Fechado, o painel sai do layout: o Chrome mantém o conteúdo de um <details> fechado
   com tamanho, e ele empurrava a página para o lado. */
.periodo-outro:not([open]) .periodo-outro-painel {
  display: none;
}

.periodo-outro summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 5px 12px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--superficie);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--texto-2);
  cursor: pointer;
  list-style: none;
  transition:
    background-color 0.15s,
    color 0.15s;
}

.periodo-outro summary::-webkit-details-marker {
  display: none;
}

.periodo-outro summary:hover {
  background: var(--superficie-2);
  color: var(--texto);
}

.periodo-outro summary[aria-current] {
  border-color: var(--acento);
  background: var(--acento);
  color: var(--sobre-acento);
}

.periodo-outro-seta {
  font-size: 10px;
  transition: transform 0.15s;
}

.periodo-outro[open] .periodo-outro-seta {
  transform: rotate(180deg);
}

/* Atalhos rápidos do "Outro período" (auditoria de 27/10/2026) */
.periodo-rapidos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linha);
}

.periodo-rapido {
  padding: 4px 9px;
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-pilula);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  color: var(--texto-2);
}

.periodo-rapido:hover {
  border-color: var(--acento);
  color: var(--acento);
}

.periodo-rapido[aria-current="true"] {
  border-color: var(--acento);
  background: var(--acento);
  color: var(--sobre-acento);
}

.periodo-outro-painel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  display: grid;
  gap: 10px;
  width: max-content;
  max-width: min(440px, 90vw);
  padding: 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: 0 14px 34px -14px rgba(15, 23, 42, 0.35);
  animation: surgir 0.16s ease-out both;
}

.periodo-outro-linha {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.periodo-outro-linha label {
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-2);
}

.periodo-outro-linha .campo-entrada {
  min-height: 34px;
  padding: 5px 8px;
  font-size: 13px;
}

.periodo-outro-intervalo {
  grid-template-columns: 52px minmax(0, 1fr) auto minmax(0, 1fr) auto;
  padding-top: 10px;
  border-top: 1px solid var(--linha);
}

.faixa-separador {
  align-self: stretch;
  width: 1px;
  margin: 0 2px;
  background: var(--linha);
}

.campo-com-icone {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.campo-com-icone > i {
  position: absolute;
  left: 11px;
  z-index: 1;
  font-size: 11px;
  color: var(--icone);
  pointer-events: none;
}

.campo-com-icone .campo-filtro {
  padding-left: 30px;
}

/* Com JavaScript, os filtros se aplicam sozinhos e o botão não é necessário. */
.com-js .botao-sem-js {
  display: none;
}

.texto-suave {
  color: var(--texto-3);
}

.tabela .uf {
  font-size: 11px;
  color: var(--texto-3);
}

.celula-vazia {
  padding: 24px 12px;
  text-align: center;
  color: var(--texto-2);
}

/* Paginador do rodapé: "‹ 1 de 3 ›" */
.paginador {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--texto-2);
}

.paginador-seta {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--raio);
  color: var(--texto-2);
  text-decoration: none;
}

a.paginador-seta:hover {
  background: var(--superficie-3);
  color: var(--texto);
}

span.paginador-seta {
  color: var(--linha-2);
}

/* Placa de veículo */
.placa {
  display: inline-block;
  padding: 1px 7px;
  border: 1.5px solid var(--texto);
  border-radius: 5px;
  background: var(--superficie);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Receita e custos do frete */
.caixa-financeira {
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

.caixa-linha {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--linha);
}

.caixa-linha small {
  display: block;
  font-size: 11.5px;
  color: var(--texto-3);
}

.caixa-linha b {
  font-weight: 600;
  white-space: nowrap;
}

/* Cada custo abre a despesa (fretes/detalhe.html): a linha inteira é o link. */
a.caixa-linha-custo {
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s;
}

a.caixa-linha-custo:hover {
  background: var(--superficie-2);
}

a.caixa-linha-custo:hover > span {
  text-decoration: underline;
  text-decoration-color: var(--texto-3);
  text-underline-offset: 2px;
}

.custo-situacao {
  font-weight: 600;
}

.custo-quitada {
  color: var(--ok);
}

.custo-vencida {
  color: var(--perigo);
}

.custo-hoje {
  color: var(--alerta);
}

/* "Mais detalhes" do "Lançar custo" pela ficha (financeiro/despesa.html). */
.mais-detalhes {
  border-top: 1px solid var(--linha);
}

.mais-detalhes > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-height: 44px;
  padding-block: 12px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--acento);
}

.mais-detalhes > summary::-webkit-details-marker {
  display: none;
}

.mais-detalhes > summary small {
  font-weight: 400;
  color: var(--texto-3);
}

.mais-detalhes-seta {
  align-self: center;
  margin-left: auto;
  font-size: 11px;
  transition: transform 0.2s ease;
}

.mais-detalhes[open] .mais-detalhes-seta {
  transform: rotate(180deg);
}

.mais-detalhes > .campos-grade {
  margin-top: 8px;
}

/* O clipe com quantos anexos (templates/anexos/_contagem.html). */
.contagem-anexos {
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--texto-3);
}

.caixa-linha.destacado {
  animation: destacar-linha 2.6s ease-out 0.25s backwards;
}

.caixa-receita,
.caixa-resultado {
  background: var(--superficie-2);
}

.caixa-receita b {
  font-weight: 700;
}

.caixa-resultado {
  border-top: 2px solid var(--texto);
  border-bottom: 0;
}

.caixa-resultado span,
.caixa-resultado b {
  font-weight: 700;
}

.caixa-nota {
  padding: 9px 14px;
  border-top: 1px solid var(--linha);
  font-size: 12px;
  color: var(--texto-3);
}

.recebimento {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

.recebimento small {
  display: block;
  font-size: 12px;
  color: var(--texto-3);
}

.recebimento b {
  font-size: 15px;
  font-weight: 700;
}

/* Formulário no visual das janelas do protótipo */
.janela {
  max-width: 640px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  background: var(--superficie);
}

.janela-cabecalho {
  padding: 14px 20px;
  border-bottom: 1px solid var(--linha);
  border-radius: 6px 6px 0 0;
  background: var(--superficie-2);
}

.janela-cabecalho h2 {
  font-size: 17px;
  font-weight: 700;
}

.janela-cabecalho p {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--texto-2);
}

.janela-corpo {
  padding: 18px 20px;
}

.janela-corpo .erros-formulario {
  margin-bottom: 14px;
}

.janela-rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--linha);
  border-radius: 0 0 6px 6px;
  background: var(--superficie-2);
}

/* Janela por cima da página (app.js, core/janelas.py), como no Hidrolog: a página fica
   escurecida atrás e a caixa sobe; no celular, vira uma folha que sobe de baixo. O
   cabeçalho e o rodapé ficam presos e o meio rola. A pergunta "Sair sem salvar?" usa o
   mesmo fundo. */
.janela-modal,
.janela-pergunta {
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--texto);
  overflow: visible;
}

.janela-modal {
  width: min(680px, 100% - 32px);
  margin: auto;
}

.janela-modal::backdrop,
.janela-pergunta::backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  animation: janela-fundo 0.2s ease-out;
}

.janela-modal.fechando::backdrop,
.janela-pergunta.fechando::backdrop {
  animation: janela-fundo 0.16s ease-in reverse forwards;
}

.janela-modal-caixa {
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 12px;
  background: var(--superficie);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  animation: janela-sobe 0.22s ease-out;
}

.janela-modal.fechando .janela-modal-caixa {
  animation: janela-desce 0.16s ease-in forwards;
}

/* Na janela, o formulário e o painel perdem a moldura própria: a caixa é a moldura. */
.janela-modal .janela,
.janela-modal .formulario-painel {
  max-width: none;
  border: 0;
  border-radius: 0;
}

.janela-modal .formulario-painel {
  padding: 0;
}

.janela-modal .janela-cabecalho {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-right: 60px;
  border-radius: 0;
}

.janela-modal .janela-rodape {
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-radius: 0;
}

.janela-modal .janela-anexos,
.janela-modal .janela-historico {
  max-width: none;
  margin: 16px 20px 20px;
}

#janela-titulo:focus {
  outline: none;
}

.janela-fechar {
  position: absolute;
  top: 9px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--raio-lg);
  background: transparent;
  color: var(--texto-2);
  font-size: 18px;
  cursor: pointer;
}

.janela-fechar:hover {
  background: var(--superficie-3);
  color: var(--texto);
}

.janela-pergunta {
  width: min(400px, 100% - 32px);
  margin: auto;
}

.janela-pergunta-caixa {
  padding: 22px 22px 18px;
  border-radius: 14px;
  background: var(--superficie);
  text-align: center;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
  animation: confirmacao-entra 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.janela-pergunta.fechando .janela-pergunta-caixa {
  animation: janela-desce 0.14s ease-in forwards;
}

.janela-pergunta-icone {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--alerta-fundo);
  color: var(--alerta);
  font-size: 20px;
}

.janela-pergunta h2 {
  font-size: 16px;
  font-weight: 700;
}

.janela-pergunta p {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--texto-2);
}

.janela-pergunta-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.janela-pergunta-acoes .btn {
  flex: 1 1 150px;
  justify-content: center;
}

@keyframes janela-fundo {
  from {
    opacity: 0;
  }
}

@keyframes janela-sobe {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
}

@keyframes janela-desce {
  to {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes janela-folha {
  from {
    transform: translateY(100%);
  }
}

@keyframes janela-folha-sai {
  to {
    transform: translateY(100%);
  }
}

@media (max-width: 600px) {
  .janela-modal {
    width: 100%;
    margin: auto 0 0;
  }

  .janela-modal-caixa {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 14px 14px 0 0;
    animation-name: janela-folha;
  }

  .janela-modal.fechando .janela-modal-caixa {
    animation-name: janela-folha-sai;
  }

  .janela-modal .janela-cabecalho,
  .janela-modal .janela-corpo,
  .janela-modal .janela-rodape {
    padding-right: 16px;
    padding-left: 16px;
  }

  .janela-modal .janela-cabecalho {
    padding-right: 56px;
  }

  .janela-modal .janela-rodape {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .janela-modal .janela-anexos,
  .janela-modal .janela-historico {
    margin-right: 16px;
    margin-left: 16px;
  }
}

/* O fundo escurecido não é alcançado pela regra geral de "menos movimento" (base.css). */
@media (prefers-reduced-motion: reduce) {
  .janela-modal::backdrop,
  .janela-pergunta::backdrop {
    animation: none;
  }
}

.campos-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.campos-grade .campo + .campo {
  margin-top: 0;
}

.campos-grade .campo-rotulo {
  margin-bottom: 5px;
  font-size: 12px;
  color: var(--texto-2);
}

.campos-grade .campo-entrada {
  min-height: 38px;
  padding: 7px 11px;
  font-size: 14px;
}

.campo-largo {
  grid-column: 1 / -1;
}

.campo-cidade-uf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  gap: 6px;
}

.campo-opcoes {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.campo-opcoes legend {
  padding: 0;
}

/* Opções lado a lado (rádio), como "Veículo próprio | Terceiro" no protótipo */
.opcoes-segmentadas {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 6px;
  background: var(--superficie-3);
}

.opcoes-segmentadas label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto-2);
  cursor: pointer;
}

.opcoes-segmentadas input {
  position: absolute;
  opacity: 0;
}

.opcoes-segmentadas label:has(input:checked) {
  background: var(--superficie);
  box-shadow: 0 1px 2px rgba(18, 21, 27, 0.12);
  color: var(--texto);
}

.opcoes-segmentadas label:has(input:focus-visible) {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

/* ═══ Etapa 10B: financeiro e clientes ═══════════════════════════════════ */

.pilula-perigo {
  background: var(--perigo-fundo);
  color: var(--perigo);
}

.valor-ruim {
  color: var(--perigo);
}

/* Resultado positivo em verde; o que vence em breve em âmbar. */
.valor-bom {
  color: var(--ok);
}

.valor-atencao {
  color: var(--alerta);
}

.btn-pequeno {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 12.5px;
}

/* Partes de uma área (Configurações, Financeiro, Frota e containers, Relatórios): abas
   compactas sobre uma linha, com ícone pequeno. A atual tem a moldura e uma barra azul em
   cima, que desliza até a aba nova ao trocar de tela (transição de página do navegador;
   sem ela, só troca). Passar o mouse acende a aba e desenha um traço embaixo do nome. No
   celular, a linha rola para o lado: a aba atual fica à vista e a borda esmaece onde há
   mais (app.js). */
.abas {
  position: relative;
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
  padding-top: 3px;
  overflow-x: auto;
  border-bottom: 1px solid var(--linha-2);
  scrollbar-width: none;
}

.abas a {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  margin-bottom: -1px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: var(--texto-3);
}

.abas a i {
  font-size: 12px;
  color: var(--icone);
}

.abas a::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--linha-2);
  transform: scaleX(0);
}

.abas a:hover {
  background: color-mix(in srgb, var(--superficie) 65%, transparent);
  color: var(--texto);
}

.abas a:hover i {
  color: var(--acento);
  transform: translateY(-1px);
}

.abas a:hover::after {
  transform: scaleX(1);
}

.abas a:active {
  transform: translateY(1px);
}

.abas a[aria-current] {
  border-color: var(--linha-2);
  border-bottom: 1px solid var(--superficie);
  background: var(--superficie);
  color: var(--menu-ativo);
}

.abas a[aria-current] i {
  color: var(--acento);
}

.abas a[aria-current]::after {
  display: none;
}

.abas-marca {
  position: absolute;
  top: -1px;
  right: -1px;
  left: -1px;
  height: 3px;
  border-radius: 6px 6px 0 0;
  background: var(--acento);
  view-transition-name: aba-atual;
}

.abas.abas-mais-a-direita {
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}

.abas.abas-mais-a-esquerda {
  mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
}

.abas.abas-mais-a-direita.abas-mais-a-esquerda {
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 36px,
    #000 calc(100% - 36px),
    transparent
  );
}

/* Troca de tela com a transição do navegador (ligada no app.css, só na área interna): só
   as marcas andam (a barra da aba atual, o período escolhido, a seção do menu). Para uma
   tela sem a marca (ou vindo de uma), nada de rastro. */
::view-transition-group(aba-atual),
::view-transition-group(periodo-atual),
::view-transition-group(menu-atual) {
  animation-duration: 0.32s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

::view-transition-old(aba-atual):only-child,
::view-transition-new(aba-atual):only-child,
::view-transition-old(periodo-atual):only-child,
::view-transition-new(periodo-atual):only-child,
::view-transition-old(menu-atual):only-child,
::view-transition-new(menu-atual):only-child {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(aba-atual),
  ::view-transition-group(periodo-atual),
  ::view-transition-group(menu-atual) {
    animation: none;
  }
}

/* Blocos de totais (Em aberto, Vencido, Recebido no período) */
.blocos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
}

.bloco {
  min-width: 0;
  padding: 12px 15px;
  border-left: 1px solid var(--linha);
}

.bloco:first-child {
  border-left: 0;
}

.bloco small {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.bloco b {
  display: block;
  margin-top: 3px;
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.bloco span {
  display: block;
  font-size: 11.5px;
  color: var(--texto-3);
}

.bloco-ruim b {
  color: var(--perigo);
}

/* Bloco que leva à lista que explica o número (auditoria de 27/10/2026) */
.bloco-link {
  color: var(--texto);
  text-decoration: none;
}

.bloco-link:hover {
  background: var(--linha-hover);
}

.bloco-link small i {
  font-size: 9px;
  color: var(--icone);
}

/* Célula com texto e uma linha menor embaixo (cliente e frete, descrição e categoria) */
.tabela .sub {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--texto-3);
}

.celula-acao {
  text-align: right;
  white-space: nowrap;
}

.link-discreto {
  text-decoration: none;
  color: inherit;
}

.link-discreto:hover {
  color: var(--acento);
  text-decoration: underline;
}

/* Posição (contas em aberto, posição de hoje): grupos e linhas com valor à direita */
.posicao {
  display: flex;
  flex-direction: column;
}

.posicao-grupo {
  padding: 12px 0 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.posicao-grupo:first-child {
  padding-top: 0;
}

.posicao-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--linha-tabela);
  font-size: 12.5px;
  text-decoration: none;
  color: var(--texto-2);
}

.posicao-linha b {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}

.posicao-linha b.valor-ruim {
  color: var(--perigo);
}

.posicao-linha b.valor-bom {
  color: var(--ok);
}

.posicao-linha b.valor-atencao {
  color: var(--alerta);
}

a.posicao-linha:hover {
  color: var(--acento);
}

a.posicao-linha:hover b {
  text-decoration: underline;
}

/* Demonstrativo do período */
.demonstrativo td {
  padding: 8px 12px;
}

.demonstrativo-total td {
  border-bottom: 1px solid var(--linha-2);
  font-size: 13px;
  font-weight: 600;
}

.demonstrativo-categoria td:first-child {
  padding-left: 28px;
  color: var(--texto-2);
}

.demonstrativo-resultado td {
  border-top: 2px solid var(--texto);
  background: var(--superficie-2);
  font-size: 14px;
  font-weight: 700;
}

.nota-rodape-painel {
  padding: 0 16px 12px;
}

.painel-titulo p {
  margin: 0;
}

.introducao {
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--texto-2);
}

/* Lista de seleção (Por frete): item escolhido marcado à esquerda */
.ferramentas-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--linha);
}

.ferramentas-lista .busca {
  max-width: none;
}

.lista-selecao a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--linha);
  text-decoration: none;
  color: var(--texto);
}

.lista-selecao a:hover {
  background: var(--superficie-2);
}

.lista-selecao a[aria-current] {
  background: var(--acento-suave);
  box-shadow: inset 3px 0 0 var(--acento);
}

.lista-selecao-texto b,
.lista-selecao-valor b {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
}

.lista-selecao-texto span {
  display: block;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texto-3);
}

.lista-selecao-valor {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lista-selecao-valor small {
  font-size: 11.5px;
  color: var(--texto-3);
}

/* Legenda e barras do resultado por frete (cascata) */
.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--texto-2);
}

.legenda span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.legenda i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.legenda-receita {
  background: var(--grafico-receita);
}

.legenda-custo {
  background: var(--grafico-despesa);
}

.legenda-resultado {
  background: var(--grafico-resultado);
}

/* Amostra de cor: liga o número à cor do gráfico (Faturamento, Despesas) ou à da
   etiqueta da situação (Em andamento, Aguardando coleta). No indicador, um traço curto no
   alto do cartão, sem tomar lugar do nome; na linha da posição, um quadradinho antes. */
.indicador:is(.amostra-receita, .amostra-despesa, .amostra-ok, .amostra-info, .amostra-alerta) {
  position: relative;
}

.indicador:is(.amostra-receita, .amostra-despesa, .amostra-ok, .amostra-info, .amostra-alerta)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  width: 28px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--amostra);
}

.posicao-linha:is(.amostra-ok, .amostra-info, .amostra-alerta) > span:first-child::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 2px;
  background: var(--amostra);
  vertical-align: 1px;
}

.amostra-receita {
  --amostra: var(--grafico-receita);
}

.amostra-despesa {
  --amostra: var(--grafico-despesa);
}

.amostra-ok {
  --amostra: var(--ok-marca);
}

.amostra-info {
  --amostra: var(--info-marca);
}

.amostra-alerta {
  --amostra: var(--alerta-marca);
}

/* Fatia de cada categoria no demonstrativo, na cor das despesas do gráfico. */
.parte {
  width: 56px;
  height: 6px;
  margin-right: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 3px;
  background: var(--superficie-3);
  vertical-align: 1px;
  appearance: none;
}

.parte::-webkit-progress-bar {
  border-radius: 3px;
  background: var(--superficie-3);
}

.parte::-webkit-progress-value {
  border-radius: 3px;
  background: var(--grafico-despesa);
}

.parte::-moz-progress-bar {
  border-radius: 3px;
  background: var(--grafico-despesa);
}

/* Gráfico de linhas: a legenda é um traço */
.legenda-linha i {
  width: 14px;
  height: 2px;
  border-radius: 1px;
}

.cascata {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 16px 0 4px;
}

.cascata-linha {
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  font-size: 12.5px;
}

.cascata-linha > span {
  font-weight: 500;
  color: var(--texto-2);
}

.cascata-linha small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--texto-3);
}

.cascata-linha b {
  min-width: 92px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.cascata-total {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--linha);
}

.cascata-total > span,
.cascata-total b {
  font-weight: 700;
  color: var(--texto);
}

.cascata-trilha {
  display: block;
  overflow: visible;
}

.barra-receita {
  fill: var(--grafico-receita);
}

.barra-custo {
  fill: var(--grafico-despesa);
}

.barra-resultado {
  fill: var(--grafico-resultado);
}

.botao-espacado {
  margin-top: 14px;
}

/* Marcar (caixa de seleção com o rótulo ao lado) */
.campo-marcar label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

/* ═══ Etapa 10C: visão geral (comparação e gráfico) ══════════════════════ */

.indicador-variacao {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
}

.indicador-variacao i {
  font-size: 10px;
}

.variacao-boa {
  color: var(--ok);
}

.variacao-ruim {
  color: var(--perigo);
}

.variacao-neutra {
  color: var(--texto-3);
}

.indicador-ruim .indicador-valor {
  color: var(--perigo);
}

.indicador-bom .indicador-valor {
  color: var(--ok);
}

/* Gráfico de colunas: eixo de largura fixa + área que acompanha a largura */
.grafico {
  position: relative;
  display: flex;
  align-items: flex-start;
}

/* Dica do gráfico (app.js): o período e os valores, nas cores da legenda. */
.grafico-dica {
  position: absolute;
  top: 4px;
  z-index: 3;
  display: grid;
  gap: 4px;
  min-width: 200px;
  padding: 9px 12px 10px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--superficie);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
  font-size: 12px;
  color: var(--texto-2);
  pointer-events: none;
  transform: translateX(-50%);
  transition: left 0.14s ease-out;
  animation: aparecer 0.12s ease-out;
}

.grafico-dica[hidden] {
  display: none;
}

.grafico-dica b {
  margin-bottom: 2px;
  font-size: 12.5px;
  color: var(--texto);
}

.grafico-dica-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  white-space: nowrap;
}

.grafico-dica-linha strong {
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}

.grafico-dica-linha strong.valor-bom {
  color: var(--ok);
}

.grafico-dica-linha strong.valor-ruim {
  color: var(--perigo);
}

.grafico-dica-linha[data-serie] > span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 2px;
  background: var(--grafico-receita);
}

.grafico-dica-linha[data-serie="despesa"] > span::before {
  background: var(--grafico-despesa);
}

/* Com a dica aberta, a coluna em foco fica inteira e as outras recuam um pouco. */
.grafico-coluna.em-foco .grafico-fundo {
  fill: var(--th-fundo);
}

.grafico.com-dica .grafico-coluna:not(.em-foco) [class^="barra-"] {
  opacity: 0.4;
}

.grafico.com-dica .grafico-coluna.em-foco [class^="barra-"] {
  opacity: 1;
}

.grafico-ponto.em-foco .grafico-guia {
  opacity: 1;
}

.grafico-marca {
  stroke: var(--superficie);
  stroke-width: 2;
  opacity: 0;
  transition:
    opacity 0.12s,
    cx 0.14s ease-out,
    cy 0.14s ease-out;
}

.grafico-marca.visivel {
  opacity: 1;
}

.grafico svg {
  display: block;
  overflow: visible;
}

.grafico-area {
  flex: 1 1 auto;
  min-width: 0;
}

.grafico text {
  font-family: var(--fonte);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  fill: var(--texto-3);
}

.grafico-grade {
  stroke: var(--linha-tabela);
}

.grafico-base {
  stroke: var(--linha-2);
}

.grafico-fundo {
  fill: transparent;
}

.grafico-coluna:hover .grafico-fundo {
  fill: var(--th-fundo);
}

.grafico-coluna .grafico-rotulo {
  font-weight: 600;
  fill: var(--texto-2);
}

.grafico-coluna.apagada .grafico-rotulo {
  font-weight: 400;
  fill: var(--texto-3);
}

.grafico-coluna.apagada [class^="barra-"] {
  opacity: 0.42;
}

.grafico-coluna.parcial [class^="barra-"] {
  opacity: 0.62;
}

.barra-despesa {
  fill: var(--grafico-despesa);
}

/* ═══ Etapa 10D: relatórios ══════════════════════════════════════════════ */

/* Gráfico de linhas: o traço não engrossa quando o SVG interno estica */
.grafico-linhas polyline {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.linha-receita {
  stroke: var(--grafico-receita);
}

.linha-despesa {
  stroke: var(--grafico-despesa);
}

.ponto-receita,
.ponto-despesa {
  stroke: var(--superficie);
  stroke-width: 2;
}

.ponto-receita {
  fill: var(--grafico-receita);
}

.ponto-despesa {
  fill: var(--grafico-despesa);
}

.grafico-finais text {
  font-weight: 600;
}

.grafico .rotulo-receita {
  fill: var(--grafico-receita);
}

.grafico .rotulo-despesa {
  fill: var(--grafico-despesa);
}

.grafico-guia {
  stroke: var(--linha-2);
  opacity: 0;
}

.grafico-ponto:hover .grafico-guia {
  opacity: 1;
}

.grafico-linhas .grafico-rotulo {
  font-weight: 600;
  fill: var(--texto-2);
}

/* Barras horizontais (clientes com maior volume) */
.barras-horizontais {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.barras-horizontais li {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.barras-horizontais-nome {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.barras-horizontais-nome b {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barras-horizontais-nome small {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--texto-3);
}

.barras-horizontais-trilha {
  display: block;
  overflow: visible;
}

.barras-horizontais-trilha text {
  font-family: var(--fonte);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  fill: var(--texto-2);
}

.lista-outros {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-size: 12.5px;
  color: var(--texto-2);
  list-style: none;
}

.lista-outros li {
  display: flex;
  gap: 9px;
  align-items: baseline;
}

.lista-outros i {
  font-size: 10px;
  color: var(--texto-3);
}

/* Só aparece no papel (ver "Impressão" em app.css) */
.cabecalho-impressao {
  display: none;
}

/* ═══ Etapa 11B: histórico e correções ════════════════════════════════════ */

.btn-texto-perigo {
  color: var(--perigo);
}

.btn-texto-perigo:hover {
  background: var(--erro-fundo);
  color: var(--perigo);
}

.janela-rodape-esquerda {
  margin-right: auto;
}

/* Menu "Corrigir" da ficha: botão que abre a lista das correções possíveis */
.menu-acoes {
  position: relative;
}

.menu-acoes summary {
  list-style: none;
}

.menu-acoes summary::-webkit-details-marker {
  display: none;
}

.menu-acoes-seta {
  font-size: 10px;
  transition: transform 0.15s;
}

.menu-acoes[open] .menu-acoes-seta {
  transform: rotate(180deg);
}

.menu-acoes-lista {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: 0 14px 34px -14px rgba(15, 23, 42, 0.35);
  animation: surgir 0.16s ease-out both;
}

.menu-acoes-lista a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  color: var(--texto);
}

.menu-acoes-lista a:hover {
  background: var(--superficie-2);
}

.menu-acoes-lista i {
  width: 16px;
  text-align: center;
  color: var(--icone);
}

.menu-acoes-lista .menu-acoes-perigo,
.menu-acoes-lista .menu-acoes-perigo i {
  color: var(--perigo);
}

/* Pílulas de cada tipo de operação */
.pilula-acao-cadastro,
.pilula-acao-lancamento {
  background: var(--acento-suave);
  color: var(--sobre-acento-suave);
}

.pilula-acao-coleta,
.pilula-acao-entrega,
.pilula-acao-recebimento,
.pilula-acao-pagamento {
  background: var(--ok-fundo);
  color: var(--ok);
}

.pilula-acao-alteracao,
.pilula-acao-situacao {
  background: var(--neutro-fundo);
  color: var(--texto-2);
}

.pilula-acao-correcao,
.pilula-acao-desfeita {
  background: var(--alerta-fundo);
  color: var(--alerta);
}

.pilula-acao-cancelamento,
.pilula-acao-exclusao {
  background: var(--erro-fundo);
  color: var(--perigo);
}

/* Guia "Histórico" */
.celula-operacao > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
}

.celula-operacao a {
  text-decoration: none;
  color: var(--texto);
}

.celula-operacao a:hover {
  text-decoration: underline;
}

/* No histórico, "Excluir" fica discreto: o vermelho só aparece ao apontar. */
.tabela-historico .btn-texto-perigo {
  color: var(--texto-3);
}

.tabela-historico .btn-texto-perigo:hover {
  color: var(--perigo);
}

.operacao-desfeita .celula-operacao > div {
  color: var(--texto-3);
}

.operacao-desfaz {
  display: flex;
  gap: 7px;
  margin-top: 5px;
  font-size: 12px;
  color: var(--texto-3);
}

.operacao-motivo {
  display: flex;
  gap: 7px;
  margin-top: 5px;
  font-size: 12px;
  font-style: italic;
  color: var(--texto-2);
}

.operacao-motivo i {
  font-size: 9px;
  color: var(--icone);
}

.operacao-alteracoes {
  margin-top: 6px;
}

.operacao-alteracoes summary {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--acento);
  cursor: pointer;
}

.tabela-alteracoes {
  width: auto;
  min-width: min(100%, 420px);
  margin-top: 6px;
  font-size: 12px;
}

.tabela-alteracoes th,
.tabela-alteracoes td {
  padding: 4px 10px 4px 0;
}

.tabela-historico .celula-acao {
  white-space: nowrap;
}

/* Ficha do frete: alterações e correções */
.lista-correcoes {
  margin: 0;
  padding: 0 16px;
  list-style: none;
}

.lista-correcoes > li {
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
}

.lista-correcoes > li:last-child {
  border-bottom: 0;
}

.lista-correcoes-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  font-size: 13px;
}

.lista-correcoes-cabeca small {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--texto-3);
}

.lista-alteracoes {
  display: grid;
  gap: 3px;
  margin: 6px 0 0;
  padding: 0;
  font-size: 12.5px;
  list-style: none;
  color: var(--texto-2);
}

.lista-alteracoes span {
  display: inline-block;
  min-width: 140px;
  color: var(--texto-3);
}

.lista-alteracoes i {
  margin: 0 4px;
  font-size: 10px;
  color: var(--icone);
}

/* Página de correção: o objeto para conferir e o que vai acontecer */
.pares-correcao {
  margin: 0 0 12px;
}

.correcao-descricao {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 10px 12px;
  border-radius: var(--raio);
  background: var(--alerta-fundo);
  color: var(--alerta);
}

/* ═══ Etapa 11C: composição do conjunto ═══════════════════════════════════ */

/* Seis opções numa grade (12E): em cima, o que o caminhão puxa; embaixo, o cavalo. */
.opcoes-composicao {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 480px) {
  .opcoes-composicao {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.opcoes-composicao label span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.opcoes-composicao label i {
  font-size: 12px;
  color: var(--icone);
}

.opcoes-composicao label:has(input:checked) i {
  color: var(--acento);
}

.campo-opcoes .campo-ajuda {
  margin-top: 6px;
}

/* Ficha: o conjunto do frete, placa a placa */
.conjunto {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.conjunto i {
  font-size: 9px;
  color: var(--icone);
}

/* ═══ Etapa 11D: anexos ══════════════════════════════════════════════════ */

.anexos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  list-style: none;
}

.anexo {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.anexo:hover {
  border-color: var(--linha-2);
  box-shadow: 0 6px 16px -12px rgba(15, 23, 42, 0.4);
}

.anexo-previa {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--superficie-2);
  font-size: 26px;
  color: var(--acento);
}

.anexo-previa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.anexo-texto {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.anexo-texto a {
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texto);
}

.anexo-texto a:hover {
  text-decoration: underline;
}

.anexo-texto small {
  overflow: hidden;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texto-3);
}

.anexo-acoes {
  display: flex;
  gap: 2px;
}

.anexos-envio {
  display: grid;
  gap: 10px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--linha);
}

.anexos-soltar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1.5px dashed var(--linha-2);
  border-radius: var(--raio);
  background: var(--superficie-2);
  cursor: pointer;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}

.anexos-soltar:hover,
.anexos-soltar:focus-within {
  border-color: var(--acento);
  background: var(--acento-suave);
}

.anexos-soltar > i {
  font-size: 24px;
  color: var(--acento);
}

.anexos-soltar span {
  display: grid;
  gap: 2px;
}

.anexos-soltar small {
  font-size: 12px;
  color: var(--texto-3);
}

.anexos-soltar input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.anexos-envio-campos {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto;
  gap: 10px;
}

.anexos-escolhidos {
  margin: 0;
  font-size: 12.5px;
  color: var(--texto-2);
}

.janela-anexos {
  max-width: 760px;
}

@media (max-width: 640px) {
  .anexos-envio-campos {
    grid-template-columns: 1fr;
  }
}

/* ═══ Etapa 11E: formulários ══════════════════════════════════════════════ */

.campo-opcional {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--raio-pilula);
  background: var(--neutro-fundo);
  font-size: 10.5px;
  font-weight: 600;
  vertical-align: 1px;
  color: var(--texto-3);
}

.avisos-formulario {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--alerta-borda);
  border-radius: var(--raio);
  background: var(--alerta-fundo);
  color: var(--alerta);
  animation: surgir 0.25s ease-out both;
}

.avisos-formulario > i {
  margin-top: 3px;
}

.avisos-formulario ul {
  margin: 6px 0 10px;
  padding-left: 18px;
}

.avisos-formulario li + li {
  margin-top: 3px;
}

.avisos-confirmar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--texto);
  cursor: pointer;
}

/* ═══ Etapa 11F: configurações ═══════════════════════════════════════════ */

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

.opcao-cartao {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 12px 14px;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.opcao-cartao:hover {
  border-color: var(--linha-2);
}

.opcao-cartao input {
  position: absolute;
  opacity: 0;
}

.opcao-cartao:has(input:checked) {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

.opcao-cartao:has(input:focus-visible) {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.opcao-cartao b {
  font-size: 12.5px;
  font-weight: 600;
}






.previa-tamanho {
  font-weight: 700;
  line-height: 1;
}


.previa-tamanho-normal {
  font-size: 20px;
}

.previa-tamanho-grande {
  font-size: 24px;
}

.previa-tamanho-maior {
  font-size: 28px;
}












.opcoes-perfis {
  display: grid;
  gap: 8px;
}

.opcao-perfil {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  cursor: pointer;
}

.opcao-perfil:has(input:checked) {
  border-color: var(--acento);
  background: var(--acento-suave);
}

.opcao-perfil input {
  margin-top: 3px;
}

.opcao-perfil span {
  display: grid;
  gap: 2px;
}

.opcao-perfil small {
  color: var(--texto-3);
}

.logo-atual {
  display: flex;
  align-items: center;
  min-height: 64px;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: var(--raio);
  background: var(--cabecalho);
}

.logo-atual img {
  max-height: 56px;
  width: auto;
  object-fit: contain;
}

.logo-atual .texto-suave {
  color: var(--cabecalho-texto-2);
}

.formulario-em-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  border-top: 1px solid var(--linha);
}

.formulario-em-linha .campo {
  flex: 1 1 220px;
  margin: 0;
}

.senha-provisoria code {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--superficie-2);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.senha-provisoria .senha {
  font-size: 18px;
  color: var(--acento);
}

/* O link do convite (contas/convite_link.html): comprido, com letra menor que a senha e
   quebrando em qualquer ponto. */
.senha-provisoria .convite-link {
  font-size: 13px;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-align: left;
}

.app-marca-logo {
  width: auto;
  height: 32px;
  max-width: 120px;
  object-fit: contain;
}

/* ═══ Etapa 10F: movimento ═══════════════════════════════════════════════
   Sutil e com propósito: confirmar o que foi feito, mostrar que algo está carregando e
   dar vida aos gráficos. Tudo some com "menos movimento" (base.css). */

/* Confirmação das ações (core/confirmacao.py), como no Hidrolog: o cartão surge, o
   círculo e o visto se desenham e, depois de ~2 s, ele some sozinho. Não segura cliques. */
.confirmacao-acao {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
  animation: confirmacao-sai 0.3s ease-in 2.1s forwards;
}

.confirmacao-acao.fechada {
  animation: confirmacao-sai 0.18s ease-in forwards;
}

/* "Cancelado" ao fechar uma janela sem salvar: some mais rápido (app.js). */
.confirmacao-acao.confirmacao-curta:not(.fechada) {
  animation-delay: 1.1s;
}

.confirmacao-acao-caixa {
  min-width: 220px;
  max-width: 340px;
  padding: 22px 26px 18px;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--superficie);
  text-align: center;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.25);
  animation: confirmacao-entra 0.26s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.confirmacao-acao svg {
  display: block;
  width: 58px;
  height: 58px;
  margin: 0 auto 10px;
}

.confirmacao-circulo,
.confirmacao-marca {
  fill: none;
  stroke: var(--ok);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.confirmacao-circulo {
  stroke-width: 3;
  transform: rotate(-90deg);
  transform-box: fill-box;
  transform-origin: center;
  animation: confirmacao-traco 0.38s ease-out 0.08s forwards;
}

.confirmacao-marca {
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: confirmacao-traco 0.26s ease-out 0.4s forwards;
}

.confirmacao-cancelado .confirmacao-circulo,
.confirmacao-cancelado .confirmacao-marca {
  stroke: var(--texto-3);
}

.confirmacao-acao b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--texto);
}

.confirmacao-acao-caixa span {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--texto-2);
}

@keyframes confirmacao-entra {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
}

@keyframes confirmacao-traco {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes confirmacao-sai {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .confirmacao-circulo,
  .confirmacao-marca {
    stroke-dashoffset: 0;
  }
}

/* O registro que acabou de ser salvo pisca na lista (endereço com #container-12). */
.tabela tr[id] {
  scroll-margin-top: 110px;
}

.tabela tr:target > td,
.tabela tr.destacado > td {
  animation: destacar-linha 2.6s ease-out 0.25s backwards;
}

@keyframes destacar-linha {
  0%,
  35% {
    background-color: var(--acento-suave);
  }

  100% {
    background-color: transparent;
  }
}

/* Botão enviando: o giro mostra que o pedido saiu, e o segundo clique não vale. */
.btn {
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s,
    box-shadow 0.15s,
    transform 0.1s;
}

.btn:active {
  transform: translateY(1px) scale(0.99);
}

.btn-principal:hover {
  box-shadow: 0 6px 16px -8px rgba(30, 64, 120, 0.6);
}

.btn.enviando {
  pointer-events: none;
  opacity: 0.8;
}

.btn.enviando::after {
  content: "";
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

/* Barra fina no topo enquanto a próxima tela carrega (app.js marca .navegando). */
.barra-navegacao {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  width: 0;
  height: 3px;
  background: var(--acento);
  box-shadow: 0 0 8px rgba(30, 64, 120, 0.45);
  opacity: 0;
  pointer-events: none;
}

.navegando .barra-navegacao {
  opacity: 1;
  animation: navegar 8s cubic-bezier(0.1, 0.6, 0.3, 1) forwards;
}

@keyframes navegar {
  0% {
    width: 0;
  }

  20% {
    width: 45%;
  }

  100% {
    width: 92%;
  }
}

/* Avisos e erros entram deslizando; o resumo de erros do formulário treme de leve. */
.mensagem {
  animation: surgir 0.25s ease-out both;
}

.erros-formulario {
  animation: tremer 0.4s ease-in-out both;
}

.campo-erro {
  animation: surgir 0.2s ease-out both;
}

@keyframes surgir {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes tremer {
  20%,
  60% {
    transform: translateX(-4px);
  }

  40%,
  80% {
    transform: translateX(4px);
  }
}

/* Passo atual do frete: um pulso suave em volta do marco. */
.linha-do-tempo li.atual .marco {
  animation: pulsar 2.4s ease-out infinite;
}

.linha-do-tempo-cancelada li.atual .marco {
  animation: none;
}

@keyframes pulsar {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--info) 40%, transparent);
  }

  70%,
  100% {
    box-shadow: 0 0 0 7px transparent;
  }
}

/* Passar o mouse: linhas, abas, períodos e atalhos respondem com transição. */
.tabela tbody tr,
.segmentos a,
.posicao-linha,
.lista-selecao a {
  transition:
    background-color 0.15s,
    color 0.15s,
    border-color 0.15s;
}

.abas a,
.abas a i,
.abas a::after {
  transition:
    background-color 0.18s,
    color 0.18s,
    border-color 0.18s,
    transform 0.2s ease;
}

.indicador-link {
  transition:
    background-color 0.15s,
    box-shadow 0.15s;
}

.indicador-link:hover {
  box-shadow: inset 0 -2px 0 var(--acento);
}

/* Gráficos: as colunas crescem da base, as linhas se desenham da esquerda e as barras
   crescem para a direita, uma vez, ao abrir a tela. */
.grafico-coluna [class^="barra-"],
.barras-horizontais-trilha rect,
.cascata-trilha rect {
  transform-box: fill-box;
  animation: crescer-coluna 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.grafico-coluna [class^="barra-"] {
  transform-origin: bottom;
}

.barras-horizontais-trilha rect,
.cascata-trilha rect {
  transform-origin: left;
  animation-name: crescer-barra;
}

.grafico-coluna:nth-of-type(2) [class^="barra-"] { animation-delay: 0.04s; }
.grafico-coluna:nth-of-type(3) [class^="barra-"] { animation-delay: 0.08s; }
.grafico-coluna:nth-of-type(4) [class^="barra-"] { animation-delay: 0.12s; }
.grafico-coluna:nth-of-type(5) [class^="barra-"] { animation-delay: 0.16s; }
.grafico-coluna:nth-of-type(6) [class^="barra-"] { animation-delay: 0.2s; }
.grafico-coluna:nth-of-type(n + 7) [class^="barra-"] { animation-delay: 0.24s; }
.barras-horizontais li:nth-child(2) rect { animation-delay: 0.05s; }
.barras-horizontais li:nth-child(3) rect { animation-delay: 0.1s; }
.barras-horizontais li:nth-child(4) rect { animation-delay: 0.15s; }
.barras-horizontais li:nth-child(n + 5) rect { animation-delay: 0.2s; }

.barras-horizontais-trilha text,
.grafico-linhas [class^="ponto-"],
.grafico-finais text {
  animation: aparecer 0.3s ease-out 0.55s both;
}

.grafico-linhas .grafico-area > svg {
  animation: revelar-linha 0.9s cubic-bezier(0.3, 0.6, 0.3, 1) both;
}

@keyframes crescer-coluna {
  from {
    transform: scaleY(0);
  }
}

@keyframes crescer-barra {
  from {
    transform: scaleX(0);
  }
}

@keyframes aparecer {
  from {
    opacity: 0;
  }
}

@keyframes revelar-linha {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

/* ── Telas estreitas ────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .indicadores-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .indicadores-5 .indicador:nth-child(4) {
    border-left: 0;
  }

  .indicadores-5 .indicador:nth-child(n + 4) {
    border-top: 1px solid var(--linha);
  }
}

@media (max-width: 720px) {
  .ficha-colunas {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .linha-do-tempo small {
    display: none;
  }
}

@media (max-width: 640px) {
  /* Título do gráfico em cima, legenda e "Tabela" embaixo */
  .painel-grafico .painel-titulo {
    flex-direction: column;
    align-items: flex-start;
  }

  .indicadores,
  .indicadores-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .indicadores .indicador,
  .indicadores-5 .indicador {
    border-top: 1px solid var(--linha);
    border-left: 0;
  }

  .indicadores .indicador:nth-child(-n + 2) {
    border-top: 0;
  }

  .indicadores .indicador:nth-child(even) {
    border-left: 1px solid var(--linha);
  }

  /* Tabela vira lista rotulada: cada célula mostra o rótulo da coluna (data-label). */
  .tabela-responsiva thead {
    display: none;
  }

  .tabela-responsiva,
  .tabela-responsiva tbody,
  .tabela-responsiva tr,
  .tabela-responsiva td {
    display: block;
    width: 100%;
  }

  .tabela-responsiva tr {
    padding: 10px 14px;
    border-bottom: 1px solid var(--linha);
  }

  .tabela-responsiva tbody tr:last-child {
    border-bottom: 0;
  }

  .tabela-responsiva td,
  .tabela-responsiva td.numero {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px 14px;
    padding: 3px 0;
    border: 0;
    text-align: right;
  }

  .tabela-responsiva td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 600;
    text-align: left;
    color: var(--texto-3);
  }

  .tabela-responsiva td .rota {
    justify-content: flex-end;
  }

  /* Célula que identifica a linha (ex.: o nome do cliente): vira o título do cartão. */
  .tabela-responsiva td.celula-titulo {
    justify-content: flex-start;
    text-align: left;
  }

  .tabela-responsiva td.celula-titulo::before {
    display: none;
  }

  .campos-linha:not(.campos-cidade-uf) {
    grid-template-columns: 1fr;
  }

  .campo-filtro {
    flex: 1 1 100%;
  }

  /* No celular, cada bloco da faixa ocupa a largura toda, sempre na mesma ordem. */
  .busca,
  .campo-com-icone,
  .periodo,
  .faixa-filtro-fim {
    flex: 1 1 100%;
    max-width: none;
  }

  .faixa-filtro-fim {
    justify-content: stretch;
    margin-left: 0;
  }

  .faixa-filtro-fim > * {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* O seletor encolhe com a tela (senão a opção mais longa empurra a página). */
  .campo-com-icone .campo-filtro {
    width: 100%;
  }

  /* Período: o rótulo em cima e as quatro opções numa linha só. */
  .periodo {
    flex-wrap: wrap;
    gap: 6px;
  }

  .periodo-outro {
    flex: 1 1 100%;
  }

  .periodo-outro summary {
    width: 100%;
    justify-content: center;
  }

  .periodo-outro-painel {
    position: static;
    width: auto;
    max-width: none;
    margin-top: 6px;
    box-shadow: none;
  }

  .periodo-outro-linha,
  .periodo-outro-intervalo {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .periodo-outro-intervalo label[for="periodo-ate"] {
    grid-column: 1;
  }

  .periodo .faixa-filtro-rotulo {
    flex-basis: 100%;
  }

  .periodo .segmentos,
  .faixa-filtro-linha > .segmentos {
    flex: 1 1 100%;
  }

  .periodo .segmentos a {
    flex: 1 1 0;
    justify-content: center;
    padding-inline: 3px;
    font-size: 11.5px;
    white-space: nowrap;
  }

  /* Situações: duas por linha. */
  .faixa-filtro-linha > .segmentos a {
    flex: 1 1 40%;
    justify-content: center;
  }

  .faixa-separador {
    display: none;
  }

  .campos-grade {
    grid-template-columns: 1fr;
  }

  .blocos {
    grid-template-columns: 1fr 1fr;
  }

  .bloco:nth-child(3) {
    border-top: 1px solid var(--linha);
    border-left: 0;
  }

  .cascata-linha {
    grid-template-columns: 1fr auto;
  }

  .cascata-trilha {
    grid-column: 1 / -1;
    order: 3;
  }

  .janela-rodape .btn {
    flex: 1 1 auto;
  }

  .mini-indicadores {
    grid-template-columns: 1fr;
  }

  .mini-indicadores > div {
    border-top: 1px solid var(--linha);
    border-left: 0;
  }

  .mini-indicadores > div:first-child {
    border-top: 0;
  }
}

/* ═══ Etapa 11G: financeiro (recebimentos, faturas, recorrentes) ═════════ */

.contador {
  display: inline-block;
  min-width: 18px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--acento-suave);
  color: var(--acento);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.tabela-compacta th,
.tabela-compacta td {
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 12.5px;
}

.recebimentos-anteriores {
  margin-top: 12px;
}

.recebimentos-anteriores caption {
  padding-bottom: 6px;
  color: var(--texto-3);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}

.painel-dica {
  border-left: 3px solid var(--acento);
}

.painel-dica-titulo {
  margin: 0 0 8px;
  font-weight: 600;
}

.painel-dica-titulo i {
  color: var(--acento);
}

.lista-faturar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.lista-faturar span {
  color: var(--texto-3);
}

.lista-escolha {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.lista-escolha a {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  color: var(--texto);
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}

.lista-escolha a:hover,
.lista-escolha a:focus-visible {
  border-color: var(--acento);
  background: var(--linha-hover);
}

.lista-escolha span {
  color: var(--texto-3);
  font-size: 13px;
}

.lista-escolha i {
  color: var(--texto-3);
}

.tabela-escolha input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--acento);
}

/* Fatura: um documento A4 na tela e na impressão. */
.documento-fatura {
  max-width: 820px;
  margin-bottom: 16px;
  padding: 28px 32px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  background: var(--superficie);
  color: var(--texto);
}

.documento-cabecalho {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--texto);
}

.documento-empresa {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.documento-empresa p,
.documento-cliente p,
.documento-observacoes p {
  margin: 0 0 2px;
  color: var(--texto-2);
  font-size: 12.5px;
}

.documento-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.documento-marca {
  flex: 0 0 auto;
  width: auto;
  height: 64px;
}

.documento-empresa .documento-empresa-nome {
  color: var(--texto);
  font-size: 16px;
  font-weight: 700;
}

.documento-numero {
  text-align: right;
}

.documento-tipo {
  margin: 0;
  color: var(--texto-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.documento-codigo {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.documento-datas {
  display: grid;
  gap: 2px;
  margin: 0;
  font-size: 12.5px;
}

.documento-datas div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.documento-datas dt {
  color: var(--texto-3);
}

.documento-datas dd {
  margin: 0;
}

.documento-cliente {
  padding: 16px 0;
}

.documento-rotulo {
  margin: 0 0 4px;
  color: var(--texto-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.documento-cliente .documento-cliente-nome {
  color: var(--texto);
  font-size: 15px;
  font-weight: 600;
}

.documento-tabela {
  width: 100%;
}

.documento-tabela .documento-entrega-curta {
  display: none;
}

.documento-totais {
  display: grid;
  width: min(100%, 360px);
  margin: 0 0 0 auto;
}

.documento-totais div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--linha-tabela);
  font-size: 13px;
}

.documento-totais dt {
  color: var(--texto-2);
}

.documento-totais dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.documento-totais .documento-total {
  border-top: 2px solid var(--texto);
  font-size: 15px;
  font-weight: 700;
}

.documento-totais .documento-total dt {
  color: var(--texto);
}

.documento-observacoes {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: var(--raio);
  background: var(--superficie-2);
}

.documento-rodape {
  margin-top: 22px;
  color: var(--texto-3);
  font-size: 11px;
}

@media (max-width: 640px) {
  .documento-fatura {
    padding: 18px 16px;
  }

  .documento-entrega {
    display: none;
  }

  .documento-tabela .documento-entrega-curta {
    display: block;
  }

  .documento-tabela th,
  .documento-tabela td {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 12px;
  }

  .documento-numero {
    text-align: left;
  }

  .documento-datas div {
    justify-content: flex-start;
  }
}

@media print {
  .so-tela,
  .confirmacao-acao,
  body:has(.documento-fatura) .pagina-cabecalho {
    display: none !important;
  }

  .documento-fatura {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .documento-tabela {
    font-size: 11.5px;
  }
}

/* ═══ Etapa 11H: frota (motoristas, vencimentos, abastecimentos, containers) ═ */

.linha-inativa td {
  color: var(--texto-3);
}

.lista-medias {
  display: grid;
  gap: 2px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.lista-medias li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bloco .lista-medias b {
  display: inline;
  font-size: 15px;
}

.bloco .lista-medias .placa {
  display: inline-block;
}

.historico-container {
  display: grid;
  margin: 0;
  padding: 6px 16px 14px;
  list-style: none;
}

.historico-container li {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  padding: 8px 0 8px 18px;
  border-left: 2px solid var(--linha);
  font-size: 13px;
}

/* Cada etapa com a cor da etiqueta da situação (frota/_situacao_container.html); a mais
   recente ganha um halo. */
.historico-container li::before {
  content: "";
  position: absolute;
  top: 13px;
  left: -6px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--superficie);
  border-radius: 50%;
  background: var(--tom, var(--neutro-marca));
}

.historico-container li:first-child::before {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tom, var(--neutro-marca)) 30%, transparent);
}

.historico-ok {
  --tom: var(--ok-marca);
}

.historico-info {
  --tom: var(--info-marca);
}

.historico-alerta {
  --tom: var(--alerta-marca);
}

.historico-container-quando {
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}

.historico-container small {
  display: block;
  color: var(--texto-3);
  font-size: 11.5px;
}

.janela-historico {
  max-width: 640px;
  margin-top: 14px;
}

.menu-acoes-lista .placa {
  margin-right: 6px;
}

@media (max-width: 640px) {
  .historico-container li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* ═══ Etapa 11I: painel Atenção, busca geral, ordenação, importação ═══════ */

.atencao {
  margin-bottom: 16px;
}

.atencao-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 12px;
  list-style: none;
}

.atencao-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-left-width: 3px;
  border-radius: var(--raio);
  color: var(--texto);
  font-size: 13.5px;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}

.atencao-item:hover,
.atencao-item:focus-visible {
  background: var(--linha-hover);
}

.atencao-perigo {
  border-left-color: var(--perigo);
}

.atencao-perigo > i:first-child {
  color: var(--perigo);
}

.atencao-alerta {
  border-left-color: var(--alerta);
}

.atencao-alerta > i:first-child {
  color: var(--alerta);
}

.atencao-seta {
  color: var(--texto-3);
  font-size: 11px;
  transition: transform 0.15s ease;
}

.lista-exportar {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px;
  list-style: none;
}

.lista-exportar a {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  color: var(--texto);
  text-decoration: none;
}

.lista-exportar a:hover,
.lista-exportar a:focus-visible {
  border-color: var(--acento);
  background: var(--linha-hover);
}

.lista-exportar i {
  color: var(--acento);
  font-size: 20px;
}

.lista-exportar small {
  display: block;
  color: var(--texto-3);
  font-size: 12.5px;
}

@media print {
  body:has(.cabecalho-impressao) .abas {
    display: none !important;
  }
}

.busca-pagina .busca {
  flex: 1 1 420px;
}

.busca-grupos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
  margin-top: 4px;
}

.busca-grupos .painel-titulo-texto i {
  margin-right: 4px;
  color: var(--acento);
}

@media (max-width: 640px) {
  .busca-grupos {
    grid-template-columns: 1fr;
  }
}

.coluna-ordenar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  text-decoration: none;
}

.coluna-ordenar i {
  color: var(--linha-2);
  font-size: 10px;
}

.coluna-ordenar:hover i,
.coluna-ordenada i {
  color: var(--acento);
}

.numero .coluna-ordenar {
  justify-content: flex-end;
}

.conferencia {
  margin: 10px 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

.conferencia summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
}

.lista-contagem {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.secao-titulo {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
}

/* ═══ Etapa 12: acessibilidade (prévias do tema e aviso de não salvo) ═════ */

.previa-tema {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  width: 44px;
  height: 28px;
  padding: 4px;
  border: 1px solid var(--linha-2);
  border-radius: var(--raio);
}

.previa-tema i {
  border-radius: 2px;
}

.previa-tema-claro {
  background: #ffffff;
}

.previa-tema-claro i {
  background: #dce1e8;
}

.previa-tema-escuro {
  background: #161f2c;
}

.previa-tema-escuro i {
  background: #3a4a60;
}

.previa-tema-auto {
  background: linear-gradient(135deg, #ffffff 50%, #161f2c 50%);
}

.previa-tema-auto i {
  background: #7f8ba0;
}

.barra-salvar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  align-items: center;
  margin: 0 -20px -20px;
  padding: 12px 20px;
  border-top: 1px solid var(--linha);
  background: var(--superficie);
}

.aviso-nao-salvo {
  color: var(--alerta);
  font-size: 13px;
  font-weight: 600;
}

/* ═══ Etapa 12: assinatura do sistema (AbacatePay) ═══════════════════════ */

.aviso-assinatura {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid var(--alerta-borda);
  border-left-width: 4px;
  border-radius: var(--raio);
  background: var(--alerta-fundo);
  color: var(--texto);
  font-size: 13.5px;
}

.aviso-assinatura > i {
  color: var(--alerta);
}

.aviso-assinatura span {
  flex: 1 1 260px;
}

.aviso-assinatura-perigo {
  border-color: var(--perigo);
  background: var(--perigo-fundo);
}

.aviso-assinatura-perigo > i {
  color: var(--perigo);
}

.assinatura-cartao {
  max-width: 760px;
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid var(--linha);
  border-left-width: 4px;
  border-radius: var(--raio-lg);
  background: var(--superficie);
}

.assinatura-ativa {
  border-left-color: var(--ok);
}

.assinatura-pendente {
  border-left-color: var(--alerta);
}

.assinatura-atrasada,
.assinatura-cancelada {
  border-left-color: var(--perigo);
}

.assinatura-situacao {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.assinatura-situacao h2 {
  margin: 0 0 4px;
  font-size: 17px;
}

.assinatura-situacao p {
  margin: 0;
  color: var(--texto-2);
}

.assinatura-icone {
  font-size: 26px;
  line-height: 1;
}

.assinatura-ativa .assinatura-icone {
  color: var(--ok);
}

.assinatura-pendente .assinatura-icone {
  color: var(--alerta);
}

.assinatura-atrasada .assinatura-icone,
.assinatura-cancelada .assinatura-icone {
  color: var(--perigo);
}

.assinatura-dados {
  margin: 16px 0;
}

.assinatura-cartao .formulario-acoes form {
  display: inline;
}

/* ═══ Revisão de interface (27/10/2026): o que sumia em telas médias e pequenas ═══ */

/* Tabela mais larga que o painel (tablet, notebook pequeno): rola dentro da própria
   área, em vez de sumir pelo overflow do painel. O título e a paginação ficam parados.
   No celular, as tabelas responsivas viram cartões e a área não rola. */
.tabela-rolagem {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.tabela-rolagem:focus-visible {
  outline-offset: -2px;
}

/* Mini-indicadores num painel estreito (o do cliente, ao lado da lista, a 1024px): três
   colunas não cabem os valores ("R$ 2…"). Viram linhas, rótulo e valor, como os pares
   de cima. */
.painel-corpo:has(> .mini-indicadores) {
  container-type: inline-size;
}

@container (width < 330px) {
  .mini-indicadores {
    grid-template-columns: 1fr;
  }

  .mini-indicadores > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-left: 0;
  }

  .mini-indicadores > div + div {
    border-top: 1px solid var(--linha);
  }

  .mini-indicadores small {
    font-size: 12px;
  }

  .mini-indicadores b {
    margin-top: 0;
  }
}

/* Demonstrativo do Resumo: no celular, a coluna "Referência" vira uma linha embaixo da
   descrição, e o valor (o número que importa) cabe na tela. */
.demonstrativo .demonstrativo-ref {
  display: none;
}

@media (max-width: 560px) {
  .demonstrativo th:nth-child(2),
  .demonstrativo td:nth-child(2) {
    display: none;
  }

  .demonstrativo .demonstrativo-ref {
    display: block;
  }
}

/* Linha do tempo do frete no celular: os cinco passos não cabem lado a lado (o último,
   o recebimento, ficava cortado). Em pé, um embaixo do outro. */
@media (max-width: 480px) {
  .linha-do-tempo {
    flex-direction: column;
    gap: 12px;
  }

  .linha-do-tempo li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 10px;
    align-items: center;
    padding-right: 0;
  }

  .linha-do-tempo .marco {
    grid-row: span 2;
  }

  /* Em pé há lugar para a data de cada passo (lado a lado, ela some abaixo de 720px). */
  .linha-do-tempo small {
    display: block;
  }

  .linha-do-tempo li:not(:last-child)::before {
    top: 26px;
    right: auto;
    bottom: -10px;
    left: 10px;
    width: 2px;
    height: auto;
  }

  /* Em pé, o verde desce de um passo ao outro. */
  .linha-do-tempo li.feito:not(:last-child)::before {
    transform-origin: top;
    animation-name: linha-desce;
  }
}

/* Linha de tabela que abre o registro com um clique em qualquer ponto (app.js). */
.tabela tr[data-href] {
  cursor: pointer;
}

/* Painéis que se recolhem (visão geral): a seta no título; o estado fica neste navegador
   e vai para o <html> antes do primeiro desenho (app.js), daí as regras por painel. */
.painel-titulo:has(> .painel-recolher) {
  justify-content: flex-start;
}

.painel-titulo:has(> .painel-recolher) > :first-child {
  margin-right: auto;
}

.painel-recolher {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -4px -8px -4px 0;
  border: 0;
  border-radius: var(--raio-lg);
  background: transparent;
  color: var(--texto-3);
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s;
}

.painel-recolher:hover {
  background: var(--superficie-3);
  color: var(--texto);
}

.painel-recolher i {
  font-size: 12px;
  transition: transform 0.2s ease;
}

.painel-recolher[aria-expanded="false"] i {
  transform: rotate(-90deg);
}

:root[data-recolhidos~="atencao"] [data-recolhivel="atencao"] > :not(.painel-titulo),
:root[data-recolhidos~="grafico"] [data-recolhivel="grafico"] > :not(.painel-titulo),
:root[data-recolhidos~="grafico"] [data-recolhivel="grafico"] .painel-titulo-acoes,
:root[data-recolhidos~="posicao"] [data-recolhivel="posicao"] > :not(.painel-titulo),
:root[data-recolhidos~="em-aberto"] [data-recolhivel="em-aberto"] > :not(.painel-titulo) {
  display: none;
}

:root[data-recolhidos~="atencao"] [data-recolhivel="atencao"] > .painel-titulo,
:root[data-recolhidos~="grafico"] [data-recolhivel="grafico"] > .painel-titulo,
:root[data-recolhidos~="posicao"] [data-recolhivel="posicao"] > .painel-titulo,
:root[data-recolhidos~="em-aberto"] [data-recolhivel="em-aberto"] > .painel-titulo {
  border-bottom: 0;
}

:root[data-recolhidos~="grafico"] [data-recolhivel="grafico"],
:root[data-recolhidos~="posicao"] [data-recolhivel="posicao"] {
  align-self: start;
}

.painel.abrindo > :not(.painel-titulo) {
  animation: painel-abre 0.22s ease-out;
}

@keyframes painel-abre {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* Novidade no "Atenção" (um alerta que não estava, ou que cresceu): uma bolinha que
   pisca no item e, com o painel recolhido, ao lado do título. */
.atencao-item.novo {
  position: relative;
}

.atencao-item.novo::after,
.painel-titulo.com-novidade .painel-titulo-texto::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--perigo);
  animation: novidade 1.6s ease-in-out infinite;
}

.atencao-item.novo::after {
  position: absolute;
  top: -4px;
  right: -4px;
  border: 2px solid var(--superficie);
  box-sizing: content-box;
}

.painel-titulo.com-novidade .painel-titulo-texto::after {
  display: inline-block;
  margin-left: 8px;
  vertical-align: 1px;
}

@keyframes novidade {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--perigo) 45%, transparent);
  }

  50% {
    box-shadow: 0 0 0 5px transparent;
  }
}

/* Anexo cujo arquivo sumiu do servidor: o aviso no lugar do tamanho, sem baixar. */
.anexo-texto .anexo-faltando {
  color: var(--alerta);
  font-weight: 600;
}

.anexo[data-faltando] .anexo-previa {
  color: var(--alerta);
}

/* Miniatura do anexo: ao passar o mouse, um olho diz que ela abre o arquivo. */
.anexo-previa {
  position: relative;
}

.anexo-previa::after {
  content: "\f06e";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--cabecalho) 55%, transparent);
  font: 900 18px / 1 "Font Awesome 6 Free";
  color: #fff;
  opacity: 0;
  transition: opacity 0.15s;
}

.anexo-previa:hover::after,
.anexo-previa:focus-visible::after {
  opacity: 1;
}

.anexo-previa img {
  transition: transform 0.25s ease;
}

.anexo-previa:hover img {
  transform: scale(1.06);
}

/* Visualizador de anexos (app.js): o arquivo por cima da página, num fundo escuro, com o
   nome e as ações no alto e as setas dos lados. */
.visualizador {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: #fff;
}

.visualizador::backdrop {
  background: rgba(9, 14, 24, 0.88);
  backdrop-filter: blur(3px);
  animation: janela-fundo 0.2s ease-out;
}

.visualizador.fechando::backdrop {
  animation: janela-fundo 0.16s ease-in reverse forwards;
}

.visualizador-caixa {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  animation: visualizador-entra 0.22s ease-out;
}

.visualizador.fechando .visualizador-caixa {
  animation: janela-desce 0.16s ease-in forwards;
}

.visualizador-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(9, 14, 24, 0.55);
}

.visualizador-titulo {
  display: grid;
  min-width: 0;
  margin-right: auto;
}

.visualizador-titulo b {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visualizador-titulo small {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.72);
}

.visualizador-contagem {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.75);
}

.visualizador-topo .btn-secundario {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.visualizador-topo .btn-secundario:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.visualizador-fechar,
.visualizador-seta {
  display: grid;
  place-items: center;
  border: 0;
  color: #fff;
  cursor: pointer;
  transition:
    background-color 0.15s,
    transform 0.15s;
}

.visualizador-fechar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: transparent;
  font-size: 20px;
}

.visualizador-fechar:hover {
  background: rgba(255, 255, 255, 0.12);
}

.visualizador :focus-visible {
  outline-color: #fff;
}

.visualizador-palco {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 18px 72px 24px;
  overflow: hidden;
}

.visualizador-palco.ampliado {
  place-items: start center;
  overflow: auto;
}

.visualizador-foto {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
  object-fit: contain;
  cursor: zoom-in;
}

.visualizador-palco.ampliado .visualizador-foto {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}

.visualizador-pdf {
  width: min(100%, 1040px);
  height: 100%;
  border: 0;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
}

.visualizador-cartao {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 400px;
  padding: 28px 26px 24px;
  border-radius: 14px;
  background: var(--superficie);
  text-align: center;
  color: var(--texto);
}

.visualizador-cartao > i {
  margin-bottom: 4px;
  font-size: 40px;
  color: var(--acento);
}

.visualizador-cartao b {
  overflow-wrap: anywhere;
}

.visualizador-cartao p {
  font-size: 13.5px;
  color: var(--texto-2);
}

.visualizador-cartao-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.visualizador-seta {
  position: absolute;
  top: calc(50% + 28px);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  font-size: 16px;
  transform: translateY(-50%);
}

.visualizador-seta:hover {
  background: rgba(255, 255, 255, 0.22);
}

.visualizador-anterior {
  left: 14px;
}

.visualizador-proximo {
  right: 14px;
}

.visualizador-anterior:active {
  transform: translateY(-50%) translateX(-2px);
}

.visualizador-proximo:active {
  transform: translateY(-50%) translateX(2px);
}

.visualizador-carregando {
  position: absolute;
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}

.visualizador-palco.trocando > :not(.visualizador-carregando) {
  animation: visualizador-troca 0.22s ease-out;
}

.visualizador-palco.trocando[data-direcao="tras"] > :not(.visualizador-carregando) {
  animation-name: visualizador-troca-tras;
}

@keyframes visualizador-entra {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
}

@keyframes visualizador-troca {
  from {
    opacity: 0;
    transform: translateX(26px);
  }
}

@keyframes visualizador-troca-tras {
  from {
    opacity: 0;
    transform: translateX(-26px);
  }
}

@media (max-width: 640px) {
  .visualizador-topo {
    gap: 6px;
    padding: 10px 10px 10px 14px;
  }

  .visualizador-topo .btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .visualizador-palco {
    padding: 12px 12px 76px;
  }

  .visualizador-seta {
    top: auto;
    bottom: 16px;
    transform: none;
  }

  .visualizador-anterior:active,
  .visualizador-proximo:active {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visualizador::backdrop {
    animation: none;
  }
}

/* Campo de senha com o botão de mostrar o que foi digitado (telas de acesso, acesso.js). */
.senha-campo {
  position: relative;
  display: block;
}

.senha-campo .campo-entrada {
  padding-right: 46px;
}

.senha-mostrar {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 36px;
  border: 0;
  border-radius: var(--raio);
  background: transparent;
  color: var(--texto-3);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    background-color 0.15s,
    color 0.15s;
}

.senha-mostrar:hover {
  background: var(--superficie-2);
  color: var(--texto);
}

.senha-maiusculas {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--alerta);
  animation: aparecer 0.15s ease-out;
}

.senha-maiusculas[hidden] {
  display: none;
}

/* Ao abrir uma tela, o conteúdo entra com um leve deslizar (app.js marca o <html> só na
   abertura; atualizar no lugar, depois de salvar, não repete). */
:root.entrando #conteudo > :not(.confirmacao-acao, .aviso-assinatura) {
  animation: conteudo-entra 0.24s ease-out both;
}

:root.entrando #conteudo > :nth-child(3) {
  animation-delay: 0.03s;
}

:root.entrando #conteudo > :nth-child(4) {
  animation-delay: 0.06s;
}

:root.entrando #conteudo > :nth-child(n + 5) {
  animation-delay: 0.09s;
}

@keyframes conteudo-entra {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.atencao-item:hover .atencao-seta {
  transform: translateX(3px);
}

/* Tela de toque: campos com letra de 16px. Com menos, o iPhone aproxima a página ao
   tocar no campo e não volta sozinho. No computador, nada muda. As grades de cadastro
   (frete, despesa, frota), o "Outro período" e a busca do topo diminuem a letra com uma
   regra mais forte; por isso entram aqui com o mesmo contexto. */
@media (pointer: coarse) {
  :is(input, select, textarea).campo-entrada,
  .campos-grade :is(input, select, textarea).campo-entrada,
  .periodo-outro-linha :is(input, select, textarea).campo-entrada,
  .busca-geral input[type="search"] {
    font-size: 16px;
  }
}