/* ==========================================================================
   IRON ROUTE — EL ONBOARDING DEJA DE SER UN POP-UP

   LA CRÍTICA DEL DUEÑO, TRES VECES SEGUIDAS:
   «eso para un frame o un pop up y así no» · «sigue igual el onboarding».

   Tenía razón las tres. Yo mejoré el CONTENIDO y dejé la presentación intacta:
   `.ob-card` es una caja de `720×820` centrada, con `border-radius`, sombra y
   un fondo oscurecido detrás. Eso es un diálogo de cookies, no la puerta de
   entrada de un producto profesional — y en un monitor de 27" es una cajita en
   el centro con una barra de scroll interna y el contenido cortado a la mitad.

   Un onboarding es la PRIMERA IMPRESIÓN del producto. Si se presenta como algo
   que hay que quitarse de encima, la gente se lo quita de encima.

   ESTA HOJA LO CONVIERTE EN PANTALLA COMPLETA. Va la última y gana por orden
   de carga, sin un solo `!important`.

   LO QUE CAMBIA Y POR QUÉ:
     1. La tarjeta ocupa toda la pantalla. Sin bordes redondeados, sin sombra,
        sin fondo oscurecido detrás: no hay un «detrás», ESTO es la pantalla.
     2. El scroll pasa al CUERPO, no a una caja interna. Una barra de scroll
        dentro de un recuadro dentro de la pantalla es el síntoma visual de
        «esto es un modal».
     3. El contenido se centra en una columna legible (máx. 780px) en vez de
        estirarse a 1440. Una línea de texto de 1400px no la lee nadie.
     4. En escritorio se reparte en dos columnas: el progreso a la izquierda,
        fijo, y el contenido a la derecha. Un teléfono estirado, nunca.
     5. La X y «Saltar» dejan de parecer «cerrar el anuncio» y pasan a ser una
        salida discreta arriba a la derecha.
   ========================================================================== */

/* ── 1 · A pantalla completa ─────────────────────────────────────────────── */
.ob-root {
  display: block;
}

.ob-backdrop {
  /* Ya no es un «fondo detrás del modal»: es EL fondo de la pantalla. */
  position: fixed;
  inset: 0;
}

.ob-card {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;      /* la barra de Safari no puede comerse el botón */
  max-height: none;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  /* La animación de «modal que aparece» sobraba: esto no aparece encima de
     nada, es la pantalla. */
  transform: none;
}
.ob-root.ob-show .ob-card { transform: none; }

/* ── 2 · El scroll va en el cuerpo ──────────────────────────────────────── */
.ob-card > [data-body],
.ob-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── 3 · Una columna legible, centrada ──────────────────────────────────── */
.ob-step {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 20px 32px;
}

