/**
 * flutcom.css — Estilos ÚNICAMENTE del framework
 *
 * Este archivo solo debe contener lo que el motor necesita para funcionar:
 *   · Barra de progreso de navegación (#fc-bar)
 *   · Animaciones de transición de vistas
 *
 * TODO lo demás (dark mode, cards, botones, tipografía)
 * va en style.css o en los archivos de la app.
 */

/* ─── Barra de progreso ───────────────────────────────────────────────────── */
#fc-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, #6366f1, #a78bfa);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
  transition: width 0.4s ease, opacity 0.3s ease;
}

/* ─── Transiciones de vista ──────────────────────────────────────────────── */
.fc-fade-out {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.fc-fade-in {
  animation: fcFadeIn 0.3s ease both;
}

@keyframes fcFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}