/* ===== 072 · UNA SOLA PUBLICACIÓN (PARTY, noche del 5-oct) — solo estilos; se agregan al final para no mover lo anterior ===== */ /* Bote del equipo · «Así se reparte lo que entra»: el porcentaje manda y, si hoy hubo excedente, los BEKY van debajo en chico. */ .cg-bote-reparto .cg-interna small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--cg-texto-verde-3); } /* «AL DE LA SEMANA» no cabe en una línea a 12 px (UX-17 no deja bajar de ahí): el rótulo parte en dos y la cifra se alinea abajo. */ .cg-bote-reparto .cg-interna { display: flex; flex-direction: column; justify-content: space-between; padding: 9px 9px; } .cg-bote-reparto .cg-interna .cg-k { white-space: normal; letter-spacing: .9px; line-height: 1.25; } /* Duelos · «Esperan tu respuesta»: la tarjeta verde mide 366 px y el texto quedaba en una columna de 60 px al lado de los botones (peor cuando el botón pasa a «¿Seguro? …»). Arriba quién y qué; abajo, en su propia fila, la apuesta y los botones. */ .cg-verde .cg-reto-c { flex-wrap: wrap; } .cg-verde .cg-reto-c .cg-reto-acc { flex: 1 1 100%; flex-direction: row; justify-content: space-between; align-items: center; } /* El contador junto al título «Duelos» salía como un cuadradito rojo pegado a la letra: va como la pastilla de las pestañas. */ .cg-sec + .globo { position: static; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--cg-verde-lleno); color: var(--cg-superficie-alta); font: 800 12px/1 var(--fuente); box-shadow: none; transform: none; } .cg-sec + .globo.oculto { display: none; } .cg-duelos-pag .cg-cab-grande .cg-sec + .globo { margin-left: 2px; } /* Cabecera en celular: con un saldo de 5 cifras («MIS BEKY 40.320») la primera fila medía 393 px en una pantalla de 390 y toda la página se podía arrastrar de lado. El rótulo cede esos píxeles (menos aire entre letras) y, si aun así no cabe, se recorta él. */ @media (max-width: 430px) { .cg-cab .barra-sup-cuerpo { min-width: 0; max-width: 100%; box-sizing: border-box; } .cg-cab .cg-nav > .cg-item, .cg-cab .cg-nav > .cg-grupo > .cg-item { padding-left: 10px; padding-right: 10px; } .cg-cab .zona-marca { min-width: 0; gap: 6px; } .cg-cab .cg-marca-enlace { min-width: 0; overflow: hidden; } .cg-cab .cg-marca-txt { letter-spacing: .6px; white-space: nowrap; } } /* ===== 073 · NOCHE DE CALIDAD (F1 · app del asesor, 6-oct) — se agrega al final para no mover lo anterior. Solo estilos. ===== */ /* A-01 · El muro: una cadena sin espacios (nombre de evento, reto, mensaje) ensanchaba TODAS las tarjetas y dejaba la fecha y «Aplaudir» fuera de la caja. La rejilla de celular era `1fr` (mínimo = contenido): pasa a `minmax(0,1fr)` y el texto largo se parte donde haga falta. */ @media (max-width: 820px) { .mu-pagina .mu-muro { grid-template-columns: minmax(0, 1fr); } } .mu-pagina .mu-hito, .mu-pagina .mu-cuerpo { min-width: 0; max-width: 100%; } .mu-pagina .mu-quien, .mu-pagina .mu-acc, .mu-pagina .mu-cita, .mu-pagina .mu-rot, .mu-pagina .col .nom, .mu-pagina .mu-nom-t { min-width: 0; max-width: 100%; overflow-wrap: anywhere; } .mu-pagina .mu-pie .mu-tag { max-width: 100%; overflow-wrap: anywhere; text-align: left; } /* A-02 · Podio de «Los que mandan» en celular: tres columnas de ~99 px y una cifra de piedra de 105-133 px se montaban sobre las vecinas. Dígitos más bajos, «US$» encima de la cifra y, si aun así no cabe, la cifra baja de línea en vez de pisar. */ @media (max-width: 480px) { .mu-pagina .mu-podio, .mu-pagina .mu-podio-fila { gap: 6px; padding-left: 8px; padding-right: 8px; } .mu-pagina .col .cifra { max-width: 100%; } .mu-pagina .col .cgp-piedra { flex-wrap: wrap; justify-content: center; max-width: 100%; gap: 2px; } .mu-pagina .col .cgp-piedra .cgp-pre { flex: 0 0 100%; margin: 0 0 1px; text-align: center; font-size: 13px !important; } .mu-pagina .col .cgp-piedra img { height: 22px !important; } .mu-pagina .col .cgp-piedra i.cgp-mil { width: 4px !important; height: 4px !important; } } /* A-03 · «Escalera del día» en celular: siete peldaños en 332 px. El importe parte en dos líneas («US$» / «1.100»), sin «cobrado» repetido cuando son seis o más (la tarjeta ya dice «Llevas US$ … cobrado») y el premio también puede partir. */ @media (max-width: 480px) { .cg-nodos .cg-obj { font-size: 13px; line-height: 1.15; white-space: normal; text-align: center; margin-top: 8px; max-width: 100%; overflow-wrap: anywhere; } .cg-nodos .cg-uni { font-size: 12px; line-height: 1.15; max-width: 100%; overflow-wrap: anywhere; text-align: center; } .cg-nodos .cg-prem { font-size: 12px; line-height: 1.15; white-space: normal; text-align: center; max-width: 100%; overflow-wrap: anywhere; } .cg-nodos:has(> .cg-nodo-c:nth-child(6)) .cg-uni { display: none; } } /* A-04 · «Tu escalera de hoy» (Meta personal): siete puntos con su importe en una fila de 427 px dentro de 302-316 px. El importe parte en dos líneas y la fila nunca se sale de su tarjeta (si hubiera más escalones, se desliza). */ .cg-puntos { max-width: 100%; overflow-x: auto; padding: 4px 4px 2px; scrollbar-width: thin; } .cg-puntos .p span { width: min-content; max-width: 100%; white-space: normal; text-align: center; line-height: 1.15; } .cg-puntos .t { min-width: 4px; } /* A-08 · Ventanas: la ✕ (44 px en celular) pisaba el título centrado. */ .modal-caja h3 { padding-left: 46px; padding-right: 46px; overflow-wrap: anywhere; } /* A-06 · Tienda en celular: la pastilla de estado («PRECIO POR CONFIRMAR», «LO APRUEBA TU JEFE») era más ancha que la tarjeta. */ .articulo .pastilla { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; text-align: left; } .articulo .etiquetas { min-width: 0; } /* A-05 · «Nuevo grado» del muro en celular: la tarjeta es una columna con `flex-wrap:wrap` y el `flex:1 1 100%` del pie hacía que «Aplaudido · 1» se fuera a una segunda columna (fuera de la caja). Columna sin salto de línea, y el pie ocupa su fila. */ @media (max-width: 820px) { .mu-pagina .mu-ascenso { flex-wrap: nowrap; } .mu-pagina .mu-ascenso .mu-cuerpo { flex: 0 0 auto; width: 100%; padding-right: 0; } .mu-pagina .mu-ascenso .mu-der { flex: 0 0 auto; width: 100%; } } /* C-03 · Depósitos a plazo: el botón de dos toques («¿Seguro? US$ …») con la misma piel que los demás de dos toques (071 e). */ .cg-btn.cg-pri.confirmar, .cg-btn.cg-pri.confirmar:hover, .cg-btn.cg-pri.confirmar:focus { background: linear-gradient(180deg, rgb(138, 106, 48), rgb(94, 69, 32)); color: var(--cg-superficie-alta); border-color: transparent; } .cg-dep-confirma, .cg-dep-razon { margin-top: 12px; line-height: 1.45; } /* A-09 · Cifras de Cormorant alineadas («1:34:10», «US$ 0», «1.500»): el `font:` abreviado reinicia las cifras y varios sitios fijaban solo `tabular-nums`. El `body` ya las pide; aquí van las reglas que las pisaban. */ .pm-titulo-sec h3, .pm-marca-sup, .pm-monograma, .pm-miembro, .pm-nombre, .pm-grado b, .pm-grado span, .pm-boton-fino, .pm-credencial .club b, .pm-credencial .club span, .pm-credencial .grado b, .pm-credencial .grado span, .pm-credencial .rot, .pm-peldano b, .pm-peldano small, .pm-peldano.aqui::after, .pm-proximo .rot, .pm-proximo h4, .pm-cifras span, .pm-mes small, .pm-hojita .der .t, .pm-hojita .der .n, .pm-cert-mini .datos .rot, .pm-cert-mini .datos h4, .pm-ant-rot, .pm-logro b, .pm-hito time, .pm-colofon p, .tarjeta-grado .rot, .tarjeta-grado h3, .pm-pastilla b, .pm-cab-muro .ceja, .pm-cab-muro h2, .pc-filtro, .ascenso .tope span, .ascenso .duo .r div, .ascenso h4, .ascenso .que b, .entrada .txt p em, .mini-retrato .m div, .aviso-club p em, .pm-hoja .ceja, .pm-hoja h3, .pm-foto-fila .m div, .pm-campo label, .pm-asi small, .pm-asi p, .cg-bv-mono, .cg-per-inicial, .cg-gr-nom, .cg-gr-prox-nom, .cg-cr-hoja-n, .cg-cr-grado, .cg-retos-premio.apagada, .cg-reto-cuota, .cg-reto-cita, .cg-tmp-premio-nombre, .cg-ins-cuerpo b, .cuenta-atras, .carrete .cifra, .llam-num, .bote-uno-cifra, .bote .contador, .salas-cuenta span, #cajaSiguiente .sig-falta, .cofres-resumen-num, .salas-tope-num, .temporada-falta-num, .area-cifra .num, .boveda-dias { font-variant-numeric: lining-nums tabular-nums; } /* A-12 · Texto de 12 px como mínimo. Los rótulos en mayúsculas de las placas (coliseo_paginas.css) y los de «Mis indicadores» (indicadores.css, por eso el `body` delante: esa hoja se carga después) bajan el espaciado entre letras para que no desborden, y los que no cabían en una línea parten. */ .cgp-k { font-size: 12px; letter-spacing: 1.6px; white-space: normal; } .cgp-rot { font-size: 12px; letter-spacing: 2px; } .cgp-pie { font-size: 12px; } .cgp-cnt { font-size: 12px; min-width: 22px; height: 22px; } .cg-placa-beky { font-size: 12px; } .aviso-club .ap { font-size: 12px; } body .cg-ind-k, body .cg-ind-celda .cg-ind-k { font-size: 12px; letter-spacing: 1.4px; white-space: normal; } body .cg-ind-estado { font-size: 12px; letter-spacing: 1.4px; } body .cg-ind-nom { font-size: 12px; letter-spacing: 1.2px; } body .cg-ind-cab .rot, body .cg-isup .rot { font-size: 12px; letter-spacing: 2px; } /* A-13 · Contraste. `--cg-texto-3` (3,5:1 sobre marfil) pasa a valer lo mismo que `--tenue` (4,8:1). Debe cambiarse también en tokens.css (la paleta vive allí); mientras tanto esta línea gana por orden de carga. «PERDIDO» deja el rojo de las tarjetas (4,4:1 sobre su fondo) por el rojo apagado de la paleta. */ :root { --cg-texto-3: var(--tenue); } .cg-est.pierde { color: var(--rojo); } /* A-11 / C-09 · Controles de 40 px como mínimo en celular (los de solo icono, 40 × 40). */ @media (max-width: 820px) { .cg-cab .cg-escudo, .cg-cab .cg-escudo img { width: 40px; height: 40px; } .cg-cab .boton-campana { width: 40px; height: 40px; } .cg-cab .cg-chip { min-width: 40px; min-height: 40px; } .cg-cab .cg-chip .avatar { width: 40px; height: 40px; } } @media (max-width: 480px) { .cg-cab .cg-marca-enlace { display: inline-flex; align-items: center; min-height: 40px; } .cg-pil, .cg-jor-tab, .cg-dep-op, .cg-btn, .cg-btn-pri, .cg-btn-lin, .cg-btn.cg-chico, .boton, .boton.chico, .cg-tt-btn { min-height: 40px; } .cg-reto-c .cg-btn-pri, .cg-reto-c .cg-btn-lin { height: 40px; min-height: 40px; } .mu-pagina .mu-filtros button, .mu-pagina .mu-seg > button, .mu-pagina .mu-seg-sel, .mu-pagina .mu-aplauso, .mu-pagina .mu-btn-lin, .mu-pagina .mu-btn-mas { min-height: 40px; } .cg-ver, .cg-ver-todo, .cg-ver-claro, .cg-jor-ver { display: flex; align-items: center; min-height: 40px; padding-top: 0; } .cg-per-camara, .cg-per-lapiz { width: 40px; height: 40px; } .cgp-pestanas > a, .cgp-pestanas > button { min-height: 44px; } } @media (max-width: 480px) { .cg-tira-btn, .cg-ind-pil, .cg-sep-n.plegado, button.cg-tt-txt { min-height: 40px; } body .cg-ind-pil { min-height: 40px; } .cg-rec-link, .cg-col-ver, .mu-pagina .mu-ver, .cg-enlace, .cg-liq-ya > summary, .cg-giros-mas summary, .pf-dist-ant summary { display: inline-flex; align-items: center; min-height: 40px; padding-top: 0; padding-bottom: 0; } .cg-liq-ya > summary { display: flex; } .cg-sep-n.plegado { align-items: center; } #retoMenos.boton.chico, #retoMas.boton.chico { min-width: 40px; min-height: 40px; } .cg-accion { min-height: 40px; } } .cara-asesor.sin { font-size: max(12px, calc(var(--cara, 56px) * .36)); } /* A-13 · Textos con información que se atenuaban con `opacity` (2,5 a 3,3:1): se quita la opacidad y, donde hacía falta distinguir el estado, se atenúa solo el dibujo. */ .cat-chip .n { opacity: 1; color: var(--tenue); } .fin-nivel, .cg-fila-abierta { opacity: 1; } .cg-nv.lejos .d { opacity: 1; } .insig-filtros button .mini, .cg-tmp-bloque .insig-filtros .cg-pil .mini { opacity: 1; } .cg-pn.cerr { opacity: 1; } .cg-pn.cerr .cg-pn-ico { opacity: .72; } .cgp-cnt { color: var(--oro-claro); } .cgp-cnt.vivo { color: var(--oro-tinta); } /* A-16 · C-04 · «Canjear» sin cupo del mes: la razón se lee clara (texto fuerte, sin la atenuación de «tenue») y puede ocupar dos líneas en celular. */ #canjeNota.cg-canje-razon { color: var(--texto); font-weight: 600; line-height: 1.45; } /* A-26 · «Tu liquidación»: una frase principal en negrita y, debajo, una lista corta con viñetas (todas con punto final). */ .cg-liq-aviso p { margin: 0; font-weight: 700; color: var(--oro-claro); } .cg-liq-aviso ul { margin: 6px 0 0; padding-left: 18px; } .cg-liq-aviso li { margin: 0 0 4px; } .cg-liq-aviso li:last-child { margin-bottom: 0; } /* C-06 · el motivo por el que «Lanzar» está cerrado se lee junto al botón (a su izquierda en pantalla ancha, encima en celular). */ .cg-duelo-lanzar { align-items: center; gap: 14px; flex-wrap: wrap; } .cg-duelo-motivo { flex: 1 1 auto; text-align: right; font-size: 12px; line-height: 1.4; color: var(--texto-2); } .cg-duelo-motivo:empty { display: none; } @media (max-width: 820px) { .cg-duelo-motivo { flex-basis: 100%; text-align: left; } } /* C-10 · con el chat del equipo a la vista en su pestaña no se dibuja la burbuja flotante (no tapa «Enviar» en celular). */ body.chat-en-pestana #chatBurbuja { display: none; } /* A-21 · Radios al sistema de dos (10 px / 7 px): lo que tenía 12, 9 u 8 px pasa a 10 px y lo que tenía 4, 5 o 6 px a 7 px. Quedan fuera, a propósito: las píldoras de filtro y pestañas (999 px), los círculos, las barras finas de progreso, el marco de las fotos (`.marco`) y la hoja de la credencial (`.cg-cr-hoja`, que imita un documento). */ .cg-pagina, .cg-fin, .cg-per, .mu-pagina, .party-bloque.cg-pagina { border-radius: var(--r); } .cg-dep-plazo, .cg-esc-c, .cg-ins-c, .cg-pn, .cg-nota-v, .cg-mes-frase, .cg-bv-franja, .banda-evento-cuerpo { border-radius: var(--r); } body .cg-ind-aviso { border-radius: var(--r); } .cg-tag, .cg-est, .cg-xtr-id, .mu-pagina .mu-tag, .mu-pagina .tu, .mu-pagina .mu-nuevo { border-radius: var(--r-s); } body .cg-ind-tag { border-radius: var(--r-s); } /* A-22 · Los globos numéricos de las insignias (campana, chat, menú) heredan la tipografía de la app: los botones no la heredan solos y salían en Arial. */ .globo, .chat-boton .globo, .boton-campana .globo { font-family: var(--fuente); } /* A-25 · La marquesina del jackpot baja a verde de la cabecera (no casi negro): el mismo degradado, con --tapete-fieltro-3. */ .marquesina { background: linear-gradient(180deg, var(--superficie-2), var(--tapete-fieltro-3) 70%); } /* C-19 · La «×» de los buscadores deja de ser la azul nativa del navegador: una propia, en bronce. */ input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin: 0 0 0 6px; cursor: pointer; background: url("data:image/svg+xml;utf8,") center / 12px 12px no-repeat; } /* C-23 · Los cuadros de texto solo crecen hacia abajo y nunca más allá del marco de su tarjeta. */ textarea { resize: vertical; max-width: 100%; } /* A-27 · El selector de archivo nativo con el botón de contorno bronce del resto de la app. */ input[type="file"] { padding: 6px 8px; font-size: 13px; color: var(--texto-2); } input[type="file"]::file-selector-button { margin: 0 12px 0 0; height: 36px; padding: 0 16px; border-radius: var(--r-s); cursor: pointer; border: 1px solid var(--linea-2); background: transparent; color: var(--oro); font: 700 13px/1 var(--fuente); } input[type="file"]::file-selector-button:hover { border-color: var(--oro); background: var(--oro-a); } /* A-24 · «Tu jornada» (Mi panel), «Logros» (El muro) y las listas de Duelos ya no se estiran hasta la altura de su vecina (dejaban 240 a 650 px en blanco): cada tarjeta mide lo que su contenido. Solo en pantalla ancha, donde van en fila; en celular van en columna. */ @media (min-width: 1101px) { #cgFila2, .mu-pagina .mu-fila2, .cg-duelos-listas { align-items: flex-start; } } /* A-13 · Dos textos que quedaban bajo 4,5:1: «PERDIDO» (dentro de `.cg-sup` el `--rojo` cambia a un tono más claro, así que se usa `--cg-mal`) y «precio por confirmar» (bronce claro sobre marfil, 2,7:1). */ .cg-est.pierde { color: var(--cg-mal); } .pastilla.amarillo { color: var(--ambar); } /* ========================================================================== 076 · TODOS LOS EVENTOS DEL ASESOR EN EL INICIO (Óscar, 6-oct-2026) La banda mostraba un solo evento. Ahora es una lista dentro de la MISMA banda: una fila por evento, con su sello (×2 o +200 BEKY), a quién aplica, su avance y su reloj. Con un evento se ve como antes. Solo medidas y tokens: ningún color suelto. ========================================================================== */ .banda-evento-cuerpo.cg-evs { display: block; padding: 0; } .cg-ev { display: flex; align-items: center; gap: 18px; padding: 14px 20px; min-width: 0; } .cg-ev + .cg-ev { border-top: 1px solid var(--cg-linea); } .cg-ev > .multiplicador { flex: 0 0 96px; text-align: center; animation: none; } .cg-ev-extra { font-size: 34px; line-height: 1; } .cg-ev-extra small { display: block; margin-top: 4px; font: 700 12px var(--fuente); letter-spacing: .14em; color: var(--cg-bronce-osc); } .cg-ev-rayo { display: flex; justify-content: center; } .cg-ev-txt { flex: 1 1 200px; min-width: 0; } .cg-ev-k { color: var(--oro); } .cg-ev-nombre { font-size: 30px; line-height: 1.02; margin-top: 2px; overflow-wrap: anywhere; } .cg-ev-msj { margin-top: 4px; overflow-wrap: anywhere; } .cg-ev-avance { display: flex; align-items: center; gap: 10px; margin-top: 7px; max-width: 320px; } .cg-ev-avance .barra.fina { flex: 1 1 auto; height: 4px; margin: 0; } .cg-ev-avance .mini { flex: 0 0 auto; white-space: nowrap; } .cg-ev > .cuenta-atras { flex: 0 0 auto; } .cg-ev-pronto > .multiplicador, .cg-ev-pronto .cg-ev-nombre { opacity: .72; } /* Con varios eventos, cada fila es más baja: caben tres sin empujar «Tu actividad» fuera de la pantalla. */ .cg-evs:not([data-n="1"]) .cg-ev { padding-top: 11px; padding-bottom: 11px; } .cg-evs:not([data-n="1"]) .cg-ev-nombre { font-size: 24px; } .cg-evs:not([data-n="1"]) .cg-ev > .multiplicador:not(.cg-ev-extra) { font-size: 38px; } .cg-evs:not([data-n="1"]) .cg-ev-extra { font-size: 28px; } .cg-evs:not([data-n="1"]) .cg-ev > .cuenta-atras { font-size: 24px; } /* La meta que es solo de este asesor lleva un filete verde: se distingue de las del equipo sin leer. */ .cg-ev-mio { box-shadow: inset 3px 0 0 var(--cg-verde); } @media (max-width: 700px) { .cg-ev { flex-wrap: wrap; gap: 4px 12px; padding: 12px 14px; align-items: flex-start; } .cg-ev > .multiplicador { flex-basis: 62px; font-size: 30px; padding-top: 4px; } .cg-ev-extra, .cg-evs:not([data-n="1"]) .cg-ev-extra { font-size: 22px; } .cg-evs:not([data-n="1"]) .cg-ev > .multiplicador:not(.cg-ev-extra) { font-size: 30px; } .cg-ev-txt { flex-basis: 0; } .cg-ev-nombre, .cg-evs:not([data-n="1"]) .cg-ev-nombre { font-size: 20px; line-height: 1.08; } /* El reloj baja a su propia línea, alineado con el texto: «termina en 2:13:40» de corrido. */ .cg-ev > .cuenta-atras, .cg-evs:not([data-n="1"]) .cg-ev > .cuenta-atras { flex: 0 0 100%; margin: 2px 0 0; padding-left: 74px; text-align: left; display: flex; align-items: baseline; gap: 8px; font-size: 20px; } } /* ========================================================================== 077 · DEPÓSITOS A PLAZO: DE DÓNDE SALE EL DINERO (José, 6-oct-2026) La pantalla solo dejaba depositar con BEKY; José aprobó BEKY y transferencia. Dos botones en el panel verde, la fila que «espera su transferencia» y la salida de cada depósito (cancelar / retirar antes de vencer). Solo medidas y tokens: ningún color suelto. ========================================================================== */ .cg-dep-orig-k { margin-top: 16px; } .cg-dep-origs { display: flex; gap: 8px; margin-top: 2px; } .cg-dep-orig { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 8px 10px; border-radius: 7px; cursor: pointer; font: 700 13px var(--fuente); color: var(--cg-texto-verde-2); background: color-mix(in srgb, var(--cg-texto) 38%, transparent); border: 1px solid color-mix(in srgb, var(--cg-bronce) 28%, transparent); } .cg-dep-orig.on { color: var(--cg-marfil); border-color: var(--cg-bronce-claro); background: color-mix(in srgb, var(--cg-bronce-claro) 14%, transparent); box-shadow: inset 0 0 0 1px var(--cg-bronce-claro); } .cg-dep-orig:focus-visible { outline: 2px solid var(--cg-bronce-claro); outline-offset: 2px; } .cg-dep-salida { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--cg-texto-2); } .cg-dep-salida b { color: var(--cg-texto); } .cg-dep-salida b.cg-dep-bronce { color: var(--cg-bronce-osc); } button.cg-dep-op.confirmar { border-color: var(--cg-bronce-osc); color: var(--cg-bronce-osc); box-shadow: inset 0 0 0 1px var(--cg-bronce-osc); } @media (max-width: 900px) { .cg-dep-orig { min-height: 44px; } } /* ===== 075 · NOCHE DE CALIDAD, segunda pasada (G2 · app del asesor, 6-oct) — coherencia, sin rediseñar. Solo estilos; se agrega al final. ===== */ /* A-18 · Botones: el primario bronce (`.boton.oro`, `.cg-btn-pri`, `.cg-btn.cg-pri`) y el de contorno (`.cg-btn-lin`, `.cg-btn.cg-lin`, `.boton.chico`, `.cg-tt-btn`, `.mu-btn-lin`) miden lo mismo en toda la app: radio 7 px, 13 px de letra y 40 px de alto (44 px en pantallas táctiles, el mismo corte de 900 px que ya usa este archivo). Quedan fuera, a propósito: los «grandes» (`.grande`, girar la ruleta, la palanca), los de solo icono (− / +) y «Enviar» del chat (44 px: va pegado a su campo, que mide eso). El `:where()` deja la base con el peso de `.boton` a secas: las reglas propias de cada mesa de juego siguen mandando. */ .boton:where(:not(.grande, .palanca)) { min-height: 40px; padding: 8px 18px; border-radius: var(--r-s); font-size: 13px; line-height: 1.2; } .boton.chico { min-height: 40px; padding: 8px 14px; font-size: 13px; } .articulo .acciones .boton, .articulo > .boton { min-height: 40px; } .cg-btn-pri, .cg-btn-lin, .cg-btn, .cg-btn.cg-chico, .cg-tt-btn, .cg-pn-btn, .mu-pagina .mu-btn-lin, .mu-pagina .mu-btn-mas { min-height: 40px; } .cg-btn.cg-chico, .cg-tt-btn, .cg-pn-btn { font-size: 13px; } .cg-btn.cg-chico { padding: 0 14px; } .cg-reto-c .cg-btn-pri, .cg-reto-c .cg-btn-lin { height: 40px; min-height: 40px; } .cg-cofre .cg-btn-pri { min-height: 40px; } .cg-duelo-lanzar .cg-btn-pri { height: 40px; } .cg-sel-v { height: 40px; } @media (max-width: 900px) { .boton:where(:not(.grande, .palanca)), .boton.chico, .articulo .acciones .boton, .articulo > .boton { min-height: 44px; } .cg-btn-pri, .cg-btn-lin, .cg-btn, .cg-btn.cg-chico, .cg-tt-btn, .cg-pn-btn, .mu-pagina .mu-btn-lin, .mu-pagina .mu-btn-mas, .cg-cofre .cg-btn-pri { min-height: 44px; } .cg-reto-c .cg-btn-pri, .cg-reto-c .cg-btn-lin, .cg-duelo-lanzar .cg-btn-pri { height: 44px; min-height: 44px; } .cg-sel-v { height: 44px; } } /* A-17 · Píldoras de filtro (no se tocan las pestañas «carpeta»): `.cg-pil`, `.cg-jor-tab`, las cápsulas y los filtros del muro, y las de la Tienda (`#navTienda`, `.cat-chip`) comparten alto (36 px; 44 px en pantallas táctiles: el mínimo que `a11y_018` vigila en `.cat-chip`), letra (13 px) y peso (600; la activa, 700). Sobre fondo marfil la activa es siempre la misma: verde oscuro con texto claro (la Tienda deja el degradado bronce). Las cápsulas del muro van sobre verde y conservan su activa en marfil. */ .cg-pil, .cg-jor-tab, .cat-chip, #navTienda button, .cg-tmp-bloque .insig-filtros .cg-pil, .mu-pagina .mu-filtros button, .mu-pagina .mu-seg > button, .mu-pagina .mu-seg-sel { min-height: 36px; padding-top: 0; padding-bottom: 0; font-size: 13px; font-weight: 600; line-height: 1.2; } .cat-chip, #navTienda button { background: transparent; border-color: color-mix(in srgb, var(--cg-bronce-osc) 35%, transparent); color: var(--cg-texto-2); box-shadow: none; } .cat-chip:hover, #navTienda button:hover { border-color: var(--cg-bronce-osc); color: var(--cg-texto); } .cg-pil.on, .cg-jor-tab.activo, .mu-pagina .mu-filtros button.on, .cat-chip.activo, .cat-chip.activo:hover, #navTienda button.activo, #navTienda button.activo:hover, .cg-tmp-bloque .insig-filtros .cg-pil.on { background: var(--cg-verde); border-color: var(--cg-verde); color: var(--cg-bronce-claro); font-weight: 700; box-shadow: none; } .mu-pagina .mu-seg > button.on, .mu-pagina .mu-seg-sel.on { font-weight: 700; } #navTienda button.activo .globo { background: var(--cg-bronce-claro); color: var(--cg-verde); } @media (max-width: 900px) { .cg-pil, .cg-jor-tab, .cat-chip, #navTienda button, .cg-tmp-bloque .insig-filtros .cg-pil, .mu-pagina .mu-filtros button, .mu-pagina .mu-seg > button, .mu-pagina .mu-seg-sel { min-height: 44px; } } /* A-20 · Títulos de sección en Cormorant: dos tamaños y nada más, en todos los anchos. Nivel 1 (28 px): el título de una sección o de la tarjeta que manda en su pestaña. Nivel 2 (22 px): el de un bloque o cajita dentro de una sección. Los títulos de portada (`h1`, héroes) no se tocan. Los que llevaban el tamaño escrito en el HTML (Depósitos a plazo) lo pierden en casino.js y app.html: los de nivel 2 llevan `.cg-sec-2`. */ :root { --cg-tit-1: 28px; --cg-tit-2: 22px; } .cg-sec, .cg-act-tit, .cg-cab-grande .cg-sec, .cg-retos-cab .cg-sec, .cg-tmp-id .cg-sec, .cg-ruta-nombre, .cg-cofres-izq .cg-sec, .cg-duelos-form .cg-sec, .cg-bote-izq .cg-sec, .cg-bote-misiones .cg-sec, .mu-pagina .mu-sec, .mu-pagina .mu-cab-grande .mu-sec, .mu-pagina .mu-arena-cab h2, .tarjeta-cab h2, .pf-sec-cab h2, .cg-tmp-premio-nombre { font-size: var(--cg-tit-1); } body .cg-ind-cab h2 { font-size: var(--cg-tit-1); } .cg-sec.cg-sec-2, .cg-cofres-izq .cg-cab-fragmentos .cg-sec, .cg-duelos-lista .cg-sec, .cg-chat-izq .cg-sec, .cg-ins-caja-cab .cg-sec, .cg-ay-sec2, .mu-pagina .mu-logros-caja .mu-sec { font-size: var(--cg-tit-2); } body .cg-ind-cab.chica h2 { font-size: var(--cg-tit-2); } /* A-24 · «Temporada»: la tarjeta de la izquierda se estira a la altura del premio y dejaba ≈ 70 px vacíos al pie. Con `align-items:start` las dos tarjetas quedarían de alturas distintas (descuadra); en su lugar las dos cajitas («El pase», «Insignias») crecen hasta el pie. */ @media (min-width: 1101px) { .cg-tmp-id.cg-piedra-fondo { display: flex; flex-direction: column; } .cg-tmp-id.cg-piedra-fondo .cg-tmp-cajitas { flex: 1 1 auto; } .cg-tmp-id.cg-piedra-fondo .cg-interna-c { display: flex; flex-direction: column; justify-content: center; } } /* Mi ruta en celular y tableta: el rótulo de cada tarjeta (la descripción de la campaña, en mayúsculas) se cortaba con «…» («DÓLARES COBRADOS Y VERIFI…»). Baja a dos o tres renglones (tope de tres, por si la descripción es muy larga), y la frase de debajo de «En camino» parte en vez de llegar al borde de la tarjeta (su caja no encogía dentro de la fila). */ .cg-ruta-esp > div { min-width: 0; } @media (max-width: 820px) { .cg-ruta-card .campana-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; white-space: normal; overflow: hidden; text-overflow: clip; overflow-wrap: anywhere; } .cg-ruta-card > .cg-ruta-cab .cg-ruta-k.campana-desc { letter-spacing: 1.6px; line-height: 1.4; } .cg-ruta-card .cg-ruta-esp .campana-desc { -webkit-line-clamp: 4; line-clamp: 4; line-height: 1.45; } } /* «Tu constancia»: «DÍAS SEGUIDOS» y «TU RACHA PAGA» a la misma altura. El bloque de la derecha deja de ser una celda de dos filas centrada: su rótulo va en la fila de los rótulos y su cifra en la de las cifras. */ .cg-racha-fila { grid-template-areas: "llama etq pagak" "llama dias pagav" "estado estado estado"; } .cg-racha-paga { display: contents; } .cg-racha-paga .cg-k { grid-area: pagak; align-self: end; margin: 0; text-align: right; } #cajaRacha .racha-mult { grid-area: pagav; align-self: start; text-align: right; } /* Tableta (768 px): las seis pestañas de Global Party pasaban 54 px del ancho y «Bote del equipo» quedaba cortada; con menos relleno caben las seis. Y la descripción de cada artículo de la Tienda (un renglón con «…», completa solo por `title`, que en pantalla táctil no existe) baja a dos. */ @media (min-width: 601px) and (max-width: 900px) { .cgp-pestanas > a, .cgp-pestanas > button { padding: 0 9px; gap: 7px; } } @media (max-width: 900px) { .articulo-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow-wrap: anywhere; } } /* A-17 en celular: con 13 px las cápsulas del muro («Por dólares · Por matrículas · Otra medida ▾») pasaban unos píxeles del ancho; menos relleno y caben. */ @media (max-width: 480px) { .mu-pagina .mu-seg > button, .mu-pagina .mu-seg-sel { padding-left: 7px; padding-right: 7px; } } /* ---- 075 · cierre de la noche: lo que marcó la regresión final (R1) ------------------------------------ Menú de la cuenta sin emojis y con su contador en píldora; cierre del chat tocable; «Giro gratis» con el alto de los demás botones; rótulos de «Tus duelos» y la línea de vida de los bonos sin salirse en celular; Solo medidas y tokens: ningún color suelto. */ .menu-lista button { min-height: 40px; } .menu-lista .globo { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .noti-ico { display: inline-flex; align-items: center; color: var(--oro); } .chat-icono { min-width: 40px; min-height: 40px; } #tmGratis { min-height: 40px; } .cg-interna .cg-k { white-space: normal; overflow-wrap: anywhere; } @media (max-width: 900px) { .menu-lista button, #tmGratis { min-height: 44px; } .chat-icono { min-width: 44px; min-height: 44px; } } @media (max-width: 480px) { .cg-interna { min-width: 0; } .cg-interna .cg-k { letter-spacing: .6px; } .cg-vida { min-width: 0; } .cg-vida .cg-p { letter-spacing: 0; } .cg-vida .cg-t { min-width: 10px; } } /* P-64 · simulador «¿Cuánto cobro si vendo más?» */ .fin-sim { margin: 4px 0 14px; border: 1px solid var(--linea-suave); border-radius: var(--r-md); padding: 10px 12px; } .fin-sim > summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .fin-sim-cuerpo { display: grid; gap: 8px; margin-top: 10px; } .fin-sim-barra { display: flex; align-items: center; gap: 12px; } .fin-sim-barra input[type=range] { flex: 1 1 auto; min-width: 0; min-height: 40px; accent-color: var(--oro); } .fin-sim-barra output { min-width: 96px; text-align: right; font-weight: 700; } .fin-sim-tabla { width: 100%; border-collapse: collapse; } .fin-sim-tabla td { padding: 6px 4px; border-bottom: 1px solid var(--linea-suave); } .fin-sim-tabla td.num { text-align: right; white-space: nowrap; } .fin-sim-tabla tr.tot td { font-weight: 800; border-bottom: 0; } .fin-sim-rango { padding: 8px 10px; border-radius: var(--r-md); background: var(--superficie-2, rgba(179,148,92,.12)); } /* P64 · A3 · iconos de línea propios (iconoLinea() de comun.js): miden lo que el texto de al lado y heredan su color. */ .ico-l { display: inline-block; width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }