: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-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;
}
.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; }
.acoes-modal { margin-top: 18px; }

.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; }
.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; }
}