/* multisala-polish.v1-20261001.css — Acabado estético final de la sala Multisala (sólo esta página).
Se enlaza como ÚLTIMA hoja del de index.html (se aplica desde el primer pintado, sin saltos). Cada selector
lleva el prefijo "html body" para conservar el desempate frente a las hojas compartidas enlazadas al final del .
Sólo presentación: no cambia textos, enlaces, IDs, clases ni lógica;
no toca .hidden/[hidden]. Orden: encabezado → portada/salas → contenido → modales → tipografía → arbitraje final.
Reversión: quitar el «Salas» y los
; cápsula en violeta oscuro de Multisala en lugar del gris de Celu Apuestas. */
@media (min-width: 981px) {
html body .site-header.ms-header .desktop-nav {
border-color: #3a2650;
background: rgba(20, 11, 30, .92);
}
html body .site-header.ms-header .desktop-nav > button,
html body .site-header.ms-header .desktop-nav > a {
font-size: 12px;
line-height: 1;
letter-spacing: .02em;
text-transform: uppercase;
white-space: nowrap;
}
}
@media (min-width: 1441px) {
html body .site-header.ms-header .desktop-nav > button,
html body .site-header.ms-header .desktop-nav > a { font-size: 13px; }
}
/* chrome-01 · Desbordes del encabezado (1024 sin sesión; 1440/1920 con sesión: #profileButton fijo en 42 px
por room-layout.css) y botones de acción con la misma altura, radio y cuerpo. */
@media (min-width: 821px) {
html body .site-header.ms-header .header-actions { flex: 0 0 auto; gap: 8px; }
html body .site-header.ms-header .deposit-button,
html body .site-header.ms-header .login-button,
html body .site-header.ms-header .register-button {
height: 44px;
min-height: 44px;
padding-inline: 16px;
border-radius: 12px;
font-size: 14px;
line-height: 1;
white-space: nowrap;
}
html body .site-header.ms-header .login-button { min-width: 0; }
}
@media (min-width: 951px) {
html body .site-header.ms-header .profile-button {
flex: 0 0 auto;
width: auto;
min-width: 44px;
height: 44px;
min-height: 44px;
padding: 0 7px;
justify-content: center;
gap: 8px;
border-radius: 12px;
}
html body .site-header.ms-header .profile-button > span { flex: 0 0 30px; width: 30px; height: 30px; }
}
@media (min-width: 1401px) {
html body .site-header.ms-header .profile-button { padding: 0 14px 0 7px; }
}
@media (min-width: 821px) and (max-width: 1280px) {
html body .site-header.ms-header .deposit-button,
html body .site-header.ms-header .login-button,
html body .site-header.ms-header .register-button { padding-inline: 12px; font-size: 13px; }
html body .site-header.ms-header .header-actions { gap: 6px; }
}
@media (min-width: 981px) and (max-width: 1180px) {
/* Glifos decorativos (aria-hidden) de la barra: sólo donde no entran; los rótulos quedan visibles. */
html body .site-header.ms-header .desktop-nav > :is(button, a) > span[aria-hidden="true"] { display: none; }
html body .site-header.ms-header .desktop-nav > button,
html body .site-header.ms-header .desktop-nav > a { padding-inline: 11px; }
html body .site-header.ms-header .brand { width: 56px; height: 56px; }
}
/* chrome-05 · Teléfono: «Iniciar sesión»/«Crear cuenta» a 9 px (≤420) y hamburguesa de 28 px con sesión. */
@media (max-width: 420px) {
html body .site-header.ms-header .login-button,
html body .site-header.ms-header .register-button { padding-inline: 9px; font-size: 11px; white-space: nowrap; }
}
@media (max-width: 900px) {
/* !important necesario: vence a .chv-account-header :is(.hamburger,.mobile-menu-toggle){flex/width/min-width:28px!important}. */
html body .site-header.ms-header.chv-account-header .hamburger {
flex: 0 0 36px !important;
width: 36px !important;
min-width: 36px !important;
}
}
/* chrome-06 (modificado) · Barra inferior: íconos que heredaban 9 px; fondo opaco en el MISMO tono
(antes rgba(12,7,18,.96): se filtraba un 4 % del contenido). */
@media (max-width: 820px) {
html body .site-header ~ .mobile-bottom-nav > button > span:first-child { font-size: 17px; }
html body > nav.mobile-bottom-nav.mobile-nav { background: #0c0712; }
}
/* chrome-07 (modificado: sólo ≥821) · Botón M: en escritorio quedaba en bottom:0 con la imagen de 88 px recortada
abajo/derecha; entre 821 y 950 flotaba a 76 px de una barra inferior que no existe.
(El hueco en el pie lo da content-02; el ajuste ≤820 se descartó: descentraba el globo de Chavito a ≤364 px.) */
@media (min-width: 821px) {
html body .multisala-actions {
right: max(22px, calc(env(safe-area-inset-right) + 8px));
bottom: max(22px, calc(env(safe-area-inset-bottom) + 8px));
}
}
/* chrome-08 · Menú del botón M: en teléfono llegaba a y≈8 sobre el encabezado; en escritorio sin tope ni
desplazamiento (a 1024×768 llegaba a y≈2). */
@media (max-width: 820px) {
html body .multisala-actions .multisala-menu {
max-height: calc(100dvh - 218px - env(safe-area-inset-bottom) - env(safe-area-inset-top));
}
}
@media (min-width: 821px) {
html body .multisala-actions .multisala-menu {
max-height: calc(100dvh - 180px);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}
}
/* chrome-11 · Ítems agregados por JS sin .action-icon («Activar notificaciones», «Guía rápida»): ícono
decorativo con la misma caja que .action-icon para alinear el texto con el resto. */
html body .multisala-menu > #multisalaPushSettings::before,
html body .multisala-menu > #multisalaTourSettings::before {
content: "";
flex: 0 0 28px;
width: 28px;
height: 28px;
border-radius: 9px;
background: rgba(255, 255, 255, .07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
}
html body .multisala-menu > #multisalaTourSettings::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
/* chrome-10 · Toast: debajo del botón M y de su globo (100 < 130), media pantalla de ancho y gris de otra
sala. Queda sobre el botón M y el menú lateral (132), debajo de los modales (140/150). */
html body #toast.toast {
z-index: 135;
width: max-content;
max-width: min(460px, calc(100vw - 32px));
border-color: #613878;
border-radius: 12px;
background: #171021;
text-wrap: balance;
color: #fffaf0;
font-weight: 650;
line-height: 1.35;
box-shadow: 0 12px 36px rgba(0, 0, 0, .6), 0 0 20px rgba(235, 39, 175, .14);
}
/* chrome-12 (modificado: 8 px, el mismo valor base de lobby-v8 en escritorio) · Aviso de cookies a 72 px del
borde entre 821 y 1024 (reserva de una barra inferior que en Multisala sólo existe ≤820).
(1,1,2) > lobby-v8 (1,1,0); html.ms-landing-open #marketingConsent.ms-consent (1,2,1) conserva lo suyo. */
@media (min-width: 821px) and (max-width: 1024px) {
html body #marketingConsent.ms-consent { bottom: calc(8px + env(safe-area-inset-bottom)); }
}
/* chrome-13 (modificado: offset 0 en la barra inferior, que tiene overflow:hidden!important) · Foco visible
homogéneo con el resto de los controles de la sala. */
html body .site-header.ms-header :is(button, a):focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
html body .mobile-bottom-nav > button:focus-visible { outline: 3px solid #fff; outline-offset: 0; }
/* =====================================================================
Área "hero" VERIFICADA: portada (.ms-hero) y grilla de salas (#salas).
Destino: multisala-polish.v1-20261001.css (última hoja de la página Multisala).
- Sin !important. Sólo clases existentes; nada sobre .hidden/[hidden]; sin animaciones.
- Competencia con lobby-v8.css (compartido, se carga en el body): sus reglas de la tarjeta FutureBet
".ms-room-grid .ms-room-card.futurebet …" son 0,3,0–0,4,1. Aquí la tarjeta FutureBet se fija con
".ms-rooms … .futurebet" (0,4,0–0,5,1), así el resultado es el mismo con la hoja en (probe) o al final (producción).
- hero-06/07/08/09 forman un conjunto: no aplicar uno sin los otros.
- Las reglas de .ms-room-card strong/span (0,3,1) prevalecen sobre las de type-08 (.ms-rooms .ms-room-card > strong/span, 0,2,1).
===================================================================== */
/* hero-01 · Ritmo vertical del titular (las cajas de texto del h1 pisaban "Tu mundo de juegos" y "En un solo lugar"). */
html body .ms-hero .ms-hero-copy > p { margin-bottom: 14px; }
html body .ms-hero .ms-hero-copy h1,
html body .ms-hero .ms-hero-copy h1 strong { line-height: 1; }
html body .ms-hero .ms-hero-copy h2 { margin-top: 14px; }
/* hero-02 · Caja Juega/Gana/Comparte/Disfruta (sólo visible >1280): centrada con el logo, separadores y eje común. */
html body .ms-hero .ms-hero-values {
align-self: center;
padding: 6px 16px;
gap: 0;
}
html body .ms-hero .ms-hero-values span {
padding: 15px 0;
border-bottom: 1px solid rgba(255, 255, 255, .08);
text-align: center;
letter-spacing: .06em;
line-height: 1.2;
}
html body .ms-hero .ms-hero-values span:last-child { border-bottom: 0; }
/* hero-03 · "Una cuenta. Todas tus salas." sin palabra huérfana (821–960). */
html body .ms-hero .ms-hero-mark span { text-wrap: balance; }
@media (min-width: 821px) and (max-width: 960px) {
html body .ms-hero .ms-hero-mark span { font-size: 14px; letter-spacing: .1em; }
}
/* hero-04 · Franja Chavito → hero igual que hero → salas → accesos (22 px). Colapsa con el margen de .ms-chavito. */
@media (min-width: 821px) {
html body .ms-hero { margin-top: 22px; }
}
/* hero-05 · "Elegí tu zona" en una línea; en ≤520 pasa a su propia línea sobre el eje del texto (34 + 13 px). */
html body .ms-rooms .ms-section-heading small { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 520px) {
html body .ms-rooms .ms-section-heading { flex-wrap: wrap; row-gap: 6px; }
html body .ms-rooms .ms-section-heading small { flex-basis: 100%; padding-left: 47px; font-size: 12px; }
}
/* hero-06 · Tarjeta de sala: franja 21:5 pegada arriba (mismo alto en las cinco), logo debajo, botón al pie. */
html body .ms-rooms .ms-room-grid .ms-room-card {
aspect-ratio: auto;
min-height: 0;
padding: 0 0 12px;
align-items: center;
justify-content: flex-start;
}
html body .ms-rooms .ms-room-grid .ms-room-card .room-banner {
position: relative;
inset: auto;
z-index: 0;
flex: none;
display: block;
width: 100%;
max-width: none;
height: auto;
aspect-ratio: 21 / 5;
margin: 0;
object-fit: cover;
object-position: 50% 50%;
opacity: .92;
-webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
mask-image: linear-gradient(180deg, #000 62%, transparent);
}
/* Celu: 8 % (no 22 %) para no cortar el "¡" de "¡JUGÁ LO NUEVO…" (el texto empieza en x=37 de 1500; 22 % recortaba desde x=53). */
html body .ms-rooms .ms-room-grid .ms-room-card.celu .room-banner { object-position: 8% 50%; }
html body .ms-rooms .ms-room-grid .ms-room-card.ganamos .room-banner { object-position: 50% 45%; }
html body .ms-rooms .ms-room-grid .ms-room-card.tio .room-banner { object-position: 70% 50%; }
html body .ms-rooms .ms-room-grid .ms-room-card.betados .room-banner { object-position: 50% 62%; }
html body .ms-rooms .ms-room-grid .ms-room-card .room-logo {
align-self: center;
flex: none;
width: calc(100% - 24px);
height: clamp(34px, 9vw, 46px);
max-height: none;
margin: 4px 12px 10px;
object-fit: contain;
object-position: center;
}
html body .ms-rooms .ms-room-grid .ms-room-card strong {
align-self: stretch;
min-width: 0;
min-height: 34px;
margin: auto 12px 0;
padding: 0 6px;
font-size: 11px;
}
@media (min-width: 1100px) {
html body .ms-rooms .ms-room-grid .ms-room-card { padding-bottom: 16px; }
html body .ms-rooms .ms-room-grid .ms-room-card .room-logo { width: calc(100% - 32px); height: 52px; margin: 6px 16px 12px; }
html body .ms-rooms .ms-room-grid .ms-room-card strong,
html body .ms-rooms .ms-room-grid .ms-room-card.futurebet strong { min-height: 40px; margin: auto 16px 0; font-size: 13px; }
}
@media (min-width: 1500px) {
html body .ms-rooms .ms-room-grid .ms-room-card .room-logo { height: 60px; }
}
/* hero-07 · Chips de lema a todo el ancho, centrados y con el mismo alto reservado. */
html body .ms-rooms .ms-room-grid .ms-room-card span {
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
max-width: none;
margin: 0 12px 10px;
padding: 4px 6px;
border-radius: 7px;
font-size: 8px;
line-height: 1.25;
letter-spacing: .02em;
text-align: center;
}
@media (min-width: 700px) {
html body .ms-rooms .ms-room-grid .ms-room-card span { min-height: calc(2.5em + 8px); }
}
@media (min-width: 1100px) {
html body .ms-rooms .ms-room-grid .ms-room-card span { margin: 0 16px 12px; font-size: 9px; }
}
@media (min-width: 1280px) {
html body .ms-rooms .ms-room-grid .ms-room-card span { min-height: calc(1.25em + 10px); font-size: 10px; }
}
/* hero-08 · Las cinco salas en una fila desde 700 px (antes 4 + FutureBet a todo el ancho con ~840 px vacíos en 1440). */
@media (min-width: 700px) {
html body .ms-rooms .ms-room-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
html body .ms-rooms .ms-room-grid .ms-room-card.futurebet { grid-column: auto; min-height: 0; }
html body .ms-rooms .ms-room-grid .ms-room-card.futurebet .room-banner {
inset: auto;
width: 100%;
height: auto;
max-width: none;
object-fit: cover;
object-position: 50% 38%;
opacity: .95;
filter: none;
}
html body .ms-rooms .ms-room-grid .ms-room-card.futurebet .room-logo {
align-self: center;
width: 60%;
height: clamp(34px, 9vw, 46px);
max-height: none;
margin: 4px 12px 10px;
object-position: center;
}
html body .ms-rooms .ms-room-grid .ms-room-card.futurebet strong {
align-self: stretch;
min-width: 0;
padding: 0 6px;
}
}
/* <700 (2 columnas): FutureBet sola en su fila con la composición horizontal de lobby-v8, ajustada a la tarjeta nueva. */
@media (max-width: 699px) {
html body .ms-rooms .ms-room-grid .ms-room-card.futurebet {
min-height: 0;
padding: 14px 12px;
align-items: flex-start;
justify-content: flex-end;
}
html body .ms-rooms .ms-room-grid .ms-room-card.futurebet .room-banner {
position: absolute;
inset: auto 2% -4% auto;
z-index: -1;
width: auto;
height: 122%;
max-width: 46%;
aspect-ratio: auto;
object-fit: contain;
opacity: .95;
-webkit-mask-image: none;
mask-image: none;
}
html body .ms-rooms .ms-room-grid .ms-room-card.futurebet .room-logo {
align-self: flex-start;
width: min(340px, 52%);
height: auto;
max-height: 58px;
margin: auto 0 10px;
object-position: left center;
}
html body .ms-rooms .ms-room-grid .ms-room-card.futurebet span {
align-self: flex-start;
display: block;
min-height: 0;
margin: 0 0 10px;
padding: 4px 8px;
}
html body .ms-rooms .ms-room-grid .ms-room-card.futurebet strong { align-self: flex-start; min-width: min(220px, 52%); margin: 0; }
}
/* hero-09 · Mismo peso visual de logos: Tío Rico recentrado (dibujo en x 23–129 de 250) y FutureBet (2:1) con caja más alta. */
html body .ms-rooms .ms-room-grid .ms-room-card.tio .room-logo { transform: scale(1.5) translateX(19.6%); }
/* Verificación: en 2 columnas anchas (≥420) scale(1.5) agrandaba el dibujo más que los otros logos y lo apoyaba sobre el
chip; desde ~560 la caja pasa de 5:1 (46 px de alto) y translateX(19,6 %) lo corría ~20 px a la derecha (699).
Escalas menores y caja con tope de 5:1 (230 = 5 × 46) para que el translate siga siendo exacto. */
@media (min-width: 420px) and (max-width: 519px) {
html body .ms-rooms .ms-room-grid .ms-room-card.tio .room-logo { transform: scale(1.3) translateX(19.6%); }
}
@media (min-width: 520px) and (max-width: 699px) {
html body .ms-rooms .ms-room-grid .ms-room-card.tio .room-logo { width: min(calc(100% - 24px), 230px); transform: scale(1.15) translateX(19.6%); }
}
@media (min-width: 1100px) {
html body .ms-rooms .ms-room-grid .ms-room-card.tio .room-logo { transform: scale(1.2) translateX(19.6%); }
html body .ms-rooms .ms-room-grid .ms-room-card.futurebet .room-logo { width: calc(100% - 32px); height: 60px; margin: 2px 16px 8px; }
}
@media (min-width: 1500px) {
html body .ms-rooms .ms-room-grid .ms-room-card.tio .room-logo { transform: scale(1.1) translateX(19.6%); }
html body .ms-rooms .ms-room-grid .ms-room-card.futurebet .room-logo { height: 68px; margin: 4px 16px 6px; }
}
/* ==========================================================================================================
Área "content" VERIFICADA (accesos, proveedores, carruseles, catálogo, servicio y pie).
Sólo las reglas aceptadas o corregidas por la verificación adversarial. Sin reglas sobre .hidden/[hidden], sin
estilos inline, sin animaciones, sin !important. Pensada para ir dentro de multisala-polish.v1-20261001.css (última
hoja del ).
========================================================================================================== */
/* ---------------------------------------------------------------- content-01 (modificado)
Se conserva el eje exterior de los carruseles (alineados con el borde de main, como el encabezado y el pie) y su
tamaño de portada. Sólo se corrigen los dos ejes sueltos:
- catálogo: relleno de 22 px contra 20 px de los demás paneles en escritorio (contenido a 2 px del resto);
- rótulo «PROVEEDORES» (riel compartido, sin marco): a 8 px del eje de los títulos de fila; queda alineado con
las barras rosas de «Lo nuevo»/«Destacados». La pista de pestañas no se toca (sus 7 px dejan lugar al foco). */
@media (min-width: 821px) {
html body main > #gamesSection.games-section { padding: 20px; }
}
html body main > section.provider-rail::before { margin-inline: 0; }
/* ---------------------------------------------------------------- content-02
Pie alineado con la columna de main (en 1920 el logo quedaba en x=48 con main en x=140). Conserva el área segura
del iPhone en horizontal y el hueco de 120 px del botón flotante M (chrome-07): al fusionar, ésta es la única regla
de padding-right del pie. El pie sólo se muestra desde 821 px. */
@media (min-width: 821px) {
html body > footer {
padding-left: max(18px, calc(env(safe-area-inset-left) + 8px), calc((100% - 1640px) / 2));
padding-right: max(18px, calc(env(safe-area-inset-right) + 8px), calc((100% - 1640px) / 2), 120px);
}
}
/* ---------------------------------------------------------------- content-03
Estados vacío y de error del catálogo: título con jerarquía (antes en el mismo gris que el texto) y separaciones
propias en lugar de los márgenes por defecto del navegador. No toca display (lo maneja .hidden). */
html body #gamesSection .empty-state { padding: 48px 16px 40px; }
html body #gamesSection .empty-state > span { display: block; font-size: 40px; line-height: 1; }
html body #gamesSection .empty-state h3 { margin: 14px 0 6px; color: var(--text, #fffaf0); font-size: 20px; line-height: 1.25; }
html body #gamesSection .empty-state p { max-width: 40ch; margin: 0 auto; color: var(--muted, #bcb3ce); line-height: 1.5; }
html body #gamesSection .empty-state .load-more { margin: 20px auto 0; }
/* ---------------------------------------------------------------- content-04 (modificado: desde 701 px)
Tableta: la grilla pasaba de 3 columnas de ~257 px a 4 de ~180 px al cruzar 820/821. Se usan 4 columnas desde
701 px (mismo corte que la pista de carruseles de lobby-v8: 5 por vista desde 701, 3 por vista hasta 700); hasta
700 px se conservan 3 columnas, que coinciden con las 3 portadas por vista del carrusel. 48 y 144 son múltiplos
de 4. */
@media (min-width: 701px) and (max-width: 820px) {
html body #gamesGrid.games-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ---------------------------------------------------------------- content-05
Buscador: celuapuestas.css pone outline:0 al campo sin reemplazo. Foco visible en la cápsula y campo a toda su
altura (23 → 40 px de área táctil). */
/* Anillo de foco: ver critic-08 (mismo lavanda que los campos de los modales). */
html body #gamesSection .search-box input { align-self: stretch; min-height: 0; }
/* ---------------------------------------------------------------- content-06
Pie: texto legal de 12 px en #777 (4,5:1, fuera de la paleta), enlaces de 21 px de alto y cortes de línea entre
821 y 1099 px. */
html body > footer > p { color: #a79fb8; font-size: 13px; line-height: 1.45; }
html body > footer nav { flex-wrap: wrap; justify-content: flex-end; gap: 0 2px; }
html body > footer nav > a,
html body > footer nav > button { min-height: 44px; display: inline-flex; align-items: center; padding: 0 7px; font-size: 14px; white-space: nowrap; cursor: pointer; }
html body > footer nav > small { padding: 0 7px; white-space: nowrap; }
/* content-x01 (extra): «Preferencias de privacidad» (botón) salía en gris neutro #bbb (celuapuestas.css «footer nav
button» gana a «footer a, footer button» de multisala-net.css) mientras los enlaces vecinos son lavanda #c6bdd3. */
html body > footer nav > button { color: #c6bdd3; }
@media (min-width: 821px) and (max-width: 1099px) {
html body > footer { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; column-gap: 20px; row-gap: 0; }
html body > footer > img { grid-row: 1 / span 2; }
html body > footer > p { grid-column: 2; margin: 0; }
html body > footer nav { grid-column: 2; justify-content: flex-start; margin-left: -7px; }
}
/* ---------------------------------------------------------------- content-08 (modificado)
«Elegí cómo jugar» en el teléfono: si una etiqueta ocupa dos líneas («Casino en vivo» a 320 px) el contenido de
esa tarjeta se centraba distinto y su ícono quedaba 7 px más arriba. Contenido anclado arriba. Mismos valores que
la regla ≤420 de type-08 (idempotentes si ambas quedan); el relleno inferior y el min-height no cambian. */
@media (max-width: 820px) {
html body .ms-live .ms-live-grid button { align-content: start; padding-top: 18px; }
}
/* =========================================================================
Multisala · acabado de modales y menús (área "modals") — VERIFICADO
Va dentro de multisala-polish.v1-20261001.css (última hoja, después de
provider-rail-design-v1.css). Sólo presentación: sin cambios de texto,
lógica, IDs ni clases; sin reglas sobre .hidden/[hidden]; sin animaciones.
Los selectores llevan ID: el resultado no depende del orden respecto de
las hojas que se enlazan al final del .
ORDEN INTERNO: el bloque de alto bajo (modals-01) va DESPUÉS de modals-02/03
porque redefine márgenes de las mismas etiquetas; el bloque tablet
(modals-15) va DESPUÉS de modals-06 porque reubica la ×.
========================================================================= */
/* ---------- modals-02 · Etiquetas CELULAR / REPETIR CONTRASEÑA ----------
`.auth-panel form>label` (celuapuestas.css) sólo alcanza a los hijos
directos del form; estos dos están dentro de #authPhoneField y
#authPasswordRepeatField: quedaban inline, 16px, blancos y pegados. */
html body #authModal #authPhoneField > label,
html body #authModal #authPasswordRepeatField > label {
display: block;
margin: 14px 0 7px;
color: #bbb;
font-size: 12px;
font-weight: 800;
line-height: normal;
}
/* ---------- modals-03 · Jerarquía del encabezado de acceso ---------- */
html body #authModal .auth-panel h2 { margin: 0 0 6px; font-size: 22px; line-height: 1.2; }
html body #authModal .auth-panel #authTitle { margin: 0 0 18px; color: var(--muted, #bcb3ce); font-size: 15px; line-height: 1.45; }
/* ---------- modals-05 · Campos de acceso: área táctil y foco visible ----------
`.input-shell input{outline:0}` (celuapuestas.css) no tenía reemplazo. */
html body #authModal .input-shell input { align-self: stretch; }
html body #authModal .input-shell:focus-within { border-color: #c790ff; box-shadow: 0 0 0 3px rgba(199, 144, 255, .28); }
html body #authModal .input-shell > button {
display: grid;
place-items: center;
min-width: 40px;
min-height: 40px;
margin-right: -9px;
padding: 0;
border-radius: 10px;
cursor: pointer;
}
html body #authModal .input-shell > button:focus-visible { outline: 2px solid #e2bbff; outline-offset: -2px; }
html body #authModal .auth-switch button { min-height: 36px; padding: 0 6px; }
/* ---------- modals-01 · Registro/acceso en pantallas bajas ----------
≤820px: `.auth-dialog{min-height:70vh}` dejaba ~140px vacíos (768x1024).
Alto ≤860px: banner de 155/104px + ritmo amplio dejaban "CREAR CUENTA"
fuera de la vista (1024x768: 88px abajo; 320x800: cortado). */
@media (max-width: 820px) {
html body #authModal.auth-dialog { min-height: 0; }
}
@media (max-height: 860px) {
html body #authModal .multisala-auth-banner { min-height: 0; padding: 12px 0; }
html body #authModal .multisala-auth-banner img { width: 68px; height: 68px; }
html body #authModal.auth-dialog .auth-panel { padding-top: 18px; padding-bottom: 22px; }
html body #authModal .auth-panel #authTitle { margin-bottom: 12px; }
html body #authModal .auth-mode-tabs { margin-bottom: 12px; }
html body #authModal .auth-mode-tab { min-height: 40px; }
html body #authModal .input-shell { height: 48px; }
html body #authModal #authForm > label,
html body #authModal #authPhoneField > label,
html body #authModal #authPasswordRepeatField > label { margin-top: 12px; margin-bottom: 6px; }
html body #authModal #ageLegalNotice { margin: 12px 0; }
html body #authModal .auth-switch { margin: 10px 0; }
html body #authModal .auth-operator { margin: 6px 0 0; }
}
/* ---------- modals-04 · Contraste AA ----------
!important SÓLO en .auth-operator: vence a `.auth-operator{color:#666!important}`
de celuapuestas.css. */
html body #authModal .auth-operator { color: #9d93ab !important; }
html body .modal > .modal-kicker { color: #c084fc; }
html body #mobileMenu > p { color: #9d93ab; }
html body #gameShell .game-shell-actions #gameClose { border-color: #ff4fa8; background: #d4006f; }
html body #paymentModal .status-orb { background: #15803d; color: #fff; }
/* ---------- modals-06 · Botón cerrar (×) con caja, alineación y foco ---------- */
html body .modal > .modal-close {
top: 18px;
right: 14px;
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border-radius: 12px;
color: #cfc6dc;
line-height: 1;
}
@media (min-width: 821px) {
html body .modal > .modal-close { top: 22px; right: 22px; }
}
html body #authModal > .modal-close { top: 12px; right: 12px; }
html body .modal > .modal-close:hover { background: rgba(255, 255, 255, .08); color: #fff; }
html body .modal > .modal-close:focus-visible,
html body #mobileMenu #mobileMenuClose:focus-visible { outline: 3px solid #e2bbff; outline-offset: 2px; }
html body #mobileMenu .mobile-menu-head > #mobileMenuClose {
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border-radius: 12px;
color: #fff;
line-height: 1;
}
/* ---------- modals-07 · Montos y DNI de la billetera: 16px (sin zoom en iOS) ---------- */
html body #walletModal form > label > input,
html body #withdrawalModal form > label > input {
border-color: #4b3460;
border-radius: 10px;
background: #0f0a15;
font-size: 16px;
font-weight: 600;
}
html body #walletModal form > label > input:focus-visible,
html body #withdrawalModal form > label > input:focus-visible { outline: 2px solid #c790ff; outline-offset: 1px; }
/* ---------- modals-08 · Ritmo vertical y "Cerrar sesión" de 44px ---------- */
html body .modal .primary-submit { display: block; }
html body #profileModal #logoutButton.danger-link {
display: block;
min-height: 44px;
margin-top: 6px;
border-radius: 12px;
font-weight: 700;
cursor: pointer;
}
html body #profileModal #logoutButton.danger-link:hover { background: rgba(255, 115, 157, .08); }
html body #profileModal #logoutButton.danger-link:focus-visible { outline: 3px solid #e2bbff; outline-offset: 2px; }
/* ---------- modals-09 · "Cargas y retiros" (inyectado por payment-shell.js, compartido)
igualado a "Cargas"/"Retiros" SÓLO en Multisala; payment-shell.css no se toca. */
html body #profileModal .ms-wallet-history {
min-height: 52px;
border: 1px solid rgba(199, 144, 255, .4);
border-radius: 14px;
background: linear-gradient(135deg, rgba(116, 54, 165, .25), rgba(33, 16, 52, .44));
color: #fff;
font: inherit;
font-weight: 800;
}
html body #profileModal .ms-wallet-history:hover { background: rgba(126, 78, 185, .3); }
html body #profileModal .ms-wallet-history:focus-visible { outline: 3px solid #e2bbff; outline-offset: 3px; }
/* ---------- modals-10 · Restos de la paleta gris de Celu en los modales ---------- */
html body #profileModal .profile-balance { align-items: center; gap: 12px; border: 1px solid #3a2850; background: #0f0a15; }
html body #paymentModal .detail-row { border-bottom-color: #2e2040; }
html body .modal .payment-warning { border-radius: 4px 12px 12px 4px; padding: 12px 14px; line-height: 1.45; }
/* ---------- modals-11 · Filas del pago con CVU/referencia largas ---------- */
html body #paymentModal .detail-row { flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
html body #paymentModal .detail-row > span { flex: 0 0 auto; color: var(--muted, #bcb3ce); }
html body #paymentModal .detail-row > strong {
min-width: 0;
max-width: 100%;
margin-left: auto;
font-variant-numeric: tabular-nums;
text-align: right;
overflow-wrap: anywhere;
}
/* ---------- modals-12 · Menú móvil: por encima del botón M y del encabezado,
desplazable en pantallas bajas, con la paleta de Multisala ----------
Queda debajo de modales (140/150), guía de instalación (190) y toast (si el
área chrome lo sube a 135). Hace redundante chrome-11 (visibility del botón M). */
html body #mobileMenuBackdrop.menu-backdrop { z-index: 131; }
html body #mobileMenu.mobile-menu {
z-index: 132;
overflow-y: auto;
overscroll-behavior: contain;
padding-bottom: calc(20px + env(safe-area-inset-bottom));
border-right: 1px solid #33224a;
background: linear-gradient(180deg, #160d22, #0f0916);
}
html body #mobileMenu .mobile-menu-head { border-bottom-color: #33224a; }
html body #mobileMenu nav > button { border-bottom-color: #2a1d38; }
html body #mobileMenu nav > button:focus-visible,
html body #mobileMenu .mobile-account > button:focus-visible { outline: 3px solid #e2bbff; outline-offset: -3px; border-radius: 10px; }
/* ---------- modals-13 · Barra del juego: título legible y centrado ---------- */
html body #gameShell .game-shell-bar { grid-template-columns: minmax(44px, 1fr) minmax(0, max-content) minmax(max-content, 1fr); }
html body #gameShell .game-shell-bar > img { justify-self: start; }
html body #gameShell .game-shell-bar > .game-shell-actions { justify-self: end; }
@media (max-width: 700px) {
html body #gameShell .game-shell-bar { grid-template-columns: 44px minmax(0, 1fr) max-content; gap: 10px; }
html body #gameShell .game-shell-bar > strong { font-size: 13px; text-align: left; }
}
/* ---------- modals-14 · "Cargando juego…" junto a su indicador ---------- */
html body #gameShell #gameLoading.game-loading { place-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center; }
html body #gameShell #gameLoading.game-loading::after { margin-left: 0; }
/* ---------- modals-15 · Tablet 600–820px: billetera/perfil/pago como tarjeta
centrada (igual que el acceso); 92dvh en teléfonos ---------- */
@media (min-width: 600px) and (max-width: 820px) {
html body #walletModal.modal,
html body #withdrawalModal.modal,
html body #paymentModal.modal,
html body #profileModal.modal {
top: 50%;
bottom: auto;
width: min(560px, calc(100vw - 48px));
max-height: calc(100vh - 48px);
max-height: calc(100dvh - 48px);
padding: 32px 30px 30px;
border-radius: 24px;
transform: translate(-50%, -50%);
}
html body #walletModal.modal-wide,
html body #withdrawalModal.modal-wide,
html body #paymentModal.modal-wide { width: min(640px, calc(100vw - 48px)); }
html body .modal > .modal-close { top: 20px; right: 20px; }
}
@media (max-width: 599px) {
@supports (height: 100dvh) {
html body #walletModal.modal, html body #withdrawalModal.modal, html body #paymentModal.modal, html body #profileModal.modal { max-height: 92dvh; }
}
}
/* ==========================================================================
Área "type" — VERIFICADO. Para multisala-polish.v1-20261001.css.
Parte A: página principal (index.html).
Parte B: páginas legales. Selectores con ámbito "body > main:first-child"
(en index.html nunca es el primer hijo de : va después del
). Sirve igual si la hoja se enlaza también en legal/*.html (último