/* =============================================================================
   base.css — Reset + tipografía base + scaffold mobile/desktop
   ============================================================================= */

/* ------------------------------- Reset -------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  overflow-x: hidden;          /* sin scroll horizontal por accidente */
  max-width: 100vw;
}
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--neutral-900);
  background: var(--neutral-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
input, select, textarea { font: inherit; }

/* ------------------------------- Tipografía utilitaria ---------------------- */
.t-display { font-family: var(--font-display); letter-spacing: -0.02em; }
.t-xs   { font-size: var(--text-xs); }
.t-sm   { font-size: var(--text-sm); }
.t-base { font-size: var(--text-base); }
.t-lg   { font-size: var(--text-lg); }
.t-xl   { font-size: var(--text-xl); }
.t-2xl  { font-size: var(--text-2xl); }
.t-3xl  { font-size: var(--text-3xl); }
.t-4xl  { font-size: var(--text-4xl); }
.t-5xl  { font-size: var(--text-5xl); }
.t-bold { font-weight: var(--weight-bold); }
.t-semi { font-weight: var(--weight-semibold); }
.t-med  { font-weight: var(--weight-medium); }
.t-mute { color: var(--neutral-500); }
.t-sub  { color: var(--neutral-700); }
.t-inv  { color: var(--neutral-0); }
.t-center { text-align: center; }

/* ============================================================================
   LAYOUT — MOBILE-FIRST (default)
   ---------------------------------------------------------------------------
   Por default la app ocupa 100% del viewport: SIN marco, SIN notch decorativa,
   SIN status bar simulada. Esto garantiza que al abrir desde cualquier mobile
   se vea como app nativa, independiente del breakpoint que dispare el browser.

   El marco del iPhone se ACTIVA recién en desktop (min-width: 900px), abajo.
   ============================================================================ */
.stage {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--neutral-100);
  display: block;
  padding: 0;
}

.phone {
  width: 100%;
  height: 100vh;
  height: 100dvh;          /* dynamic viewport height — respeta UI del browser mobile */
  background: var(--neutral-0);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Sin border-radius, sin box-shadow, sin chasis simulado por default */
}

/* En default mobile la notch / status bar fake / frame-label están ocultas.
   Solo se muestran cuando estamos en modo desktop (preview). */
.phone::before { display: none; }
.status-bar    { display: none; }
.frame-label   { display: none; }
.status-bar.status-bar--dark { color: var(--neutral-900); }
.status-bar__icons { display: flex; gap: 6px; align-items: center; }

/* Contenedor scrollable principal — fila todo el .phone, scrollea internamente */
.screen {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  background: var(--neutral-100);
  scrollbar-width: none;
}
.screen::-webkit-scrollbar { display: none; }

/* En mobile real, headers respetan safe-area-inset (notch / dynamic island) */
.header-mobile {
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--space-4));
}
.screen-header {
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--space-4));
}
.bottom-nav {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
}

/* ============================================================================
   DESKTOP — Frame iPhone como mockup decorativo
   Disparo a partir de 900px (deja respirar a tablets verticales sin marco).
   ============================================================================ */
@media (min-width: 900px) {
  .stage {
    display: grid;
    place-items: center;
    padding: var(--space-7) var(--space-4);
    background:
      radial-gradient(1200px 600px at 10% 0%, rgba(108, 92, 231, 0.08), transparent 60%),
      radial-gradient(900px 500px at 90% 100%, rgba(15, 31, 75, 0.06), transparent 60%),
      var(--neutral-100);
  }

  .phone {
    width: var(--frame-width);
    height: var(--frame-height);
    min-height: 0;
    border-radius: 48px;
    box-shadow:
      0 0 0 12px #0A0E1F,
      0 0 0 14px #1B2B5E,
      var(--shadow-xl);
  }

  /* Notch decorativa */
  .phone::before {
    content: "";
    display: block;
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 120px; height: 28px;
    background: #0A0E1F;
    border-radius: var(--radius-full);
    z-index: 50;
  }

  /* Status bar simulada */
  .status-bar {
    display: flex;
    height: var(--safe-area-top);
    padding: 14px 28px 0;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: var(--weight-semibold);
    color: var(--neutral-0);
    position: relative;
    z-index: 30;
  }

  /* Etiqueta flotante "Pantalla X" arriba del frame */
  .frame-label {
    display: block;
    position: absolute;
    top: -36px; left: 0;
    font-size: var(--text-sm);
    color: var(--neutral-500);
    font-weight: var(--weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* En modo frame, el .screen es de altura fija (la del phone) */
  .screen {
    height: 100%;
    min-height: 0;
  }

  /* En desktop NO sumamos safe-area al header — el chasis ya provee el padding visual */
  .header-mobile { padding-top: var(--space-4); }
  .screen-header { padding-top: var(--space-4); }
  .bottom-nav    { padding-bottom: var(--safe-area-bottom); }
}

/* ------------------------------- Helpers -------------------------------------- */
.flex { display: flex; }
.grid { display: grid; }
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); } .gap-6 { gap: var(--space-6); }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.w-full { width: 100%; }
.relative { position: relative; }

/* Padding helpers */
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }