/* ============================================================
   TEMA — v2/app/atpv (mesmo padrão visual do controle_new)
   Isolado da lógica original: só reestiliza classes/ids já
   existentes em format.css/popup.css e nos <style> inline das
   páginas — nenhuma marcação foi alterada para caber aqui.
   Carregado DEPOIS dos CSS antigos, então vence por ordem de
   cascata sem precisar de !important na maior parte das regras
   (os poucos !important existem porque a página às vezes usa
   inline style="..." pro mesmo elemento).

   Escopo desta primeira passada: camada de cor/tema (claro/escuro)
   e refino visual em cima da marcação JÁ EXISTENTE — sem introduzir
   classes novas que exigiriam mexer no PHP (isso o controle_new fez
   em várias rodadas testadas ao vivo; aqui não dá pra testar ao
   vivo ainda, então o escopo fica mais conservador de propósito).
   ============================================================ */

:root {
  --bg: #f5f4f2;
  --panel: #ffffff;
  --panel-2: #f0eeea;
  --ink: #1e1c19;
  --ink-soft: #55504a;
  --ink-faint: #8b857c;
  --line: #e2ded7;
  --line-soft: #ebe8e2;

  --accent: #CAAC7E;
  --accent-hover: #a88d64;
  --accent-ink: #3d2f1a;
  --accent-tint: #f5eee0;

  --ok: #1f7a4d;
  --ok-tint: #dff2e7;
  --warn: #a6740f;
  --warn-tint: #f6ecd2;
  --danger: #c8372a;
  --danger-tint: #fbe6e3;
  --info: #2b6ea6;
  --info-tint: #dfeaf3;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(30, 28, 25, 0.06), 0 6px 18px -8px rgba(30, 28, 25, 0.14);
  --shadow-lg: 0 12px 32px -12px rgba(30, 28, 25, 0.28);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fundo escuro fixo (mesma barra usada em cabeçalhos de destaque:
     contato, tela de login) - não muda com o tema, que agora é só o
     claro mesmo. */
  --barra-escura: #1e1c19;
  --barra-escura-texto: #f5f4f2;
}

/* Tema escuro removido a pedido do usuário - a caixa de mensagem
   messagebox() (core.js) usa cores fixas (não as variáveis daqui) e
   ficava com texto ilegível em cima do fundo escuro (visto nas
   mensagens de validação do provedor/41). Em vez de corrigir cor por
   cor, o sistema passou a ter só o tema claro - o toggle e a
   persistência em localStorage foram removidos de js/ui.js. */

/* ---------------- Base ---------------- */

html {
  font-family: var(--font) !important;
  font-size: 95% !important;
  -webkit-font-smoothing: antialiased;
}

html,
body {
  background-color: var(--bg) !important;
  color: var(--ink) !important;
}

/* app/atpv/index.php tem <div id="print"> envolvendo o conteúdo
   principal — mesmo tratamento do controle_new: fundo "de cartão"
   (var(--panel)) em vez do tom de página (var(--bg)), e o body/html
   acompanham pra não sobrar uma faixa de tom diferente ao redor.
   ".tem-print" é marcada pelo tema.js quando #print existe na
   página — não ":has()", que nem todo navegador suporta ainda. */
#print {
  background-color: var(--panel) !important;
}
html.tem-print,
html.tem-print body {
  background-color: var(--panel) !important;
}

* {
  scrollbar-color: var(--ink-faint) var(--panel-2);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--panel-2);
}
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ink-faint);
}

/* Ícones Lucide (ISC/MIT — gratuito), caso venham a ser adicionados
   nas próximas rodadas — mesmo padrão do controle_new, sem efeito
   nenhum enquanto nenhum <i data-lucide> existir na página. */
[data-lucide],
svg.lucide {
  width: 1em;
  height: 1em;
  stroke-width: 2px;
  vertical-align: -0.15em;
  flex-shrink: 0;
}

