/* tioricojuegos-polish.v1-20261001.css — Acabado estético final de la sala tioricojuegos (sólo esta sala; no la cargan las otras).
   Se enlaza como ÚLTIMA hoja del <head> de su index.html (se aplica desde el primer pintado, sin saltos de diseño).
   Cada selector lleva el prefijo "html body" para conservar el desempate frente a las hojas compartidas enlazadas al
   final del <body>. Sólo presentación: no cambia textos, enlaces, IDs, clases ni lógica; no toca .hidden/[hidden].
   Reversión: quitar el <link> de index.html. Detalle: artifacts/rooms-polish-20261001/. */

/* tioricojuegos · Área "estructura" (encabezado, navegación, portada, accesos, pie, barra inferior, botón M, toast).
   VERIFICADO (verificación adversarial 01/10/2026). Destino: tioricojuegos-polish.v1-20261001.css (última hoja del
   <head>). Todos los selectores llevan "html body".
   Paleta propia de Tío Rico: negro #080808/#101010, azul noche #111b39/#2d3d64, oro #ffaf4b, naranja #ff8929.
   Sin reglas sobre .hidden/[hidden]; sin animaciones infinitas; transiciones ≤ 200 ms sólo de transform/box-shadow
   y únicamente con prefers-reduced-motion: no-preference. !important sólo donde vence a un !important compartido
   (anotado en cada caso).
   Cambios respecto de la propuesta: 01 (área de la × del aviso: -5 px, sin invadir «Cómo instalar» a ≤370 px);
   06 (sólo mientras el botón conserve data-unavailable); 10 (filas compactas sólo con puntero fino: tabletas táctiles
   conservan 45 px y desplazan); 15 (sin elevación en el riel de accesos: su overflow recortaba el borde superior);
   16 (bloque final: banner del diálogo de acceso a WebP; requiere la variante hero-1500).
   Coordinación: catalogo.verified.css excluye catalogo-01 y catalogo-15; este archivo es el dueño de <main> y del
   menú lateral. */

/* Columna común: gutter 12 px (≤470), 16 px (471–820), 24 px (≥821); contenido de hasta 1472 px (el mismo de hoy en 1920). */
html body { --tr-g: 12px; --tr-col: 1472px; }
@media (min-width: 471px) { html body { --tr-g: 16px; } }
@media (min-width: 821px) { html body { --tr-g: 24px; } }

/* ---------------------------------------------------------------------------------------------------------------
   tioricojuegos-estructura-01 · <main> quedaba anclado a la izquierda (tioricojuegos.css: margin-left:0 heredado de la
   barra lateral vieja + width calc(100% - 18/32px)): márgenes 8/26 px en teléfono, 14/32 en 768, 14/46 en 834–1440 y
   14/434 en 1920, con encabezado, aviso de instalación y pie con otros ejes. Se centra y se usa un gutter simétrico. */
html body > main {
  width: 100%;
  max-width: calc(var(--tr-col) + 2 * var(--tr-g));
  margin-left: auto;
  margin-right: auto;
  padding-left: max(var(--tr-g), env(safe-area-inset-left));
  padding-right: max(var(--tr-g), env(safe-area-inset-right));
}
html body > header.site-header {
  padding-left: max(var(--tr-g), env(safe-area-inset-left), calc((100% - var(--tr-col)) / 2));
  padding-right: max(var(--tr-g), env(safe-area-inset-right), calc((100% - var(--tr-col)) / 2));
}
/* !important: vence a .chv-account-header{padding-left/right:10px!important} (8 px ≤359) de chavito-provider.promo-hero. */
@media (max-width: 900px) {
  html body > header.site-header.chv-account-header {
    padding-left: max(var(--tr-g), env(safe-area-inset-left)) !important;
    padding-right: max(var(--tr-g), env(safe-area-inset-right)) !important;
  }
}
/* Aviso «Llevá la sala a tu inicio» (multisala.js, compartido): sólo el ancho, igual a la columna, y área táctil de la ×
   (28×35 px) ampliada con un pseudo-elemento transparente, sin mover nada. */
html body > #multisalaAppTools.multisala-app-tools {
  width: calc(100% - 2 * max(var(--tr-g), env(safe-area-inset-left), env(safe-area-inset-right)));
  max-width: var(--tr-col);
}
html body > #multisalaAppTools .multisala-install-top__dismiss { position: relative; }
html body > #multisalaAppTools .multisala-install-top__dismiss::after { content: ""; position: absolute; inset: -5px; }
@media (min-width: 821px) {
  html body > footer {
    padding-left: max(var(--tr-g), env(safe-area-inset-left), calc((100% - var(--tr-col)) / 2));
    padding-right: max(var(--tr-g), env(safe-area-inset-right), calc((100% - var(--tr-col)) / 2), 104px);
  }
}
@media (max-width: 820px) {
  html body > footer {
    padding-left: max(var(--tr-g), env(safe-area-inset-left));
    padding-right: max(var(--tr-g), env(safe-area-inset-right));
  }
}

/* ---------------------------------------------------------------------------------------------------------------
   tioricojuegos-estructura-02 · 821–1050 px: sin barra de escritorio (≤1050 oculta), sin hamburguesa (sólo ≤820) y sin
   barra inferior (sólo ≤820). Se muestra la hamburguesa existente (abre el mismo #mobileMenu). Hamburguesa con el
   mismo ancho con y sin sesión y trazos alineados con el borde del contenido. */
@media (max-width: 1050px) {
  html body > header.site-header .hamburger {
    display: block;
    flex: 0 0 36px;
    width: 36px;
    min-height: 44px;
    margin-left: -7px;
  }
}
/* !important: vence a .chv-account-header .hamburger{flex/width/min-width:28px!important} (chavito, ≤900). */
@media (max-width: 900px) {
  html body > header.site-header.chv-account-header .hamburger {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
  }
}

/* ---------------------------------------------------------------------------------------------------------------
   tioricojuegos-estructura-03 · Logo minúsculo y descentrado: el dibujo ocupa sólo x 23–129 del PNG de 250×50 (58 %
   transparente a la derecha). En 320 se veía de 37×17 px, en 834 con sesión de 38 px y en el pie/menú quedaba corrido a
   la izquierda del centro. Recorte sólo con CSS (misma imagen): caja 106:50 y cover desplazado al dibujo. */
html body > header.site-header .brand {
  width: auto;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
}
html body > header.site-header .brand img,
html body > footer .footer-logo img,
html body #mobileMenu .mobile-menu-head img {
  width: auto;
  max-width: none;
  aspect-ratio: 106 / 50;
  object-fit: cover;
  object-position: 15.97% 50%;
}
html body > header.site-header .brand img { height: 34px; }
@media (max-width: 359px) { html body > header.site-header .brand img { height: 30px; } }
@media (min-width: 821px) { html body > header.site-header .brand img { height: 38px; } }
@media (min-width: 1051px) { html body > header.site-header .brand img { height: 42px; } }
html body > footer .footer-logo { display: inline-flex; }
html body > footer .footer-logo img { height: 44px; }
html body #mobileMenu .mobile-menu-head img { height: 40px; }

/* ---------------------------------------------------------------------------------------------------------------
   tioricojuegos-estructura-04 · Botones del encabezado: «Iniciar sesión»/«Crear cuenta» partidos en dos renglones a
   320 px, 11 px de letra entre 1051 y 1500 y alturas mezcladas (38/42/44/46). Mismo alto (44), radio (12) y cuerpo;
   «Crear cuenta» como acción principal (oro con profundidad) y «Iniciar sesión» como secundaria. */
html body > header.site-header .login-button,
html body > header.site-header .register-button {
  height: 44px;
  min-height: 44px;
  min-width: 0;
  padding-inline: 18px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}
