/* ===================================================================== TINTA Y RELIEVE · la capa de componentes ===================================================================== Va DESPUÉS de `tema/tema-hielo-azul.css`, que trae las fichas, y ANTES de `material-hielo-azul.css`, que trae el sustrato y la letra. ⚠ EL NOMBRE ES HISTÓRICO. Ver la nota larga en la hoja de fichas. --------------------------------------------------------------------- LA ESPECIFICIDAD SE CUENTA, NO SE ESTIMA --------------------------------------------------------------------- Esa frase está escrita en la capa de material porque allí se contó mal DOS VECES en el mismo archivo. La cuenta vigente, medida hoy: `sistema.css` (297-303) escribe, sobre estas mismas clases: html[data-tema-oscuro] .card → (0,2,1) html[data-tema-oscuro] .kpi{ background: … } ← forma corta, y la forma corta borra el background-image de un selector más flojo `acceso.js` (1266) pone `data-tema-oscuro` en marcha en TODAS las pantallas, así que esas reglas sí muerden. Por eso aquí se usa `:root[data-tema] .card` → (0,3,0), que gana por número de clases sin importar las etiquetas. Y se acompaña de `:root:not([data-tema]) .card` para el instante anterior a que `acceso.js` corra en las 20 páginas cuyo no trae el atributo escrito: ahí la regla de `sistema.css` tampoco puede morder, así que con (0,2,0) basta. --------------------------------------------------------------------- EL VOCABULARIO ES EL MEDIDO, NO UNO NUEVO --------------------------------------------------------------------- No se inventan clases ni se remarca ninguna página. Los nombres que se repiten de verdad, contados sobre el sitio: .card 27 páginas .panel 20 páginas .caja 15 páginas .mini 15 páginas .kpi 12 páginas .cif 3 páginas .num 96 usos en 13 `.mini` se queda fuera, igual que antes: en varias pantallas no es un panel sino una etiqueta pequeña, y darle relieve la engorda. --------------------------------------------------------------------- ⚠ LO QUE ESTA CAPA NO HACE, Y SE DICE --------------------------------------------------------------------- No toca los 424 colores literales que viven en reglas sueltas de las páginas (117 de ellos en `tablero.html`). Ésos sobreviven a este archivo y son tanda propia. Lo que sí quedan pisados son los 1.031 que viven dentro de un `:root` de página, porque la hoja de fichas los sobreescribe. ===================================================================== */ /* ⚠ `.kpi` NO ESTA EN LA REGLA DE PANEL, y es deliberado. No significa lo mismo en todas partes: en `inicio.html` es una tarjeta clara y en `tablero.html` es una BALDOSA DE TINTA con letra blanca, puesta a proposito. Forzarle fondo claro dejaba el blanco encima -1,13:1, medido por `prueba_contraste.mjs`- y arrastraba dos rotulos mas de la misma baldosa. La caja se respeta; manda su pagina. /* ── 1 · EL PANEL · relieve alto ────────────────────────────────────── El relieve sustituye al borde. Se deja `border` transparente en vez de quitarlo, porque varias páginas cuentan con su grosor para el cálculo de alto y quitarlo movería la maqueta un píxel por caja. */ :root[data-tema] .card, :root[data-tema] .panel, :root[data-tema] .caja, :root[data-tema] .cif, :root[data-tema] .foco, :root:not([data-tema]) .card, :root:not([data-tema]) .panel, :root:not([data-tema]) .caja, :root:not([data-tema]) .cif, :root:not([data-tema]) .foco { background-color: var(--card); background-image: none; border: 1px solid transparent; border-radius: var(--radio, 18px); box-shadow: var(--sombra-alta); transition: box-shadow .26s var(--curva, cubic-bezier(.2,.9,.25,1)); -webkit-backdrop-filter: none; backdrop-filter: none; } :root[data-tema] .card:hover, :root:not([data-tema]) .card:hover { border-color: transparent; } /* Una tabla dentro de una tarjeta NO es una tarjeta. Si hereda el relieve, cada fila trae su propio filo de luz y la tabla se vuelve un acordeón. Y una tarjeta dentro de otra tarjeta es siempre un error: dentro de un panel sólo caben pozos o filas separadas por una línea. */ :root[data-tema] .card table, :root[data-tema] .panel table, :root[data-tema] .caja table, :root:not([data-tema]) .card table, :root:not([data-tema]) .panel table, :root:not([data-tema]) .caja table { background-image: none; box-shadow: none; } /* ── 2 · LAS TABLAS · la cabecera en tinta ──────────────────────────── La cabecera de una tabla es de lo que más se lee de un vistazo en este producto —el día D, en un teléfono, de pie—. Va en tinta sólida: 13,4:1, no una sombra. */ /* `thead th` a secas TAMBIEN: al acotar a `table thead th` se dejo fuera `simulador.html`, cuya cabecera se inyecta por innerHTML. Salia el gris de `--muted` sobre tinta, 2,35:1. */ :root[data-tema] thead th, :root:not([data-tema]) thead th, :root[data-tema] table thead th, :root[data-tema] thead tr th, :root:not([data-tema]) table thead th, :root:not([data-tema]) thead tr th { background: var(--th-bg); color: var(--sel-tinta); border-bottom-color: transparent; } /* Si se le pone el fondo, hay que ganarle TAMBIEN al color, y con la MISMA forma que `sistema.css` usa en su 1144: cuatro envoltorios de tabla. `simulador.html` salia gris sobre tinta, 2,35:1, porque el color venia por una via mas especifica que la del fondo. */ :root[data-tema] .tabla table thead th, :root[data-tema] .tblwrap table thead th, :root[data-tema] .tablaCaja table thead th, :root[data-tema] .tabla-alta table thead th, :root:not([data-tema]) .tabla table thead th, :root:not([data-tema]) .tblwrap table thead th, :root:not([data-tema]) .tablaCaja table thead th, :root:not([data-tema]) .tabla-alta table thead th { color: var(--sel-tinta); } :root[data-tema] table thead th *, :root:not([data-tema]) table thead th * { color: inherit; } /* Y la que de verdad mandaba: `sistema.css` 1096 pone en UNA SOLA regla `background-color: var(--th-bg)` y `color: var(--muted)`. Con el fondo ya en tinta, ese gris quedaba a 2,35:1 -- `simulador.html` inyecta su cabecera con `` SIN ``, asi que las reglas de `thead` ni la rozaban. Se responde con su misma forma. */ :root[data-tema] .card table th, :root[data-tema] .caja table th, :root[data-tema] .wrap table th, :root:not([data-tema]) .card table th, :root:not([data-tema]) .caja table th, :root:not([data-tema]) .wrap table th { color: var(--sel-tinta); } /* `sistema.css` pinta las filas pares y el hover con blancos translúcidos pensados para fondo de noche: sobre papel eso es invisible o sucio. */ :root[data-tema] table tbody tr:nth-child(even), :root:not([data-tema]) table tbody tr:nth-child(even) { background: transparent; } :root[data-tema] table tbody tr:hover, :root:not([data-tema]) table tbody tr:hover { background: var(--soft); } :root[data-tema] tbody td, :root:not([data-tema]) tbody td { border-bottom-color: var(--line); } /* ── 3 · CAMPOS · se hunden ─────────────────────────────────────────── Un campo SE HUNDE y un botón SOBRESALE. No es adorno: es la única señal de affordance que queda cuando se quitan los bordes. */ :root[data-tema] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]), :root[data-tema] select, :root[data-tema] textarea, :root:not([data-tema]) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]), :root:not([data-tema]) select, :root:not([data-tema]) textarea { background: var(--campo-bg); color: var(--ink); border: 1px solid transparent; box-shadow: inset -2px -2px 4px var(--relieve-luz), inset 2px 2px 5px var(--relieve-sombra); } /* ⚠ AQUI VIVIA EL ANILLO DE FOCO DE LOS CAMPOS, Y ERA EL DEFECTO. Decia `outline: 2px solid var(--acc); outline-offset: 2px`, y con especificidad (0,3,1) le ganaba a la regla de `material-hielo-azul.css` que la tanda del 3 de septiembre escribio para retirarlo -- aquella es `input:focus-visible`, (0,1,1). O sea: el commit que decia «ahora el foco se dice con el MATERIAL» dejo viva la regla que contradecia. El anillo siguio saliendo en las TRECE pantallas que se midieron, que es lo que Esteban reportaba como «se sigue agrandando el correo». El foco de los campos se dice UNA sola vez y en la ultima hoja, que es la unica que puede ganarle tambien a las quince pantallas que declaran su propio anillo. Ver `material-hielo-azul.css` § 4. Aqui no se escribe nada: una segunda voz sobre el foco es como nacio esto. */ :root[data-tema] ::placeholder, :root:not([data-tema]) ::placeholder { color: var(--placeholder); } /* ── 4 · BOTONES · sobresalen ───────────────────────────────────────── El sitio no tiene UNA clase de botón: tiene `.bot`, `.btn`, `.b` y `button` a secas, según la página. Se cubren las cuatro con la misma regla en vez de elegir una, porque elegir una dejaría tres pantallas de otra época. */ :root[data-tema] .bot, :root[data-tema] .btn, :root:not([data-tema]) .bot, :root:not([data-tema]) .btn { border: 1px solid transparent; box-shadow: var(--sombra); transition: box-shadow .2s var(--curva, cubic-bezier(.2,.9,.25,1)), transform .16s var(--curva, cubic-bezier(.2,.9,.25,1)); } :root[data-tema] .bot:hover, :root[data-tema] .btn:hover, :root:not([data-tema]) .bot:hover, :root:not([data-tema]) .btn:hover { box-shadow: var(--sombra-panel-alta); transform: translateY(-1px); } :root[data-tema] .bot:active, :root[data-tema] .btn:active, :root:not([data-tema]) .bot:active, :root:not([data-tema]) .btn:active { transform: none; box-shadow: inset -2px -2px 4px var(--relieve-luz), inset 2px 2px 5px var(--relieve-sombra); } /* El botón principal va en tinta, que es el único relleno oscuro del sistema y por eso marca solo la acción que la pantalla quiere. */ :root[data-tema] .bot--pri, :root[data-tema] .btn--pri, :root[data-tema] .bot.primario, :root:not([data-tema]) .bot--pri, :root:not([data-tema]) .btn--pri, :root:not([data-tema]) .bot.primario { background: var(--btn-bg); color: var(--btn-tinta); border-color: transparent; } /* ── 5 · EL PIE · deja de ser una banda de carbón ───────────────────── `#ciePie` se pinta con `var(--navy-d)` y sale en las 57 pantallas. Con la hoja nueva ya es azul de tinta y no carbón; lo que se ajusta aquí es la letra, que sobre tinta tiene que ser papel. */ :root[data-tema] #ciePie, :root:not([data-tema]) #ciePie { background: var(--navy-d); color: var(--sel-tinta); } :root[data-tema] #ciePie a, :root:not([data-tema]) #ciePie a { color: var(--sel-tinta); } /* ── 6 · SUPERFICIES DEL NAVEGADOR ─────────────────────────────────── Lo que no dibujamos también es diseño: la selección, el cursor de texto y la barra de desplazamiento vienen con valores que no son de ningún sistema. */ ::selection { background: var(--acc-velo); color: var(--tit); } :root { caret-color: var(--acc); scrollbar-color: var(--line-viva) var(--bg); } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-viva); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; } /* ═══════════════════════════════════════════════════════════════════ 7 · LA TANDA DEL 3 DE SEPTIEMBRE · lo que se vio en uso ═══════════════════════════════════════════════════════════════════ */ /* ── 7.1 · Las cabeceras de tabla, que se perdian ───────────────────── «Las palabras "lider, avance del mes" se pierden en la barra azul.» Iban a 9,5 px con .14em de espaciado sobre tinta: a esa talla la versalita se disuelve. Sube a 11 y baja el espaciado, que es lo que hace legible una versalita pequeña. */ :root[data-tema] .card table th, :root[data-tema] .caja table th, :root[data-tema] .wrap table th, :root[data-tema] thead th, :root:not([data-tema]) .card table th, :root:not([data-tema]) .caja table th, :root:not([data-tema]) .wrap table th, :root:not([data-tema]) thead th { font-size: 11px; letter-spacing: .10em; font-weight: 600; } /* ⚠ Y LA MITAD QUE FALTABA · LA CABECERA QUE NO ES UNA TABLA Todo lo de arriba apunta a `th`. La queja que lo motivo —«las palabras lider, avance del mes se pierden en la barra azul»— es de `lideres.html`, y esa pantalla NO tiene tabla: la cabecera es una REJILLA de `` con `class="cabecera"`. La regla de arriba no la rozaba, asi que la queja siguio entera despues del arreglo. Medido, y era peor que un tamaño: `.cabecera` toma su fondo de `--th-bg` (#16233C, la tinta) y su letra de `--muted` (#4F5D75). Eso da 2,36:1 -- texto invisible por el mismo mecanismo que el techo de la Sala de mando. La respuesta es la que el sistema ya usa para un `th` sobre tinta: `--sel-tinta`. Son DOS pantallas, no una: `lideres.html` y `dia-d.html`, medidas. Y son las unicas del sitio con `class="cabecera"`, tambien medido, asi que el nombre generico no arrastra a nadie mas. */ :root[data-tema] .cabecera > span, :root:not([data-tema]) .cabecera > span { color: var(--sel-tinta); font-size: 11px; letter-spacing: .10em; font-weight: 600; } /* ── 7.8 · EL TITULAR DE PANTALLA, DICHO UNA VEZ · 3-sep-2026 ───────── De la auditoria de las 59 pantallas: `.enc h1` -el titular estandar de una pantalla del producto- se declaraba con DOS valores distintos, y no es solo el tamaño, es tambien el PESO: · clamp(22px, 2.6vw, 28px) / 300 en 33 pantallas · clamp(24px, 3vw, 30px) / 600 en 7 (actas, consultar-puesto, inicio, jornadas, plantillas, precarga, puestos) Navegando de Electores a Actas el titulo cambia de talla Y de trazo. Es exactamente la asimetria que se nota sin saber senalarla: dos pantallas hermanas que no se sienten de la misma casa. Gana la de 33, que es la mayoria y la del rediseño. ⚠ Y SE ELIGE `.enc h1` A PROPOSITO, NO `h1`. Hay tres titulares que SI son distintos por decision y se midio que usan otro selector: `.cabeza h1` en `historico.html` (64 px, es una portada) y `.top h1` en `mapa` y `tablero` (19 px, van dentro de una banda densa). Una regla sobre `h1` a secas los aplastaria de paso. ⚠ LO QUE ESTA REGLA NO HACE, Y CONVIENE SABERLO: el demo aprobado (`docs/diseno/demo-tinta-y-relieve.html`) pone su `h1` en `var(--t-2xl)` = 24 px, y **esa escala nunca se porto al producto** -- ninguna de las dos familias coincide con el demo. Unificar en 28 quita la asimetria sin inventarse una decision de tipografia que nadie tomo; si algun dia se porta la escala del demo, el numero se cambia AQUI y en un solo sitio. */ :root[data-tema] .enc h1, :root:not([data-tema]) .enc h1 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 300; } /* ── 7.2 · Los botones de fila, que dominaban su fila ───────────────── «Los botones de verifica, no contesta, etcetera estan muy grandes y no guardan relacion con el motivo del tema.» Son acciones de UNA fila: deben pesar menos que el nombre de la persona a la que pertenecen. */ /* ⚠ SOLO CON RATON, Y NO ES UN DETALLE: `prueba_plan` mide en un movil de 390 px que TODO lo que se pulsa llegue a 44 px de alto -- «lo de la casa», dice el banco, «44 px, sin excepciones». Al achicar estos botones porque se veian grandes los baje a 32 y rompi esa regla: el banco los caza a 35 px. La tension es real y se resuelve sin ceder ninguna de las dos: se achican SOLO donde hay puntero fino -- raton, donde 32 px se acierta sin problema-- y en un dedo siguen midiendo 44. */ /* ⚠ `.fila-el` NO EXISTIA. Se escribio de memoria, y `grep` sobre los 60 HTML, los JS y las hojas devuelve CERO usos: la regla nombraba una clase inventada. La fila de electores es `.el`, y sus acciones cuelgan de `.acc` dentro de ella. ⚠ Y `.acc` A SECAS TAMPOCO SIRVE, aunque parezca lo obvio. Medido: `.acc` vive en TRECE pantallas y en la mayoria NO es una fila -- en `importar.html` es «Revisar el archivo», en `equipo`, `mensajes`, `organigrama` y `simulador` es la barra de accion principal del panel. Encogerla entera seria repetir exactamente el error de `.mini`: tomar el nombre de una clase por una declaracion de importancia. Se nombran las DOS filas que existen de verdad, medidas: · `#lista .el > .acc` -> electores.html · `#lista .fila .acc` -> seguimiento.html (la pagina ya usa ese mismo selector para colocarla) ⚠ EL `#lista` NO ES DECORACION, ES LA CUENTA. Las dos pantallas declaran `#app .b{min-height:44px}` --(1,1,0)--, y un `id` le gana a CUALQUIER numero de clases: la primera version, `.el .acc .b` (0,5,0), se midio y salia a 44 px igual. Hace falta un `id` en el selector para entrar siquiera a la discusion. Anclarlo a la LISTA, ademas, dice lo que la regla quiere decir: esto encoge lo que es una fila. ⚠ Y `> .acc` con hijo directo, tambien a proposito: dentro de `.el` hay un SEGUNDO `.acc`, el de la caja de edicion, con «Guardar cambios» y «Eliminar registro». Esos no son acciones de fila y no se tocan. */ @media (pointer: fine) and (min-width: 700px) { :root[data-tema] .ficha .b, :root:not([data-tema]) .ficha .b, :root[data-tema] .acciones .b, :root:not([data-tema]) .acciones .b, :root[data-tema] #lista .el > .acc .b, :root:not([data-tema]) #lista .el > .acc .b, :root[data-tema] #lista .fila .acc .b, :root:not([data-tema]) #lista .fila .acc .b { height: 32px; min-height: 32px; padding: 0 13px; font-size: 12.5px; border-radius: 999px; } } /* ── 7.3 · Los segmentados de orden ─────────────────────────────────── «En lideres, los botones de atencion, avance, etcetera son muy grandes.» Son un control de ORDEN, no acciones: pesan como un filtro. */ /* ⚠ `.segm` TAMPOCO EXISTIA -- cero usos en todo el sitio, igual que `.fila-el`. Y `.orden` si existe, pero solo en `proveedor/index.html`: NO en `lideres.html`, que es la pantalla de la queja. Alli el control es `
` y sus botones no llevan `.b`, asi que ninguna de las dos mitades de la regla lo tocaba. Medido despues del arreglo: seguian a 44 px. Se nombra `.seg button`, que es lo que hay. Y va `min-height` ademas de `height`: la pantalla declara `.seg button{min-height:44px}`, y un `height` mas pequeño NO gana a un `min-height` -- no es cuestion de especificidad, es que son propiedades distintas y el minimo manda. */ @media (pointer: fine) and (min-width: 700px) { :root[data-tema] .orden .b, :root:not([data-tema]) .orden .b, :root[data-tema] .seg button, :root:not([data-tema]) .seg button { height: 32px; min-height: 32px; padding: 0 14px; font-size: 12.5px; } } /* ── 7.4 · Las listas largas no alargan la pagina ───────────────────── «Como aparecen muchos electores, no permitas que se extiendan todos hasta abajo, incluyelos en un cuadro que vaya bajando.» La lista vive en su propio pozo con desplazamiento: la pagina conserva su alto y el contexto de arriba -- los contadores, los filtros -- no se pierde al bajar. Alto en `dvh` para que en un telefono cuente la barra del navegador, que es donde esto se usa. */ :root[data-tema] #listaEl, :root[data-tema] #lista, :root:not([data-tema]) #listaEl, :root:not([data-tema]) #lista { max-height: min(62dvh, 720px); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; border-radius: var(--radio-ch, 16px); } /* ── 7.5 · Las ventanas, que salian mas grandes que su contenido ────── «Cuando le doy en registrar, el cuadro se ve muy grande y hay una barra blanca que tapa.» La barra blanca era la cabecera pegajosa de la pagina asomando por encima de la capa. Se acota el alto y se sube la capa por encima de todo lo pegajoso. */ :root[data-tema] .capa, :root[data-tema] .modal, :root:not([data-tema]) .capa, :root:not([data-tema]) .modal { z-index: 9500; } :root[data-tema] .capa > .card, :root[data-tema] .capa > .caja, :root[data-tema] .modal > .card, :root:not([data-tema]) .capa > .card, :root:not([data-tema]) .capa > .caja, :root:not([data-tema]) .modal > .card { max-height: min(86dvh, 880px); overflow-y: auto; } /* ── 7.6 · EL TECHO DE PANTALLA · el ancla que ya no esta ───────────── `sistema.css` (816) pinta `.top` con un degradado de carbon -#1F2124 a #191A1D- y su comentario dice por que: «el techo pasa al MISMO carbon del riel... el riel ya era el ancla fija que no cambia con el tema». ESE ANCLA YA NO EXISTE. El riel es claro desde esta tanda, asi que el techo se quedo siendo la unica banda oscura de la pantalla, sin nada con que hacer juego. Esteban lo vio como gris sucio: «en Sala de mando aparece en gris, cambia el color». Y el banco lo midio: 1,03:1 en «Sala de mando», que es texto invisible. Se acompaña al riel otra vez, ahora en claro. Y con el fondo se lleva los blancos de dentro -- el mismo comentario avisaba de que eran 23 y de que aclararlos por separado dejaria texto invisible; se hacen juntos, que es la unica forma de que eso no pase. */ :root[data-tema] .top, :root:not([data-tema]) .top { background: var(--card); color: var(--tit); border-bottom: 1px solid transparent; box-shadow: var(--sombra-panel); } :root[data-tema] .top h1, :root[data-tema] .top h2, :root[data-tema] .top b, :root[data-tema] .top strong, :root:not([data-tema]) .top h1, :root:not([data-tema]) .top h2, :root:not([data-tema]) .top b, :root:not([data-tema]) .top strong { color: var(--tit); } :root[data-tema] .top .quien, :root[data-tema] .top small, :root[data-tema] .top .sub, :root:not([data-tema]) .top .quien, :root:not([data-tema]) .top small, :root:not([data-tema]) .top .sub { color: var(--muted); } /* Los botones del techo: iban en transparente con borde blanco, que sobre claro es un boton que no esta. Pasan al relieve del sistema. */ :root[data-tema] .top .b, :root[data-tema] .top .btn, :root:not([data-tema]) .top .b, :root:not([data-tema]) .top .btn { background: var(--card); color: var(--ink); border: 1px solid transparent; box-shadow: var(--sombra); } :root[data-tema] .top .b:hover, :root[data-tema] .top .btn:hover, :root:not([data-tema]) .top .b:hover, :root:not([data-tema]) .top .btn:hover { color: var(--acc); box-shadow: var(--sombra-panel-alta); } /* Los cuatro que quedaban dentro del techo, cazados por el banco: `.n`, `.t`, `label` y `.sello` seguian en blanco o en un azul claro pensado para carbon. Se cubren por nombre en vez de con un `.top *`, que borraria de paso los colores semanticos -- una cifra en rojo dentro del techo tiene que seguir en rojo. */ :root[data-tema] .top .n, :root[data-tema] .top .cifra, :root:not([data-tema]) .top .n, :root:not([data-tema]) .top .cifra { color: var(--tit); } :root[data-tema] .top .t, :root[data-tema] .top label, :root[data-tema] .top .sello, :root[data-tema] .top .pie, :root:not([data-tema]) .top .t, :root:not([data-tema]) .top label, :root:not([data-tema]) .top .sello, :root:not([data-tema]) .top .pie { color: var(--muted); } /* ⚠ DOS QUE FALTABAN EN ESA LISTA, Y SE VIERON EL 3-sep-2026 AL MOVER OTRA COSA. Esta regla aclara `.top` en TODA pantalla que use esa clase, no solo en la Sala de mando para la que se escribio. Tres pantallas del trabajo de campo -`alta-testigo`, `puertas` y `reporte`- tienen su propio `.top` declarado oscuro, y al aclararlo el tema por encima, sus rotulos internos se quedaron con el color de cuando el fondo era tinta: `#A6BED1`, un azul claro, que sobre el papel da 1,7:1 -- invisible. Se cazo al apuntar esas tres al vocabulario del tema y medirles el contraste; NO estan en `prueba_contraste`, que solo cubre dieciseis. `.s` y `.donde` son el mismo rotulo de segunda linea que `.sub` y `.quien`, con otro nombre: entran a la lista. */ :root[data-tema] .top .s, :root[data-tema] .top .donde, :root:not([data-tema]) .top .s, :root:not([data-tema]) .top .donde { color: var(--muted); } /* ── 7.7 · EL SUELO DE 44 PX, DICHO UNA VEZ PARA TODO EL SITIO ──────── «Lo de la casa»: `prueba_plan` mide en un movil de 390 px que TODO lo pulsable llegue a 44 px de alto, y lo llama asi -- sin excepciones. Cada pantalla lo declaraba por su cuenta (`#app .b{min-height:44px}` en plan, y sus equivalentes en las demas). Eso funciona hasta que algo lo pisa: un contenedor flex que encoge a su hijo, una regla nueva con mas peso, o -- como paso en esta tanda -- una tanda de estilo que baja alturas para que las piezas «se vean menos grandes». Se dice UNA vez, aqui, en la capa que habla despues de las pantallas: con un dedo, 44. La rebaja para raton vive en su propia @media mas arriba y solo entra con puntero fino. Asi la regla deja de depender de que cada pantalla se acuerde de ella. */ @media (max-width: 699px), (pointer: coarse) { :root[data-tema] button, :root[data-tema] .b, :root[data-tema] .bot, :root[data-tema] .btn, :root:not([data-tema]) button, :root:not([data-tema]) .b, :root:not([data-tema]) .bot, :root:not([data-tema]) .btn { /* ⚠ 46 Y NO 44, Y NO SE POR QUE HACE FALTA EL PIXEL DE MAS. Medido: sin este bloque, cuatro botones de `plan.html` salen a 35 px; con el suelo en 44 suben a 43, no a 44. La pagina declara `#app .b{min-height:44px}` y ese selector SI aplica -- `#app` envuelve al boton, comprobado. Un `min-height` de 44 que rinde 43 no deberia ocurrir, y no logre identificar que lo recorta: se descartaron el modelo de caja, una altura fija que compitiera (`height:auto` no cambio nada), el contenedor `.marca` con su `overflow:hidden`, y el modulo del desplegable (apagado, mismo resultado). 46 no es un numero inventado para pasar el banco: es 44 mas los 2 px de borde que estos botones llevan arriba y abajo. Pero la causa del pixel sigue sin explicar, y eso queda dicho aqui en vez de fingir que se entendio. */ height: auto; min-height: 46px; } /* ⚠ AQUI HABIA UNA EXENCION PARA `.mini`, Y ERA UNA SUPOSICION MIA. La escribi pensando que `.mini` marca lo accesorio -- una «x» de cerrar dentro de una pildora-- y le quite el suelo. Medido: en `campanas/bitacora.html` los `.b.mini` son `btnSalir` (cerrar sesion), `bAnt` y `bSig` (paginar). Cayeron a 18 px y el banco los caza con su propia regla: «botones e interruptor en 44 px, ni uno por debajo». `.mini` describe el TAMANO DE LA LETRA, no la importancia del acto. No hay exencion. */ }