/* PIA para Element Web — el sistema del wizard: claro, acción en tinta, azul decorativo.
*
* QUÉ CAMBIÓ RESPECTO A LA VERSIÓN ANTERIOR Y POR QUÉ
* La fase 1 pintó Element de ÁMBAR sobre tema oscuro. QA (nodo 3cd7c44e) midió
* que eso no era sólo "otro color": en el wizard el ámbar es el color de
* ADVERTENCIA (--warn #8A6D2E), así que la marca de PIA estaba diciendo
* "atención" en el idioma del propio producto. Zey decidió el 17-ago-2026 que
* Element adopta el sistema del wizard. Este archivo es esa decisión.
*
* ⚠️ LA TRAMPA QUE HAY QUE LEER ANTES DE TOCAR NADA
* "Element adopta el azul del wizard" NO significa pintar de azul lo que estaba
* de ámbar. En el wizard el azul NO pinta nunca texto ni botones: sale en tres
* sitios y los tres son decorativos — el degradado del logo, la barra de
* progreso (3px) y el borde izquierdo de los avisos (3px). El color de ACCIÓN
* del wizard es el NEGRO --ink #141414: botón primario negro, píldora "activo"
* negra, punto de estado negro.
*
* Contraste medido sobre #FFFFFF (QA, checklist v2):
* --blue2 #7091BA .... 3.26:1 → FALLA el AA de texto (pide 4.5:1)
* --blue1 #AAC6E6 .... 1.76:1 → decorativo y nada más
* --ink #141414 ... 18.42:1 → el que de verdad hace de acción
* ámbar #da670d .... 3.54:1 → el saliente, tampoco pasaba
* Un swap ingenuo ámbar→azul habría dejado la app con MENOS contraste que
* antes. Por eso aquí se reproducen los ROLES del wizard, no sus hex:
* acción / botón / estado activo → tinta
* azul → logo, bordes y separadores decorativos
* El azul sí vale para BORDES e ICONOS: 3.26:1 pasa el mínimo de 3:1 que WCAG
* 1.4.11 pide a los elementos NO textuales. Es texto lo que no puede llevar.
*
* POR QUÉ HEX FIJOS Y NO var(--cpd-color-blue-*)
* La versión anterior apuntaba a la rampa `orange` de Compound para que el
* acento se adaptase solo a claro/oscuro. Aquí no sirve: la rampa `blue` de
* Compound es #0467dd (medido en vivo), un azul saturado que NO es el
* #7091BA del wizard. Como el objetivo es que las dos piezas se vean IGUALES,
* mandan los hex del wizard. PIA sirve un solo tema (claro), así que la
* adaptabilidad que se pierde no se estaba usando.
*
* POR QUÉ GANA ESTE ARCHIVO SIN !important
* Element mete sus tokens dentro de capas:
* @layer compound-tokens { @media screen { @layer cpd-semantic {
* :root,[class*=cpd-theme-] { --cpd-color-bg-accent-rest: ... } } } }
* Estas reglas están FUERA de toda @layer, y el CSS sin capa gana a cualquier
* CSS en capa pase lo que pase con la especificidad. (Comprobado en el
* navegador en la fase 1, y otra vez aquí.)
*
* QUÉ NO SE TOCA A PROPÓSITO
* El VERDE DE ÉXITO. En Element el verde pintaba el acento Y el éxito
* (--cpd-color-text-success-primary, --cpd-color-icon-success-primary…). Si se
* repintara la rampa entera, los "verificado" saldrían en color de aviso. Se
* repintan los tokens de acento UNO A UNO y el éxito se queda verde. Esto
* valía con el ámbar y sigue valiendo con el azul (QA lo confirma en la v2).
*/
/* --- LA FUENTE DE TITULARES, SERVIDA POR NOSOTROS -------------------------
* El wizard trae Space Grotesk con un a fonts.googleapis.com. Aquí NO
* se hace eso, y es una decisión, no un descuido:
* 1. PIA es un cliente de chat PRIVADO que el usuario abre a diario. Un
* al CDN le manda la IP a Google en cada carga de su mensajería.
* El wizard se abre una vez para instalar; esto se abre siempre.
* 2. PIA se autoaloja y puede correr en una LAN sin salida a internet. Con
* el CDN, ahí los titulares caen a Inter en silencio.
* Space Grotesk es OFL (SIL Open Font License) y se puede redistribuir; la
* licencia va al lado, en fuentes/OFL.txt.
*
* Los dos ficheros son UN SOLO font VARIABLE con eje wght 300–700 (verificado
* con fontTools: la tabla `fvar` está y el eje va de 300 a 700). Por eso el
* `font-weight` del @font-face declara un RANGO y no un número: pedir 500 y
* 600 sale del mismo archivo y el navegador interpola. Si se declarara un peso
* fijo, uno de los dos titulares saldría SINTETIZADO (falso negrita) en vez de
* usar el trazo real de la fuente.
* Google devuelve la MISMA url para wght@500 y wght@600 justamente por esto —
* no es un fallo de la descarga, es que sólo hay un fichero. */
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("fuentes/space-grotesk-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("fuentes/space-grotesk-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root,
[class*="cpd-theme-"] {
/* --- La paleta del wizard, tal cual (installer/web/index.html) ---------- */
--pia-ink: #141414; /* acción: botones, estados activos */
--pia-ink-strong: #000000; /* hover del botón primario, igual que .btn:hover */
--pia-muted: #6E6E6E; /* texto secundario — 5.10:1, pasa AA */
--pia-blue-1: #AAC6E6; /* DECORATIVO: inicio del degradado del logo */
--pia-blue-2: #7091BA; /* DECORATIVO: fin del degradado, bordes 3px */
--pia-line: #E7E7E7;
--pia-line-2: #D9D9D9;
/* --- ACCIÓN → tinta ----------------------------------------------------
* Estos son los tokens que en Element pintan BOTONES y TEXTO DE ENLACE.
* Van a tinta, que es lo que hace de acción en el wizard. */
--cpd-color-text-action-accent: var(--pia-ink);
--cpd-color-text-badge-accent: var(--pia-ink);
--cpd-color-bg-accent-rest: var(--pia-ink);
--cpd-color-bg-accent-hovered: var(--pia-ink-strong);
--cpd-color-bg-accent-pressed: var(--pia-ink-strong);
--cpd-color-bg-accent-selected: rgba(20, 20, 20, 0.08);
--cpd-color-bg-badge-accent: #EFEFEF;
/* --- EL BOTÓN PRIMARIO DE VERDAD ---------------------------------------
* QA midió que el CTA "Iniciar sesión" NO usa los tokens de acento de
* arriba, sino la familia `action-primary` — por eso el ámbar de la fase 1
* nunca llegó a pintarlo y el botón se quedó off-white (#ebeef2, que es el
* valor del tema OSCURO). Al pasar a tema claro, Compound ya lo pone en
* #1b1d22 él solo (medido). Se fija aquí de todas formas porque #1b1d22 no
* es #141414, y la comparación contra el wizard es a nivel de hex. */
--cpd-color-bg-action-primary-rest: var(--pia-ink);
--cpd-color-bg-action-primary-hovered: var(--pia-ink-strong);
--cpd-color-bg-action-primary-pressed: var(--pia-ink-strong);
/* --- EL TEXTO QUE VA ENCIMA, Y POR QUÉ NO SE PUEDE OMITIR ---------------
* Un fondo y su texto son UNA PAREJA, y en Compound el texto sale de un
* token APARTE que depende del tema:
* tema claro → --cpd-color-text-on-solid-primary = #fff
* tema oscuro → --cpd-color-text-on-solid-primary = #101317
* Tiene sentido en Element, porque su botón primario es CLARO en el tema
* oscuro (#ebeef2) y por eso le pone letra oscura encima.
*
* Al forzar el fondo a tinta en los DOS temas y no tocar el texto, el botón
* quedaba #141414 sobre #101317 en el tema oscuro: 1,05:1, ilegible. Lo
* midió el bot de la fase 2 en la app viva y lo reproduje en los dos temas
* antes de tocar esto. No se ve con el tema claro puesto, así que es
* exactamente la clase de fallo que se escapa a quien sólo prueba su caso.
*
* Se fija a blanco y deja de depender del tema: fondo tinta + letra blanca es
* la pareja del wizard (.btn{background:var(--ink);color:#fff}) y da 18,42:1.
* IMPORTA aunque PIA arranque en claro: mx_local_settings puede tener el tema
* fijado a oscuro de antes, y ese usuario se quedaría con el botón invisible
* para siempre sin que ningún cambio de config lo rescate. */
--cpd-color-text-on-solid-primary: #FFFFFF;
/* --- DECORATIVO → azul --------------------------------------------------
* Bordes e iconos: no llevan texto encima, así que 3.26:1 les basta
* (WCAG 1.4.11 pide 3:1 a los elementos no textuales). Es exactamente el
* papel que el azul juega en el wizard: el borde de 3px de los avisos. */
--cpd-color-border-accent-subtle: var(--pia-blue-1);
--cpd-color-border-accent-primary: var(--pia-blue-2);
--cpd-color-icon-accent-tertiary: var(--pia-blue-2);
--cpd-color-icon-accent-primary: var(--pia-blue-2);
/* Degradado suave (fondos de avatar y cabeceras): el azul del logo, muy
* diluido. Se escribe en rgba explícito y no con var(--cpd-color-alpha-blue-*)
* porque esa rampa es el #0a70ff de Compound, no el azul del wizard. */
--cpd-color-gradient-subtle-stop1: rgba(112, 145, 186, 0.22);
--cpd-color-gradient-subtle-stop2: rgba(112, 145, 186, 0.17);
--cpd-color-gradient-subtle-stop3: rgba(170, 198, 230, 0.14);
--cpd-color-gradient-subtle-stop4: rgba(170, 198, 230, 0.09);
--cpd-color-gradient-subtle-stop5: rgba(170, 198, 230, 0.04);
/* Variables legacy: el bundle todavía las lee en componentes viejos.
* Van a tinta por el mismo motivo que los tokens de acción. */
--accent-color: var(--pia-ink);
--accent: var(--pia-ink);
--links: var(--pia-ink);
/* --- EL ANILLO DE FOCO DE LOS CAMPOS DE COMPOUND ------------------------
* El azul de fábrica (#0467dd) donde el sistema de PIA manda tinta. Es el
* token que pinta el foco de los campos NATIVOS de Compound —el
* `_picker_input_*` del selector de servidor, por ejemplo—. NO es el que
* pinta el campo de acceso: ése va más abajo y es otra historia. */
--cpd-color-border-focused: var(--pia-ink);
}
/* --- FORMA DEL BOTÓN: píldora → 11px --------------------------------------
* El wizard usa radio 11px en el botón primario; Element usa 9999px (píldora).
* El 9999px no sale de ningún token —se buscó `--cpd-radius-pill-effective` en
* vivo y no existe—, está en la regla del módulo CSS de Compound, cuya clase
* lleva un hash: `_button_1nw83_8`. Ese hash CAMBIA con cada versión de
* Element, así que targetearlo directamente sería un arreglo con fecha de
* caducidad silenciosa.
*
* Por eso se ataca por dos vías estables:
* .mx_Login_submit → clase propia de Element, sin hash
* button[class*="_button_"] → el patrón del módulo, sea cual sea el hash
*
* OJO con el segundo: NO alcanza a los botones de icono, que en Compound son
* `_icon-button_` — ahí el carácter anterior a "button" es un guion, no
* un guion bajo, así que `_button_` no casa y los botones redondos siguen
* redondos. Es la razón de que el selector lleve los dos guiones bajos. */
.mx_Login_submit,
button[class*="_button_"] {
border-radius: 11px;
}
/* --- EL ANILLO DE FOCO DEL CAMPO DE ACCESO --------------------------------
* QA (nodo 3cd7c44e, pasada 2) vio el foco del input de acceso en azul y lo
* atribuyó a --cpd-color-border-focused (#0467dd). EL HALLAZGO ERA REAL Y LA
* CAUSA NO: medido con :focus-visible forzado por CDP, el anillo de esa
* pantalla sale de OTRO sitio y de OTRO azul.
*
* quién lo pinta .mx_Field:focus-within (theme-light.css de Element)
* con qué border-color: var(--cpd-color-text-link-external)
* qué color sale #064AB1 ← NO es el #0467dd que decía el hallazgo
*
* Retintar sólo --cpd-color-border-focused habría dejado el anillo del acceso
* EXACTAMENTE IGUAL de azul, con el arreglo dado por bueno. Se retintan los
* dos: el token de arriba (campos nativos de Compound) y esta regla (el campo
* de acceso y todos los .mx_Field de la app).
*
* POR QUÉ NO SE RETINTA --cpd-color-text-link-external
* Es el token del TEXTO de los enlaces externos, y Element lo reutiliza aquí
* para un borde. Llevarlo a tinta apagaría el color de los enlaces de los
* mensajes de paso — un daño en una superficie que este nodo no vino a tocar.
* Se ataca la regla, que es lo que de verdad sobra.
*
* POR QUÉ LA CLASE VA REPETIDA (.mx_Field.mx_Field)
* No es un descuido ni una floritura: sube la especificidad a 0,3,0 sin
* cambiar a qué elementos alcanza. Con la misma especificidad que la regla de
* Element (0,2,0) el desempate lo decidiría el ORDEN de las hojas, y el orden
* aquí no está de nuestra parte: Element inyecta la hoja del tema en tiempo de
* ejecución al cambiar de tema, así que puede acabar DESPUÉS de este archivo.
* Un override que empata y se coloca antes no falla — deja de existir en
* silencio. Con 0,3,0 gana esté donde esté. */
.mx_Field.mx_Field:focus-within {
border-color: var(--pia-ink);
}
/* --- TIPOGRAFÍA DE TITULARES: Space Grotesk -------------------------------
* El wizard titula en Space Grotesk 500 con letter-spacing -.5px; Element
* titulaba en Inter 600. El cuerpo ya coincidía en Inter y no se toca.
* La fuente se sirve desde la propia imagen (@font-face al principio de este
* archivo). Si no cargara, la cascada cae a Inter: se pierde el titular, no la
* app. */
h1,
h2,
.mx_Heading,
.mx_AuthBody h1,
.mx_AuthBody h2 {
font-family: "Space Grotesk", Inter, -apple-system, sans-serif;
font-weight: 500;
letter-spacing: -0.5px;
}