html body > header.site-header .login-button {
  border-color: rgba(255, 175, 75, .55);
  background: rgba(8, 12, 26, .35);
  color: #fff;
}
html body > header.site-header .register-button {
  border-color: #ffbf66;
  background: linear-gradient(180deg, #ffc56f 0%, #ffaf4b 48%, #ff9b31 100%);
  color: #120c05;
  box-shadow: 0 6px 18px rgba(255, 151, 41, .28), inset 0 1px 0 rgba(255, 255, 255, .35);
}
html body > header.site-header .round-action {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border-color: #2d3d64;
  background: rgba(8, 12, 26, .55);
  font-size: 18px;
}
@media (min-width: 821px) {
  html body > header.site-header .header-actions { flex: 0 0 auto; gap: 8px; }
  /* Sin forzar 44 px: con sesión la cápsula (Chavito) apila etiqueta + saldo + bono (43 px) y a 44 px la etiqueta
     «SALDO» tocaba el borde superior; conserva su alto actual (46 px) y sólo toma el radio común. */
  html body > header.site-header #walletButton { border-radius: 12px; }
}
@media (min-width: 951px) {
  html body > header.site-header #profileButton { flex: 0 0 44px; width: 44px; height: 44px; }
}
@media (min-width: 821px) and (max-width: 1280px) {
  html body > header.site-header .login-button,
  html body > header.site-header .register-button { padding-inline: 14px; font-size: 13px; }
}
@media (max-width: 820px) {
  html body > header.site-header .login-button,
  html body > header.site-header .register-button { padding-inline: 12px; font-size: 13px; }
}
@media (max-width: 380px) {
  html body > header.site-header .login-button,
  html body > header.site-header .register-button { padding-inline: 9px; font-size: 12px; }
}

/* ---------------------------------------------------------------------------------------------------------------
   tioricojuegos-estructura-05 · Barra de escritorio: 10 px de letra entre 1051 y 1500 (sobraban ~220 px) y cápsula gris
   de Celu Apuestas. Cuerpo legible y cápsula en el azul noche de Tío Rico; activo/hover con tinte oro. */
@media (min-width: 1051px) {
  html body > header.site-header .desktop-nav {
    border-color: #2d3d64;
    background: rgba(6, 10, 24, .6);
  }
  html body > header.site-header .desktop-nav > button {
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .03em;
    white-space: nowrap;
  }
  html body > header.site-header .desktop-nav > button:hover,
  html body > header.site-header .desktop-nav > button.active { background: rgba(255, 175, 75, .1); }
}
@media (min-width: 1051px) and (max-width: 1280px) {
  html body > header.site-header .desktop-nav > button { padding-inline: 8px; font-size: 11px; }
}
/* 1051–1180: margen para métricas de fuente del sistema más anchas (macOS) sin desbordar. */
@media (min-width: 1051px) and (max-width: 1180px) {
  html body > header.site-header .desktop-nav > button { padding-inline: 6px; }
  html body > header.site-header .login-button,
  html body > header.site-header .register-button { padding-inline: 12px; }
}
@media (min-width: 1601px) {
  html body > header.site-header .desktop-nav > button { padding-inline: 16px; font-size: 13px; }
}

/* ---------------------------------------------------------------------------------------------------------------
   tioricojuegos-estructura-06 · «T» y «W» (Telegram/WhatsApp, ≥1181) sólo muestran «No disponible. Intentá más tarde.»
   (data-unavailable): son letras sueltas que compiten con «Crear cuenta». Se retiran de la vista; quitar este bloque si
   el dueño activa esos canales. */
html body > header.site-header .round-action.telegram[data-unavailable],
html body > header.site-header .round-action.whatsapp[data-unavailable] { display: none; }

/* ---------------------------------------------------------------------------------------------------------------
   tioricojuegos-estructura-07 · Con sesión el encabezado no muestra ninguna acción de carga: la cápsula de saldo
   (#walletButton, abre la billetera) va en el azul de Chavito y se lee como dato. Se agrega una pastilla «+» dorada
   decorativa (content vacío; el botón ya tiene aria-label). Fila: el único hijo visible es .chv-account-values. */
html body > header.site-header #walletButton.chv-account-wallet { flex-direction: row; }
html body > header.site-header #walletButton.chv-account-wallet::after {
  content: "";
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-left: 8px;
  border-radius: 50%;
  background: #ffaf4b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23120c05' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  box-shadow: 0 0 0 3px rgba(255, 175, 75, .18);
}
@media (max-width: 359px) {
  html body > header.site-header #walletButton.chv-account-wallet::after { flex-basis: 20px; width: 20px; height: 20px; margin-left: 5px; background-size: 11px 11px; }
}

/* ---------------------------------------------------------------------------------------------------------------
   tioricojuegos-estructura-08 · Barra inferior: «Cargar» (la acción de conversión en el teléfono) se veía como un
   rectángulo gris (foto de billetera de 495×315 a 20 px con filtro gris) y «Mi cuenta» como un punto «●». Etiquetas de
   9 px. «Cargar» pasa a pastilla dorada con «+» (mismo ícono que «Cargar fichas» del menú M); «Mi cuenta» con silueta;
   etiquetas de 10,5 px; fondo opaco con filo oro. */
@media (max-width: 820px) {
  html body > nav.mobile-bottom-nav.mobile-nav {
    border-top: 1px solid rgba(255, 175, 75, .22);
    background: #0b0b0e;
    box-shadow: 0 -10px 26px rgba(0, 0, 0, .45);
  }
  /* !important: multisala.css fija 9px/10px con !important (0,3,3). */
  html body > nav.mobile-bottom-nav.mobile-nav > button > span:last-child {
    font-size: 10.5px !important;
    line-height: 12px !important;
  }
  html body > nav.mobile-bottom-nav.mobile-nav > button[data-mobile-action="wallet"] { color: #ffc56f; font-weight: 800; }
  html body > nav.mobile-bottom-nav.mobile-nav > button[data-mobile-action="wallet"] > img {
    object-position: -9999px 0;
    border-radius: 7px;
    background: #ffaf4b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23120c05' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
    box-shadow: 0 0 0 4px #ffaf4b, 0 4px 14px rgba(255, 159, 40, .45);
    filter: none;
  }
  html body > nav.mobile-bottom-nav.mobile-nav > button > span.account-icon {
    display: block;
    width: 22px;
    height: 20px;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9d6de' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  }
}

/* ---------------------------------------------------------------------------------------------------------------
   tioricojuegos-estructura-09 · Controles fijos en escritorio: el botón M quedaba en bottom:0 con la imagen de 88 px
   (margen -16) recortada abajo y a la derecha (x 935–1025 en 1024); entre 821 y 950 flotaba a 76 px y el aviso de
   cookies a 72 px de una barra inferior que sólo existe hasta 820. */
@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));
  }
}
/* Aviso de cookies (lobby-v8, compartido): entre 821 y 1024 quedaba a 72 px del borde reservando la misma barra
   inferior inexistente. Igual especificidad base que lobby-v8 (1,1,0) + html body: gana; con la landing abierta
   (html.ms-landing-open … 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)); }
}

/* ---------------------------------------------------------------------------------------------------------------
   tioricojuegos-estructura-10 · Menú del botón M: en teléfono llegaba a y≈8 sobre el encabezado y a 1024×768 a y≈2,
   tapando «Crear cuenta»; «Activar notificaciones» sin ícono (texto desalineado); paleta violeta de Multisala (borde de
   la sala actual #ca4ff0). Tope de alto, filas compactas en escritorio bajo y colores de Tío Rico (como ya tiene Betados). */