/* ── 4 · La cabecera y el pie, pegados a los bordes ─────────────────────── */
.ob-header {
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line, #1E3A5F);
}
.ob-footer {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line, #1E3A5F);
}
.ob-header > *,
.ob-footer > * {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* ── 5 · EL TITULAR CON LA CAJA BLANCA ──────────────────────────────────────
   En la captura, «Navegación GPS profesional para camiones» sale dentro de un
   rectángulo blanco con borde. No es un adorno: es un `background` o un
   `-webkit-text-stroke` heredado de alguna de las nueve hojas del onboarding
   que se aplica a un `h1` sin fondo propio. Se neutraliza aquí, que es donde
   se puede hacer sin tocar las nueve.
   ────────────────────────────────────────────────────────────────────────── */
.ob-welcome .ob-h1,
.ob-step .ob-h1 {
  background: none;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  -webkit-text-stroke: 0;
  text-shadow: none;
  color: var(--text, #F5F7FA);
}

/* ── LA «CAJA» ALREDEDOR DEL TITULAR NO ERA UN BORDE ────────────────────────

   Se midió: `border: 0px none`, `background: rgba(0,0,0,0)`, `box-shadow:
   none`. Lo que dibuja el rectángulo es un **anillo de foco**:
   `outline: rgb(212,168,75) solid 2px` — el dorado del sistema.

   Y está ahí por una buena razón. El `<h1>` lleva `tabindex="-1"` y el
   onboarding le pone el foco al cambiar de paso, que es el patrón correcto:
   sin eso, un lector de pantalla no anuncia que la pantalla cambió y la
   persona se queda oyendo el paso anterior.

   El problema no es el foco: es que se PINTE. Un anillo puesto por código,
   sobre alguien que está usando el ratón, se lee como un recuadro decorativo
   mal hecho — es exactamente lo que el dueño señaló dos veces.

   La regla estándar para esto es distinguir el foco programático del foco por
   teclado. `:focus-visible` ya lo hace: el navegador solo lo activa cuando la
   persona llegó navegando. Así que se apaga el anillo en `:focus` cuando NO
   es `:focus-visible`, y **con teclado se sigue viendo**, que es cuando hace
   falta.

   PRIMER INTENTO, Y POR QUÉ NO BASTÓ: se apagó con
   `:focus:not(:focus-visible)` y el anillo **siguió saliendo**. Medido: el
   navegador considera `:focus-visible` un foco movido por código cuando no ha
   habido una interacción de puntero previa. O sea que la distinción no
   resuelve este caso.

   LO QUE SÍ LO RESUELVE, y además es lo correcto: `tabindex="-1"` significa,
   por definición, **que al teclado no se llega ahí nunca**. No hay ninguna
   situación en la que alguien navegando con Tab aterrice en este titular, así
   que no hay ningún caso de teclado que preservar. Se apaga y punto.

   Lo que NO se puede hacer es `outline: 0` a secas sobre cualquier elemento
   —que es lo que había antes en el bloque de arriba—: eso se lleva por
   delante el anillo de los botones y los enlaces, que sí se recorren con Tab
   y sí necesitan verse. Por eso la regla va atada a `[tabindex="-1"]`.
   ────────────────────────────────────────────────────────────────────────── */
.ob-root [tabindex="-1"]:focus,
.ob-card [tabindex="-1"]:focus,
.ob-h1[tabindex="-1"]:focus,
.ob-h1[tabindex="-1"]:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ── 6 · Escritorio: UNA columna, centrada ──────────────────────────────────

   LO QUE HABÍA AQUÍ ESTABA MAL, Y SE VE EN LA CAPTURA DEL DUEÑO.

   Esta hoja convertía `.ob-card` en una rejilla de dos columnas —300 px de
   raíl a la izquierda y el resto para el contenido— con la idea de poner ahí
   el progreso. **El raíl nunca se llenó.** Era un `::before` con
   `content: ''`: un degradado y nada más. Cero texto, cero pasos, cero
   información.

   Medido a 1920×1080:

     · `.ob-card`  → rejilla `300px 1620px`
     · `.ob-step`  → 720 px de ancho colocado en x=322
     · su centro   → 682 px, cuando el centro de la pantalla es 960

   O sea: **una franja negra vacía de 300 px a la izquierda y el texto 278 px
   descentrado**. Y la cabecera —con «Saltar» y la X— empezaba en x=300, así
   que tampoco llegaba al borde.

   Un elemento decorativo que empuja el contenido fuera del centro no es un
   adorno: es un defecto de composición. Y la regla es la de siempre — entre
   dos diseños equivalentes, el más simple. El raíl no aportaba nada que no
   aporte ya la barra de pasos que va dentro del propio contenido.

   ASÍ QUE SE QUITA. Una sola columna, centrada de verdad en la pantalla, con
   el ancho de línea acotado para que se pueda leer.
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) and (pointer: fine) {
  /* Se deshace explícitamente la rejilla: si esta hoja se cargara junto a una
     versión vieja en caché, `display: flex` gana por orden y el raíl no
     vuelve. */
  .ob-card {
    display: flex;
    flex-direction: column;
  }
  .ob-card::before { content: none; display: none; }

  /* El contenido, centrado en TODO el ancho de la pantalla. */
  .ob-step {
    padding: 40px 32px 56px;
    margin: 0 auto;
    max-width: 720px;
  }

  /* La cabecera y el pie ocupan el ancho completo: la X y «Saltar» van a la
     esquina, que es donde se buscan. Su CONTENIDO se alinea con la columna
     del texto para que nada quede a la deriva en un monitor de 27". */
  .ob-header,
  .ob-footer { width: 100%; }

  /* 45–75 caracteres por línea. A 16 px, 720 px dan unos 90 — demasiados: la
     vista pierde el renglón al volver a la izquierda. La prosa se acota a
     620; las rejillas de tarjetas siguen usando el ancho entero. */
  .ob-step > p,
  .ob-sub,
  .ob-lead { max-width: 620px; margin-left: auto; margin-right: auto; }

  /* Con ratón el objetivo puede bajar de 48 a 40, nunca menos. */
  .ob-btn { min-height: 40px; }
}

/* ── 6b · QUE «COMENZAR» QUEPA SIN BAJAR ────────────────────────────────────

   MEDIDO en la misma pantalla del dueño (1920×1080, ventana real 1014 px):
   el contenido del primer paso mide **1122 px**. O sea que el botón principal
   —«Comenzar», que es la única acción de esta pantalla— cae **por debajo del
   borde**, y con él el aviso de USDOT/MC.

   Un botón primario que hay que buscar desplazando no es un detalle de
   estilo. Es la acción que la pantalla existe para provocar, y quien no la ve
   asume que la página no ha cargado del todo.

   De dónde salían esos 1122 px, medido hijo por hijo:

     · logo …………… 194 px  ← el bloque más alto de la pantalla, y la imagen
                             ni siquiera carga (el archivo devuelve 404)
     · relleno ……… 96 px  (40 arriba + 56 abajo)
     · titular ……… 150 px
     · entradilla … 123 px
     · capacidades  296 px
     · privacidad … 107 px
     · acciones ……  68 px
     · confianza ……  77 px

   Se recorta el aire, no el contenido: no se quita ni una frase. El titular,
   las cuatro capacidades, la promesa de privacidad y los datos de USDOT/MC
   siguen enteros — solo dejan de estar separados por el espacio de un
   monitor que casi nadie tiene.

   Va acotado a `max-height: 1200px` para que en una pantalla de verdad alta
   la composición respire como estaba pensada.
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) and (max-height: 1200px) and (pointer: fine) {
  .ob-step { padding: 20px 32px 28px; }

  /* El logo baja de 194 a ~100: sigue siendo lo primero que se ve, deja de
     ser lo más grande de la pantalla.

     El alto NO está en el `padding` del envoltorio sino en `.ob-logo-frame`,
     que mide 160×160 fijos. Y el `padding` del envoltorio va con `!important`
     en `onboarding-p0-fixes.css`, así que hay que igualarlo — es el precio de
     los 103 `!important` que ya hay repartidos por estas nueve hojas, y por
     eso aquí no se añade ninguno nuevo salvo el que hace falta para empatar
     con uno existente. */
  .ob-logo-wrap  { padding: 4px 0 6px !important; }
  .ob-logo-frame { width: 92px; height: 92px; }

  /* `.ob-welcome .ob-h1` (dos clases) gana a `.ob-h1` (una) por
     especificidad, aunque esta hoja se cargue después. Se escribe con el
     mismo peso en vez de subirlo con `!important`. */
  .ob-welcome .ob-h1,
  .ob-step .ob-h1 { margin-top: 4px; margin-bottom: 8px; }
  .ob-lead { margin-bottom: 12px; }
  .ob-caps { margin-bottom: 12px; }
  .ob-priv { padding-top: 9px; padding-bottom: 9px; margin-bottom: 12px; }

  .ob-cta-row  { margin-top: 16px; }
  .ob-trust    { padding-top: 10px; }
  .ob-lang-pick { margin-bottom: 0; }
}

