/* Reset para asegurar centrado y evitar desplazamientos */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  overflow-x: hidden; /* evita que aparezca desplazamiento horizontal */
}

/* Ajuste para evitar que el footer salte hacia arriba */
#app {
  transition: opacity 0.3s ease;
  min-height: calc(100vh - 50px); /* ajusta 200px según el header + footer */
  display: flex;
  flex-direction: column;
  justify-content: center; /* centrado vertical del loader si es necesario */
}

/* Loader centrado en el espacio reservado */
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 250px;
}

.loader .spinner {
  border: 4px solid rgba(255,255,255,0.2);
  border-top: 4px solid #4da3ff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}