/* Reset y comportamiento global. */
* { box-sizing: border-box; margin: var(--s-0); padding: var(--s-0); }
html { overflow-x: hidden; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--sterling-bg);
  color: var(--ink-900);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }

/* Escenario que centra el dispositivo. */
.device-stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s-4);
}

/* Marco del dispositivo simulado. */
.device {
  width: var(--device-w);
  min-height: var(--device-h);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--el-3);
}

/* Barra superior del sistema. */
.status-bar {
  min-height: var(--safe-top);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--s-0) var(--s-4);
  font-size: var(--ui-sm);
  line-height: var(--ui-sm-lh);
  font-weight: var(--fw-semibold);
}
.status-island {
  width: var(--island-w);
  height: var(--island-h);
  border-radius: var(--r-pill);
  background: var(--pure-black);
}
.status-icons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s-1);
}

/* El dispositivo real ya proporciona la barra de estado; se conserva su hueco. */
.status-bar,
.mybank-status-bar {
  visibility: hidden;
}

/* Contenido principal e indicador inferior. */
.screen-body {
  flex: 1;
  min-width: 0;
  padding-right: var(--pad-content);
  padding-left: var(--pad-content);
}
.home-indicator {
  min-height: var(--safe-bottom);
  display: grid;
  place-items: center;
}
.home-indicator::before {
  width: var(--indicator-w);
  height: var(--indicator-h);
  border-radius: var(--r-pill);
  background: var(--ink-300);
  content: '';
}

/* Adaptación del marco a una pantalla móvil real. */
@media (max-width: 640px) {
  .device-stage { display: block; padding: var(--s-0); }
  .device {
    width: 100%;
    min-height: 100vh;
    border: 0;
    border-radius: var(--r-none);
    box-shadow: var(--el-flat);
  }
}

/* Experiencia instalada en la pantalla de inicio de iOS. */
html.standalone,
html.standalone body {
  width: 100%;
  min-height: 100%;
  overscroll-behavior: none;
}

html.standalone body {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

html.standalone .device-stage {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--s-0);
}

html.standalone .device {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: none;
  padding-right: env(safe-area-inset-right, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  border: 0;
  border-radius: var(--r-none);
  box-shadow: var(--el-flat);
}

/* La barra conserva solo el área segura real; su UI simulada desaparece. */
html.standalone :is(.status-bar, .mybank-status-bar) {
  height: env(safe-area-inset-top, 0px);
  min-height: env(safe-area-inset-top, 0px);
  max-height: env(safe-area-inset-top, 0px);
  flex: 0 0 env(safe-area-inset-top, 0px);
  overflow: hidden;
  padding-top: var(--s-0);
  padding-bottom: var(--s-0);
  visibility: hidden !important;
}

/* iOS aporta su propio indicador; el componente solo reserva el safe area. */
html.standalone .home-indicator {
  height: env(safe-area-inset-bottom, 0px) !important;
  min-height: env(safe-area-inset-bottom, 0px) !important;
  flex: 0 0 env(safe-area-inset-bottom, 0px) !important;
}

html.standalone .home-indicator::before { display: none !important; }

/* Las pantallas sin indicador propio también protegen sus acciones inferiores. */
html.standalone .device:not(:has(.home-indicator)):not(.bank-app) {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

html.standalone :is(a, button, input, select, textarea, [role='button']) {
  -webkit-tap-highlight-color: transparent;
}

html.standalone :is(a, button, [role='button']) { touch-action: manipulation; }

html.standalone :is(button, [role='button']) {
  -webkit-user-select: none;
  user-select: none;
}