/* ── 6c · LA ESQUINA DE ARRIBA A LA DERECHA, DONDE SE PISABAN TRES COSAS ────

   MEDIDO a 375×812, que es un iPhone normal:

     .ob-skip      48×48 @ x=321  (borde derecho 369 — pegado al canto)
     .ob-h-btn     24×44 @ x=375  ←← LA X ESTÁ FUERA DE LA PANTALLA
     .ob-lang-pick 196×48 @ x=161 ←← y encima, tapando a «Saltar»

   **En un teléfono no se puede cerrar el onboarding con la X.** El botón
   existe, responde, y está pintado más allá del borde derecho. Queda
   «Saltar», que salva la situación por los pelos — pero la X es donde la
   gente busca cerrar, y no estar es no estar.

   POR QUÉ: `onboarding-p0-fixes.css` fija
   `grid-template-columns: 44px 1fr 44px !important` por debajo de 480 px. La
   tercera columna mide 44 px y tiene que contener «Saltar» (48) MÁS la X
   (44): unos 98 px. Lo que no cabe se sale, y en una rejilla se sale hacia
   fuera, no hacia dentro.

   Un `!important` con un ancho fijo es una promesa de que el contenido nunca
   crecerá. Aquí creció — se añadió «Saltar» — y nadie volvió a mirar la
   promesa.

   Y aparte, el selector de idioma va `position: absolute; top: 14px;
   right: 18px`, o sea clavado exactamente en esa misma esquina. Dos cosas
   distintas peleando por el mismo sitio, en las dos superficies.

   LA SOLUCIÓN, sin subir la escalada de `!important` más de lo justo:
     · La tercera columna pasa a `auto`: se lleva el ancho que necesite y el
       centro (los puntitos del paso) cede, que es lo que puede ceder.
     · El idioma sale de la esquina y baja al flujo, centrado arriba del
       contenido. Es además donde tiene sentido: elegir idioma es la primera
       decisión, no un adorno de la barra.
   ────────────────────────────────────────────────────────────────────────── */
