/* ==========================================================================
   T10 — Nova Auditoria

   Composição validada como mockup em `/mockups/auditorias/nova` (aprovada
   antes desta implementação). Este arquivo é a versão de PRODUÇÃO — mesmas
   decisões visuais, sem mudança de classe.

   Seletores escopados sob `.aud-nova*` / `.aud-resumo*` / `.aud-confirmacao*`.
   Não há build nem import dinâmico de CSS neste projeto: todo arquivo de
   `styles/pages/` é carregado por `<link>` em TODA rota — sem prefixo, este
   arquivo vazaria para outras telas.

   Reaproveita classes já existentes sem redefini-las: `.passos`/
   `.passos__item` (`dados.css`, o wizard real de `ImportacaoPage.js`),
   `.formulario__grade`/`.formulario__acoes`, `.resumo`, `.aviso`, `.cartao`.
   Nenhuma cor literal: tudo por token de `tokens.css`.
   ========================================================================== */

/* --- largura da página ------------------------------------------------------

   `.shell__conteudo` tem `max-width: 80rem` — apertado para caber formulário
   + painel lateral lado a lado confortavelmente. Escape escopado via
   `:has()`, mesma técnica de `auditorias.css`. */
.shell__conteudo:has(.aud-nova) {
  max-width: 64rem;
}

.aud-nova {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  min-width: 0;
}

/* --- trilha de passos --------------------------------------------------------

   `.passos`/`.passos__item` já existem em `dados.css` (usadas por
   `ImportacaoPage.js` e `EncerramentoPage.js`) — aqui só ajustamos o
   container para centralizar a atenção nela como elemento de abertura da
   página, sem herdar nada de layout de tabela/formulário. */
.aud-nova__trilha {
  font-size: var(--txt-sm);
  /* Sem isto, o flex item cresce até a largura do conteúdo (3 pílulas +
     "Confirmação" por extenso) e empurra a PÁGINA para o lado — o
     `overflow-x: auto` de `.passos` só passa a valer quando o próprio
     container tem permissão de encolher. Achado real, medido em 375px
     durante a validação do mockup. */
  min-width: 0;
}

/* --- grade: formulário + painel lateral -------------------------------------

   Empilha no mobile (o painel de resumo vem DEPOIS do formulário — conferir
   antes de confirmar é mais natural que ler o resumo primeiro). A partir de
   960px vira duas colunas, com o painel fixo (`sticky`) para acompanhar a
   rolagem em formulários mais altos, como o passo "Escopo" com textarea. */
.aud-nova__grade {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 960px) {
  .aud-nova__grade {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
}

.aud-nova__passo {
  min-width: 0;
}
.aud-nova__passo .cartao__titulo {
  margin-bottom: var(--e-4);
}

.aud-nova__acoes {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linha);
}

/* --- painel "Resumo da auditoria" --------------------------------------------

   Elemento novo — não existia precedente no projeto antes desta tela
   (nenhuma outra tela tem painel lateral reagindo a formulário). `sticky`
   só a partir do breakpoint em que ele fica ao lado do formulário; no
   mobile ele rola normalmente com a página, senão ficaria preso no meio da
   tela pequena. */
.aud-resumo {
  padding: var(--e-4);
}
@media (min-width: 960px) {
  .aud-resumo {
    position: sticky;
    top: var(--e-4);
  }
}
.aud-resumo__titulo {
  margin-bottom: 2px;
}
.aud-resumo__legenda {
  margin: 0 0 var(--e-4);
}
.aud-resumo__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.aud-resumo-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--linha);
}
.aud-resumo-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.aud-resumo-item__topo {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  color: var(--texto-3);
}
.aud-resumo-item__icone {
  flex: 0 0 auto;
}
.aud-resumo-item__rotulo {
  font-size: var(--txt-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.aud-resumo-item__valor {
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--texto);
  word-break: break-word;
}
/* "Não informado" nunca compete visualmente com um valor de verdade — cor
   mais fraca e peso normal, para o olho pular direto para o que já foi
   preenchido ao revisar. */
.aud-resumo-item__valor--vazio {
  font-weight: 400;
  color: var(--texto-3);
  font-style: italic;
}

/* --- passo "Confirmação" ----------------------------------------------------- */

.aud-confirmacao {
  /* `.resumo` (de `dados.css`) já é grid auto/1fr com `dt` fraco e `dd`
     forte — aqui só precisamos de mais respiro entre pares, porque a lista
     é mais longa (até 8 itens) que o uso original do componente. */
  row-gap: var(--e-3);
}
.aud-confirmacao dd {
  word-break: break-word;
}

.aud-confirmacao__aviso {
  /* `.aviso` (de `dados.css`) é um bloco simples; aqui o ícone fica ao lado
     do texto, então precisa de flex — escopado a esta instância, a classe
     base não muda para os outros consumidores (`EncerramentoPage`,
     `DivergenciasPage` etc., que usam `.aviso` sem ícone ao lado). */
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  color: var(--azul-700);
}
.aud-confirmacao__aviso .sub {
  margin: 2px 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .aud-resumo-item__valor {
    transition: none;
  }
}