/*
 * A nota fiscal de serviço: a faixa do ambiente de teste, a lista com o total
 * do mês e o certificado, a nota com a espera, os erros da Focus, os arquivos e
 * as ações, e a conferência antes de emitir.
 *
 * Mora aqui o que só a nota desenha. Cor, espaço, cartão, botão, etiqueta,
 * tabela e formulário vêm de `application.css`, pelos tokens e pelas classes
 * que já existem — este arquivo não redefine nenhum deles, e toda cor é um
 * token, que já muda no tema escuro.
 */

/* ---------- O ambiente de teste ---------- */

/* Em âmbar, no topo de toda tela da nota em homologação: a nota de teste se
   parece com a de verdade, e a faixa é o que as separa. */
.faixa-de-teste {
  margin: 0 0 1rem;
  padding: .7rem 1rem;
  border: 1px solid var(--aviso);
  border-radius: var(--raio);
  background: var(--aviso-fundo);
  color: var(--aviso);
  font-size: .95rem;
}

/* ---------- A lista ---------- */

.notas__topo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
  align-items: start;
  margin-bottom: 1.25rem;
}

.notas__total {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}

.notas__vencendo { color: var(--saida); }

.notas__certificado summary { cursor: pointer; color: var(--acento); font-weight: 600; }
.notas__certificado[open] summary { margin-bottom: .75rem; }

/* ---------- A nota ---------- */

/* A espera — enviando, esperando o fisco, cancelando — num tom só, acima de
   tudo: é o que a pessoa olha enquanto a página se atualiza. */
.nota__espera {
  margin: 0 0 1rem;
  padding: .7rem 1rem;
  border-left: 3px solid var(--aviso);
  background: var(--surface-alt);
  border-radius: var(--raio);
}

.nota__erros {
  margin: 0 0 1rem;
  padding: .8rem 1rem;
  border: 1px solid var(--saida);
  border-radius: var(--raio);
  background: var(--saida-fundo);
  color: var(--ink);
}

.nota__erros h2 { margin: 0 0 .4rem; font-size: 1rem; color: var(--saida); }
.nota__erros ul { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .35rem; }

/* Os dados à esquerda, os arquivos e as ações à direita; no celular, um
   embaixo do outro. */
.nota__colunas {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.nota__lado { display: flex; flex-direction: column; gap: 1rem; }

.nota__acoes { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

.nota__descricao { overflow-wrap: anywhere; }

/* A lista de dados mora numa coluna estreita: o valor quebra a linha em vez
   de empurrar a página para o lado. */
.nota__colunas .lista-de-dados dd,
.nota__conferencia .lista-de-dados dd { overflow-wrap: anywhere; }

.nota__confirmar { margin-top: 1rem; }

/* O título que abre um cartão não leva a margem de cima do título solto na
   página: dentro do cartão, ela vira um vão vazio acima dele. */
.notas__topo .cartao > .secao__titulo:first-child,
.nota__lado .cartao > .secao__titulo:first-child,
.notas__cartao > .secao__titulo:first-child { margin-top: 0; }

/* O CPF e o CNPJ não se partem no meio: "0001-" numa linha e "61" na outra
   é um documento que não se lê. */
.nota__documento { white-space: nowrap; }

/* Na ficha da nota, o rótulo tem a sua parte da linha: com o `auto` da lista
   de dados, o valor comprido — o e-mail, o serviço — espremia "ISS retido
   pelo tomador" em três linhas no celular. */
.nota__colunas .lista-de-dados,
.nota__conferencia .lista-de-dados,
.notas__cartao .lista-de-dados { grid-template-columns: minmax(7.5rem, 2fr) minmax(0, 3fr); }

@media (max-width: 760px) {
  .nota__colunas { grid-template-columns: minmax(0, 1fr); }
}