a {
  color: var(--accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------- Grid (.row / .col-N) ---------------- */
/* format.css já usa float + clearfix (não flexbox) pra essa grade, com
   breakpoint próprio (@media max-width:500px empilha as colunas) - não
   reimplemento em flex aqui: cheguei a testar "display:flex" no .row e
   quebrou o alinhamento de ".input-button" (texto cortado nos botões de
   opcoes.php, que dependem de "width:100%" dentro de um .col-N com
   "overflow:hidden" no pai - com flex, a coluna encolhe e corta o texto).
   Só refino o espaçamento entre linhas de grade, sem tocar no modelo de
   layout. */

.row:not(:last-child) {
  margin-bottom: 14px;
}

/* ---------------- Tipografia utilitária existente ---------------- */

.label-input {
  color: var(--ink-faint) !important;
  font-size: 0.78rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
  display: block;
}

.texto-negrito,
.negrito,
b {
  color: var(--ink);
}

.linha-vermelha,
.linha-vermelha-2,
.linha-vermelha-5 {
  border-bottom-color: var(--accent) !important;
}

.linha-preta,
.linha-cinza,
.linha-pontilhada {
  border-bottom-color: var(--line) !important;
}

/* .maiusculo + .font-14 é o combo usado como título de seção (ex.: o
   "ATPV" acima da tabela, em list.php) — sem isso ficava um texto
   maiúsculo cru, sem nenhuma hierarquia visual. */
.maiusculo.font-14 {
  color: var(--ink-faint);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Caixa genérica com borda simples — o cinza fixo #ccc do format.css
   não muda com o tema. */
.bordas {
  border-color: var(--line) !important;
  background-color: var(--panel);
  border-radius: var(--radius-sm);
}

/* Badges/fundos de cor (mantidos com o mesmo significado semântico
   já usado — só a paleta foi atualizada). */
.fundo-cinza-claro,
.fundo-cinza,
.fundo-cinza-1 {
  background-color: var(--panel-2) !important;
  color: var(--ink) !important;
}
.fundo-preto-3 {
  background-color: var(--barra-escura) !important;
  color: var(--barra-escura-texto) !important;
}
.fundo-azul,
.fundo-azul-1,
.fundo-azul-windows,
.fundo-firefox {
  background-color: var(--info) !important;
  color: #fff !important;
}
.fundo-vermelho {
  background-color: var(--danger) !important;
  color: #fff !important;
}
.fundo-laranja,
.fundo-maron,
.fundo-maron-1 {
  background-color: var(--warn-tint) !important;
  color: var(--warn) !important;
}
.fundo-verde,
.fundo-verde-1 {
  background-color: var(--ok) !important;
  color: #fff !important;
}

.mensagem {
  color: var(--danger) !important;
}
.texto-vermelho {
  color: var(--danger) !important;
}

/* ---------------- Caixas de aviso do formulário de solicitação ---------------- */
/* app/atpv/provedor/41/index.php tinha duas caixas "AVISO" com cor
   inteiramente inline (fundo amarelo/vermelho puro) - substituídas
   por essas duas classes, usando os mesmos tokens semânticos já
   usados em todo o resto do sistema (warn = atenção informativa,
   danger = aviso final antes de enviar). */
.aviso-box {
  padding: 16px 20px;
  border-radius: var(--radius);
  text-align: center;
  background-color: var(--warn-tint);
  color: var(--warn);
  border: 1px solid var(--warn);
}
.aviso-box-titulo {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.aviso-box-final {
  background-color: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

/* ---------------- Barra de título de seção / botão de ícone ---------------- */
/* Portado de controle_new/css/tema.css - mesmo padrão usado nos uploads
   de documento das telas de edição (ex.: edit/veiculo.php) e agora
   também em app/atpv/provedor/41/documento-frm.php e afins. */
.secao-titulo {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  margin: 14px 0;
  background-color: var(--barra-escura);
  color: var(--barra-escura-texto);
  border-bottom: solid 3px var(--accent);
  border-radius: var(--radius, 10px) var(--radius, 10px) 0 0;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Sub-agrupamento dentro do corpo de um .card-confirmacao (ex.:
   "Vendedor"/"Comprador"/"Veículo" dentro do card "Documentos") -
   mais leve que .secao-titulo (sem barra escura própria), porque já
   está dentro de um card que tem seu próprio cabeçalho. */
.card-confirmacao-subtitulo {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin: 16px 0 8px;
  padding-bottom: 6px;
  border-bottom: solid 1px var(--line-soft);
}
.card-confirmacao-subtitulo:first-child {
  margin-top: 0;
}

.btn-icone-acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--panel-2);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.btn-icone-acao:hover {
  background-color: var(--accent);
  color: var(--accent-ink);
  transform: scale(1.08);
}
.btn-icone-acao svg {
  width: 15px;
  height: 15px;
}

/* Botão de upload ("Anexar arquivo", ícone "upload") nos cards de
   Documentos/Veículo - mesma classe .btn-icone-acao do botão de
   visualizar (ícone "search"), então precisa de uma classe extra
   (.btn-icone-acao-upload, só nos botões de upload) pra diferenciar a
   cor sem afetar o de visualizar. */
.btn-icone-acao-upload {
  background-color: var(--warn) !important;
  color: #fff !important;
}
.btn-icone-acao-upload:hover {
  filter: brightness(1.1);
  transform: scale(1.08);
}

/* ---------------- Card "Arquivo de Confirmação/Autorização" ---------------- */
/* Portado de controle_new/edit/confirmacao-frm.php (usado nos popups de
   correção de vendedor/comprador/veiculo/venda) - mesmo componente,
   agora também em app/atpv/provedor/41/documento-frm.php (seção
   Autorização do formulário de solicitação). Lá o CSS ficava inline
   num <style> dentro do próprio -frm.php; aqui centralizado no tema
   igual ao resto, pra poder reaproveitar sem duplicar. */
.card-confirmacao {
  margin-top: 18px;
  border-radius: var(--radius);
  overflow: hidden;
  border: solid 1px var(--line);
  box-shadow: var(--shadow);
  background-color: var(--panel);
}
.card-confirmacao-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: var(--barra-escura);
  color: var(--barra-escura-texto);
  padding: 12px 16px;
  border-bottom: solid 3px var(--accent);
}
.card-confirmacao-header .icone {
  display: inline-flex;
}
.card-confirmacao-header .titulo {
  font-weight: bold;
  letter-spacing: 0.3px;
  flex: 1 1 auto;
  font-size: 0.85rem;
  text-transform: uppercase;
}
.card-confirmacao-badge {
  font-size: 0.72rem;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.card-confirmacao-badge.pendente {
  background-color: var(--warn-tint);
  color: var(--warn);
}
.card-confirmacao-badge.ok {
  background-color: var(--ok-tint);
  color: var(--ok);
}
.card-confirmacao-body {
  padding: 16px;
}
.card-confirmacao-instrucao {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-bottom: 14px;
  line-height: 1.4;
}
.card-confirmacao-acoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.btn-confirmacao {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: bold;
  transition: filter 0.15s ease, border-color 0.15s ease;
}
.btn-confirmacao:hover {
  filter: brightness(1.08);
}
.btn-gerar-confirmacao {
  background-color: var(--accent);
  color: var(--accent-ink);
}
.btn-anexar-confirmacao {
  background-color: var(--panel);
  color: var(--ink);
  border-color: var(--line);
}
.btn-anexar-confirmacao:hover {
  border-color: var(--accent);
  filter: none;
}
.card-confirmacao-arquivo {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background-color: var(--panel-2);
  border: dashed 1px var(--line);
}
.card-confirmacao-arquivo .texto {
  flex: 1 1 auto;
  min-width: 0;
}
.card-confirmacao-arquivo .rotulo {
  font-size: 0.72rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.card-confirmacao-arquivo .nome-arquivo {
  font-size: 0.85rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.card-confirmacao-arquivo .nome-arquivo.vazio {
  color: var(--ink-faint);
  font-style: italic;
}

/* app/atpv/provedor/41/index.php: a barra de abas está oculta
   ("display:none" no próprio PHP), mas .tabcontent (format.css) ainda
   tinha padding-top:140px pra compensar uma barra fixa que existia
   antes (o wrapper "#top" que segurava isso já foi removido do PHP).
   Sem esse ajuste o formulário abre com ~140px de vão vazio em branco
   antes do card "Novo/Editar ATPVe". .tabcontent é exclusivo desta
   página (nenhuma outra tela usa essa classe). */
.tabcontent {
  padding-top: 10px !important;
}

/* ---------------- Formulários ---------------- */

.input-text,
.form-control,
.input-numero,
.input-numerico,
select.input-text,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"] {
  background-color: var(--panel) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 12px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-text:hover,
.form-control:hover {
  border-color: var(--ink-faint) !important;
}

.input-text:focus,
.form-control:focus,
.input-numero:focus,
.input-numerico:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-tint) !important;
  outline: none !important;
}

/* Campo apontado por focarCampoInvalido() (atpve-edit.js) depois de uma
   validação falhar - some sozinho assim que a pessoa mexe no campo.
   focarCampoInvalido() também dá focus() no campo, e ":focus" (acima)
   tem mais especificidade que ".campo-invalido" sozinho (duas classes
   vs uma) - sem o ":focus" aqui também, a borda dourada de foco
   escondia a vermelha bem na hora que a pessoa é levada até o campo. */
.campo-invalido,
.campo-invalido:focus {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px var(--danger-tint) !important;
}
tr.campo-invalido td {
  background-color: var(--danger-tint) !important;
}

.input-button,
input[type="button"],
input[type="submit"],
.label-upload {
  background-color: var(--accent) !important;
  color: var(--accent-ink) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

/* opcoes.php usa .input-button (e template/upload/upload.php usa
   .label-upload) junto de .fundo-azul/.fundo-azul-1/.fundo-verde/
   .fundo-vermelho/.fundo-laranja pra diferenciar os botões por cor —
   sem isso, os !important acima de ".input-button"/".label-upload"
   (cor de fundo/texto) ganhavam de ".fundo-*" só por vir depois no
   arquivo, e os botões saíam todos iguais (cor do accent), perdendo a
   diferenciação por cor que a página já usa. Repito a cor de fundo
   aqui (não só o texto) pra cada variante realmente aparecer
   diferente. ".fundo-azul-1" faltava aqui (só ".fundo-azul" tinha
   override) - por isso todo botão "Inserir"/"Alterar"/"Enviar-*"
   marcado fundo-azul-1 nas telas de edição e no formulário grande
   continuava saindo na cor do accent (dourado) em vez de azul. */
.input-button.fundo-azul,
.input-button.fundo-azul-1,
.label-upload.fundo-azul,
.label-upload.fundo-azul-1 {
  background-color: var(--info) !important;
  color: #fff !important;
}
.input-button.fundo-verde,
.label-upload.fundo-verde {
  background-color: var(--ok) !important;
  color: #fff !important;
}
.input-button.fundo-vermelho,
.label-upload.fundo-vermelho {
  background-color: var(--danger) !important;
  color: #fff !important;
}
.input-button.fundo-laranja,
.input-button.fundo-maron,
.input-button.fundo-maron-1,
.label-upload.fundo-laranja,
.label-upload.fundo-maron,
.label-upload.fundo-maron-1 {
  background-color: var(--warn) !important;
  color: #fff !important;
}

.input-button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.label-upload:hover {
  filter: brightness(1.08);
  opacity: 1 !important;
  box-shadow: var(--shadow);
}

.input-button:active,
input[type="button"]:active,
input[type="submit"]:active {
  transform: translateY(1px);
}

/* ---------------- Navbar ---------------- */

.navbar {
  background-color: var(--panel) !important;
  border-bottom: solid 3px var(--accent) !important;
  box-shadow: var(--shadow) !important;
}

.navbar-toggler {
  color: var(--ink) !important;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
}
.navbar-toggler:hover {
  background-color: var(--panel-2) !important;
  opacity: 1 !important;
}

.navbar-user {
  color: var(--ink-faint) !important;
  font-size: 0.85rem;
  white-space: nowrap;
}

.navbar-manual {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft) !important;
  text-decoration: none !important;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.navbar-manual:hover {
  background-color: var(--panel-2);
  border-color: var(--ink-faint);
  color: var(--ink) !important;
}

.navbar-manual svg,
.navbar-manual i {
  width: 15px;
  height: 15px;
}

/* Em telas estreitas, o nome do usuário some e o botão Manual vira
   só ícone — evita a navbar (toggler + título + os 3 itens novos)
   apertar/quebrar em telas de celular. */
@media (max-width: 640px) {
  .navbar-user {
    display: none;
  }
  .navbar-manual span {
    display: none;
  }
}

.navbar-brand .texto-cinza {
  color: var(--ink-faint) !important;
}

/* Navbar com o botão "Novo" fixo (telas do ATPV - ver botaoNovo em
   abrirListagem()): "ATPV" + a pílula verde na mesma linha, dentro dos
   56px de altura da navbar - versão compacta da pílula normal
   (.opcoes-botao), que é feita pra caber numa barra mais alta. */
.navbar-brand-novo {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: visible;
  text-overflow: unset;
}

.navbar-brand-novo .opcoes-botao {
  padding: 4px 14px 4px 4px;
  gap: 6px;
  min-height: 0;
}

.navbar-brand-novo .opcoes-botao-icone {
  width: 22px;
  height: 22px;
  font-size: 11px;
}

.navbar-brand-novo .opcoes-botao-texto {
  font-size: 0.8rem;
}

#main {
  background-color: var(--panel) !important;
}

/* ---------------- Offcanvas / menu lateral ---------------- */

.offcanvas {
  background-color: var(--panel) !important;
  box-shadow: var(--shadow-lg) !important;
}

.offcanvas-header {
  border-bottom-color: var(--accent) !important;
}

.offcanvas .closebtn {
  color: var(--ink-soft) !important;
  transition: color 0.15s ease, transform 0.15s ease;
}
.offcanvas .closebtn:hover {
  color: var(--accent) !important;
  transform: rotate(90deg);
}

.menu-link,
.menu-dropdown-toggle {
  color: var(--ink) !important;
  border-bottom-color: var(--line-soft) !important;
  transition: background-color 0.15s ease, padding-left 0.15s ease;
}
.menu-link:hover,
.menu-dropdown-toggle:hover {
  background-color: var(--panel-2) !important;
  padding-left: 28px !important;
}

.menu-dropdown-arrow {
  color: var(--ink-faint);
}

.menu-dropdown-content .menu-link {
  background-color: var(--panel-2);
}

.menu-link-sair {
  color: var(--danger) !important;
}
.menu-link-sair:hover {
  background-color: var(--danger-tint) !important;
}

.contact-card {
  background-color: var(--panel) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow) !important;
}
.contact-card-title {
  background-color: var(--barra-escura) !important;
  color: var(--barra-escura-texto) !important;
}
.contact-card-row {
  color: var(--ink-soft) !important;
  border-top-color: var(--line-soft) !important;
  transition: background-color 0.15s ease;
}
.contact-card-horario {
  border-top-color: var(--line-soft) !important;
}
.contact-card-row-static {
  border-bottom-color: var(--line-soft) !important;
}
.contact-card-horario-detalhe {
  color: var(--ink-faint) !important;
}

.contact-card-row:hover {
  background-color: var(--panel-2) !important;
}

.contact-card-row-static:hover {
  background-color: transparent !important;
}

/* ---------------- Header de página + barra Filtro/Novo/Manual ---------------- */
/* Mesmo padrão do controle_new: título à esquerda, botões em pílula à
   direita, na mesma linha. Antes disso opcoes.php ficava numa barra
   cinza cheia, separada do título "ATPV" — layout velho do v2. */

.pagina-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 640px) {
  .pagina-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .opcoes-barra {
    justify-content: center;
  }
}

.pagina-header-titulo {
  margin: 0;
  color: var(--ink);
}

/* app/{vendedor,veiculo,comprador}/edit/index.php (via class/edicao.php)
   ganharam o chrome completo (navbar/menu lateral/cabeçalho) pra ficar
   consistente com o resto do sistema, mas na prática só são acessadas
   dentro do popup iframe aberto por openpage() (js/core.js) - que já
   tem seu próprio título/botão de fechar. abrirEdicao() marca <html>
   com .embutido via script inline quando detecta que está num iframe
   (window.self !== window.top); aqui só escondemos a navbar/offcanvas/
   cabeçalho pra sobrar só o formulário. Acesso direto pela URL (fora
   do iframe) continua mostrando o chrome completo normalmente. */
html.embutido .navbar,
html.embutido .offcanvas,
html.embutido .offcanvas-backdrop,
html.embutido .pagina-header {
  display: none !important;
}
html.embutido #main {
  padding-top: 16px;
}

/* Resultado do filtro ativo, logo abaixo do header — cartão com fundo
   próprio pra se destacar do fundo da página. */
.filtro-resultado {
  background-color: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}

.filtro-resultado-titulo {
  color: var(--ink-faint);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}

.opcoes-barra {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Os wrappers de opcoes.php ainda carregam classes "col-N" do grid
   antigo (width em %, float, padding do format.css) - neutraliza tudo
   isso só dentro de .opcoes-barra, sem afetar .col-N em nenhum outro
   lugar do sistema. */
.opcoes-barra > [class*="col-"] {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
}

.opcoes-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  box-sizing: border-box;
  background-color: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 16px 6px 6px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

/* Botão sem ícone (ex.: contador "1/12" da paginação do manual) - o
   padding acima (6px 16px 6px 6px) é assimétrico de propósito, pra
   sobrar espaço pro ícone circular de 26px do lado esquerdo. Sem
   ícone, isso empurrava o texto pra esquerda e deixava o botão mais
   baixo que os vizinhos; aqui o padding fica simétrico e a altura
   igual à dos botões com ícone. */
.opcoes-botao-contador {
  padding: 6px 16px;
}

.opcoes-botao:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.opcoes-botao:active {
  transform: scale(0.98);
}

.opcoes-botao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--panel-2);
  font-size: 13px;
}

.opcoes-botao-texto {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}

.opcoes-botao.opcoes-botao-verde {
  background-color: var(--ok);
  border-color: var(--ok);
}

.opcoes-botao.opcoes-botao-verde:hover {
  border-color: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-tint);
  filter: brightness(1.08);
}