@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;
  }
}
/* Filas compactas sólo con mouse/trackpad: en tabletas táctiles (1024×768) se conservan las filas de 45 px y el menú
   desplaza dentro de su tope de alto. */
@media (min-width: 821px) and (max-height: 960px) and (hover: hover) and (pointer: fine) {
  html body .multisala-actions .multisala-menu { padding: 8px; }
  html body .multisala-actions .multisala-menu > :is(button, a) { min-height: 38px; padding-block: 5px; }
  html body .multisala-actions .multisala-menu .multisala-rooms { gap: 4px; padding: 6px; margin-bottom: 6px; }
  html body .multisala-actions .multisala-menu .multisala-room { min-height: 34px; padding-block: 6px; }
}
html body .multisala-actions .multisala-menu {
  border-color: rgba(255, 175, 75, .3);
  background: rgba(10, 13, 26, .96);
}
html body .multisala-actions .multisala-rooms { background: rgba(4, 6, 14, .9); }
html body .multisala-actions .multisala-room.current { border-color: #ffaf4b; }
html body .multisala-actions .multisala-room.current small { color: #ffc56f; }
html body .multisala-actions .multisala-menu > button[data-multisala-action="topup"] .action-icon { background: #ffaf4b; color: #120c05; font-weight: 900; }
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");
}
html body .multisala-actions .multisala-menu :is(button, a):focus-visible { outline: 3px solid #ffd08a; outline-offset: -3px; border-radius: 10px; }

/* ---------------------------------------------------------------------------------------------------------------
   tioricojuegos-estructura-11 · Menú lateral: el botón M (z 78) quedaba encima del menú (z 70) tapando «Mi cuenta»;
   «Cargar fichas» con el mismo peso que «Mi cuenta»; pie del menú #777 (4,2:1); × sin caja. */
html body #mobileMenuBackdrop.menu-backdrop { z-index: 79; }
html body #mobileMenu.mobile-menu {
  z-index: 80;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  border-right: 1px solid #2d3d64;
  background: linear-gradient(180deg, #0f1528 0%, #0b0b0e 46%);
}
html body #mobileMenu .mobile-menu-head { border-bottom-color: #2d3d64; }
html body #mobileMenu nav > button { min-height: 48px; border-bottom-color: #23283a; }
html body #mobileMenu .mobile-account > button { min-height: 48px; border-radius: 12px; }
html body #mobileMenu .mobile-account > button[data-mobile-action="wallet"] {
  border-color: #ffbf66;
  background: linear-gradient(180deg, #ffc56f 0%, #ffaf4b 48%, #ff9b31 100%);
  color: #120c05;
  box-shadow: 0 6px 18px rgba(255, 151, 41, .25);
}
html body #mobileMenu > p { color: #a9a6b0; }
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;
}
html body #mobileMenu :is(nav > button, .mobile-account > button, #mobileMenuClose):focus-visible { outline: 3px solid #ffd08a; outline-offset: -3px; }

/* ---------------------------------------------------------------------------------------------------------------
   tioricojuegos-estructura-12 · Toast: gris de otra sala y angosto (left:50% deja medio ancho: 160–195 px, cuatro
   renglones a 390). Ancho por contenido, azul noche y filo oro de Tío Rico. */
html body #toast.toast {
  width: max-content;
  max-width: min(460px, calc(100vw - 32px));
  border-color: rgba(255, 175, 75, .45);
  border-radius: 14px;
  background: #111b39;
  color: #fff;
  font-weight: 650;
  line-height: 1.35;
  text-wrap: balance;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .6), 0 0 22px rgba(255, 159, 40, .12);
}

/* ---------------------------------------------------------------------------------------------------------------
   tioricojuegos-estructura-13 · Accesos por categoría, riel y portada: en el teléfono la fila de accesos se cortaba seco
   26 px antes del borde (ahora llega al borde con el mismo margen de arranque y encastre suave); brillo rosa de Celu
   (#ec2c68) al pasar el mouse en una sala naranja; rótulo «PROVEEDORES» corrido 8 px; puntos del carrusel de 8×8 px
   (área táctil ampliada con pseudo-elemento, sin cambiar su dibujo). */
