/* Estilos complementarios a Tailwind (CDN) */
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.step-panel {
  display: none;
}
.step-panel.active {
  display: block;
  animation: fadeIn 0.25s ease-in-out;
}

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

.field-error {
  color: #b91c1c;
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

input.invalid, select.invalid, textarea.invalid {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 1px #dc2626;
}

.chip-btn {
  transition: all 0.15s ease-in-out;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------
   mopcion — Landing page / vista toggle
   --------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

#wizardModule.hidden,
#landingPage.hidden {
  display: none;
}

/* Animación de aparición al hacer scroll */
.fade-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Si JS no llega a inicializar el observer, no dejar el contenido invisible */
.no-js-animations .fade-up {
  opacity: 1;
  transform: none;
}