/* Home do perfil AUDITOR ("Meu Desempenho") — 8 KPIs sem gráfico, próximas
   auditorias e resumo de acesso. Reaproveita `.cartao`/`.metrica`/`.grade` de
   components.css e `.metricas` de dados.css; só acrescenta o que essas
   classes compartilhadas não cobrem. */

/* --- cabeçalho: card do usuário --------------------------------------------- */
.cartao-usuario {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}
.cartao-usuario__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--azul-100);
  color: var(--azul-900);
  font-weight: 600;
  font-size: var(--txt-sm);
  flex: 0 0 auto;
}
.cartao-usuario__nome { display: block; font-weight: 600; color: var(--azul-900); }
.cartao-usuario__papel { display: block; font-size: var(--txt-sm); color: var(--texto-3); }

/* --- grade de 8 KPIs ---------------------------------------------------------
   Mesmo princípio de `.metricas--seis` (central.css): `.metricas` (dados.css)
   não vai além de 4 colunas e é compartilhada com outras telas — este
   modificador só reescreve a grade onde é aplicado, sem alterar a base.
   Degraus 1 → 2 → 4 (mobile → tablet → desktop), conforme pedido. */
.metricas--oito { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px) {
  .metricas--oito { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .metricas--oito { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Cor só no selo do ícone, nunca tingindo o card inteiro nem a borda lateral
   — pedido explícito desta tela, diferente do `.metrica--ok/erro/atencao`
   (borda colorida) usado no resumo executivo. */
.metrica--com-icone { border-left-color: var(--linha-2); gap: var(--e-2); }
.metrica__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--raio-sm);
  margin-bottom: var(--e-1);
}
.metrica__icone--azul     { background: var(--azul-100);     color: var(--azul-700); }
.metrica__icone--verde    { background: var(--conforme-100); color: var(--conforme); }
.metrica__icone--vermelho { background: var(--falta-100);    color: var(--falta); }
.metrica__icone--laranja  { background: var(--laranja-100);  color: var(--laranja-700); }
.metrica__icone--roxo     { background: var(--serie-5-100);            color: var(--serie-5); }
.metrica__nota { font-size: var(--txt-xs); }

/* --- área inferior: duas colunas --------------------------------------------
   `.grade` (components.css) já vira 2 colunas a partir de 768px — a proporção
   2fr/1fr só se aplica a partir do breakpoint em que as duas colunas existem. */
@media (min-width: 768px) {
  .grade--desempenho { grid-template-columns: 2fr 1fr; }
}

.link-ver-todas {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--azul-500);
  white-space: nowrap;
}
.link-ver-todas:hover { text-decoration: underline; }

.proxima-auditoria {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--linha);
}
.proxima-auditoria:last-child { border-bottom: none; }
.proxima-auditoria__data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  flex: 0 0 auto;
  line-height: 1.1;
}
.proxima-auditoria__dia { font-size: var(--txt-lg); font-weight: 700; color: var(--azul-900); }
.proxima-auditoria__mes {
  font-size: var(--txt-xs);
  text-transform: uppercase;
  color: var(--texto-3);
  letter-spacing: .04em;
}
.proxima-auditoria__info { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.proxima-auditoria__hora { flex: 0 0 auto; font-size: var(--txt-sm); }

.resumo-acesso { display: grid; gap: var(--e-1) var(--e-3); grid-template-columns: auto 1fr; }
.resumo-acesso dt { font-size: var(--txt-xs); color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; }
.resumo-acesso dd {
  margin: 0 0 var(--e-3) 0;
  grid-column: 1 / -1;
  font-size: var(--txt-sm);
  color: var(--texto);
}
.resumo-acesso dt:last-of-type ~ dd:last-child { margin-bottom: 0; }

@media (max-width: 639px) {
  .proxima-auditoria__hora { display: none; }
}