@media (max-width: 820px) {
  html body main > .category-rail {
    margin-left: calc(-1 * max(var(--tr-g), env(safe-area-inset-left)));
    margin-right: calc(-1 * max(var(--tr-g), env(safe-area-inset-right)));
    padding-left: max(var(--tr-g), env(safe-area-inset-left));
    padding-right: max(var(--tr-g), env(safe-area-inset-right));
    scroll-padding-inline: max(var(--tr-g), env(safe-area-inset-left));
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  html body main > .category-rail > button { scroll-snap-align: start; }
}
html body main > .category-rail > button.active,
html body main > .category-rail > button:hover { box-shadow: 0 0 18px rgba(255, 175, 75, .16); }
html body main > .category-rail > button.active { background: linear-gradient(145deg, rgba(255, 175, 75, .14), rgba(17, 27, 57, .55)); }
/* Rótulo «PROVEEDORES» del riel compartido: estaba 8 px adentro del eje de los títulos y en lila de Multisala (#b9adca);
   pasa al eje común y a un gris cálido neutro (contraste > 8:1). */
html body main > section.provider-rail::before { margin-inline: 0; color: #b3afba; }
html body main > .hero-carousel .carousel-dots { gap: 10px; }
html body main > .hero-carousel .carousel-dots > button { position: relative; }
html body main > .hero-carousel .carousel-dots > button::after { content: ""; position: absolute; inset: -10px -5px; }

/* ---------------------------------------------------------------------------------------------------------------
   tioricojuegos-estructura-14 · Pie: texto legal #777 (4,24:1), enlaces de 21 px de alto y botón «Preferencias» en gris.
   Contraste AA, áreas de 44 px y mismo tono para todos los enlaces. */
html body > footer > p { color: #a9a6b0; font-size: 13px; line-height: 1.45; }
html body > footer nav { flex-wrap: wrap; gap: 0 4px; }
html body > footer nav > button,
html body > footer .platform-footer-links > :is(a, button) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  color: #cfccd4;
  white-space: nowrap;
}
html body > footer nav > button:hover,
html body > footer .platform-footer-links > :is(a, button):hover { color: #ffaf4b; }
@media (min-width: 821px) {
  html body > footer { row-gap: 2px; }
  html body > footer nav { margin-left: -8px; }
  html body > footer .platform-footer-links { margin-left: -8px; }
  html body > footer > p { margin-top: 10px; }
}

/* ---------------------------------------------------------------------------------------------------------------
   tioricojuegos-estructura-15 · Microinteracciones (casino vivo, sin animaciones nuevas): elevación y brillo cortos en
   botones del encabezado, accesos, tarjetas de proveedores destacados y barra inferior; leve escala al tocar. */
@media (prefers-reduced-motion: no-preference) {
  html body > header.site-header :is(.login-button, .register-button, .round-action),
  html body main > .category-rail > button,
  html body main > .new-provider-section .new-provider-cards > button,
  html body > nav.mobile-bottom-nav.mobile-nav > button > :first-child {
    transition: transform .16s ease, box-shadow .16s ease;
  }
}
/* Elevación sólo con puntero que flota (sin «hover pegado» después de tocar en el celular). */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  html body > header.site-header :is(.login-button, .round-action):hover { transform: translateY(-1px); }
  html body > header.site-header .register-button:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255, 151, 41, .4), inset 0 1px 0 rgba(255, 255, 255, .35); }
  /* Sin elevación en .category-rail: es un riel con overflow y padding-top 0 y recortaba 2 px del borde superior
     (medido a 1440); conserva el borde y el brillo dorados de hover y la escala al presionar. */
  html body main > .new-provider-section .new-provider-cards > button:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .45), 0 0 0 1px #ffaf4b; }
}
/* Escala al presionar: después del hover para ganar por orden (misma especificidad). */
@media (prefers-reduced-motion: no-preference) {
  html body > header.site-header :is(.login-button, .register-button, .round-action):active,
  html body main > .category-rail > button:active,
  html body main > .new-provider-section .new-provider-cards > button:active { transform: scale(.97); }
  html body > nav.mobile-bottom-nav.mobile-nav > button:active > :first-child { transform: scale(.88); }
}
html body > header.site-header :is(.login-button, .register-button, .round-action, .hamburger, .brand):focus-visible,
html body > header.site-header .desktop-nav > button:focus-visible { outline: 3px solid #ffd08a; outline-offset: 2px; }
html body > nav.mobile-bottom-nav.mobile-nav > button:focus-visible { outline: 3px solid #ffd08a; outline-offset: 0; }

/* ---------------------------------------------------------------------------------------------------------------
   tioricojuegos-estructura-16 (parte CSS; REQUIERE la variante assets/tioricojuegos/hero-1500.v1-20261001.webp de este
   mismo cambio). Banner del diálogo de acceso/registro (embudo de alta): tioricojuegos.css lo pinta con hero.png
   (847 KB); al reemplazar el src de la portada por WebP, abrir «Crear cuenta» seguiría bajando el PNG. Mismas capas y
   misma posición/tamaño (center / cover de tioricojuegos.css), con la variante de 1500 px: misma resolución que el
   original, 99 KB. No se toca --campaign-art: la CSP real (style-src 'self') bloquea el atributo style del marcado,
   así que el fondo difuminado de las diapositivas ya no descarga nada en producción (medido: ::before = none). */
html body #authModal .tioricojuegos-auth-banner {
  background-image: linear-gradient(90deg, rgba(4, 7, 19, .15), rgba(147, 0, 14, .12)), url("assets/tioricojuegos/hero-1500.v1-20261001.webp");
}

/* Tío Rico Juegos · área "Catálogo, búsqueda y modales" — VERIFICADO (verificación adversarial 01/10/2026).
   Destino: tioricojuegos-polish.v1-20261001.css (ÚLTIMA hoja del <head>). Todas las reglas llevan "html body".
   Sólo presentación: sin cambios de textos, enlaces, IDs, clases, data-* ni lógica; sin reglas sobre .hidden/[hidden];
   sin estilos inline; sin fuentes externas; sin animaciones nuevas (sólo transiciones <= 180 ms de transform/box-shadow
   dentro de prefers-reduced-motion: no-preference; hover sólo con (hover: hover) and (pointer: fine)).
   Único !important: .auth-operator (vence a ".auth-operator{color:#666!important}" de celuapuestas.css).
   NO incluidos (duplican el área estructura, dueña de esos elementos): catalogo-01 (centrado de <main>: lo resuelve
   estructura-01) y catalogo-15 (menú lateral por encima del botón M: lo resuelve estructura-11, mismos z-index 79/80).
   Modificados en la verificación: 04 (anillo de foco de los chips recortado por la fila con overflow-x; hover dorado
   repuesto) y 05 (en las filas de inicio el anillo va dentro de .play-overlay: el carril recortaba el exterior).
   Agregado: x01 (caja del bono por notificaciones de la billetera en la paleta de la sala).
   Probado con qa/probe.mjs en catalog, login, register, wallet, profile, payment, gameshell, menu, home-clean y
   home-auth en los 10 anchos contra una corrida ANTES (css=none) del mismo arnés: 0 desbordes, 0 recortes, 0 contraste
   nuevo (40 arreglados), 0 solapes nuevos entre piezas del mismo plano, 0 errores JS, 0 escrituras.
   Orden interno obligatorio: 07 antes de 09 (09 redefine márgenes de las mismas etiquetas en pantallas bajas). */

/* ---------------------------------------------------------------- tioricojuegos-catalogo-02
   Grilla del catálogo en tableta: hasta 820 px quedaban 3 columnas de 235 px (768) y al cruzar 821 saltaba a 6 de
   ~125 px. 4 columnas desde 701 px (mismo corte que los carruseles de lobby-v8: 3 por vista hasta 700 y 5 desde 701).
   Páginas de 48 y 96 juegos (FIRST_PAGE/NEXT_PAGE): múltiplos de 3, 4, 6 y 8, sin última fila incompleta. */
@media (min-width: 701px) and (max-width: 820px) {
  html body #gamesGrid.games-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- tioricojuegos-catalogo-03
   Buscador: celuapuestas.css pone outline:0 al campo sin reemplazo (no hay foco visible) y el campo mide 23 px de alto
   dentro de una cápsula de 42. Anillo de foco dorado en la cápsula, ícono que se enciende y campo a toda la altura;
   44 px de alto en pantallas táctiles. */
html body #gamesSection .search-box { cursor: text; }
html body #gamesSection .search-box input { align-self: stretch; min-height: 0; }
html body #gamesSection .search-box:focus-within {
  border-color: #ffaf4b;
  background: #17171b;
  box-shadow: 0 0 0 3px rgba(255, 175, 75, .24);
}
html body #gamesSection .search-box:focus-within > span { color: #ffaf4b; }
@media (max-width: 820px) {
  html body #gamesSection .search-box { height: 44px; }
}
@media (prefers-reduced-motion: no-preference) {
  html body #gamesSection .search-box { transition: box-shadow .15s ease; }
}

/* ---------------------------------------------------------------- tioricojuegos-catalogo-04
   Chips de categoría: 16 px/400 (mismo peso que el texto corrido), 39 px de alto y sin foco visible propio. 14 px/700,
   42 px de alto, estado activo con texto dorado sobre el azul noche de la sala y respuesta al toque. */
html body #gamesSection .category-chip {
  min-height: 42px;
  padding: 9px 16px;
  border-color: #36353b;
  color: #e9e7ee;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
html body #gamesSection .category-chip.active {
  border-color: #ffaf4b;
  background: #111b39;
  color: #ffaf4b;
  box-shadow: 0 0 0 1px rgba(255, 175, 75, .25), 0 6px 16px rgba(0, 0, 0, .35);
}
html body #gamesSection .category-chip:focus-visible { outline: 2px solid #ffaf4b; outline-offset: 2px; }
/* (verificación) La fila es un contenedor con overflow-x:auto sin relleno arriba ni a los lados: el anillo de foco del
   primer chip (y el de cualquiera, arriba) quedaba recortado (medido a 390/1440). 4 px de relleno compensados con margen
   negativo: los chips no se mueven (17 px arriba, mismo borde izquierdo) y el anillo entra completo. */
html body #gamesSection #categoryChips.category-chips { margin: 13px -4px 17px; padding: 4px 4px 7px; }
/* (verificación) El borde #36353b de arriba (1,1,2) anulaba el borde dorado del :hover de tioricojuegos.css (0,2,0):
   se repone sólo con puntero fino (sin hover pegado al tocar). */
@media (hover: hover) and (pointer: fine) {
  html body #gamesSection .category-chip:hover { border-color: #ffaf4b; }
}
@media (max-width: 820px) {
  html body #gamesSection .category-chip { font-size: 13px; }
}
@media (prefers-reduced-motion: no-preference) {
  html body #gamesSection .category-chip { transition: transform .15s ease, box-shadow .15s ease; }
  html body #gamesSection .category-chip:active { transform: scale(.96); }
}

