/* 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. El interior de las cuatro tarjetas usa el
vocabulario de controles que ya existe, y de ese interior lo único propio de
este archivo son dos cosas, las dos de la 2.15.0 (el armazón de la pantalla
—.ajustes, __head, __back, __title— es aparte y es más viejo): el PLEGADO de
las tarjetas —.ajustes__summary,
.ajustes__chevron y .ajustes__body, que no tienen gemelo en ninguna otra
pantalla— y «Probar», que SOBREESCRIBE lo prestado (ver el final del
archivo) porque el vocabulario prestado no grisa.
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 .icon —ésta le da el tamaño al parlante de
«Probar»: sin ella el SVG colapsa a 0×0 y la pantalla se dibuja sin
icono—; 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 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;
}
/* ---- Bloques que se abren y se cierran (2.15.0) ------------------------- */
/* La tarjeta pierde su propio aire y se lo pasa a las dos mitades. `.card`
(css/setup.css) trae `padding: var(--space-3)` y `gap: var(--space-2)`; si
ese padding se quedara ahí, el blanco de click del no llegaría al
borde de la tarjeta: habría 16px —lo que mide --space-3— a cada lado que
parecen parte del título y no responden al dedo. Medido con elementFromPoint
en la esquina, que es la aserción que lo sostiene.
Va scopeado bajo `.ajustes` y no sobre `.card` a secas: la otra usuaria de
esa clase en todo el repo es la tarjeta de importar/exportar de la pantalla
del texto (`.card.transfer-card`, en js/ui-setup.js), que no es plegable. */
.ajustes details.card {
padding: 0;
gap: 0;
}
.ajustes__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
/* El padding de la tarjeta, ahora acá: es lo que hace que el blanco de click
llegue a los cuatro bordes. */
padding: var(--space-3);
min-height: 2.75rem;
cursor: pointer;
/* El triángulo del navegador, fuera: se dibuja distinto en cada uno y en
Safari/iOS queda pegado al texto. El chevron de abajo es propio y rota. */
list-style: none;
}
.ajustes__summary::-webkit-details-marker {
display: none;
}
/* Dos bordes de una caja rotada 45°, que es un chevron sin un SVG. Apunta
abajo cerrado y arriba abierto. aria-hidden en el marcado: el ya
se anuncia como «contraído/expandido», y un segundo indicador lo diría dos
veces. */
.ajustes__chevron {
flex: none;
width: 0.45rem;
height: 0.45rem;
margin-right: 2px;
border-right: 2px solid var(--color-text-muted);
border-bottom: 2px solid var(--color-text-muted);
transform: rotate(45deg);
transition: transform 0.15s ease;
}
.ajustes details[open] .ajustes__chevron {
transform: rotate(-135deg);
margin-top: 4px;
}
/* El cuerpo recupera el flex column con gap que la tarjeta tenía: es lo que
separaba los controles entre sí. Sin padding arriba, porque el ya
puso el suyo y dos seguidos duplican el aire bajo el título. */
.ajustes__body {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: 0 var(--space-3) var(--space-3);
}
/* «Probar» lleva icono Y palabra desde la 2.15.0, así que la caja tiene que
ponerlos en línea y con aire propio en el medio.
Sin esta regla el botón se dibuja como caja de BLOQUE: el navegador le da
`inline-block` —ni `.btn` ni `.btn--ghost` (css/setup.css) le tocan el
`display`— pero `.voice-row` es `display: flex`, y un ítem flex se
blockifica. Un contenedor de bloque alinea en línea a sus hijos y por la
línea base, pero el aire entre el SVG y la palabra no queda a cargo de
ningún espacio en blanco del marcado: el template de js/ui-ajustes.js
concatena `${speakerIcon(true)}${t("Probar")}` sin separador, así que sin
esta regla no habría aire ninguno —0.00px medidos, no un espacio
colapsado—. (Sin número de línea: el código citado ya identifica el sitio, y
un número envejece con la próxima inserción — ésta lo movió.)
`inline-flex` y no `flex` aunque dentro de la fila las dos computen igual
(`flex`): la forma `inline-` es la que describe al botón el día que NO sea
ítem flex, y esta misma versión mete las cuatro tarjetas en .
El gap es --space-1 y no el espacio que traía el emoji ("🔊 Probar" era un
glifo, un espacio y una palabra): un espacio de texto entre un