/* ==========================================================================
   IRON ROUTE — ONBOARDING RESPONSIVE (2026-07-31)

   POR QUÉ EXISTE ESTA HOJA Y POR QUÉ ES LA ÚLTIMA:

   El onboarding tenía tres defectos que lo volvían inusable, y los tres eran
   de tamaño, no de contenido:

     1. La tarjeta medía 820px FIJOS de alto en escritorio. En un portátil de
        768px de alto —que son casi todos— el botón «Continuar» quedaba FUERA
        de la pantalla, y el contenedor no tenía scroll. No es que costara
        llegar: era imposible pasar de paso.

     2. En iPhone se usaba `100vh`, que en Safari NO descuenta la barra
        inferior del navegador. El botón quedaba justo debajo de ella. La
        unidad correcta es `dvh` (dynamic viewport height), con `vh` de
        respaldo para navegadores viejos.

     3. Nada respetaba el área segura del notch ni la barra de gestos.

   Se arregla con CERO `!important`. Las 9 hojas anteriores acumulan 103
   `!important` —una sola tiene 42— y esa guerra de especificidad es
   precisamente por qué nadie se atrevía a tocar esto. Aquí se gana por orden
   de carga, que es como debe ganarse.
   ========================================================================== */

/* ── La ventana: alto REAL del viewport, no el teórico ──────────────────── */
.ob-overlay,
.ob-modal,
#ironroute-onboarding {
  height: 100vh;            /* respaldo para navegadores sin dvh */
  height: 100dvh;           /* el bueno: descuenta la barra de Safari */
  max-height: 100vh;
  max-height: 100dvh;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
}

/* ── La tarjeta: deja de medir 820px fijos ──────────────────────────────
   Columna con cabecera y pie fijos y el CUERPO desplazable. Así el botón
   «Continuar» está siempre a la vista, mida lo que mida la pantalla. */
.ob-card,
.ob-sheet,
.ob-container {
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  min-height: 0;            /* sin esto, flex no deja encoger y vuelve el bug */
  overflow: hidden;
}

.ob-body,
.ob-content,
.ob-step-content {
  flex: 1 1 auto;
  min-height: 0;            /* la línea que de verdad habilita el scroll */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.ob-header, .ob-footer,
.ob-sticky-header, .ob-sticky-footer {
  flex: 0 0 auto;
}

/* El pie, siempre alcanzable y por encima del área de gestos. */
.ob-footer,
.ob-sticky-footer {
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

/* ── Objetivos de toque: con guantes, 44 no alcanza ─────────────────────── */
.ob-btn,
.ob-btn-primary,
.ob-btn-secondary,
.ob-skip,
.ob-close,
.ob-back {
  min-height: 48px;
  min-width: 48px;
}

/* «Saltar» tiene que VERSE. Es la salida de quien solo quiere el mapa, y
   estaba escondido por un condicional invertido (ya corregido en el JS). */
.ob-skip {
  display: inline-flex;
  align-items: center;
  opacity: .85;
}
.ob-skip:hover, .ob-skip:focus-visible { opacity: 1; }

/* ── Teléfono en vertical ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ob-card, .ob-sheet, .ob-container {
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    margin: 0;
  }
  .ob-title, .ob-step-title { font-size: clamp(1.25rem, 6vw, 1.6rem); line-height: 1.2; }
  .ob-body, .ob-content, .ob-step-content { padding-left: 18px; padding-right: 18px; }
}

/* ── Teléfono en horizontal: el caso que nadie prueba ────────────────────
   Con 380px de alto, una cabecera y un pie fijos se comen la pantalla. Se
   encogen y el cuerpo se queda con lo que hay. */
@media (max-height: 500px) and (orientation: landscape) {
  .ob-header, .ob-sticky-header { padding-top: 6px; padding-bottom: 6px; }
  .ob-footer, .ob-sticky-footer { padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)); }
  .ob-title, .ob-step-title { font-size: 1.1rem; }
  .ob-illustration, .ob-hero, .ob-art { display: none; }  /* el dibujo cede antes que el botón */
  .ob-btn, .ob-btn-primary, .ob-btn-secondary { min-height: 44px; }
}

/* ── Tableta y escritorio ───────────────────────────────────────────────── */
@media (min-width: 641px) {
  .ob-card, .ob-sheet, .ob-container {
    width: min(680px, 92vw);
    max-height: min(760px, calc(100dvh - 48px));
    border-radius: 18px;
    margin: auto;
  }
}

/* Pantallas bajas (portátiles de 768px): aquí es donde el 820px fijo dejaba
   el botón fuera. El techo pasa a ser el viewport, no un número inventado. */
@media (min-width: 641px) and (max-height: 820px) {
  .ob-card, .ob-sheet, .ob-container {
    max-height: calc(100dvh - 32px);
  }
}

/* ── Respeto por quien pidió menos movimiento ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ob-overlay, .ob-card, .ob-sheet, .ob-step { transition: none; animation: none; }
}