/* ---- Menu "mais ações" na linha (25/09/2026) ----------------------- */
/* <details> em vez de JavaScript: fecha com Esc, funciona com teclado e
   nao precisa de codigo para abrir/fechar. */
.menu-acoes {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
.menu-acoes > summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 10px;
  border: 1px solid var(--cor-secundario-borda);
  border-radius: var(--raio-campo);
  background: var(--cor-secundario-fundo);
  color: var(--cor-texto-secundario);
  font-weight: 700;
  line-height: 1;
  user-select: none;
}
.menu-acoes > summary::-webkit-details-marker {
  display: none;
}
.menu-acoes > summary:hover {
  background: var(--cor-secundario-fundo-hover);
}
.menu-acoes[open] > summary {
  border-color: var(--cor-acento);
}
.menu-acoes-lista {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
  max-width: min(260px, calc(100vw - 32px));
  padding: 6px;
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-campo);
  box-shadow: var(--sombra-cartao);
}
.menu-acoes-lista button {
  width: 100%;
  text-align: left;
  white-space: nowrap;
}
/* No modo cartao a linha vira bloco: o menu abre no fluxo, sem flutuar
   sobre o cartao seguinte. */
.tabela-em-cartoes .menu-acoes-lista {
  position: static;
  min-width: 0;
  max-width: none;
  box-shadow: none;
  margin-top: 6px;
}

/* ---- Atalhos da barra lateral (25/09/2026) ------------------------- */
.nav-atalhos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.nav-atalho {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--raio-campo);
  background: transparent;
  color: var(--cor-nav-texto, rgba(255, 255, 255, 0.78));
  font: inherit;
  font-size: var(--fs-base);
  text-align: left;
  cursor: pointer;
}
.nav-atalho:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
/* Os dois de emissão puxam a atenção: são o que se faz o dia inteiro. */
.nav-atalho-forte {
  font-weight: 600;
  color: #fff;
}
.nav-atalho-forte .nav-icone {
  color: var(--cor-acento);
}
.nav-atalho:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: -2px;
}

/* Realce de quem chegou por atalho: sem ele o usuário cai na tela certa
   sem saber qual dos blocos é o que pediu. Dura ~1,5s e some. */
.bloco-em-destaque {
  animation: destacar-bloco 1.6s ease-out;
  border-radius: var(--raio-cartao);
}
@keyframes destacar-bloco {
  0%,
  40% {
    box-shadow: 0 0 0 3px var(--cor-acento);
  }
  100% {
    box-shadow: 0 0 0 3px transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bloco-em-destaque {
    animation: none;
    box-shadow: 0 0 0 3px var(--cor-acento);
  }
}

/* O atributo hidden tem que vencer o display das classes (25/09/2026).
   Sem isto, .campo-filtro{display:flex} e companhia faziam o elemento
   aparecer mesmo marcado como oculto - ver comentario longo no commit.
   [hidden] sempre vence, incluindo display:flex, grid, etc. */
[hidden] {
  display: none !important;
  visibility: hidden !important;
}

/* Aviso sem texto nao desenha caixa. `#notas-empresa-ativa` e
   `#relatorio-empresa-ativa` sao preenchidos por JavaScript quando ha
   empresa ativa; ate la ficavam como um retangulo amarelo vazio no meio da
   tela, sem dizer nada a ninguem. */
.aviso:empty {
  display: none;
}

/* ---- Selecao em lote (25/09/2026) ---------------------------------- */
.col-selecao {
  width: 36px;
  text-align: center;
  padding-right: 0 !important;
}
.col-selecao input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin: 0;
  display: inline-block;
  cursor: pointer;
  accent-color: var(--cor-acento);
}
/* Linha selecionada fica visivel sem depender so do quadradinho. */
tr.linha-selecionada > td {
  background: var(--cor-acento-fundo);
}

/* Barra fixa no rodape - so aparece com algo selecionado. Fica acima da
   area de gestos do celular (safe-area). */
