/*
  Site da aplicação do NuvDocs: CSS próprio das telas, no template Fluxo (spec interfaces/web, "Visual").
  Os tokens, a fonte, o topo, os cartões, as etapas, as situações e os ajustes do MudBlazor vêm de
  _content/nuvdocs.visual/fluxo.css, carregado antes deste arquivo. Aqui ficam só a moldura do site, os grupos dos
  formulários, o envio de arquivo e os botões das linhas das listas. Regras: usável a partir de 360 px, área de toque
  de pelo menos 44 px, foco sempre visível e respeito a quem pede menos movimento.
*/

body {
  overflow-wrap: anywhere;
}

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.92em;
}

h1:focus,
.conteudo:focus,
.cartao:focus {
  outline: none;
}

h2 {
  margin-top: var(--espaco-6);
}

h1 + h2,
.cartao > h2:first-child,
.titulo-da-janela {
  margin-top: 0;
}

.pular {
  position: absolute;
  top: -4rem;
  left: var(--espaco-2);
  z-index: 1500;
  padding: var(--espaco-3) var(--espaco-4);
  background: var(--superficie);
  border-radius: var(--raio-do-campo);
}

.pular:focus {
  top: var(--espaco-2);
}

/* ---------- Moldura com sessão: topo branco do Fluxo ---------- */
.site .topo {
  position: relative;
  display: block;
  padding: 0;
}

.topo-interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2) var(--espaco-5);
  max-width: var(--largura-do-conteudo);
  min-height: 68px;
  margin: 0 auto;
  padding: var(--espaco-2) var(--espaco-6);
}

.menu-principal {
  flex: 1 1 auto;
}

.ferramentas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2) var(--espaco-3);
  margin-left: auto;
}

.botao-da-conta {
  width: var(--altura-minima-clicavel);
  height: var(--altura-minima-clicavel);
  min-height: var(--altura-minima-clicavel);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--marca-clara);
  color: var(--link);
  font-weight: 800;
}

.botao-da-conta:hover,
.botao-da-conta[aria-expanded="true"] {
  background: var(--marca);
  color: var(--texto-sobre-a-marca);
}

.menu-da-conta {
  display: none;
  position: absolute;
  top: 100%;
  right: max(var(--espaco-4), calc((100% - var(--largura-do-conteudo)) / 2 + var(--espaco-6)));
  z-index: 1300;
  width: min(720px, calc(100% - 32px));
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  padding: var(--espaco-5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-do-cartao);
  box-shadow: 0 16px 40px rgba(16, 42, 39, 0.14);
}

.menu-da-conta.aberto {
  display: block;
}

/* Área transparente atrás do menu da conta aberto: o clique fora do menu fecha o menu. Fica logo abaixo do menu. */
.fora-do-menu-da-conta {
  position: fixed;
  inset: 0;
  z-index: 1299;
}

/* Janela da volta para produção (componentes/SeletorDeAmbiente), aberta de dentro do menu da conta. */
.janela-do-ambiente {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espaco-5);
  background: rgba(16, 42, 39, 0.5);
}

.caixa-do-ambiente {
  width: min(520px, 100%);
  max-height: calc(100dvh - 2 * var(--espaco-5));
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border-radius: var(--raio-da-janela);
  box-shadow: 0 24px 60px rgba(16, 42, 39, 0.28);
}

.caixa-do-ambiente .cabecalho-da-janela {
  padding: var(--espaco-4) var(--espaco-5);
  border-bottom: 1px solid var(--borda);
}

.caixa-do-ambiente .corpo-da-janela {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--espaco-4) var(--espaco-5);
}

.caixa-do-ambiente .rodape-da-janela {
  flex-wrap: nowrap;
  justify-content: flex-end;
  padding: var(--espaco-3) var(--espaco-5);
  border-top: 1px solid var(--borda);
}

.dados-da-sessao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2) var(--espaco-4);
  padding-bottom: var(--espaco-4);
  border-bottom: 1px solid var(--borda);
}

.dados-da-sessao .usuario {
  flex: 1 1 100%;
  font-weight: 800;
}

.dados-da-sessao .botao-sair {
  margin-left: auto;
}

