/* ==========================================================================
   PRISMA · ai/aprovacao.css — APROVAÇÃO HUMANA (brief §26)
   --------------------------------------------------------------------------
   Um agente quer fazer algo que passa por uma das Paradas Canônicas: gravar,
   apagar, gastar, sair para fora, tocar credencial ou dado de terceiro,
   decidir por ela. A peça existe para que a decisão leve UMA leitura.

   OBRIGATÓRIO na peça: agente · ação proposta · alvo · resumo · impacto ·
   risco (quando houver) · dados envolvidos. Ações: Aprovar · Cancelar ·
   Ver detalhes.

   Regras que a peça impõe:
   · O botão de aprovar NÃO é o primeiro na ordem de tabulação: "Ver detalhes"
     vem antes. Aprovar sem ler tem que exigir intenção.
   · Impacto e risco são texto, com ícone. Nunca uma bolinha colorida só.
   · Dados envolvidos aparecem listados, com a fonte. Se houver dado pessoal,
     a peça avisa em vermelho e o aprovar fica destrutivo (btn--perigo-solido).
   ========================================================================== */

.aprovacao {
  display: grid; gap: var(--espaco-4);
  padding: var(--espaco-5);
  border-radius: var(--radius-xl);
  background-color: var(--surface-1);
  background-image: var(--surface-veu);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 45%, transparent), var(--elev-floating);
}
/* Flutuando sobre conteúdo (drawer, modal): vidro frosted — há texto e o fundo é imprevisível. */
.aprovacao--flutuante {
  background-color: var(--glass-tint-frosted);
  background-image: none;
  -webkit-backdrop-filter: blur(var(--glass-blur-frosted)) saturate(var(--glass-saturacao));
  backdrop-filter: blur(var(--glass-blur-frosted)) saturate(var(--glass-saturacao));
  box-shadow: inset 0 0 0 1px var(--border-glass), var(--elev-overlay);
}

.aprovacao-cabeca { display: flex; align-items: center; gap: var(--espaco-3); }
.aprovacao-quem { min-width: 0; flex: 1; display: grid; gap: 1px; }
.aprovacao-quem b { font-size: var(--body-sm-size); color: var(--text-primary); font-weight: 600; }
.aprovacao-quem span { font-size: var(--caption-size); color: var(--text-muted); }

/* A frase da ação: verbo + alvo, grande o bastante para ser a coisa que se lê. */
.aprovacao-acao { font-size: var(--h4-size); font-weight: 600; color: var(--text-primary); line-height: 1.35; letter-spacing: -.01em; }
.aprovacao-acao .data { font-size: .9em; font-weight: 500; color: var(--accent-text); }
.aprovacao-resumo { font-size: var(--body-sm-size); color: var(--text-secondary); line-height: 1.55; }

/* Impacto, risco, dados: grade de pares. */
.aprovacao-fatos {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--espaco-2) var(--espaco-4);
  padding: var(--espaco-3) var(--espaco-4);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-size: var(--caption-size);
}
.aprovacao-fatos dt { color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.aprovacao-fatos dt svg { width: 14px; height: 14px; }
.aprovacao-fatos dd { margin: 0; color: var(--text-secondary); }
.aprovacao-fatos dd b { color: var(--text-primary); font-weight: 550; }
.aprovacao-fatos dd ul { margin: 0; padding-inline-start: var(--espaco-4); display: grid; gap: 2px; }

/* Nível de impacto: cor + texto sempre juntos. */
.impacto { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; }
.impacto::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.impacto--baixo { color: var(--success); }
.impacto--medio { color: var(--warning); }
.impacto--alto  { color: var(--danger); }

/* Dado pessoal ou credencial: a peça grita. */
.aprovacao-alerta {
  display: flex; gap: var(--espaco-2); align-items: flex-start;
  padding: var(--espaco-3);
  border-radius: var(--radius-sm);
  background: var(--danger-surface); color: var(--danger);
  font-size: var(--caption-size); font-weight: 500; line-height: 1.45;
}
.aprovacao-alerta svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

/* Ações: detalhes primeiro na ordem, aprovar por último — e à direita. */
.aprovacao-acoes { display: flex; align-items: center; gap: var(--espaco-2); flex-wrap: wrap; }
.aprovacao-acoes .btn--primario { margin-inline-start: auto; }

/* Expirada / já decidida: a peça continua legível como registro. */
.aprovacao[data-decisao="aprovada"]  { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 40%, transparent), var(--elev-raised); }
.aprovacao[data-decisao="cancelada"] { box-shadow: inset 0 0 0 1px var(--border-subtle), var(--elev-raised); opacity: .8; }
.aprovacao[data-decisao] .aprovacao-acoes { display: none; }
.aprovacao-decisao { display: flex; align-items: center; gap: var(--espaco-2); font-size: var(--caption-size); color: var(--text-muted); }
.aprovacao-decisao svg { width: 14px; height: 14px; }
.aprovacao[data-decisao="aprovada"] .aprovacao-decisao { color: var(--success); }

@media (max-width: 640px) {
  .aprovacao { padding: var(--espaco-4); border-radius: var(--radius-lg); }
  .aprovacao-fatos { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .aprovacao-fatos dt { margin-top: var(--espaco-2); }
  .aprovacao-acoes .btn { flex: 1 1 auto; }
  .aprovacao-acoes .btn--primario { margin-inline-start: 0; flex-basis: 100%; }
}

/* [hidden] precisa vencer o display da peça — sem isto o marcador aparece vazio. (19/09/2026) */
.aprovacao-decisao[hidden], .aprovacao-acoes[hidden] { display: none; }