/* ==========================================================================
   SGP — Camada 10: ajuda dispensável ("já vi isso")
   O visual dos avisos que o usuário fecha uma vez e não vê mais: dica de tela,
   banner de novidade e o checklist da primeira semana. Tudo em tokens da
   camada 1, então acompanha o tema claro/escuro sem regra extra.
   ========================================================================== */

.aviso-dispensavel {
  position: relative;
  display: flex;
  gap: var(--esp-3);
  align-items: flex-start;
  padding: var(--esp-3) var(--esp-10) var(--esp-3) var(--esp-4);
  margin-bottom: var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-left: 3px solid var(--cor-acao);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-elevado);
  color: var(--cor-texto);
  font-size: var(--texto-md);
  line-height: var(--altura-normal);
  box-shadow: var(--sombra-xs);
}

.aviso-dispensavel--novidade {
  border-left-color: var(--sgp-roxo-500);
  background: var(--cor-fundo-sutil);
}

.aviso-dispensavel--atencao {
  border-left-color: var(--sgp-atencao);
}

.aviso-dispensavel__icone {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--cor-acao);
}

.aviso-dispensavel--novidade .aviso-dispensavel__icone { color: var(--sgp-roxo-500); }
.aviso-dispensavel--atencao  .aviso-dispensavel__icone { color: var(--sgp-atencao); }

.aviso-dispensavel__corpo { min-width: 0; }

.aviso-dispensavel__titulo {
  margin: 0 0 var(--esp-1);
  font-size: var(--texto-md);
  font-weight: var(--peso-semi);
}

.aviso-dispensavel__texto {
  margin: 0;
  color: var(--cor-texto-suave);
}

.aviso-dispensavel__fechar {
  position: absolute;
  top: var(--esp-2);
  right: var(--esp-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--cor-texto-fraco);
  cursor: pointer;
  transition: background var(--transicao-rapida), color var(--transicao-rapida);
}

.aviso-dispensavel__fechar:hover {
  background: var(--cor-fundo-afundado);
  color: var(--cor-texto);
}

.aviso-dispensavel__fechar:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 1px;
}

.aviso-dispensavel__fechar svg { width: 16px; height: 16px; }

/* Saída suave ao dispensar; quem pediu menos movimento não vê animação. */
.aviso-dispensavel--saindo {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--transicao-media), transform var(--transicao-media);
}

@media (prefers-reduced-motion: reduce) {
  .aviso-dispensavel--saindo { transition: none; }
}