/* ==========================================================================
   IRON ROUTE — LAS CUATRO SECCIONES DE AJUSTES QUE NUNCA SE PINTABAN

   POR QUÉ ESTE ARCHIVO EXISTE: `hud-mode.js`, `voice-nav.js`,
   `speed-alerts.js` y `offline-maps.js` construyen los cuatro su sección de
   ajustes y los cuatro empiezan igual:

       var c = document.getElementById('settings-container');
       if (!c) return;

   Ese id no estaba en el HTML. Los cuatro salían por ese `return` en cada
   arranque, en silencio. Modo HUD, navegación por voz, avisos de velocidad y
   descarga de mapas sin señal llevaban escritos desde siempre y nunca se
   habían visto — y «mapas sin señal» es justo lo que un camionero necesita en
   la montaña.

   Al poner el ancla aparecieron, y aparecieron SIN UNA SOLA REGLA DE ESTILO:
   los controles segmentados pegados unos a otros («Voz completaSolo
   alertasSilencio»), las filas de datos sin separación («Tiles en caché0
   tiles»), y el último bloque por debajo del pie. Una función visible y rota
   es peor que una escondida, porque ahora se ve rota.

   Esto es esa hoja, con el mismo sistema que el resto del producto: tres
   tamaños (13 · 16 · 20), 48 px de objetivo táctil, tokens por rol, y cada
   pareja de color medida en LOS DOS temas.
   ========================================================================== */
#settings-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
  /* Sitio para que el último bloque no quede detrás de la barra de pestañas.
     Se medía: «Limpiar caché» caía debajo del pie. */
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

#settings-container {
  --aj-texto:  #F5F7FA;
  --aj-suave:  #9FB0C3;   /*  6.59:1 sobre #10294A  ✓ AA  */
  --aj-fondo:  #10294A;
  --aj-linea:  #2E4E7A;
  --aj-sel:    #F58220;
  --aj-tinta:  #0B1F33;   /*  7.51:1 sobre el naranja  ✓ AAA */
  --aj-peligro:#FCA5A5;   /*  7.30:1 sobre #10294A  ✓ AAA */
}
/* Ni una tinta se hereda: #9FB0C3 sobre papel claro da 2.01:1 y #FCA5A5 da
   1.9:1. Se eligen de nuevo, emparejadas con su papel y medidas. */
html[data-theme="light"] #settings-container {
  --aj-texto:  #0B1B2E;   /* 15.73:1 ✓ AAA */
  --aj-suave:  #4A5C72;   /*  6.21:1 ✓ AA  */
  --aj-fondo:  #F1F4F8;
  --aj-linea:  #B4C4D6;
  --aj-sel:    #A8480B;   /*  5.84:1 con tinta blanca ✓ AA */
  --aj-tinta:  #FFFFFF;
  --aj-peligro:#9B1C1C;   /*  7.10:1 sobre #F1F4F8  ✓ AAA */
}

/* ── Títulos de sección ─────────────────────────────────────────────────── */
#settings-container .premium-section-title,
#settings-container h4 {
  margin: 0 0 12px;
  font-family: 'Syne', sans-serif; font-weight: 700;
  font-size: 16px; line-height: 20px;
  color: var(--aj-texto);
}

/* ── Modo HUD: una fila que se pulsa entera ─────────────────────────────── */
#settings-container .hud-menu-entry {
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 10px 14px;
  background: var(--aj-fondo);
  border: 1px solid var(--aj-linea);
  border-radius: 12px;
  cursor: pointer;
}
#settings-container .hud-menu-entry-icon { flex: 0 0 auto; font-size: 20px; line-height: 1; }
#settings-container .hud-menu-entry-text { flex: 1 1 auto; min-width: 0; }
#settings-container .hud-menu-entry-title {
  font-family: 'DM Sans', sans-serif; font-weight: 700;
  font-size: 16px; line-height: 20px; color: var(--aj-texto);
}
#settings-container .hud-menu-entry-sub {
  font-family: 'DM Sans', sans-serif; font-size: 13px; line-height: 17px;
  color: var(--aj-suave);
}
#settings-container .hud-menu-entry-badge {
  flex: 0 0 auto;
  padding: 4px 8px; border-radius: 6px;
  background: var(--aj-sel); color: var(--aj-tinta);
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 13px;
}