.opcoes-botao.opcoes-botao-verde .opcoes-botao-icone {
  background-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.opcoes-botao.opcoes-botao-verde .opcoes-botao-texto {
  color: #fff;
}

/* Botão "Novo" no mobile: em vez da pílula ao lado de "ATPV" na
   navbar, vira um botão flutuante fixo no canto inferior direito -
   círculo verde só com o ícone "+", sempre alcançável. #opcao-novo é
   exclusivo do botão "Novo" (mesmo id nas telas do ATPV que têm esse
   botão). Mesmo breakpoint de .navbar-user/.navbar-manual acima (não
   900px, senão pegava tablet também - a pílula deve continuar ao lado
   de "ATPV" no tablet, só vira "+" no celular). */
@media (max-width: 640px) {
  #opcao-novo {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
  }
  #opcao-novo .opcoes-botao {
    width: 56px;
    height: 56px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  }
  #opcao-novo .opcoes-botao-icone {
    width: 100%;
    height: 100%;
    background-color: transparent;
    font-size: 24px;
  }
  #opcao-novo .opcoes-botao-texto {
    display: none;
  }
}

/* ---------------- Tabela de listagem ---------------- */

.list {
  background-color: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

table.list {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

.list th {
  background-color: var(--panel-2) !important;
  color: var(--ink-faint) !important;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  border-color: var(--line) !important;
}

.list td {
  border-color: var(--line-soft) !important;
  color: var(--ink);
}

.list tr:nth-child(even) {
  background-color: var(--panel-2) !important;
}

.list tr:hover {
  background-color: var(--accent-tint) !important;
}

.list-click {
  cursor: pointer;
  transition: color 0.15s ease;
}

/* ---------------- Loaders ("Aguarde...") ---------------- */

#div-waiting {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#div-waiting .div-content {
  font-family: var(--font);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
  background-color: transparent;
  color: var(--ink-faint);
}

#div-waiting .circle {
  margin: 0;
  width: 46px;
  height: 46px;
  border: 4px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: div-waiting-spin 0.8s linear infinite;
}

