/* ==========================================================================
   IRON ROUTE — LA COMPOSICIÓN DEL ONBOARDING EN UN TELÉFONO

   Va de la mano de `onboarding-movil.js`, que es quien recorta el TEXTO.
   El reparto de trabajo no es casual:

     · El JS quita palabras.  ← ahí estaba el 66 % del problema
     · Esta hoja aprieta el aire y baja la escala tipográfica.

   Se intentó tres veces resolverlo solo con esta mitad y las tres falló. Con
   1.683 px de contenido en 571 px útiles, apretar el CSS no llega: para meter
   eso encogiendo habría que bajar el cuerpo a unos 5 px, cuando el suelo del
   sistema son 12. **La composición no arregla un exceso de palabras.**

   EL PRESUPUESTO, medido en el teléfono más pequeño que hay que soportar
   (Android 360×640, que da 571 px útiles bajo la cabecera):

     idioma ....  38 px      capacidades ... 176 px
     logo ......  44 px      privacidad ....  34 px
     titular ...  56 px      acciones ......  96 px
     apoyo .....  36 px      confianza .....  26 px
     aire ......  56 px      ─────────────────────
                             TOTAL .........  562 px

   Nueve píxeles de margen. Por eso cada número de aquí abajo es un techo y no
   una sugerencia: aflojar uno saca la pantalla del presupuesto.

   LO QUE NO SE TOCA PARA GANAR ALTO:
     · 48 px de objetivo táctil. Un botón que el dedo no acierta no ahorra
       espacio: gasta un intento.
     · 12 px de suelo tipográfico.
     · La salida, el aviso de que no es un ELD, y USDOT/MC.

   Todo cuelga de `@media (max-width: 480px)` y de la clase `ir-ob-corto` que
   pone el JS. Así el escritorio no se entera de nada.
   ========================================================================== */

