/* PIA — fase 2: esconder las superficies que hablan de Matrix.
*
* POR QUÉ UN ARCHIVO APARTE Y NO pia-theme.css
* pia-theme.css es EL ARCHIVO DEL ACENTO (lo dice su propia cabecera y el
* resultado del nodo ef5da351: "es el que hay que editar para cambiar de
* color"). Esto es otra cosa: no pinta, ESCONDE. Mezclarlo obligaría a quien
* viene a cambiar el ámbar a leer reglas de ocultación que no le importan, y
* deshacer la fase 2 dejaría de ser una línea. Separados, quitar este en su sitio, VACÍO
* pero vivo: sigue en el orden de tabulación y sigue siendo un enlace a
* matrix.org que se puede enfocar con el teclado y activar sin verlo. Y habría
* que hacerlo en cada idioma. `display:none` sobre el se lleva el
* elemento entero, y con él el enlace, el foco y el landmark.
*
* POR QUÉ GANA SIN !important
* Igual que pia-theme.css: Element mete su CSS dentro de @layer, y el CSS sin
* capa gana a cualquier CSS en capa pase lo que pase con la especificidad.
* Este archivo está fuera de toda capa a propósito.
*/
/* --- El pie "Powered by Matrix" -------------------------------------------
* . Tras la fase 1 (auth_footer_links: []) ese enlace es lo
* ÚNICO que queda dentro, así que esconder el footer no se lleva nada más por
* delante. Medido en el navegador: ocupaba 62,5px de alto al fondo de un flex
* en columna, y la tarjeta de acceso está anclada arriba (top 100px) — al
* esconderlo la tarjeta NO se mueve, sólo desaparece la franja del fondo.
*/
.mx_AuthFooter {
display: none;
}
/* --- La fila "Homeserver / pia.local" del acceso y el registro -------------
* config.json pone `disable_custom_urls: true`, y eso ya se lleva el botón ⓘ
* (el que abría "Server Options": "...sign into other Matrix servers by
* specifying a different homeserver URL...") y el botón "Edit". Pero deja el
* Homeserver y el nombre del servidor, que es justo el vocabulario
* que esta fase viene a quitar.
*
* Sin Edit y sin ⓘ la fila ya no hace NADA: sólo anuncia en qué servidor
* estás. PIA es un producto de un solo servidor — el usuario no eligió y no
* puede cambiarlo — así que el dato no le sirve para decidir nada.
*
* OJO: se esconde la fila, no se cambia la configuración del servidor. El
* cliente sigue apuntando a default_server_config igual que antes.
*/
.mx_ServerPicker {
display: none;
}
/* --- Los dos bloques de Ajustes que devuelven la marca Element -------------
* Ajustes tiene exactamente DOS enlaces a element.io. Se comprobó recorriendo
* las 12 pestañas de Ajustes una a una en la app viva y recogiendo todo
* `.mx_SettingsSubsection a[href*="element.io"]`: salen dos, ni uno más. Por
* eso este selector se puede permitir ser genérico sin llevarse nada por
* delante — no es una apuesta, es una lista cerrada:
*
* 1. "Ayuda y acerca de" → "Preguntas frecuentes"
* "Si necesitas ayuda usando PIA, haz clic aquí." → element.io/help
* Es el help_url que la fase 1 dejó anotado. Se ESCONDE en vez de
* apuntarlo a otro sitio: PIA no tiene página de ayuda, y una URL
* inventada daría 404. Decisión del Orquestador, no mía.
*
* 2. "Seguridad y privacidad" → "Búsqueda de mensajes"
* "PIA no puede almacenar en caché de forma segura mensajes cifrados
* localmente mientras se ejecuta en un navegador web. Usa PIA Escritorio
* para que los mensajes cifrados aparezcan en los resultados de
* búsqueda." → element.io/download
* Este NO estaba en el encargo y es peor que el otro: recomienda "PIA
* Escritorio", que NO EXISTE, y el enlace lleva a descargar Element. La
* fase 1 ya apagó `desktop_builds`, pero eso no alcanza a esta cadena.
* Comprobado que la sección no tiene NINGÚN control dentro (0 inputs,
* 0 botones): es informativa, así que esconderla no quita ninguna
* función, sólo un anuncio de otra marca.
*
* POR QUÉ `:has()` Y NO UNA CLASE: ninguna de las dos secciones tiene clase
* propia — las dos son `.mx_SettingsSubsection` a secas, y la pestaña tampoco
* añade una (es `.mx_SettingsTab` genérico). El enlace ES el identificador.
*
* Y FALLA HACIA EL LADO BUENO: el día que alguien apunte el help_url a una
* página de PIA, el selector deja de encajar y la sección VUELVE a verse
* sola, que es exactamente lo que se querría entonces.
*/
.mx_SettingsSubsection:has(a[href*="element.io"]) {
display: none;
}
/* --- Los lanzadores de las pantallas de PIA, sólo con la sesión iniciada ---
* pia-lanzador.js cuelga los botones de , que existe también en la
* pantalla de acceso — y ahí no pintan nada: el usuario aún no ha entrado.
* Cuando se está sin iniciar sesión, Element pinta .mx_AuthPage, así que eso
* sirve de interruptor.
*
* Se hace en CSS y no en el JS a propósito: el JS tendría que vigilar los
* cambios de pantalla (la app es una SPA y no recarga al entrar o salir), y un
* observador que se equivoque deja el botón puesto donde no toca. La regla
* CSS se reevalúa sola.
*
* LA ESCALERA DEL RAÍL, MEDIDA EN LA APP VIVA (1280x900, sesión iniciada):
* Ajustes rápidos x=18 32x32 a 12px del fondo (de Element)
* Hilos x=18 32x32 a 56px del fondo (de Element)
* Tu tablero x=18 32x32 a 100px del fondo (de PIA)
* Ajustes de PIA x=18 32x32 a 144px del fondo (de PIA)
* Paso de 44px. Si algún día hay un tercero de PIA, va a 188px — y si la
* escalera llega a rozar los iconos de arriba, entonces el raíl ya no es el
* sitio y toca otra superficie, no apretar el paso.
*/
.pia-lanzador {
position: fixed;
left: 18px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
/* El respaldo era #8E99A4 (2.90:1), que LEEME-DISENO.md dejó anotado como
* "un gris plausible elegido de memoria, no de ninguna fuente de tokens" y
* sin dueño. Ya no hace falta inventarlo: desde la fase 2 la imagen sirve
* pia-tokens.css, así que el respaldo es el token del sistema para iconos
* (5.10:1, y un icono que comunica algo necesita ≥3:1 por WCAG 1.4.11). */
color: var(--cpd-color-icon-secondary, var(--pia-icono-segundo));
cursor: pointer;
/* Por encima del lienzo y POR DEBAJO de los diálogos de Element, que van a
* 4000 (mx_Dialog_wrapper) y 4009 (su fondo), medidos en la app viva. Si
* subieran de ahí, estos botones flotarían sobre cualquier diálogo abierto. */
z-index: 900;
}
#pia-lanzador-tablero { bottom: 100px; }
#pia-lanzador-ajustes { bottom: 144px; }
.pia-lanzador:hover {
background: var(--cpd-color-bg-subtle-secondary, var(--pia-humo));
color: var(--cpd-color-icon-primary, var(--pia-icono));
}
/* El anillo de foco, que en la versión anterior no existía: estos botones se
* alcanzan con el teclado igual que los de Element, y sin marca visible quien
* navegue tabulando no sabe dónde está. Azul decorativo (3.26:1, pasa 1.4.11
* porque no es texto). */
.pia-lanzador:focus-visible {
outline: 2px solid var(--pia-decor-hasta);
outline-offset: 2px;
}
/* En la pantalla de acceso no pinta nada un botón de ajustes ni un tablero:
* quien la está mirando todavía no ha entrado. Element pinta .mx_AuthPage
* mientras no hay sesión, así que sirve de interruptor y se reevalúa solo — la
* app es una SPA y no recarga al entrar ni al salir, así que un observador en
* JS tendría que vigilar los cambios de pantalla y equivocarse deja el botón
* donde no toca.
*
* VA POR CLASE Y NO POR ID a propósito: por id habría que acordarse de añadir
* aquí cada lanzador nuevo, y el día que alguien no se acuerde el botón nuevo
* aparecerá sobre la pantalla de acceso — el fallo saldría en la pantalla que
* menos se mira, que es exactamente como ya pasó una vez.
*
* ESTA REGLA ESTUVO SIN FUNCIONAR: mientras la geometría se ponía con
* b.style.cssText desde el JS, el `display:flex` EN LÍNEA le ganaba y el botón
* salía igualmente sobre la tarjeta de acceso. Por eso todo el aspecto está
* aquí y no allí. Si alguien vuelve a mover estilos al JS, esto deja de
* esconder y no avisa. */
body:has(.mx_AuthPage) .pia-lanzador {
display: none;
}