#div-waiting .div-content > div:last-child {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

@keyframes div-waiting-spin {
  100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  #div-waiting .circle { animation-duration: 1.6s; }
}

/* #loadingModal (aguarde ao trocar de página pelo menu) precisa ficar
   IDÊNTICO ao #div-waiting: mesmo fundo sólido, mesmo spinner, sem o
   cartão branco com borda #888 que format.css ainda desenha
   (position:absolute, width:200px, border:1px solid #888) - isso
   sobrava mesmo depois de eu trocar só a cor de fundo, então virava
   uma caixinha cinza flutuando no meio da tela. Só reestiliza as
   classes que o PHP/JS originais já usam (.modal-waiting,
   .modal-content-waiting, .loader) — nenhum id/onclick é tocado. */
.modal-waiting {
  background-color: var(--bg) !important;
}

.modal-content-waiting {
  position: fixed !important;
  inset: 0;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  width: 100% !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: var(--ink-faint);
  font-family: var(--font);
}

.loader {
  margin: 0 !important;
  width: 46px !important;
  height: 46px !important;
  border: 4px solid var(--line) !important;
  border-top-color: var(--accent) !important;
  border-radius: 50%;
  animation: div-waiting-spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .loader { animation-duration: 1.6s; }
}

/* ---------------- Popups (filtro, modais, calculadora) ---------------- */

.FiltroFrm {
  background-color: var(--panel) !important;
  border-color: var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  width: 440px !important;
  max-width: 92vw !important;
  overflow: hidden !important;
}

.FiltroPopup {
  background-color: rgba(20, 18, 16, 0.45) !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

@media (max-width: 480px) {
  .FiltroFrm {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
  }
}

/* Header modernizado — fundo escuro, borda accent, botões circulares
   com ícone. Substitui o antigo <div class="fundo-cinza-1"> com
   "FILTRO" / "A" / "X" soltos sem hierarquia visual. */
.filtro-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background-color: var(--barra-escura);
  border-bottom: solid 3px var(--accent);
}

.filtro-popup-titulo {
  color: var(--barra-escura-texto);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.filtro-popup-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* format.css original tem ".FiltroPopupTitleBtn{width:100%}" (pensado
   pra caber num <div class="col-1">) - precisa de !important aqui pra
   virar de fato um botão circular pequeno dentro de .filtro-popup-acoes. */
.FiltroPopupTitleBtn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: opacity 0.15s ease, transform 0.1s ease;
}
.FiltroPopupTitleBtn:hover {
  opacity: 0.85;
  transform: scale(1.08);
}

.filtro-popup-btn-aplicar {
  background-color: var(--accent);
  color: var(--accent-ink);
}