.seletor-de-ambiente,
.troca-de-conta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-1);
}

.troca-de-conta .falha {
  flex-basis: 100%;
}

/* Grupos do menu da conta: cada grupo é um bloco com fundo próprio, título escuro e itens recuados. Colunas em vez de
   grade, para um grupo longo não abrir buracos ao lado dos curtos. */
.grupos-do-menu {
  columns: 13rem 3;
  column-gap: var(--espaco-3);
  padding-top: var(--espaco-4);
}

.grupo-do-menu {
  break-inside: avoid;
  margin-bottom: var(--espaco-3);
  padding: var(--espaco-3);
  background: var(--fundo);
  border-radius: var(--raio-do-campo);
}

.grupo-do-menu h2 {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin: 0 0 var(--espaco-2);
  padding-bottom: var(--espaco-2);
  border-bottom: 1px solid var(--borda);
  color: var(--texto);
  font-size: var(--tamanho-do-corpo-menor);
  font-weight: 800;
}

.grupo-do-menu h2::before {
  content: "";
  width: 4px;
  height: 1em;
  border-radius: var(--raio-da-pilula);
  background: var(--marca);
}

.grupo-do-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.grupo-do-menu a {
  display: flex;
  align-items: center;
  min-height: var(--altura-minima-clicavel);
  padding: var(--espaco-1) var(--espaco-3);
  border-radius: var(--raio-do-campo);
  color: var(--menu);
  font-size: var(--tamanho-do-corpo-menor);
  font-weight: 500;
  text-decoration: none;
}

.grupo-do-menu a:hover {
  background: var(--superficie);
  color: var(--texto);
}

.grupo-do-menu a.active {
  background: var(--marca-clara);
  color: var(--link);
  font-weight: 700;
}

/* Faixas do topo. A faixa listrada do ambiente de testes vem do fluxo.css (.faixa-de-testes). */
.faixa-de-testes,
.faixa-somente-leitura,
.aviso-do-topo {
  margin: 0;
}

.faixa-somente-leitura {
  padding: var(--espaco-2) var(--espaco-5);
  background: var(--neutra-texto);
  color: var(--texto-sobre-a-marca);
  font-weight: 700;
  text-align: center;
}

.aviso-do-topo {
  padding: var(--espaco-2) var(--espaco-5);
  background: var(--atencao-fundo);
  border-bottom: 1px solid var(--atencao-borda);
  color: var(--atencao-escuro);
  text-align: center;
}

.conteudo {
  min-width: 0;
}

/* ---------- Formulários: grupos, ajuda e erro em volta dos campos do MudBlazor ---------- */
.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--espaco-4);
}

.campo label {
  font-weight: 700;
}

fieldset:not(.mud-input-outlined-border) {
  min-width: 0;
  margin: 0 0 var(--espaco-4);
  padding: var(--espaco-2) var(--espaco-4) var(--espaco-3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-do-campo);
}

fieldset:not(.mud-input-outlined-border) > legend {
  padding: 0 var(--espaco-1);
  font-weight: 700;
}

.ajuda {
  color: var(--suave);
  font-size: 0.875rem;
}

.erro-do-campo {
  color: var(--atencao-texto);
  font-weight: 600;
}

/* O envio de arquivo (InputFile) e os botões das linhas das listas ficam em HTML comum. */
input[type="file"],
button:not(.mud-button-root) {
  min-height: var(--altura-minima-clicavel);
  border-radius: var(--raio-do-campo);
  font: inherit;
}

/* Botões em HTML comum: pílulas iguais ao MudButton do tema. */
button:not(.mud-button-root):not(.botao-da-conta),
a.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-width: var(--altura-minima-clicavel);
  padding: var(--espaco-2) var(--espaco-5);
  border: 1px solid var(--borda-do-campo);
  border-radius: var(--raio-da-pilula);
  background: var(--superficie);
  color: var(--texto);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

button:not(.mud-button-root):not(.botao-da-conta):hover,
a.botao:hover {
  background: var(--neutra-fundo);
  color: var(--texto);
}

