/* =============================================================================
   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;
}

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; }

/* ------------------------------- Scaffold mockup mobile --------------------- */
/* Frame iPhone 14 (390x844) centrado en la página para mostrar wireframes */
.stage {
  min-height: 100vh;
  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);
  background: var(--neutral-0);
  border-radius: 48px;
  box-shadow:
    0 0 0 12px #0A0E1F,
    0 0 0 14px #1B2B5E,
    var(--shadow-xl);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Notch decorativa del iPhone */
.phone::before {
  content: "";
  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 (9:41, batería, wifi) */
.status-bar {
  height: var(--safe-area-top);
  padding: 14px 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--neutral-0);
  position: relative;
  z-index: 30;
}
.status-bar.status-bar--dark { color: var(--neutral-900); }
.status-bar__icons { display: flex; gap: 6px; align-items: center; }

/* Contenedor scrollable principal de la pantalla mobile */
.screen {
  height: 100%;
  overflow-y: auto;
  scroll-behavior: smooth;
  background: var(--neutral-100);
  /* Ocultamos scrollbar visualmente */
  scrollbar-width: none;
}
.screen::-webkit-scrollbar { display: none; }

/* Etiqueta flotante de "Pantalla X — Nombre" arriba del frame */
.frame-label {
  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;
}

/* ------------------------------- Responsive ----------------------------------
   En mobile real (<= 600px) ocultamos el frame del iPhone, notch, status bar
   simulada y el label. La app pasa a ocupar 100% del viewport para que se
   vea como app nativa. En desktop seguimos mostrando el mockup centrado.
   ---------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .stage {
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--neutral-100);
    display: block;
  }
  .phone {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
  .phone::before { display: none; }
  .frame-label   { display: none; }
  .status-bar    { display: none; }

  /* El header propio respeta safe-area-inset del dispositivo (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));
  }

  /* Si los tabs estaban sticky bajo screen-header de 73px, en mobile el header
     ahora cambia de alto por safe-area: dejamos que los tabs scrolleen naturalmente. */
  .tabs { position: static; }

  /* Bottom nav respeta safe-area inferior real (home indicator) */
  .bottom-nav {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
  }
}

/* ------------------------------- 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); }