.filtro-popup-btn-fechar {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--barra-escura-texto);
  font-size: 20px;
}

.FiltroPopupForm {
  /* Rola só o formulário — o header (fora deste elemento) fica fixo
     no topo mesmo em telas baixas / muitos campos. */
  max-height: calc(88vh - 58px);
  overflow-y: auto;
}

/* Espaçamento padrão entre o último campo e os botões Aplicar/Fechar -
   substitui o <br/> manual que cada filtro-popup.php repetia. */
.FiltroPopupForm center {
  display: block;
  margin-top: 14px;
}

/* class/modal.php (_Modal) — usado pelos avisos de "sessão expirada"/
   "sem permissão" em vários index.php do v2. Gera seu próprio <style>
   inline com cores fixas (fundo branco, texto preto); sobrescreve
   aqui com !important pra também virar branco no claro / preto no
   escuro, em vez de sempre branco não importa o tema. */
.css-modal-open {
  background-color: rgba(20, 18, 16, 0.45) !important;
}
.css-modal-content {
  background-color: var(--panel) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
}
.css-modal-close {
  color: var(--ink-faint) !important;
}
.css-modal-close:hover {
  color: var(--ink) !important;
}
.css-modal-titulo {
  color: var(--ink) !important;
  border-bottom-color: var(--line) !important;
}

