/* Base y shell de la app. Mobile first (390×844); en desktop se ve dentro de un marco de celular. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-default);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }

[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--primary-400); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Escenario y marco de celular ---------- */

.stage {
  min-height: 100dvh;
  display: grid;
  place-items: center;
}

.device {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--bg-app);
  isolation: isolate;
}

@media (min-width: 600px) {
  body {
    background: var(--stage-bg);
  }
  .stage { padding: 32px 16px; }
  .device {
    width: 390px;
    min-height: 0;
    height: min(844px, calc(100dvh - 64px));
    border-radius: 48px;
    box-shadow:
      0 0 0 10px #151c19,
      0 0 0 11px rgba(255, 255, 255, 0.06),
      0 40px 80px rgba(0, 0, 0, 0.5);
  }
}

/* Modo ruta (oscuro) por pantalla */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: max(env(safe-area-inset-top), 16px) 16px max(env(safe-area-inset-bottom), 16px);
}
.screen--route {
  background:
    radial-gradient(420px 320px at 50% 28%, var(--glow), transparent 70%),
    var(--route-bg);
  color: var(--route-text);
}

/* Entrada de pantalla: corta y desde abajo */
.screen-enter {
  animation: screen-in var(--dur-base) var(--ease-out) both;
}
@keyframes screen-in {
  from { opacity: 0; transform: translateY(12px); }
}

/* ---------- Botones (kit: primario / secundario / terciario) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: 0 var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-press) var(--ease-out), background-color 160ms ease;
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--primary-500); color: var(--text-inverse); }
.btn--secondary { background: transparent; border-color: var(--primary-500); color: var(--primary-500); }
.btn--ghost { background: transparent; color: var(--text-link); text-decoration: underline; padding: 0 var(--space-3); }
.btn--secondary { border-color: var(--accent-border); color: var(--accent-text); }
.btn--block { width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--primary-600); }
}

@media (prefers-reduced-motion: reduce) {
  .screen-enter { animation-name: fade-in; }
  @keyframes fade-in { from { opacity: 0; } }
}

.view { position: absolute; inset: 0; }