button.principal:not(.mud-button-root),
a.botao.principal {
  min-height: var(--altura-do-controle);
  background: var(--marca);
  border-color: var(--marca);
  color: var(--texto-sobre-a-marca);
}

button.principal:not(.mud-button-root):hover,
a.botao.principal:hover {
  background: var(--link-ao-passar);
  border-color: var(--link-ao-passar);
  color: var(--texto-sobre-a-marca);
}

button.perigo:not(.mud-button-root) {
  border-color: var(--atencao-texto);
  color: var(--atencao-texto);
}

button.perigo:not(.mud-button-root):hover {
  background: var(--atencao-fundo);
  color: var(--atencao-texto);
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.acoes {
  gap: var(--espaco-3);
  margin: var(--espaco-4) 0;
}

/* ---------- Mensagens ---------- */
.falha,
.aviso,
.sucesso {
  margin: var(--espaco-3) 0;
  padding: var(--espaco-3) var(--espaco-4);
  border: 1px solid;
  border-radius: var(--raio-do-campo);
}

.falha {
  background: var(--atencao-fundo);
  border-color: var(--atencao-borda);
  color: var(--atencao-escuro);
}

.falha .detalhe {
  display: block;
  margin-top: var(--espaco-1);
  color: var(--suave);
  font-size: 0.85rem;
}

.aviso {
  background: var(--atencao-fundo);
  border-color: var(--atencao-borda);
  color: var(--atencao-escuro);
}

.sucesso {
  background: var(--marca-clara);
  border-color: var(--marca);
  color: var(--link);
}

.vazio {
  color: var(--suave);
}

/* ---------- Tabelas em HTML comum: rolam dentro da caixa, a página não rola para o lado ---------- */
/* position: relative prende na caixa os textos só para leitor de tela (.somente-leitor, absolutos): sem ela, o texto da
   última coluna de uma tabela larga alarga a página no celular. */
.tabela-rolavel {
  position: relative;
  overflow-x: auto;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-do-cartao);
}

/* A tabela só para leitor de tela não rola: sem isto o overflow acima vence o .somente-leitor. */
.tabela-rolavel.somente-leitor {
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 14px var(--espaco-4);
  border-bottom: 1px solid var(--borda);
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--superficie);
  color: var(--suave);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: 0;
}

.mud-table th,
.mud-table td {
  vertical-align: middle;
}

.mud-table {
  border: 1px solid var(--borda);
  border-radius: var(--raio-do-cartao);
  box-shadow: none;
}

/* ---------- Segundo fator e chave gerada ---------- */
.qr-code {
  display: block;
  width: 200px;
  height: 200px;
  margin: var(--espaco-4) auto;
  padding: var(--espaco-2);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-do-campo);
}

.codigos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--espaco-2);
  padding: 0;
  list-style: none;
}

.codigos code {
  display: block;
  padding: var(--espaco-2);
  background: var(--fundo);
  border-radius: var(--raio-do-campo);
  text-align: center;
}

.chave-gerada {
  padding: var(--espaco-4);
  background: var(--superficie);
  border: 2px solid var(--marca);
  border-radius: var(--raio-do-campo);
}

.chave-gerada input {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* ---------- Janelas: o item salvo fica marcado na lista ---------- */
.confirmacao-de-saida p {
  margin: 0;
}

.item-salvo {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  background: var(--marca-clara);
}

/* ---------- Conta e integração ---------- */
.filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0 var(--espaco-4);
}

.dados,
.dados-do-documento {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--espaco-2) var(--espaco-5);
  margin: 0 0 var(--espaco-4);
}

.dados dt,
.dados-do-documento dt {
  font-weight: 700;
}

.dados dd,
.dados-do-documento dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.atalhos {
  padding-left: 1.25rem;
}

.acoes-da-linha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
}

/* Ícones das operações do emissor e das ações da nota: em linha, sem quebrar a célula; a tabela rola de lado. */
td.acoes-da-linha:has(.operacao-do-emissor),
td.acoes-da-linha:has(.acao-da-nota) {
  display: table-cell;
  white-space: nowrap;
}

details {
  margin: 0 0 var(--espaco-4);
}

