/* ============================================================================= PIA · TOKENS — LA FUENTE ÚNICA DE VERDAD DEL DISEÑO ============================================================================= Si estás a punto de escribir un color, un radio o un tamaño de letra en una pantalla de PIA: no lo escribas. Búscalo aquí. Si no está aquí, es que hace falta decidirlo, y eso se decide UNA vez y se añade a este archivo — no se improvisa en tu hoja de estilos. POR QUÉ EXISTE ESTE ARCHIVO (medido el 17-ago-2026, no es una impresión): · 116 literales de color repartidos por 6 archivos front-facing. · ajustes.html copió a mano el :root del wizard y lleva un comentario que promete que son "los mismos valores". Ya no lo son: el wizard declara 16 tokens y ajustes 19. La promesa estaba en un comentario, que es el único sitio donde una promesa no se puede comprobar. · El wizard repite los 3 colores de error como literales 14 veces, sin nombre. · #8E99A4 apareció en pia-simplificar.css porque su autor necesitaba un gris y no tenía ninguno al que apuntar. Lo confirmó él mismo: "un gris plausible elegido de memoria, no de ninguna fuente de tokens". Ese es exactamente el fallo que este archivo existe para que no vuelva a pasar. CÓMO SE USA ✔ ELEMENT SÍ RECIBE ESTE ARCHIVO desde el 17-ago-2026. El Dockerfile lo COPIA y el parche de index.html lo ENLAZA; `GET /pia-brand/pia-tokens.css` responde 200 (comprobado contra el contenedor vivo). Este párrafo decía lo contrario y se quedó viejo — se corrige aquí porque un canon que miente manda a la siguiente pantalla a copiarse el :root a mano. Lo que NO ha cambiado: escribir var(--pia-loquesea) mal NO da error. La declaración se vuelve inválida y el navegador cae a `currentcolor` o al valor heredado, así que pinta ALGO parecido y parece que funcionó. Lo midió el nodo del anillo de foco (5b9daeba) antes de tropezar; por eso el Dockerfile lleva guardas que comprueban el COPY *y* el . tablero.html → a este archivo y a pia-componentes.css. Es el patrón: cero literales propios, cero :root copiado. ajustes.html → podría enlazarlo igual y todavía no lo hace: nació antes de que la imagen recibiera el archivo y conserva su copia del :root, que es la que ya derivó una vez. wizard → server.py sirve el HTML inline, así que no puede enlazarlo. Su bloque :root es una COPIA AUTORIZADA. Quien comprueba que las copias no derivan: node scripts/verificar-tokens.mjs Ojo con su alcance: mide el REPO, no el contenedor. Por eso no vio este 404 — un archivo puede estar perfecto en git y no llegar a la imagen. LA REGLA QUE MÁS CARO SALE OLVIDAR El AZUL DE PIA ES DECORATIVO. No pinta texto ni botones. Nunca. El color de ACCIÓN es la tinta negra. Los números están abajo, medidos. ========================================================================== */ :root { /* --- 1 · CIMIENTOS ------------------------------------------------------ La paleta cruda. NO uses estos en tus componentes: usa los roles del bloque 2. Estos están aquí para que exista un solo sitio donde cambiar un valor, no para que los pintes tú. */ --pia-blanco: #FFFFFF; --pia-nieve: #FAFAFA; --pia-hueso: #F6F6F6; --pia-humo: #EFEFEF; --pia-gris-100: #E7E7E7; --pia-gris-200: #D9D9D9; --pia-gris-300: #CFCFCF; --pia-gris-400: #9B9B9B; --pia-gris-500: #717171; --pia-gris-600: #6E6E6E; --pia-gris-800: #5B5B5B; --pia-tinta: #141414; --pia-azul-claro: #AAC6E6; --pia-azul: #7091BA; --pia-ambar: #8A6D2E; --pia-ambar-fondo: #FBF7EE; --pia-ambar-borde: #EBDCBB; --pia-rojo: #8E403C; --pia-rojo-fondo: #FAEFEE; --pia-rojo-borde: #E9CFCD; --pia-rojo-solido: #B4534E; /* --- 2 · ROLES ---------------------------------------------------------- ESTOS son los que se usan. El nombre dice PARA QUÉ SIRVE, no de qué color es, a propósito: así usar uno donde no toca se lee mal en tu propio CSS. Cada uno lleva su contraste medido sobre el fondo donde de verdad se pinta (calculado con la fórmula WCAG 2.1, no estimado). */ /* Superficies */ --pia-fondo: var(--pia-blanco); /* el lienzo de la pantalla */ --pia-superficie: var(--pia-hueso); /* tarjetas */ --pia-superficie-alta: var(--pia-blanco); /* filas dentro de una tarjeta */ --pia-superficie-sutil: var(--pia-nieve); /* zonas de respiro */ /* Líneas */ --pia-borde: var(--pia-gris-100); /* separadores y cajas */ --pia-borde-fuerte: var(--pia-gris-200); /* controles: input, botón 2º */ --pia-borde-maximo: var(--pia-gris-300); /* el más marcado que hay */ /* Texto — los tres niveles de la jerarquía */ --pia-texto: var(--pia-tinta); /* 18.42:1 · AA y AAA */ --pia-texto-segundo: var(--pia-gris-600); /* 5.10:1 · AA */ --pia-texto-tercero: var(--pia-gris-500); /* 4.88:1 · AA */ /* Era #9B9B9B (2.78:1) y pintaba texto pequeño en 11 sitios — por debajo del mínimo de accesibilidad. Zey decidió oscurecerlo el 17-ago-2026, así que ahora vale 4.88:1 y sí puede llevar texto. Al oscurecerlo cayó en el MISMO valor que --pia-texto-tercero, y eso no es una coincidencia que haya que disimular con dos nombres: sobre fondo blanco no existe un tercer gris que pase AA y además se distinga de --pia-texto- segundo (#6E6E6E). El hueco entre "pasa 4.5:1" y "se ve distinto del gris medio" es de unos pocos puntos, y tres unidades por canal no son un nivel de jerarquía: son ruido. Así que la jerarquía de TEXTO tiene dos niveles reales, no tres, y este alias existe sólo para que el código que ya decía --faint siga funcionando. Si necesitas un gris de verdad claro para algo que NO lleva texto (el relleno de un punto en espera, un separador), usa --pia-gris-400 y déjalo dicho. */ --pia-apagado: var(--pia-texto-tercero); /* ACCIÓN — lo que se puede pulsar. Es TINTA, no azul: 18.42:1 contra 3.26:1. ⚠ UN RELLENO Y LO QUE VA ENCIMA SON DOS TOKENS, Y SE CAMBIAN JUNTOS. Ésta es la trampa que ya mordió de verdad (paleta de Element, 17-ago): se puso el fondo del botón en tinta y no se tocó el token del texto, que en Compound es distinto Y depende del tema. Resultado: #141414 sobre #101317, 1.05:1, un botón invisible — y SÓLO en el tema oscuro, así que las pruebas en claro no podían verlo. Regla: si cambias un --pia-*-solido o un fondo de acción, nombra en la misma frase qué --pia-*-texto va encima. Nunca lo dejes heredado. */ --pia-accion: var(--pia-tinta); --pia-accion-hover: #000000; --pia-accion-texto: var(--pia-blanco); /* 18.42:1 sobre la acción */ --pia-accion-apagada: var(--pia-tinta); /* + opacity .32, no otro gris */ /* DECORACIÓN — el azul, y sólo esto. La frontera no es "adorno sí, funcional no": es TEXTO contra NO-TEXTO. WCAG pide 4.5:1 a un texto y sólo 3:1 a un elemento de interfaz que no sea texto (1.4.11). --pia-decor-hasta da 3.26:1, así que: SÍ · degradado del logo, barra de progreso, borde de un aviso, borde de foco, filete de una fila activa — bordes y rellenos sin letra. NO · texto, enlaces, relleno de botón, y cualquier icono que sea la única señal de algo (ahí manda --pia-icono-segundo). --pia-decor-desde (1.76:1) no llega ni a 3:1: es relleno y nada más. Y un botón azul con texto blanco encima da 3.26:1: no pasa AA. Si algún día hace falta un azul que lleve texto, hay que oscurecerlo hasta ≥4.5:1, y entonces ya NO es el azul de PIA: es un color nuevo y se decide en voz alta. */ --pia-decor-desde: var(--pia-azul-claro); /* 1.76:1 — sólo relleno */ --pia-decor-hasta: var(--pia-azul); /* 3.26:1 — no es texto */ --pia-decor-degradado: linear-gradient(135deg, var(--pia-decor-desde), var(--pia-decor-hasta)); /* ESTADOS. El ámbar es ADVERTENCIA y nada más: dejó de ser color de marca cuando Element pasó a claro+azul, pero no quedó libre. */ --pia-aviso: var(--pia-ambar); /* 4.56:1 sobre su fondo · AA */ --pia-aviso-fondo: var(--pia-ambar-fondo); --pia-aviso-borde: var(--pia-ambar-borde); --pia-error: var(--pia-rojo); /* 6.32:1 sobre su fondo · AA */ --pia-error-fondo: var(--pia-rojo-fondo); --pia-error-borde: var(--pia-rojo-borde); --pia-error-solido: var(--pia-rojo-solido); /* 4.90:1 · relleno del punto */ --pia-error-solido-texto: var(--pia-blanco); /* 4.90:1 encima · su pareja */ /* Iconos. Un icono que comunica algo es un elemento de interfaz: WCAG 1.4.11 le pide ≥3:1, así que --pia-apagado (2.78:1) tampoco sirve aquí. */ --pia-icono: var(--pia-texto); /* 18.42:1 */ --pia-icono-segundo: var(--pia-texto-segundo); /* 5.10:1 */ /* --- 3 · TIPOGRAFÍA ----------------------------------------------------- */ /* Copiadas LETRA A LETRA del wizard, incluida la asimetría: el titular no lleva BlinkMacSystemFont y el cuerpo sí. No la "arreglo" aquí — la referencia es la referencia, y un archivo canónico que mejora por su cuenta lo que dice copiar deja de ser canónico. Si hay que unificarlas, se cambia en los dos sitios a la vez y se ve en una captura antes. */ --pia-fuente-titular: 'Space Grotesk',-apple-system,sans-serif; --pia-fuente-cuerpo: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --pia-txt-sello: 10.5px; /* marcas de tiempo, píldoras */ --pia-txt-menudo: 11.5px; /* pies y notas al margen */ --pia-txt-nota: 12.5px; /* notas dentro de una fila, avisos */ --pia-txt-control: 13px; /* botones compactos */ --pia-txt-cuerpo: 14.5px; /* el cuerpo por defecto */ --pia-txt-campo: 16px; /* ⚠ NO LO BAJES: por debajo de 16px Safari iOS hace zoom al enfocar un input y descuadra la pantalla entera. */ --pia-txt-titulo: 19px; /* nombre de marca */ --pia-txt-display: 24px; /* el h1 de la tarjeta */ --pia-peso-normal: 400; --pia-peso-medio: 500; /* botones y titulares */ --pia-peso-fuerte: 600; /* etiquetas de fila */ --pia-alto-cuerpo: 1.55; --pia-alto-titular: 1.15; --pia-track-display: -.5px; /* los titulares van ligeramente cerrados */ --pia-track-titulo: -.3px; --pia-track-suelto: .2px; /* mayúsculas pequeñas y pies */ /* --- 4 · ESPACIO Y FORMA ------------------------------------------------ */ --pia-esp-1: 5px; --pia-esp-2: 9px; --pia-esp-3: 11px; --pia-esp-4: 14px; --pia-esp-5: 18px; --pia-esp-6: 22px; --pia-esp-7: 30px; /* el aire de dentro de una tarjeta EN ESCRITORIO. Si lo que buscas es ese aire, no uses éste: usa --pia-aire-tarjeta, que además sabe encoger. */ --pia-radio-campo: 10px; --pia-radio-boton: 11px; /* el botón primario. No 12, no 8: 11. */ --pia-radio-fila: 12px; --pia-radio-tarjeta: 20px; --pia-radio-marca: 7px; /* el cuadrado del logo */ --pia-radio-redondo: 50%; --pia-ancho-app: 520px; /* la columna de una pantalla de PIA */ --pia-transicion: .15s; /* --- 5 · EL AIRE DEL LIENZO -------------------------------------------- Los dos ÚNICOS tokens de este archivo que cambian con el ancho de la pantalla. Su variante de móvil está en el bloque de justo debajo, dentro de este mismo archivo — no en la hoja de cada pantalla. Ése es el punto entero: quien los use recibe también el comportamiento en móvil. POR QUÉ NO SALEN DE LA ESCALA DE ARRIBA, que es la pregunta obvia y la que hay que contestar antes de que alguien los "arregle": los 16px y 20px que manda LEEME-DISENO §10 M2 NO EXISTEN en ella (--pia-esp-5 vale 18 y --pia-esp-6 vale 22). Con los tokens más cercanos el ancho útil a 390px sale 310px, no los 318px que M2 promete MEDIDOS. Ocho píxeles no son nada hasta que dos pantallas de PIA no coinciden y nadie sabe cuál manda. Y ya no coincidían. Los declaró a mano primero el portal (--portal-margen) y después home.html (--home-margen), copiándose del portal; para cuando existía la segunda pantalla ya habían derivado: el portal ponía 32px de margen en escritorio y home 30px, bajo un comentario que prometía ser "exactamente como portal/web/base.css". Otra promesa escrita en el único sitio donde no se puede comprobar — la misma que ya pagó ajustes.html arriba. Manda 32px: es lo que dice M2 y lo que se midió. ⚠ SON CUATRO VALORES Y UNA SOLA DECISIÓN. Si tocas un par, toca el otro y vuelve a medir el ancho útil a 390px. La mitad de móvil no se deduce de la de escritorio: no está en ninguna escala, se midió. --pia-aire-tarjeta vale 30px ESCRITO, no var(--pia-esp-7), aunque hoy sean el mismo número: su pareja de móvil (20px) no está en la escala, así que atar sólo una mitad a --pia-esp-* deja el par a merced de un cambio que movería una y no la otra. */ --pia-margen-lienzo: 32px; /* margen del lienzo · 16px a ≤480px */ --pia-aire-tarjeta: 30px; /* aire de la tarjeta · 20px a ≤480px */ } /* M1 de LEEME-DISENO §10 · UN SOLO PUNTO DE CORTE: 480px. Un segundo breakpoint es inventar un caso que nadie ha medido. Lo que se adapta es el AIRE, NUNCA la letra: esto es 266 → 318px de ancho útil a 390px, un 19,5% más, sin bajar un solo tamaño de fuente. */ @media (max-width: 480px) { :root { --pia-margen-lienzo: 16px; --pia-aire-tarjeta: 20px; } } /* ============================================================================= ALIAS DE COMPATIBILIDAD ----------------------------------------------------------------------------- El wizard y ajustes.html ya escribieron su CSS contra los nombres cortos (--ink, --bg, --card…). Estos alias existen para que puedan enlazar este archivo SIN reescribir una sola regla: el valor pasa a vivir aquí y allí sólo queda el nombre. PARA CÓDIGO NUEVO USA LOS NOMBRES --pia-*. Los cortos son genéricos y en Element conviven con los --cpd-* de Compound; un día chocarán con algo. ========================================================================== */ :root { --bg: var(--pia-fondo); --card: var(--pia-superficie); --row: var(--pia-superficie-alta); --line: var(--pia-borde); --line2: var(--pia-borde-fuerte); --line3: var(--pia-borde-maximo); --ink: var(--pia-texto); --muted: var(--pia-texto-segundo); --faint: var(--pia-apagado); --blue1: var(--pia-decor-desde); --blue2: var(--pia-decor-hasta); --warn: var(--pia-aviso); --warn-bg: var(--pia-aviso-fondo); --warn-line: var(--pia-aviso-borde); --err: var(--pia-error); --err-bg: var(--pia-error-fondo); --err-line: var(--pia-error-borde); --disp: var(--pia-fuente-titular); --sans: var(--pia-fuente-cuerpo); } /* ============================================================================= LO QUE ESTE ARCHIVO NO GOBIERNA ----------------------------------------------------------------------------- Los colores de marca de TERCEROS son datos, no decisiones nuestras, y no se armonizan con la paleta: un logo de WhatsApp en gris PIA deja de ser reconocible, que es lo único que tiene que hacer. Se escriben como literal allí donde se usan y NO entran aquí: WhatsApp #25D366 · Telegram #229ED9 · Element/Matrix #0DBD8B El verificador los conoce y no los denuncia. Si añades otro canal, añádelo a la lista de scripts/verificar-tokens.mjs para que no salte una falsa alarma. ========================================================================== */