/* checkFlow — prototipo PWA (diseño según ejemplo de frontend del cliente) */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  color: #0E1B2E;
  background: #0B1524;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: 'Space Grotesk', system-ui, sans-serif; margin: 0; letter-spacing: -.01em; }
.tnum { font-variant-numeric: tabular-nums; }
button { font-family: inherit; }
input, select { font-family: inherit; color: #0E1B2E; }
input:focus, select:focus { outline: 2px solid #1E5FDB; outline-offset: -1px; }

#app { display: flex; justify-content: center; min-height: 100dvh; }

/* marco de la app: en móvil ocupa todo, en desktop se centra como teléfono */
.frame {
  width: 100%;
  max-width: 430px;
  height: 100dvh;
  background: #F4F6F9;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 480px) {
  body { padding: 24px 0; }
  #app { align-items: center; }
  .frame {
    height: min(860px, calc(100dvh - 48px));
    border-radius: 40px;
    box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 13px #0a0f18, 0 0 0 15px rgba(255,255,255,.06);
  }
}

.screen-area { flex: 1; position: relative; overflow: hidden; }
.scroll { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) translateX(-50%); } to { opacity: 1; transform: translateY(0) translateX(-50%); } }
@keyframes pulseRing { 0% { transform: scale(.9); opacity: .7; } 70% { transform: scale(1.25); opacity: 0; } 100% { opacity: 0; } }