summary {
  display: flex;
  align-items: center;
  min-height: var(--altura-minima-clicavel);
  font-weight: 700;
  cursor: pointer;
}

.etiqueta {
  display: inline-block;
  padding: 2px var(--espaco-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-da-pilula);
  font-size: 0.8rem;
  font-weight: 700;
}

.etiqueta.operador {
  background: var(--atencao-fundo);
  border-color: var(--atencao-borda);
}

.linha-de-operador td {
  background: var(--atencao-fundo);
}

.justificativa {
  margin: 0 0 var(--espaco-2);
}

.detalhes-do-registro {
  margin: 0;
  padding-left: var(--espaco-4);
  font-size: 0.875rem;
}

.detalhes-do-registro .nome {
  font-weight: 700;
}

.edicao {
  padding: var(--espaco-4);
  background: var(--superficie);
  border: 2px solid var(--marca);
  border-radius: var(--raio-do-campo);
}

/* ---------- Documentos: busca, detalhe, cancelamento e linha do tempo ---------- */
.campos-em-linha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0 var(--espaco-4);
}

.filtros-salvos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  padding: 0;
  list-style: none;
}

.filtros-salvos li {
  display: flex;
  gap: var(--espaco-1);
}

/* A situação "Enviando" não está no fluxo.css: a nota está a caminho, com a borda da marca. */
.situacao.enviando {
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--marca);
  color: var(--link);
}

.situacao-tecnica {
  color: var(--suave);
  font-size: 0.9rem;
}

.conferencia-conferida,
.manifestacao-registrada {
  color: var(--link);
}

.conferencia-contestada,
.manifestacao-rejeitada,
.manifestacao-falha {
  color: var(--atencao-texto);
}

.observacao-da-conferencia {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.marca-de-teste {
  display: inline-block;
  margin-left: var(--espaco-2);
  padding: 2px var(--espaco-2);
  border-radius: var(--raio-da-pilula);
  background: var(--teste-fundo);
  color: var(--teste-texto);
  font-size: 0.8rem;
  font-weight: 700;
}

.explicacao-dos-codigos {
  padding-left: 1.25rem;
}

.explicacao-dos-codigos p {
  margin: 3px 0;
}

.rotulo-da-explicacao {
  font-weight: 700;
}

.cancelamento {
  padding: var(--espaco-4);
  background: var(--superficie);
  border: 2px solid var(--atencao-texto);
  border-radius: var(--raio-do-campo);
}

.categoria-nuvdocs {
  --cor-da-categoria: var(--marca);
}

.categoria-represamento {
  --cor-da-categoria: var(--atencao-texto);
}

.categoria-recebedor {
  --cor-da-categoria: var(--link-ao-passar);
}

.totais-da-linha-do-tempo {
  display: grid;
  gap: var(--espaco-2);
  padding: 0;
  list-style: none;
}

.totais-da-linha-do-tempo .categoria {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--espaco-1) var(--espaco-3);
  align-items: center;
}

.totais-da-linha-do-tempo .barra {
  grid-column: 1 / -1;
  height: var(--espaco-2);
  min-width: 2px;
  border-radius: var(--raio-da-pilula);
  background: var(--cor-da-categoria);
}

.rotulo-da-categoria {
  font-weight: 700;
}

.passos {
  margin: var(--espaco-4) 0;
  padding: 0;
  list-style: none;
}

.passo {
  padding: var(--espaco-2) 0 var(--espaco-3) var(--espaco-4);
  border-left: 4px solid var(--cor-da-categoria, var(--borda));
}

.cabecalho-do-passo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espaco-2);
}

.duracao-do-passo,
.repeticao {
  margin: 3px 0;
  color: var(--suave);
  font-size: 0.9rem;
}

.detalhes-do-passo {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px var(--espaco-4);
  margin: var(--espaco-1) 0 0;
  font-size: 0.85rem;
}

.detalhes-do-passo dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.espera-aberta {
  padding: var(--espaco-3) var(--espaco-4);
  background: var(--fundo);
  border-left: 4px solid var(--cor-da-categoria, var(--borda));
}