.barra-selecao {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-popover);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--cor-fundo-cartao);
  border-top: 1px solid var(--cor-borda);
  box-shadow: 0 -6px 20px -12px rgba(20, 33, 61, 0.35);
}
.barra-selecao[hidden] {
  display: none;
}
.barra-selecao-conta {
  font-weight: 600;
  margin-right: auto;
  min-width: 0;
}
.btn-perigo {
  background: var(--cor-erro, #b3261e);
  border-color: var(--cor-erro, #b3261e);
  color: #fff;
}
.btn-perigo:hover {
  filter: brightness(1.08);
}
/* Lista do que sera excluido, dentro do modal - rola se for longa, para o
   modal nao crescer sem fim. */
.lista-confirmacao {
  max-height: 180px;
  overflow-y: auto;
  margin: 10px 0;
  padding: 8px 10px;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-campo);
  font-size: var(--fs-sm);
}
.lista-confirmacao div {
  padding: 2px 0;
}

/* ---- Tabela que nao cabe vira lista de cartoes (25/09/2026) ----
   Medido: a tabela de Notas Emitidas tem 8 colunas e, mesmo quebrando tudo
   ao maximo, precisa de 870px; a de Notas Rejeitadas tem 11 colunas e
   precisa de 1120px. Numa coluna de conteudo de 302px (celular) nao existe
   ajuste de fonte ou de quebra que faca caber - a unica saida honesta e a
   linha deixar de ser linha.

   Cada registro vira um bloco, e cada celula uma dupla "rotulo: valor". O
   rotulo vem do cabecalho da propria tabela, copiado para data-rotulo, entao
   isto funciona em qualquer tabela do sistema sem tocar em cada uma. */
.tabela-scroll.tabela-em-cartoes {
  overflow-x: visible;
  background: transparent;
}
.tabela-em-cartoes table,
.tabela-em-cartoes tbody,
.tabela-em-cartoes tr,
.tabela-em-cartoes td {
  display: block;
  width: auto;
  min-width: 0;
}
/* O cabecalho some: cada celula passa a carregar o proprio rotulo. */
.tabela-em-cartoes thead {
  display: none;
}
.tabela-em-cartoes tbody tr {
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-cartao);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.tabela-em-cartoes tbody tr:last-child {
  margin-bottom: 0;
}
.tabela-em-cartoes td {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 5px 0;
  border: 0;
  /* A borda entre celulas vira um filete discreto entre as duplas. */
  border-bottom: 1px solid var(--cor-borda-suave);
}
.tabela-em-cartoes td:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.tabela-em-cartoes td:first-child {
  padding-top: 0;
}
.tabela-em-cartoes td::before {
  content: attr(data-rotulo);
  flex: 0 0 auto;
  min-width: 88px;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}
/* Celula sem rotulo (cabecalho vazio, como a coluna de acoes) nao mostra
   o traco do ::before. */
.tabela-em-cartoes td:not([data-rotulo])::before,
.tabela-em-cartoes td[data-rotulo=""]::before {
  display: none;
}
/* O valor ocupa o resto e pode quebrar - chave de acesso, razao social. */
.tabela-em-cartoes td > * {
  min-width: 0;
}
.tabela-em-cartoes td {
  word-break: break-word;
}
/* Acoes: os botoes ficam lado a lado, quebrando quando preciso. */
.tabela-em-cartoes td.col-acoes {
  text-align: left;
  gap: 8px;
  padding-top: 10px;
}
.tabela-em-cartoes td.col-acoes button,
.tabela-em-cartoes td.col-acoes a {
  width: auto;
}
/* A caixa de selecao no modo cartao vai para o topo do bloco, com o texto
   ao lado - um quadradinho solto sem rotulo nao se explica. */
.tabela-em-cartoes td.col-selecao {
  width: auto;
  text-align: left;
  padding-bottom: 8px;
}
.tabela-em-cartoes td.col-selecao::before {
  content: 'Selecionar';
  min-width: 0;
}

/* Em cartao a celula ocupa a largura toda e o texto QUEBRA, em vez de ser
   cortado. Os limites abaixo foram escritos para COLUNA de tabela e nao
   valem aqui: max-width recortava a razao social, nowrap impedia a quebra e
   text-align:right jogava as acoes para a borda. */
.tabela-em-cartoes td.celula-parte,
.tabela-em-cartoes td.celula-data,
.tabela-em-cartoes td.celula-tipo,
.tabela-em-cartoes td.celula-chave,
.tabela-em-cartoes td.celula-doc,
.tabela-em-cartoes td.celula-acoes {
  max-width: none;
  width: auto;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  text-align: left;
}

/* Collapse inteligente em modo card: registros longos ficam recolhíveis
   (07/10/2026 - recomendação de auditoria) para não ficar denso demais
   em telas pequenas. Aplica a tabelas com muitas colunas. */
.tabela-em-cartoes tbody tr {
  position: relative;
  cursor: pointer;
}
.tabela-em-cartoes tbody tr.pode-expandir::after {
  content: "▼";
  position: absolute;
  right: 14px;
  top: 12px;
  font-size: var(--fs-micro);
  color: var(--cor-texto-suave);
  opacity: 0.6;
  pointer-events: none;
}

/* Linha de estado vazio ("Nenhuma nota...") nao vira cartao. */
.tabela-em-cartoes td.estado-vazio {
  border: 0;
  text-align: center;
}
.tabela-em-cartoes td.estado-vazio::before {
  display: none;
}

table {
  width: 100%;
  min-width: max-content;
  border-collapse: collapse;
  font-size: var(--fs-base);
}

table th, table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cor-borda-suave);
}