/* ---------------------------------------------------------------- tioricojuegos-catalogo-05
   Portadas protagonistas: al pasar el mouse la tarjeta se cubría con un velo naranja al 76 % (tioricojuegos.css) que
   tapaba el arte, con un ▶ marrón sobre blanco. Ahora el arte sigue visible (degradé oscuro sólo abajo), botón ▶ en el
   oro de la sala, contorno dorado con elevación y, en táctil, una leve compresión al tocar. Foco visible dorado. Afecta
   a todas las tarjetas .game-card de main (catálogo y filas de inicio: mismo componente). */
html body main .game-card .play-overlay {
  background: linear-gradient(180deg, rgba(8, 8, 10, 0) 35%, rgba(8, 8, 10, .62));
}
html body main .game-card .play-overlay::after {
  background: #ffaf4b;
  color: #101010;
  box-shadow: 0 6px 18px rgba(255, 137, 41, .45);
}
html body #gamesGrid .game-card:focus-visible { outline: 3px solid #ffaf4b; outline-offset: 2px; }
/* (1,2,3): vence a "#homeRows.home-rows .game-card,#gamesGrid .game-card{box-shadow:none}" de lobby-v8 (1,1,0/1,2,0) y
   al hover de animated-covers.v5 (1,2,0).
   (verificación, modificado) En las filas de inicio el carril (#homeRows .game-row-track, overflow-x:auto) recorta lo
   que sale de la tarjeta: el anillo exterior perdía su lado superior (medido a 1440). Ahí el contorno va por dentro,
   en la capa .play-overlay (z-index 3, ya visible al pasar el mouse, por encima de la portada animada); un outline
   negativo en la tarjeta quedaba tapado por la portada (z-index 1). En la grilla, que no recorta, queda el anillo
   exterior con sombra. */
@media (hover: hover) and (pointer: fine) {
  html body main #gamesGrid .game-card:hover { box-shadow: 0 0 0 2px #ffaf4b, 0 12px 26px rgba(0, 0, 0, .5); }
  html body main #homeRows .game-card:hover .play-overlay { box-shadow: inset 0 0 0 2px #ffaf4b; }
}
@media (prefers-reduced-motion: no-preference) {
  html body main .game-card { transition: transform .18s ease, box-shadow .18s ease; }
  html body main .game-card:active { transform: scale(.97); }
}

/* ---------------------------------------------------------------- tioricojuegos-catalogo-06
   Estados vacío/error y botones «Mostrar más»/«Reintentar»: el título salía en el mismo gris que el texto, márgenes del
   navegador y botón de 8 px de radio (resto de la sala 12-14). Jerarquía, medida de lectura sin palabras huérfanas y
   botón secundario de 48 px; en el estado de error «Reintentar» es la única acción y pasa a botón principal. */
html body #gamesSection .empty-state { padding: 48px 16px 40px; }
html body #gamesSection .empty-state > span { display: block; color: #ffaf4b; font-size: 40px; line-height: 1; }
html body #gamesSection .empty-state h3 { margin: 14px 0 6px; color: #f8f7f5; font-size: 20px; line-height: 1.25; text-wrap: balance; }
html body #gamesSection .empty-state p { max-width: 40ch; margin: 0 auto; color: #aaa8b0; line-height: 1.5; text-wrap: balance; }
html body #gamesSection .load-more {
  min-width: min(100%, 240px);
  min-height: 48px;
  padding: 12px 28px;
  border-color: #ffaf4b;
  border-radius: 12px;
  color: #ffaf4b;
}
html body #gamesSection .empty-state .load-more { margin: 20px auto 0; }
html body #gamesSection #gamesRetry.load-more {
  border-color: transparent;
  background: linear-gradient(105deg, #ff8929, #ffaf4b);
  color: #101010;
  box-shadow: 0 10px 22px rgba(255, 137, 41, .22);
}
html body #gamesSection .load-more:focus-visible { outline: 2px solid #ffaf4b; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  html body #gamesSection #loadMore.load-more:hover { background: rgba(255, 175, 75, .1); box-shadow: 0 0 18px rgba(255, 175, 75, .18); }
}
@media (prefers-reduced-motion: no-preference) {
  html body #gamesSection .load-more { transition: transform .15s ease, box-shadow .15s ease; }
  html body #gamesSection .load-more:active { transform: scale(.97); }
}

/* ---------------------------------------------------------------- tioricojuegos-catalogo-07
   Registro: «CELULAR ARGENTINO» y «REPETIR CONTRASEÑA» están dentro de #authPhoneField/#authPasswordRepeatField y
   no los alcanza ".auth-panel form>label": salían en línea, 16 px, blancos y pegados al campo. Mismo estilo que
   USUARIO/CONTRASEÑA (debe ir ANTES del bloque -09, que ajusta sus márgenes en pantallas bajas). */
html body #authModal #authPhoneField > label,
html body #authModal #authPasswordRepeatField > label {
  display: block;
  margin: 14px 0 7px;
  color: #c7c3cd;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: normal;
}

/* ---------------------------------------------------------------- tioricojuegos-catalogo-08
   Acceso/registro: la pestaña activa era un bloque dorado macizo que competía con el botón principal (también dorado)
   → segmento oscuro elevado con texto y filo dorados; el botón «Ingresar/Crear cuenta» queda como único elemento
   dorado macizo. Campos sin foco visible (outline:0 sin reemplazo) → anillo dorado; ojo de contraseña 25×25 → 40×40;
   enlace «Crear cuenta/Ingresar» 19 px → 36 px; texto 18+ #666 (3,1:1) → 5,4:1 (!important: vence a
   ".auth-operator{color:#666!important}" de celuapuestas.css). */
html body #authModal .auth-mode-tabs { border: 1px solid #2e2d33; background: #0e0e11; }
html body #authModal .auth-mode-tab { color: #c7c3cd; }
html body #authModal .auth-mode-tab.active {
  background: #26252b;
  color: #ffaf4b;
  box-shadow: inset 0 0 0 1px rgba(255, 175, 75, .6), 0 4px 12px rgba(0, 0, 0, .35);
}
html body #authModal .auth-mode-tab:focus-visible { outline: 2px solid #ffaf4b; outline-offset: 2px; }
html body #authModal .input-shell input { align-self: stretch; }
html body #authModal .input-shell:focus-within { border-color: #ffaf4b; box-shadow: 0 0 0 3px rgba(255, 175, 75, .22); }
html body #authModal .input-shell > button {
  display: grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  margin-right: -8px;
  padding: 0;
  border-radius: 10px;
  cursor: pointer;
}
html body #authModal .input-shell > button:focus-visible { outline: 2px solid #ffaf4b; outline-offset: -2px; }
html body #authModal .auth-switch button { min-height: 36px; padding: 0 6px; border-radius: 8px; }
html body #authModal .auth-switch button:focus-visible { outline: 2px solid #ffaf4b; outline-offset: 1px; }
html body #authModal .auth-operator { color: #8f8b97 !important; }
html body #authModal > .modal-close:focus-visible { outline: 2px solid #ffaf4b; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  html body #authModal .auth-mode-tab,
  html body #authModal .input-shell { transition: box-shadow .15s ease; }
}

/* ---------------------------------------------------------------- tioricojuegos-catalogo-09
   Registro en pantallas bajas: el botón «CREAR CUENTA» quedaba fuera de la vista del modal (1024×768: 178 px abajo;
   1440×900: 59 px abajo; 320×800: cortado). Ritmo más compacto en dos escalones de alto de ventana, sin quitar
   contenido; el banner se achica primero. En teléfonos se quita el min-height:70vh heredado (dejaba hueco vacío). */
