/* GENNARRATIVA — ORDEN DE CAPAS (capas.css) v0.4 * ================================================================== * ⚠ LA REGLA DE ESTA HOJA, aprendida rompiendo el chat de soporte: * * ESTA HOJA SOLO TOCA POSICIÓN Y ORDEN. Nunca `display`, ni * `visibility`, ni `opacity`, ni nada que un módulo use para * mostrar u ocultar algo. * * La v0.3 llevaba `display:flex !important` en #gnw-panel. El widget * de soporte abre y cierra con display —`display:none` en reposo, * `#gnw-panel.open{display:flex}` al abrir—, así que el panel quedó * desplegado sin forma de recogerlo. * * El !important es una herramienta para ganarle a una posición * escrita en otro sitio. Usarlo sobre una propiedad que además * codifica un ESTADO congela ese estado. Antes de añadir una * propiedad aquí, la pregunta es: ¿algún módulo cambia esto para * mostrar, ocultar, abrir o cerrar? Si sí, no va en esta hoja. * * ================================================================== * LA PILA, de abajo arriba: * * ┌─────────────────────────┐ * arriba│ notificaciones │ bottom 124 z 50 000 * │ chat de soporte │ bottom 124 z banda paneles * │ botón de soporte │ bottom 78 z banda paneles * base │ barra del swarm │ bottom 20 z banda paneles * └─────────────────────────┘ * * Los tres huecos salen de las alturas reales, medidas en la app: * swarm colapsado 46px, botón de soporte 34px, toast 45px. Con 12px * de aire entre cada uno. * * DÓNDE VA * * al final del , tras scheherezade_extensiones_ui.css. * * Y capas.js, que hace lo que el CSS no puede: traer al frente el * panel que el usuario toca. Sin él la pila está bien colocada pero * el orden adelante/atrás es fijo. * * ------------------------------------------------------------------ * MEDIDO EN gennarrativa.com, NO SUPUESTO * * Inyectando estas reglas en caliente, ventana 1366×599: * * swarm colapsado y 533–579 base * botón de soporte y 487–521 encima del swarm * notificación y 430–475 encima del botón * chat abierto y 20–475 con 20px de margen arriba * swarm expandido y 79–579 y el botón sigue alcanzable * * Sin un solo solape entre los tres, y todo dentro de pantalla. * * Y en la v0.4, lo que no comprobé en la v0.3 — el panel abriendo y * cerrando de verdad, pulsando: cerrado al cargar · abre con el * botón · cierra con la X · reabre · cierra con el botón. Con la pila * intacta en todos los casos. * * ------------------------------------------------------------------ * LAS TRES BANDAS DE z-index * * 90 000+ VELOS MODALES. Bloquean la obra. Intactos: ya eran * coherentes y el orden términos → encuesta → tutoriales * lo impone el código, no el z-index. * 50 000+ AVISOS. Duran segundos y hay que verlos. Siempre al * frente: no compiten con nadie porque no se tocan. * 10 000+ PANELES. Aquí manda capas.js: el que se toca sube a * 19 000 y los demás vuelven a su base. * ================================================================== */ :root { /* Cambiar la pila es cambiar estos cinco números. Nada más. */ --gn-borde: 20px; /* margen inferior de la pantalla */ --gn-aire: 12px; /* separación entre piezas */ --gn-alto-swarm: 46px; /* barra del swarm colapsada, medido */ --gn-alto-boton: 34px; /* botón de soporte, medido */ /* Altura acumulada de swarm + botón: donde empieza todo lo demás. */ --gn-pila: calc(var(--gn-borde) + var(--gn-alto-swarm) + var(--gn-aire) + var(--gn-alto-boton) + var(--gn-aire)); } /* ------------------------------------------------------------------ LA BASE — la barra del swarm ------------------------------------------------------------------ Va abajo del todo porque es el único de los tres que el usuario no abre: está siempre ahí. Las dos reglas que parecen agresivas, explicadas: transform:none — el `onclick` en línea de app.html escribe style.transform = 'translateY(456px)' al colapsar. Ese desplazamiento saca el panel de la pantalla por debajo; medido, se iba a y 919–965 con un viewport de 599. El !important de la hoja gana al inline: comprobado pulsando la cabecera, colapsa y expande bien con el inline puesto. transition:none — el original transiciona `transform` 0.4s. Como el transform ya no se usa, no hay nada que animar. Ver la nota final si quieres recuperar la animación. ------------------------------------------------------------------ */ #swarm-terminal { z-index: 10000 !important; bottom: var(--gn-borde) !important; transform: none !important; transition: none !important; } /* Colapsado ya no significa «desplazado fuera de la pantalla» sino «barra de 46px»: visible y pulsable, que es lo que se espera. */ #swarm-terminal.collapsed { height: var(--gn-alto-swarm) !important; overflow: hidden !important; } /* ------------------------------------------------------------------ ENCIMA — el soporte ------------------------------------------------------------------ El botón se apoya sobre la barra del swarm; el panel se abre por encima del botón. El `max-height` no es adorno. El panel mide 479px fijos y arrancando en 124 no cabía en una ventana de 599: se salía 4px por arriba. Con el tope se ajusta a cualquier alto de ventana y deja el margen. Bajar el botón de 99 990 tiene un segundo efecto que conviene saber: estaba EMPATADO a 99 990 con el velo de puerta-prueba, con el empate resuelto por orden del DOM. O sea que el chat de soporte podía aparecer sobre un velo de términos. Ya no puede. ------------------------------------------------------------------ */ #gnw-launcher { z-index: 11000 !important; bottom: calc(var(--gn-borde) + var(--gn-alto-swarm) + var(--gn-aire)) !important; } #gnw-panel { z-index: 11001 !important; bottom: var(--gn-pila) !important; /* NI UNA PALABRA SOBRE `display`. AQUÍ ME EQUIVOQUÉ. ------------------------------------------------------------ La v0.3 llevaba `display:flex !important` para que el `max-height` funcionara con la maquetación en columna. El widget cierra el panel con `display:none` y lo abre con `#gnw-panel.open{display:flex}` — support-widget.js:112 y 115. Con mi !important el panel quedaba abierto para siempre, sin forma de recogerlo. Y el max-height tampoco hacía falta: el panel ya se acota solo con `height:min(560px, calc(100vh - 120px))`. Ese 120 era el hueco que se reservaba abajo cuando el botón estaba en 22. Ahora la pila mide más, así que el único cambio necesario es sustituir el 120 por la altura real de la pila — manteniendo el mismo idioma que usa el widget, min() incluido. */ height: min(560px, calc(100vh - var(--gn-pila) - var(--gn-borde))) !important; } /* El coescritor comparte banda y esquina. Entre el swarm y el soporte por defecto; capas.js lo sube cuando se usa. */ #coesc-panel { z-index: 10500 !important; } /* ------------------------------------------------------------------ ARRIBA — los avisos ------------------------------------------------------------------ Suben de 2000 a 50 000 y se colocan sobre el botón de soporte. `pointer-events:none` en el contenedor porque un aviso no es un control: sin eso, un toast de tres segundos se come el clic que ibas a dar debajo. Los hijos lo recuperan, por si algún aviso llegara a llevar botón. ------------------------------------------------------------------ */ .toast-container { z-index: 50000 !important; right: 24px !important; bottom: var(--gn-pila) !important; pointer-events: none !important; } .toast-container > * { pointer-events: auto; } /* El aviso de memoria vive en la esquina opuesta y no chocaba con nada, pero estaba en 10040 — por debajo de los paneles. Sube para que los dos tipos de aviso se comporten igual. */ #gnm-aviso { z-index: 50010 !important; } /* Burbujas didácticas e inscripciones flotantes: siempre por encima de paneles y avisos */ #gnb-tip { z-index: 60000 !important; } /* ------------------------------------------------------------------ DOS COSAS QUE NO ARREGLA, Y SE DICEN ------------------------------------------------------------------ 1. LA ANIMACIÓN DEL COLAPSO. Con `transition:none` el panel abre y cierra de golpe. Lo correcto sería animar la ALTURA, que es lo que ahora cambia: #swarm-terminal { transition: height .3s ease, box-shadow .3s ease !important; } No va por defecto porque no lo pude comprobar: la pestaña estaba en segundo plano y Chrome no hace avanzar las transiciones ahí, así que cualquier medición de una propiedad en transición se queda congelada. Me llevó a un diagnóstico equivocado antes de darme cuenta. Si la quieres, pruébala con la pestaña delante y mira que expandido siga midiendo 500px. 2. EL TOAST SE SALE ~14px DEL MARGEN DERECHO. `.toast-container` es un flex de ancho 0 anclado a right:24px, así que los hijos desbordan. Es de antes; probé `align-items:flex-end` y `width:max-content` y ninguna lo corrigió. Seguir por ahí es rediseñar el layout de los avisos, que no es lo que estaba roto. ------------------------------------------------------------------ */