/* Cabeçalho de tabela discreto e maiúsculo (redesenho 3/4). */
thead th {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  border-bottom: 1px solid var(--cor-borda);
}
tbody tr:hover td {
  background: var(--cor-fundo);
}

/* Chip de situação (Notas Recentes) - ponto colorido + rótulo. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.chip-ponto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.chip-navy {
  color: var(--cor-primaria);
  background: var(--cor-secundario-fundo);
  border-color: var(--cor-secundario-borda);
}
.chip-info {
  color: var(--cor-chip-info-texto);
  background: var(--cor-chip-info-fundo);
  border-color: var(--cor-chip-info-borda);
}
.chip-ok {
  color: var(--cor-acento-forte);
  background: var(--cor-acento-fundo);
  border-color: var(--cor-acento-borda);
}
.chip-erro {
  color: var(--cor-erro-texto);
  background: var(--cor-erro-fundo);
  border-color: var(--cor-erro-borda);
}
.chip-neutro {
  color: var(--cor-texto-suave);
  background: var(--cor-secundario-fundo);
  border-color: var(--cor-borda);
}
/* "Rejeitada - pronta p/ retransmissão" (17/09/2026, Notas Rejeitadas) -
   diferente de "aguardando correção" (chip-erro): o dado está certo, só
   precisa reenviar o mesmo XML. */
.chip-aviso {
  color: var(--cor-aviso-texto);
  background: var(--cor-aviso-fundo);
  border-color: var(--cor-aviso-borda);
}

/* Células da linha de nota (Notas Recentes / busca no Relatório). */
.celula-data {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.celula-tipo {
  font-weight: 600;
  color: var(--cor-texto);
  white-space: nowrap;
}
.celula-chave.celula-chave-inteira {
  white-space: normal;
  word-break: break-all;
  line-height: 1.35;
}
.celula-chave {
  font-family: var(--fonte-mono);
  font-size: var(--fs-xs);
  letter-spacing: -0.2px;
  color: var(--cor-texto-secundario);
  white-space: nowrap;
}
.celula-doc a {
  font-weight: 600;
  color: var(--cor-destaque);
  margin-right: 12px;
  white-space: nowrap;
}
.celula-acoes {
  text-align: right;
  white-space: nowrap;
}

/* Menu "Mais ações" das linhas de notas */
.menu-acoes {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
}
.menu-acoes-botao {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--cor-secundario-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-secundario-fundo);
  color: var(--cor-destaque);
  cursor: pointer;
  fill: currentColor;
}
.menu-acoes-botao::-webkit-details-marker {
  display: none;
}
.menu-acoes-botao:hover,
.menu-acoes[open] > .menu-acoes-botao {
  background: var(--cor-secundario-fundo-hover);
}
.menu-acoes-lista {
  position: fixed;
  z-index: var(--z-popover);
  display: flex;
  flex-direction: column;
  min-width: 190px;
  padding: 6px;
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  box-shadow: var(--sombra-flutuante);
  text-align: left;
}
.menu-acoes-lista button {
  margin: 0;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 9px 12px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--cor-texto);
  border-radius: var(--raio-campo);
  cursor: pointer;
}
.menu-acoes-lista button:hover {
  background: var(--cor-secundario-fundo-hover);
}
.menu-acoes-lista .btn-cancelar-nota {
  color: var(--cor-erro-texto);
}
.menu-acoes-lista .btn-cancelar-nota:hover {
  background: var(--cor-erro-fundo);
}
.col-acoes {
  text-align: right;
}