@media (max-width: 820px) {
  html body #authModal.auth-dialog { min-height: 0; }
}
@media (max-height: 1000px) {
  html body #authModal .tioricojuegos-auth-banner { min-height: 104px; }
  html body #authModal.auth-dialog .auth-panel { padding-top: 22px; padding-bottom: 24px; }
  html body #authModal .auth-panel > h2 { font-size: 26px; line-height: 1.2; }
  html body #authModal .auth-panel > p#authTitle { margin: 4px 0 16px; line-height: 1.4; }
  html body #authModal .auth-mode-tabs { margin-bottom: 16px; }
  html body #authModal .auth-mode-tab { min-height: 44px; }
  html body #authModal :is(#authForm, #authPhoneField, #authPasswordRepeatField) > label { margin: 12px 0 6px; }
  html body #authModal .input-shell { height: 48px; }
  html body #authModal .auth-switch { margin: 10px 0; }
  html body #authModal .auth-operator { margin: 4px 0 0; }
}
@media (max-height: 820px) {
  html body #authModal.auth-dialog { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  html body #authModal .tioricojuegos-auth-banner { min-height: 84px; }
  html body #authModal.auth-dialog .auth-panel { padding-top: 16px; padding-bottom: 18px; }
  html body #authModal .auth-panel > h2 { font-size: 22px; }
  html body #authModal .auth-panel > p#authTitle { margin: 2px 0 12px; font-size: 14px; }
  html body #authModal .auth-mode-tabs { margin-bottom: 12px; padding: 4px; }
  html body #authModal .auth-mode-tab { min-height: 40px; }
  html body #authModal :is(#authForm, #authPhoneField, #authPasswordRepeatField) > label { margin: 10px 0 5px; }
  html body #authModal .input-shell { height: 46px; }
  html body #authModal #ageLegalNotice { margin-top: 10px; }
  html body #authModal .primary-submit { margin-top: 12px; }
  html body #authModal .auth-switch { margin: 8px 0; }
}

/* ---------------------------------------------------------------- tioricojuegos-catalogo-10
   Logo del banner de acceso: placa blanca al 86 % con el logo corrido a la izquierda (el PNG 250×50 sólo tiene dibujo
   en x 23-128). Placa de vidrio oscura con filo dorado, recortada al dibujo (object-fit/position) y centrada; el logo
   de la sala está hecho para fondo oscuro (como en el encabezado). */
html body #authModal .tioricojuegos-auth-banner .modal-logo {
  width: 122px;
  height: 56px;
  padding: 8px 14px;
  object-fit: cover;
  object-position: 13% 50%;
  border: 1px solid rgba(255, 175, 75, .45);
  border-radius: 14px;
  background: rgba(10, 10, 14, .66);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
  filter: none;
}

/* ---------------------------------------------------------------- tioricojuegos-catalogo-11
   Billetera: los campos de monto y DNI heredan 12 px/800 de su <label> (iOS hace zoom al enfocar campos < 16 px) y
   el foco era el anillo genérico del navegador. Cerrar (×) de billetera/perfil/pago/retiro: 31×39 px sin caja.
   En tableta (600-820) billetera/perfil/pago se abrían como hoja inferior de 768 px de ancho mientras el acceso es una
   tarjeta centrada: misma tarjeta centrada para todos. */
html body :is(#walletModal, #withdrawalModal) form > label > input {
  height: 50px;
  border-color: #3a3940;
  border-radius: 12px;
  background: #101013;
  font-size: 16px;
  font-weight: 600;
}
html body :is(#walletModal, #withdrawalModal) form > label > input:focus-visible {
  border-color: #ffaf4b;
  outline: 2px solid #ffaf4b;
  outline-offset: 1px;
}
html body .modal:not(.auth-dialog) > .modal-close {
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 12px;
  color: #cfcbd6;
  line-height: 1;
}
@media (min-width: 821px) {
  html body .modal:not(.auth-dialog) > .modal-close { top: 20px; right: 20px; }
}
html body .modal:not(.auth-dialog) > .modal-close:hover { background: rgba(255, 255, 255, .08); color: #fff; }
html body .modal:not(.auth-dialog) > .modal-close:focus-visible { outline: 2px solid #ffaf4b; outline-offset: 2px; }
@media (min-width: 600px) and (max-width: 820px) {
  html body :is(#walletModal, #withdrawalModal, #paymentModal, #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 :is(#walletModal, #withdrawalModal, #paymentModal).modal-wide { width: min(620px, calc(100vw - 48px)); }
}

/* ---------------------------------------------------------------- tioricojuegos-catalogo-12
   Restos de la paleta de otras salas en los modales: brillo rosa (#ec2c68) del botón principal y del borde de cada
   modal (celuapuestas.css), «Cargas»/«Retiros» en violeta de Multisala (multisala.css) y «Cargas y retiros» en azul
   (payment-shell.js). Se unifican en azul noche + oro de Tío Rico; saldo con jerarquía (rótulo 14 px apagado, monto
   20 px dorado) y «Cerrar sesión» con área de 44 px. El botón principal gana respuesta al toque. */
html body .modal { box-shadow: 0 28px 90px #000, 0 0 24px rgba(255, 175, 75, .1); }
html body .modal .primary-submit {
  min-height: 50px;
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(255, 137, 41, .24);
}
html body .modal .primary-submit:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  html body .modal .primary-submit:hover:not(:disabled) { box-shadow: 0 14px 30px rgba(255, 137, 41, .36); }
}
@media (prefers-reduced-motion: no-preference) {
  html body .modal .primary-submit { transition: transform .15s ease, box-shadow .15s ease; }
  html body .modal .primary-submit:active:not(:disabled) { transform: scale(.985); }
}
html body #profileModal .profile-balance {
  align-items: center;
  gap: 12px;
  border: 1px solid #2d3a5c;
  background: linear-gradient(135deg, #111b39, #141418);
}
html body #profileModal .profile-balance > span { color: #c9c6d0; font-size: 14px; }
html body #profileModal #profileBalance { color: #ffaf4b; font-size: 20px; font-variant-numeric: tabular-nums; }
html body #profileModal .ms-profile-transactions a,
html body #profileModal .ms-wallet-history {
  min-height: 52px;
  border: 1px solid rgba(255, 175, 75, .38);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(17, 27, 57, .95), rgba(20, 20, 24, .92));
  color: #fff;
}
html body #profileModal .ms-wallet-history { font: inherit; font-weight: 800; }
/* En táctil, el :hover violeta de multisala.css (".ms-profile-transactions a:hover") quedaba pegado tras el toque. */
html body #profileModal .ms-profile-transactions a:hover { background: linear-gradient(135deg, rgba(17, 27, 57, .95), rgba(20, 20, 24, .92)); }
html body #profileModal .ms-profile-transactions span { color: #ffaf4b; }
html body #profileModal :is(.ms-profile-transactions a, .ms-wallet-history):focus-visible { outline: 3px solid #ffaf4b; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  html body #profileModal :is(.ms-profile-transactions a, .ms-wallet-history):hover { border-color: #ffaf4b; background: #18254a; }
}
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: 2px solid #ffaf4b; outline-offset: 2px; }

/* ---------------------------------------------------------------- tioricojuegos-catalogo-13
   Pago: ✓ blanco sobre verde #15bd58 = 2,3:1 → ✓ oscuro (7,7:1) con halo; aviso con radio coherente; filas con
   alias/CVU o referencia largos sin pisarse (se parten y alinean a la derecha). */
html body #paymentModal .status-orb { color: #0b1a10; font-weight: 900; box-shadow: 0 0 0 6px rgba(21, 189, 88, .16); }
html body .modal .payment-warning { padding: 12px 14px; border-radius: 4px 12px 12px 4px; line-height: 1.45; }
html body #paymentModal .detail-row { flex-wrap: wrap; align-items: baseline; gap: 2px 14px; border-bottom-color: #2c2c31; }
html body #paymentModal .detail-row > span { flex: 0 0 auto; color: #aaa8b0; }
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;
}

