/* Complementos do app real (flash, tabelas de permissão, detalhes) sobre o
   tema aprovado no M0 (base.css + tema.css). */

.flashes { list-style: none; margin-bottom: 16px; }
.flashes li {
  padding: 11px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 500;
  margin-bottom: 8px; border: 1px solid transparent;
}
.flashes li.erro { background: var(--bad-bg); color: var(--bad-ink); border-color: currentColor; }
.flashes li.sucesso { background: var(--ok-bg); color: var(--ok-ink); border-color: currentColor; }
.flashes li.aviso { background: var(--warn-bg); color: var(--warn-ink); border-color: currentColor; }

.auth-flashes { margin-bottom: 14px; }

/* ── Aviso como toast, dentro do sistema (29/07/2026, padrão do Level Hub) ──
   Antes a lista ficava no topo do conteúdo: empurrava a página inteira para
   baixo a cada POST, cobria a ação primária da tela e não fechava sozinha.
   Agora vai para o rodapé à direita, onde não há nada, some em 6s e tem botão
   de fechar. `pointer-events: none` no contêiner é essencial — sem isso a
   faixa engoliria o clique no botão logo depois de salvar, que é justamente
   quando o usuário quer clicar de novo. As telas de login continuam com o
   aviso embutido (`.auth-flashes`), onde ele faz sentido. */