.ob-lang-pick {
  position: static;
  justify-content: center;
  margin: 0 auto 10px;
}

@media (max-width: 480px) {
  /* `auto` en vez de 44px fijos: el `!important` iguala al que ya estaba
     puesto en `onboarding-p0-fixes.css`; no se sube el peso, se empata. */
  .ob-header { grid-template-columns: 44px minmax(0, 1fr) auto !important; }

  /* Que el bloque de acciones no se salga aunque crezca de nuevo. */
  .ob-h-actions {
    justify-self: end;
    flex-wrap: nowrap;
    min-width: 0;
  }
  /* «Saltar» se aprieta un poco para dejarle sitio a la X. El objetivo sigue
     en 44 px de alto, que es lo que decide si el dedo acierta. */
  .ob-skip { padding: 0 10px; font-size: 13px; }

  /* Los puntitos del paso son lo único prescindible de esa fila: se recortan
     antes que un botón. */
  .ob-h-mid { min-width: 0; overflow: hidden; }
}

/* ── 7 · La salida, discreta ────────────────────────────────────────────── */
.ob-header [data-skip],
.ob-header [data-close] {
  opacity: 0.75;
}
.ob-header [data-skip]:hover,
.ob-header [data-close]:hover { opacity: 1; }

/* ── 8 · Apaisado y pantallas bajas ─────────────────────────────────────── */
@media (max-height: 560px) {
  .ob-step { padding: 14px 18px 20px; }
  .ob-logo-wrap { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ob-card, .ob-root { transition: none; animation: none; }
}

/* ── 9 · NINGÚN AVISO ENCIMA DEL ONBOARDING ─────────────────────────────────
   En la captura del dueño flotaba «🌤 Sin alertas climáticas en el área»
   encima del titular. Envolver `showToast` no bastó: varios módulos crean el
   nodo del aviso a mano, sin pasar por esa función.

   Así que se corta también en CSS, que funciona sin importar quién lo cree.
   Es defensa en profundidad, no redundancia: el JS los ENCOLA para soltarlos
   después (por si alguno importa) y esto garantiza que ninguno se vea mientras
   tanto, incluido el que escriba el módulo que se añada mañana.
   ────────────────────────────────────────────────────────────────────────── */
html.ir-pre-onboard .ir-toast,
html.ir-pre-onboard .toast,
html.ir-pre-onboard .ir-conn-banner,
html.ir-pre-onboard [class*="toast"]:not(.ob-toast),
html.ir-pre-onboard .ir-alert-fab {
  display: none;
}