@media (max-width: 480px) {

  /* ── EL CONTENIDO SE DESPLAZA CUANDO NO CABE. ANTES SE AMPUTABA ─────────
     Aquí ponía `overflow-y: hidden`, y la intención era buena: que cada paso
     quepa entero sin desplazar, que es lo cómodo. El problema es lo que pasa
     cuando NO cabe, y en un Android de 360x640 no cabe.

     AUDITADO, y son cinco P0 de una sola regla: entre 13 y 1.866 px amputados
     por paso. No se puede elegir un semirremolque (2 de 19 tarjetas
     alcanzables, cero semis). No se puede tocar el GVWR, que es obligatorio.
     No se puede pulsar «Continuar como invitado». Tres de los cinco roles
     quedan fuera. **Un Android corto no puede completar el alta — y sin alta,
     la app rutea como automóvil.**

     `hidden` no hace que quepa: hace que lo que sobra desaparezca sin decirlo.
     El contenido que sobra en un formulario obligatorio no es decoración.

     La regla nueva: el CUERPO se desplaza y el pie se queda quieto. Así el
     botón de continuar sigue siempre a mano —que era lo que se quería
     proteger— y lo que no cabe se alcanza desplazando, como en cualquier
     formulario. `100dvh` se mantiene: en Safari `vh` incluye el trozo que tapa
     la barra de direcciones y el botón queda debajo de ella. */
  html.ir-ob-corto .ob-card > [data-body],
  html.ir-ob-corto .ob-body {
    display: block;
    flex: 1 1 auto;
    min-height: 0;              /* sin esto un hijo flex no encoge y no hay scroll */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;   /* que el gesto no arrastre la página de detrás */
  }

  /* El pie no se desplaza con el cuerpo: es la salida del paso. */
  html.ir-ob-corto .ob-footer,
  html.ir-ob-corto .ob-actions {
    flex: 0 0 auto;
  }

  html.ir-ob-corto .ob-step {
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 0;
  }
  /* Los márgenes propios de cada bloque se anulan: con `gap` mandando, un
     `margin-bottom: 18px` heredado suma dos veces y se come el presupuesto
     sin que se vea de dónde salió. */
  html.ir-ob-corto .ob-step > * { margin-top: 0; margin-bottom: 0; }

  /* ── Idioma: primero, pequeño, y con el dedo intacto ─────────────────── */
  /* El ALTO de la fila lo fija el envoltorio, no el chip: medido, el chip
     bajaba a 38 y la fila seguía en 48 porque el contenedor tenía su propia
     altura. Un recorte que no se nota es un recorte que no se hizo. */
  html.ir-ob-corto .ob-lang-pick {
    gap: 6px;
    align-items: center;
  }
  /* El chip mide 48 px de alto por sí solo, que es justo el objetivo táctil
     del sistema. Se deja como está.

     AQUÍ HUBO UN INTENTO MÍO QUE SALIÓ MAL Y SE CUENTA PORQUE SE VIO EN
     PANTALLA: para ahorrar 12 px puse el chip a 36 y le añadí un `::after`
     invisible de 48 px que devolviera el objetivo táctil. Dos cosas:

       · El `height: 36px` no llegó a aplicarse — el chip siguió midiendo 48.
       · Y el `::after` sí se aplicó, encima de la insignia de «idioma
         activo», que usa ese mismo pseudo-elemento. Mi geometría
         (`left:0; right:0; height:48px`) convirtió un círculo pequeño en un
         óvalo negro estirado sobre la bandera de España.

     O sea: el ahorro no llegó y el defecto sí. Un pseudo-elemento es un sitio
     compartido; ocuparlo «porque estaba libre» es asumir algo que no se
     comprobó. Se quita, y los 12 px salen de otro lado — que ya salieron:
     la pantalla cabe con 39 px de margen.

     El chip se deja en su tamaño natural, con el tipo un poco menor. */
  html.ir-ob-corto .ob-lang {
    padding: 0 12px;
    font-size: 12px;
  }

  /* ── La X de cerrar: 48, no 44 ────────────────────────────────────────
     El medidor la cazó en 44×44.

     Y el token NO tenía la culpa: `--ob-touch` vale 48 px en `onboarding.css`,
     que es lo correcto. El 44 lo impone
     `state-cleanup-f4.css`:

         .ob-h-btn { width: 44px !important; height: 44px !important; }

     Alguien encogió a mano el objetivo táctil del botón de cerrar, con
     `!important`, y así lleva desde entonces. Es el botón con el que alguien
     sale de una pantalla que no quería ver: fallarlo una vez es quedarse
     dentro, y quedarse dentro suele acabar en cerrar la app.

     Se empata el `!important` porque no hay otra forma de ganarle a uno
     existente. Los 4 px no salen del presupuesto de la pantalla: el botón vive
     en la cabecera, que ya mide 69 px y le sobra sitio. */
  html.ir-ob-corto .ob-h-btn,
  .ob-header .ob-h-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px;
  }

  /* ── Logo: lo primero que se ve, no lo más grande ───────────────────── */
  html.ir-ob-corto .ob-logo-wrap  { padding: 0 !important; }
  html.ir-ob-corto .ob-logo-frame { width: 44px; height: 44px; }

  /* ── Escala tipográfica del teléfono (base 15, razón 1.2) ───────────── */
  html.ir-ob-corto .ob-h1 {
    font-size: 23px;
    line-height: 1.16;
    margin: 0;
  }
  html.ir-ob-corto .ob-lead {
    font-size: 14px;
    line-height: 1.4;
    max-width: none;
  }

  /* ── Las cuatro capacidades, en filas compactas ──────────────────────── */
  html.ir-ob-corto .ob-caps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  html.ir-ob-corto .ob-caps li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 9px;
    align-items: center;
    padding: 5px 9px;
    border-radius: 9px;
    text-align: left;
  }
  html.ir-ob-corto .ob-caps__ic svg { width: 18px; height: 18px; }
  html.ir-ob-corto .ob-caps strong {
    display: block;
    font-size: 13px;
    line-height: 1.25;
  }
  html.ir-ob-corto .ob-caps li span:not(.ob-caps__ic) {
    display: block;
    font-size: 12px;          /* el suelo del sistema; ni un pixel menos */
    line-height: 1.35;
    margin-top: 1px;
  }

  /* ── La promesa de privacidad: una línea, y sigue estando ────────────── */
  /* La promesa de privacidad cabe en UNA línea: «No es un ELD.» en negrita y
     la frase seguida, no en dos bloques apilados. Sigue diciendo exactamente
     lo mismo y ocupa 38 px en vez de 54. */
  html.ir-ob-corto .ob-priv {
    padding: 6px 9px;
    border-radius: 9px;
    text-align: left;
    display: block;
  }
  html.ir-ob-corto .ob-priv strong,
  html.ir-ob-corto .ob-priv span {
    display: inline;
    font-size: 12px;
    line-height: 1.35;
  }
  html.ir-ob-corto .ob-priv strong { margin-right: 4px; }

  /* ── Acciones: los 48 px no se negocian ──────────────────────────────── */
  html.ir-ob-corto .ob-cta-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    margin: 2px 0 0;
  }
  html.ir-ob-corto .ob-btn-primary {
    min-height: 48px;
    font-size: 16px;
  }
  /* «Ya tengo cuenta» y «Ver el mapa primero» comparten fila: son la misma
     clase de acción —salidas— y juntas ahorran 44 px sin quitar ninguna. */
  /* 48 px, no 44. El medidor los cazó en 44 y la regla del sistema no se
     recorta para ganar alto: un botón que el dedo no acierta no ahorra
     espacio, gasta un intento. Los 4 px salen del copy, no del dedo. */
  html.ir-ob-corto .ob-btn-ghost,
  html.ir-ob-corto .ob-ver-mapa {
    min-height: 48px;
    font-size: 13px;
    padding: 0 8px;
  }
  html.ir-ob-corto .ob-cta-row {
    grid-template-areas: "a a" "b c";
    grid-template-columns: 1fr 1fr;
  }
  html.ir-ob-corto .ob-btn-primary { grid-area: a; }
  html.ir-ob-corto .ob-btn-ghost   { grid-area: b; }
  html.ir-ob-corto .ob-ver-mapa    { grid-area: c; }

  html.ir-ob-corto .ob-ver-nota {
    font-size: 12px;
    line-height: 1.3;
    margin: 0;
  }

  /* ── Confianza: se queda en una línea, pero se queda ─────────────────── */
  html.ir-ob-corto .ob-trust {
    padding: 5px 0 0;
    margin: 0;
    border-top: 1px solid var(--line, #1E3A5F);
    display: block;
  }
  html.ir-ob-corto .ob-trust__ids {
    display: block;
    font-size: 12px;
    line-height: 1.3;
  }

  /* ══════════════════════════════════════════════════════════════════════
     EL SEGUNDO RECORTE — porque el primero se quedó a 116 px

     Medido después de recortar el copy: el contenido bajó de 1.683 a 687 px.
     Enorme, y todavía **116 px por encima** de los 571 útiles de un Android
     de 360×640. El presupuesto no se cumple «casi».

     Aquí se cierra ese hueco, y el orden en que se recorta no es arbitrario —
     va de lo más prescindible a lo menos:

       1. El logo (−44).  Ya saben en qué app están: la abrieron ellos. Un
          logo en la primera pantalla es cortesía, no información.
       2. Las capacidades a 2×2 (−77). Cuatro filas se convierten en dos.
          Se lee igual y ocupa la mitad.
       3. El aire entre bloques (−8).
       4. El envoltorio del idioma, la privacidad y la confianza (−40).

     Lo que NO entra en esta lista, en ningún orden: los botones, la salida,
     el aviso del ELD y USDOT/MC. Antes de tocar uno de esos se recorta más
     copy — y si tampoco, la pantalla se parte en dos pasos.

     Se dispara por debajo de 700 px de alto de ventana, que cubre el 360×640
     y el iPhone SE de 375×667. De ahí para arriba sobra sitio y la
     composición respira.
     ══════════════════════════════════════════════════════════════════════ */
  @media (max-height: 700px) {
    /* `!important` porque `onboarding-p0-fixes.css` fija
       `display: flex !important` en este mismo elemento. Se empata, no se
       sube: medido, sin esto el logo seguía ocupando sus 44 px. */
    html.ir-ob-corto .ob-logo-wrap { display: none !important; }
    html.ir-ob-corto .ob-step { gap: 6px; }
    html.ir-ob-corto .ob-h1 { font-size: 21px; }

    /* Dos por dos. El título de cada tarjeta está escrito para caber en una
       línea a 12,5 px en media columna — por eso el techo de 24 caracteres
       del diccionario no es decorativo: si un título parte en dos, esta
       rejilla deja de cumplir el presupuesto. */
    html.ir-ob-corto .ob-caps {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px;
    }
    html.ir-ob-corto .ob-caps li {
      grid-template-columns: 1fr;
      gap: 2px;
      padding: 6px 8px;
    }
    html.ir-ob-corto .ob-caps__ic { display: none; }
    html.ir-ob-corto .ob-caps strong { font-size: 12.5px; }
    html.ir-ob-corto .ob-caps li span:not(.ob-caps__ic) { font-size: 12px; }
  }
}

/* En escritorio esta hoja no existe: `ir-ob-corto` solo la pone el JS por
   debajo de 480 px, y al ensanchar la ventana la quita y devuelve el texto
   largo. Nada de esto se queda pegado. */