/* ==========================================================================
T11 — Detalhe da Auditoria
Composição validada como mockup em `/mockups/auditorias/detalhe` (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-det*`. Não há build nem import dinâmico de
CSS neste projeto: todo arquivo de `styles/pages/` é carregado por ``
em TODA rota — sem prefixo, este arquivo vazaria para outras telas.
Reaproveita classes já existentes sem redefini-las: `.passos`/
`.passos__item` (o stepper, mesmo de `dados.css`), `.cartao`, `.btn*`,
`.indicadores-resumo`/`.metrica` (de `divergencias.css`), `.lista-simples`,
`.selo`, `.grafico-arco` (do `GaugeArc`). Nenhuma cor literal: tudo por
token de `tokens.css`.
========================================================================== */
/* --- largura da página ------------------------------------------------------ */
.shell__conteudo:has(.aud-det) {
max-width: 72rem;
}
.aud-det {
display: flex;
flex-direction: column;
gap: var(--e-4);
min-width: 0;
}
/* --- trilha de etapas -------------------------------------------------------
`.passos`/`.passos__item` já existem em `dados.css`. Aqui a fonte do
"passo atual" é o STATUS da auditoria, não um estado de wizard — mesmo
componente visual, fonte de verdade diferente. */
.aud-det__trilha {
font-size: var(--txt-sm);
/* Sem isto, o flex item cresce até a largura do conteúdo (5 pílulas) 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. */
min-width: 0;
}
/* --- selo de status + reaberta -----------------------------------------------
O número e a loja já vêm do cabeçalho genérico (`.pagina-titulo`/
`.pagina-sub`); isto complementa com status e o selo de reabertura. */
.aud-det__titulo-linha {
display: flex;
align-items: center;
gap: var(--e-2);
flex-wrap: wrap;
}
/* RN-33: uma auditoria reaberta nunca deve voltar a parecer uma finalização
comum. O campo já vem do backend (`reaberta`); a tela antiga nunca o
exibia. Mesmo tom (laranja da marca) do selo equivalente na T09. */
.aud-det__selo-reaberta {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--txt-xs);
font-weight: 600;
color: var(--laranja-700);
background: var(--laranja-100);
border-radius: var(--raio-sm);
padding: 2px var(--e-2);
}
/* --- grade principal: progresso + equipe ------------------------------------
Duas colunas a partir de 860px — o card de progresso é mais largo (é o
protagonista da referência, com o arco central); a equipe ocupa menos. */
.aud-det__grade-principal {
display: grid;
gap: var(--e-4);
grid-template-columns: 1fr;
}
@media (min-width: 860px) {
.aud-det__grade-principal {
grid-template-columns: 1.4fr 1fr;
align-items: stretch;
}
}
/* --- card "Progresso do ciclo" ---------------------------------------------- */
.aud-det__progresso-sub {
margin: 0 0 var(--e-4);
}
.aud-det__progresso-real {
display: flex;
align-items: center;
gap: var(--e-5);
flex-wrap: wrap;
}
.aud-det__arco {
position: relative;
flex: 0 0 auto;
display: grid;
place-items: center;
}
.aud-det__arco-valor {
position: absolute;
font-size: var(--txt-lg);
font-weight: 700;
color: var(--texto);
font-variant-numeric: tabular-nums;
}
.aud-det__progresso-legenda {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.aud-det__progresso-etapa {
font-weight: 600;
color: var(--texto);
}
/* Sem contagem ativa (ou sem permissão) — mostra a etapa, sem arco. Um
número grande no lugar do arco mantém a mesma hierarquia visual sem
inventar um percentual que a etapa não representa. */
.aud-det__progresso-etapa-so {
display: flex;
align-items: center;
gap: var(--e-4);
}
.aud-det__progresso-numero {
font-size: var(--txt-3xl);
font-weight: 700;
color: var(--azul-700);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.aud-det__progresso-legenda-so {
display: flex;
flex-direction: column;
gap: 2px;
}
.aud-det__progresso-legenda-so > span:first-child {
font-weight: 600;
color: var(--texto);
}
/* --- grade secundária: snapshot + contagem + checklist + informações -------- */
.aud-det__grade-secundaria {
display: grid;
gap: var(--e-4);
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.aud-det__grade-secundaria {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1180px) {
.aud-det__grade-secundaria {
grid-template-columns: repeat(4, 1fr);
align-items: stretch;
}
}
/* --- cards genéricos --------------------------------------------------------- */
.aud-det__card {
display: flex;
flex-direction: column;
gap: var(--e-3);
}
.aud-det__card--largo {
grid-column: 1 / -1;
}
.aud-det__card-topo {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--e-2);
}
.aud-det__card-topo .cartao__titulo {
margin: 0;
}
/* Par de números grandes, usado em Snapshot e Contagem. */
.aud-det__numeros {
display: flex;
gap: var(--e-5);
}
.aud-det__numeros > div {
display: flex;
flex-direction: column;
gap: 2px;
}
.aud-det__numeros strong {
font-size: var(--txt-xl);
font-weight: 700;
color: var(--texto);
font-variant-numeric: tabular-nums;
}
.aud-det__numero-atencao {
color: var(--atencao-texto) !important;
}
.aud-det__oculto {
color: var(--texto-3) !important;
font-weight: 400 !important;
}
.aud-det__oculto-nota {
display: flex;
align-items: flex-start;
gap: 4px;
margin: 0;
}
.aud-det__por-auditor {
margin: 0;
}
.aud-det__por-auditor li {
display: flex;
justify-content: space-between;
gap: var(--e-2);
padding: var(--e-1) 0;
border-bottom: 1px solid var(--linha);
}
.aud-det__por-auditor li:last-child {
border-bottom: 0;
}
/* --- equipe: avatar de iniciais ---------------------------------------------- */
.aud-det__participante {
display: flex;
align-items: center;
gap: var(--e-2);
}
/* `.eq-avatar` (drawer "Gerenciar equipe") é o mesmo avatar — sem esta
regra as iniciais apareciam soltas, sem o círculo. */
.aud-det__avatar,
.eq-avatar {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 999px;
background: var(--azul-100);
color: var(--azul-900);
font-size: var(--txt-xs);
font-weight: 700;
}
.aud-det__ver-mais {
margin: 0;
}
/* --- checklist ---------------------------------------------------------------
Cada pendência é honestamente um ALERTA (âmbar), não um item de lista
comum — é o que falta para a etapa seguinte acontecer. Quando a lista
está vazia, uma única linha de confirmação (verde) substitui, nunca uma
lista vazia sem explicação. */
.aud-det__checklist {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--e-2);
}
.aud-det__checklist li {
display: flex;
align-items: flex-start;
gap: var(--e-2);
font-size: var(--txt-sm);
color: var(--texto-2);
}
.aud-det__checklist-icone {
flex: 0 0 auto;
color: var(--sobra);
margin-top: 1px;
}
.aud-det__checklist-ok {
display: flex;
align-items: center;
gap: var(--e-2);
margin: 0;
color: var(--conforme);
font-weight: 600;
}
/* --- observações --------------------------------------------------------------- */
.aud-det__observacao {
margin: 0;
color: var(--texto-2);
line-height: 1.55;
}
/* --- ações rápidas -------------------------------------------------------------
Grade de botões reais (`.btn`/`.btn--primario`/`.btn--secundario`/
`.btn--perigo`, os mesmos componentes de sempre) em vez da barra linear
de até 9 botões — cada ação ocupa uma célula uniforme, sem competir por
espaço horizontal quando há muitas ao mesmo tempo. */
.aud-det__acoes-grade {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
gap: var(--e-2);
}
.aud-det__acoes-grade .btn {
width: 100%;
justify-content: flex-start;
/* Rótulo longo ("Códigos não identificados") quebra em vez de ser cortado. */
white-space: normal;
text-align: left;
line-height: 1.25;
padding-top: var(--e-2);
padding-bottom: var(--e-2);
}
/* Cancelar é destrutivo e raro: contorno vermelho, não um bloco vermelho
cheio competindo com "Abrir contagem" (a ação principal da grade). A
confirmação continua no modal. */
.aud-det__acoes-grade .btn--perigo {
background: var(--surface);
color: var(--perigo);
border-color: color-mix(in srgb, var(--perigo) 45%, var(--surface));
}
.aud-det__acoes-grade .btn--perigo:hover:not(:disabled) { background: var(--falta-100); }
/* --- drawer "Gerenciar equipe" (T12) ------------------------------------------
Conteúdo do drawer aberto a partir do card Equipe acima. Escopado `.eq-*`
porque vive dentro do `