:root {
  --azul: #1d4ed8;
  --azul-escuro: #1e3a8a;
  --verde: #166534;
  --verde-bg: #dcfce7;
  --vermelho: #991b1b;
  --vermelho-bg: #fee2e2;
  --cinza-borda: #e2e8f0;
  --cinza-texto: #475569;
  --fundo: #f8fafc;
}
* { box-sizing: border-box; }
.faixa-aviso { background: #fef3c7; color: #92400e; padding: 8px 20px; font-size: 13px; text-align: center; }
.faixa-aviso a { color: #92400e; font-weight: 700; }
.faixa-ambiente { padding: 10px 20px; font-size: 13px; font-weight: 700; text-align: center; letter-spacing: 0.02em; }
.faixa-ambiente a { color: inherit; text-decoration: underline; font-weight: 700; }
.faixa-ambiente-homologacao { background: #dbeafe; color: #1e40af; }
.faixa-ambiente-producao { background: #991b1b; color: white; }
.codigo-chave { display: block; background: #0f172a; color: #4ade80; padding: 12px 16px; border-radius: 6px; font-family: monospace; font-size: 14px; word-break: break-all; margin: 10px 0; }
table.lista td.acoes { display: flex; gap: 10px; }
table.lote td { vertical-align: top; }
table.lote input, table.lote select { margin-top: 0; }
table.lote .remover-linha { background: white; color: var(--vermelho); border: 1px solid var(--vermelho); padding: 6px 10px; font-size: 12px; margin-top: 0; }
#btn-add-linha { background: white; color: var(--azul); border: 1px solid var(--azul); }
body { margin: 0; font-family: -apple-system, Segoe UI, Arial, sans-serif; background: var(--fundo); color: #0f172a; }
main { max-width: 980px; margin: 0 auto; padding: 24px 20px 60px; }
h1 { font-size: 22px; margin: 0 0 6px; }
h2 { font-size: 16px; margin: 24px 0 8px; }
h3 { font-size: 14px; margin: 20px 0 6px; color: var(--azul-escuro); }
.sub { color: var(--cinza-texto); margin: 0 0 16px; }

header.topo { display: flex; align-items: center; gap: 24px; padding: 12px 20px; background: white; border-bottom: 1px solid var(--cinza-borda); }
header.topo .marca { font-weight: 700; color: var(--azul-escuro); }
header.topo .marca span { font-weight: 400; color: var(--cinza-texto); }
header.topo nav { display: flex; gap: 16px; flex: 1; }
header.topo nav a { color: var(--azul); text-decoration: none; font-size: 14px; }
header.topo nav a:hover { text-decoration: underline; }
form.sair { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cinza-texto); }
form.sair button { background: none; border: none; color: var(--azul); cursor: pointer; }

.caixa-login { max-width: 360px; margin: 80px auto; background: white; padding: 28px; border-radius: 10px; border: 1px solid var(--cinza-borda); }

form label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--cinza-texto); }
form input, form select, form textarea {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--cinza-borda);
  border-radius: 6px; font-size: 14px; font-family: inherit;
}
form input.check, label.check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
label.check input { width: auto; margin: 0; }
form button, .acoes button {
  background: var(--azul); color: white; border: none; padding: 10px 18px; border-radius: 6px;
  font-size: 14px; cursor: pointer; margin-top: 6px;
}
form button:disabled { background: #94a3b8; cursor: not-allowed; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.acoes button, .acoes a button { background: white; color: var(--azul); border: 1px solid var(--azul); }
.acoes button.primario { background: var(--azul); color: white; }
.acoes a { text-decoration: none; }

details summary { cursor: pointer; color: var(--azul); font-size: 13px; margin: 12px 0; }

table { border-collapse: collapse; width: 100%; }
table.resumo th, table.resumo td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--cinza-borda); font-size: 14px; }
table.resumo th { color: var(--cinza-texto); font-weight: 600; width: 40%; }
table.lista th, table.lista td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--cinza-borda); font-size: 13px; }
table.conferencia th, table.conferencia td { text-align: left; padding: 6px 10px; font-size: 13px; border-bottom: 1px solid var(--cinza-borda); }
table.conferencia tr.ok td:nth-child(2) { color: var(--verde); font-weight: 700; }
table.conferencia tr.revisar td:nth-child(2) { color: var(--vermelho); font-weight: 700; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; }
.badge.apto, .badge.status-emitida_gdf { background: var(--verde-bg); color: var(--verde); }
.badge.revisar, .badge.status-erro { background: var(--vermelho-bg); color: var(--vermelho); }
.badge.status-calculada, .badge.status-rascunho { background: #fef3c7; color: #92400e; }
.badge.status-conferida { background: #dbeafe; color: #1e40af; }
.badge.status-emitida_manual { background: #ede9fe; color: #5b21b6; }
.badge.status-cancelada { background: var(--vermelho-bg); color: var(--vermelho); }

pre.descricao { background: white; border: 1px solid var(--cinza-borda); border-radius: 6px; padding: 12px; font-size: 13px; white-space: pre-wrap; }
.alerta { padding: 10px 14px; border-radius: 6px; font-size: 13px; }
.alerta.erro { background: var(--vermelho-bg); color: var(--vermelho); }
.alerta.info { background: #dbeafe; color: #1e40af; }
.alerta.ok { background: var(--verde-bg); color: var(--verde); }

.rodape-versao { text-align: center; padding: 16px 10px; color: var(--cinza-texto); opacity: 0.7; }
/* S31 — seletor de tomador agrupado (Nova nota) */
.seletor-tomador { border: 1px solid var(--cinza-borda); border-radius: 8px; padding: 12px; margin: 0 0 16px; background: #fff; }
.seletor-tomador .busca-tomador { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.seletor-tomador .busca-tomador input { flex: 1; }
.seletor-tomador .lista-tomadores { max-height: 380px; overflow: auto; border-top: 1px solid var(--cinza-borda); }
.tomador-grupo { padding: 8px 6px; border-bottom: 1px solid var(--cinza-borda); }
.tomador-grupo[hidden] { display: none; }
.tomador-grupo .cabecalho { font-weight: 600; font-size: 14px; }
.tomador-grupo .cabecalho small { font-weight: 400; color: var(--cinza-texto); }
.tomador-grupo .perfil { display: block; padding: 4px 0 2px 22px; font-size: 13px; }
.tomador-grupo .perfil input { margin-left: -20px; margin-right: 6px; }
.tomador-grupo .perfil .ultima { color: var(--cinza-texto); }
.tomador-grupo .perfil.padrao .rotulo-padrao { color: var(--verde); font-weight: 600; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; margin-left: 4px; vertical-align: middle; }
.chip.ok { background: var(--verde-bg); color: var(--verde); }
.chip.aviso { background: #fef3c7; color: #92400e; }
.chip.bloqueia { background: var(--vermelho-bg); color: var(--vermelho); }
.chip.neutro { background: #e5e7eb; color: #374151; }
.tomador-card { border: 2px solid var(--verde); border-radius: 8px; padding: 10px 14px; margin: 8px 0 12px; background: var(--verde-bg); font-size: 13px; }
.tomador-card.bloqueado { border-color: var(--vermelho); background: var(--vermelho-bg); }
.tomador-card h3 { margin: 0 0 6px; font-size: 15px; }
.tomador-card table.resumo { background: #fff; width: 100%; }
.tomador-card ul { margin: 6px 0 0 18px; padding: 0; }
.bloco-tomador { border: 1px solid var(--cinza-borda); border-radius: 8px; padding: 10px 14px; margin: 8px 0 16px; }
.bloco-tomador.bloqueado { border-color: var(--vermelho); }
.badge.status-desistida { background: #e5e7eb; color: #374151; }
/* S35 — listas com filtro, ordenação e paginação (public/tabelas.js) */
.tabela-barra { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 8px 0 6px; font-size: 13px; color: var(--cinza-texto); }
.tabela-barra input.tabela-filtro { flex: 1 1 260px; max-width: 360px; margin: 0; }
.tabela-barra select { margin: 0 0 0 4px; }
.tabela-barra .tabela-pag button { padding: 3px 10px; font-size: 12px; margin: 0 2px; }
table.lista th.ordenavel { cursor: pointer; user-select: none; white-space: nowrap; }
table.lista th.ordenavel:hover { color: var(--azul); }
table.lista th.asc::after { content: " ▲"; font-size: 10px; }
table.lista th.desc::after { content: " ▼"; font-size: 10px; }
/* S36 — ações da NFS-e nas listas (ver / impressão / PDF / XML) */
.acoes-nfse { white-space: nowrap; font-size: 12px; }
.acoes-nfse a { margin-right: 6px; text-decoration: none; }
.acoes-nfse a:hover { text-decoration: underline; }

/* S45: campos de valor (R$) e percentual (%) no padrão pt-BR */
.campo-numero { display: flex; align-items: center; gap: 0; }
.campo-numero input { text-align: right; flex: 1; min-width: 0; }
.campo-numero .prefixo, .campo-numero .sufixo { padding: 0 8px; color: #555; font-size: 13px; white-space: nowrap; }
.campo-numero .prefixo { border: 1px solid #ccc; border-right: 0; border-radius: 4px 0 0 4px; line-height: 2.2; }
/* S46: seletor R$ / % colado ao campo de desconto */
.campo-desconto select.tipo-desconto { width: auto; flex: 0 0 auto; margin: 0; border-radius: 4px 0 0 4px; border-right: 0; padding: 0 6px; }
.campo-desconto input { border-radius: 0 4px 4px 0; }
.campo-numero .sufixo { border: 1px solid #ccc; border-left: 0; border-radius: 0 4px 4px 0; line-height: 2.2; }
.campo-numero .prefixo + input { border-radius: 0 4px 4px 0; }
.campo-numero input:has(+ .sufixo) { border-radius: 4px 0 0 4px; }

/* ===== NotaPlano ===== */
:root { --roxo: #4f46e5; --roxo-escuro: #3730a3; --amarelo-bg: #fef3c7; --amarelo: #92400e; }
header.topo { flex-wrap: wrap; position: sticky; top: 0; z-index: 5; }
header.topo .marca { font-size: 17px; }
header.topo .marca span { color: var(--roxo); font-weight: 700; }
header.topo nav a.ativo { font-weight: 700; text-decoration: underline; }
.troca-empresa select { padding: 4px 8px; font-size: 13px; border-radius: 6px; border: 1px solid var(--cinza-borda); }
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 16px 0; }
.cartao { background: white; border: 1px solid var(--cinza-borda); border-radius: 10px; padding: 16px; }
.cartao .num { font-size: 26px; font-weight: 700; color: var(--azul-escuro); }
.cartao .rot { color: var(--cinza-texto); font-size: 13px; }
.cartao.alerta-cartao { border-color: #f59e0b; background: #fffbeb; }
.alerta { padding: 12px 14px; border-radius: 8px; margin: 12px 0; font-size: 14px; }
.alerta.erro { background: var(--vermelho-bg); color: var(--vermelho); }
.alerta.ok { background: var(--verde-bg); color: var(--verde); }
.alerta.info { background: #dbeafe; color: #1e40af; }
.alerta.aviso { background: var(--amarelo-bg); color: var(--amarelo); }
.alerta.perigo { background: #7f1d1d; color: white; border: 2px solid #ef4444; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #e2e8f0; color: #334155; }
.badge.emitida, .badge.ok, .badge.ativa, .badge.ativo, .badge.paga, .badge.validado { background: var(--verde-bg); color: var(--verde); }
.badge.rejeitada, .badge.erro, .badge.cancelada, .badge.vencida, .badge.bloq_hard, .badge.falha { background: var(--vermelho-bg); color: var(--vermelho); }
.badge.conferida, .badge.trial, .badge.pendente, .badge.fila { background: #dbeafe; color: #1e40af; }
.badge.calculada, .badge.aviso, .badge.inadimplente, .badge.bloq_soft, .badge.degradado { background: var(--amarelo-bg); color: var(--amarelo); }
table.lista { width: 100%; border-collapse: collapse; background: white; border: 1px solid var(--cinza-borda); border-radius: 8px; overflow: hidden; font-size: 13px; }
table.lista th, table.lista td { padding: 8px 10px; border-bottom: 1px solid var(--cinza-borda); text-align: left; vertical-align: top; }
table.lista th { background: #f1f5f9; font-weight: 600; }
table.lista tr:hover td { background: #f8fafc; }
table.resumo { border-collapse: collapse; margin: 8px 0 16px; font-size: 14px; }
table.resumo td { padding: 6px 12px 6px 0; }
table.resumo td:first-child { color: var(--cinza-texto); }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 18px; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 700px) { .grade-2 { grid-template-columns: 1fr; } header.topo nav { gap: 10px; font-size: 13px; } }
fieldset { border: 1px solid var(--cinza-borda); border-radius: 8px; padding: 12px 16px; margin: 0 0 16px; background: white; }
legend { font-weight: 600; color: var(--azul-escuro); padding: 0 6px; }
.ajuda { display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 50%; background: #e0e7ff; color: var(--roxo-escuro); font-size: 11px; cursor: help; margin-left: 4px; font-weight: 700; }
.passos { counter-reset: p; list-style: none; padding: 0; }
.passos li { position: relative; padding: 10px 12px 10px 44px; margin: 6px 0; background: white; border: 1px solid var(--cinza-borda); border-radius: 8px; }
.passos li::before { counter-increment: p; content: counter(p); position: absolute; left: 12px; top: 10px; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; background: var(--roxo); color: white; font-size: 12px; font-weight: 700; }
.passos li.feito { opacity: .7; } .passos li.feito::before { content: '✓'; background: var(--verde); }
button.perigo, .acoes button.perigo { background: var(--vermelho); color: white; border-color: var(--vermelho); }
button.secundario, .acoes button.secundario { background: white; color: var(--azul); border: 1px solid var(--azul); }
.paginacao { font-size: 13px; color: var(--cinza-texto); }
.paginacao a { margin: 0 8px; }
.landing { max-width: 1040px; margin: 0 auto; padding: 40px 20px; }
.landing h1 { font-size: 34px; line-height: 1.15; }
.landing .heroi { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: center; }
@media (max-width: 800px) { .landing .heroi { grid-template-columns: 1fr; } }
.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.plano { background: white; border: 1px solid var(--cinza-borda); border-radius: 12px; padding: 18px; }
.plano .preco { font-size: 28px; font-weight: 700; color: var(--azul-escuro); }
.plano ul { padding-left: 18px; font-size: 13px; color: var(--cinza-texto); }
.plano.destaque { border: 2px solid var(--roxo); }
.btn { display: inline-block; background: var(--roxo); color: white; text-decoration: none; padding: 10px 18px; border-radius: 8px; font-weight: 600; }
.btn.claro { background: white; color: var(--roxo); border: 1px solid var(--roxo); }
pre.codigo, pre.descricao { background: #0f172a; color: #e2e8f0; padding: 12px; border-radius: 8px; font-size: 12px; overflow: auto; white-space: pre-wrap; }
.frase-recuperacao { font-family: monospace; font-size: 18px; background: #fff7ed; border: 2px dashed #f59e0b; padding: 14px; border-radius: 8px; letter-spacing: .04em; }
.tour-dica { position: fixed; bottom: 20px; right: 20px; max-width: 320px; background: #1e1b4b; color: white; padding: 14px 16px; border-radius: 10px; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 50; }
.tour-dica button { background: white; color: #1e1b4b; border: none; padding: 6px 10px; border-radius: 6px; margin-top: 8px; cursor: pointer; font-size: 12px; }
.chip { display: inline-block; background: #eef2ff; color: #3730a3; padding: 2px 8px; border-radius: 6px; font-size: 12px; margin: 2px; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin: 10px 0; }
.filtros label { margin: 0; }
.filtros input, .filtros select { width: auto; min-width: 140px; }
.linha-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.linha-acoes form { display: inline; }
.linha-acoes button { margin: 0; padding: 6px 10px; font-size: 12px; }
small.muted, .muted { color: var(--cinza-texto); }
.faixa-trial { background: #eef2ff; color: #3730a3; padding: 8px 20px; font-size: 13px; text-align: center; }
.faixa-trial a { color: #3730a3; font-weight: 700; }