.modal-content,
.calculadora-conteudo {
  background-color: var(--panel) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
}

.modal-close,
.calculadora-fechar {
  color: var(--ink-faint) !important;
  transition: color 0.15s ease;
}
.modal-close:hover,
.calculadora-fechar:hover {
  color: var(--accent) !important;
}

.resumo-atpve-header {
  background-color: var(--panel) !important;
  border-bottom-color: var(--line) !important;
}

/* ---------------- Tela de login (#acesso*) ---------------- */
/* Só tem <style> inline, sem <link> a format.css — o tema é
   carregado depois desse <style> inline, então vence por ordem. */

#acesso {
  background-color: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  max-width: 420px;
  margin: 40px auto;
  padding: 0 !important;
  overflow: hidden;
}

#acesso-head {
  background-color: var(--barra-escura) !important;
  color: var(--barra-escura-texto) !important;
  border-bottom: solid 3px var(--accent) !important;
  padding: 18px 20px !important;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

#acesso-body {
  padding: 20px;
}

#acesso-texto {
  color: var(--ink-faint) !important;
  padding: 4px 0 16px !important;
}

#acesso-img {
  display: none !important;
}

#acesso-data {
  width: 100% !important;
}

#acesso-field {
  margin-bottom: 12px;
}

#acesso-field label {
  color: var(--ink-faint) !important;
  font-size: 0.78rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0 !important;
  display: block;
  margin-bottom: 4px;
}

#acesso-field input {
  background-color: var(--panel) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#acesso-field input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-tint) !important;
  outline: none !important;
}

#acesso-footer {
  padding: 0 20px 20px !important;
}

#acesso-footer input {
  background-color: var(--accent) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

#acesso-footer input:hover {
  background-color: var(--accent-hover) !important;
  opacity: 1 !important;
  box-shadow: var(--shadow);
}

@media (max-width: 480px) {
  #acesso {
    margin: 16px;
  }
}

/* Toggle de tema removido junto com o dark (js/ui.js) - o sistema
   agora só tem o tema claro. */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

/* ---------------- Abas do formulário grande (provedor/41) ---------------- */
/* .tablink removido - a barra de abas foi excluída de
   app/atpv/provedor/41/index.php (openTab()/nextTab() não existem
   mais), nenhum elemento usa mais essa classe. .tabcontent continua
   abaixo porque tab-cadastro/tab-resumo ainda carregam essa classe
   (mesmo com display:none inline). */
.tabcontent {
  background-color: var(--panel) !important;
  color: var(--ink) !important;
}