/* ===================================================================== TINTA Y RELIEVE · el sustrato y la letra ===================================================================== La última de las tres. Va después de la hoja de fichas y de la capa de componentes, así que aquí se resuelve lo que tenga que ganar al final. ⚠ EL NOMBRE ES HISTÓRICO. Ver la nota larga en la hoja de fichas. --------------------------------------------------------------------- EL FONDO YA ESTABA EN EL REPOSITORIO --------------------------------------------------------------------- `tema/textura-grano-claro.png` se guardó el 29 de agosto de 2026 con esta nota, escrita por quien la dejó ahí: «se queda en esta carpeta a propósito: pesa 31 KB, nadie la pide, y borrarla es lo único de este cambio que no se deshace con un `git checkout`.» Hoy la pide alguien. El grano es lo que separa un fondo claro de una pantalla apagada: sin él, un gris plano de 60 pantallas se lee como un monitor sin señal. ===================================================================== */ /* ── 1 · EL SUSTRATO · plano y sin motivo ───────────────────────────── Tres versiones y esta es la que se queda, por lo que se vio en uso: 1.ª viñeta radial + grano → el relieve necesita un plano UNIFORME. Con degradado debajo, el par luz/sombra cae sobre un tono distinto en cada sitio y el ojo lee mancha, no relieve. 2.ª plano + grano → mejor, pero el grano compite con el relieve: dos texturas a la vez y ninguna manda. Esteban: «quita el motivo, deja el fondo blanco». 3.ª plano y limpio → el relieve es la única textura. Es lo que pide el material: la sombra se lee porque no hay nada más que leer. La textura sigue en `tema/textura-grano-claro.png`, sin borrar. */ :root[data-tema] body, :root:not([data-tema]) body { background-color: var(--bg); background-image: none; color: var(--ink); } /* ── 2 · LA LETRA ───────────────────────────────────────────────────── Tres voces, y cada una tiene un trabajo: Manrope · títulos y cuerpo. Legible a 15 px en un teléfono barato, al sol, con guantes. Archivo Narrow · rótulos y cabeceras de tabla, en versalitas. IBM Plex Mono · toda cifra que se compare en columna. La familia se pone desde las fichas (`--sans`, `--cond`, `--mono`), así que aquí sólo se aplica donde el sitio no la pedía. */ :root[data-tema] body, :root:not([data-tema]) body { font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* La señal ya estaba puesta: `.num`, 96 usos en 13 páginas, que hasta ahora sólo pedía `tabular-nums`. Se le añade la familia; no hace falta tocar una sola línea de marcado. */ :root[data-tema] .num, :root:not([data-tema]) .num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.015em; } /* ── 3 · LO QUE HEREDA DE LA NOCHE Y HAY QUE APAGAR ─────────────────── `sistema.css` trae media docena de efectos escritos para fondo oscuro. Sobre papel no son sutiles: son suciedad. Se apagan aquí, que es la capa que habla al final, en vez de editar `sistema.css` — porque ese archivo lleva huella de contenido y su edición arrastra el rehash de los nueve estáticos. */ :root[data-tema] .card, :root[data-tema] .paso, :root[data-tema] .kpi, :root:not([data-tema]) .card, :root:not([data-tema]) .paso, :root:not([data-tema]) .kpi { background-image: none; } /* El desenfoque de vidrio sobre papel deja la tarjeta lechosa. La ficha `--desenfoque` ya vale 0, pero varias páginas escriben el filtro con su propio número. */ :root[data-tema] .card, :root[data-tema] .caja, :root[data-tema] .panel, :root:not([data-tema]) .card, :root:not([data-tema]) .caja, :root:not([data-tema]) .panel { -webkit-backdrop-filter: none; backdrop-filter: none; } /* ── 4 · EL FOCO, SIN ANILLO AZUL ───────────────────────────────────── ⚠ AQUI ESTABAN DOS QUEJAS QUE ERAN LA MISMA COSA. «Se sigue agrandando el correo» y «cuando selecciono algo aparece ese borde azul, elimínalo». No eran dos: el anillo azul de 2 px que aparecia al enfocar es lo que se leia como que el campo crecia. Mi arreglo anterior —bajar el offset a 0— quito la holgura pero dejo el anillo, asi que el campo seguia «engordando» 2 px por lado. En un sistema de relieve el foco no necesita un anillo pintado encima: se dice con el MATERIAL. El campo se hunde un poco mas y el boton se hunde del todo. Es la misma gramatica que ya usa el resto. ⚠ NO SE QUITA EL FOCO, SE CAMBIA DE FORMA. Un foco invisible deja sin teclado a quien no usa raton, y esta herramienta se opera el dia de la eleccion con prisa. Lo que se retira es el color; la señal se queda. */ :focus-visible { outline: none; } /* ⚠ ESTA REGLA LLEVA PESO A PROPOSITO, Y LA CUENTA IMPORTA · 3-sep-2026 La primera version se escribio como `input:focus-visible` — (0,1,1)—, y con eso no gano NADA. Medido despues, en trece pantallas: el anillo seguia saliendo entero. Perdia contra dos cosas a la vez: · `fichas-hielo-azul.css` conservaba `:root[data-tema] input:focus`, (0,3,1), del armazon anterior. Esa regla ya se retiro: alli quedo escrito por que. · QUINCE pantallas declaran su propio anillo sobre campos, y todas pesan mas que (0,1,1): `input[type=text]:focus` en `consultar-puesto`, `.campo input:focus-visible` en `campanas/publico` y `campanas/sala`, `.filtros input:focus` en `puestos`, `.pctl input:focus` y `.pick select:focus` en `tablero`, `input[type=search]:focus` en `mapa`… Ninguna pasa de (0,2,1). Por eso va anclada al `:root` — (0,3,1) — y por eso cubre `:focus` ADEMAS de `:focus-visible`: en un campo de texto los dos casan al pulsar con el raton, pero varias pantallas escribieron `:focus` a secas y sin esa mitad se colaban. ⚠ SE RETIRA EL COLOR, NO LA SEÑAL. El campo se hunde mas, que es la gramatica del sistema, y el `border-color` que cada pantalla ponga sigue en pie —una linea de 1 px no mueve la caja, un anillo con `outline-offset` si, y eso es lo que se leia como que el campo crecia. Un foco invisible deja sin teclado a quien no usa raton, y esto se opera el dia de la eleccion con prisa. Los BOTONES no entran aqui: se midio que con raton no les sale anillo —Chromium no da `:focus-visible` a un boton pulsado— y el que sale al tabular es el unico indicador fuerte que le queda a quien navega sin raton. Retirarlo seria cambiar una queja de estetica por una barrera. */ :root[data-tema] input:focus, :root[data-tema] input:focus-visible, :root[data-tema] select:focus, :root[data-tema] select:focus-visible, :root[data-tema] textarea:focus, :root[data-tema] textarea:focus-visible, :root[data-tema] [contenteditable]:focus, :root[data-tema] [contenteditable]:focus-visible, :root:not([data-tema]) input:focus, :root:not([data-tema]) input:focus-visible, :root:not([data-tema]) select:focus, :root:not([data-tema]) select:focus-visible, :root:not([data-tema]) textarea:focus, :root:not([data-tema]) textarea:focus-visible, :root:not([data-tema]) [contenteditable]:focus, :root:not([data-tema]) [contenteditable]:focus-visible { outline: none; box-shadow: inset -1px -1px 3px var(--relieve-luz), inset 3px 4px 8px var(--relieve-sombra); } button:focus-visible, a:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible { outline: none; box-shadow: inset -2px -2px 5px var(--relieve-luz), inset 2px 2px 5px var(--relieve-sombra); } /* ── 5 · MOVIMIENTO REDUCIDO ────────────────────────────────────────── El relieve no se anima nunca, pero el alza de los botones sí. */ @media (prefers-reduced-motion: reduce) { :root[data-tema] .bot, :root[data-tema] .btn, :root:not([data-tema]) .bot, :root:not([data-tema]) .btn { transition: none; } :root[data-tema] .bot:hover, :root[data-tema] .btn:hover, :root:not([data-tema]) .bot:hover, :root:not([data-tema]) .btn:hover { transform: none; } } /* ===================================================================== ⚠ LO QUE NO SE HACE AQUÍ, Y SE DICE (C8 de la compuerta) ===================================================================== 1. NO se tocan los 424 colores literales que viven en reglas sueltas de las páginas. Medidos: 117 en `tablero.html`, 37 en `mapa.html`, 24 en `dia-d.html`, 17 en `asistente-mapa.html`, 16 en `inicio.html`. Sobreviven a estas tres capas y son tanda propia. Los que sí quedan pisados son los 1.031 que viven dentro de un `:root` de página. 2. NO se tocan las fichas de nombre ambiguo: `--borde` es una medida en dos páginas y un color en tres; `--marca`, `--trazo`, `--esc`, `--c`, `--x` y `--seccion` tienen el mismo problema. Reapuntarlas pintaría un margen o mediría un color, en silencio. 3. NO devuelve el modo claro/oscuro. El producto sigue teniendo UN SOLO TEMA, como decidió Esteban el 29 de agosto de 2026; lo que cambia es cuál. El interruptor y el reloj que conmutaban se retiraron en aquella tanda y no vuelven. 4. NO cubre las tres páginas que no enlazan el tema: `asistente-mapa.html`, `proveedor/prospectos.html` y `proveedor/respaldos.html`. Y en `campanas/publico.html` el va ANTES de su