/* ==========================================================================
   IRON ROUTE — ONBOARDING v2

   POR QUÉ UNA HOJA MÁS Y NO UNA REESCRITURA DE LAS NUEVE QUE HAY:

   El onboarding arrastra 9 hojas con 103 `!important` repartidos. Reescribirlas
   todas en caliente, sobre un producto en producción, es la forma más rápida de
   romper cinco pantallas para arreglar una. Esta hoja va LA ÚLTIMA y gana por
   orden de carga, no a codazos: **cero `!important` en todo el archivo**.

   Lo que cambia:
     · La bienvenida deja de ser un folleto de tres viñetas y pasa a decir algo.
     · Los permisos tienen su pantalla, legible con el pulgar.
     · El escritorio deja de ser un teléfono estirado: dos columnas de verdad.
     · Contraste medido, no «se ve bien en mi pantalla».
   ========================================================================== */

/* ── Escala tipográfica de la pantalla de bienvenida ───────────────────── */
.ob-welcome .ob-h1 {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(24px, 5.2vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 10px 0 12px;
  text-wrap: balance;
}

/* El párrafo que de verdad convence. 16px de suelo: es texto para leer, no
   una etiqueta, y por debajo de eso nadie lo lee en un teléfono al sol. */
.ob-lead {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(15px, 3.6vw, 17px);
  line-height: 1.55;
  color: var(--text-muted, #9FB0C3);
  margin: 0 0 18px;
  max-width: 62ch;
}
.ob-lead strong { color: var(--text, #F5F7FA); }

/* ── Las cuatro capacidades ────────────────────────────────────────────── */
.ob-caps {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ob-caps li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-2, #10294A);
  border: 1px solid var(--line, #1E3A5F);
}
.ob-caps__ic {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, #F58220);
}
.ob-caps__ic svg { width: 22px; height: 22px; }
.ob-caps li strong {
  display: block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 3px;
  color: var(--text, #F5F7FA);
}
.ob-caps li span {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted, #9FB0C3);
}

/* ── La promesa de privacidad ──────────────────────────────────────────── */
.ob-priv {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.08);
  margin-bottom: 18px;
}
.ob-priv strong {
  font-size: 14px;
  color: var(--success, #10B981);
  font-family: 'DM Sans', system-ui, sans-serif;
}
.ob-priv span {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted, #9FB0C3);
}

/* ── Salida honesta y confianza ────────────────────────────────────────── */
.ob-btn-link {
  background: none;
  border: 0;
  color: var(--text-muted, #9FB0C3);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 14px;
  min-height: var(--touch, 48px);
  cursor: pointer;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.ob-btn-link:hover { color: var(--text, #F5F7FA); }

.ob-ver-nota {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted, #9FB0C3);
  margin: -4px 0 16px;
  text-align: center;
}

.ob-trust {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
  padding-top: 14px;
  border-top: 1px solid var(--line, #1E3A5F);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted, #9FB0C3);
}
.ob-trust__ids {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--gold, #D4A84B);
  letter-spacing: 0.04em;
}
.ob-trust__legal { opacity: 0.8; }

/* ══════════════════════════════════════════════════════════════════════════
   PANTALLA DE PERMISOS
   ══════════════════════════════════════════════════════════════════════════ */
.ob-perm-todos {
  width: 100%;
  min-height: var(--touch, 48px);
  margin-bottom: 14px;
}

.ob-perm-lista {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.ob-perm {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-2, #10294A);
  border: 1px solid var(--line, #1E3A5F);
}
.ob-perm__ic {
  font-size: 22px;
  line-height: 1.2;
  text-align: center;
}
.ob-perm__c { min-width: 0; }

.ob-perm__t {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #F5F7FA);
  margin-bottom: 4px;
}
/* «esencial» describe qué se rompe sin él — NO significa obligatorio.
   Nada en esta pantalla lo es. */
.ob-perm__clave {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, #F58220);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 1px 8px;
}

.ob-perm__p {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted, #9FB0C3);
}
/* «Sin esto: …» va en otro color porque es la información que de verdad
   permite decidir, y es la que todo el mundo omite. */
.ob-perm__sin {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--warning, #F5A623);
}

.ob-perm__e {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted, #9FB0C3);
}
.ob-perm__e[data-estado="granted"] { color: var(--success, #10B981); }
.ob-perm__e[data-estado="denied"]  { color: var(--warning, #F5A623); }

.ob-perm__b {
  min-height: var(--touch, 48px);
  min-width: 88px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--accent, #F58220);
  background: transparent;
  color: var(--accent, #F58220);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ob-perm__b:disabled {
  border-color: var(--line, #1E3A5F);
  color: var(--text-muted, #9FB0C3);
  cursor: default;
}
.ob-perm__b:focus-visible,
.ob-perm-todos:focus-visible,
.ob-btn-link:focus-visible {
  outline: 2px solid var(--gold, #D4A84B);
  outline-offset: 2px;
}

.ob-perm-privacidad {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.08);
}
.ob-perm-privacidad p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted, #9FB0C3);
}

/* ══════════════════════════════════════════════════════════════════════════
   ESCRITORIO: DOS COLUMNAS, NO UN TELÉFONO ESTIRADO

   A partir de 900 px de ancho con puntero fino (ratón), quien está delante es
   un dispatcher, no un conductor. La tarjeta deja de ser una columna estrecha
   centrada —que en un monitor de 27" se ve ridícula— y usa el ancho.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .ob-welcome .ob-caps { grid-template-columns: 1fr 1fr; }
  .ob-welcome .ob-cta-row { justify-content: flex-start; }
  .ob-perm-lista { grid-template-columns: 1fr 1fr; }
  .ob-perm-todos { width: auto; min-width: 220px; }
  .ob-trust { align-items: flex-start; text-align: left; }
}

/* Puntero fino: el hover existe y el objetivo puede ser más pequeño sin
   perder precisión. Aun así no se baja de 40 px: un ratón acierta, pero una
   fila de 24 px sigue siendo incómoda de leer y de pulsar. */
@media (pointer: fine) {
  .ob-perm__b { min-height: 40px; }
  .ob-perm__b:hover:not(:disabled) {
    background: var(--accent, #F58220);
    color: #04121F;
  }
  .ob-caps li:hover { border-color: var(--accent, #F58220); }
}

/* Pantalla baja y apaisada (teléfono de lado en el soporte de la cabina):
   lo que sobra es el aire, no el contenido. */
@media (max-height: 560px) and (orientation: landscape) {
  .ob-welcome .ob-logo-wrap { display: none; }
  .ob-caps li { padding: 9px 12px; }
  .ob-priv { padding: 9px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ob-caps li, .ob-perm, .ob-perm__b { transition: none; }
}