:root {
  --teal-600: #2e8b7e;
  --teal-700: #23695f;
  --teal-100: #e3f3f0;
  --gray-050: #f7f8f9;
  --gray-100: #eceef0;
  --gray-300: #cfd4d9;
  --gray-600: #5b6670;
  --gray-900: #1f2933;
  --danger: #c0392b;
  --danger-bg: #fbe9e7;
  --azul: #1f6feb;
  --azul-bg: #e8f0fe;
  --verde: #1a7f37;
  --verde-bg: #e3f6e8;
  --marrom: #7b241c;
  --marrom-bg: #f3e4d7;
  --amber: #b45309;
  --radius: 12px;

  --cor-fundo: var(--gray-050);
  --cor-texto: var(--gray-900);
  --cor-painel: #fff;
  --cor-borda: var(--gray-100);
  --cor-campo-bg: var(--gray-050);
  --cor-modal: #fff;
}

:root[data-theme="dark"] {
  --gray-050: #1b2226;
  --gray-100: #2a343a;
  --gray-300: #3d4a52;
  --gray-600: #9aa7ae;
  --gray-900: #eef2f3;
  --azul-bg: #16324d;
  --verde-bg: #123a24;
  --danger-bg: #3d1f1c;
  --marrom: #e39a82;
  --verde: #5fcf82;
  --danger: #ff8a7a;
  --marrom-bg: #3a231a;

  --cor-fundo: #12171a;
  --cor-texto: #eef2f3;
  --cor-painel: #1b2226;
  --cor-borda: #2a343a;
  --cor-campo-bg: #222b30;
  --cor-modal: #2a333a;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
/* Trava de segurança contra scroll horizontal (pedido do usuário,
   2026-09-23: "tem que ser responsivo" - tela numa janela estreita mostrava
   barra de rolagem lateral e um vão cinza sobrando) - nenhum elemento tem
   largura fixa maior que a tela, mas isso garante que nada nunca force
   overflow horizontal, mesmo texto/valor comprido sem quebra. */
html, body { overflow-x: hidden; max-width: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  transition: background .2s, color .2s;
}
.escondido { display: none !important; }

h1 { font-size: 19px; font-weight: 700; margin: 0; }
h1 span { color: var(--teal-600); font-weight: 400; }
h2 { font-size: 15px; font-weight: 600; margin: 0 0 14px; color: var(--cor-texto); }

.btn-tema {
  border: none;
  background: var(--cor-borda);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

/* Login */
.tela-login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--teal-700), var(--teal-600));
  padding: 16px;
  position: relative;
}
.tela-login .btn-tema { position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,.18); color: #fff; }
.cartao-login {
  background: var(--cor-painel);
  padding: 36px 28px;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  width: 100%;
  max-width: 340px;
}
.cartao-login h1 { text-align: center; margin-bottom: 28px; }
.btn-bloco { width: 100%; margin-top: 8px; }

/* Layout geral - mobile-first: tudo empilha em 1 coluna, respira nas bordas */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--cor-painel);
  border-bottom: 1px solid var(--cor-borda);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar h1 { font-size: 17px; }
.topbar-esquerda { display: flex; flex-direction: column; gap: 2px; }
.topbar-direita { display: flex; align-items: center; gap: 10px; }
.subtitulo { font-size: 12px; color: var(--gray-600); }
.conteudo {
  max-width: 520px;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.painel {
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius);
  padding: 18px 16px;
}

.campo { display: flex; flex-direction: column; gap: 4px; }
.campo label { font-size: 12px; font-weight: 600; color: var(--gray-600); }
.campo input {
  padding: 12px 13px;
  border: 1px solid var(--gray-300);
  border-radius: 9px;
  font-size: 16px; /* >=16px evita zoom automático no iOS */
  background: var(--cor-painel);
  color: var(--cor-texto);
}
.campo input:focus { outline: 2px solid var(--teal-600); outline-offset: 1px; }

/* Busca: tipo (NF/Pedido) numa linha, Série+Documento na linha de baixo -
   Série só ocupa espaço quando existe (NF), sem reservar coluna vazia
   quando escondida (bug real corrigido, 2026-09-23: CSS antigo nunca tinha
   sido atualizado pra bater com essa estrutura). */
