) para
no dejar un hueco y que las demás pills ocupen el espacio. */
.menu-desk .nav-item:has(.gz-pill-avatar:empty) { display: none; }
/* ── Header: alto reservado ───────────────────────────────────────────────
El header se arma con contenido que llega en momentos distintos: gg.js
revela .logg o .no-logg recién cuando resuelve el JWT, getBalance() muestra
.money cuando responde la API y el avatar de Gamanza se rellena después.
Sin un alto reservado el header arranca en 8px (solo su padding) y va
saltando hasta ~78px, empujando toda la página en cada paso.
Los valores son el alto MEDIDO del estado más alto de cada breakpoint con
todo el contenido ya cargado, y ya incluyen el padding (box-sizing es
border-box en todo el sitio):
> 600px logueado 69.73px · deslogueado 44px -> 70px
<=600px logueado 54.09px · deslogueado 44px -> 55px
Los valores bajaron respecto de los 78/59 originales al quitarle al header el
padding vertical: antes sumaba 8px arriba (4.8px en móvil) al alto de la fila.
El logo es un wordmark de 119x66 que renderiza a 36px (44 con su pt-2); con el
logo cuadrado de 64px que había antes, el estado deslogueado en móvil era el
más alto y la reserva la fijaba él.
Es min-height, no height: si algún día el contenido crece, el header crece
con él en vez de recortarlo.
Queda FUERA el banner #app-installer (47px): lo inyecta pwa-services.js
dentro del , solo en index.html, y el usuario puede cerrarlo —
reservar su alto dejaría una franja vacía al descartarlo. */
.header { min-height: var(--gg-header-h, 70px); }
@media (max-width: 600px) {
.header { --gg-header-h: 55px; }
}
/* ── Header: la banda de 992-1000px se quedaba sin nav ──────────────────────
La columna del nav desktop es `col-auto col-lg-4 theme-container menu-desk`
y la esconden dos reglas con cortes distintos:
.theme-container display:none a <=1000px
.menu-desk display:none a <=991px
Los iconos móviles de al lado (campana + avatar) usan el `d-lg-none` de
Bootstrap, que esconde a >=992px. Entre 992 y 1000px, entonces, no se veía
ninguno de los dos: el header quedaba sólo con la hamburguesa y el saldo,
sin acceso a notificaciones ni al panel de Gamanza. Medido en slot.html:
a 1001px y a 991px se ve una campana, a 992px y a 1000px cero.
No se cambia el breakpoint de `.theme-container` porque no es sólo del
header: nació envolviendo el switch Light/Dark y sigue haciéndolo en
history_games.html y questions.html, donde ese corte a 1000px sí se quiere.
Por eso el arreglo se acota a la combinación con `.menu-desk` y sólo dentro
de la banda, dejando que `.menu-desk` siga gobernando de 991px para abajo. */
@media (min-width: 992px) and (max-width: 1000px) {
.theme-container.menu-desk { display: flex; }
}
/* ── Header: centrar verticalmente el logo del estado deslogueado ──────────
La columna del logo es un `.col-auto` (display:block) dentro de un `.row`
(flex, align-items por defecto = stretch), así que se estira al alto de la
fila y la , al ser inline, queda pegada arriba: con el wordmark de 36px
en una fila de 48px daba 0px de aire arriba y 12.5px abajo. La columna
hermana (Entra/Registrate) sí traía `d-flex align-items-center` en el HTML;
esta no. Se centra por CSS para no tocar las 14 páginas, y con `flex` en vez
de `block` para que además desaparezca el leading de la línea de texto que
la inline arrastra debajo. */
.header .no-logg > .row > .col-auto:first-child {
display: flex;
align-items: center;
}
/* ── Header: no heredar la tipografía de la página ─────────────────────────
El vive dentro de , así que cualquier página que le ponga
una fuente propia a `main` se la impone también al header compartido.
Pasa en tags.html (`.tags-page main { font-family: 'Outfit' }`) y en
provider.html (`.providers-page`): con Outfit el rótulo "Mi saldo:" pasa de
18.5px a 20px de alto y el header entero de 59 a 60.39px en móvil, o sea
que se pasaba del alto reservado y quedaba más alto que en las otras 12.
Se fija la fuente del body para que el header se vea igual en las 14. */
.header { font-family: "Open Sans", sans-serif; }
/* ── Header: sin padding vertical ──────────────────────────────────────────
Se quita en el origen, no con un override encima: convivían `padding:.5rem
1.5rem` (la regla principal) y `padding-bottom:0!important` (heredado del
viejo _header.scss). Con el bottom forzado a 0 y el top en 8px, el contenido
se centraba dentro de un content box corrido y todo el header quedaba
empujado hacia abajo: 24px de aire arriba contra 16px abajo en desktop, y
12.9 contra 8.1 en móvil.
Va 0 arriba y abajo, no 8px en ambos: sumar padding vertical haría crecer el
alto intrínseco del estado logueado (69.23 + 16 = 85.23px) por encima de los
78px reservados. Con 0/0 el contenido se centra en la caja completa gracias
al align-items:center que el header ya trae, y el alto no se mueve.
El padding horizontal se conserva: 1.5rem, .3rem en <=600px. */
/* ─────────────────────────────────────────────────────────────────────────────
F1 — carrusel de proveedores compacto en móvil
El carrusel se declaraba en 124px sin ninguna media query, así que en un
teléfono de 390px se comía 124 de los ~160px de la cabecera de sección: casi
una quinta parte de la pantalla para elegir proveedor, antes de ver un solo
juego. Baja a 68px.
La cadena real es .swiper > .swiper-wrapper > div.provider.swiper-slide > img
y hay dos reglas compitiendo por el tamaño del logo: la de .swiper-slide img
(120px fijos) le gana a .provider img (90%). Por eso se fija el píxel acá
también, si no el logo seguiría en 120 dentro de una casilla de 68.
El logo va a 62 de 68 (91%) en vez del 96,8% de hoy: a este tamaño un par de
píxeles más de aire evita que el logo toque el borde redondeado.
Las flechas miden 44px, que en un carrusel de 68 son el 65% del alto y
dominan la fila. Bajan a 24; en teléfono igual se navega deslizando, pero se
dejan como pista de que hay más al costado.
────────────────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
.swiper { height: 68px; }
.swiper-wrapper .swiper-slide,
.provider { width: 68px; height: 68px; }
.swiper-wrapper .swiper-slide img { width: 62px; height: 62px; }
.provider { border-radius: .4rem; }
/* el sitio declara `* { box-sizing: content-box }`, así que el padding SUMA
al ancho: con .15rem el logo terminaba ocupando 67 de los 68 y tocaba el
borde. Sin padding quedan los 62 buscados, con 3px de aire por lado. */
.provider img { padding: 0; }
.swiper-button-prev,
.swiper-button-next { --swiper-navigation-size: 24px; }
}
/* ─────────────────────────────────────────────────────────────────────────────
F1 — pills de tags: sólidas y vivas, pero con un sistema detrás
El tema del sitio es de colores plenos, así que las pills van sólidas. Lo que
se corrige no es que fueran vivas: es que el color lo elegía cada página a
mano y el mismo tag no coincidía entre una y otra.
Populares -> slot: btn-danger
mini y scratch: btn-danger fw-bolder text-dark
FreeSpins -> slot: btn-secondary fw-bolder text-dark
mini: btn-info text-warning (azul con texto amarillo)
Y el seleccionado pintaba el fondo de #f60 pero dejaba el color del TEXTO a
cargo de la clase Bootstrap de cada pill, así que la pill activa se veía
distinta según qué color le había tocado.
Ahora el color significa algo y es el mismo en las cinco páginas:
celeste tag común
verde destacado (Populares, FreeSpins)
amarillo Favoritos, que no es un tag sino un modo
naranja seleccionado, encima de cualquiera de los tres
Los cuatro llevan texto oscuro. No es una decisión estética sino de
contraste: son fondos claros y saturados, y el texto oscuro da entre 6,5:1 y
10,9:1, todos por encima del mínimo AA. La combinación que parecía natural
-blanco sobre el naranja- da 2,9:1 y no pasa; por eso el activo también lo
lleva oscuro.
────────────────────────────────────────────────────────────────────────── */
.section .tags .tag-item .btn.tag-chip {
color: #10131a;
border: 0;
font-weight: 700;
padding: .35rem .9rem;
transition: filter .15s ease, transform .15s ease;
}
.section .tags .tag-item .btn.tag-chip:hover { filter: brightness(1.12); transform: translateY(-1px); }
/* Los siete matices salen del logo: se sacaron decodificando logo-300.png y
agrupando por matiz los píxeles opacos y saturados, no eligiéndolos a ojo.
Son las familias con más presencia (rojo 16%, verde 12%, naranja 10%,
menta 8%, ámbar 8%, rosa 8%, azul 7%).
El color del texto de cada uno es el que mide mejor contraste, y por eso no
es el mismo en todos: sobre el rojo y el azul profundo gana el blanco, sobre
los cinco claros gana el oscuro. Todos quedan sobre 4,5:1. */
.section .tags .tag-item .btn.tag-c1 { background-color: #e3101a; color: #fff; } /* rojo */
.section .tags .tag-item .btn.tag-c2 { background-color: #db7914; } /* mandarina */
.section .tags .tag-item .btn.tag-c3 { background-color: #06d809; } /* verde */
.section .tags .tag-item .btn.tag-c4 { background-color: #05eca6; } /* menta */
.section .tags .tag-item .btn.tag-c5 { background-color: #034579; color: #fff; } /* azul */
.section .tags .tag-item .btn.tag-c6 { background-color: #f92059; } /* rosa */
.section .tags .tag-item .btn.tag-c7 { background-color: #07adac; } /* turquesa */
/* Favoritos queda fuera de la rotación: no es un tag sino un modo, y conviene
que su color no se repita en ningún otro. */
.section .tags .tag-item .btn.tag-chip-fav { background-color: #eaa918; color: #2a1f00; }
/* Seleccionado. Con cada pill de un color distinto, el matiz ya no puede
señalar nada -pintar la activa de naranja la volvería indistinguible de la
mandarina de al lado-, así que el estado se marca sin tocar el color: aro
claro, un poco más grande y con más brillo, y las demás se atenúan.
Se probó además atenuar las no activas, y quedaba peor: con opacity .55 la
fila entera se veía lavada, que es lo contrario de lo que se busca acá. El
aro solo alcanza. */
.section .tags .tag-item .btn.active,
.section .tags .tag-item .btn.tag-chip.active {
box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 4px 12px rgba(0, 0, 0, .35);
filter: brightness(1.1) saturate(1.15);
transform: scale(1.06);
}
/* La fila de tags nacía pegada a la de filtros y sin fondo propio. Lo segundo
no era solo estético: el contenedor es sticky, así que las cards le pasan por
debajo y se veían a través de las pastillas al hacer scroll.
La separación con la fila de arriba va POR DENTRO, con padding. Se probó con
margen y quedaba mal: el margen es transparente, así que el hueco entre las
dos filas se convertía en una ventana por la que se veían pasar las cards.
Con padding, el fondo cubre también esa separación y el bloque pegado se lee
entero.
Y el fondo es sólido, no translúcido. Translúcido dejaba ver el movimiento de
las portadas detrás de las pastillas; con las siete de colores encima, ese
fondo inquieto le restaba legibilidad justo a lo que hay que leer. Sólido
además evita el costo del desenfoque en una barra que se repinta en cada
scroll.
El color es el del propio cuerpo de la página, así la fila no se lee como una
barra aparte: se funde con el fondo y lo único que flota son las pastillas.
Se toma de la variable del tema en vez de escribir #007588 a mano, para que
siga al tema si algún día cambia. */
.section .section-subheader {
padding-top: 1rem;
padding-bottom: .7rem;
background-color: var(--gogoroyal-theme-body-background, #007588);
}
/* ─────────────────────────────────────────────────────────────────────────────
F1 — filtro de proveedor con búsqueda, a la misma altura que el buscador
El