/* ---------------------------------------------------------------- tioricojuegos-catalogo-14
   Barra del juego: «Salir» blanco sobre oro = 1,8:1 → texto oscuro (10,6:1, como «Crear cuenta»); en teléfono el título
   quedaba en 24 px de ancho a 320 («G…») porque el logo ocupa una columna de 150 px con el dibujo a la izquierda →
   logo recortado a su dibujo (76×32) y título de 13 px alineado a la izquierda. En escritorio el título queda centrado
   en la barra. «Cargando juego…» y su indicador estaban separados en dos filas (uno a 1/4 y otro a 3/4 del alto) sobre
   un fondo bordó de otra sala → juntos al centro, sobre el azul noche de Tío Rico. */
html body #gameShell .game-shell-actions #gameClose { border-color: #ffaf4b; background: #ffaf4b; color: #101010; }
html body #gameShell .game-shell-actions button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
html body #gameShell #gameLoading.game-loading {
  place-content: center;
  justify-items: center;
  gap: 18px;
  padding: 24px;
  background: radial-gradient(circle at center, #172447, #09090b 65%);
  text-align: center;
}
html body #gameShell #gameLoading.game-loading::after { margin-left: 0; }
@media (min-width: 701px) {
  html body #gameShell .game-shell-bar { grid-template-columns: minmax(150px, 1fr) minmax(0, max-content) minmax(max-content, 1fr); }
  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: 76px minmax(0, 1fr) auto; gap: 10px; }
  html body #gameShell .game-shell-bar > img { width: 76px; height: 32px; object-fit: cover; object-position: 13% 50%; }
  html body #gameShell .game-shell-bar > strong { font-size: 13px; text-align: left; }
  html body #gameShell .game-shell-actions button { min-height: 40px; }
}


/* ---------------------------------------------------------------- tioricojuegos-catalogo-x01 (extra, verificación)
   Billetera: la caja del bono por notificaciones (#bonusOptInBox: «Activá las notificaciones y recibí +N % en tu
   próxima carga», multisala.css compartido) salía en violeta/magenta de Multisala (#42105b, botón #6e2bd5→#d33be2)
   dentro de la billetera dorada de Tío Rico, con un botón de ~37 px. Azul noche + filo oro de la sala; el botón pasa a
   secundario dorado de 44 px (el dorado macizo queda para «Continuar al pago»). El estado aria-pressed="true" (verde)
   de multisala.css no se toca. No cambia display (la caja la muestra/oculta .hidden). */
html body #walletModal #bonusOptInBox.bonus-opt-in {
  border-color: rgba(255, 175, 75, .45);
  background: linear-gradient(135deg, rgba(17, 27, 57, .95), rgba(20, 20, 24, .92));
}
html body #walletModal #bonusOptInBox.bonus-opt-in p { color: #c9c6d0; }
html body #walletModal #bonusOptInBox.bonus-opt-in button { min-height: 44px; padding: 10px 20px; }
html body #walletModal #bonusOptInBox.bonus-opt-in button:not([aria-pressed="true"]) {
  box-shadow: inset 0 0 0 1px #ffaf4b;
  background: rgba(255, 175, 75, .12);
  color: #ffc56f;
}
html body #walletModal #bonusOptInBox.bonus-opt-in button:focus-visible { outline: 2px solid #ffaf4b; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  html body #walletModal #bonusOptInBox.bonus-opt-in button:not([aria-pressed="true"]):hover { background: rgba(255, 175, 75, .22); }
}
@media (prefers-reduced-motion: no-preference) {
  html body #walletModal #bonusOptInBox.bonus-opt-in button { transition: transform .15s ease; }
  html body #walletModal #bonusOptInBox.bonus-opt-in button:active { transform: scale(.97); }
}

/* Tío Rico Juegos · CRÍTICO DE COMPLETITUD (01/10/2026). Reglas NUEVAS para tioricojuegos-polish.v1-20261001.css.
   Orden obligatorio de la hoja final: estructura.verified.css → catalogo.verified.css → critic.css (este archivo).
   Varias reglas desempatan por orden con la misma especificidad que las de las áreas, y usan --tr-g (estructura-01).
   Todas llevan "html body". Sin reglas sobre .hidden/[hidden], sin animaciones, sin estilos inline, sin fuentes
   externas; transiciones sólo de transform dentro de prefers-reduced-motion: no-preference. */

/* ---------------------------------------------------------------------------------------------------------------
   tioricojuegos-critico-01 · Jerarquía de títulos de fila. lobby-v8 deja «Destacados», «Pragmatic Play», «Juegos en
   vivo» y «Lo nuevo» en 15 px (13 px ≤520) mientras «Proveedores destacados»/«Todos los juegos» van en 22 px (18 px
   ≤820): en el teléfono la fila se lee casi como texto corrido y en 1440 queda un título de 15 px sobre portadas de
   190 px. Escala 18/16/15/13 (siempre un escalón por debajo de los títulos de sección) y «Ver todos ›» legible
   (13 px, área de 40 px de alto).
   "main" (+1) vence a lobby-v8 (1,2,1) en cualquier orden. Mismo componente en todas las filas (también la de Chavito:
   sólo tamaño, sin restilizar). */
html body main #homeRows.home-rows .home-row-header h2 { font-size: 18px; }
html body main #homeRows.home-rows .home-row-header h2 .pink-bar { height: 18px; }
html body main #homeRows.home-rows .row-more { min-height: 40px; font-size: 13px; }
@media (max-width: 820px) {
  html body main #homeRows.home-rows .home-row-header h2 { font-size: 16px; }
  html body main #homeRows.home-rows .home-row-header h2 .pink-bar { height: 16px; }
}
@media (max-width: 520px) {
  html body main #homeRows.home-rows .home-row-header h2 { font-size: 15px; }
  html body main #homeRows.home-rows .home-row-header h2 .pink-bar { height: 15px; }
  html body main #homeRows.home-rows .row-more { font-size: 12px; }
}
/* ≤340: se conserva el tamaño actual (13 px). A 320 la fila de Chavito («Lo nuevo» + sello + «Pausar portadas»,
   flex-wrap) pasaba el botón a un segundo renglón con 15 px. */
@media (max-width: 340px) {
  html body main #homeRows.home-rows .home-row-header h2 { font-size: 13px; }
  html body main #homeRows.home-rows .home-row-header h2 .pink-bar { height: 13px; }
}
@media (hover: hover) and (pointer: fine) {
  html body main #homeRows.home-rows .row-more:hover { color: #ffaf4b; }
}
html body main #homeRows.home-rows .row-more:focus-visible { outline: 2px solid #ffaf4b; outline-offset: 2px; }

/* ---------------------------------------------------------------------------------------------------------------
   tioricojuegos-critico-02 · Chips de categoría en el teléfono: la fila desplazable se cortaba seco 8 px antes del
   borde (catalogo-04 la deja en margin -4 px), mientras la fila de accesos (estructura-13) llega al borde. Mismo
   tratamiento que los accesos: el primer chip no se mueve (x = gutter) y el resto se desliza hasta el borde. El
   relleno lateral (12–16 px) sigue dejando entrar el anillo de foco; arriba/abajo se conservan los 4/7 px de catalogo-04.
   Misma especificidad que catalogo-04 (2,1,2): gana por orden. */
@media (max-width: 820px) {
  html body #gamesSection #categoryChips.category-chips {
    margin-left: calc(-1 * max(var(--tr-g), env(safe-area-inset-left)));
    margin-right: calc(-1 * max(var(--tr-g), env(safe-area-inset-right)));
    padding-left: max(var(--tr-g), env(safe-area-inset-left));
    padding-right: max(var(--tr-g), env(safe-area-inset-right));
    scroll-padding-inline: max(var(--tr-g), env(safe-area-inset-left));
    scrollbar-width: none;
  }
}

