/* GeraNFE — interface do cliente.
   Papel frio, tinta azul-marinho, azul-caneta para ações, verde de carimbo para "autorizada".
   O único elemento expressivo é a prévia da nota (serifada, com carimbo). O resto é sóbrio. */

:root {
  --papel: #f5f7fa;
  --branco: #ffffff;
  --tinta: #16213a;
  --tinta-2: #4a5570;
  --tinta-3: #7c869c;
  --linha: #d9dfe8;
  --linha-2: #e8ecf2;
  --caneta: #2547d0;
  --caneta-escura: #1a36a8;
  --caneta-clara: #e8edfc;
  --carimbo: #17784a;
  --carimbo-claro: #e3f3ea;
  --ambar: #a15c07;
  --ambar-claro: #fbf0dc;
  --erro: #b3261e;
  --erro-claro: #fbe9e7;

  --ui: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --doc: "Source Serif 4", Georgia, "Times New Roman", serif;

  --r-campo: 6px;
  --r-painel: 10px;
  --sombra-nota: 0 1px 2px rgba(22, 33, 58, .06), 0 12px 32px -12px rgba(22, 33, 58, .22);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--papel);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: 1.6rem; line-height: 1.2; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0; }
a { color: var(--caneta); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--caneta); outline-offset: 2px; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ------------------------------------------------------------------ campos */
.campo { display: grid; gap: 4px; }
.campo > span { font-size: .85rem; font-weight: 600; color: var(--tinta-2); }
.campo small { color: var(--tinta-3); font-size: .8rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=search], input[type=tel], select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--linha);
  border-radius: var(--r-campo);
  background: var(--branco);
  transition: border-color .12s;
}
input:hover, select:hover, textarea:hover { border-color: #c3cbd8; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--caneta); box-shadow: 0 0 0 3px var(--caneta-clara); }
textarea { resize: vertical; min-height: 92px; line-height: 1.45; }
input[type=file] { width: 100%; padding: 6px; border: 1px dashed #c3cbd8; border-radius: var(--r-campo); background: var(--branco); font-size: .9rem; }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; margin-right: 10px; padding: 5px 10px; border: 1px solid var(--linha); border-radius: 4px; background: var(--papel); color: var(--tinta); cursor: pointer; }
input[readonly] { background: var(--linha-2); color: var(--tinta-2); }
.marcar { display: flex; gap: 8px; align-items: center; font-size: .92rem; cursor: pointer; }
.marcar input { width: 16px; height: 16px; accent-color: var(--caneta); }

.grade { display: grid; gap: 14px; align-items: start; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: 2fr 1fr 1fr; }
.larga { grid-column: 1 / -1; }

/* segmentado (PJ / PF / exterior) */
.segmentos { justify-self: start; display: inline-flex; border: 1px solid var(--linha); border-radius: var(--r-campo); background: var(--branco); padding: 2px; }
.segmentos label { cursor: pointer; }
.segmentos input { position: absolute; opacity: 0; }
.segmentos span { display: block; padding: 6px 14px; border-radius: 4px; font-size: .9rem; color: var(--tinta-2); }
.segmentos input:checked + span { background: var(--caneta-clara); color: var(--caneta-escura); font-weight: 600; }
.segmentos input:focus-visible + span { outline: 2px solid var(--caneta); }

/* ------------------------------------------------------------------ botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-campo); border: 1px solid transparent;
  background: var(--caneta); color: #fff; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background .12s;
}
.botao:hover { background: var(--caneta-escura); }
.botao:disabled { opacity: .55; cursor: progress; }
.botao.secundario { background: var(--branco); color: var(--tinta); border-color: var(--linha); }
.botao.secundario:hover { border-color: var(--tinta-3); }
.botao.fantasma { background: transparent; color: var(--caneta); padding: 6px 8px; }
.botao.fantasma:hover { background: var(--caneta-clara); }
.botao.perigo { background: var(--branco); color: var(--erro); border-color: #ecc4c0; }
.botao.grande { padding: 12px 22px; font-size: 1rem; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------------ avisos */
.aviso { padding: 10px 12px; border-radius: var(--r-campo); font-size: .92rem; border: 1px solid; }
.aviso.erro { background: var(--erro-claro); border-color: #f0c7c2; color: #7a1a14; }
.aviso.ok { background: var(--carimbo-claro); border-color: #bfe3cf; color: #0f5434; }
.aviso.atencao { background: var(--ambar-claro); border-color: #efd6a6; color: #6b3d05; }
.aviso.info { background: var(--caneta-clara); border-color: #cbd6f7; color: var(--caneta-escura); }

#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0;
  background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 8px; font-size: .92rem;
  transition: opacity .18s, transform .18s; pointer-events: none; z-index: 50; max-width: 90vw;
}
#toast.visivel { opacity: 1; transform: translate(-50%, 0); }

/* ================================================================== login */
.entrada { min-height: 100vh; display: grid; grid-template-columns: minmax(340px, 460px) 1fr; }
.entrada-form { background: var(--branco); padding: 48px 48px 32px; display: flex; flex-direction: column; border-right: 1px solid var(--linha); }
.entrada-form form { display: grid; gap: 16px; margin-top: 40px; }
.entrada-form h1 { font-size: 1.5rem; }
.entrada-form .sub { color: var(--tinta-2); margin-top: 6px; }
.entrada-form footer { margin-top: auto; padding-top: 32px; color: var(--tinta-3); font-size: .82rem; }
.entrada-palco { display: grid; place-items: center; padding: 48px; overflow: hidden; }
.entrada-palco .nota { transform: rotate(-2deg); max-width: 440px; }

.marca { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; text-decoration: none; align-self: flex-start; }
.marca img { display: block; max-width: 100%; height: auto; }

/* ================================================================== app */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.lateral { background: var(--tinta); color: #c9d1e3; display: flex; flex-direction: column; padding: 20px 14px; position: sticky; top: 0; height: 100vh; }
/* O logotipo tem letras azul-marinho: na lateral escura ele fica numa placa branca */
.lateral .marca { display: block; align-self: stretch; background: var(--branco); border-radius: 8px; padding: 8px 10px; margin-bottom: 16px; }
.lateral .marca img { width: 100%; }
.lateral nav { display: grid; gap: 2px; }
.lateral nav a { color: #c9d1e3; text-decoration: none; padding: 8px 10px; border-radius: 6px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; }
.lateral nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.lateral nav a.ativo { background: rgba(142, 166, 255, .16); color: #fff; }
.lateral nav a.primario { background: var(--caneta); color: #fff; margin-bottom: 10px; justify-content: center; font-weight: 650; }
.lateral nav a.primario:hover { background: #3557e0; }
.lateral .pe { margin-top: auto; font-size: .84rem; border-top: 1px solid rgba(255, 255, 255, .1); padding: 14px 10px 0; display: grid; gap: 2px; }
.lateral .pe strong { color: #fff; font-weight: 600; }
.lateral .pe button { background: none; border: 0; color: #8ea6ff; padding: 4px 0 0; cursor: pointer; text-align: left; }
.ambiente { margin: 0 10px 14px; font-size: .78rem; padding: 6px 8px; border-radius: 6px; background: rgba(240, 180, 60, .14); color: #f3cd7f; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.topo { display: flex; align-items: center; gap: 16px; padding: 14px 32px; border-bottom: 1px solid var(--linha); background: var(--branco); position: sticky; top: 0; z-index: 5; }
.seletor-emitente { display: flex; align-items: center; gap: 10px; min-width: 0; }
.seletor-emitente label { font-size: .82rem; color: var(--tinta-3); }
.seletor-emitente select { width: auto; max-width: 420px; font-weight: 600; padding: 7px 10px; }
.topo .doc { color: var(--tinta-3); font-size: .88rem; white-space: nowrap; }
.conteudo { padding: 28px 32px 64px; max-width: 1240px; width: 100%; }
.cabecalho { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.cabecalho p { color: var(--tinta-2); margin-top: 4px; }

.painel { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-painel); padding: 22px; }
.painel + .painel { margin-top: 18px; }
.painel > h2 { margin-bottom: 4px; }
.painel > .descricao { color: var(--tinta-2); font-size: .92rem; margin-bottom: 16px; }
.secao { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--linha-2); }
.secao > h3 { margin-bottom: 12px; }

/* ================================================================== emitir */
.emitir { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 28px; align-items: start; }
.emitir form { display: grid; gap: 18px; }
.emitir .lado { position: sticky; top: 86px; display: grid; gap: 14px; }
.valor-campo { position: relative; }
.valor-campo input { font-size: 1.35rem; font-weight: 650; padding-left: 42px; }
.valor-campo::before { content: "R$"; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); font-weight: 600; }
.escolha { display: grid; gap: 6px; }
.escolha-linha { display: flex; gap: 8px; }
.escolha-linha select { flex: 1; }
.resumo-tomador { font-size: .86rem; color: var(--tinta-2); }

/* ---------------------------------------------------------- a nota (prévia) */
.nota {
  position: relative; background: var(--branco); border-radius: 4px; box-shadow: var(--sombra-nota);
  padding: 26px 26px 22px; font-family: var(--doc); color: var(--tinta); overflow: hidden;
}
.nota::before { /* picote no topo, como um talão */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: radial-gradient(circle at 6px -2px, var(--papel) 5px, transparent 5.5px) 0 0 / 14px 6px repeat-x;
}
.nota header { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding-bottom: 14px; border-bottom: 1.5px solid var(--tinta); }
.nota .tipo { font-family: var(--ui); font-weight: 750; font-size: .95rem; letter-spacing: .02em; }
.nota .tipo small { display: block; font-weight: 500; font-size: .75rem; color: var(--tinta-3); letter-spacing: 0; }
.nota .numero { text-align: right; font-family: var(--ui); font-size: .78rem; color: var(--tinta-3); }
.nota .numero strong { display: block; font-size: 1.05rem; color: var(--tinta); }
.nota .bloco { padding: 12px 0; border-bottom: 1px dashed var(--linha); }
.nota .rotulo { font-family: var(--ui); font-size: .72rem; color: var(--tinta-3); font-weight: 600; }
.nota .nome { font-size: 1.05rem; line-height: 1.3; }
.nota .doc { font-family: var(--ui); font-size: .82rem; color: var(--tinta-2); }
.nota .discriminacao { font-size: .98rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; min-height: 3em; }
.nota .vazio { color: #b3bbca; font-style: italic; }
.nota .total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; }
.nota .total .valor { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; }
.nota .detalhes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; padding: 12px 0 0; font-family: var(--ui); font-size: .82rem; }
.nota .detalhes dt { color: var(--tinta-3); font-size: .72rem; font-weight: 600; }
.nota .detalhes dd { margin: 0; }

.carimbo {
  position: absolute; right: 22px; top: 92px; transform: rotate(-9deg);
  font-family: var(--ui); font-weight: 800; font-size: .95rem; letter-spacing: .04em; text-align: center;
  border: 3px solid currentColor; border-radius: 8px; padding: 6px 14px 5px; line-height: 1.15;
  background: rgba(255, 255, 255, .82); pointer-events: none;
}
.carimbo small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .02em; }
.carimbo.rascunho { color: #aab3c4; border-style: dashed; }
.carimbo.fila { color: var(--ambar); }
.carimbo.autorizada { color: var(--carimbo); animation: carimbar .32s cubic-bezier(.2, 1.4, .4, 1) both; }
.carimbo.recusada { color: var(--erro); animation: carimbar .32s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes carimbar { from { transform: rotate(-9deg) scale(1.9); opacity: 0; } to { transform: rotate(-9deg) scale(1); opacity: 1; } }
.carimbo.fila::after { content: ""; display: block; height: 2px; margin-top: 4px; background: currentColor; animation: fila 1.1s ease-in-out infinite; transform-origin: left; }
@keyframes fila { 0% { transform: scaleX(.1); } 50% { transform: scaleX(1); } 100% { transform: scaleX(.1); } }

/* ================================================================== listas */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
.filtros .campo { min-width: 150px; }
.filtros .busca { flex: 1; min-width: 220px; }
.tabela-envoltorio { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-painel); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; font-weight: 600; font-size: .8rem; color: var(--tinta-3); padding: 10px 14px; border-bottom: 1px solid var(--linha); white-space: nowrap; background: #fafbfd; }
td { padding: 11px 14px; border-bottom: 1px solid var(--linha-2); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clicavel { cursor: pointer; }
tbody tr.clicavel:hover { background: #f8f9fc; }
td.num, th.num { text-align: right; }
td .secundario { color: var(--tinta-3); font-size: .82rem; }
.inativo td { color: var(--tinta-3); }
.vazio-lista { padding: 48px 24px; text-align: center; color: var(--tinta-2); display: grid; gap: 12px; justify-items: center; }
.paginacao { display: flex; justify-content: space-between; align-items: center; padding: 12px 2px; color: var(--tinta-3); font-size: .88rem; }

.situacao { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.situacao::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.situacao.issued, .situacao.emailed { color: var(--carimbo); background: var(--carimbo-claro); }
.situacao.pending, .situacao.processing { color: var(--ambar); background: var(--ambar-claro); }
.situacao.failed, .situacao.configuration_required { color: var(--erro); background: var(--erro-claro); }
.situacao.cancelled { color: var(--tinta-3); background: var(--linha-2); }
/* Monitor Fiscal */
.situacao.normal, .situacao.confirmada { color: var(--carimbo); background: var(--carimbo-claro); }
.situacao.cancelada, .situacao.substituida { color: var(--tinta-3); background: var(--linha-2); }
.situacao.analise_cancelamento, .situacao.enviando, .situacao.falha { color: var(--ambar); background: var(--ambar-claro); }
.situacao.bloqueada, .situacao.rejeitada, .situacao.rejeitado { color: var(--erro); background: var(--erro-claro); }
.situacao.registrado { color: var(--carimbo); background: var(--carimbo-claro); }
.situacao.nao_registrado { color: var(--tinta-3); background: var(--linha-2); }
.papel { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .02em; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; }
.papel.prestador { color: var(--caneta-escura); background: var(--caneta-clara); }
.papel.tomador { color: #6b3d05; background: var(--ambar-claro); }
.papel.intermediario, .papel.terceiro { color: var(--tinta-2); background: var(--linha-2); }
.sincronizacao { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: .85rem; color: var(--tinta-2); margin: -10px 0 16px; }
.sincronizacao .erro { color: var(--erro); }
.linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.linha-tempo li { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-campo); padding: 10px 12px; display: grid; gap: 4px; font-size: .88rem; }
.linha-tempo li .topo-evento { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.linha-tempo small { color: var(--tinta-3); }
.dados-nota { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: .88rem; margin: 0; }
.dados-nota dd { margin: 0; word-break: break-word; }
.dados-nota dt { color: var(--tinta-3); }
.acao-evento { display: grid; gap: 12px; }

/* gaveta de detalhes */
.gaveta-fundo { position: fixed; inset: 0; background: rgba(22, 33, 58, .32); z-index: 20; opacity: 0; transition: opacity .18s; }
.gaveta-fundo.aberta { opacity: 1; }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: var(--papel); z-index: 21; overflow-y: auto; padding: 22px; transform: translateX(100%); transition: transform .22s ease; display: grid; gap: 16px; align-content: start; grid-auto-rows: max-content; }
.gaveta.aberta { transform: none; }
.gaveta .topo-gaveta { display: flex; justify-content: space-between; align-items: center; }
.gaveta .nota { box-shadow: 0 1px 2px rgba(22, 33, 58, .06), 0 6px 18px -10px rgba(22, 33, 58, .25); }

/* autocomplete de município */
.auto { position: relative; }
.auto ul { position: absolute; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-campo); box-shadow: 0 8px 24px -8px rgba(22, 33, 58, .25); z-index: 10; max-height: 260px; overflow-y: auto; }
.auto li { padding: 7px 10px; border-radius: 4px; cursor: pointer; }
.auto li:hover, .auto li[aria-selected=true] { background: var(--caneta-clara); }

/* certificado */
.cert { display: flex; gap: 16px; align-items: center; padding: 14px; border: 1px solid var(--linha); border-radius: var(--r-campo); }
.cert .icone { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; flex: none; }
.cert.valido .icone { background: var(--carimbo-claro); color: var(--carimbo); }
.cert.vencendo .icone { background: var(--ambar-claro); color: var(--ambar); }
.cert.ausente .icone, .cert.vencido .icone { background: var(--erro-claro); color: var(--erro); }
.cert small { color: var(--tinta-3); display: block; }

details.extra { border-top: 1px solid var(--linha-2); padding-top: 12px; }
details.extra summary { cursor: pointer; font-weight: 600; color: var(--tinta-2); font-size: .92rem; }
details.extra[open] summary { margin-bottom: 12px; }

/* ================================================================== plano do cliente */
.uso-plano { font-size: .84rem; color: var(--tinta-2); text-decoration: none; padding: 5px 10px; border: 1px solid var(--linha); border-radius: 999px; white-space: nowrap; }
.uso-plano:hover { border-color: var(--caneta); color: var(--caneta); }
.faixa-plano:empty { display: none; }
.faixa-plano { padding: 14px 32px 0; max-width: 1240px; }
.aviso-plano { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.aviso-plano .botao { padding: 6px 12px; font-size: .88rem; }

.grade-planos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.cartao-plano { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-painel); padding: 18px; display: grid; gap: 10px; align-content: start; }
.cartao-plano.atual { border-color: var(--caneta); box-shadow: 0 0 0 3px var(--caneta-clara); }
.cartao-plano header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cartao-plano .preco { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.cartao-plano .preco small { font-size: .85rem; font-weight: 500; color: var(--tinta-3); margin-left: 2px; }
.cartao-plano ul { margin: 0; padding-left: 18px; color: var(--tinta-2); font-size: .9rem; display: grid; gap: 2px; }
.cartao-plano .motivo { color: var(--tinta-3); font-size: .82rem; }
.selo-atual { font-size: .72rem; font-weight: 700; color: var(--caneta-escura); background: var(--caneta-clara); padding: 2px 8px; border-radius: 999px; }

.plano-resumo { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 24px; align-items: center; }
.plano-resumo h2 { font-size: 1.5rem; margin: 2px 0; }
.plano-resumo p { color: var(--tinta-2); }
.rotulo-plano { font-size: .78rem; font-weight: 600; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; }
.usos { display: grid; gap: 14px; }
.uso-topo { display: flex; justify-content: space-between; font-size: .88rem; color: var(--tinta-2); margin-bottom: 6px; }
.uso-topo strong { color: var(--tinta); }
.barra { height: 8px; background: var(--linha-2); border-radius: 999px; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--caneta); border-radius: inherit; transition: width .3s; }
.barra.quase i { background: var(--ambar); }
.barra.cheia i { background: var(--erro); }

/* janela modal (popup do limite e aceite) */
.modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -46%); opacity: 0; transition: opacity .18s, transform .18s;
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; background: var(--papel);
  border-radius: var(--r-painel); padding: 22px; z-index: 21; display: grid; gap: 14px; box-shadow: 0 24px 64px -20px rgba(22, 33, 58, .45); }
.modal.aberta { opacity: 1; transform: translate(-50%, -50%); }
.modal .topo-gaveta { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.modal .uso-linha { color: var(--tinta-2); font-size: .9rem; }
.modal .rodape-modal { justify-content: flex-end; }
.modal form { display: grid; gap: 12px; }
.aceite { display: flex; gap: 10px; align-items: flex-start; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-campo); padding: 12px 14px; cursor: pointer; font-size: .92rem; line-height: 1.45; }
.aceite input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--caneta); }
.registro { font-size: .8rem; color: var(--tinta-3); }

/* ================================================================== responsivo */
@media (max-width: 1080px) {
  .emitir { grid-template-columns: 1fr; }
  .emitir .lado { position: static; }
}
@media (max-width: 860px) {
  .entrada { grid-template-columns: 1fr; }
  .entrada-palco { display: none; }
  .entrada-form { padding: 32px 24px; border-right: 0; }
  .app { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; gap: 6px; }
  .lateral .marca { align-self: center; padding: 4px 8px; margin: 0 6px 0 0; }
  .lateral .marca img { width: auto; height: 30px; }
  .lateral nav { display: flex; flex-wrap: wrap; gap: 2px; }
  .lateral nav a.primario { margin: 0; }
  .lateral .pe, .ambiente { display: none; }
  .topo { padding: 12px 16px; flex-wrap: wrap; position: static; }
  .conteudo { padding: 20px 16px 48px; }
  .faixa-plano { padding: 12px 16px 0; }
  .plano-resumo { grid-template-columns: 1fr; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}