/* Notas Recentes: a tabela tem 7 colunas. Sem min-width: max-content ela se
   ajusta ao espaço; a chave de acesso agora vem resumida (começo…fim, valor
   inteiro no title - ver celulaChaveHtml), então não precisa mais quebrar
   caractere a caractere pra evitar rolagem horizontal. */
@media (min-width: 721px) {
  #secao-notas .tabela-scroll > table {
    min-width: 0;
  }
  /* Sem clip/hidden no body: a pagina cabe de verdade (ver o cabecalho no
     bloco de celular). Cortar o excesso escondia o defeito E o conteudo. */

  /* Notas Recentes cabe na tela: a lista rola DENTRO da própria caixa, a
     janela não precisa rolar. Cabeçalho fixo ao rolar a lista. */
  #secao-notas .tabela-scroll {
    max-height: calc(100vh - 230px);
    overflow-y: auto;
  }
  #secao-notas thead th {
    position: sticky;
    top: 0;
    background: var(--cor-fundo-cartao);
    z-index: var(--z-conteudo);
  }
  #secao-notas td {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* Emitente / Destinatário (Notas Recentes) numa linha só - nome completo no
   title ao passar o mouse. Sem isso "GLEICIANE ROCHA CABRAL DE FREITAS LTDA"
   quebra em 4 linhas e estica a linha da tabela. */
.celula-parte {
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.card {
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-campo);
  padding: 16px 18px;
  box-shadow: var(--sombra-cartao);
}

.card .rotulo {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--cor-texto-suave);
  margin-bottom: 8px;
}

.card .valor {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sugestoes-ncm {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-campo);
  box-shadow: var(--sombra-flutuante);
  max-height: 220px;
  overflow-y: auto;
}

.sugestoes-ncm:empty {
  display: none;
}

.sugestoes-ncm div {
  padding: 6px 8px;
  font-size: var(--fs-xs);
  cursor: pointer;
  border-bottom: 1px solid var(--cor-borda-suave);
}

.sugestoes-ncm div:hover {
  background: var(--cor-secundario-fundo);
}

.sugestoes-ncm .ncm-codigo {
  font-weight: bold;
  color: var(--cor-destaque);
}

/* Lista de produtos na linha de item (Emitir) - descrição completa em
   destaque, sem cortar; o NCM fica discreto ao lado. */
.sugestoes-ncm .sugestao-descricao {
  color: var(--cor-texto);
}
.sugestoes-ncm small {
  color: var(--cor-texto-suave);
}
#sugestoes-produto-flutuante div {
  font-size: var(--fs-sm);
  line-height: 1.4;
  white-space: normal;
}

/* Variante flutuante: usada pela busca de produtos salvos nas linhas de
   item (Emitir), onde nao ha um ancestral com position:relative pronto -
   posicionada via JS (getBoundingClientRect do campo ativo) em vez de
   herdar a posicao de um container pai. */
.sugestoes-flutuante {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
}

.linha-com-botao {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

.linha-com-botao input {
  flex: 1;
}

.linha-com-botao button {
  margin-top: 2px;
  white-space: nowrap;
}

#resultado-cliente, #resultado-produto, #resultado-busca-cnpj-nfe:not(:empty), #resultado-cancelamento:not(:empty), #resultado-certificado:not(:empty), #status-certificado:not(:empty), #resultado-configuracoes-emitente:not(:empty), #resultado-dados-cadastrais:not(:empty), #resultado-trocar-senha:not(:empty), #resultado-esqueci-senha:not(:empty), #resultado-redefinir-senha:not(:empty) {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: var(--fs-base);
}

