/* La pantalla de ajustes del dispositivo — js/ui-ajustes.js.

   Archivo propio y no una sección de css/setup.css, por lo mismo que
   css/fmt-colors.css: estas reglas describen el INTERIOR del bloque que el
   módulo dibuja y viajan con él. Es lo único que hay acá — las cuatro
   tarjetas usan el vocabulario de controles que ya existe.

   Y ESO ES UNA DEPENDENCIA, dicha en voz alta: esta pantalla NO se renderiza
   sola. De css/setup.css salen .card, .step-label, .slider-row(__label/__value),
   .font-picker, .font-pick, .font-preview(-wrap), .switch-row(__text/__title/
   __sub), .switch(__track/__knob), .voice-row, .btn, .btn--ghost y .field-hint;
   de css/main.css, .muted; y de css/teleprompter.css los cinco marcadores de la
   vista previa (.tp-b, .tp-i, .tp-mark, .tp-dim, .tp-s), que sin esa hoja se
   dibujan como texto pelado. La lista es la que se midió, no una promesa de
   exhaustividad: lo que la defiende de verdad son las aserciones de
   tests/ajustes.test.html que comparan valores computados que SÓLO puede dar
   cada hoja —el uppercase de .step-label, el borde de .card, el color de
   .tp-mark—, así que quitar un <link> o borrar una regla pone la página en rojo
   en vez de dejarla verde midiendo otra pantalla.

   La demolición del riel de pasos ya se corrió (2.11.0) y no se llevó ninguna
   de esas clases: se llevó .step-rail, .step, .step__label, .step__name y
   .step-pane, que eran el marcado de los pasos. Lo que lo sostuvo no fue este
   párrafo sino el mutante `ajustes-sin-tarjetas` de scripts/recuento.sh, que
   borra las declaraciones de .card y pone esta pantalla en rojo.

   YA ESTÁ LINKEADA EN index.html, después de css/setup.css —ese orden importa,
   porque de allá sale lo prestado— y la cargan también tests/{ajustes,i18n,
   desktop}.test.html, que son las tres páginas que montan esta pantalla.

   El aire va en `.ajustes` —el NODO— y no en el contenedor a propósito. El
   contenedor CAMBIA de verdad desde la 2.11.0: es `#view-ajustes` —la sección
   de la ruta— en teléfono y `#setup-ajustes-slot` —el área «aside» de la grilla
   del texto— en escritorio, y js/app.js muda el nodo entre los dos al cruzar el
   breakpoint. El padding puesto en el contenedor se habría perdido en esa
   mudanza sin que nada se entere. Mismo motivo por el que el max-width viaja
   acá y no en la sección: es el ancho de lectura del contenido.

   LO QUE SÍ ES DEL CONTENEDOR se lo pone la pantalla anfitriona y vive en su
   hoja: css/setup.css esconde el «‹ Texto» dentro del hueco (en esa columna no
   hay a dónde volver) y hace que la columna scrollee sola. Va allá y no acá
   porque es lo que ESA pantalla le hace a su huésped; este módulo no sabe —ni
   tiene por qué— si lo montaron en una ruta o en una columna. */

.ajustes {
  display: flex;
  flex-direction: column;
  /* El mismo aire entre tarjetas que daba .step-pane a los pasos de los que
     salieron estos cuatro bloques. */
  gap: var(--space-2);
  max-width: 640px;
  margin: 0 auto;
  /* Scroll de página, como la biblioteca de charlas: esta pantalla es una lista
     de bloques y no tiene chrome anclado al pie —la barra de inicio se queda en
     la del texto—, así que no necesita contenedor scrolleable propio. En
     landscape los insets laterales cuentan, o la primera tarjeta queda bajo el
     notch. */
  padding: calc(env(safe-area-inset-top, 0px) + var(--space-4))
           calc(var(--space-3) + env(safe-area-inset-right, 0px))
           calc(env(safe-area-inset-bottom, 0px) + var(--space-5))
           calc(var(--space-3) + env(safe-area-inset-left, 0px));
}

.ajustes__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  margin-bottom: var(--space-2);
}

/* Gemelo de .setup-head__back (css/setup.css) y no la misma clase: aquélla es
   display:none en escritorio, donde el cabezal del texto se reordena, y este
   botón no sigue esa suerte. Tres declaraciones repetidas son más baratas que
   atar dos cabezales que se mueven por motivos distintos.

   El alto es el blanco tocable de Apple, y lleva la palabra además del glifo:
   un «‹» suelto en gris apagado se pierde y no dice a dónde lleva. */
.ajustes__back {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 2.75rem;
  padding: 0 var(--space-3) 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
  font-size: var(--fs-row);
  font-weight: 600;
  white-space: nowrap;
}

/* Título de pantalla, con el mismo peso y tamaño que el de la biblioteca de
   charlas (.talks__title): las dos son pantallas de primer nivel. */
.ajustes__title {
  margin: 0;
  font-size: var(--fs-screen);
  font-weight: 700;
  letter-spacing: -0.6px;
}