/* GENNARRATIVA — LOS DOS BOTONES REDONDOS EN LA WEB (flotantes.css) v0.1 * ================================================================== * Doc 33 §10. Lo que el celular ya hacía —el botón de ayuda y el del * enjambre, redondos y con solo el ícono— ahora también en la web: * el mismo diseño, abajo a la derecha, uno encima del otro. Así no * tapan los contenedores: de una franja de 400 px de ancho (la barra * del enjambre más la pastilla de ayuda) a una columna de 48 px. * * ( ) ayuda bottom 80 right 20 * ( ) enjambre bottom 20 right 20 * * DÓNDE VA * * en el , justo después de capas.css y antes de movil.css. * Quitar esa línea deja la web como estaba. * * TODO VA DENTRO DE @media (min-width: 769px). En el celular (768 px o * menos) esta hoja no hace nada: manda movil.css, y capas.css conserva * sus números. Por eso el celular queda idéntico, no «parecido». * * ------------------------------------------------------------------ * QUÉ HACE * * 1. CAMBIA DOS DE LOS CINCO NÚMEROS DE capas.css: la altura de la * barra del enjambre (46) y la del botón de ayuda (34) pasan a * ser las dos el diámetro del círculo (48). capas.css sigue * siendo quien ordena la pila y la recalcula sola: * * ayuda bottom 80 (antes 78) * pila 140 (antes 124) * panel de ayuda y avisos: arrancan en 140, 16 px más arriba * * 2. PONE EL ASPECTO REDONDO, con las mismas reglas del celular * (movil.css §6): sin texto, el ícono centrado, y la marquita * verde de la ayuda arriba a la derecha. * * Cambiar el tamaño de los botones es cambiar un número: --gn-redondo. * * ------------------------------------------------------------------ * LA REGLA DE capas.css SE RESPETA * * capas.css: «solo toca posición y orden; nunca lo que un módulo usa * para mostrar u ocultar». Aquí: * * · #gnw-panel abre y cierra con `display`: no se lo toca. * · El enjambre abre y cierra con la clase .collapsed (el onclick de * su cabecera). Todo lo de aquí cuelga de esa clase: sigue al * estado, no lo congela. * · Con el enjambre plegado se oculta la flecha y el punto de su * cabecera (display: ningún módulo los mueve) y su registro y su * pie (visibility, NO display, a propósito: orchestrator.js y * renders_v3.js hacen `scrollTop = scrollHeight` cada vez que * llega un mensaje. Con display:none el registro mide 0 y se * queda arriba; con visibility sigue midiendo y, al desplegar, * se ve lo último). * * ------------------------------------------------------------------ * LO QUE NO HACE, Y SE DICE * * 1. NO PONE RÓTULO AL PASAR EL PUNTERO. Sin texto, los botones no * dicen qué son hasta que se tocan. Un `title` en cada uno lo * resuelve, pero el título del enjambre cambia por idioma * (applyLanguageToDOM) y el de la ayuda lo crea support-widget.js: * no se arregla con CSS y va en su propia pasada. * * 2. NO MUEVE LOS PANELES ABIERTOS. El enjambre abierto sigue siendo * 400 × 500 desde la misma esquina y la ayuda abierta sale por * encima de la columna. Con el enjambre abierto, el botón de ayuda * sigue encima de él y a mano (capas.css ya lo quería así). * ================================================================== */ @media (min-width: 769px) { /* ------------------------------------------------------------------ 1 · LOS NÚMEROS ------------------------------------------------------------------ --gn-redondo es el diámetro de los dos botones. Los dos números de capas.css que dependen de él lo toman de aquí, y --gn-pila (que capas.css calcula con ellos) se recalcula sola: 20 + 48 + 12 + 48 + 12 = 140. */ :root { --gn-redondo: 48px; --gn-alto-swarm: var(--gn-redondo); --gn-alto-boton: var(--gn-redondo); } /* ------------------------------------------------------------------ 2 · LA AYUDA, arriba de la columna ------------------------------------------------------------------ La pastilla «GN // SOPORTE» pasa a círculo. El texto (el segundo span) se oculta; `font-size:0` esconde el que fuera nodo de texto suelto. El ícono sale de una ligadura de Material Symbols, como en el celular. El punto verde (.gnw-dot) sube a la esquina. La posición vertical sigue siendo la de capas.css: bottom = borde + alto-swarm + aire = 80. Aquí solo se alinea el lado: right 20, igual que el enjambre (antes 22 contra 20). */ #gnw-launcher { right: 20px !important; width: var(--gn-redondo) !important; height: var(--gn-redondo) !important; padding: 0 !important; gap: 0 !important; border-radius: 50% !important; justify-content: center !important; font-size: 0 !important; } #gnw-launcher > span:not(.gnw-dot) { display: none !important; } #gnw-launcher::before { content: "support_agent"; font-family: "Material Symbols Outlined"; font-size: 24px; line-height: 1; font-feature-settings: "liga"; -webkit-font-feature-settings: "liga"; } #gnw-launcher .gnw-dot { position: absolute !important; top: 7px; right: 7px; } /* El panel sale por encima de la columna (bottom: --gn-pila, de capas.css) y alinea su borde derecho con el de los botones. */ #gnw-panel { right: 20px !important; } /* ------------------------------------------------------------------ 3 · EL ENJAMBRE, base de la columna ------------------------------------------------------------------ Solo plegado. Desplegado es el de siempre (400 × 500, desde la misma esquina). El alto (48) lo pone capas.css con --gn-alto-swarm; aquí van el ancho, la forma y la cabecera sin adornos. La cabecera llena el círculo y sigue siendo lo que se toca: el onclick en línea es el mismo. */ #swarm-terminal.collapsed { right: 20px !important; width: var(--gn-redondo) !important; border-radius: 50% !important; } #swarm-terminal.collapsed .swarm-header { flex: none !important; height: calc(var(--gn-redondo) - 2px) !important; /* el círculo menos su borde de 1 px por lado */ padding: 0 !important; justify-content: center !important; box-sizing: border-box !important; border: 0 !important; background: transparent !important; } #swarm-terminal.collapsed .swarm-header h6 { font-size: 0 !important; gap: 0 !important; letter-spacing: 0 !important; } #swarm-terminal.collapsed .swarm-header h6 .material-symbols-outlined { font-size: 22px !important; } /* El punto ámbar y la flecha: adorno, nadie los mueve. */ #swarm-terminal.collapsed .swarm-header > div:last-child { display: none !important; } /* El registro y el pie quedan fuera de la vista y del teclado, pero siguen en la maquetación (ver «LA REGLA», arriba). Por eso la cabecera lleva `flex: none`: el contenedor es una columna de 48 px y, sin eso, el pie —invisible pero ahí— la apretaría hasta 22 px y el ícono se quedaría pegado arriba, fuera del centro. */ #swarm-terminal.collapsed > :not(.swarm-header) { visibility: hidden !important; } /* Al pasar el puntero, el mismo resplandor que ya tiene la ayuda. */ #swarm-terminal.collapsed:hover { box-shadow: 0 0 28px rgba(167, 139, 250, 0.5) !important; } }