#resultado-cliente.sucesso, #resultado-produto.sucesso, #resultado-busca-cnpj-nfe.sucesso, #resultado-cancelamento.sucesso, #resultado-certificado.sucesso, #status-certificado.sucesso, #resultado-configuracoes-emitente.sucesso, #resultado-dados-cadastrais.sucesso, #resultado-trocar-senha.sucesso, #resultado-esqueci-senha.sucesso, #resultado-redefinir-senha.sucesso {
  background: var(--cor-sucesso-fundo);
  color: var(--cor-sucesso-texto);
  border: 1px solid var(--cor-sucesso-borda);
}

#resultado-cliente.erro, #resultado-produto.erro, #resultado-busca-cnpj-nfe.erro, #resultado-cancelamento.erro, #resultado-certificado.erro, #status-certificado.erro, #aviso-certificado.erro, #resultado-configuracoes-emitente.erro, #resultado-dados-cadastrais.erro, #resultado-trocar-senha.erro, #resultado-esqueci-senha.erro, #resultado-redefinir-senha.erro {
  background: var(--cor-erro-fundo);
  color: var(--cor-erro-texto);
  border: 1px solid var(--cor-erro-borda);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-topo);
}

.modal-caixa {
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-cartao);
  padding: 22px;
  max-width: 420px;
  width: 90%;
  box-shadow: var(--sombra-modal);
}

.modal-caixa p {
  margin-top: 0;
  font-size: var(--fs-base);
  color: var(--cor-texto);
}

.modal-caixa .linha-botoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.aviso {
  background: var(--cor-aviso-fundo);
  border: 1px solid var(--cor-aviso-borda);
  color: var(--cor-aviso-texto);
  padding: 10px 14px;
  border-radius: var(--raio-campo);
  font-size: var(--fs-sm);
  margin-bottom: 16px;
}
/* Faixa informativa (explicação, contexto da empresa ativa). Âmbar (.aviso) fica
   só para o que pede atenção: ambiente, pendência, erro. */
.aviso.aviso-info {
  background: var(--cor-secundario-fundo);
  border-color: var(--cor-secundario-borda);
  color: var(--cor-texto-secundario);
}

/* Separa sub-áreas dentro de uma mesma aba (16/08/2026) - Produtos e
   Tributação compartilham a aba "Produtos / Tributação"; Configurações
   (18/08/2026) reaproveita o mesmo padrão para Emitente/Numeração/Preferências. */
.divisoria-secao {
  border: none;
  border-top: 1px solid var(--cor-borda);
  margin: 32px 0;
}

/* Stepper do formulário de emissão (Emitente/Destinatário/Itens/Operação/
   Revisão, 24/08/2026) - navegação puramente visual em cima do mesmo
   <form> de sempre (nomes de campo intactos); [data-passo] some/aparece via
   JS (ver mostrarPassoNfe em app.js). Nenhum campo perde `required` ao
   ficar oculto porque cada passo só é validado quando é a etapa ativa
   (validarPassoAtualNfe), então o navegador nunca tenta focar um campo
   `required` escondido de um passo anterior. */
[data-passo] {
  display: none;
}
[data-passo].passo-ativo {
  display: block;
}

/* Stepper (redesenho 3/4) - passou das "pílulas" numeradas para pontos
   ligados por um traço: etapa concluída vira um check esmeralda, a atual
   fica em azul-marinho, as próximas ficam apagadas. Só HTML + CSS - o
   mostrarPassoNfe continua só alternando .passo-atual / .passo-concluido. */
.stepper-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin-bottom: 24px;
}

.stepper-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 6px;
  border: none;
  background: transparent;
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.stepper-num {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--cor-input-borda);
  background: var(--cor-fundo-cartao);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  color: var(--cor-texto-suave);
}

.stepper-item:not(:last-child)::after {
  content: "";
  flex: none;
  width: 34px;
  height: 1.5px;
  margin: 0 6px;
  background: var(--cor-input-borda);
}

.stepper-item.passo-atual .stepper-num {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: var(--cor-primaria-texto);
}
.stepper-item.passo-atual .stepper-rot {
  color: var(--cor-texto);
  font-weight: 600;
}

