/* ================================
   BASE / APP SHELL
================================ */
html, body {
  margin:0;
  padding:0;
}

.app-body {
  background-color:#f2f2f7;
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  color:#111827;
}

/* Centrado general tipo app */
.app-root {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.app-shell {
  width:100%;
  max-width:480px;
  margin:0 auto;
  padding:16px 16px 24px;
  display:flex;
  flex-direction:column;
}

/* HEADER */
.app-header {
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:10px;
  padding-bottom:4px;
}

.app-logo {
  height:72px;
  width:auto;
  object-fit:contain;
}

/* Steps */
.step {
  background:#fff;
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 30px rgba(15,23,42,0.08);
}

/* Loading overlay */
#loadingOverlay {
  position:fixed;
  top:0; left:0;
  width:100vw;
  height:100vh;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(3px);
  z-index:9999;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
#loadingOverlay.active {
  opacity:1;
  pointer-events:all;
}
.spinner {
  width:70px;
  height:70px;
  border:7px solid #ddd;
  border-top-color:#0d6efd;
  border-radius:50%;
  animation:spin 0.9s linear infinite;
}
@keyframes spin {
  to { transform:rotate(360deg); }
}
.loading-text {
  font-size:16px;
  font-weight:500;
  color:#111827;
  text-align:center;
  padding:0 24px;
}