/*
 * CSS crítico — carrega síncrono antes do Tailwind Play CDN processar,
 * evita FOUC (flash de conteúdo sem estilo) durante a inicialização.
 */
html {
  background-color: #f8fafc;
}
body {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  background-color: #f8fafc;
  color: #111827;
  -webkit-font-smoothing: antialiased;
}
/* Sidebar icon-rail: mantém aparência enquanto Tailwind ainda não injetou o CSS */
@media (min-width: 1024px) {
  body > aside {
    display: flex;
    flex-direction: column;
    width: 4rem;
    background-color: #1e3a5f;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 30;
  }
  /* Conteúdo principal já respeitando a largura da sidebar */
  .lg\:ml-16 {
    margin-left: 4rem;
  }
}

/* Tailwind cuida de quase tudo. Este arquivo guarda só o que ele não cobre nativamente. */

/* Estado ativo do nav (icon rail) — via data attribute, evita acionar
   a regeneração do Tailwind Play CDN ao adicionar classes via JS */
aside nav a.nav-link[data-active] {
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* Shimmer para skeletons */
@keyframes shimmer { to { background-position: -200% 0; } }
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Remoção de card ao concluir */
.removing {
  opacity: 0;
  transform: translateX(10px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton  { animation: none; background: #f1f5f9; }
  .removing  { transition: none; }
}