.linha-tipo { display: flex; gap: 20px; margin-bottom: 14px; }
.campo-radio { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.linha-doc { display: flex; gap: 12px; margin-bottom: 14px; min-width: 0; }
/* Bug real corrigido (2026-09-23, achado ao vivo: "segue zoado o modal pra
   fora" numa janela estreita) - item flex sem `min-width:0` recusa encolher
   abaixo da largura mínima do CONTEÚDO (o <input>, não o placeholder) e
   estoura o container - clássico gotcha de flexbox, só aparece em telas
   estreitas o bastante pro espaço disponível ficar menor que esse mínimo. */
.campo-serie { flex: 0 0 70px; min-width: 0; }
.campo-serie input { text-align: center; }
.campo-doc { flex: 1 1 auto; min-width: 0; }

.btn {
  border: none;
  border-radius: 10px;
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, opacity .15s;
  min-height: 46px; /* alvo de toque confortável no celular */
  /* Bug real corrigido (2026-09-23, achado ao vivo: "melhore o botão de
     entrar, deixe alinhado") - sem isso o conteúdo do botão dependia do
     default do navegador pra centralizar, inconsistente entre botões só-
     texto e botões com ícone+texto (abas de Configuração). `inline-flex`
     (não `flex`) de propósito - achado ao vivo depois (2026-09-23, "botão
     Fechar arrume tmb"): `flex` vira bloco, quebra botão que dependia de
     ficar `inline-block` (encolhe e centraliza sozinho via `text-align` do
     PAI, ex: "Fechar" no modal) - `inline-flex` centraliza o conteúdo POR
     DENTRO igual, mas mantém o comportamento de fora (encolhe salvo quando
     `width:100%` é setado à parte, tipo `.btn-bloco`/`.btn-primario`). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}
.btn-primario { background: var(--teal-600); color: #fff; width: 100%; }
.btn-primario:hover { background: var(--teal-700); }
.btn-primario:disabled { opacity: .6; }
/* Bug real corrigido (2026-09-23, achado ao vivo: "botão não tá destacado")
   - dentro do modal (`--cor-modal`) o fundo do botão secundário ficava quase
   idêntico à superfície do modal - borda própria garante contraste com
   QUALQUER fundo atrás, não só onde já tinha testado. */
.btn-secundario { background: var(--gray-100); color: var(--cor-texto); border: 1px solid var(--gray-300); width: 100%; }
.btn-secundario:hover { background: var(--gray-300); }
.btn-texto { background: none; color: var(--gray-600); padding: 8px 6px; min-height: auto; }
.btn-texto:hover { color: var(--danger); }

/* Cores por ação (pedido do usuário, 2026-09-23: "queria cores nos botões") -
   Atualizar = azul (mesma cor do status "aguardando", reforça "checar"),
   Novo = âmbar (reforça "reset/começar de novo"), sempre com bom contraste
   em claro e escuro. */
.btn-azul { background: var(--azul); color: #fff; }
.btn-azul:hover { background: #1857b8; }
.btn-amber { background: var(--amber); color: #fff; }
.btn-amber:hover { background: #92400a; }

.erro { color: var(--danger); font-size: 13px; margin-top: 10px; }
.aviso { color: #946A00; font-size: 13px; }

/* Lista de campos - mesmo padrão visual do app original (rótulo colorido em
   cima, valor num bloco cinza claro abaixo), só mais arredondado/respirado */
.lista-campos { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.campo-info { display: flex; flex-direction: column; gap: 4px; }
.rotulo { font-size: 12px; font-weight: 600; color: var(--teal-700); }
.valor-campo {
  background: var(--cor-campo-bg);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
}

/* Mensagem de status - "fica muito jogada" (pedido do usuário, 2026-09-23):
   agora vem numa caixa com fundo/borda tingidos da própria cor do status,
   maior e com mais respiro, em vez de texto solto flutuando. */
.mensagem-status {
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  white-space: pre-line;
  line-height: 1.5;
  margin: 4px 0 18px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.campo-mensagem-pix { margin-bottom: 14px; }
.campo input[readonly] { background: var(--cor-fundo, transparent); opacity: .75; cursor: default; }
.campo input[readonly]:focus { outline: none; }
.status-azul { color: var(--azul); background: var(--azul-bg); border-color: var(--azul); }
.status-verde { color: var(--verde); background: var(--verde-bg); border-color: var(--verde); }
.status-vermelho { color: var(--danger); background: var(--danger-bg); border-color: var(--danger); }
.status-marrom { color: var(--marrom); background: var(--marrom-bg); border-color: var(--marrom); }

/* Botões de ação lado a lado sempre do MESMO tamanho (flex:1 cada) - "botões
   muito diferentes, fica espaço em branco do lado" (2026-09-23): sem isso o
   botão com texto mais curto (Novo) ficava estreito e sobrava vão ao lado. */
.acoes { display: flex; flex-direction: column; gap: 10px; }
.acoes .btn { flex: 1 1 auto; }

/* Overlays (modal Pix + hold de carregamento) */
.overlay {
  position: fixed; inset: 0;
  background: rgba(8,12,15,.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
  padding: 16px;
}
.modal {
  /* Bug real corrigido (2026-09-23, achado ao vivo: "tela fica estranha, dá
     sensação de uma só" - modal e fundo da página quase na mesma cor no
     modo escuro, --cor-painel/--cor-fundo eram próximos demais, os botões
     de trás apareciam meio visíveis através do overlay) - modal usa uma
     superfície própria mais clara que o fundo (padrão "elevação" de UI
     escura) + sombra mais forte, pra destacar de verdade. */
  background: var(--cor-modal);
  border-radius: var(--radius);
  padding: 22px 20px;
  width: 100%;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.qr-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
.qr-wrap img { width: min(220px, 60vw); height: min(220px, 60vw); border-radius: 8px; border: 1px solid var(--cor-borda); background: #fff; }
.copia-cola { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.copia-cola input {
  padding: 11px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 9px;
  font-size: 12px;
  font-family: monospace;
  width: 100%;
  min-width: 0;
  background: var(--cor-painel);
  color: var(--cor-texto);
}
.txid { font-size: 11px; color: var(--gray-600); margin-top: 10px; word-break: break-all; }
/* Botões do modal lado a lado, MESMA largura e altura (2026-09-29, pedido
   do usuário: "deixar botões alinhados" - antes cada um tinha o tamanho do
   próprio texto, "Salvar nova senha" grande e "Sair" pequeno). Botão
   escondido (.escondido) não ocupa espaço, então 1 botão sozinho vira largura
   total. */
.acoes-modal { display: flex; gap: 10px; margin-top: 18px; }
.acoes-modal .btn { flex: 1 1 0; width: auto; min-width: 0; }

.hold-caixa {
  background: var(--cor-modal);
  border-radius: var(--radius);
  padding: 28px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  font-size: 14px;
  color: var(--cor-texto);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.spinner {
  width: 30px; height: 30px;
  border: 3px solid var(--gray-100);
  border-top-color: var(--teal-600);
  border-radius: 50%;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Telas maiores: alguns elementos voltam a ficar lado a lado */
@media (min-width: 480px) {
  .copia-cola { flex-direction: row; }
  /* Bug real corrigido (2026-09-23, achado ao vivo: "seguem iguais" - botão
     Entrar/Pesquisar encolhia em telas maiores) - essa regra é só pros
     botões que ficam lado a lado (Copiar/Fechar no modal), `.btn-bloco`
     marca os que têm que ficar 100% SEMPRE, em qualquer tamanho de tela -
     sem o `:not()` aqui, `width:auto` ganhava de `.btn-bloco` por ordem no
     arquivo (mesma especificidade, essa regra vem depois). */
  .btn-primario:not(.btn-bloco), .btn-secundario:not(.btn-bloco) { width: auto; }
  .acoes { flex-direction: row; align-items: center; }
}

/* Menu principal (pedido do usuário, 2026-09-23: "ter um menu dps do login") */
.conteudo-largo { max-width: 1280px; }
.menu-cartoes { display: flex; flex-direction: column; gap: 12px; }
.cartao-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  padding: 18px 20px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius);
  background: var(--cor-campo-bg);
  cursor: pointer;
  color: var(--cor-texto);
}
.cartao-menu:hover { border-color: var(--teal-600); }
.cartao-menu-icone { font-size: 24px; }
.cartao-menu-titulo { font-size: 16px; font-weight: 700; }
.cartao-menu-desc { font-size: 13px; color: var(--gray-600); }

/* Botão "◀ Menu" nas telas internas */
.btn-voltar {
  border: none;
  background: none;
  color: var(--gray-600);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 0 2px;
  align-self: flex-start;
}
.btn-voltar:hover { color: var(--teal-600); }

/* Select (Filial/Provedor) - mesmo visual dos inputs */
.campo select {
  padding: 12px 13px;
  border: 1px solid var(--gray-300);
  border-radius: 9px;
  font-size: 15px;
  background: var(--cor-painel);
  color: var(--cor-texto);
}

/* Abas de Configuração */
.abas-config { display: flex; flex-wrap: wrap; gap: 8px; }
.aba-config {
  border: 1px solid var(--cor-borda);
  background: var(--cor-painel);
  color: var(--cor-texto);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.aba-config-ativa { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }
.aba-config span { margin-right: 4px; }

/* Tabelas (Histórico + grade da API) */
.tabela-wrap { overflow-x: auto; margin-top: 12px; }
.tabela-wrap-scroll { max-height: 60vh; overflow-y: auto; }
.tabela-historico { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.tabela-historico th, .tabela-historico td { padding: 9px 10px; border-bottom: 1px solid var(--cor-borda); border-right: 1px solid var(--cor-borda); text-align: left; }
.tabela-historico th:last-child, .tabela-historico td:last-child { border-right: none; }
.tabela-historico th { color: var(--gray-600); font-weight: 600; position: sticky; top: 0; background: var(--cor-painel); }

/* Ordenar clicando no cabeçalho (pedido do usuário, 2026-09-23) */
.th-ordenavel { cursor: pointer; user-select: none; padding-right: 20px !important; position: relative; }
.th-ordenavel:hover { color: var(--teal-600); }
.th-ordenavel::after { content: '↕'; position: absolute; right: 6px; opacity: .35; font-size: 11px; }
.th-ordenavel.th-asc::after { content: '↑'; opacity: 1; color: var(--teal-600); }
.th-ordenavel.th-desc::after { content: '↓'; opacity: 1; color: var(--teal-600); }
.tabela-historico .col-valor { text-align: right; font-variant-numeric: tabular-nums; }
/* Painel inicial (2026-09-29) - indicadores: número em tinta de texto,
   cor só no rótulo de situação (com ícone), nunca no número. */
.painel-inicio { margin-bottom: 16px; }
.saudacao-bloco { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.saudacao { margin: 0; font-size: 22px; }
.saudacao-data { font-size: 13px; color: var(--gray-600); }
.painel-inicio .painel-desc { margin: 4px 0 16px; }
/* 2x2 no celular / painel estreito, 4 lado a lado só quando cabe de verdade
   (auto-fit pela largura do PAINEL, não da tela - o menu é estreito). */
.grade-indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.indicador {
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
  padding: 14px; border: 1px solid var(--cor-borda); border-radius: 12px; min-width: 0; min-height: 108px;
}
.indicador-topo { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.indicador-icone { font-size: 13px; opacity: .8; }
/* Número nunca quebra no meio ("R$ 0,0 / 0") - encolhe um pouco se precisar. */
.indicador-valor { font-size: clamp(20px, 5vw, 26px); font-weight: 700; line-height: 1.1; color: var(--cor-texto); font-variant-numeric: tabular-nums; white-space: nowrap; }
.indicador-sub { font-size: 12px; color: var(--gray-600); font-variant-numeric: tabular-nums; white-space: nowrap; }
.recentes { margin-top: 20px; }
.subtitulo-painel { margin: 0 0 8px; font-size: 14px; }
.lista-recentes { list-style: none; margin: 0; padding: 0; }
.lista-recentes li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--cor-borda); }
.lista-recentes li:first-child { border-top: none; }
.recente-principal { display: flex; flex-direction: column; min-width: 0; }
.recente-doc { font-weight: 600; font-size: 14px; }
.recente-meta { font-size: 12px; color: var(--gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recente-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.recente-valor { font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.recente-lado .situacao { font-size: 12px; }
.lista-recentes .recente-vazio { justify-content: center; color: var(--gray-600); font-size: 13px; padding: 16px 0; border: 1px dashed var(--cor-borda); border-radius: 10px; }

.aviso-meus-pix { margin: -6px 0 14px; padding: 8px 12px; font-size: 13px; color: var(--azul); background: var(--azul-bg); border-radius: 8px; }

/* Combobox do login (lista de motoristas) */
/* Lista GRUDADA no campo (mesma borda, cantos de baixo do campo retos
   quando aberta) - não uma caixa solta flutuando por cima da senha. */
.campo-combo { position: relative; }
/* Botão com cara de campo (mesmo padding/borda/fonte de .campo input). */
.combo-botao {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 8px 40px 8px 13px; text-align: left; cursor: pointer;
  border: 1px solid var(--gray-300); border-radius: 9px; font: inherit; font-size: 16px;
  background: var(--cor-painel); color: var(--cor-texto);
}
.combo-botao:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 1px; }
.combo-botao-conteudo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.combo-placeholder { color: var(--gray-600); }
.combo-selecionado-nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-avatar.combo-avatar-mini { width: 26px; height: 26px; font-size: 11px; }
.combo-avatar.combo-avatar-admin { background: var(--teal-600); color: #fff; }
.combo-avatar.combo-avatar-gestor { background: var(--gray-100); color: var(--gray-600); font-size: 16px; }
.combo-lista li.combo-escolhido .combo-nome::after { content: ' ✓'; color: var(--teal-600); }
.campo-combo::after {
  content: ''; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
  border-right: 2px solid var(--gray-600); border-bottom: 2px solid var(--gray-600);
  transform: rotate(45deg); transition: transform .15s, margin-top .15s; pointer-events: none;
}
.campo-combo.aberto::after { transform: rotate(-135deg); margin-top: -2px; }
.campo-combo.aberto .combo-botao {
  border-color: var(--teal-600); border-bottom-left-radius: 0; border-bottom-right-radius: 0; outline: none;
}
.combo-lista {
  position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin: -1px 0 0; padding: 6px;
  list-style: none; max-height: 232px; overflow-y: auto; box-sizing: border-box;
  background: var(--cor-painel); border: 1px solid var(--teal-600); border-top-color: var(--cor-borda);
  border-radius: 0 0 10px 10px; box-shadow: 0 12px 24px rgba(0, 0, 0, .14);
}
/* Painel = busca fixa no topo + lista rolando embaixo (a busca não rola junto). */
.combo-lista.combo-painel { max-height: none; overflow: visible; padding: 8px; }
.campo input.combo-busca {
  width: 100%; box-sizing: border-box; margin: 0 0 6px; padding: 9px 11px 9px 34px; font: inherit; font-size: 15px;
  border: 1px solid var(--gray-300); border-radius: 8px; background: var(--cor-fundo); color: var(--cor-texto);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa7ae' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 11px center;
}
.campo input.combo-busca:focus { outline: none; border-color: var(--teal-600); }
.combo-itens { list-style: none; margin: 0; padding: 0; max-height: 232px; overflow-y: auto; }
.combo-vazio { padding: 14px 8px; text-align: center; font-size: 13px; color: var(--gray-600); }
.combo-cabecalho { padding: 4px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-600); cursor: default; }
.combo-lista li.combo-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.combo-lista li.combo-item:hover, .combo-lista li.combo-item.combo-ativo { background: rgba(46, 139, 126, .12); }
.combo-avatar {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--teal-600); background: rgba(46, 139, 126, .15);
}
.combo-textos { display: flex; flex-direction: column; min-width: 0; }
.combo-nome { font-size: 14px; font-weight: 600; color: var(--cor-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-login { font-size: 12px; color: var(--gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Login por motorista + auditoria (2026-09-29) */
.btn-mini { width: auto; min-height: auto; padding: 6px 12px; font-size: 13px; white-space: nowrap; }
.filtro-motoristas { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 6px; }
@media (min-width: 600px) { .filtro-motoristas { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.painel-desc.contador-filtro { display: block; margin: 12px 0 10px; font-size: 12px; }
.form-motorista { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cor-borda); }
.form-motorista h2 { margin-top: 0; }
.acoes-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.acoes-form .btn { width: auto; }
.texto-fraco { font-size: 12px; color: var(--gray-600); }
/* Auditoria - linhas legíveis (2026-09-29) */
#audTabela td { vertical-align: top; }
.aud-quando { white-space: nowrap; }
.aud-data, .aud-quem { display: block; font-weight: 600; }
.aud-hora, .aud-sub { display: block; font-size: 12px; color: var(--gray-600); }
.aud-acao {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid transparent;
  background: var(--gray-100); color: var(--cor-texto);
}
.aud-acao-bom { background: var(--verde-bg); color: var(--verde); border-color: var(--verde); }
.aud-acao-ruim { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.aud-acao-info { background: var(--azul-bg); color: var(--azul); border-color: var(--azul); }
:root[data-theme="dark"] .aud-acao-info { color: #8ab8ff; border-color: #8ab8ff; }
.aud-acao-alerta { background: var(--marrom-bg); color: var(--marrom); border-color: var(--marrom); }
.aud-doc { white-space: nowrap; }
.aud-detalhe { min-width: 220px; max-width: 420px; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.aud-detalhe > span:first-child { display: block; }
.aud-txid { display: block; margin-top: 3px; font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.aud-ip { white-space: nowrap; font-size: 12px; color: var(--gray-600); }
.aud-vazio { color: var(--gray-300); }
#audContador { display: block; margin: 12px 0 6px; }
/* Filtros da Auditoria: empilha no celular, 2 colunas no meio, 1 linha só
   em tela larga (botão Buscar na ponta, mesma altura dos campos). */
.filtros-auditoria { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: end; }
.filtros-auditoria .campo input, .filtros-auditoria .campo select { width: 100%; min-width: 0; box-sizing: border-box; }
.btn-filtro { width: 100%; min-height: 46px; }
@media (min-width: 600px) { .filtros-auditoria { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .filtros-auditoria { grid-template-columns: 160px 160px minmax(0, 1fr) minmax(0, 1fr) 130px auto; }
  .btn-filtro { width: auto; padding-left: 28px; padding-right: 28px; }
}

/* Conferir pagamentos - situação por linha + barra de progresso */
.situacao { font-weight: 600; white-space: nowrap; }
.situacao-azul { color: var(--azul); }
.situacao-verde { color: var(--verde); }
.situacao-vermelho { color: var(--danger); }
.situacao-marrom { color: var(--marrom); }
.barra-progresso { height: 6px; border-radius: 3px; background: var(--gray-300); overflow: hidden; margin: 10px 0 12px; }
.barra-progresso-preenchida { height: 100%; width: 0; background: var(--teal-600); transition: width .2s; }
.tabela-vazia { text-align: center; color: var(--gray-600); padding: 20px; }
.historico-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.historico-cabecalho h2 { margin: 0; }
.historico-cabecalho .painel-desc { margin: 2px 0 0; }
.historico-cabecalho .btn { width: auto; padding: 8px 14px; min-height: auto; flex-shrink: 0; }

/* Descrição curta abaixo do título de cada painel de Configuração (pedido
   do usuário, 2026-09-23: "deixar algo profissional") */
.painel-desc { font-size: 13px; color: var(--gray-600); margin: -8px 0 16px; }

/* Grade responsiva pros campos de credencial (2 colunas a partir de 600px,
   1 coluna empilhada no celular) - troca o pareamento manual por linha. */
.grade-campos { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 20px; }
@media (min-width: 600px) {
  .grade-campos { grid-template-columns: 1fr 1fr; }
}
.campo-grid-estreito input { max-width: 100px; }

/* Bug real corrigido (2026-09-23, achado ao vivo: "botões colados" nas telas
   de Configuração) - `.campo` sozinho não tem margem nenhuma (o resto do
   app sempre embrulhava em `.linha-tipo`/`.linha-doc`, que JÁ tinham
   margin-bottom - Configuração é a 1ª tela com `.campo` solto empilhado
   direto). Só nos filhos de 1º nível de `.painel-aba`, não mexe no resto do
   app nem nos campos que já estão dentro de `.grade-campos` (esses já têm
   seu próprio `gap`). */
.painel-aba > .campo,
.painel-aba > .campo-radio,
.painel-aba > .tabela-wrap {
  margin-bottom: 20px;
}
.painel-aba > button.btn { margin-bottom: 12px; }

.opcional { font-weight: 400; color: var(--gray-600); font-size: 11px; }

/* Olhinho de mostrar/esconder senha */
.campo-senha { display: flex; gap: 8px; }
.campo-senha input { flex: 1 1 auto; min-width: 0; }
.btn-olho {
  flex-shrink: 0;
  width: 46px;
  border: 1px solid var(--gray-300);
  background: var(--cor-campo-bg);
  border-radius: 9px;
  font-size: 18px;
  cursor: pointer;
}

/* Telas bem estreitas (<=380px) - linhas com 2 campos empilham em vez de
   espremer (pedido do usuário, 2026-09-23: "deixar full responsivo") */
@media (max-width: 380px) {
  .linha-doc { flex-direction: column; gap: 14px; }
  .campo-serie { flex: 1 1 auto; }
  .campo-serie input { text-align: left; }
}

/* ---- 2026-09-29: WhatsApp, equipe no painel, fechamento, trocar senha ---- */
.btn-whatsapp { background: #25d366; color: #0b3d20; font-weight: 700; }
.btn-whatsapp:hover { background: #1ebe5a; }

/* Equipe no painel (gestor/admin) - cartões empilhados no painel estreito do
   menu, lado a lado só quando cabem os 2 com folga. */
.painel-equipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 14px; margin-top: 14px; }
.cartao-equipe { border: 1px solid var(--cor-borda); border-radius: 12px; padding: 14px; min-width: 0; }
.cartao-equipe-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cartao-equipe-topo + .lista-ranking { margin-top: 10px; }
.cartao-equipe-topo h3 { margin: 0; font-size: 15px; }
.cartao-equipe-desc { display: block; font-size: 12px; color: var(--gray-600); margin-top: 2px; }
.cartao-equipe-acoes { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cartao-equipe-acoes select { padding: 5px 8px; font-size: 13px; border: 1px solid var(--gray-300); border-radius: 8px; background: var(--cor-painel); color: var(--cor-texto); }
.contador-pill { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--marrom-bg); color: var(--marrom); white-space: nowrap; }
.lista-equipe { list-style: none; margin: 0; padding: 0; }
.lista-equipe li.item-parado { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--cor-borda); }
.lista-equipe li.item-parado:first-child { border-top: none; padding-top: 2px; }
.parado-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.parado-doc { font-weight: 600; font-size: 14px; }
.parado-cliente { font-size: 12px; color: var(--gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parado-dono { display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--gray-100); color: var(--cor-texto); align-self: flex-start; }
.parado-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.parado-valor { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.tempo-pill { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #fff4e0; color: #8a5a00; white-space: nowrap; font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .tempo-pill { background: #3a2e14; color: #f0c36a; }
.vazio-equipe { padding: 16px 8px; text-align: center; font-size: 13px; color: var(--gray-600); border: 1px dashed var(--cor-borda); border-radius: 10px; list-style: none; }
.btn-link { display: block; width: 100%; margin-top: 8px; padding: 8px; border: none; background: none; color: var(--teal-600); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 8px; }
.btn-link:hover { background: rgba(46, 139, 126, .08); }
.lista-ranking { list-style: none; margin: 0; padding: 0; }
.lista-ranking li.item-ranking { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--cor-borda); }
.lista-ranking li.item-ranking:first-child { border-top: none; padding-top: 2px; }
.ranking-pos { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--gray-100); color: var(--gray-600); }
.item-ranking:first-child .ranking-pos { background: var(--teal-600); color: #fff; }
.ranking-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ranking-linha { display: flex; justify-content: space-between; gap: 8px; }
.ranking-nome { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranking-valor { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ranking-barra { height: 6px; border-radius: 3px; background: var(--gray-100); overflow: hidden; }
.ranking-barra span { display: block; height: 100%; border-radius: 3px; background: var(--teal-600); }
.ranking-meta { font-size: 12px; color: var(--gray-600); }
.recente-lado .btn-mini { margin-top: 2px; }

.filtros-fechamento { margin-top: 4px; }
@media (min-width: 1000px) { .filtros-fechamento { grid-template-columns: minmax(0, 2fr) 170px 170px auto; } }
.tabela-fechamento td { vertical-align: top; }
.fech-valor { display: block; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fech-qtd { display: block; font-size: 12px; color: var(--gray-600); }
.tabela-fechamento tfoot td { border-top: 2px solid var(--cor-borda); background: var(--gray-050); }
.linha-clicavel { cursor: pointer; }
.linha-clicavel:hover td { background: rgba(46, 139, 126, .07); }
.linha-selecionada td { background: rgba(46, 139, 126, .12); }
.fech-detalhe { margin-top: 18px; }

.modal-senha { max-width: 420px; text-align: left; }
.modal-senha h2, .modal-senha .painel-desc { text-align: center; }
.modal-senha .painel-desc { margin: 0 0 16px; }
.modal-senha .campo { margin-bottom: 12px; }
.dica-campo { font-size: 12px; color: var(--gray-600); }

@media print {
  .topbar, .nao-imprimir, .js-voltar-menu, .btn-tema { display: none !important; }
  body { background: #fff; }
  .painel { border: none; box-shadow: none; }
  .tabela-wrap, .tabela-wrap-scroll { max-height: none !important; overflow: visible !important; }
}

/* Painel: botão ↻ ao lado da data + botão "QR" dos últimos Pix (2026-09-29) */
.saudacao-direita { display: flex; align-items: center; gap: 8px; }
.btn-icone {
  width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid var(--cor-borda); border-radius: 50%; background: var(--cor-painel); color: var(--gray-600);
}
.btn-icone:hover { color: var(--teal-600); border-color: var(--teal-600); }
.btn-icone:disabled { cursor: default; }
.btn-icone.girando svg { animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-icone.girando svg { animation-duration: 2s; } }
.recente-acoes { display: flex; align-items: center; gap: 8px; }
.btn-qr {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; cursor: pointer;
  border: 1px solid var(--teal-600); border-radius: 999px; background: transparent; color: var(--teal-600);
  font: inherit; font-size: 12px; font-weight: 700; line-height: 1.2;
}
.btn-qr:hover { background: var(--teal-600); color: #fff; }
.btn-qr:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; }

/* Seções recolhíveis do painel (Últimos Pix / Pix parados) */
.colapsavel-topo {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 0; cursor: pointer;
  border: none; background: none; color: var(--cor-texto); font: inherit; text-align: left;
}
.colapsavel-titulo { display: block; font-size: 14px; font-weight: 700; }
.colapsavel-topo:hover .colapsavel-titulo { color: var(--teal-600); }
.colapsavel-topo:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; border-radius: 6px; }

.seta-colapso { flex-shrink: 0; color: var(--gray-600); transition: transform .15s; }
.colapsavel-topo[aria-expanded="true"] .seta-colapso { transform: rotate(180deg); }
.colapsavel-topo-cartao { width: auto; flex: 1; min-width: 0; padding: 0; align-items: flex-start; }
.colapsavel-topo-cartao .seta-colapso { margin-top: 1px; }
.colapsavel-corpo { margin-top: 12px; }
.contador-neutro { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--gray-100); color: var(--gray-600); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .seta-colapso { transition: none; } }

/* Topo compacto do menu (2026-09-29) - saudação numa linha + 1 linha de
   resumo recolhível; o painel completo abre na seta. */
.painel-inicio .saudacao { font-size: 19px; }
.painel-inicio .saudacao-bloco { align-items: center; }
.resumo-topo {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 12px; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--cor-borda); border-radius: 10px; background: var(--gray-050); color: var(--cor-texto);
  font: inherit; text-align: left; flex-wrap: wrap;
}
.resumo-topo:hover { border-color: var(--teal-600); }
.resumo-topo:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; }
.resumo-topo[aria-expanded="true"] .seta-colapso { transform: rotate(180deg); }
.resumo-rotulo { font-size: 13px; font-weight: 700; }
.resumo-chips { margin-left: auto; font-size: 13px; color: var(--gray-600); font-variant-numeric: tabular-nums; }
.resumo-chips b { color: var(--cor-texto); }
#painelDetalhe .painel-desc { margin: 0 0 12px; }

/* Topo no celular (2026-09-29, usuário: "fica ruim quando fica mobile") -
   saudação+data empilhadas à esquerda, ↻ no canto; números do resumo embaixo
   do título (não jogados à direita) e escondidos com o painel aberto (os
   cartões já mostram); subtítulo "Resumo da equipe" fora (só ocupava lugar). */
.painel-inicio .saudacao-bloco { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: nowrap; }
.saudacao-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#saudacaoSub { display: none; }
.resumo-topo { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 2px; align-items: center; }
.resumo-topo .resumo-chips { grid-column: 2; margin-left: 0; }
.resumo-topo[aria-expanded="true"] .resumo-chips { display: none; }
@media (min-width: 560px) {
  .resumo-topo { grid-template-columns: auto auto 1fr; }
  .resumo-topo .resumo-chips { grid-column: 3; justify-self: end; }
}
@media (max-width: 480px) {
  .painel-inicio { padding: 16px 14px; }
  .indicador { min-height: 0; padding: 10px 12px; gap: 4px; }
  .indicador-valor { font-size: 21px; }
  .grade-indicadores { gap: 8px; }
}

/* Gestão no celular (2026-10-02, usuário: "quando abro no celular ficam
   alguns campos desalinhados") - abas numa linha só, cabeçalho de Operadores
   empilhado, e Motoristas/Operadores em cartões (o Editar ficava fora da tela,
   só rolando a tabela de lado). A Auditoria segue tabela com rolagem lateral. */
@media (max-width: 599px) {
  #viewGestao .abas-config { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #viewGestao .aba-config { padding: 9px 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #viewGestao .aba-config span { margin-right: 2px; }

  #cfgOperadores .historico-cabecalho { flex-direction: column; align-items: stretch; margin-bottom: 14px; }
  #cfgOperadores .historico-cabecalho .btn { width: 100%; padding: 10px 14px; }

  .tabela-cartoes { white-space: normal; }
  .tabela-cartoes thead { display: none; }
  .tabela-cartoes, .tabela-cartoes tbody, .tabela-cartoes tr, .tabela-cartoes td { display: block; width: 100%; box-sizing: border-box; }
  .tabela-cartoes tr { border: 1px solid var(--cor-borda); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
  .tabela-cartoes td,
  .tabela-cartoes td:last-child { border: none; padding: 4px 0; text-align: right; overflow-wrap: anywhere; }
  .tabela-cartoes td[data-label]::before { content: attr(data-label); float: left; margin-right: 12px; color: var(--gray-600); font-weight: 600; }
  .tabela-cartoes td.tabela-vazia { text-align: center; }
  .tabela-cartoes td:not([data-label]) .btn { width: 100%; margin-top: 4px; }
}
@media (max-width: 360px) {
  #viewGestao .aba-config span { display: none; }
}