/* ── Controles segmentados ──────────────────────────────────────────────── */
/* Salían pegados —«Al limite+5 mph+10 mphApagado»— porque no había ni un
   `display` ni un `gap`: tres botones en flujo de texto se leen como una sola
   palabra larga. */
#settings-container .voice-mode-options,
#settings-container .speed-threshold-options {
  display: flex; flex-wrap: wrap; gap: 8px;
}
#settings-container .voice-mode-btn,
#settings-container .speed-threshold-btn {
  flex: 1 1 auto; min-width: 84px;
  /* 48 px de alto de toque, sin excepción: esto se pulsa con guantes. */
  min-height: 48px; padding: 8px 12px;
  background: var(--aj-fondo);
  border: 2px solid var(--aj-linea);
  border-radius: 10px;
  color: var(--aj-texto);
  font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 13px;
  line-height: 17px; text-align: center; cursor: pointer;
}
/* El estado elegido lleva DOS portadores además del color —relleno y peso—
   porque uno de cada doce hombres no separa estos tonos. */
#settings-container .voice-mode-btn.active,
#settings-container .speed-threshold-btn.active {
  background: var(--aj-sel);
  border-color: var(--aj-sel);
  color: var(--aj-tinta);
  font-weight: 700;
}
#settings-container .voice-mode-btn:focus-visible,
#settings-container .speed-threshold-btn:focus-visible,
#settings-container .hud-menu-entry:focus-visible,
#settings-container button:focus-visible,
#settings-container select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--aj-fondo), 0 0 0 6px var(--aj-texto);
}

/* ── Selector de voz ────────────────────────────────────────────────────── */
#settings-container .voice-selector-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 12px;
}
#settings-container .voice-selector-label {
  flex: 0 0 auto;
  font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--aj-suave);
}
#settings-container .voice-selector-select {
  flex: 1 1 160px; min-width: 0; min-height: 48px;
  padding: 0 12px;
  background: var(--aj-fondo); border: 1px solid var(--aj-linea);
  border-radius: 10px; color: var(--aj-texto);
  font-family: 'DM Sans', sans-serif; font-size: 16px;
}
#settings-container .voice-test-btn {
  flex: 0 0 auto; min-height: 48px; padding: 0 16px;
  background: var(--aj-fondo); border: 1px solid var(--aj-linea);
  border-radius: 10px; color: var(--aj-texto);
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 13px;
  cursor: pointer;
}

#settings-container .speed-settings-hint {
  margin-bottom: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 13px; line-height: 17px;
  color: var(--aj-suave);
}

/* ── Mapas sin conexión ─────────────────────────────────────────────────── */
/* «Tiles en caché0 tiles» era una etiqueta y su valor sin nada en medio. */
#settings-container .offline-storage-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; min-height: 32px;
  padding: 6px 0;
  border-bottom: 1px solid var(--aj-linea);
}
#settings-container .offline-storage-row:last-child { border-bottom: none; }
#settings-container .offline-storage-label {
  font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--aj-suave);
}
#settings-container .offline-storage-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 16px; color: var(--aj-texto);
}
#settings-container .offline-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
#settings-container .offline-btn {
  flex: 1 1 140px; min-height: 48px; padding: 0 14px;
  background: var(--aj-fondo); border: 1px solid var(--aj-linea);
  border-radius: 10px; color: var(--aj-texto);
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 13px;
  cursor: pointer;
}
/* «Limpiar caché» borra los mapas descargados: en la montaña sin señal eso es
   quedarse sin mapa. Se marca como destructivo, y con el rojo emparejado a su
   papel en cada tema — no con una tinta fija. */
#settings-container .offline-btn-peligro {
  color: var(--aj-peligro);
  border-color: var(--aj-peligro);
}