/* ---------------------------------------------------------------------------------------------------------------
   tioricojuegos-critico-03 · Un solo «botón principal» en todo el embudo. estructura-04/-11 pintaron «Crear cuenta»
   del encabezado y «Cargar fichas» del menú con un degradé vertical claro (#ffc56f→#ff9b31) que no existe en la sala,
   mientras el destino de esos mismos clics («CREAR CUENTA», «INGRESAR», «CONTINUAR AL PAGO», «Reintentar») usa el
   degradé propio de Tío Rico (tioricojuegos.css: 105°, #ff8929→#ffaf4b). Se unifica en el de la sala, con el brillo
   superior y la sombra de estructura. Texto #120c05 sobre #ff8929: 8,0:1. Misma especificidad, gana por orden. */
html body > header.site-header .register-button,
html body #mobileMenu .mobile-account > button[data-mobile-action="wallet"] {
  border-color: rgba(255, 191, 102, .7);
  background: linear-gradient(105deg, #ff8929, #ffaf4b);
}

/* ---------------------------------------------------------------------------------------------------------------
   tioricojuegos-critico-04 · Diálogo de acceso: el subtítulo «Introduce tu nombre… para empezar a jugar.» dejaba «jugar.» sola
   en el segundo renglón (834, 1024). Renglones equilibrados, sin cambiar texto ni tamaño. */
html body #authModal .auth-panel > p#authTitle { text-wrap: balance; }

/* ---------------------------------------------------------------------------------------------------------------
   tioricojuegos-critico-05 · Filas de inicio: catalogo-05 da «leve escala al presionar» a las tarjetas, pero en las
   filas la elevación de animated-covers.v5 ("#homeRows .game-card:hover{transform:translateY(-3px)}", 1,2,0) gana y
   al presionar no hay respuesta (con mouse y en táctil, donde :hover acompaña al toque). (1,2,3) sólo para :active. */
@media (prefers-reduced-motion: no-preference) {
  html body main #homeRows .game-card:active { transform: scale(.97); }
}

/* ---------------------------------------------------------------------------------------------------------------
   tioricojuegos-critico-06 (opinión de diseño; prescindible) · Banner del diálogo de acceso/registro: con el arte
   completo de la portada detrás, la placa del logo (catalogo-10) tapa a medias «Jugá. Ganá. Retirá» y el pato de la
   derecha repite la marca: texto cortado y doble logo justo encima de «Crear cuenta». Velo oscuro con desenfoque
   suave sobre la misma imagen (no se cambia background-image, así que no depende de la variante WebP de
   estructura-16): el arte queda como ambiente de color, la placa del logo y la × se leen nítidas y la vista va al
   formulario. Capa propia (::before, z-index -1 dentro del banner aislado); el logo, en flujo, queda encima.
   Área chica y estática: costo de desenfoque bajo también en celulares. */
html body #authModal .tioricojuegos-auth-banner { position: relative; isolation: isolate; }
html body #authModal .tioricojuegos-auth-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 8, 10, .28), rgba(8, 8, 10, .5));
  -webkit-backdrop-filter: blur(3px) saturate(1.15);
  backdrop-filter: blur(3px) saturate(1.15);
}

/* ---------------------------------------------------------------------------------------------------------------
   Revisión de regresiones (01/10, revisores + validadores adversariales). Arreglos probados por los validadores.
   tioricojuegos-phone-01 · Sin sesión, «Cargar» vuelve a ser neutro (abre el ingreso, no la carga): la única acción dorada
   es «Crear cuenta». Con sesión sigue la pastilla dorada. */
@media (max-width: 820px) {
  html body:has(> header.site-header #walletButton.hidden) > nav.mobile-bottom-nav.mobile-nav > button[data-mobile-action="wallet"] { color: #aaa; font-weight: 400; }
  html body:has(> header.site-header #walletButton.hidden) > nav.mobile-bottom-nav.mobile-nav > button[data-mobile-action="wallet"] > img {
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9d6de' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
    box-shadow: none;
  }
}
html body:has(> header.site-header #walletButton.hidden) #mobileMenu .mobile-account > button[data-mobile-action="wallet"] {
  border-color: #ffaf4b;
  background: none;
  color: #f8f7f5;
  box-shadow: none;
}

/* tioricojuegos-wide-02 · Menú del botón M en pantallas bajas (≥821 px de ancho, ≤800 de alto): filas compactas para que
   «Activar notificaciones» siga a la vista con el tope bajo el encabezado. */
@media (min-width: 821px) and (max-height: 800px) {
  html body .multisala-actions .multisala-menu { padding: 8px; }
  html body .multisala-actions .multisala-menu > :is(button, a) { min-height: 38px; padding-block: 5px; }
  html body .multisala-actions .multisala-menu .multisala-rooms { gap: 4px; padding: 6px; margin-bottom: 6px; }
  html body .multisala-actions .multisala-menu .multisala-room { min-height: 34px; padding-block: 6px; }
}

/* tioricojuegos-wide-01 · Tableta horizontal (821–1050): «Crear cuenta» / «Iniciar sesión» recuperan su ancho. */
@media (min-width: 821px) and (max-width: 1050px) {
  html body > header.site-header .login-button,
  html body > header.site-header .register-button { padding-inline: 18px; font-size: 14px; }
}

/* tioricojuegos-modals-01 · Registro en pantallas de 1001–1150 px de alto: el escalón compacto también, para que la línea
   legal no quede cortada (1920×1080). Mismos valores que el bloque ≤1000; rango disjunto. */
@media (min-height: 1001px) and (max-height: 1150px) {
  html body #authModal .tioricojuegos-auth-banner { min-height: 104px; }
  html body #authModal.auth-dialog .auth-panel { padding-top: 22px; padding-bottom: 24px; }
  html body #authModal .auth-panel > h2 { font-size: 26px; line-height: 1.2; }
  html body #authModal .auth-panel > p#authTitle { margin: 4px 0 16px; line-height: 1.4; }
  html body #authModal .auth-mode-tabs { margin-bottom: 16px; }
  html body #authModal .auth-mode-tab { min-height: 44px; }
  html body #authModal :is(#authForm, #authPhoneField, #authPasswordRepeatField) > label { margin: 12px 0 6px; }
  html body #authModal .input-shell { height: 48px; }
  html body #authModal .auth-switch { margin: 10px 0; }
  html body #authModal .auth-operator { margin: 4px 0 0; }
}

/* tioricojuegos-phone-04 · Pie a 320: los enlaces vuelven a 3 renglones (sin perder el área táctil de 44 px). */
@media (max-width: 820px) {
  html body > footer :is(nav, .platform-footer-links) { margin-inline: -8px; }
  html body > footer nav { margin-bottom: 0; }
  html body > footer .platform-footer-links { margin-top: 0; }
}

/* tioricojuegos-phone-05 · El riel de proveedores llega al borde como la fila de accesos y los chips. */
@media (max-width: 820px) {
  html body main > section.provider-rail > #providerTabs.provider-tabs {
    width: auto;
    max-width: none;
    margin-left: calc(-1 * max(var(--tr-g), env(safe-area-inset-left)));
    margin-right: calc(-1 * max(var(--tr-g), env(safe-area-inset-right)));
    padding-left: calc(max(var(--tr-g), env(safe-area-inset-left)) + 7px);
    padding-right: calc(max(var(--tr-g), env(safe-area-inset-right)) + 7px);
    scroll-padding-inline: calc(max(var(--tr-g), env(safe-area-inset-left)) + 7px);
  }
}