/* **La letra es Figtree** (18/10/2026, elegida entre cuatro): redondeada, cercana y muy legible en el móvil, con cifras claras para los precios. **Servida desde aquí** (`/fuentes/`, vista `fuente`) y no desde Google Fonts, que vería la IP de cada visita. Es variable —un fichero para todos los pesos— y va partida en latín y latín ampliado (`unicode-range`), así que una página en castellano baja solo los 20 KB del primero. `font-display: swap`: hasta que llega se lee con la del sistema, nunca en blanco. Licencia OFL en `fuentes/OFL-figtree.txt`. */ @font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/fuentes/figtree-5.2.10-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/fuentes/figtree-5.2.10-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* **El gris y el verde, un pelo más oscuros que al principio** (17/10/2026, repaso de accesibilidad con axe y Lighthouse). Eran `#666f7d` y `#17803d`, y se quedaban justo por debajo del 4,5 de contraste que pide el texto normal en tres sitios: el gris sobre `--chip` («sin foto», 4,48), el verde sobre el fondo azulado (la bajada del informe, 4,49) y sobre su propio tinte (el aviso de bajadas de la lista, 3,97). Medido después: 4,8 y 5,4 en esos fondos y 4,7 en el peor del verde. A la vista no se distingue. */ :root { --bg: #f6f7f9; --card: #fff; --text: #14181f; --muted: #616a78; --line: #e2e6eb; --accent: #0b6bcb; --ok: #147236; --err: #b3261e; --best: #147236; --chip: #eef1f5; --up: #b3261e; --down: #147236; /* El ámbar del «solo tienda» del selector. Faltaba, así que esa marca llevaba su color escrito a mano y se quedaba fuera del tema. */ --aviso: #a16207; /* **El marino de las bandas oscuras** —la barra de arriba, el pie y la portada de la bienvenida—. Sale de tomar como referencia tres webs con el mismo lenguaje (bandas de azul profundo a todo el ancho alternando con claras, titulares grandes, botones en pastilla): el azul de siempre sigue siendo el de los controles, y este es el fondo sobre el que se apoya. */ --marino: #0a1a4a; --sobre-marino: #eef3ff; --sobre-marino-tenue: #a8b6dc; /* `#2c6bf0` y no `#3b7bff`: con el blanco de «Comparar mi lista» encima daba 3,84 de contraste, y a 14,5 px hacen falta 4,5. Ahora, 4,7. */ --electrico: #2c6bf0; /* **El texto encima del azul de los controles.** Blanco en el tema claro; en el oscuro el azul se aclara (#6aa9f0) y el blanco encima se queda en 2,5 de contraste —lo mínimo para leerse bien es 4,5—, así que allí va oscuro. Una variable y no un color escrito en cada botón: había nueve. */ --sobre-accent: #fff; /* **El degradado de los botones** (18/10/2026): del azul de siempre a un azul más violáceo. Con el blanco encima, 5,3 y 6,1 de contraste. */ /* Bastante distintos para que se vea en un móvil: del azul de siempre a violeta. Con el blanco encima, 5,3 y 7,6. */ --boton-a: #0b6bcb; --boton-b: #5a3bd6; --boton-sombra: rgba(70, 70, 210, .5); } :root { --bg: #eef3fb; } @media (prefers-color-scheme: dark) { :root { --marino: #0b1433; --electrico: #6aa9f0; --bg: #14171c; --card: #1c2027; --text: #e7eaee; --muted: #9aa3b0; --line: #2b313a; --accent: #6aa9f0; --ok: #4ade80; --err: #f87171; --best: #4ade80; --chip: #252a32; --up: #f87171; --down: #4ade80; --aviso: #fbbf24; --sobre-accent: #0b1730; --boton-a: #6aa9f0; --boton-b: #b19cff; --boton-sombra: rgba(140, 150, 255, .35); } } /* **Las transiciones entre páginas las hace el navegador** (View Transitions). Cambiar de página era un parpadeo en blanco: la página entera desaparecía y la nueva se pintaba de golpe, cabecera incluida, aunque fuera la misma. Con `@view-transition` el navegador hace un fundido corto **y la cabecera, que lleva nombre propio, se queda quieta**: lo único que cambia es el contenido. Tres decisiones: - **Sin JavaScript para navegar.** Es una regla de CSS que un navegador que no la conoce se salta entera —el WebView de Chrome 74 de la aplicación incluido—: allí se navega como siempre. No hay nada que pueda romper la página, que es lo que importa en un sitio donde un `SyntaxError` la deja muerta (ver `test_js_viejo`). - **Corta: 0,15 s para salir y 0,22 para entrar.** Una transición que se nota como espera es peor que el parpadeo; esta se nota como suavidad. - **Quien pide menos movimiento no la tiene** (`prefers-reduced-motion`). Lo dice su sistema, y una animación que no ha pedido marea a algunas personas. - **Va a nivel raíz, fuera de cualquier `@media`.** Se escribió primero al lado del otro `prefers-reduced-motion` de este fichero, que vive **dentro del bloque del móvil** (el de 720 px), y la transición solo salía en el móvil: medido, a 720 px sí y a 721 no. Es el mismo tropiezo que tuvo el aviso de lo que se guarda. */ @view-transition { navigation: auto; } body > header { view-transition-name: cabecera; } ::view-transition-old(root) { animation: 150ms ease-in both vt-salir; } ::view-transition-new(root) { animation: 220ms ease-out both vt-entrar; } @keyframes vt-salir { to { opacity: 0; } } @keyframes vt-entrar { from { opacity: 0; transform: translateY(8px); } } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* ------------------------------------------------------------------ * * **El movimiento de todas las páginas**, pedido a la vista del de la * portada. Cinco piezas, todas con un motivo: * * - **Al entrar, el contenido sube escalonado** (los bloques de la página, * uno detrás de otro). La portada lleva su propia entrada y se excluye. * - **Las tarjetas que llegan entran**: en Buscar, solo las nuevas de cada * tienda que contesta (`.nueva`, la pone `pintarGrupo`); en Ofertas, las * primeras de la rejilla al cargar. * - **Los desplegables y el menú se abren deslizando**, que dice de dónde * sale lo que aparece. * - **Lo que se pulsa responde**: las tarjetas se levantan y los botones se * hunden un poco al apretarlos. * - **La línea del histórico se dibuja** de izquierda a derecha, que es el * sentido del tiempo. * * Tres reglas: va **todo dentro de `prefers-reduced-motion: no-preference`** * —quien pide menos movimiento no tiene nada de esto, sin tener que * anularlo pieza a pieza—; las entradas son **`backwards`, nunca `both`**: * un `transform` que se queda puesto al acabar convierte al elemento en * referencia de lo que va `position: fixed` dentro (el selector de producto, * la lupa) y los descoloca; y **nada depende de JavaScript para verse**: son * animaciones de CSS que terminan solas. A nivel raíz, fuera de cualquier * otro `@media`, por lo que costó la transición entre páginas. */ @keyframes mv-subir { from { opacity: 0; transform: translateY(16px); } } @keyframes mv-tarjeta { from { opacity: 0; transform: translateY(18px) scale(.97); } } @keyframes mv-desplegar { from { opacity: 0; transform: translateY(-6px); } } @keyframes mv-menu { from { transform: translateX(-100%); } } @keyframes mv-velo { from { opacity: 0; } } @keyframes mv-trazar { from { stroke-dashoffset: 1; } } @media (prefers-reduced-motion: no-preference) { main.wrap > :not(.inicio):not(script):not(style) { animation: mv-subir .55s cubic-bezier(.2, .7, .2, 1) backwards; } main.wrap > :nth-child(2) { animation-delay: .06s; } main.wrap > :nth-child(3) { animation-delay: .12s; } main.wrap > :nth-child(4) { animation-delay: .18s; } main.wrap > :nth-child(5) { animation-delay: .24s; } main.wrap > :nth-child(n+6) { animation-delay: .3s; } article.nueva { animation: mv-tarjeta .5s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 35ms); } /* Solo las de la rejilla (Buscar y Ofertas): las fichas de la lista llevan dentro paneles que se colocan a mano, y un `transform` puesto los descolocaría. Y solo con ratón: en táctil el `:hover` se queda pegado. */ @media (hover: hover) { #grid article { transition: transform .2s ease, box-shadow .2s ease; } #grid article:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -16px rgba(11, 40, 90, .45); } } details[open] > .ddpanel { animation: mv-desplegar .18s ease-out; } #menu:not([hidden]) { animation: mv-menu .26s cubic-bezier(.2, .7, .2, 1); } #menufondo:not([hidden]) { animation: mv-velo .26s ease-out; } #fotogrande:not([hidden]) { animation: mv-velo .2s ease-out; } #fotogrande img { animation: mv-tarjeta .28s cubic-bezier(.2, .7, .2, 1); } button, .chip-btn, .ir { transition: transform .12s ease, filter .15s ease, background-color .15s ease, border-color .15s ease; } button:active, .chip-btn:active, .ir:active { transform: scale(.96); } svg .trazo { stroke-dasharray: 1; animation: mv-trazar 1.1s cubic-bezier(.4, 0, .2, 1) backwards; } } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Los controles no heredan la letra por su cuenta: sin esto, los botones y los campos seguían con la del sistema. */ button, input, select, textarea { font-family: inherit; } a { color: var(--accent); } /* Los rótulos van en minúscula y con peso, no en mayúsculas espaciadas: es el rasgo más repetido de las páginas hechas con plantilla, y en un nombre de tienda o de producto la mayúscula sostenida además se lee peor. */ h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; } /* El foco de teclado se ve siempre, en todo lo que se pulsa. */ a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* `hidden` lo pone el navegador con `display: none` en su hoja de estilo, que pierde contra cualquier regla nuestra con `display:` — y basta un selector de id para ganarle. Sin esto, ocultar `#compra` o `#avisos` no hacía nada: se quedaban visibles debajo de lo que debía sustituirlos, y solo pasaba desapercibido cuando estaban vacíos y no ocupaban alto. */ [hidden] { display: none !important; } /* **Solo para el lector de pantalla.** El título de una página que ya se ve por su cabecera —el «Buscar» de la barra, el campo con su ejemplo— pero a la que le faltaba un `

`: quien navega por encabezados no tenía por dónde empezar. Es la técnica de siempre: fuera de la vista, no fuera del árbol de accesibilidad (`display: none` lo quitaría de los dos). */ .oculto-visual { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------ * * El menú de secciones, a la izquierda. * * Antes eran enlaces sueltos en la barra: con seis ya se partía en dos * líneas en un móvil, y la barra es fija —o sea, cuarenta píxeles menos de * pantalla para siempre, justo en la que se usa dentro del súper—. Y las * opciones de cada sección no tenían dónde vivir salvo en filas de botones * que crecían sin parar. * * Ahora cada sección es un punto del menú y **cuelga de él lo suyo**. * ------------------------------------------------------------------ */ /* El «— Sección» del título. Se calla si no hay nada que decir, y en una pantalla estrecha se recorta antes que el nombre del sitio. */ .seccion-actual { color: var(--muted); font-weight: 600; font-size: 14px; margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } #menubtn { background: none; border: 0; color: inherit; font-size: 22px; cursor: pointer; padding: 2px 8px; line-height: 1; order: -1; } /* **Ojo con `inset` y con `min()`: el WebView de la aplicación no los conoce.** Esto abría en cualquier navegador de escritorio y **no abría en la app**, que es donde más falta hace. El WebView del sistema puede ser Chrome 74 —el del emulador de Android 10 lo es— y ahí `inset` (Chrome 87) se ignora, así que el velo queda de 0×0; y `min()` (Chrome 79) invalida la declaración entera, así que el panel se queda sin ancho y encogido a su contenido. Se pulsaba el ☰, el panel se abría de verdad… y no se veía. Las dos se escriben a la antigua, que hace exactamente lo mismo. */ #menufondo { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.35); z-index: 60; } #menu { position: fixed; top: 0; left: 0; bottom: 0; width: 19rem; max-width: 86vw; background: var(--card); border-right: 1px solid var(--line); z-index: 61; overflow-y: auto; padding: 10px 0 24px; /* El panel ocupa la altura entera, así que su primera sección caería debajo de la barra de estado igual que el ☰. */ padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); box-shadow: 2px 0 12px rgba(0,0,0,.12); } #menu .seccion { display: block; padding: 11px 16px; font-weight: 600; font-size: 15px; color: var(--text); text-decoration: none; border: 0; background: none; width: 100%; text-align: left; cursor: pointer; font-family: inherit; } #menu .seccion[aria-current="page"] { color: var(--accent); } /* Lo de la cuenta que en un ordenador está en la barra y en el móvil se muda aquí (ver la cabecera en una sola línea, en el bloque de 720 px). */ #menu .solomovil { display: none; } /* Una sección que en vez de llevar a un sitio **abre lo suyo**: se pinta igual que las demás para que se lea como una más. */ #menu details.seccion { padding: 0; } /* **Sin forma de botón.** `.dd > summary` la pinta como pastilla —borde, fondo y esquinas redondas— porque en las filas de la página eso es lo que hace falta para que se vea pulsable. En el menú no: ahí es **una sección más**, y con su recuadro se leía como si fuera de otra categoría que «Buscar» o «Mi lista». Lo que dice que se abre es el ▾, no una caja. */ #menu details.seccion > summary { padding: 11px 16px; font-weight: 600; font-size: 15px; cursor: pointer; list-style: none; border: 0; background: none; border-radius: 0; } #menu details.seccion[open] > summary, #menu details.seccion > summary:hover { border: 0; } #menu details.seccion > summary::-webkit-details-marker { display: none; } #menu details.seccion > summary::after { content: " ▾"; color: var(--muted); } #menu details.seccion[open] > summary::after { content: " ▴"; } #menu details.seccion > summary:hover { background: var(--bg); } #menu details.seccion .ddpanel { position: static; box-shadow: none; border: 0; background: none; padding: 0 10px 8px 16px; } #menu .seccion:hover { background: var(--bg); } /* Lo de cada sección va debajo, sangrado: se lee como «dentro de». */ #menu .menuops { padding: 0 10px 8px 16px; } #menu .menuops:empty { display: none; } #menu .menuops > * { display: block; width: 100%; margin: 3px 0; text-align: left; font-size: 13px; } /* **Lo de dentro de una sección tampoco lleva recuadro.** Los botones vienen de las filas de la página, donde la pastilla es lo que los hace verse pulsables; aquí son opciones de una lista y el borde solo mete ruido. Se quita en los dos huecos: el de una sección normal (`.menuops`) y el del desplegable de «La compra» (`.ddpanel`). */ #menu .menuops > *, #menu .ddpanel > * { border: 0; background: none; border-radius: 6px; padding: 8px 6px; color: var(--text); font-weight: 600; } #menu .menuops > *:hover, #menu .ddpanel > *:hover { background: var(--bg); color: var(--accent); } /* **Y un desplegable de dentro tampoco.** Un `.dd` trae la pastilla de las filas de la página —borde, fondo y esquinas redondas—, que allí es lo que lo hace verse pulsable; en el menú queda como un botón suelto en medio de una lista de opciones. Lo que dice que se abre es el ▾, igual que en «La compra». Hoy no la usa nadie —la trajo «Mis listas», que ya no existe— y se queda porque la regla es de aquí: el día que `alMenu` mueva otro `
`, sin ella se vería como de otra categoría. */ #menu .menuops .dd > summary { display: block; width: 100%; border: 0; background: none; border-radius: 6px; padding: 8px 6px; text-align: left; font-size: 13px; color: var(--text); font-weight: 600; } #menu .menuops .dd > summary:hover { background: var(--bg); color: var(--accent); } #menu .menuops .dd > summary::after { content: " ▾"; color: var(--muted); } #menu .menuops .dd[open] > summary::after { content: " ▴"; } /* Las filas de «Mi lista»: el nombre y, debajo, cuántos productos tiene. Las pinta `Precios.pintarMisListas`, que es hoy el único sitio que las enumera: «Mis listas» era el otro y se quitó. */ #menu #menulistas .meta { display: block; font-weight: 600; font-size: 11.5px; color: var(--muted); } #menu .ddvacio { padding: 8px 8px 4px; color: var(--muted); font-size: 12.5px; } #menu .menuops .ddpanel { position: static; box-shadow: none; border: 0; background: none; min-width: 0; padding: 0 0 4px 10px; max-height: 40vh; } /* **Y el que está puesto se sigue viendo.** Lo marcaba `#modos button[aria-pressed="true"]` con el borde en azul; al traerse los dos modos al menú esa regla dejó de alcanzarlos y no había forma de saber cuál estaba elegido. Aquí se marca sin caja: color y peso. */ #menu [aria-pressed="true"] { color: var(--accent); font-weight: 800; } #menu .sep { height: 1px; background: var(--line); margin: 8px 12px; } #menu .titulo { padding: 6px 16px 10px; font-weight: 700; font-size: 13px; color: var(--muted); } /* **El pie de una tarjeta de producto, y va aquí porque lo usan dos páginas.** Estuvo solo en la de búsqueda y en la de ofertas las tarjetas salían sin él: «📈 histórico» y «Abrir ↗» pegados, leyéndose como un solo enlace. Es el mismo caso que el CSS de los desplegables. */ .foot { margin-top: auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } /* La marca de «reparte aquí» en cada fila del selector, y el resumen del panel del código postal. El «no se sabe» no se pinta: un hueco no puede parecerse a un no. */ /* **Y van con las variables, no con un color escrito a mano.** Estuvieron con `#15803d`, `#b91c1c` y `#a16207` —los verdes y rojos del tema claro— y **el tema oscuro no los tocaba**: medido sobre el fondo de verdad, el contraste era **3,26 · 2,53 · 3,32** donde a ese tamaño hacen falta 4,5. Un color fijo en una página que tiene dos temas solo puede estar bien en uno de los dos. De paso no eran ni los mismos verde y rojo que usa el resto (`--ok` es `#147236` y `--err` `#b3261e`): dos parejas casi iguales para decir lo mismo. */ .ddrow .cob { margin-left: auto; font-size: 11px; font-weight: 700; } .ddrow .cob.si { color: var(--ok); } .ddrow .cob.no { color: var(--err); } .ddrow .cob.med { color: var(--aviso); } /* **Apagada con el gris del texto secundario, no con transparencia.** Con `opacity: .55` el nombre quedaba a 3,95 de contraste sobre el panel, y una tienda que no te reparte se sigue pudiendo marcar: hay que poder leerla. */ .ddrow.nozona .nm { color: var(--muted); } #cpcob { margin: 6px 0 0; font-size: 12px; color: var(--muted, #666); } #cpcob .hecho { color: var(--ok); font-weight: 600; } .wrap { max-width: 1280px; margin: 0 auto; } /* --- cabecera y navegación --- */ /* ------------------------------------------------------------------ * * **La franja de arriba tiene que dejar sitio a la barra de estado.** * * Dentro de la aplicación la página se dibuja **de borde a borde**: el * proyecto de Android apunta a `targetSdkVersion 35`, y desde Android 15 eso * ya no es opcional — el sistema deja la ventana debajo de la barra de * estado y de la de navegación. Como la cabecera es `sticky; top: 0`, el ☰ * caía justo ahí: **se veía y no se podía pulsar**, porque ese trozo de * pantalla se lo queda el sistema. Desde un navegador no hay forma de verlo, * que es lo que hizo perder dos intentos. * * Se arregla con las variables del sistema (`env(safe-area-inset-*)`, de * Chrome 69) **y con `viewport-fit=cover` en el `viewport`**, sin el cual * valen cero y no hacen nada. El relleno normal va **antes**, así que donde * `env()` no se entienda la línea se ignora y queda el de siempre. * ------------------------------------------------------------------ */ header { position: sticky; top: 0; z-index: 5; background: var(--card); border-bottom: 1px solid var(--line); padding: 0 20px; padding-left: calc(20px + env(safe-area-inset-left, 0px)); padding-right: calc(20px + env(safe-area-inset-right, 0px)); } nav { display: flex; align-items: baseline; gap: 18px; margin-bottom: 12px; } nav .brand { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; color: var(--text); } /* **La barra va en marino, a todo el ancho, y los controles de cada página siguen en claro debajo.** El fondo se estira con una sombra recortada (`box-shadow` + `clip-path`) y no con márgenes negativos: así no mueve ni un píxel de la maquetación ni desborda la página por el ancho de la barra de desplazamiento, que es lo que hace `100vw`. Y los colores se cambian **redefiniendo las variables** dentro de la barra, no regla a regla: lo que cuelga de ella —enlaces, rótulo de la sección, el ☰— se pinta solo. */ body > header nav { --text: var(--sobre-marino); --muted: var(--sobre-marino-tenue); --accent: #8fb8ff; --chip: rgba(255, 255, 255, .1); background: var(--marino); color: var(--text); box-shadow: 0 0 0 100vmax var(--marino); clip-path: inset(0 -100vmax); padding: 14px 0; padding-top: calc(14px + env(safe-area-inset-top, 0px)); margin-bottom: 0; } body > header nav .links a.destacado { background: #fff; color: var(--marino); border-radius: 999px; } /* Lo que cada página pone en la cabecera (el buscador, la lista) va en su propia caja, y sin nada dentro desaparece: si no, quedaría una franja blanca vacía debajo de la barra. */ .cabecera-extra { padding: 12px 0 16px; } .cabecera-extra:empty { display: none; } /* El logo, a la altura del texto. `vertical-align` y no un `flex` en el enlace: la marca envuelve en dos líneas en un móvil estrecho, y con `flex` el icono se quedaría arriba en vez de junto a la primera palabra. */ nav .brand img { width: 22px; height: 22px; vertical-align: -4px; margin-right: 2px; } /* **Centrados, no estirados.** Sin esto los hijos se estiran a lo alto de la fila (`align-items: stretch`): el enlace del nombre quedaba de 33 px y el botón de «Salir», que va dentro de su `
`, de 27 y pegado arriba — y sus textos salían a distinta altura. Medido: 2 px en el móvil y 3 en el escritorio, lo justo para que se vea torcido y no se sepa por qué. */ nav .links { display: flex; align-items: center; gap: 4px; margin-left: auto; } nav .links a { padding: 6px 12px; border-radius: 7px; text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 600; } nav .links a:hover { background: var(--chip); color: var(--text); } nav .links a[aria-current="page"] { background: var(--chip); color: var(--text); } nav .links a.destacado { color: var(--accent); } /* En escritorio, al final de la barra; en móvil sube a la línea del título. Con `order` y no moviéndolo en el HTML: es el mismo botón y la misma lógica. */ /* **El pie también en marino**, a todo el ancho con la misma sombra recortada que la barra, y con las variables redefinidas para que la tabla de lo que se guarda y los enlaces se lean sobre oscuro sin tocar sus reglas. */ .pie { --text: var(--sobre-marino); --muted: var(--sobre-marino-tenue); --accent: #8fb8ff; --line: rgba(255, 255, 255, .14); --chip: rgba(255, 255, 255, .08); --card: rgba(255, 255, 255, .04); background: var(--marino); box-shadow: 0 0 0 100vmax var(--marino); clip-path: inset(0 -100vmax); margin: 40px auto 0; padding: 30px 20px 26px; border-top: 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; /* Y abajo, la barra de navegación: sin esto el último renglón queda debajo de ella y no se lee. */ padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); } .pie p { margin: 0 0 8px; max-width: 62rem; } .pie b { color: var(--text); font-weight: 600; } .pie .tenue { opacity: .8; } .pie .guiapie { font-size: 14px; margin-bottom: 12px; } /* En un ordenador el apartado se lee como antes: título en negrita y el texto a continuación, en el mismo párrafo. */ .pie .apartado { margin: 0 0 8px; max-width: 62rem; } .pie .apartado > summary { display: inline; list-style: none; cursor: default; } .pie .apartado > summary::-webkit-details-marker { display: none; } .pie .apartado > p { display: inline; margin: 0; } @media screen and (max-width: 720px) { .pie .apartado { margin: 0; border-top: 1px solid var(--line); } .pie .apartado > summary { display: block; padding: 10px 0; cursor: pointer; font-size: 13.5px; } .pie .apartado > summary::after { content: " ▾"; color: var(--muted); } .pie .apartado[open] > summary::after { content: " ▴"; } .pie .apartado > p { display: block; margin: 0 0 10px; } .pie .apartado + :not(.apartado) { margin-top: 12px; } } nav .instalar { order: 2; } nav .instalar { padding: 6px 12px; border-radius: 7px; border: 1px solid var(--accent); background: none; color: var(--accent); font-size: 13.5px; font-weight: 600; cursor: pointer; } nav .instalar:hover { background: var(--accent); color: var(--sobre-accent); } nav a.quien { text-decoration: none; } nav .quien { padding: 6px 4px 6px 12px; color: var(--muted); font-weight: 600; border-left: 1px solid var(--line); margin-left: 6px; } /* **El tamaño de la pareja se escribe una vez.** El nombre y «Salir» son lo mismo —quién eres y cómo te vas— y estaban puestos por separado: el de `.quien` decía 13 px y **no se aplicaba**, porque `nav .links a` le gana por especificidad, así que salía a 14 junto a un «Salir» de 13. Con el selector de clase delante sí manda, y los dos van del mismo tamaño por construcción. **Y el `line-height` también va en la pareja**, que es la trampa de siempre en esta página: un `