/* Controly Micro — capa de diseño Tokens y componentes traducidos del mockup de Claude Design. Los tokens se definen por ROL, no por color: el tema oscuro reasigna valores sin renombrar nada. ── UN CIERRE DE COMENTARIO DE MÁS MATA LA REGLA DE ABAJO, EN SILENCIO ── (2026-08-29.) Este archivo es mitad prosa, y esa es su virtud y su trampa: al reordenar un bloque de comentario es fácil dejar un cierre suelto, y entonces el texto que sigue se lee como CSS, el parser descarta hasta poder recobrarse y **se lleva la regla siguiente**. No hay error en consola ni en la pestaña de red: la pieza simplemente hereda del cuerpo (16px, tinta) como si nadie la hubiera estilado. Pasó con `.panel-titulo .medida, .panel-titulo .periodo` y se descubrió mirando la pantalla, no el código. POR ESO ESTE AVISO NO PUEDE TECLEAR LOS DELIMITADORES, ni en prosa: la primera versión los nombraba entre acentos graves para explicarse y con eso se cerró a sí misma a la altura del tercer párrafo, dejando fuera del comentario todo lo que sigue — incluido el bloque de tokens. Se cazó al instante con el detector de abajo, que es exactamente para lo que existe. Detección, desde la raíz de `crm/` y cuesta un segundo — las dos cifras deben salir en 0 (borra los comentarios balanceados y cuenta lo que sobra): python3 -c "import re;a=chr(47)+chr(42);b=chr(42)+chr(47);\ s=open('public_html/activos/app.css',encoding='utf-8').read();\ t=re.sub(re.escape(a)+'.*?'+re.escape(b),'',s,flags=re.S);print(t.count(b),t.count(a))" Los delimitadores se arman con `chr()` y no se teclean, y eso NO es coquetería: escrito con el literal, el comando se cuenta a sí mismo y el detector reporta 2 huérfanos para siempre — un check que grita en verde es tan inútil como no tenerlo. Se descubrió al estrenarlo, aquí mismo. Y la comprobación que de verdad cierra el caso es medir la pieza en el navegador (`getComputedStyle`), no releer el selector: la regla estaba escrita y correcta — lo que fallaba era que llegara. */ /* ── Tokens ─────────────────────────────────────────────────────────── */ :root{ --app-bg:#ffffff; --doc-bg:#f1efec; /* EL GRIS DE LA CASA — y es el de la BARRA DE ICONOS de Controly, no el de su lienzo. Desde el 2026-08-26 vale `#F0EEE6`, que es lo que pinta la `.iconav` de Controly (`.bg-nav` de su `app-tema.css`, medido en vivo `rgb(240,238,230)`); antes era un gris frío propio, `#f6f6f7`. El criterio es de marca: las dos apps son la misma casa y la barra lateral es lo primero que se ve al entrar, así que comparte superficie con su hermana. Es un beige CÁLIDO, no un gris neutro — no se puede sustituir «por otro parecido». NO confundirlo con el fondo principal de Controly (`.bg-principal`, `#FAF9F5`): ése es su lienzo y aquí el lienzo es `--app-bg` (blanco). Se probó primero con el `#FAF9F5` y era el color equivocado. SÓLO CAMBIÓ EL CLARO. El oscuro (#252528) se queda: allá la relación barra/papel ya funcionaba y Controly nocturno usa otro valor. Lo pintan NUEVE superficies, no sólo la barra: el riel, la cabecera de la sábana, el peek, los paneles y la puerta del login. Es un token de ROL —«esto rotula, no es contenido»— y por eso se mueven todas juntas. ES MÁS OSCURO QUE EL GRIS QUE SUSTITUYE Y ESO CUESTA CONTRASTE, así que dos tintas se recalibraron en el mismo cambio o habrían caído bajo el mínimo de 4.5:1 sobre esta superficie — el detalle, en cada una. Lo que GANA es la separación contra el papel blanco: 1.080 → 1.162. */ --app-sidebar-bg:#F0EEE6; /* ── LA SUPERFICIE SECUNDARIA ────────────────────────────────────────── El segundo gris del sistema. Lo lleva TODO lo que acompaña al contenido sin ser contenido y sin ser la barra: el riel del cascarón (`.app-lado`), las dos cabeceras de tabla (la sábana y los catálogos), las columnas del tablero y los tiles de KPI. ── LA ESCALERA, QUE ES DE LO QUE VA ESTE TOKEN ──────────────────────── Hasta el 2026-08-26 la app tenía DOS grises y uno de ellos hacía dos trabajos: `--app-sidebar-bg` pintaba la barra Y todo lo demás, así que una cabecera de tabla pesaba exactamente lo mismo que la navegación. Hoy son tres escalones — barra (manda) · secundario (acompaña) · papel (el contenido) — y cada superficie está en el suyo. Se escribe como MEZCLA y no como hex para que sea la definición y no una copia: el día que la barra cambie de tono, esto se mueve con ella sin que nadie recalcule nada — que es justo lo que se paga cuando dos grises emparentados se escriben a mano por separado. Y sale OPACO, que no es un detalle: la cabecera de la sábana congela sus dos primeras celdas al desplazarse en horizontal y tiene que tapar lo que le pasa por debajo. `color-mix` ya se usaba en la hoja (`--ctl-bg-solido` del tema oscuro). 40% Y NO 50%. Nació a medio camino exacto (1.077:1 contra el papel y 1.079 contra la barra — el reparto perfecto) y Arif lo pidió «un tono más hacia el blanco» el mismo día. A 40 resuelve a rgb(249,248,245): 1.061:1 contra el papel y 1.095 contra la barra. Ya no reparte a la mitad, y es lo correcto — esto ACOMPAÑA, así que se parece más al papel que a la barra, que es la que manda. Sigue siendo un tinte legible: el gris que la barra tuvo hasta el 2026-08-26 (#f6f6f7) daba 1.080 contra el blanco, o sea del mismo orden. Y NO cuesta contraste, lo regala: al aclararse, todo lo que se escribe encima sube (`--app-fg` 14.65→16.04, el secundario 6.36→6.97, y tanto el terciario como el acento cruzan el 5.00 desde 4.57 y 4.56). SE LLAMÓ `--app-lado-bg` DURANTE UNA HORA, y se renombró al ganar su segundo consumidor. Es la lección que esta hoja ya tenía escrita dos veces (`--btn-radio` → `--r-pill`, `--fs-peek` → `--fs-destacado`): un token con nombre de UN consumidor deja de reconocerse en cuanto lo usa otro, y quien lo necesita acaba escribiendo el literal. */ --app-secundario-bg:color-mix(in srgb, var(--app-sidebar-bg) 50%, var(--app-bg)); /* ── LA TINTA — el pigmento neutro del tema claro (2026-08-27) ──────── La paleta clara dejó de ser gris el 2026-08-26 (la barra pasó al beige de Controly) pero las VELADURAS siguieron moliéndose de negro puro: hairline, hovers, chips, bordes de control, sombras — todo `rgba(0,0,0,α)`, es decir, el gris frío de la paleta anterior asomando en cada canto. Desde hoy TODA veladura neutra del claro se muele de esta tinta única: un umbra en el matiz de la casa (~44°, el del beige), vía `color-mix(in srgb, var(--app-tinta) N%, transparent)`. LOS PORCENTAJES NO SON LOS ALPHAS VIEJOS: están resueltos numéricamente para que cada veladura compuesta sobre blanco conserve LA MISMA luminancia que su negro-α anterior (la tinta es menos oscura que el negro, así que cada N% sube ~27%). Consecuencia deliberada: ningún ratio de contraste medido en esta hoja se movió — sólo giró el matiz. El mismo criterio se aplicó a las tintas de TEXTO (fg y compañía): mismo L, matiz cálido; sus cifras documentadas siguen valiendo al centésimo. El tema oscuro NO cambió: sus veladuras son blancas y ya eran neutras sobre fondo neutro — este token sólo gobierna el claro. */ --app-tinta:#403620; --app-hairline:color-mix(in srgb,var(--app-tinta) 7.6%,transparent); /* ── LA ESCALERA DE BORDES (2026-08-27, pedido de Arif) ────────────── Dos pesos neutros y una regla. El SUTIL (`--app-hairline`, 7.6%) separa POR DENTRO —el border-bottom de una cabecera, el filete entre zonas— y borde a lo que ya está delimitado por otra cosa (la sombra de un flotante, el tinte de un badge, una pieza mini como `code`). El ESTÁNDAR (`--app-borde`, 15%) es el CANTO de una pieza que vive en la página: sección, tile, tarjeta, columna del tablero, la caja de datos del tramo, la barra de selección. Más visible que el sutil sin ser agresivo — el peso de un ~12% de negro, el orden del borde de card de Bootstrap. Entre ambos queda el filo de control (`--ctl-borde`, 12.7%), que es de los CONTROLES y no se mezcla con éstos; encima siguen el muted (19.1%, contorno de la salida) y el hover (25.4%). Hasta hoy todas las cajas iban en la hairline y el propio catálogo ya había medido la consecuencia: «.06 es el de separar bloques y aquí NO SE VE» (ficha del total de la consola). En OSCURO la escalera no se abre: `--app-borde` vale lo mismo que su hairline (.09 blanco), porque allá la sutil ya delimita — el encargo fue solo el tema claro. */ --app-borde:color-mix(in srgb,var(--app-tinta) 15%,transparent); --app-row-hover:color-mix(in srgb,var(--app-tinta) 4.5%,transparent); /* A 14px el atenuado tiene que ser SUTIL, no intenso: el salto de primario a secundario bajó de 3.2× a 2.3× de contraste, y los dos grises pasan ahora el mínimo de 4.5:1. Un gris que a 15px se leía como jerarquía, a 14px se lee como texto deshabilitado. */ --app-fg:#1f1c15; /* cálido desde 2026-08-27 (era #1c1c1e): mismo L, matiz de la casa */ --app-fg-secondary:#59554a; /* 7.4:1 — antes 5.3. Cálido desde 2026-08-27 (era #55555c), mismo L */ /* 5.3:1 sobre papel y 4.57:1 sobre el gris de la barra lateral, que es donde vive la mitad de sus usos. El #757579 original estaba calibrado SÓLO contra blanco (4.6) y caía a 4.2 en cuanto se posaba sobre la lateral — el fondo importa tanto como el color. TRES PASOS MÁS OSCURO desde el 2026-08-26 (#6f6f73 → #6b6b6f), y por esa misma lección: con la barra en el beige de Controly (#F0EEE6, más oscuro que el #f6f6f7 anterior) el valor viejo se quedaba en 4.31 — otra vez bajo el mínimo, en la misma superficie y por la misma causa. La corrección va en el TOKEN y no en un override de la barra porque el beige lo pintan nueve superficies. A ojo es el mismo gris; medido, +0.26 sobre la barra y +0.3 sobre el papel. */ /* Y CÁLIDO desde el 2026-08-27 (era #6b6b6f): mismo L con el matiz de la casa — las medidas de arriba siguen valiendo al centésimo. Igual que el primario y el secundario; el criterio vive en LA TINTA. */ --app-fg-tertiary:#6f6b60; /* 5.3:1 con blanco encima y 5.3:1 como texto sobre papel. El #007aff de antes daba 4.0 en los dos papeles: no llegaba al 4.5 ni de relleno ni de letra. A ojo son el mismo azul. UN PASO MÁS OSCURO desde el 2026-08-26 (#0069d9 → #0068d7), por el beige de la barra: `.pnl-enlace` («abrir →» de las secciones del panel, retirado sin consumidor el 2026-09-19) era acento sobre `--app-sidebar-bg`, y ahí el valor viejo medía 4.494 — bajo el mínimo por una milésima. Un solo paso lo lleva a 4.56 y sube sus otros dos oficios de 5.22 a 5.30, así que no hay nada que ceder a cambio. */ --app-accent:#0068d7; /* El acento tiene DOS oficios y en el tema oscuro no los puede hacer el mismo valor. De TINTA —enlace, foco, acción de texto— necesita ir CONTRA el fondo nocturno: luminancia ≥0.234 para dar 4.5:1. De RELLENO con letra blanca encima necesita justo lo contrario: ≤0.183. No se cruzan —la misma aritmética que obligó a los badges a ser translúcidos—, así que el relleno es su propio token. En claro los dos oficios SÍ caben en un valor y esto no es más que el acento. */ --app-accent-solido:var(--app-accent); /* El color de la LETRA que va encima del relleno. Blanco en LOS DOS TEMAS —5.22:1 en claro, 4.67:1 en oscuro— desde que el relleno se separó de la tinta (2026-08-10). Antes era un valor por tema: con un solo azul para los dos oficios, la única salida en oscuro era escribir en gris oscuro. */ --app-accent-fg:#ffffff; /* LA MARCA — el navy del logotipo de Controly. NO es un token de interfaz: no se deriva del acento ni del texto y no lo usa ningún control. Existe porque el logotipo tiene un color propio y ése es el que manda cuando se escribe el nombre. En oscuro pasa a blanco puro, que es la tinta de la versión nocturna del símbolo (`icono-controly-w.png`). EL VALOR SALE DEL ARCHIVO desde el 2026-08-26: `#101A2D` es el píxel del anillo de `icono-controly.png`, y la palabra «controly» del logotipo de Controly va en `#131A2C` — el mismo navy. Antes valía `#0b1120`, que se le parecía sin serlo: el símbolo y el nombre escrito a su lado iban en dos tintas distintas. Muestreado, no estimado. Contraste 14.97:1 sobre la barra beige, así que no hay nada que ceder. */ --marca-fg:#101A2D; /* TEAL — información y estado. Deliberadamente lejos del azul: desde que el azul significa «esto escribe en la base», un badge azul prometería una escritura que no va a ocurrir. */ --app-info:#0ea5a5; /* Cada color semántico va en PAREJA: uno para teñir un fondo y otro para escribir encima. No son intercambiables y el error de confundirlos es silencioso — un punto de 6px del color del tinte sobre ese mismo tinte da 2.56:1 y parece que está bien hasta que lo mides. Los `-text` son los únicos que sí varían por tema: para leerse necesitan ir contra el fondo, y el fondo cambia. */ --app-info-text:#087070; --app-peligro-text:#b82418; --app-exito-text:#0f7040; --app-atencion:#ffcc00; --app-atencion-text:#8f6700; /* 5.1:1 sobre papel · 4.8:1 sobre su tinte — antes 3.9 y 3.6 */ --app-chip:color-mix(in srgb,var(--app-tinta) 6.4%,transparent); --app-pill:color-mix(in srgb,var(--app-tinta) 8.9%,transparent); /* Dos tonos que NO son la línea de pelo. La hairline (6%) dibuja estructura —separa una zona de otra— y es tan tenue que un botón hecho con ella no se lee como objeto. Éstos dibujan el CANTO de una pieza: el muted define el contorno de la salida, el tenue es su relleno de reposo. */ --app-borde-muted:color-mix(in srgb,var(--app-tinta) 19.1%,transparent); --app-relleno-tenue:color-mix(in srgb,var(--app-tinta) 4.1%,transparent); /* ── Control ────────────────────────────────────────────────────── Papel con un filo, no un hueco gris. Es el estándar de Bootstrap y de casi todo formulario web, pero con el borde MÁS TENUE que el suyo: Bootstrap usa #dee2e6 ≈ 13% de negro; aquí el peso de un 10% (desde el 2026-08-27 dicho en la tinta cálida al 12.7% — ver LA TINTA). Con 11 controles en una ficha, tres puntos menos de borde son la diferencia entre una rejilla y una lista de campos. En oscuro no es blanco sino un OSCURECIMIENTO relativo (22% de negro): así el campo se lee como hueco tanto sobre el fondo de la app como sobre el papel del peek, sin necesitar dos valores. */ --ctl-bg:#ffffff; /* Gemelo OPACO de --ctl-bg, y existe por una sola razón: la defensa contra el autofill de Chrome se pinta con box-shadow inset, y un color translúcido deja pasar el amarillo que se quiere tapar. En claro coincide con --ctl-bg; en oscuro se resuelve el translúcido contra el fondo. */ --ctl-bg-solido:#ffffff; --ctl-borde:color-mix(in srgb,var(--app-tinta) 12.7%,transparent); --ctl-borde-hover:color-mix(in srgb,var(--app-tinta) 25.4%,transparent); /* ── EL FILO DEL CAMPO, AGRESIVO (2026-09-20, decisión de Arif) ────────── TOKEN PROPIO Y NO `--ctl-borde` SUBIDO, y la distinción la pagó una regresión: la primera versión subió `--ctl-borde` de 12.7% a 75% y su hover de 25.4% a 90%, y esos dos tokens tienen **19 consumidores que no son el campo** — dos de ellos los usan como FONDO y no como filo: el pulgar de la barra de scroll (`::-webkit-scrollbar-thumb`) y el hover de `.ver-clave`. Los dos se volvieron marrón oscuro. Lo cazó Arif en el scroll del diálogo, que es donde más se ve. La lección: un token con veintiún lectores no se sube para arreglar a uno. El campo pide un filo propio, así que tiene uno propio, y lo leen exactamente cuatro reglas — el control y su hover, el campo de la puerta y el suyo. 75% DE TINTA = **#706858** sobre blanco: el peso que Arif pidió («entre #666 y #777») y dentro de ese rango en claridad. No es gris neutro porque la casa tiene escrito que toda veladura neutra del claro se muele de `--app-tinta` (ver LA TINTA); un #6d6d6d frío se vería azulado al lado del beige de la barra. POR QUÉ TAN FUERTE: hoja y campo son los dos blancos en claro (1.00:1), así que el contorno hace TODO el trabajo de delimitar. Es la alternativa a teñir la hoja, que se construyó el mismo día y Arif descartó — el porqué completo está en `.dlg-caja`. LO LLEVA TAMBIÉN EL CAMPO DE LA PUERTA (`.campo-flotante input`): su superficie es `--app-bg`, o sea el mismo blanco, así que tenía el mismo problema. Lo que NO lo lleva es nada que no sea un campo. EN OSCURO NO APLICA y el tema lo redeclara al filo normal: allá el control es translúcido y se hunde solo sobre cualquier fondo. */ --ctl-filo:color-mix(in srgb,var(--app-tinta) 75%,transparent); --ctl-filo-hover:color-mix(in srgb,var(--app-tinta) 90%,transparent); /* EL HALO DE BOOTSTRAP 5, clonado tal cual (2026-08-17, pedido de Arif). Son sus dos valores literales, no una aproximación con los colores de la casa: `$input-focus-border-color: tint-color($primary, 50%)` = #86b7fe, y `$input-btn-focus-box-shadow: 0 0 0 .25rem rgba($primary, .25)` = rgba(13,110,253,.25). Los 4px de las reglas que lo pintan SON esos .25rem (la raíz mide 16px), así que no se tocaron. Antes era teal (`--app-info`) al 16%. Lo que se pierde con el cambio es el argumento de que el foco hablara el idioma de la fila elegida; lo que se gana es un halo que se reconoce sin aprenderlo. Translúcido igual, así que sigue sirviendo en los dos temas sin gemelo — y Bootstrap 5.3 tampoco lo redefine en oscuro. */ --ctl-foco:#86b7fe; --ctl-halo:rgba(13,110,253,.25); /* ── Radios ─────────────────────────────────────────────────────── Cada uno responde una pregunta, y por eso son cuatro y no nueve: --r-mini ¿mide menos de 20px? pista de teclado, `code`, checkbox --r-ctl ¿contiene algo? control, opción, celda, chip, tarjeta --r-caja ¿flota? menú, toast, popover --r-dialogo ¿flota Y mide 440+? el diálogo, y sólo él --r-pill ¿se pulsa? botones y chips de filtro `--r-mini` existe porque la proporción importa: 8px en una caja de 16px de alto ya no es una esquina suave, es medio pill — y entonces una pista de teclado empieza a parecer un botón. Fuera de estos CINCO sólo hay dos formas, y ninguna es un radio: el 50% de lo circular (flotante, avatares, la × de un chip) y el 0 de la rejilla, donde una esquina redonda dejaría ver la línea del grid por debajo. Corregido el 2026-09-19: esta lista ponía también las flechas del peek entre lo circular. Salieron del 50% el 2026-08-18 y llevan `--r-pill` sobre una caja cuadrada (`.peek-nav .flecha`, más abajo), que da el mismo círculo y las hace la misma pieza que la × del sistema. */ --r-mini:4px; --r-ctl:8px; --r-caja:12px; /* LA PÍLDORA, que la regla nombra desde el principio —«pill lo que se pulsa»— y que hasta el 2026-08-16 se llamaba `--btn-radio`. El nombre era el problema, no el valor: cuatro radios se llamaban `--r-*` y el quinto llevaba el nombre de UN consumidor, así que quien necesitaba una cápsula que no fuera un botón —un chip de estado, una barra de progreso— no reconocía el token y escribía `999px`. Pasó SEIS veces, y el propio comentario del token predicaba lo contrario. Renombrado, la escala se lee como escala y esos seis literales desaparecieron. Y la regla se afina con ellos: pill es lo que se pulsa **y lo que es literalmente una cápsula**. También las flechas del peek y la tecla redonda (`.btn-circulo`): una caja cuadrada con `--r-pill` da un círculo. */ --r-pill:999px; /* El quinto, y no responde «¿flota?» sino «¿cuánto mide?». Es la MISMA aritmética de proporción que obligó a `--r-mini` a existir, ahora por el otro extremo: 12px en una hoja de 560×400 lee como esquina cuadrada, igual que 8px en una caja de 16 leía como medio pill. No se subió `--r-caja` a 16 porque sus otros consumidores —menú, toast, popover— miden lo que mide un control, y ahí 16 empieza a redondear el contenido. */ --r-dialogo:16px; /* El aire bajo un título de página. Un solo token porque un solo valor: lo ponía a mano cada página —18px en no contactar y papelera, 14+16 en la sábana vía la barra de filtros, y NADA en la sábana desde que esa barra se retiró (2026-08-09), que dejó el título pegado a la tabla. Ahora lo pone `.panel-titulo` y ninguna página vuelve a decidirlo. Subió de 18 a 27 el 2026-08-13 (+50%, pedido de Arif). El día que la cabecera perdió su píldora bajó de 44 a 31.2px, y el titular pasó a ser una LÍNEA de texto: sin marco que lo separe de lo de abajo, el aire es lo único que dice dónde acaba la cabecera y dónde empieza el contenido. Los 18 estaban calibrados contra una pieza que se veía sola. Del alto que se recuperó (13px) se devuelven 9 aquí; la tabla sigue ganando 4. */ --esp-titulo:27px; /* ── EL AIRE DE LA CONFIGURACIÓN (2026-09-03, pedido de Arif) ────── Dos números y una queja que los originó: *«ahora es de stress, todo acotado verticalmente»*. La consola apretaba porque cada pieza traía su propio número pequeño —la sección 14px de margen, la fila 6 de padding, el valor 2 de hueco— y nadie los estaba mirando juntos. Con la caja fuera (§Las reglas → «El panel no lleva cards») el aire ES la estructura, así que pasa a token: el que separa dos SECCIONES y el que respira dentro de una OPCIÓN. La proporción entre los dos es lo que hace legible la jerarquía — una sección tiene que separarse más de otra sección que dos opciones entre sí, o el recorrido se lee como una sola lista larga. NO gobiernan al peek ni al diálogo: ahí el alto lo decide el contenido y el aire cuesta filas. Lo dice `--esp-opcion` en `.vn-renglon`, que lo baja a lo de siempre. */ --esp-seccion:36px; --esp-opcion:14px; /* ── Los dos tamaños de icono ───────────────────────────────────── Dos en toda la app, y la pregunta que los separa NO es dónde vive el icono sino QUÉ TRABAJO HACE: --icn-texto acompaña — va dentro de una frase o de un control, al lado de palabras que ya dicen lo suyo (la flecha del enlace, el ojo de la contraseña). --icn-fila MARCA — es lo primero que se busca de una fila o de un bloque, y la palabra viene después (el ítem de menú, la alerta). El que marca tiene que verse: a 16 son 1.14× los 14 del texto y pesa MENOS que la palabra que etiqueta, así que la fila se lee al revés. A 20 son 1.43× y manda la silueta, que es lo que distingue una fila de otra. El que acompaña se queda en 16 por lo contrario: dentro de una frase, un glifo a 1.43× no acompaña, interrumpe. Ninguno crece nada: 20 + los 5+5 de padding son 30px contra los 31 que ya medía el ítem de menú —los pone el texto a line-height 1.5—. */ --icn-texto:16px; --icn-fila:20px; --app-check:color-mix(in srgb,var(--app-tinta) 35.6%,transparent); --app-paper:#ffffff; /* LA HOJA DEL DIÁLOGO (2026-09-20). Dos valores porque el claro y el oscuro llegaron a respuestas distintas mirándolos en pantalla: en claro la hoja se queda en papel y quien delimita el campo es su filo (75% de tinta, ver EL FILO DEL CONTROL); en oscuro se queda en el tono de la barra, que es el que Arif aprobó. El porqué de cada uno, en `.dlg-caja`. */ --dlg-hoja-bg:var(--app-paper); --app-shadow:color-mix(in srgb,var(--app-tinta) 15.3%,transparent); /* El halo del titular: más tenue que la sombra de elevación —no eleva nada, sólo dice que hay una superficie encima— y calibrado por tema, porque un negro al 12% sobre el fondo nocturno no existe. */ --app-halo:color-mix(in srgb,var(--app-tinta) 16.5%,transparent); /* El velo del diálogo NO es la sombra, aunque hasta el 2026-08-11 se pintara con ella: al 12% la pantalla de atrás queda casi intacta y nada dice «esto está en pausa» —justo lo único que un modal tiene que comunicar antes de que lo leas—. Token propio, con su valor por tema: en oscuro el mismo 28% no se ve contra un fondo que ya es negro. */ --app-velo:color-mix(in srgb,var(--app-tinta) 35.6%,transparent); /* Aquí vivió `--sombra-hundida` (la sombra interior de la caja de datos del tramo, clonada de Controly) hasta el 2026-08-27: Arif la juzgó tosca — un degradado sucio en las esquinas donde este sistema dibuja cantos — y la caja pasó al borde ESTÁNDAR (`--app-borde`). Con ella se fue la única sombra de relleno: las que quedan son todas de elevación. */ --app-group:color-mix(in srgb,var(--app-tinta) 3.8%,transparent); --app-amber-tint:rgba(255,204,0,.15); --app-accent-tint:color-mix(in srgb,var(--app-accent) 11%,transparent); /* ── Badges ─────────────────────────────────────────────────────── UN token por color, sin gemelo en el tema oscuro — y funciona porque son TRANSLÚCIDOS: el mismo valor se mezcla con lo que tenga debajo, así que aclara sobre papel y oscurece sobre el fondo nocturno él solo. Con un color SÓLIDO esto sería imposible, y no es opinión: para que un fondo pase 4.5:1 con texto oscuro necesita luminancia ≥0.235, y para pasarlo con texto claro necesita ≤0.137. No se cruzan. El mejor gris posible se queda en 3.80:1 contra el peor de los dos textos. El alpha es lo que rompe el empate, porque el fondo deja de ser un color fijo y pasa a ser una tinta sobre el papel del momento. Los alphas NO son iguales entre sí a propósito: el amarillo necesita 22% para pesar lo mismo que el rojo al 15%. Igualar el número igualaría la fórmula, no la percepción. Medido, texto del body sobre cada uno — claro / oscuro: info 14.1 / 12.2 · warning 15.4 / 8.2 danger 13.9 / 12.1 · success 14.7 / 10.2 */ --app-peligro:#ff3b30; --app-exito:#34c759; --badge-info: color-mix(in srgb,var(--app-info) 16%,transparent); --badge-warning:color-mix(in srgb,var(--app-atencion) 22%,transparent); --badge-danger: color-mix(in srgb,var(--app-peligro) 15%,transparent); --badge-success:color-mix(in srgb,var(--app-exito) 18%,transparent); /* ── Canto de estado ────────────────────────────────────────────── El FILO del bloque teñido, y lo único que se le tomó prestado al `.alert` de Bootstrap al clonarlo a la casa (2026-08-10): su alerta se delimita con un filo del color de su estado, y la nuestra se apoyaba sólo en el tinte. Un tinte al 15-22% llena, pero no cierra: el bloque no tenía dónde terminar. Subir el alpha del relleno lo habría cerrado a costa del contraste del texto, que es lo que ese alpha paga. De ahí para adentro el clon se queda en el idioma propio: el texto sigue siendo el del cuerpo y no la letra de color del original, y el info es el teal de la casa, no su cian. Se derivan del `-text`, NO del tinte. Ésa es la corrección que hace que funcione: el canto tiene el mismo trabajo que el icono de la alerta —leerse CONTRA el relleno—, y los `-text` son justamente los que cambian por tema para eso. Derivarlos del tinte partía el sistema en dos, porque el amarillo es el único cuyo tinte no se oscurece en claro: al 50% no pasaba de 1.23 sobre papel y en oscuro ya iba en 2.92. Con el `-text`, el canto y el icono del bloque hablan además con la MISMA voz. Y por eso basta UN alpha para los cuatro, sin la asimetría que sí necesitan los badges: la pareja `-text` ya hizo la ecualización. Medido, canto contra su propio relleno — claro / oscuro: info 1.91 / 2.68 · warning 1.83 / 2.65 danger 2.08 / 2.15 · success 1.95 / 2.63 El original mide 3.0 en oscuro; 45% deja el filo un punto por debajo — visible como canto, sin que el bloque se lea como una caja con marco. */ --canto-info: color-mix(in srgb,var(--app-info-text) 45%,transparent); --canto-warning:color-mix(in srgb,var(--app-atencion-text) 45%,transparent); --canto-danger: color-mix(in srgb,var(--app-peligro-text) 45%,transparent); --canto-success:color-mix(in srgb,var(--app-exito-text) 45%,transparent); /* La fila elegida lleva el MISMO teal que el badge info, pero en un tinte más suave (9% frente a 16%): estirado a lo ancho de una fila entera, el tinte del badge grita. Mismo color para el mismo significado —«esto es lo que señalaste»— con menos tinta. */ --app-row-selected:color-mix(in srgb,var(--app-info) 9%,transparent); /* ── Tipografía ────────────────────────────────────────────────── PISO DE 14px (desde el 2026-09-08): ninguna letra por debajo; bajo esa cota sólo glifos. Corregido el 2026-09-19: esta cabecera decía «PISO DE 13px, y 14 para todo lo que sea un DATO», la regla del 2026-08-08 que el párrafo «EL PISO SUBIÓ A 14» de abajo ya había sustituido. La escala anterior bajaba a 12 y 11px siguiendo la convención de las apps de datos densas (Linear, Attio, Things). Esa convención existe porque en ellas el 12px es metadato decorativo — timestamps de adorno, contadores que nadie mira. Aquí no hay nada de eso: el espacio es tan caro que sólo se pinta lo que sirve para decidir. "hace 4 sem" en la columna Último toque ES el dato con el que se elige a quién llamar, y un dato que se entrecierra los ojos para leer no es jerarquía, es una factura que paga la vista del usuario. La jerarquía la lleva el COLOR —primario, secundario, terciario— que para eso está resuelto y medido. El tamaño ya no la lleva. Verificado: la altura de fila sigue en 36px, la cabecera en 30, y cero celdas truncadas. EL RÓTULO DE UN CAMPO ES DATO, y por eso mide 14 desde el 2026-08-17. Hasta ese día la línea se trazaba en «14 para datos, 13 para etiquetas que rotulan otra cosa», y ahí el 13 tapaba una contradicción: el rótulo de una CASILLA nunca pasó por ese token —hereda `--fs-base`— así que la misma palabra medía 13 junto a un input y 14 junto a un checkbox, a veces en el mismo diálogo. La regla que quedó fue: **todo lo que el usuario LEE para decidir o para llenar mide 14**, y a 13 sólo baja lo que ACOMPAÑA — un chip, un badge, un aviso al pie, el rótulo de un grupo. ── EL PISO SUBIÓ A 14 EL 2026-09-08, Y CON ÉL SE FUE EL 13 ── Instrucción de Arif: **ninguna letra por debajo de 14px**, tomando el panel de Cuenta como el módulo donde se midió y aceptando de antemano que el cambio alcanza a toda la app. Y la alcanza: `--fs-micro` tenía 61 consumidores, así que la única forma honesta de aplicarlo era el token, no una excepción por página. Lo que el caso enseña —y por qué el 13 no se defendía solo— es que la línea de 2026-08-17 ya se había demostrado porosa una vez: cada vez que había que decidir si una palabra «acompaña» o «es dato», la respuesta dependía de quién mirara. La cuenta lo dejó ver en un renglón: el rótulo de una `.cfg-fila` mide 14 en su tramo y 13 dentro de un `.cfg-grupo`, por un override que nadie recuerda haber pedido — la MISMA palabra, «Nombre», en dos tamaños en la misma pantalla. Un piso que no admite juicio no se puede aplicar mal. LOS TRES TOKENS DE 14 NO SE FUNDEN EN UNO, y es deliberado por lo que ya dice el párrafo de arriba: **la jerarquía la lleva el COLOR y el peso, no el tamaño**, así que `--fs-base`, `--fs-meta` y `--fs-micro` sobreviven como NOMBRES DE PAPEL —dato / meta / acompañamiento— y no como medidas. Sirven para dos cosas que un literal `14px` no puede: dicen qué papel juega lo que se está escribiendo, y dejan mover un papel entero el día que haga falta. Es el mismo criterio con el que `--fs-base` y `--fs-meta` llevan conviviendo en 14 desde el 2026-08-17 sin que nadie los fundiera. Por debajo de 14 sólo quedan GLIFOS —el ✓ y el – del checkbox, la flecha de orden, el asa y el candado del catálogo de columnas—, nunca letras. */ --fs-base: 14px; /* filas, barra lateral, peek, inputs, botones, menús, ETIQUETAS de campo */ --fs-meta: 14px; /* cabecera de columna, meta de bitácora, contadores */ --fs-micro: 14px; /* lo que ACOMPAÑA: chips, badges, avisos, títulos de grupo, pista de teclado. Midió 13px hasta el 2026-09-08 — ver arriba */ --fs-dialogo: 15px; /* el rótulo de una SUPERFICIE: hoja modal, panel (peek), sección, riel */ --fs-seccion: 17px; /* cabecera del chat, número de día de la agenda */ --fs-destacado: 20px; /* lo que se DESTACA dentro de una superficie: la cifra de un detalle, el nombre de la ficha de conversaciones, el «¡Listo!» de la reserva pública. No rotula la superficie —eso es `--fs-dialogo`—: realza algo que vive dentro de ella. Se llamó `--fs-peek` hasta el 2026-08-18, cuando el rótulo del peek bajó a 15 y lo dejó sin su consumidor homónimo. Es el mismo cuento de `--btn-radio` → `--r-pill`: un token con nombre de UN consumidor deja de reconocerse en cuanto ese consumidor se va, y quien lo necesita escribe el literal. Renombrado antes de que pasara, no después. */ --fs-titulo: 26px; /* título de la lista */ /* Geist quedó elegida el 2026-08-08: conserva el 97% de la altura de x de Inter en 6.4% menos ancho y tiene los dígitos más angostos de las candidatas — con una columna de teléfono eso se nota. El comparador de tipografías que servía para medirlo se retiró al decidir. */ --fuente: 'Geist', -apple-system, system-ui, sans-serif; /* Pareja display/texto: la personalidad vive en el CHROME, no en las 5,000 filas. Space Grotesk además YA es la tipografía de la marca Controly (design system de piezas sociales), así que ata el producto a la familia sin tocar la legibilidad de la sábana. Dónde va (2026-08-08): titulares >=20px, y bajo esa cota SÓLO el chrome que navega — enlaces y menús (barra lateral y desplegables), piezas cortas y escasas, y el título del estado vacío (2026-09-23). Los DATOS jamás: filas, campos, cifras y conteos se quedan en Geist, que para eso tiene los dígitos tabulares. */ --fuente-titulo: 'Space Grotesk', var(--fuente); --app-row-h:36px; /* El alto de la cabecera de la sábana. Es un token porque lo consumen DOS reglas que tienen que cuadrar: su propia caja y el `line-height` que centra su texto —que es lo que hace que la celda mida lo que mide la cabecera y su filo la cubra entera— (2026-08-13). Más baja que la fila: rotula, no lleva datos. */ --sabana-cab-h:30px; /* ── Alto de barra ──────────────────────────────────────────────── El alto de TODA tira horizontal de acciones: la barra de selección y cualquier barra o menú horizontal que venga (el titular fue el otro consumidor hasta el 2026-08-13, cuando perdió su píldora). Sale de los tokens, no de un gusto: una fila de datos más el aire de un botón. Si la fila o el botón cambian, la barra los sigue sola. Por qué hacía falta. La app tiene DOS átomos y los dos ya eran coherentes entre sí: el CONTROL mide 26.89px (botón, input, flotante — todos derivan de `--btn-py` y `--btn-lh`) y el ÍTEM de lista mide 31px (ítem de la barra lateral, acción de la barra de selección, opción del menú flotante — texto a `line-height` 1.5 más 5px). Lo que NO era coherente era el nivel de arriba: la cápsula del titular medía 42.89 y la barra de selección 45, sin que ninguna de las dos supiera de la otra. Dos piezas que hacen el mismo trabajo —flotar sobre el contenido con acciones dentro— y se diferenciaban en 2px, que es la peor distancia posible: no se lee como intención, se lee como descuido. 44 cabe holgado para los dos átomos (6.5px de aire alrededor del ítem, 8.5 alrededor del control), queda por encima de la fila de 36 —una barra no debe poder confundirse con un renglón de datos— y es además el blanco táctil de 44px de las guías de plataforma, que es exactamente lo que estas tiras son en un teléfono. CÓMO SE USA: `min-height` + centrado, NUNCA padding vertical calculado a mano. Así la barra no se desajusta cuando le cambian el contenido, y la que hoy lleva un ítem de 31 y mañana un control de 27 sigue midiendo lo mismo. El padding vertical de una barra debe ser 0. NO CUBRE LOS MENÚS DESPLEGABLES (movido del catálogo `ui.php`, 2026-09-19): un `.menu-flotante` es una pila, no una tira, y su alto es su contenido. Lo que sí comparte es el átomo: sus opciones son ítems de 31px, iguales a las de la barra lateral. */ --app-barra-h:calc(var(--app-row-h) + var(--btn-py) * 2); --app-dur:180ms; --app-ease:cubic-bezier(.2,.6,.2,1); /* ── LA GRÁFICA ──────────────────────────────────────────────────── Existen como TOKENS y no dentro del JS por el mismo motivo que el resto: un canvas no hereda CSS, así que su motor tiene que venir a buscar los colores aquí — y este es el único sitio donde el tema los puede cambiar. Ponerlos en el marcado (como hace la rueda, con el rgba escrito en un `data-*` de cada canvas) los deja fuera del alcance del tema para siempre. El teal es EL MISMO de la gráfica de ventas del índice del propietario de la rueda —rgb(75,192,192), relleno al 30% y borde sólido—, clonado a propósito. Sólo cambia en oscuro, donde ese verde se apaga contra el fondo. La tinta y la rejilla NO son valores: son los roles que el sistema ya tiene. Por eso no se redefinen en el tema oscuro — se resuelven solos cuando sus tokens cambian, que es la ventaja entera de nombrar por rol. */ --graf-serie:rgba(75,192,192,.30); --graf-borde:#4bc0c0; --graf-tinta:var(--app-fg-tertiary); --graf-linea:var(--app-borde-muted); /* LOS DOS TONOS DEL FLUJO (2026-08-29). Clonados de la misma paleta de la rueda que dio el teal — `controly-charts` → `color-palette.md`, que mapea un color por MÉTRICA y no por gusto: verde (76,175,80) = ingreso de efectivo, naranja oscuro (225,122,0) = egreso. Mismo relleno al 30% y mismo borde sólido; lo único que cambia respecto al teal es el hue. SON TOKENS Y NO UN `data-*` EN EL CANVAS, que es como lo escribe la rueda: ahí el color queda fuera del alcance del tema para siempre. Aquí la gráfica pide su tono por NOMBRE (`tono: 'ingreso'`) y el sistema resuelve el valor, así que estas dos cambian de tema solas igual que la de ventas. Ojo con el naranja: NO es el ámbar de `--app-atencion` que usa la chispa del gasto. Son dos cosas distintas de la misma paleta —el gasto es un documento, el egreso es dinero que salió de la caja— y la rueda les da colores distintos a propósito. Igualarlos aquí sería perder esa lectura. */ --graf-ingreso-serie:rgba(76,175,80,.30); --graf-ingreso-borde:#4caf50; --graf-egreso-serie:rgba(225,122,0,.30); --graf-egreso-borde:#e17a00; } [data-theme="dark"]{ --app-bg:#1e1e20; --doc-bg:#131315; --app-sidebar-bg:#252528; /* La escalera de tres NO existe en oscuro: el encargo fue «sólo la versión clara», y allá la relación papel #1e1e20 / barra #252528 ya funciona. Se redeclara en vez de dejar heredar la mezcla porque `--app-bg` vale otra cosa aquí: sin esta línea las cinco superficies nocturnas se moverían solas. */ --app-secundario-bg:var(--app-sidebar-bg); --app-hairline:rgba(255,255,255,.09); /* En oscuro la escalera de bordes no se abre (ver LA ESCALERA): la sutil ya delimita sobre fondo nocturno, así que el estándar pesa lo mismo. */ --app-borde:rgba(255,255,255,.09); --app-row-hover:rgba(255,255,255,.05); --app-fg:#ececf0; --app-fg-secondary:#b0b0b8; /* 7.7:1 — antes 6.2 */ /* 4.8:1 sobre la barra lateral oscura (#252528) y 5.3 sobre el fondo. El #8a8a93 anterior se quedaba en 4.47 sobre la lateral — el mismo fallo que su gemelo del tema claro, por el mismo motivo. */ --app-fg-tertiary:#90909a; /* El acento de TINTA no se oscurece: en oscuro tiene que leerse como texto sobre el fondo (4.56:1) y bajarlo rompería eso. El de RELLENO sí, y por eso son dos: con letra blanca encima da 4.67:1 —el mismo contraste que daba la letra oscura sobre el azul claro, con la ventaja de que ahora el primario se escribe igual en los dos temas— y contra el fondo de la app conserva 3.56:1 (3.14 sobre el papel del peek), de sobra para leerse como pieza: el mínimo de un objeto no textual es 3:1. `--app-accent-fg` no se redefine aquí. Ése es el punto. */ --app-accent:#0a84ff; --app-accent-solido:#0a70e8; --marca-fg:#ffffff; --app-info-text:#2dd4d4; --app-peligro-text:#ff6b60; --app-exito-text:#4ade80; --app-atencion:#ffd60a; --app-atencion-text:#ffd60a; --app-chip:rgba(255,255,255,.08); --app-pill:rgba(255,255,255,.10); --app-borde-muted:rgba(255,255,255,.18); --app-relleno-tenue:rgba(255,255,255,.05); /* No un color sólido sino un oscurecimiento: así el campo se lee como hueco tanto sobre el fondo de la app (#1e1e20) como sobre el papel del peek (#28282c), con un solo valor en vez de dos. */ --ctl-bg:rgba(0,0,0,.22); /* el mismo negro al 22%, ya resuelto contra el fondo de la app */ --ctl-bg-solido:color-mix(in srgb,#000 22%,var(--app-bg)); --ctl-borde:rgba(255,255,255,.13); --ctl-borde-hover:rgba(255,255,255,.24); /* El filo agresivo es sólo del claro: aquí el control es translúcido y se hunde sobre cualquier fondo, así que el campo ya se lee sin ayuda. */ --ctl-filo:var(--ctl-borde); --ctl-filo-hover:var(--ctl-borde-hover); --app-check:rgba(255,255,255,.32); --app-paper:#28282c; /* En oscuro la hoja baja al tono de la barra en vez de quedarse en papel: #252528 contra #28282c separa el diálogo de lo que tiene detrás, y el control —translúcido— se hunde sobre él. */ --dlg-hoja-bg:var(--app-sidebar-bg); --app-shadow:rgba(0,0,0,.55); --app-halo:rgba(0,0,0,.5); --app-velo:rgba(0,0,0,.62); --app-group:rgba(255,255,255,.045); --app-amber-tint:rgba(255,214,10,.12); --app-accent-tint:color-mix(in srgb,var(--app-accent) 18%,transparent); /* El teal de la serie sí se aclara: el #4bc0c0 del tema claro cae a 2.4:1 contra el fondo oscuro y la barra se lee como una mancha. Es el mismo verde-agua que el sistema ya usa de tinta informativa en oscuro. */ --graf-serie:rgba(45,212,212,.28); --graf-borde:#2dd4d4; /* Y los dos del flujo por el MISMO motivo, no por simetría: el #4caf50 da 2.6:1 contra el fondo oscuro y el #e17a00 2.4:1 — los dos se leen como mancha, igual que le pasaba al teal. Suben al verde y al ámbar-naranja que el sistema ya usa en oscuro para exito y atención, así que el par sigue diciendo lo mismo (entra / sale) con la luz de este tema. */ --graf-ingreso-serie:rgba(74,222,128,.28); --graf-ingreso-borde:#4ade80; --graf-egreso-serie:rgba(251,146,60,.28); --graf-egreso-borde:#fb923c; /* Los `--badge-*` NO se redefinen aquí, ni `--app-row-selected`: ése es el punto entero. Un solo valor que se mezcla con el fondo del tema. */ } /* ── Reset ────────────────────────────────────────────────────────── Sustituye al Reboot de Bootstrap, que se retiró el 2026-08-08. Bootstrap estaba cargado desde CDN (~300 KB entre CSS y JS) sin que el marcado usara una sola de sus clases ni un solo componente de su JS — pero su reset SÍ sostenía la app, y estas tres declaraciones son exactamente lo que aportaba. Medido: con ellas, 17 de 17 medidas de la sábana, la barra y el pie salen idénticas al píxel; sin ellas, la app se descuadra. Las tres, y qué rompe quitar cada una: · box-sizing — la barra lateral pasa de 260 a 281px (los 20px de padding se suman por fuera) y arrastra el ancho de toda la rejilla. La ALTURA DE FILA también se va a 37px, y de ahí sale la aritmética índice×altura del scroll virtual: un píxel de más y la ventana visible deja de cuadrar. · [hidden] con !important — el atributo `hidden` del UA no lleva !important, así que cualquier `.clase{display:flex}` lo gana. Sin esta línea, .alta-rapida y los dos .estado-vacio se PINTAN estando ocultos y le comen 350px a la sábana. Es el fallo más caro y el menos evidente. · line-height del body — sin él las alturas heredadas pasan a `normal`, que cada familia resuelve distinto. Con Geist eso mueve barras y celdas. */ *,::before,::after{box-sizing:border-box} [hidden]{display:none!important} /* ── El corte de monitor Full HD ─────────────────────────────────────── Dos clases que muestran una pieza sólo en un lado del corte de 1800px de viewport. Por encima está el monitor Full HD (1920); por debajo, toda laptop: MacBook Air 13" da 1440–1470, el de 15" 1710 y el MacBook Pro 16" 1728. El corte va en 1800 y no en 1920 para dejar margen a un navegador Full HD que no está maximizado. Un Windows Full HD escalado al 125% da 1536 y cae en el lado de laptop, y es correcto: lo que decide es el espacio, no el monitor. Uso típico: el rótulo largo y el corto del mismo botón, uno junto al otro (`asistencia.php`, «Registrar checada» / «Registrar»). Las dos clases sólo OCULTAN y nunca declaran un `display` visible: así la pieza conserva el suyo (flex, inline, block). `!important` por la misma razón que [hidden]: si no, un `.clase{display:flex}` gana la ocultación. */ @media (max-width:1799.98px){.solo-fhd{display:none!important}} @media (min-width:1800px){.bajo-fhd{display:none!important}} /* Las flechas del periodo de `asistencia.php`, sólo de ese módulo (no es pieza del catálogo). En laptop (769–1799) se esconden mientras la barra lateral está expandida y vuelven al contraerla: con la barra ancha el titular no tiene sitio para las flechas junto a los cuatro botones. Fuera del rango no se tocan: en Full HD cabe todo, y en móvil la barra es un cajón que no ocupa ancho. En 769–1024 la barra ya está compacta a la fuerza, así que ahí las flechas siempre se ven. Con `:has()` el cambio es inmediato al pulsar el botón de la barra, sin JS ni recarga. */ @media (min-width:769px) and (max-width:1799.98px){ .app-shell:has(> .app-sidebar:not(.compacta)) .as-flecha-periodo{display:none} } /* ── La barra de scroll ──────────────────────────────────────────────── Global desde el 2026-08-13 (pedido de Arif). Antes la dibujaba el navegador con su tema claro EN LOS DOS TEMAS: una franja blanca de 15px, y en oscuro se leía como un error. Vivió acotada al hilo del chat —donde caía junto al doodle oscuro y era imposible de ignorar— con una nota que decía que hacerlo global era «su propia tarea». Ésta es esa tarea. ── SON DOS MECANISMOS Y NO SE PUEDEN MEZCLAR ── Chromium ignora los `::-webkit-scrollbar` en cuanto el elemento declara `scrollbar-width` o `scrollbar-color` con valor distinto de `auto` — las propiedades estándar ganan. Medido en Chrome 151 sobre una caja de prueba: sólo pseudos → canal de 6px (el diseño); pseudos + `scrollbar-width:thin` → 11px (native thin, los pseudos muertos); sin nada → 15px. Por eso el estándar va acotado a quien NO tiene los pseudos —Firefox— con una detección de capacidad, y no con un `@-moz-document` ni un sniff. En Chrome el `@supports` da falso y los pseudos siguen mandando; en Firefox da cierto y se lleva `thin` + los mismos colores. Mismo resultado por dos caminos, ninguno pisando al otro. `color-scheme` es la otra mitad y NO es opcional: es lo que le dice al navegador con qué tema pintar lo que sigue siendo suyo —el desplegable de un `select`, el calendario de un `date`, el resaltado de autocompletado y la barra de scroll de Firefox—. Sin él, el tema oscuro se rompía en cuanto aparecía un widget nativo. Es el cambio de mayor alcance de esta pasada, y el motivo de que la nota del chat lo dejara para una tarea propia. */ :root{color-scheme:light} [data-theme="dark"]{color-scheme:dark} /* El pulgar reusa `--ctl-borde-hover` —el filo con que un control dice «esto se puede tocar»—, que es literalmente lo que un pulgar de scroll es, y es el valor que ya usaba el chat. Al apuntarlo sube al terciario opaco: se agarra con el ratón, así que tiene que responder. 6px y radio 3: la barra es una pista, no un control con el que se navegue. El canal va TRANSPARENTE —el fondo lo pone la superficie de debajo, así que la misma regla vale sobre el papel, sobre la barra lateral y sobre el doodle del chat—. La `height` es para las barras HORIZONTALES (la sábana tiene las dos) y el `corner` es el cuadrito donde se cruzan, que sin esto el navegador pinta gris. */ /* EL ANCHO ES UN TOKEN porque lo consume alguien más (2026-08-28). Esta barra es CLÁSICA, no overlay: se come su ancho del contenido en cuanto un molde desborda, así que todo cuerpo con scroll propio tiene que RESERVARLO (`scrollbar-gutter:stable`) y descontarlo de su costado — si no, la misma página cambia de canto derecho el día que le crecen los datos. Pasó: con el 6 escrito sólo aquí, funnels y automatización cerraban en 26 y venta, items, cuenta y agenda en 20, con el mismo CSS. Ver `.consola`. */ :root{--canal-scroll:6px} ::-webkit-scrollbar{width:var(--canal-scroll);height:var(--canal-scroll)} /* ── EL CANAL LLEVA PISTA (2026-09-20, hipótesis de Arif, confirmada) ────── Nació transparente para que una sola regla valiera sobre cualquier superficie. Pero en el claro la hoja del diálogo, el papel del panel y la consola son blanco puro, y un canal transparente sobre blanco ES blanco: el pulgar flotaba sin pista y el tramo del canal que no cubre era indistinguible de la hoja. Arif lo vio primero en el diálogo y luego en todos los scrolls del claro — y es el mismo síntoma, porque la regla es una. La pista es TRANSLÚCIDA, así que respeta el motivo original —se resuelve contra el papel, la barra lateral o el doodle sin un color por superficie— y queda en el escalón que faltaba: hoja → canal → pulgar (30.5%) → hover (terciario). Chrome no pinta el track cuando el cuerpo no desborda aunque el canal esté reservado con `scrollbar-gutter:stable`, así que el diálogo corto sigue sin franja. TOKEN PROPIO Y NO `--app-chip`: la primera versión reusó el chip y en oscuro (blanco al 8% sobre la hoja nocturna) se leía bien, pero en claro (tinta al 6.4% sobre blanco, ~1.1:1) Arif lo vio «casi imperceptible». El claro necesita más veladura que el oscuro para el mismo efecto, y el chip tiene sus propios lectores. 16% de tinta sobre blanco ≈ #E1DFDB, ~1.3:1: se ve como pista y sigue tres escalones por debajo del pulgar (2.31:1). */ :root{ --scroll-canal:color-mix(in srgb,var(--app-tinta) 16%,transparent) } [data-theme="dark"]{ --scroll-canal:var(--app-chip) } ::-webkit-scrollbar-track{background:var(--scroll-canal);border-radius:var(--r-mini)} /* ── EL PULGAR TIENE TOKEN PROPIO (2026-09-20) ──────────────────────────── Venía en `--ctl-borde-hover` —25.4% de tinta, #CECCC6 sobre blanco— que da **1.61:1** contra el papel. Para comparar: una línea de la reja da 1.44:1. O sea que el pulgar apenas se distinguía de un filo de tabla, y el canal de 6px que la cabecera reserva se leía como aire muerto. Lo cazó Arif en `asistencia.php`: «queda un espacio tipo aire de lo que se supone es el scroll, pero el scroll nunca llega ahí». Llegaba; no se veía. 45% DE TINTA = #A9A59B, 2.31:1. Sigue por debajo del hover (`--app-fg-tertiary`, 5.3:1), así que el gesto conserva su escalón. TOKEN PROPIO Y NO SUBIR `--ctl-borde-hover`, que tiene ONCE lectores —filos de control, cantos de tarjeta, bordes punteados—: la lección del filo del campo, el mismo día. Aquí los lectores son dos, el pulgar y su respaldo estándar. SÓLO EL CLARO, instrucción de Arif para esta tanda: en oscuro el pulgar es un aclarado sobre fondo nocturno y ya se lee, así que el tema lo devuelve al token de siempre. ── BAJÓ AL PUNTO MEDIO (2026-09-21, pedido de Arif) ── El 45% se leía demasiado oscuro para una pista. Arif fijó la regla: el pulgar va a la mitad entre el canal y el pulgar anterior, o sea (16% + 45%) / 2 = **30.5% de tinta** = #C5C2BB sobre blanco, 1.78:1 contra el papel y 1.33:1 contra el canal. Sigue sin leer ningún token de filo: el borde del campo es `--ctl-filo` (75%) y no tiene nada que ver aquí. */ :root{ --scroll-pulgar:color-mix(in srgb,var(--app-tinta) 30.5%,transparent) } [data-theme="dark"]{ --scroll-pulgar:var(--ctl-borde-hover) } ::-webkit-scrollbar-thumb{background:var(--scroll-pulgar);border-radius:var(--r-mini)} ::-webkit-scrollbar-thumb:hover{background:var(--app-fg-tertiary)} ::-webkit-scrollbar-corner{background:transparent} @supports (scrollbar-width:thin) and (not selector(::-webkit-scrollbar)){ *{scrollbar-width:thin;scrollbar-color:var(--scroll-pulgar) var(--scroll-canal)} } /* ── Base ───────────────────────────────────────────────────────────── */ html,body{height:100%} body{ margin:0; font-family:var(--fuente); /* Los dos valores base que ponía el Reboot. 16px no se ve casi en ninguna parte —la app vive a 14— pero es el rem del que cuelgan los que sí. */ font-size:1rem; line-height:1.5; /* Cifras tabulares en TODA la app: con teléfonos y fechas en columna, que los dígitos no bailen de ancho importa más que la familia elegida. */ font-variant-numeric:tabular-nums; background:var(--app-bg); color:var(--app-fg); -webkit-font-smoothing:antialiased; overflow:hidden; } /* EL ENLACE: LETRA DEL CUERPO Y SUBRAYADO SIEMPRE (2026-08-16, decisión de Arif). Fue azul y sin subrayar —o sea que sólo el color lo delataba, y ese color era el mismo que en este sistema significa «esto escribe en la base»—. Al mismo tiempo `.enlace` pintaba de azul CON su flecha, así que un enlace se veía de dos maneras según llevara clase o no; ése fue el síntoma que lo destapó (funnels.php: «veo anchors color primary y sin el subrayado»). Con esto **el azul deja de tener excepciones**: era la última, y estaba declarada como tal en las reglas («convención de plataforma, no significado de marca»). Hoy el acento es SÓLO de lo que escribe, sin asteriscos. El subrayado va PERMANENTE porque pasa a ser la única señal, y es la señal original del enlace —anterior al azul— así que nadie tiene que aprenderla. En reposo lo dibuja un filo tenue (`--app-borde-muted`) para que un párrafo con tres enlaces no se lea como un texto rayado; al apuntarlo sube al color de la letra. El `offset` de 2px lo despega de las bajas de la Geist. */ a{ color:inherit; text-decoration:underline; text-decoration-color:var(--app-borde-muted); text-decoration-thickness:1px; text-underline-offset:2px; transition:text-decoration-color var(--app-dur) var(--app-ease); } a:hover{text-decoration-color:currentColor} input::placeholder{color:var(--app-fg-tertiary)} ::selection{background:var(--app-accent-tint)} /* Foco para lo que NO declara el suyo: filas, opciones de menú, chips. Los controles de formulario dibujan su propio anillo interior — ver la página de catálogo (ui.php) para el inventario de los dos lenguajes de foco que hoy conviven. */ :focus-visible{outline:2px solid var(--app-accent);outline-offset:1px} /* Aquí vivían cuatro reglas más (.table, .card, .btn, .form-control) cuyo único trabajo era deshacer los estilos de Bootstrap. Se fueron con él: sin la hoja que neutralizaban, no neutralizan nada. */ /* ── Iconos ────────────────────────────────────────────────────────────── Dibujados en casa, no importados (2026-08-08). Cada icono es un SVG en retícula de 14px en data-URI usado como MÁSCARA (se pinta a 16 — regla de tamaño en `.icn`) con `currentColor` — el mismo truco de la flecha del select y del icono del enlace, ahora con nombre y catálogo (ver la sección Iconos de ui.php). Lo que compra: · toma el color del texto que acompaña, así que sobrevive al tema oscuro y a cualquier recoloreo sin variantes; · cero librerías (Font Awesome y compañía son de otra época) y cero peticiones; · NO son emojis a propósito: el emoji lo dibuja el sistema operativo — ignora el color del tema, cambia de forma en cada plataforma y pesa distinto en cada fila. Trazo 1.5 redondeado, el de la casa. `.icn` SIEMPRE va con su modificador: sin él no hay máscara y se pinta un cuadrado sólido. */ :root{ --icn-estrella:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 1.6l1.6 3.3 3.6.5-2.6 2.6.6 3.6L7 9.9l-3.2 1.7.6-3.6L1.8 5.4l3.6-.5z'/%3E%3C/svg%3E"); --icn-lista:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.2 4h9.6M2.2 7h9.6M2.2 10h6.4'/%3E%3C/svg%3E"); --icn-importar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 1.8v6.4M4.2 5.4L7 8.2l2.8-2.8M2.2 11.8h9.6'/%3E%3C/svg%3E"); /* LA LUPA (2026-09-09, con el buscador global de registros). Es el único glifo del juego con semántica de BÚSQUEDA, y nació porque no había ninguno: `ojo` ya significa «ver/previsualizar», `lista` son las tres rayas que dicen «esto es una lista» —el error que `icn-persona` vino a corregir en el selector de catálogo— y `entrada` es la flecha de entrar. Círculo y mango a 45°, el dibujo que no hay que aprender. */ --icn-lupa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='4'/%3E%3Cpath d='M8.9 8.9L12.1 12.1'/%3E%3C/svg%3E"); --icn-papelera:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.2 3.9h9.6M5.5 3.9V2.3h3v1.6M3.5 3.9l.5 7.8h6l.5-7.8'/%3E%3C/svg%3E"); /* LA LUNA, DE CONTORNO como todo el juego (2026-08-16, lo cazó Arif). Nació MACIZA —`fill` sin `stroke`— y era el único glifo relleno del censo: junto al sol, que sí es de trazo, se leían como dos dibujos de sets distintos. Misma silueta, misma retícula; sólo cambia quién la pinta: el trazo de 1.5 en vez del relleno. */ /* SALIR (2026-08-29): puerta abierta con la flecha SALIENDO por ella. La flecha va hacia fuera y no hacia dentro —el mismo dibujo invertido dice «entrar»— y el marco se abre por el lado por el que se sale, que es lo único que distingue las dos siluetas de un vistazo. */ --icn-salir:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.4 12.2H2.9a.9.9 0 0 1-.9-.9V2.7a.9.9 0 0 1 .9-.9h2.5'/%3E%3Cpath d='M8.8 9.9 11.7 7 8.8 4.1'/%3E%3Cpath d='M11.7 7H5.2'/%3E%3C/svg%3E"); --icn-luna:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.7 8.4A5.2 5.2 0 1 1 5.6 2.3a4.1 4.1 0 0 0 6.1 6.1z'/%3E%3C/svg%3E"); --icn-sol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='2.6'/%3E%3Cpath d='M7 .9v1.8M7 11.3v1.8M.9 7h1.8M11.3 7h1.8M2.7 2.7l1.3 1.3M10 10l1.3 1.3M11.3 2.7L10 4M4 10l-1.3 1.3'/%3E%3C/svg%3E"); /* LA PANTALLA nace el 2026-09-11 con su consumidor: la opción «Sistema» del selector de tema. El juego no tenía ninguno que dijera «lo que decida el equipo», y las dos alternativas eran peores — media luna partida (dice «entre claro y oscuro», que no es lo mismo que «lo que diga el sistema») o un engrane, que en esta app significaría configuración y ya la significa la sección entera. El monitor es la convención de las apps que traen el modo, y aquí además queda como el HERMANO IMPAR de luna y sol: los tres son objetos dibujados, no metáforas de estado. */ --icn-pantalla:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.8' y='2.4' width='10.4' height='7.4' rx='1.2'/%3E%3Cpath d='M5.4 12.2h3.2M7 9.8v2.4'/%3E%3C/svg%3E"); --icn-volver:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.8 7H2.2M5.6 3.6L2.2 7l3.4 3.4'/%3E%3C/svg%3E"); --icn-entrada:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.2 2.2h4.6a1.4 1.4 0 0 1 1.4 1.4v6.8a1.4 1.4 0 0 1-1.4 1.4H5.2M1.6 7h6.2M5.4 4.6L7.8 7 5.4 9.4'/%3E%3C/svg%3E"); --icn-calendario:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3.2' width='10' height='8.6' rx='1.2'/%3E%3Cpath d='M2 6.2h10M4.7 1.8v2.4M9.3 1.8v2.4'/%3E%3C/svg%3E"); --icn-caja:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.8' y='2.6' width='10.4' height='2.6' rx='.6'/%3E%3Cpath d='M2.9 5.2v5.2a1 1 0 0 0 1 1h6.2a1 1 0 0 0 1-1V5.2M5.6 7.4h2.8'/%3E%3C/svg%3E"); /* La NOTA con su corte dentado (2026-08-18): el glifo de Ventas. Nace propio y no reusa `icn-caja` porque ésa ya es «Catálogo», y dos filas del mismo menú con el mismo dibujo se leen como un error de copiado — el icono de la barra es lo único que queda cuando está en modo compacto. */ --icn-venta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 12.4V2.6a.6.6 0 0 1 .6-.6h6.4a.6.6 0 0 1 .6.6v9.8l-1.5-.9-1.4.9-1.4-.9-1.4.9z'/%3E%3Cpath d='M5.3 4.9h3.4M5.3 7.3h3.4'/%3E%3C/svg%3E"); /* LA TABLILLA CON PARTIDAS, para Presupuestos (2026-09-04). Sustituye a `icn-lista` —las tres rayas—, que era genérico: nombraba «una lista» y no el documento que la fila abre. Y su vecina de abajo es Ventas, o sea la nota dentada: dos documentos apilados, que es justo el choque que esta regla persigue. **Lo que los separa a 14px es dónde está la seña**: la nota la lleva ABAJO (el corte dentado) y la tablilla ARRIBA (la pinza). Una silueta se lee por su contorno, y estos dos contornos difieren en el canto que el ojo mira primero. SIN LAS VIÑETAS de la pieza original de la que sale (`clipboard-list` dibuja un punto delante de cada renglón). A 14px un punto se empasta con el trazo de 1.5 —la misma medición que ya obligó a que la perforación de `icn-etiqueta` fuera un círculo de r=.9 y no un punto lleno—, así que sumaría ruido sin sumar forma: la pinza ya dice que es una tablilla y los dos renglones, que lleva partidas. */ --icn-tablilla:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.7' y='1.9' width='4.6' height='2.4' rx='.7'/%3E%3Cpath d='M9.3 3.5h1.1a1.2 1.2 0 0 1 1.2 1.2v7.6a1.2 1.2 0 0 1-1.2 1.2H3.6a1.2 1.2 0 0 1-1.2-1.2V4.7a1.2 1.2 0 0 1 1.2-1.2h1.1'/%3E%3Cpath d='M4.8 7.3h4.4M4.8 9.9h4.4'/%3E%3C/svg%3E"); /* LA BOLSA DE COMPRA, para Gastos (2026-09-04). Es el glifo NUEVO del cambio en que el billete se mudó a Registros (abajo), y se eligió por descarte razonado sobre la regla de esta sección — a 14px sólo sobrevive la silueta, y ninguna fila vecina puede repetirla: · el COMPROBANTE (el ticket del proveedor) es lo más exacto que hay y está vetado desde el 2026-08-27: la nota dentada de Ventas ya ES esa silueta, y el gasto es su vecino; · la CARTERA y la TARJETA son rectángulos horizontales, o sea el billete que queda una fila más abajo; · el BILLETE CON FLECHA sería repetir el dibujo con una variante, que es exactamente lo que esta sección lleva prohibiendo desde que nació. Queda el objeto que ninguna de las tres nombra: **lo que se compró**. Dos formas y nada más: el cuerpo, que se estrecha hacia abajo, y el asa. EL ASA VA POR FUERA DEL CUERPO, y eso NO es la forma de la pieza original —`shopping-bag` de Lucide dibuja la bolsa cerrada, con el asa como un arco DENTRO y los hombros angulados—. Se cambió por una medición en el navegador, no por gusto: a 14px la versión cerrada pierde los hombros y se queda en **un cuadrado redondeado con una curva dentro**, que es a un pelo de `icn-caja` (Catálogo) — o sea el choque que esta sección entera existe para evitar, cometido contra una fila que está a dos de distancia. Con el asa asomando arriba la silueta no se parece a ninguna otra del juego, que es lo único que se le pide a un glifo a este tamaño. Su riesgo está declarado y es de vocabulario, no de dibujo: la bolsa sabe a comercio, y el gasto de una agencia es renta y nómina. Se aceptó porque a 14px lo que se pide de un glifo es que se distinga de sus vecinos, y éste es el único candidato que lo hace sin mentir. */ --icn-bolsa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 5.1h9l-.7 6.4a1.1 1.1 0 0 1-1.1 1H4.3a1.1 1.1 0 0 1-1.1-1Z'/%3E%3Cpath d='M4.9 5.1V3.7a2.1 2.1 0 0 1 4.2 0v1.4'/%3E%3C/svg%3E"); /* EL BILLETE, para REGISTROS desde el 2026-09-04 — nació el 2026-08-27 como el glifo de Gastos y por eso se llamaba `--icn-gasto`. **Cambió de nombre al cambiar de fila**, y ésa es la regla que deja: un token que se llama como un módulo miente el día que el dibujo se muda, así que los que pueden mudarse se nombran por lo que DIBUJAN. Pedido de Arif. POR QUÉ AQUÍ FUNCIONA MEJOR: Registros es el libro de caja, o sea la tabla donde el dinero de verdad entra y sale. El billete nombra el objeto de ese módulo directamente, mientras que en Gastos nombraba una consecuencia («dinero que sale»). Lo que se pierde es el argumento con el que nació —dos formas, rectángulo y círculo, que sobreviven a la máscara a este tamaño—, y no se pierde: el dibujo no se tocó, sólo su dueño. LO QUE ESTABA AQUÍ Y SE FUE: `--icn-flujo`, las dos flechas encontradas que dibujaron Registros del 2026-08-27 al 2026-09-04. Se retiró porque el billete se llevó a sus CINCO consumidores —la fila del menú, las dos gráficas del flujo y sus dos cifras del Inicio— y un icono que nadie pide es código muerto (mismo desenlace que `--icn-arena`, arriba). Lo que sí vale conservar es su DECISIÓN, porque volverá a aplicar el día que una fila del bloque de dinero pida glifo: **dibujaba una ACCIÓN y no un objeto** —entra por arriba, sale por abajo—, que era su forma de no competir por el mismo espacio de 14px con el documento y el billete. El path, si vuelve: `M2.4 4.6h9.2M9.2 2.2l2.4 2.4-2.4 2.4M11.6 9.4H2.4M4.8 7L2.4 9.4l2.4 2.4`. */ --icn-billete:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.4' y='3.4' width='11.2' height='7.2' rx='1.2'/%3E%3Ccircle cx='7' cy='7' r='1.8'/%3E%3C/svg%3E"); /* AQUÍ VIVIÓ `--icn-arena` unas horas el 2026-08-30: el reloj de arena que dibujó la fila «Cartera» de la barra, retirada el mismo día (el porqué, en `interno/cabecera.php`). Se fue con ella porque era su ÚNICO consumidor —la tarjeta del Inicio dibuja ese reloj con un `` inline en el lienzo de 24 que usan todas las de la portada, no con este token de 14—, y un icono que nadie pide es código muerto. Lo que sí vale la pena conservar es la DECISIÓN del dibujo, porque volverá a aplicar el día que la cartera —u otra pantalla del tiempo— pida su glifo: **se dibuja el tiempo y no el dinero.** Sus vecinas del nivel comercial ya nombran cosas de dinero (el documento, el billete, las flechas del movimiento) y un cuarto objeto de dinero no diría cuál es; lo que la cartera aporta sobre ellas es la EDAD de lo que falta cobrar. Y no habría chocado con `--icn-reloj` (Agenda) aunque los dos midan tiempo: a 14px la silueta manda, y un círculo con manecillas y dos triángulos opuestos no se confunden. El path, si vuelve: el SVG de la tarjeta en `index.php`. */ --icn-palomita:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 7.6l3.1 3.1 6.1-7.2'/%3E%3C/svg%3E"); /* ETIQUETA (2026-09-03): el glifo del chip de etiqueta. Se dibuja a 14 como todos —la retícula de la casa— y el chip lo pinta a 12. La perforación es un círculo de r=.9 y no un punto lleno: a 12px un punto se empasta con el trazo y el glifo pierde su silueta, que es lo único que se lee a ese tamaño. Nació con la propuesta C del canvas de diseño, para separar la etiqueta del BADGE DE ESTADO, con el que comparte radio, tinte y medida. */ --icn-etiqueta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.9 6.1V2.5c0-.3.3-.6.6-.6h3.6l6 6a.9.9 0 0 1 0 1.2l-3.5 3.5a.9.9 0 0 1-1.2 0L1.9 6.1Z'/%3E%3Ccircle cx='4.5' cy='4.5' r='.9'/%3E%3C/svg%3E"); --icn-arriba:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11.6V3M3.2 6.8L7 3l3.8 3.8'/%3E%3C/svg%3E"); --icn-columnas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.8' y='2.4' width='10.4' height='9.2' rx='1'/%3E%3Cpath d='M5.3 2.4v9.2M8.7 2.4v9.2'/%3E%3C/svg%3E"); /* Barra: el glifo universal de «barra lateral» (VS Code, Linear, claude.ai) — el marco de la pantalla con su carril izquierdo marcado. Es primo de `--icn-columnas` y por eso se dibujó DISTINTO a propósito: aquél lleva dos divisiones (una tabla) y éste una sola, pegada al borde (un carril). */ --icn-barra:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.8' y='2.4' width='10.4' height='9.2' rx='1.4'/%3E%3Cpath d='M5.4 2.4v9.2'/%3E%3C/svg%3E"); /* Sobre: el icono de todo lo que el sistema manda solo. */ /* Reloj (Agenda: el horario es su alma) y rayo (Automatización): nacieron el 2026-08-15 porque la barra repetía glifos — Agenda clonaba el calendario de Citas y Automatización cargaba el sobre de Envíos, que además no dice "automático" (corrección de Arif). */ --icn-reloj:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='5.4'/%3E%3Cpath d='M7 4.2V7l2 1.3'/%3E%3C/svg%3E"); /* ASISTENCIA Y PRENÓMINA (2026-09-18, pedido de Arif): los dos glifos que usa la industria para estos módulos, dibujados en la retícula de 14 y el trazo de 1.5 del juego. · Reloj con palomita — el `clock-check` de Lucide; Material Symbols dice lo mismo con `punch_clock`, el reloj checador. Asistencia llevaba `--icn-entrada`, la puerta con flecha, que es el glifo universal de iniciar sesión y el espejo exacto de `--icn-salir` en el pie de la misma barra. El reloj solo ya es de Citas: la palomita lo distingue y dice «jornada registrada». El círculo se abre abajo a la derecha para dejar sitio a la palomita; las manecillas son las de `--icn-reloj`. · Mano con monedas — el `hand-coins` de Lucide, que su catálogo etiqueta con *wage* y *payroll*. Prenómina llevaba `--icn-billete`, el de Registros, y las dos filas coinciden en toda cuenta con los dos flags. Se probó con una sola moneda y se descartó: la moneda sobre la mano se lee como una persona. */ --icn-reloj-palomita:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.38 6.53A5.4 5.4 0 1 0 6.53 12.38'/%3E%3Cpath d='M7 4.2V7l2 1.3'/%3E%3Cpath d='M8.4 11.1l1.5 1.5 3-3'/%3E%3C/svg%3E"); --icn-mano-monedas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.42 8.75h1.17a1.17 1.17 0 1 0 0-2.33H5.83c-.35 0-.64.12-.82.35L1.75 9.92'/%3E%3Cpath d='M4.08 12.25l.93-.82c.18-.23.47-.35.82-.35h2.33c.64 0 1.23-.23 1.63-.7l2.68-2.57a1.17 1.17 0 0 0-1.6-1.7l-2.45 2.28'/%3E%3Cpath d='M1.17 9.33l3.5 3.5'/%3E%3Ccircle cx='9.33' cy='5.25' r='1.69'/%3E%3Ccircle cx='3.5' cy='2.92' r='1.75'/%3E%3C/svg%3E"); --icn-rayo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.7 1.3 2.1 8.1h4.2l-.8 4.6 5.6-6.8H6.9z'/%3E%3C/svg%3E"); /* ENVÍOS: EL AVIÓN, NO EL SOBRE (2026-08-16, lo cazó Arif). El sobre decía «correo» y esa cola ya no es de correo: por ahí salen también los mensajes de WhatsApp, y el día que entre un canal más seguirá siendo la misma cola. El avión de papel dice el VERBO —esto se manda— y no nombra el medio, que es exactamente lo que la pantalla lista. Y no choca con nadie: la burbuja ya es Conversaciones y el rayo es Automatización. Es el tercer glifo que se corrige por nombrar el medio en vez del trabajo —el rayo y el reloj fueron los otros dos, el 2026-08-15—, así que el sobre se retira del juego: se quedaba sin un solo consumidor. */ --icn-envio:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.8 1.2L8.75 12.8 6.4 7.6 1.2 5.25z'/%3E%3Cpath d='M12.8 1.2L6.4 7.6'/%3E%3C/svg%3E"); --icn-panel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.8' y='1.8' width='4.6' height='4.6' rx='.8'/%3E%3Crect x='7.6' y='1.8' width='4.6' height='4.6' rx='.8'/%3E%3Crect x='1.8' y='7.6' width='4.6' height='4.6' rx='.8'/%3E%3Crect x='7.6' y='7.6' width='4.6' height='4.6' rx='.8'/%3E%3C/svg%3E"); --icn-tablero:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.8' y='2.2' width='3.1' height='9.6' rx='.8'/%3E%3Crect x='5.9' y='2.2' width='3.1' height='6.4' rx='.8'/%3E%3Crect x='10' y='2.2' width='2.2' height='4.2' rx='.8'/%3E%3C/svg%3E"); /* Burbuja de conversacion (conversaciones.php). Es la unica silueta que dice "alguien esta hablando" sin repetir el sobre del correo, que ya ocupan Envios y Automatizacion. */ --icn-chat:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2714%27 height=%2714%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12.4 8.2c0 .9-.8 1.7-1.7 1.7H5.4L2.6 12V3.8c0-.9.8-1.7 1.7-1.7h6.4c.9 0 1.7.8 1.7 1.7z%27/%3E%3C/svg%3E"); --icn-cita:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2714%27 height=%2714%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%272%27 y=%273%27 width=%2710%27 height=%279.5%27 rx=%271.5%27/%3E%3Cpath d=%27M2 6h10M4.8 1.6v2.2M9.2 1.6v2.2%27/%3E%3C/svg%3E"); --icn-funnel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2.6h10L8 7.4v3.9l-2 1.1V7.4z'/%3E%3C/svg%3E"); /* IDENTIDAD — los dos glifos que estrenaron el alta de cuentas y usuarios (2026-08-16). Se dibujan y no se toman prestados por la misma razón que el reloj y el rayo el 2026-08-15: la barra repetía siluetas y una fila que comparte glifo con otra deja de decir a dónde lleva. · PERSONAS para Usuarios — quién entra a ESTA cuenta. Dos figuras y no una: una sola es «mi perfil», y esta pantalla es el reparto del acceso. · EDIFICIO para Cuentas — el inquilino, no la persona. Es lo único del juego que dice «organización», que es exactamente lo que la pantalla de plataforma lista. No choca con el embudo (una campaña) ni con el panel (una rejilla de métricas). */ /* `--icn-personas` vivió aquí del 2026-08-16 al 17: era el glifo de la fila «Usuarios» del menú, que se fundió con «Cuentas» en una sola fila (`icn-edificio`). Se retiró porque un icono sin consumidor es inventario que nadie declaró — ni siquiera estaba en el catálogo de `ui.php`, que es donde vive el inventario de verdad. Se dijo «vuelve de ahí si algún día hace falta», y **volvió el 2026-09-03 como `--icn-persona`**, en singular y con consumidor: la opción «Contactos» del selector de catálogo (pedido de Arif, que lo quería *«tipo user»* y no la lista de tres rayas con la que nació ese diálogo). Segundo consumidor desde el 2026-09-14: la fila de la cuenta en la barra, que lleva el nombre del usuario. El singular no es un detalle de nombre — aquel dibujaba DOS siluetas porque nombraba a los usuarios de la cuenta; éste dibuja una porque un contacto es una persona, y la sábana los lista de a uno. Entra al censo de `ui.php` en el mismo cambio, que es la otra mitad de la regla. ESA ES LA REGLA DEL JUEGO DE ICONOS, y la barrida del desmontaje la aplicó entera el 2026-09-02: se midió cada `--icn-*` contra sus consumidores reales y **doce quedaron sin ninguno**, pero los doce SÍ están en `ui.php` — o sea inventario declarado, que es exactamente lo que esta nota bendice. El único que además faltaba del catálogo era `--icn-escenario` (el punto dentro de un círculo), y por eso es el único que se fue con ella. EL CENSO, para rehacerlo (movido del catálogo `ui.php`, 2026-09-19): cada `--icn-*` de esta hoja contra sus consumidores en el PHP y el JS de la app — grep -oE '\-\-icn-[a-z0-9-]+' activos/app.css | sort -u grep -ohE 'icn-[a-z0-9-]+' -r . --include='*.php' --include='*.js' --exclude=ui.php | sort -u Los doce de la barrida del 2026-09-02 fueron los seis glifos de las listas del modo tareas (Entrada, Hoy, Programadas, Pendientes, Algún día, Registro), que en `ui.php` se describen por lo que dibujan y no por la fila que nombraban, más `icn-columnas`, `icn-importar` e `icn-prohibido` —las tres filas que movía `es_outreach`— y `icn-envio`, `icn-papelera` e `icn-volver`, que nunca tuvieron consumidor. `icn-estrella` recuperó uno el 2026-09-17: la opción «Colaboradores» del selector de catálogo; no se dibujó una estrella nueva para la fila. LA OTRA MITAD DE LA REGLA ES EL ORDEN DEL ALTA: un glifo nuevo entra por la lista de `ui.php`, no por la fila que lo estrena. El censo del 2026-08-15 ya había encontrado cuatro que nacieron con sus filas de la barra sin pasar por esa lista. Después entraron al revés tres más y hubo que darlos de alta a destiempo: `icn-venta` e `icn-edificio` (nacidos con sus filas el 2026-08-16 y 18, dados de alta el 2026-08-27) e `icn-etiqueta` (tres consumidores vivos, encontrado sin fila el 2026-09-11 al correr este censo). */ --icn-persona:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='4.6' r='2.4'/%3E%3Cpath d='M2.5 12.2c0-2.4 2-3.9 4.5-3.9s4.5 1.5 4.5 3.9'/%3E%3C/svg%3E"); --icn-edificio:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 12.4V2.9c0-.4.3-.7.7-.7h4.8c.4 0 .7.3.7.7v9.5'/%3E%3Cpath d='M8.8 6.4h2.2c.4 0 .7.3.7.7v5.3'/%3E%3Cpath d='M1.5 12.4h11'/%3E%3Cpath d='M4.8 5.2h1.6M4.8 7.6h1.6'/%3E%3C/svg%3E"); /* El ⋮ del botón de opciones de la etapa era el GLIFO tipográfico, y por eso se veía casi apagado al lado de cualquier icono de la barra lateral: la fuente lo dibuja con puntos de ~1.2px, la mitad del trazo con el que se pintan los demás (1.5 en retícula de 14, que a 18px sale ~1.9). Los puntos van RELLENOS y no de trazo porque a este tamaño un círculo hueco de 1.9 de borde es una mancha: el peso se consigue con el diámetro, no con el filo. Corrección de Arif, 2026-09-09: «asemejarlo al estilo bold del menú lateral». */ --icn-elipsis:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23000'%3E%3Ccircle cx='7' cy='3.1' r='1.15'/%3E%3Ccircle cx='7' cy='7' r='1.15'/%3E%3Ccircle cx='7' cy='10.9' r='1.15'/%3E%3C/svg%3E"); --icn-prohibido:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='5.2'/%3E%3Cpath d='M3.4 3.4l7.2 7.2'/%3E%3C/svg%3E"); --icn-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='5.2'/%3E%3Cpath d='M7 6.6v3.2'/%3E%3Ccircle cx='7' cy='4.3' r='.85' fill='%23000' stroke='none'/%3E%3C/svg%3E"); --icn-atencion:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 2.1l5.7 9.4H1.3z'/%3E%3Cpath d='M7 5.7v2.4'/%3E%3Ccircle cx='7' cy='9.9' r='.85' fill='%23000' stroke='none'/%3E%3C/svg%3E"); --icn-fallo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='5.2'/%3E%3Cpath d='M5.2 5.2l3.6 3.6M8.8 5.2L5.2 8.8'/%3E%3C/svg%3E"); --icn-exito:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='5.2'/%3E%3Cpath d='M4.4 7.2l1.9 1.9 3.3-3.9'/%3E%3C/svg%3E"); --icn-ojo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7C2.7 4.6 4.7 3.3 7 3.3C9.3 3.3 11.3 4.6 13 7C11.3 9.4 9.3 10.7 7 10.7C4.7 10.7 2.7 9.4 1 7Z'/%3E%3Ccircle cx='7' cy='7' r='1.9'/%3E%3C/svg%3E"); --icn-ojo-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7C2.7 4.6 4.7 3.3 7 3.3C9.3 3.3 11.3 4.6 13 7C11.3 9.4 9.3 10.7 7 10.7C4.7 10.7 2.7 9.4 1 7Z'/%3E%3Ccircle cx='7' cy='7' r='1.9'/%3E%3Cpath d='M2.4 11.6L11.6 2.4'/%3E%3C/svg%3E"); /* EL LÁPIZ — el gesto de EDITAR dentro de un chip (2026-09-11, para la franja de horario del riel de la Agenda). Es icono y no glifo tipográfico por la misma lección que dejó escrita `--icn-elipsis` tres bloques más arriba: el ✎ de la fuente se dibuja con un trazo de la mitad de peso que el resto del juego y al lado de cualquier icono se ve apagado. La × puede permitírselo porque es un carácter que TODAS las fuentes dibujan igual de macizo; el lápiz no. Es el `edit-2` de Feather —cuerpo en diagonal, punta abajo a la izquierda, sin virola: a 14px una línea más es una mancha— llevado a la retícula de 14 y centrado en ella (x e y de 2.25 a 11.75, que con el trazo de 1.5 deja 1.5px de aire por lado). */ --icn-lapiz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.75 2.25a1.45 1.45 0 1 1 2 2L5 11l-2.75.75L3 9z'/%3E%3C/svg%3E"); /* AYUDA: EL SIGNO DE INTERROGACIÓN EN UN CÍRCULO (2026-09-22, fila «Ayuda» del pie de la barra). Es el `circle-help` de Lucide, el glifo que la industria usa para ayuda. Comparte el círculo de `--icn-info` (r 5.2) y su punto relleno para que los dos se lean de la misma familia; lo que los separa es el trazo de dentro: la «i» informa, la interrogación responde una pregunta. */ --icn-ayuda:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='5.2'/%3E%3Cpath d='M5.4 5.5a1.65 1.65 0 0 1 3.2.55c0 1.1-1.6 1.6-1.6 1.6'/%3E%3Ccircle cx='7' cy='9.9' r='.85' fill='%23000' stroke='none'/%3E%3C/svg%3E"); } /* El tamaño BASE es el del icono que acompaña (`--icn-texto`, 16px contra texto de 14): asoma un píxel por encima y uno por debajo de la letra — a tamaño idéntico se ve más chico que el texto, porque la letra no llena su caja. El que MARCA una fila o un bloque sube a `--icn-fila` desde su propia pieza (menú, alerta). El dibujo sigue en retícula de 14; la máscara lo escala, y con él el trazo. */ .icn{ display:inline-block;width:var(--icn-texto);height:var(--icn-texto);flex:none; background:currentColor;vertical-align:-3px; -webkit-mask:var(--icn) no-repeat center / contain; mask:var(--icn) no-repeat center / contain; } .icn-estrella{--icn:var(--icn-estrella)} .icn-lupa{--icn:var(--icn-lupa)} .icn-lista{--icn:var(--icn-lista)} .icn-persona{--icn:var(--icn-persona)} .icn-importar{--icn:var(--icn-importar)} .icn-papelera{--icn:var(--icn-papelera)} .icn-salir{--icn:var(--icn-salir)} .icn-luna{--icn:var(--icn-luna)} .icn-sol{--icn:var(--icn-sol)} .icn-pantalla{--icn:var(--icn-pantalla)} .icn-volver{--icn:var(--icn-volver)} .icn-entrada{--icn:var(--icn-entrada)} .icn-calendario{--icn:var(--icn-calendario)} .icn-reloj{--icn:var(--icn-reloj)} .icn-reloj-palomita{--icn:var(--icn-reloj-palomita)} .icn-mano-monedas{--icn:var(--icn-mano-monedas)} .icn-rayo{--icn:var(--icn-rayo)} .icn-caja{--icn:var(--icn-caja)} .icn-venta{--icn:var(--icn-venta)} .icn-tablilla{--icn:var(--icn-tablilla)} .icn-bolsa{--icn:var(--icn-bolsa)} .icn-billete{--icn:var(--icn-billete)} .icn-palomita{--icn:var(--icn-palomita)} .icn-etiqueta{--icn:var(--icn-etiqueta)} .icn-prohibido{--icn:var(--icn-prohibido)} .icn-elipsis{--icn:var(--icn-elipsis)} .icn-tablero{--icn:var(--icn-tablero)} .icn-funnel{--icn:var(--icn-funnel)} .icn-edificio{--icn:var(--icn-edificio)} .icn-cita{--icn:var(--icn-cita)} .icn-chat{--icn:var(--icn-chat)} .icn-panel{--icn:var(--icn-panel)} .icn-envio{--icn:var(--icn-envio)} .icn-columnas{--icn:var(--icn-columnas)} .icn-barra{--icn:var(--icn-barra)} .icn-arriba{--icn:var(--icn-arriba)} .icn-ojo{--icn:var(--icn-ojo)} .icn-ojo-off{--icn:var(--icn-ojo-off)} .icn-lapiz{--icn:var(--icn-lapiz)} .icn-ayuda{--icn:var(--icn-ayuda)} .icn-info{--icn:var(--icn-info)} .icn-atencion{--icn:var(--icn-atencion)} .icn-fallo{--icn:var(--icn-fallo)} .icn-exito{--icn:var(--icn-exito)} /* ── Marca ──────────────────────────────────────────────────────────── */ /* El logotipo vive en CUATRO sitios —la cabecera de la barra, la fila «Inicio», la puerta y el 404, más el nav del catálogo `ui.php`— y todos dicen lo mismo: una pieza, no cinco copias. (Decía TRES hasta el 2026-08-26; el 404 entró el 08-18 y nadie actualizó la cuenta. El censo vivo: `grep -rn "marca-icono" public_html/`.) EL SÍMBOLO NO ES UN `.icn`. Los del catálogo de arriba son máscaras de un solo trazo que se pintan con `currentColor`; éste tiene DOS tintas (el anillo y el punto ámbar) y una máscara las fundiría en una. Va como imagen de fondo, y el tema elige el ARCHIVO en vez del color porque las dos versiones no se diferencian sólo en el anillo (navy → blanco): el ámbar también cambia de tono para sostenerse contra el fondo oscuro. ── SON LOS ARCHIVOS REALES DE CONTROLY DESDE EL 2026-08-26 ────────────── Hasta esa fecha esto apuntaba a `logo-controly-mark.svg` / `-w.svg`: un símbolo DIBUJADO A MANO —un `` con `stroke-dasharray` y otro de relleno ámbar— que aproximaba el de Controly porque el CRM nació sin los originales a la vista. Se veía parecido y no lo era: el trazo iba más fino y el hueco del anillo terminaba en otro punto. Hoy son `icono-controly.png` / `icono-controly-w.png`, los MISMOS archivos que Controly sirve desde `activos-base/img/logo/`, copiados aquí. Copiados y NO referenciados a través del árbol de Controly: el CRM es un proyecto aparte y una ruta cross-dominio muere en producción por `open_basedir`. Al actualizarlos en Controly hay que volver a copiarlos — es el precio de la frontera, y es el correcto. PNG y no SVG porque es lo que existe: convertirlos sería volver a dibujar una aproximación, que es justamente lo que este cambio retira. A 20 y 30px sobre pantalla retina la fuente de 512px va de sobra. Los retirados quedan en `~/PRE-plan/backups/removed/crm-logos-hechos-a-mano-2026-08-26/`. */ .marca-icono{ display:inline-block;flex:none; width:var(--icn-fila);height:var(--icn-fila); background:url("img/logo/icono-controly.png") no-repeat center / contain; } [data-theme="dark"] .marca-icono{background-image:url("img/logo/icono-controly-w.png")} /* ── EL LOGOTIPO COMPLETO ───────────────────────────────────────────────── `logo-controly.png` / `-w.png`: símbolo + «controly / online» en dos líneas, los mismos archivos que Controly sirve en SU login. Es lo que va en las pantallas que se ven SIN cascarón —la puerta, el 404 y el nav del catálogo—, y son las únicas: dentro de la app no cabe (la fila «Inicio» mide 20px de icono) y ahí sigue mandando `.marca-icono`. DICE «online» Y NO «CRM», y está decidido así (Arif, 2026-08-26): es el logotipo de la casa, y el producto lo nombran el `` de la pestaña y la firma del pie del login. Si algún día hay un lockup propio del CRM, se cambian estos dos archivos y nada más. 180px es el ancho que usa el login de Controly; el alto sale del aspecto real del archivo (350x123) en vez de escribirse a mano, así que cambiar el ancho no descuadra nada. Mismo mecanismo de tema que su hermano: el CSS elige el ARCHIVO —no un `` por tema— porque el `data-theme` ya está puesto en el `` antes de pintar y así no hay destello. */ .marca-logotipo{ display:block;flex:none; width:180px;aspect-ratio:350/123; background:url("img/logo/logo-controly.png") no-repeat center / contain; } [data-theme="dark"] .marca-logotipo{background-image:url("img/logo/logo-controly-w.png")} /* EL LOGOTIPO ESCRITO: «CONTROLY» en el color de la marca y versales, y «Funnels» en el gris secundario. El nombre del producto ya NO va en el acento (lo estuvo hasta el 2026-08-17): en esta app el azul significa «esto escribe en la base» —es el color de los enlaces y las acciones— y la marca no hace nada. Puesta en el acento, el rótulo se leía como un control. El `letter-spacing` se anula: el negativo que traen `.sb-marca` y `.puerta-marca` está calibrado para caja mixta, y en versales aprieta las astas hasta que «CONTROLY» se lee como un bloque. */ .marca-nombre{text-transform:uppercase;letter-spacing:0;color:var(--marca-fg)} /* ── Cascarón ───────────────────────────────────────────────────────── */ /* `overflow:clip` y NO `hidden`, desde el 2026-08-18. Los dos recortan igual, pero `hidden` crea un CONTENEDOR DESPLAZABLE: nada lo desplaza con la rueda, y aun así el navegador puede moverlo solo para traer a la vista un elemento que acaba de recibir el foco. Con un `.peek` cerrado —que vive fuera del canto derecho, empujado por `translateX(100%)`— el área desplazable mide 420 más, así que ese auto-scroll corre la app entera y esconde la barra lateral. Medido el día que la lista de ventas estrenó DOS peeks (detalle y captura): `scrollWidth` 1860 contra 1440 de ventana, `scrollLeft` 420 en cuanto el panel enfocaba su primer campo. Con `clip` no hay contenedor que desplazar y el caso desaparece de raíz — el cascarón mide `100vh` y nunca tuvo scroll propio (lo tienen los moldes de dentro), así que no pierde nada. (Una excepción declarada desde el 2026-08-30: con el riel PLEGADO —la escalera responsiva, abajo— el cascarón sí scrollea en vertical; el clip se queda en el eje X, que es donde vivía el caso del peek.) `--panel-pad-x` VIVE AQUÍ y no en `.app-panel` desde el 2026-08-30: el costado lo consumen el panel y sus moldes por herencia, igual que antes, pero también el RIEL cuando el pliegue responsivo lo mete a la columna principal — y el riel es hermano del panel, no hijo. En el panel, el token no le llegaba. */ .app-shell{--panel-pad-x:32px;display:flex;height:100vh;overflow:clip;position:relative} /* ── Barra lateral ──────────────────────────────────────────────────── */ /* La barra se dimensiona por su texto más largo, no al revés: "En cualquier momento" mide 150.91px en Space Grotesk (148 cuando iba en Geist, y los 260px de entonces lo dejaban 0.33px fuera — elipsis medida, no supuesta). Truncar la navegación primaria no es una decisión de estilo. La barra de Things en macOS también es más ancha. */ .app-sidebar{ /* El ancho es un TOKEN local porque lo consume alguien más: el tooltip de la barra compacta se ancla con `left`, y sin esto habría que repetir la cifra en cada modo (y en la media query) — dos sitios que se separan solos. */ --sb-w:264px; width:var(--sb-w);flex:none;align-self:stretch; background:var(--app-sidebar-bg); border-right:1px solid var(--app-hairline); padding:16px 10px; display:flex;flex-direction:column;gap:1px; overflow-y:auto; /* El deslizamiento del interruptor (2026-08-12). Sólo corre al PULSAR: al cargar la página el ancho ya viene servido por PHP (la cookie), así que no hay estado inicial del que animarse. */ transition:width 170ms var(--app-ease); } @media (prefers-reduced-motion:reduce){ .app-sidebar{transition:none} } /* ── La fila de cabecera: la marca y el interruptor ────────────────────── La PRIMERA fila de la barra, y la única que no navega ni pertenece al pie (2026-08-12, pedido de Arif con claude.ai de referencia: el interruptor ahí arriba, a la derecha, sólo icono). SU ALTO ES EL DEL TITULAR DEL PANEL, y por eso está DERIVADO y no escrito: `--fs-titulo × 1.2` es literalmente la fórmula del alto del h1 (26 × 1.2 = 31.2). Las dos arrancan en y=16 —el padding de la barra y el del panel son el mismo— y ahora también terminan igual, así que la cabecera se lee como una franja continua de un extremo a otro de la pantalla en vez de dos piezas sueltas. Derivado y no copiado: si el titular cambia de cuerpo, esto lo sigue solo. Midió `--app-barra-h` (44) del 2026-08-12 al 08-13, y era igual de correcto entonces: lo que había enfrente era la PÍLDORA del titular, que medía 44. Al retirarse la píldora el titular bajó a 31.2 y este 44 se quedó apuntando a una pieza que ya no existe — el botón caía 6.4px por debajo del centro del título. La lección para la próxima: esto no es «el alto de una barra», es «el alto de lo que tiene enfrente». Que la marca la acompañe resuelve la otra mitad: una fila con un solo icono flotando a la derecha se lee como un accidente. La marca ya existía en dos superficies —la puerta (`.puerta-marca`) y el catálogo de ui.php (`.ui-nav .marca`)—; lo raro era que la app no la tuviera. */ .sb-cabeza{ display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:none; min-height:calc(var(--fs-titulo) * 1.2); padding:0 2px 0 9px;margin-bottom:6px; } .sb-marca{ font-family:var(--fuente-titulo);font-size:var(--fs-dialogo);font-weight:700; letter-spacing:-.015em;color:var(--app-fg); margin-right:auto; /* el interruptor se va al extremo derecho */ white-space:nowrap; } /* El reparto de tintas lo pone la marca (`.marca-nombre`); aquí sólo queda el tamaño y el sitio. */ /* El interruptor: botón-icono, misma familia que `.sb-tema` (la barra navega; lo que muta estado es un control, no una fila). Es más grande que aquél —30 contra 24, icono de `--icn-fila` contra `--icn-texto`— y ésa es la diferencia de rango: el tema es un ajuste que se toca dos veces al año y vive apretado en el pie; éste manda sobre la forma de la pantalla, está solo en su banda —la que mide lo que el titular— y a 16px se leería como una mota. */ .sb-plegar{ width:30px;height:30px;flex:none; background:transparent;border:0;border-radius:var(--r-ctl); cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0; color:var(--app-fg-secondary); /* el tono de icono de la barra */ } .sb-plegar .icn{width:var(--icn-fila);height:var(--icn-fila);vertical-align:0} .sb-plegar:hover{background:var(--app-pill);color:var(--app-fg)} /* Los MENÚS van en Space Grotesk (2026-08-08): el menú es chrome que navega, no datos — la letra de la marca lleva la navegación y Geist se queda con las filas, los campos y las cifras. Por eso el CONTEO vuelve a Geist: es un dato, y sus dígitos tabulares tienen que cuadrar en columna. */ .sb-item{ display:flex;align-items:center;gap:7px; padding:5px 9px;border-radius:var(--r-ctl); font-family:var(--fuente-titulo); font-size:var(--fs-base);color:var(--app-fg); cursor:pointer;user-select:none; text-decoration:none; } .sb-item:hover{background:var(--app-pill);text-decoration:none;color:var(--app-fg)} /* LA FILA DE LA PÁGINA EN PANTALLA (2026-09-22, pedido de Arif). La marca `interno/cabecera.php` con `activa` y `aria-current="page"`. El fondo es `--app-row-selected`, el mismo que `.dlg-opcion.actual` usa para «el que está en pantalla» en el selector de catálogo. Se compararon otros dos en la barra real: `--app-pill` es el del hover y con él no se distingue la fila activa de la que tiene el puntero encima; `--app-bg` (blanco) se lee bien en claro, pero en oscuro queda más oscuro que la barra. Con el puntero encima la fila activa conserva su fondo. */ .sb-item.activa,.sb-item.activa:hover{background:var(--app-row-selected)} /* LA FILA QUE ES BOTÓN (2026-09-09, con el buscador global). Tres declaraciones y ninguna cosmética: son los defaults del agente de usuario para `