/* ---------- Cadastros de apoio: lista em uma coluna até 360 px, com as ações embaixo ---------- */
.lista-do-cadastro {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  margin: 0 0 var(--espaco-4);
  padding: 0;
  list-style: none;
}

.lista-do-cadastro li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2) var(--espaco-4);
  padding: var(--espaco-4) var(--espaco-5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-do-cartao);
  overflow-wrap: anywhere;
}

/* ---------- Celular ---------- */
@media (max-width: 799.98px) {
  .topo-interno {
    padding: var(--espaco-2) var(--espaco-4);
  }

  .menu-da-conta {
    right: var(--espaco-4);
    left: var(--espaco-4);
    width: auto;
  }

  .acoes button,
  .acoes .botao {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Janela sobre a tela (componentes/JanelaSobreATela) ----------
   A emissão guiada e as operações em janela (busca, planilha e modelos) abrem por cima da tela atual. O z-index fica abaixo
   dos popovers do MudBlazor (listas dos campos) e das janelas comuns (confirmação, cancelamento, manutenção), que precisam
   aparecer por cima. A janela tem as três regiões da JanelaComum: o cabeçalho (título e fechar) e o rodapé (botões de ação,
   numa linha só) ficam sempre à vista; só o corpo rola. A caixa larga serve à emissão e à busca; a média, às outras. */
body:has(.janela-sobre-a-tela) {
  overflow: hidden;
}

.janela-sobre-a-tela {
  position: fixed;
  inset: 0;
  z-index: 1150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espaco-5);
  background: rgba(16, 42, 39, 0.5);
}

.caixa-sobre-a-tela {
  display: flex;
  flex-direction: column;
  width: min(1240px, 100%);
  max-height: calc(100dvh - 2 * var(--espaco-5));
  overflow: hidden;
  background: var(--superficie);
  border-radius: var(--raio-da-janela);
  box-shadow: 0 24px 60px rgba(16, 42, 39, 0.28);
}

.caixa-sobre-a-tela.media {
  width: min(880px, 100%);
}

.caixa-sobre-a-tela:focus {
  outline: none;
}

.caixa-sobre-a-tela > .cabecalho-da-janela {
  flex: 0 0 auto;
  padding: var(--espaco-4) var(--espaco-4) var(--espaco-4) var(--espaco-6);
  border-bottom: 1px solid var(--borda);
}

.caixa-sobre-a-tela > .corpo-da-janela {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--espaco-4) var(--espaco-6) var(--espaco-5);
}

.caixa-sobre-a-tela > .rodape-da-janela {
  flex: 0 0 auto;
  padding: var(--espaco-3) var(--espaco-6);
  border-top: 1px solid var(--borda);
}

/* Sem botões de ação, o rodapé some. */
.caixa-sobre-a-tela > .rodape-da-janela:not(:has(> *)) {
  display: none;
}

.caixa-sobre-a-tela button.fechar-sobre-a-tela {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--altura-minima-clicavel);
  height: var(--altura-minima-clicavel);
  min-height: var(--altura-minima-clicavel);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--superficie);
  color: var(--suave);
}

.caixa-sobre-a-tela button.fechar-sobre-a-tela:hover {
  background: var(--neutra-fundo);
  color: var(--texto);
}

@media (max-width: 799.98px) {
  .janela-sobre-a-tela {
    padding: 0;
  }

  .caixa-sobre-a-tela {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .caixa-sobre-a-tela > .cabecalho-da-janela {
    padding: var(--espaco-3) var(--espaco-2) var(--espaco-3) var(--espaco-4);
  }

  .caixa-sobre-a-tela > .corpo-da-janela,
  .caixa-sobre-a-tela > .rodape-da-janela {
    padding-right: var(--espaco-4);
    padding-left: var(--espaco-4);
  }

  .caixa-sobre-a-tela .titulo-da-janela {
    font-size: 20px;
  }
}

/* Formulário em colunas dentro de uma janela larga, para caber na altura da tela sem rolar (dados de cobrança, regra de alerta). */
.colunas-do-formulario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 0 var(--espaco-5);
  align-items: start;
}

/* Canais da regra de alerta lado a lado, para o formulário caber sem rolar. */
.canais-do-alerta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--espaco-4);
}