.flashes-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: var(--z-flash);
  display: flex; flex-direction: column-reverse; gap: 8px;
  max-width: 420px; margin-bottom: 0;
  pointer-events: none;
}
.flashes-toast li {
  position: relative; margin-bottom: 0;
  background: var(--card); border: 1px solid var(--card-border);
  border-left: 4px solid var(--accent);
  box-shadow: var(--shadow-lift);
  padding: 12px 38px 12px 16px;
  animation: flash-entra .25s ease;
  pointer-events: auto;
}
.flashes-toast li.sucesso { border-left-color: var(--ok-ink); }
.flashes-toast li.aviso   { border-left-color: var(--warn-ink); }
.flashes-toast li.erro    { border-left-color: var(--bad-ink); }
.flash-fechar {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; border: none; background: none; cursor: pointer;
  border-radius: 6px; color: var(--muted); line-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.flash-fechar svg { width: 14px; height: 14px; }
.flash-fechar:hover { background: var(--hover); color: var(--text); }
@keyframes flash-entra { from { transform: translateY(12px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flashes-toast li { animation: none; } }

.tabela-permissoes td, .tabela-permissoes th { padding: 8px 10px; }
.tabela-permissoes select { min-width: 160px; }

.link-copiavel {
  display: block; padding: 12px 14px; border: 1px dashed var(--card-border);
  border-radius: 10px; background: var(--hover); font-size: 12.5px;
  word-break: break-all; font-family: ui-monospace, monospace; margin: 12px 0;
}

.vazio {
  text-align: center; color: var(--muted); padding: 36px 20px; font-size: 13.5px;
}
.vazio b { display: block; font-size: 15px; color: var(--text-2); margin-bottom: 4px; }

.badge-perfil { font-size: 11px; }

/* Abas do formulário de Serviço (Serviço / Impostos Federais / Reforma
   Tributária) — mesmo idioma vanilla do resto do app, sem framework. */
.tabs-nav {
  display: flex; gap: 4px; border-bottom: 1px solid var(--card-border);
  margin-bottom: 18px;
}
.tabs-nav button {
  background: none; border: none; padding: 10px 16px; font-size: 13.5px;
  font-weight: 600; color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs-nav button.active { color: var(--accent-ink); border-bottom-color: var(--accent); }
.tab-panel[hidden] { display: none; }

/* ---------- Fatura pública (link enviado por e-mail, sem login) ----------
   Tela solta como login.html — mesmos tokens de tema.css, sem modo escuro.
   Reenquadrada em 06/08/2026 (Modelo A "grade 2 colunas", escolhido pelo
   Felipe) e reharmonizada no mesmo dia (Felipe: "muitos espaços soltos",
   quadro do Pix desalinhado, "Cobrado de" espalhado): cliente+valor e
   Pix+boleto viraram 1 cartão cada (divisor interno) em vez de 2 cartões
   separados de alturas desiguais — antes o par mais curto (ex. Boleto sem
   Pix do lado) esticava pra bater a altura do vizinho e sobrava vão vazio
   embaixo. "Cobrado de" trocou a lista rótulo-esquerda/valor-direita com
   linha pontilhada por um bloco de endereço (nome em destaque, CPF/CNPJ
   em mono abaixo, serviço por último) — mesma leitura de um envelope, não
   de uma tabela. No celular (<640px) tudo empilha com um divisor
   horizontal no lugar do vertical. */
.fatura-doc { max-width: 780px; margin: 0 auto; padding: 32px 16px 56px; }
.fatura-voltar {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent-ink); font-size: 13px; font-weight: 600;
  padding: 0 0 14px;
}
.fatura-voltar:hover { text-decoration: underline; }

.fatura-cabecalho {
  padding: 18px 22px; margin-bottom: 14px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
/* Bloco do emitente (07/08/2026): logo (se cadastrada) + razão social/
   CNPJ/endereço, sempre juntos — antes a logo SUBSTITUÍA o texto por
   completo (Felipe: "senti falta dos dados do emitente"). */
.fatura-emitente-bloco { display: flex; gap: 12px; align-items: flex-start; }
.fatura-logo { background: #fff; border-radius: 8px; padding: 6px 10px; display: flex; align-items: center; flex-shrink: 0; }
.fatura-logo img { display: block; height: 40px; width: auto; }
.fatura-emitente { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); }
.fatura-emitente-doc { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 3px; }
.fatura-emitente-endereco { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.fatura-numero { font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.fatura-numero strong { display: block; font-size: 13px; color: var(--text-2); }

.fatura-card { margin-bottom: 14px; }
.fatura-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* Cobrado de + valor: 1 cartão, divisor vertical entre as duas metades */
.fatura-resumo { display: grid; grid-template-columns: 1.3fr 1fr; align-items: stretch; }
.fatura-resumo-cliente { padding: 22px 24px; }
.fatura-resumo-cliente .fatura-eyebrow { margin-bottom: 10px; }
.fatura-resumo-cliente .fatura-eyebrow--servico { margin-top: 16px; margin-bottom: 6px; }
.fatura-resumo-nome { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.35; }
.fatura-resumo-doc { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.fatura-resumo-servico { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.fatura-resumo-valor {
  padding: 22px 24px; border-left: 1px solid var(--card-border);
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
}
.fatura-resumo-valor .venc { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.fatura-resumo-valor .num {
  font-family: var(--font-display); font-size: 32px; font-weight: 800; color: var(--accent-ink);
  line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.fatura-resumo-valor .badge { margin-top: 8px; }

/* Pagamento: Pix à esquerda; à direita Boleto e NFS-e empilhados com
   divisor horizontal — juntos preenchem a altura do Pix (o QR torna a
   coluna esquerda naturalmente mais alta; antes o Boleto sozinho sobrava
   com vão vazio embaixo, apontado pelo Felipe). Coluna sozinha (fatura
   sem Pix, ou sem boleto e sem nota) ocupa a largura toda. */
.fatura-pagamento { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.fatura-pagamento h3 {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 0 0 14px;
}
.fatura-pagamento-col--pix {
  padding: 22px 24px; display: flex; flex-direction: column; align-items: center; text-align: center;
}
.fatura-pagamento-col--pix h3 { align-self: flex-start; color: var(--ok-ink); }
.fatura-pagamento-col--pix .btn { margin-top: 16px; width: 100%; justify-content: center; }
.fatura-pix-corpo {
  flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.fatura-qr {
  width: 140px; height: 140px; border: 4px solid #fff; border-radius: 10px;
  box-shadow: var(--shadow); image-rendering: pixelated; margin-bottom: 12px;
}
.fatura-qr-legenda { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }

.fatura-pagamento-col--dir { display: flex; flex-direction: column; }
.fatura-pagamento-col--pix + .fatura-pagamento-col--dir { border-left: 1px solid var(--card-border); }
.fatura-pagamento-col:only-child { grid-column: 1 / -1; }
.fatura-pagamento-col--pix:only-child { max-width: 300px; width: 100%; margin: 0 auto; }
.fatura-secao-boleto { padding: 20px 24px; }
.fatura-secao-boleto h3 { color: var(--warn-ink); }
.fatura-secao-boleto .btn { width: 100%; justify-content: center; margin-top: 12px; }
.fatura-secao-nfse { padding: 20px 24px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.fatura-secao-boleto + .fatura-secao-nfse { border-top: 1px solid var(--card-border); }
.fatura-secao-nfse h3 { color: var(--info-ink); }
.fatura-nfse-numero { font-family: var(--font-display); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fatura-nfse-chave {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); word-break: break-all; margin-top: 4px;
}
.fatura-acoes-nfse { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* Linha digitável numa linha só (pedido do Felipe): fonte menor e sem
   quebra — 47–54 caracteres mono cabem na coluna de ~330px. */
.link-copiavel--linha {
  font-size: 10px; letter-spacing: -.01em; white-space: nowrap;
  text-align: center; margin: 0; padding: 10px 8px;
}

.btn-full { width: 100%; justify-content: center; }

.fatura-imprimir { display: flex; justify-content: center; margin-bottom: 14px; }
.fatura-aviso { font-size: 12px; color: var(--muted); text-align: center; padding: 4px 8px; line-height: 1.5; }
.fatura-rodape { text-align: center; font-size: 11px; color: var(--muted); margin-top: 18px; padding: 0 8px; }

/* Celular: os pares empilham, divisor vira horizontal; a linha digitável
   volta a poder quebrar (não cabe numa linha em 375px) */
@media (max-width: 640px) {
  .fatura-cabecalho { flex-direction: column; }
  .fatura-numero { text-align: left; }
  .fatura-resumo, .fatura-pagamento { grid-template-columns: 1fr; }
  .fatura-resumo-valor { border-left: none; border-top: 1px solid var(--card-border); }
  .fatura-pagamento-col--pix + .fatura-pagamento-col--dir { border-left: none; border-top: 1px solid var(--card-border); }
  .fatura-resumo-valor .num { font-size: 38px; }
  .fatura-qr { width: 200px; height: 200px; }
  .link-copiavel--linha { white-space: normal; font-size: 11px; }
  .fatura-acoes-nfse { flex-direction: column; }
  .fatura-acoes-nfse .btn { width: 100%; justify-content: center; }
}

@media print {
  /* Botões não servem no papel; QR, copia-e-cola e linha digitável sim. */
  .fatura-voltar, .fatura-imprimir, .fatura-acoes-nfse,
  [data-copiar] { display: none !important; }
  .fatura-doc { padding: 0; max-width: none; }
  .fatura-cabecalho, .fatura-card { box-shadow: none !important; page-break-inside: avoid; }
  .fatura-card { margin-bottom: 10px; }
  .fatura-resumo-valor .num { font-size: 28px; }
}

/* Categorias — filha indentada sob a totalizadora (22/07/2026) */
.categoria-filha { padding-left: 24px !important; }