/*
 * effects.css — transições, hovers e animações. Tudo o que "se mexe" fica aqui (D20).
 * Durações do visual Leve (D80): 150ms (cor), 200ms (sombra e cartão), 300ms (entrada).
 * Pode ser trocado ou removido sem afetar estrutura nem cores. Respeita prefers-reduced-motion.
 */
@media (prefers-reduced-motion: no-preference) {
  .btn, .area, .abas-area a, .botao-icone, .menu-suspenso__lista a, .menu-suspenso__lista button, .menu-folha__area a, .barra-baixo__item, .abas a, .avatar,
  .campo input, .campo select, .campo textarea, .select-compacto, .estoque-botao, .escolha-radio--blocos label, .tabela tbody tr > *, .compra {
    transition: background-color var(--dur-rapida) var(--curva), border-color var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva), box-shadow var(--dur-rapida) var(--curva);
  }
  .cartao-item, a.tile { transition: box-shadow var(--dur-normal) var(--curva), transform var(--dur-normal) var(--curva); }
  .cartao-item:hover, a.tile:hover { transform: translateY(-2px); }

  .alerta { animation: entrar-de-cima var(--dur-lenta) var(--curva); }
  .dialogo[open] { animation: aparecer var(--dur-normal) var(--curva); }

  @keyframes entrar-de-cima { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  @keyframes aparecer { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }
}