/* ──────────────────────────────────────────────────────────────────────── Estilos propios de Wanjarakú — correcciones sobre el CSS compilado de Nitro ──────────────────────────────────────────────────────────────────────── Se sirve desde /configuration/, que nginx marca como "no cachear": los cambios se ven al recargar la página, sin recompilar el cliente ni tocar la caché. ⚠️ SOBRE LA ESPECIFICIDAD Nitro carga su CSS desde JavaScript, así que su hoja entra en el documento DESPUÉS de esta. A igualdad de especificidad ganaría la suya aunque aquí se use !important. Por eso cada regla lleva un selector MÁS específico (`body .clase` en vez de `.clase`): así gana por especificidad y el orden deja de importar. Este fichero es también el sitio natural para los ajustes visuales del branding cuando llegue el momento. ──────────────────────────────────────────────────────────────────────── */ /* ── El botón "Traducir" se salía por arriba de la pantalla ────────────── La columna de acciones de la cartera tiene, en el CSS compilado: height: 61px !important; + justify-content: center; pero sus 4 botones suman 82px (4 × 19px + 3 huecos de 2px). Al estar centrados, los 21px sobrantes se repartían mitad arriba y mitad abajo, así que el primer botón acababa en y = -2 y quedaba cortado por el borde superior de la ventana. Solución: que la columna crezca según su contenido y apile desde arriba. Se conserva un mínimo para que el bloque no encoja cuando haya menos botones (por ejemplo, si un rango no ve alguno). ⚠️ ESPECIFICIDAD: la primera versión de esta regla usaba `body .nitro-purse__col--actions`, que es (0,1,1), y **solo se aplicó a medias**: ganó el `justify-content` pero NO la altura, porque existe `.nitro-purse-container .nitro-purse .nitro-purse__col--actions`, que es (0,3,0). Con `!important` en ambos lados, decide la especificidad. Por eso ahora el selector repite la cadena entera más `body`: (0,3,1). */ body .nitro-purse-container .nitro-purse .nitro-purse__col--actions { height: auto !important; min-height: 61px; justify-content: flex-start !important; } /* El contenedor de la cartera se subía 5px, lo que empeoraba el recorte. A ras del borde superior queda alineado y no se pierde nada. */ body .nitro-purse-container { margin-top: 0 !important; } /* ── La cartera recortaba 13 px por abajo (arreglado 2026-08-06) ───────── Esto es la segunda mitad del problema de arriba, y salió de arreglar mal la primera: al poner la columna de botones en `height:auto` creció a 82px, pero el panel que la contiene seguía con altura fija. El recorte se movió del borde de la pantalla al borde del panel. Resultado visible: el botón de cerrar sesión salía partido por la mitad y el de ajustes desaparecía del todo. Las cuentas, medidas en el navegador: relleno superior del cuerpo 8 px 4 botones de 19 px 76 px 3 huecos de 2 px 6 px ────────── contenido 90 px altura impuesta al panel 77 px → 13 px cortados Dos reglas del cliente lo imponen, las dos con !important: .nitro-purse-container .nitro-purse height: 77px .nitro-purse-container .nitro-purse .nitro-purse__body height: 77px grid-template-rows: 62px Por eso cada corrección lleva un `body ` delante: sube la especificidad a (0,2,1) y (0,3,1) respectivamente, y así gana la nuestra. Con `!important` solo no bastaría, porque la hoja de Nitro se carga DESPUÉS que esta. Se usa `min-height` en vez de una altura nueva: si algún día un rango ve menos botones, el panel encoge solo y no deja un hueco vacío. */ body .nitro-purse-container .nitro-purse { height: auto !important; min-height: 77px; overflow: visible !important; } body .nitro-purse-container .nitro-purse .nitro-purse__body { height: auto !important; min-height: 69px; /* 77 del original menos sus 8 de relleno */ grid-template-rows: auto !important; } /* ── El título de la lista de amigos sale cortado (2026-08-07) ─────────── Medido por el auditor: «Amig@s» necesita 38 px y tiene 32, con `text-overflow: clip`. O sea, se corta SIN puntos suspensivos: sin avisar. El cliente encaja el título entre las dos bandas rayadas de la barra: .hfl-titlebar::before width: 90px left: 7px → ocupa 7..97 .hfl-titlebar::after width: 87px right: 23px → ocupa 128..215 .hfl-title inset: 0 108px 0 98px → le quedan 32 px El hueco entre bandas mide 31 px y el título 38. No es cosa del idioma: «Friends» tampoco cabría. Se arregla al revés de como tienta. En vez de encoger la letra —que ya está a 9 px— se recortan las bandas, que son adorno, y se le da al título el centro de la barra. Las medidas van en porcentaje para que no dependan de los 240 px que mide hoy la ventana. Cuentas sobre los 238 px de ancho interior (la mitad son 119): banda izquierda 119 − 48 = 71 px → 7 .. 78 título centrado, 72 px → 83 .. 155 banda derecha 119 − 62 = 57 px → 158 .. 215 Quedan 5 px de aire a la izquierda del título y 3 a la derecha. ESPECIFICIDAD: `.hfl-title` es (0,1,0) y `.hfl-titlebar::before` es (0,1,1). Con `body .habbo-friend-list …` quedan en (0,2,1) y (0,2,2), así que ganan aunque la hoja de Nitro se cargue después. */ body .habbo-friend-list .hfl-title { right: auto; left: 50%; width: 72px; margin-left: -36px; } body .habbo-friend-list .hfl-titlebar::before { width: calc(50% - 48px); } body .habbo-friend-list .hfl-titlebar::after { width: calc(50% - 62px); } /* ── La cabecera de la tienda corta su propio texto (2026-08-07) ───────── Medido: 115 px de contenido en una banda de 86. Se ve en «How To Use Wired», que anuncia cinco apartados y solo enseña tres, y en «Trophies». El cliente la fija: .nitro-catalog-swf-header flex: 0 0 90px; height: 90px; overflow: hidden ⚠️ LA TRAMPA: poner `height: auto` a secas la deja en CERO, no la hace crecer. Todo lo que hay dentro está posicionado en absoluto (`.nitro-catalog-swf-header-copy` es `position: absolute; top: 11px; left: 80px; right: 15px`), y lo absoluto NO cuenta para la altura del padre. La banda se quedaría sin nada que la sostenga. Por eso hay que hacer dos cosas a la vez: devolver el texto al flujo normal y convertir sus distancias en relleno de la banda. Con el texto dentro del flujo, `height: auto` sí mide lo que hay. El icono se queda como está: lo absoluto se posiciona respecto a la caja de relleno del padre, y añadir relleno no mueve esa caja. `min-height: 90px` para que las páginas cuyo texto sí cabía —la inmensa mayoría— sigan midiendo exactamente lo mismo que antes. */ body .nitro-catalog-swf-header { flex: 0 0 auto; height: auto; min-height: 90px; padding: 11px 15px 11px 80px; } body .nitro-catalog-swf-header .nitro-catalog-swf-header-copy { position: static; inset: auto; } /* ── «Regalar» y «Comprar» se salen de su columna (2026-08-07) ─────────── Medido: la columna mide 145 px y su contenido 160, con overflow hidden. Los dos botones sobresalen 15 px por la derecha y se cortan. Pasa en las tres maquetaciones que ponen la compra en una columna estrecha: `single_bundle` (Velociraptor Pet), `badge_display` y `spaces_new`. La causa, radiografiada con qa/32-radiografia.mjs: .nitro-catalog-window .nitro-catalog-swf-gift-button .nitro-catalog-window .nitro-catalog-swf-buy-button width: 160px !important; min-width: 160px !important; Son 160 px clavados. En la maquetación normal la fila de compra mide 360 y caben de sobra; en estas tres la columna es 5/12 de la ventana y se queda en 145. El botón no encoge porque no se le ha dado permiso. ⚠️ NO BASTA CON `max-width`. En CSS el ancho usado es `max(min-width, min(max-width, width))`: el `min-width: 160px` gana a cualquier `max-width` y el botón seguiría midiendo 160. Hay que soltar los tres a la vez. Se conserva el tope de 160 px para que donde ya cabía no cambie nada. */ body .nitro-catalog-window .nitro-catalog-swf-buy-button, body .nitro-catalog-window .nitro-catalog-swf-gift-button { width: 100% !important; min-width: 0 !important; max-width: 160px; } /* ── El botón de COMPRAR desaparece en ventanas cortas (2026-08-20) ────── El defecto con una persona detrás: la noche del 2026-08-07 una usuaria en portátil no veía el botón de comprar. Bajando el zoom al 90 % apareció. POR QUÉ NADIE LO HABÍA VISTO. El auditor medía a 768, 720, 900 y 1080 de alto. Ninguno es corto, y la ventana de un portátil de Windows SÍ lo es: la interfaz del navegador se dibuja en puntos independientes de densidad, que son píxeles CSS, así que la barra de Chrome ocupa los mismos ~87 px al 150 % que al 100 %. No encoge con el escalado; encoge la pantalla a su alrededor. Un 1920×1080 al 150 % deja 720 − 48 (barra de tareas) − 87 (barra de Chrome) = 585 px de alto útil. MEDIDO con qa/53-sonda-ventana-corta.mjs, no deducido: ventana clientH scrollH sobra botón 660 467 455 — ✓ entero 640 447 455 8px ✓ (cortado 8) 620 427 455 28px ✖ DESAPARECE 600 407 455 48px ✖ 585 392 455 63px ✖ La cadena, radiografiada desde el botón hacia arriba: .nitro-catalog-layout-container overflow-y: hidden, encoge con la ventana └ div.flex.overflow-hidden 455px FIJOS ├ .nitro-catalog-color-grid-shell 70 (flex: 0 0 auto — no encoge) └ .nitro-catalog-offer-panel 377 (377 a TODAS las alturas) └ … └ el botón de comprar 28 El botón mide 28 px exactos y vive al final de esos 455. En cuanto el contenedor pierde 28, se lo traga ENTERO. Y como el contenedor es `hidden` y no `auto`, no aparece barra de desplazamiento: nada avisa de que hay algo más abajo. Para la usuaria el botón no está cortado — no existe. Y encaja con lo que pasó: a 667 px (que es lo que da una ventana de 600 al 90 % de zoom) el botón vuelve a ser alcanzable. Medido. EL ARREGLO: dejar de tirar lo que no cabe. `auto` en vez de `hidden` no recoloca nada ni cambia un píxel cuando el contenido cabe —que es el caso en las cuatro ventanas de siempre—; solo hace alcanzable lo que hoy se pierde. Es "recuperar antes que ocultar" aplicado a 48 píxeles. ⚠️ POR QUÉ VA DENTRO DE UN @media, y el número no es redondo por casualidad. `.nitro-catalog-layout-container` lo comparten las 683 páginas del catálogo. Aquí ya se dejó la página de Bots rota A PROPÓSITO por no tocar CSS de ese alcance. `max-height: 700px` acota el cambio a ventanas más bajas que CUALQUIERA de los cuatro tamaños históricos (720, 768, 900, 1080): a esos cuatro no les llega esta regla, y su "0 defectos nuevos" queda garantizado por construcción además de comprobado con una pasada completa. 700 deja margen sobre el precipicio medido (entre 640 y 620). */ @media (max-height: 700px) { body .nitro-catalog-window .nitro-catalog-layout-container { overflow-y: auto !important; } } /* ── Encargo 20: estados y ayudas que faltaban en la interfaz ──────────── El botón de compra conserva su fondo. Solo se oscurece el texto para que deje de fundirse con el gris claro; `body` gana a la hoja tardía de Nitro. No se usa !important. */ body .nitro-catalog-window .nitro-catalog-swf-buy-button, body .nitro-catalog-window .nitro-catalog-swf-buy-button * { -webkit-text-fill-color: #1a1a1a; } /* El carmesí de marca no cambia. En el estado deshabilitado de Crear Sala se reduce la opacidad y se apaga el color para que no parezca accionable. */ body .nitro-navigator-window .btn-danger:disabled, body .nitro-navigator-window .btn-danger.disabled, body .nitro-navigator-window .btn-danger.pointer-events-none, body .nitro-navigator-window .btn-danger[aria-disabled="true"], body .nitro-navigator-window [class~="pointer-events-none"][class~="opacity-[.65]"], body [class~="bg-[#a81a12]"][class~="pointer-events-none"][class~="opacity-[.65]"] { opacity: 0.42; filter: grayscale(0.8); cursor: not-allowed; } /* La barra inferior recorta lo que sobresale de ella. La capa JavaScript deja el texto en body para que el globo siempre quede visible, incluso en los iconos laterales. */ body .wanjaraku-ayuda-flotante { position: fixed; z-index: 2147483647; width: max-content; max-width: 180px; padding: 5px 8px; transform: translate(-50%, -100%); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 4px; background: rgba(20, 20, 20, 0.94); color: #fff; font-size: 12px; line-height: 1.2; text-align: center; pointer-events: none; }