.stepper-item.passo-concluido .stepper-num {
  background: var(--cor-acento);
  border-color: var(--cor-acento);
  font-size: 0;
}
.stepper-item.passo-concluido .stepper-num::before {
  content: "\2713";
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #ffffff;
}
.stepper-item.passo-concluido .stepper-rot {
  color: var(--cor-texto-secundario);
}
.stepper-item.passo-concluido::after {
  background: var(--cor-acento);
}

.stepper-navegacao {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--cor-borda-suave);
}

/* Avançar etapa = ação positiva -> acento esmeralda (o "Voltar" fica
   discreto). Só cor; app.js continua alternando display/visibility. */
#nfe-passo-continuar {
  background: var(--cor-acao-fundo);
  color: var(--cor-acao-texto);
  border-color: var(--cor-acao-fundo);
}
#nfe-passo-continuar:hover {
  background: var(--cor-acao-fundo-hover);
  border-color: var(--cor-acao-fundo-hover);
}

/* Resumo da nota ao vivo (redesenho 4/4) - painel à direita do formulário
   de NF-e que acompanha o preenchimento. Abaixo de 1100px vai pro topo,
   em largura cheia. */
.nfe-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
.nfe-passos {
  min-width: 0;
}

.nfe-resumo {
  position: sticky;
  top: calc(var(--altura-topo, 56px) + 20px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
  padding: 16px 18px;
}
.resumo-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--cor-texto);
}
.resumo-linhas {
  margin: 2px 0 0;
}
.resumo-linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: var(--fs-sm);
  color: var(--cor-texto-secundario);
}
.resumo-linha dt {
  margin: 0;
}
.resumo-linha dd {
  margin: 0;
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto);
}
.resumo-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--cor-borda-suave);
}
.resumo-total span {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--cor-texto-suave);
}
.resumo-total strong {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--fs-xl);
  letter-spacing: 0.3px;
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums;
}
.resumo-estado {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--cor-texto-suave);
  min-height: 1.2em;
}
.resumo-partes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--cor-borda-suave);
}
.resumo-parte {
  font-size: var(--fs-xs);
  color: var(--cor-texto-secundario);
}
.resumo-parte b {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cor-texto-suave);
  margin-bottom: 2px;
}
.resumo-previa {
  display: block;
  margin-top: 4px;
  padding: 9px 14px;
  text-align: center;
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--raio-controle);
  background: var(--cor-secundario-fundo);
  color: var(--cor-destaque);
  border: 1px solid var(--cor-secundario-borda);
  cursor: pointer;
}
.resumo-previa:hover {
  background: var(--cor-secundario-fundo-hover);
}
.resumo-previa[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

@media (max-width: 1099px) {
  .nfe-corpo {
    grid-template-columns: 1fr;
  }
  .nfe-resumo {
    position: static;
    order: -1;
  }
}

.cartao-revisao {
  background: var(--cor-secundario-fundo);
  border: 1px solid var(--cor-secundario-borda);
  border-radius: var(--raio-cartao);
  padding: 16px 18px;
  margin: 16px 0;
  font-size: var(--fs-base);
}

.cartao-revisao table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.cartao-revisao th,
.cartao-revisao td {
  text-align: left;
  padding: 4px 8px;
  font-size: var(--fs-sm);
}

.cartao-revisao .linha-total {
  font-weight: 600;
  border-top: 1px solid var(--cor-secundario-borda);
}


/* Prévia da nota (aba Emitir, passo Revisão): totais e link com o mesmo
   acabamento dos botões, em vez de texto solto e link azul do navegador. */
.previa-totais {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin-top: 8px;
  font-size: var(--fs-sm);
  color: var(--cor-texto-secundario);
  font-variant-numeric: tabular-nums;
}
.previa-link {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 14px;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--raio-controle);
  background: var(--cor-secundario-fundo);
  color: var(--cor-destaque);
  border: 1px solid var(--cor-secundario-borda);
}
.previa-link:hover {
  background: var(--cor-secundario-fundo-hover);
}
.previa-aviso {
  margin-top: 12px;
}