/* ==========================================================================
   EL CLUB DE LA PELEA — estilos de la pantalla del asesor y del login.
   Dirección aprobada "A: Vegas + identidad GTA". Tema oscuro único.
   Este archivo NO lo usa el panel de administración: ese va con `panel.css`.
   ========================================================================== */

:root {
  /* La paleta (fondos, oro, agua, rojo, verde, texto, sombra y fuentes) vive en tokens.css
     (UX-18): aquí solo lo que es de esta pantalla. */
  --hueco:        #0a1a20;
  --linea-suave:  rgba(255, 255, 255, .08);
  --vidrio-a:     rgba(20, 49, 58, .92);
  --vidrio-b:     rgba(10, 28, 36, .92);
  --agua-hondo:   #123a44;
  --apagado:      #6a95a0;   /* UX-17: 4,8:1 sobre --superficie; el #4f7480 daba 3,1 */
  --rojo-claro:   #ff8a8a;
  --morado:       #b48cff;
  --plata:        #c9d3d6;
  --bronce:       #d9a679;

  /* Sombras y radios */
  --sombra-corta: 0 12px 26px rgba(0, 0, 0, .42);
  --r-lg:         22px;
  --r-md:         16px;
  --r-sm:         12px;

  --alto-nav:     0px;

  /* T27: UN solo criterio de ancho. La barra superior, la banda de evento y el cuerpo se alinean
     con estas dos medidas; antes la marquesina, la nav y el main tenían tres anchos distintos y
     en escritorio nada coincidía con nada. */
  --ancho-app:    1440px;
  --pad-app:      32px;
  --alto-barra:   72px;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 18% -10%, rgba(53, 224, 214, .16), transparent 60%),
    radial-gradient(700px 500px at 92% 8%, rgba(245, 196, 81, .14), transparent 60%),
    linear-gradient(180deg, var(--suelo-2) 0%, var(--suelo) 60%, var(--suelo) 100%);
  background-attachment: fixed;
  color: var(--texto);
  font-family: var(--fuente);
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--alto-nav);
}

a { color: var(--oro); }
a:hover { color: var(--oro-claro); }

:focus-visible {
  outline: 3px solid var(--agua);
  outline-offset: 2px;
  border-radius: 6px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--hueco); }
::-webkit-scrollbar-thumb { background: #1e4450; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #2a5f6d; }

.oculto { display: none !important; }

/* ---------- Tipografía base ---------------------------------------------- */

.bebas {
  font-family: var(--fuente-titulos);
  letter-spacing: .04em;
  font-weight: 400;
}

.k {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tenue);
}

.oro-texto {
  background: linear-gradient(180deg, var(--oro-claro), var(--oro) 45%, var(--oro-oscuro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.num { font-variant-numeric: tabular-nums; }
.tenue { color: var(--tenue); }
.suave { color: var(--texto-2); }
.mini  { font-size: 12px; }

/* ---------- Piezas comunes ----------------------------------------------- */

.vidrio {
  background: linear-gradient(160deg, var(--vidrio-a), var(--vidrio-b));
  border: 1px solid rgba(53, 224, 214, .18);
  box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 255, 255, .06);
  border-radius: var(--r-lg);
}

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pastilla.oro   { background: rgba(245, 196, 81, .12); border: 1px solid rgba(245, 196, 81, .5); color: var(--oro); }
.pastilla.agua  { background: rgba(53, 224, 214, .10); border: 1px solid rgba(53, 224, 214, .5); color: var(--agua); }
.pastilla.verde { background: rgba(75, 227, 143, .12); border: 1px solid rgba(75, 227, 143, .5); color: var(--verde); }
.pastilla.roja  { background: rgba(224, 75, 75, .14); border: 1px solid rgba(224, 75, 75, .6); color: var(--rojo-claro); }
.pastilla.gris  { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: var(--texto-2); }

.estado {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--texto-2);
}
.estado.pendiente, .estado.solicitado { background: rgba(245, 196, 81, .12); border-color: rgba(245, 196, 81, .45); color: var(--oro); }
.estado.confirmado, .estado.disponible, .estado.aprobado, .estado.entregado { background: rgba(75, 227, 143, .12); border-color: rgba(75, 227, 143, .45); color: var(--verde); }
.estado.pagado, .estado.usado { background: rgba(53, 224, 214, .10); border-color: rgba(53, 224, 214, .45); color: var(--agua); }
.estado.anulado, .estado.rechazado, .estado.vencida { background: rgba(224, 75, 75, .12); border-color: rgba(224, 75, 75, .45); color: var(--rojo-claro); }
.estado.reserva { background: rgba(180, 140, 255, .12); border-color: rgba(180, 140, 255, .45); color: var(--morado); }

/* Botones */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
  color: var(--texto);
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, filter .18s ease;
}
.boton:hover:not(:disabled) { transform: translateY(-1px); background: rgba(255, 255, 255, .12); }
.boton:active:not(:disabled) { transform: translateY(0) scale(.98); }
.boton:disabled { opacity: .45; cursor: not-allowed; filter: saturate(.5); }

.boton.oro {
  background: linear-gradient(180deg, var(--oro-claro), var(--oro) 45%, var(--oro-oscuro));
  border-color: rgba(255, 224, 138, .8);
  color: var(--oro-tinta);
  box-shadow: 0 0 22px rgba(245, 196, 81, .35);
}
.boton.oro:hover:not(:disabled) { box-shadow: 0 0 32px rgba(245, 196, 81, .55); }

.boton.agua {
  background: rgba(53, 224, 214, .12);
  border-color: rgba(53, 224, 214, .55);
  color: var(--agua);
}
.boton.agua:hover:not(:disabled) { background: rgba(53, 224, 214, .2); }

.boton.chico { padding: 7px 14px; font-size: 12px; }
.boton.ancho { width: 100%; }

/* Campos */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > label { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }

input, select, textarea {
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  color: var(--texto);
  background: var(--hueco);
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--agua); outline: none; box-shadow: 0 0 0 3px rgba(53, 224, 214, .18); }
input::placeholder { color: var(--apagado); }

/* Barras de progreso */
.barra {
  height: 12px;
  border-radius: 999px;
  background: var(--hueco);
  border: 1px solid var(--linea);
  overflow: hidden;
  position: relative;
}
.barra > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--agua), var(--oro));
  box-shadow: 0 0 18px rgba(245, 196, 81, .55);
  transition: width .6s cubic-bezier(.22, 1, .36, 1);
}
.barra > i.prov { background: linear-gradient(90deg, rgba(53, 224, 214, .55), rgba(53, 224, 214, .25)); box-shadow: none; position: absolute; inset: 0 auto 0 0; }
.barra.fina { height: 8px; }

/* Semáforo de la meta diaria del equipo (T6). El color lo manda el servidor; aquí solo hay pintura.
   Amarillo y rojo se ven distintos también en brillo, no solo en tono: la barra tiene que leerse
   de un vistazo en una pantalla de celular con sol encima. */
.barra > i.rojo     { background: linear-gradient(90deg, #b83a3a, var(--rojo)); box-shadow: 0 0 14px rgba(224, 75, 75, .45); }
.barra > i.amarillo { background: linear-gradient(90deg, #d9a02f, #f5c451); box-shadow: 0 0 14px rgba(245, 196, 81, .45); }
.barra > i.verde    { background: linear-gradient(90deg, #2f9e6a, var(--verde)); box-shadow: 0 0 16px rgba(75, 227, 143, .5); }
.pastilla.rojo     { background: rgba(224, 75, 75, .14); border: 1px solid rgba(224, 75, 75, .6); color: var(--rojo-claro); }
.pastilla.amarillo { background: rgba(245, 196, 81, .14); border: 1px solid rgba(245, 196, 81, .55); color: #f5c451; }

/* Esqueleto de carga */
.esq {
  border-radius: 10px;
  background: linear-gradient(90deg, #102934 25%, #1a3b48 37%, #102934 63%);
  background-size: 400% 100%;
  animation: brillo 1.5s ease infinite;
  color: transparent !important;
  min-height: 14px;
}
@keyframes brillo { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.vacio {
  padding: 18px;
  text-align: center;
  color: var(--tenue);
  font-size: 13px;
  border: 1px dashed var(--linea);
  border-radius: var(--r-md);
}

/* ==========================================================================
   Marquesina superior
   ========================================================================== */

.marquesina {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 10px 22px 0;
  background: linear-gradient(180deg, rgba(8, 21, 27, .96) 60%, rgba(8, 21, 27, 0));
  backdrop-filter: blur(8px);
}

/* --------------------------------------------------------------------------
   Barra superior de la app (T27.1): 72 px, tres zonas, a todo el ancho.
   SIN backdrop-filter a propósito: un filtro en un ancestro convierte a ese
   ancestro en el bloque contenedor de sus hijos `position: fixed`, y la nav
   vive dentro de la barra. Con blur aquí, la barra inferior del móvil dejaría
   de pegarse abajo. La barra es opaca, no lo necesita.
   -------------------------------------------------------------------------- */
.barra-sup {
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(180deg, var(--superficie), var(--suelo-2));
  border-bottom: 1px solid var(--linea);
}
.barra-sup-cuerpo {
  max-width: var(--ancho-app);
  margin: 0 auto;
  padding: 0 var(--pad-app);
  height: var(--alto-barra);
  display: flex;
  align-items: center;
  gap: 24px;
}
.zona-marca { display: flex; align-items: center; gap: 12px; flex: none; }
.zona-marca .logo-gta { width: 40px; height: 40px; border-radius: 11px; }
.zona-marca .titulo-app { font-size: 24px; }
.marca-sub {
  font-size: 12px;
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--apagado);
  margin-top: 2px;
}
/* `min-width: 0` también aquí (T47): sin él, el nombre largo de un asesor estira el bloque de
   estado por encima de su contenido y se come el sitio de la navegación. */
.zona-estado { display: flex; align-items: center; gap: 14px; margin-left: auto; flex: none; min-width: 0; }
.sep-barra { width: 1px; height: 32px; background: var(--linea); flex: none; }

/* La nav ocupa el hueco del medio y es lo único que se encoge: la marca y el estado no se
   deforman. En escritorio NO se desliza (T47): lo que no cabe se va al menú "Más", porque una
   barra que se desplaza con el ratón esconde secciones enteras sin decirlo. */
.barra-sup .nav { flex: 1 1 auto; min-width: 0; padding: 0; overflow: visible; flex-wrap: nowrap; }
/* Ítems ajustados (T47): cada píxel de relleno que se quita aquí es un ítem más que se queda a
   la vista en vez de irse al menú "Más". Dentro del desplegable vuelven a respirar. */
.barra-sup .nav button {
  padding: 9px 10px;
  border-radius: 10px;
  border-color: transparent;
  background: none;
  font-size: 12.5px;
  gap: 6px;
}
.barra-sup .nav-mas-lista button { padding: 9px 12px; gap: 8px; }
.barra-sup .nav button:hover { color: var(--texto); background: rgba(255, 255, 255, .05); border-color: transparent; }
/* El activo se marca con un tinte, no con la pastilla dorada llena: el oro se reserva para el
   saldo y los premios (obs. 5, "el marco dorado en todo"). */
.barra-sup .nav button.activo {
  background: rgba(245, 196, 81, .12);
  border-color: transparent;
  color: var(--oro);
  box-shadow: none;
}
.barra-sup .nav button.activo .globo { background: var(--rojo); color: #fff; }

.barra-sup .saldo-beky .cifra { font-size: 32px; }
.barra-sup .saldo-beky .k { font-size: 12px; letter-spacing: .14em; }
.saldo-fila { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; }
.saldo-fila .mini { margin-top: 0; }
.barra-sup .reloj {
  background: none;
  border: 0;
  padding: 0;
  color: var(--agua);
  font-size: 12px;
  font-weight: 700;
}
.barra-sup .chip-usuario .avatar { width: 30px; height: 30px; font-size: 14px; }

/* ------------------------------------------------------------------ T47
   Menú "Más": el desborde de la navegación. Vive dentro de la propia barra de
   secciones para que ocupe sitio en la misma cuenta que los demás ítems.
   ---------------------------------------------------------------------- */
.nav-mas { position: relative; flex: none; }
.nav-mas.oculto { display: none; }
.nav-mas-boton {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: none;
  color: var(--texto-2);
  font-family: inherit;
  font-weight: 800;
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
}
.nav-mas-boton:hover { color: var(--texto); background: rgba(255, 255, 255, .05); }
.nav-mas-lista {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  min-width: 210px;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--linea);
  background: var(--superficie);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .55);
}
.nav-mas-lista.oculto { display: none; }
/* Dentro del desplegable los ítems son filas, no pastillas: es una lista, no una barra. */
.nav-mas-lista button {
  width: 100%;
  justify-content: flex-start;
  border-radius: 10px;
}

/* El chip del usuario nunca empuja: nombre y rol se recortan con puntos suspensivos y el nombre
   completo queda en el `title`. */
.chip-usuario .chip-textos { min-width: 0; max-width: 190px; }
.chip-usuario .chip-nombre { font-weight: 800; font-size: 12px; line-height: 1.15; }
.chip-usuario .chip-nivel { font-size: 12px; color: var(--oro); font-weight: 800; letter-spacing: .06em; }
.chip-usuario .chip-nombre,
.chip-usuario .chip-nivel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.marco-bombillas {
  border-radius: var(--r-lg);
  padding: 5px;
  background: linear-gradient(160deg, var(--oro), #8a5d12);
  box-shadow: 0 22px 46px rgba(0, 0, 0, .5);
}
/* Anillo de bombillas: una fila de puntos por cada borde, en persecución horaria. */
.bombillas {
  border-radius: 18px;
  padding: 11px;
  background-image:
    radial-gradient(circle 2.5px at center, var(--oro) 96%, transparent),
    radial-gradient(circle 2.5px at center, var(--oro) 96%, transparent),
    radial-gradient(circle 2.5px at center, var(--oro) 96%, transparent),
    radial-gradient(circle 2.5px at center, var(--oro) 96%, transparent);
  background-size: 18px 11px, 18px 11px, 11px 18px, 11px 18px;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  animation: correbombillas 1.5s steps(3) infinite;
}
@keyframes correbombillas {
  to { background-position: 18px 0, -18px 100%, 0 -18px, 100% 18px; }
}

.marquesina-cuerpo {
  border-radius: 14px;
  background: linear-gradient(160deg, #10303a, #081a21);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* BEKI, la mascota: el SVG ya trae la teja teal con el filo dorado, asi que aqui
   solo queda el tamano y el resplandor de la marquesina. */
.logo-gta {
  width: 46px; height: 46px;
  border-radius: 14px;
  flex: none;
  display: block;
  box-shadow: 0 0 24px rgba(245, 196, 81, .45);
}

.titulo-app {
  font-family: var(--fuente-titulos);
  font-size: 30px;
  line-height: 1;
  letter-spacing: .05em;
  background: linear-gradient(180deg, #fff3cd, var(--oro) 55%, var(--oro-oscuro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 26px rgba(245, 196, 81, .25);
  white-space: nowrap;
}

.marquesina-derecha {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Iconos dibujados (T27.3). El sprite no se ve; cada icono hereda el color del texto que lo
   acompana, asi que el boton activo tine tambien su icono sin una sola regla de color extra. */
.sprite-iconos { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico, .ico-grande {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.ico { width: 18px; height: 18px; }
.ico-grande { width: 34px; height: 34px; stroke-width: 1.4; }

/* La moneda BEKY: se alinea con el texto que la acompana, sea cual sea su tamano. */
.ico-beky { width: 1em; height: 1em; vertical-align: -.14em; display: inline-block; }

.saldo-beky { text-align: right; line-height: 1; }
.saldo-beky .k { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.saldo-beky .cifra {
  font-family: var(--fuente-titulos);
  font-size: 42px;
  letter-spacing: .02em;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro) 45%, var(--oro-oscuro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
}
.saldo-beky .cifra.sube { animation: golpe .5s ease; }
@keyframes golpe { 0% { transform: scale(1); } 40% { transform: scale(1.16); filter: brightness(1.4); } 100% { transform: scale(1); } }

.chip-usuario {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 14px 5px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
}
.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  flex: none;
  background: linear-gradient(160deg, var(--agua), var(--agua-oscuro));
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: #062026;
  font-weight: 800;
}
.avatar.mini { width: 28px; height: 28px; font-size: 14px; }
.avatar.oro { background: linear-gradient(160deg, var(--oro-claro), var(--oro-oscuro)); }

.reloj {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 13px;
  color: var(--agua);
  background: rgba(53, 224, 214, .08);
  border: 1px solid rgba(53, 224, 214, .35);
  border-radius: 999px;
  padding: 8px 13px;
  white-space: nowrap;
}

.menu-envoltura { position: relative; }
.boton-menu {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: var(--texto);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
.menu-lista {
  position: absolute;
  right: 0; top: calc(100% + 8px);
  min-width: 200px;
  background: #0e2a34;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  box-shadow: var(--sombra);
  padding: 6px;
  z-index: 60;
}
.menu-lista button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: 0;
  border-radius: 10px;
  color: var(--texto);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.menu-lista button:hover { background: rgba(53, 224, 214, .12); }

/* Música de fondo: el interruptor y su volumen viajan juntos, porque un volumen suelto sin saber
   si la música está encendida no le dice nada a nadie. */
.menu-musica { border-top: 1px solid var(--linea); margin-top: 4px; padding-top: 4px; }
.menu-vol {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 10px;
  font-size: 12px; font-weight: 700;
  color: var(--texto-2);
}
.menu-vol input[type="range"] { flex: 1; min-width: 90px; accent-color: var(--oro); cursor: pointer; }

/* ==========================================================================
   Banner de evento
   ========================================================================== */

.banda-evento {
  width: calc(100% - 2 * var(--pad-app));
  max-width: calc(var(--ancho-app) - 2 * var(--pad-app));
  margin: 14px auto 0;
  border-radius: var(--r-lg);
  padding: 2px;
  background: linear-gradient(100deg, var(--oro), var(--agua), var(--oro));
  background-size: 220% 100%;
  animation: correbanda 4s linear infinite;
  box-shadow: 0 0 34px rgba(245, 196, 81, .28);
}
@keyframes correbanda { 0% { background-position: 0 0; } 100% { background-position: 220% 0; } }

.banda-evento-cuerpo {
  border-radius: 20px;
  background: linear-gradient(160deg, #14323d, #0a1e26);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.multiplicador {
  font-family: var(--fuente-titulos);
  font-size: 46px;
  line-height: .9;
  color: var(--oro);
  text-shadow: 0 0 22px rgba(245, 196, 81, .6);
  animation: latido 1.6s ease-in-out infinite;
}
@keyframes latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.cuenta-atras {
  font-family: var(--fuente-titulos);
  font-size: 30px;
  letter-spacing: .06em;
  color: var(--agua);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  text-align: right;
  line-height: 1;
}

/* ==========================================================================
   Navegación por secciones
   ========================================================================== */

.nav {
  display: flex;
  gap: 8px;
  padding: 16px 22px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: var(--texto-2);
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: all .16s ease;
}
.nav button:hover { color: var(--texto); border-color: rgba(53, 224, 214, .4); }
.nav button.activo {
  background: linear-gradient(180deg, var(--oro-claro), var(--oro) 50%, var(--oro-oscuro));
  border-color: var(--oro-claro);
  color: var(--oro-tinta);
  box-shadow: 0 0 20px rgba(245, 196, 81, .38);
}
.nav .globo {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--rojo);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.nav button.activo .globo { background: var(--oro-tinta); color: var(--oro); }

main { padding: 24px var(--pad-app) 40px; max-width: var(--ancho-app); margin: 0 auto; }

.rejilla-hoy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  align-items: start;
}

/* Racha y misiones comparten fila en escritorio: la racha es un dato corto y ocupaba el ancho
   entero, empujando las misiones fuera de la primera pantalla. */
.rejilla-racha {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.rejilla-racha .racha-caja { flex-direction: column; align-items: flex-start; gap: 14px; }
.rejilla-racha .racha-caja > div { min-width: 0 !important; width: 100%; }
.columna { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.tarjeta { padding: 22px 24px; }
.tarjeta-cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.tarjeta-cab h2 {
  font-family: var(--fuente-titulos);
  font-size: 32px;
  line-height: 1;
  margin: 4px 0 0;
  font-weight: 400;
  letter-spacing: .04em;
}

/* ==========================================================================
   Rodillos (carretes de tragamonedas)
   ========================================================================== */

/* Cuatro columnas, pero no cuatro iguales: la primera manda (T27.2). */
.rodillos {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 16px;
}
.carrete {
  border-radius: 20px;
  padding: 20px;
  text-align: left;
  background: var(--suelo-2);
  border: 1px solid var(--linea);
  position: relative;
  overflow: hidden;
}
.carrete::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), transparent);
  pointer-events: none;
}
.carrete .k { color: var(--tenue); letter-spacing: .14em; }
.carrete .cifra {
  font-family: var(--fuente-titulos);
  font-size: 40px;
  line-height: 1;
  margin-top: 8px;
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}
.carrete .pie { font-size: 12px; color: var(--tenue); font-weight: 700; margin-top: 5px; min-height: 14px; }

/* El cobrado del dia: el unico numero de esta fila que paga BEKY y ordena el ranking. */
.carrete.principal {
  border-color: var(--agua-oscuro);
  background: linear-gradient(160deg, var(--superficie-2), var(--suelo-2));
}
.carrete.principal .k { color: var(--agua); }
.carrete.principal .cifra { font-size: 60px; margin-top: 6px; color: var(--texto); }

.carrete.beky { border-color: var(--oro-oscuro); background: linear-gradient(160deg, var(--oro-tinta), var(--suelo-2)); }
.carrete.beky .k { color: var(--oro); }
.carrete.beky .cifra { color: var(--oro); }
.carrete.gira .cifra { animation: rodar .5s ease; }
@keyframes rodar { 0% { transform: translateY(-26px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

/* ==========================================================================
   Mapa: pista de nodos estilo Candy Crush
   ========================================================================== */

.campana-mapa + .campana-mapa { margin-top: 18px; }

/* El marcador sobresale por arriba y el tooltip de cada escalón por los lados, así que la pista
   NO puede recortar: `overflow-x: auto` obligaba al navegador a recortar también en vertical y se
   comía los dos. Las columnas son una rejilla que se encoge (minmax(0,1fr)), que era la única razón
   por la que hacía falta el scroll horizontal. */
.pista {
  position: relative;
  margin: 8px 0 6px;
  min-height: 120px;
  overflow: visible;
  padding: 46px 0 6px;
}
.pista-interior { position: relative; min-width: 100%; }
/* El riel va de punta a punta y en la MISMA escala que los nodos: el nodo i cae en (i+½)/n del
   ancho, así que un relleno del 37,5 % termina justo bajo el segundo escalón de cuatro. Cuando el
   riel estaba metido 30 px por lado, el globo del marcador señalaba un escalón que no era el suyo. */
.riel {
  position: absolute;
  left: 0; right: 0; top: 22px;
  height: 10px;
  border-radius: 999px;
  background: var(--hueco);
  border: 1px solid var(--linea);
}
.riel-lleno {
  position: absolute;
  left: 0; top: 22px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--agua), var(--oro));
  box-shadow: 0 0 20px rgba(245, 196, 81, .6);
  transition: width .8s cubic-bezier(.22, 1, .36, 1);
}
.riel-prov {
  position: absolute;
  left: 0; top: 22px;
  height: 10px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(53, 224, 214, .55) 0 8px, rgba(53, 224, 214, .18) 8px 16px);
  transition: width .8s cubic-bezier(.22, 1, .36, 1);
}
/* Ancho cero: el palito queda clavado en el punto exacto y el globo se centra solo sobre él. El
   empuje lateral del globo lo pone el JS, para que en los extremos no se salga de la tarjeta. */
.marcador {
  position: absolute;
  top: -42px;
  width: 0;
  display: flex; flex-direction: column; align-items: center;
  z-index: 3;
  transition: left .8s cubic-bezier(.22, 1, .36, 1);
}
.marcador .globo-valor {
  background: linear-gradient(160deg, var(--agua), var(--agua-oscuro));
  color: #062026;
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 0 16px rgba(53, 224, 214, .8);
  white-space: nowrap;
}
.marcador .palo { width: 2px; height: 14px; background: var(--agua); }

.nodos {
  position: relative;
  display: grid;
  gap: 0;
  z-index: 2;
}
.nodo-col {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 0;
  text-align: center;
}
.nodo {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fuente-titulos);
  font-size: 19px;
  letter-spacing: .03em;
  flex: none;
}
.nodo.hecho {
  background: radial-gradient(circle at 35% 30%, #ffe8a8, var(--oro) 55%, #b7801f);
  color: var(--oro-tinta);
  box-shadow: 0 0 0 4px #0b1a22, 0 0 26px rgba(245, 196, 81, .75);
}
.nodo.prov {
  background: #0f2a33;
  border: 3px dashed var(--agua);
  color: var(--agua);
  box-shadow: 0 0 22px rgba(53, 224, 214, .45);
}
.nodo.bloq { background: #0f2129; border: 3px solid var(--linea); color: var(--apagado); }
/* Lo que hay que HACER manda sobre lo que paga: el objetivo va en grande y el premio debajo. Antes
   el sitio del objetivo lo ocupaba el premio (repetido dos veces) y la escalera no decía en ningún
   lado cuánto había que vender para cobrarla. */
.nodo-col .objetivo { font-size: 30px; line-height: 1; color: var(--texto); margin-top: 4px; }
.nodo-col .umbral { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.nodo-col .premio {
  font-size: 14px; font-weight: 800; line-height: 1; color: var(--agua);
  background: rgba(53, 224, 214, .12); border: 1px solid var(--agua-oscuro);
  border-radius: 999px; padding: 6px 13px;
}
.nodo-col.bloqueada .objetivo, .nodo-col.bloqueada .umbral { color: #6d8f97; }
.nodo-col.bloqueada .premio { color: #8fb0b8; background: var(--hueco); border-color: var(--linea); }
.nodo-col.proxima .objetivo { color: var(--agua); }
.nodo-col .nota { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--agua); }

/* Tooltip por escalón: qué cuenta y cuándo se paga. Se abre con el ratón y con el teclado
   (:focus-within sobre la columna, que lleva tabindex) porque el dato no puede quedar solo para
   quien usa ratón. */
.nodo-col .tip {
  position: absolute;
  left: 50%; bottom: 100%;
  transform: translate(-50%, 4px);
  opacity: 0; visibility: hidden;
  transition: opacity .18s, transform .18s, visibility .18s;
  pointer-events: none;
  width: 232px;
  background: #143a45;
  border: 1px solid var(--agua);
  border-radius: 14px;
  padding: 12px 14px;
  text-align: left;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .45);
  z-index: 9;
}
.nodo-col .tip b { display: block; font-size: 13px; font-weight: 800; margin-bottom: 5px; color: var(--texto); }
.nodo-col .tip span { display: block; font-size: 12px; line-height: 1.5; color: var(--texto-2); }
.nodo-col:hover .tip, .nodo-col:focus-within .tip { opacity: 1; visibility: visible; transform: translate(-50%, -8px); }
.nodo-col:focus-visible { outline: 2px solid var(--agua); outline-offset: 6px; border-radius: 12px; }
/* La tarjeta con el ratón encima se pone por delante de las siguientes: si no, el tooltip del
   último escalón se mete debajo de la tarjeta de abajo. */
.campana-mapa { position: relative; z-index: 1; }
.campana-mapa:hover, .campana-mapa:focus-within { z-index: 4; }

/* Encabezado de la ruta y jerarquía de medidores (T28.3) --------------------
   El ingreso real ocupa la tarjeta ancha de arriba y los otros dos van en fila abajo: es la única
   manera de que la pantalla diga, sin explicarlo, cuál de los tres le paga más al asesor. */
.ruta-cab { margin: 0 0 22px; }
.ruta-cab .k { font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--tenue); text-transform: uppercase; }
.ruta-cab h1 { font-size: 46px; line-height: 1; margin: 6px 0 0; color: var(--texto); }
.ruta-cab p { margin: 8px 0 0; max-width: 62ch; }

.ruta-secundarias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.ruta-secundarias .campana-mapa + .campana-mapa { margin-top: 0; }
.campana-mapa.compacta { padding: 22px 24px; }
.campana-mapa.compacta .tarjeta-cab h2 { font-size: 24px; }

.chips-escalones { display: flex; gap: 10px; margin-top: 14px; }
.chip-esc {
  flex: 1 1 0; min-width: 0;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 12px; padding: 12px 14px;
}
.chip-esc .chip-meta { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--tenue); }
.chip-esc .chip-premio { font-size: 15px; font-weight: 800; color: var(--texto); margin-top: 4px; }
.chip-esc.proxima { background: rgba(53, 224, 214, .10); border-color: var(--agua-oscuro); }
.chip-esc.proxima .chip-meta, .chip-esc.proxima .chip-premio { color: var(--agua); }
.chip-esc.bloqueada .chip-meta, .chip-esc.bloqueada .chip-premio { color: #8fb0b8; }
.chip-esc:not(.proxima):not(.bloqueada) { background: rgba(245, 196, 81, .10); border-color: var(--oro-oscuro); }
.chip-esc:not(.proxima):not(.bloqueada) .chip-premio { color: var(--oro); }
.chip-esc .nota { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--agua); margin-top: 6px; }

/* Versión lista (móvil) */
.pista-lista { display: none; flex-direction: column; gap: 10px; margin-top: 14px; }
.pista-fila { display: flex; align-items: center; gap: 12px; }
.pista-fila .nodo { width: 40px; height: 40px; font-size: 15px; }
.pista-fila .conector { flex: 1; height: 6px; border-radius: 999px; background: var(--hueco); border: 1px solid var(--linea); }
.pista-fila.lograda .conector { background: linear-gradient(90deg, var(--agua), var(--oro)); border-color: transparent; }
.pista-fila .datos { width: 152px; display: flex; justify-content: space-between; font-size: 13px; gap: 8px; }
.pista-fila .datos b { font-weight: 800; }
.pista-fila .datos span { color: var(--oro); font-weight: 800; }
.pista-fila.bloqueada .datos, .pista-fila.bloqueada .datos b { color: #6d8f97; }
.pista-fila.bloqueada .datos span { color: #6d8f97; }
.pista-fila.proxima .datos, .pista-fila.proxima .datos b, .pista-fila.proxima .datos span { color: var(--agua); }

/* Anillo de meta */
.anillo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* Días de racha (campaña tipo racha) */
.dias-racha { display: flex; gap: 8px; flex-wrap: wrap; }
.dia-caja {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  border: 2px solid var(--linea);
  color: var(--apagado);
}
.dia-caja.si { background: var(--oro); border-color: var(--oro); color: var(--oro-tinta); }
.dia-caja.prov { border: 2px dashed var(--agua); color: var(--agua); }

/* ==========================================================================
   Racha, combo, misiones
   ========================================================================== */

.racha-caja { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.llama {
  position: relative;
  width: 92px; height: 92px;
  flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 65%, rgba(245, 196, 81, .35), rgba(224, 75, 75, .18) 60%, transparent 72%);
}
.llama .emoji {
  width: 50px; height: 50px;
  fill: none; stroke: var(--oro); stroke-width: 1.5; stroke-linejoin: round;
  filter: drop-shadow(0 0 14px rgba(245, 196, 81, .8));
  animation: flamear 2.2s ease-in-out infinite;
}
.llama .dias {
  position: absolute; right: 2px; bottom: 4px;
  font-family: var(--fuente-titulos);
  font-size: 26px;
  color: var(--oro-tinta);
  background: linear-gradient(160deg, var(--oro-claro), var(--oro-oscuro));
  border-radius: 999px;
  min-width: 34px;
  padding: 0 8px;
  text-align: center;
  border: 2px solid #0b1a22;
}
@keyframes flamear { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.09) rotate(2deg); } }
.llama.apagada .emoji { stroke: var(--apagado); filter: none; animation: none; }

.misiones { display: flex; flex-direction: column; gap: 10px; }
.mision {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--linea-suave);
}
.mision .cuerpo { flex: 1; min-width: 0; }
.mision .titulo { font-weight: 800; font-size: 14px; }
.mision.cumplida { background: rgba(75, 227, 143, .08); border-color: rgba(75, 227, 143, .35); }
.mision.vencida { opacity: .5; }
.mision .marca {
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--linea);
  color: var(--apagado);
  font-weight: 800;
}
.mision.cumplida .marca { background: var(--verde); border-color: var(--verde); color: #05261a; }
.mision .recompensa { font-family: var(--fuente-titulos); font-size: 22px; color: var(--oro); flex: none; }
/* Misión del EQUIPO: el mismo bloque, pero apilado. El progreso del equipo necesita la barra a lo
   ancho y el pie dice cuándo se paga; en una fila horizontal no entraba sin encoger el título. */
.mision-eq { flex-direction: column; align-items: stretch; }

/* T69-P4 — quién aportó. Un marcador colectivo sin nombres no mueve a nadie: la fila del que
   está mirando se resalta, porque el número que le importa es el suyo dentro del total. */
.aportes { display: flex; flex-direction: column; gap: 8px; }
.aporte-fila {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: var(--r-md, 12px);
  background: rgba(255, 255, 255, .03); border: 1px solid var(--linea);
}
.aporte-fila.yo { border-color: rgba(53, 224, 214, .45); background: rgba(53, 224, 214, .07); }

/* ==========================================================================
   Campana de ventas (feed)
   ========================================================================== */

.feed { display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow-y: auto; padding-right: 4px; }
.feed-fila {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--linea-suave);
  font-size: 13px;
}
.feed-fila.mia { background: rgba(245, 196, 81, .1); border-color: rgba(245, 196, 81, .4); }
/* T70-U4 · Una VENTA se ve distinta a todo lo demás del muro: es lo único que José quiere que se
   note. Lo propio que no es venta (un nivel del pase, 25 BEKY del rasca) baja de tamaño y de
   contraste en vez de desaparecer: sigue estando, pero deja de competir con la venta de al lado. */
.feed-fila.campana {
  border-color: rgba(245, 196, 81, .55);
  background:
    linear-gradient(90deg, rgba(245, 196, 81, .16), rgba(255, 255, 255, .04) 55%);
  box-shadow: inset 3px 0 0 var(--oro);
  font-size: 13.5px;
}
.feed-fila.campana.nueva { animation: entrafeed .5s cubic-bezier(.22, 1, .36, 1), tanido 1.1s ease-out; }
@keyframes tanido {
  0% { box-shadow: inset 3px 0 0 var(--oro), 0 0 0 0 rgba(245, 196, 81, .55); }
  60% { box-shadow: inset 3px 0 0 var(--oro), 0 0 0 10px rgba(245, 196, 81, 0); }
  100% { box-shadow: inset 3px 0 0 var(--oro), 0 0 0 0 rgba(245, 196, 81, 0); }
}
.feed-fila.propia-menor { opacity: .82; font-size: 12.5px; }
.feed-campana { color: var(--oro); }
@media (prefers-reduced-motion: reduce) {
  .feed-fila.campana.nueva { animation: none; }
}
.feed-fila.nueva { animation: entrafeed .5s cubic-bezier(.22, 1, .36, 1); }
@keyframes entrafeed { 0% { transform: translateY(-12px) scale(.96); opacity: 0; } 100% { transform: none; opacity: 1; } }
.feed-fila .hora { margin-left: auto; font-size: 12px; color: var(--apagado); white-space: nowrap; flex: none; }
.feed-fila b { color: #fff; }
.sello-yo {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--oro);
  color: var(--oro-tinta);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* Capas de efectos */
.capa-confeti, .capa-flotantes {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 90;
}
.capa-flotantes { display: flex; align-items: flex-start; justify-content: center; padding-top: 16vh; }
.flotante {
  font-family: var(--fuente-titulos);
  font-size: 64px;
  letter-spacing: .04em;
  color: var(--oro);
  text-shadow: 0 0 30px rgba(245, 196, 81, .85), 0 6px 20px rgba(0, 0, 0, .6);
  animation: sube 1.8s cubic-bezier(.2, .8, .3, 1) forwards;
  position: absolute;
}
@keyframes sube {
  0%   { transform: translateY(30px) scale(.6); opacity: 0; }
  18%  { transform: translateY(0) scale(1.12); opacity: 1; }
  70%  { transform: translateY(-40px) scale(1); opacity: 1; }
  100% { transform: translateY(-110px) scale(.9); opacity: 0; }
}

/* ==========================================================================
   Ruleta
   ========================================================================== */

.ruleta-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.rueda-envoltura { position: relative; display: flex; flex-direction: column; align-items: center; }
.rueda-caja { position: relative; width: 100%; max-width: 470px; aspect-ratio: 1; }
.rueda-caja canvas { width: 100%; height: 100%; display: block; filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .6)); }
.aguja {
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 0; height: 0;
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  border-top: 38px solid var(--rojo);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6));
}
.aguja.golpe { animation: golpeaguja .18s ease; }
@keyframes golpeaguja { 50% { transform: translateX(-50%) rotate(-11deg); } }

/* T30 · BEKI en el buje de la rueda. Tres fases encadenadas por clases desde el JS, todas en CSS
   puro: acelera mientras la rueda corre, frena con rebote elástico y queda mareada con estrellitas.
   El ancho va en % de la caja porque la rueda se dibuja entre 220 y 560 px según la pantalla. */
.rueda-hub { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; pointer-events: none; }
.rueda-hub[hidden] { display: none; }
.rueda-beki { width: 15.5%; height: auto; display: block; filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .55)); }
.rueda-hub.girando .rueda-beki { animation: bekiAcelera var(--giro-dur, 4600ms) cubic-bezier(.55, 0, .9, .45) both; }
.rueda-hub.frena   .rueda-beki { animation: bekiFrena .9s cubic-bezier(.25, .9, .3, 1) both; }
.rueda-hub.mareado .rueda-beki { animation: bekiMareado 1.3s ease-in-out 2; }
@keyframes bekiAcelera { from { transform: rotate(0deg); } to { transform: rotate(2160deg); } }
/* El rebote es el frenazo: se pasa, vuelve, se vuelve a pasar menos. */
@keyframes bekiFrena {
  0%   { transform: rotate(0deg) scale(1); }
  35%  { transform: rotate(34deg) scale(1.07); }
  60%  { transform: rotate(-19deg) scale(.97); }
  80%  { transform: rotate(9deg) scale(1.02); }
  100% { transform: rotate(0deg) scale(1); }
}
@keyframes bekiMareado { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }

/* Las estrellitas del mareo giran sobre la cabeza y solo existen en la fase mareado. */
.beki-estrellas { position: absolute; left: 50%; top: 50%; width: 22%; height: 22%; margin: -14% 0 0 -11%; opacity: 0; }
.rueda-hub.mareado .beki-estrellas { opacity: 1; animation: bekiOrbita 1.5s linear 2; }
.beki-estrellas i {
  position: absolute;
  font-style: normal;
  font-size: clamp(11px, 2.6vw, 18px);
  line-height: 1;
  color: var(--oro, #f5c451);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
.beki-estrellas i:nth-child(1) { left: 50%; top: -18%; transform: translateX(-50%); }
.beki-estrellas i:nth-child(2) { left: 2%;  top: 26%; }
.beki-estrellas i:nth-child(3) { left: 88%; top: 26%; }
@keyframes bekiOrbita { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .rueda-hub .rueda-beki, .rueda-hub .beki-estrellas { animation: none !important; }
  .rueda-hub .beki-estrellas { opacity: 0; }
}

.boton-girar {
  margin-top: 16px;
  padding: 15px 40px;
  font-family: var(--fuente-titulos);
  font-size: 30px;
  letter-spacing: .07em;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro) 45%, var(--oro-oscuro));
  color: var(--oro-tinta);
  box-shadow: 0 0 34px rgba(245, 196, 81, .55), 0 12px 24px rgba(0, 0, 0, .5);
  transition: transform .12s ease, box-shadow .2s ease;
}
.boton-girar:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 48px rgba(245, 196, 81, .75), 0 14px 26px rgba(0, 0, 0, .5); }
.boton-girar:disabled { opacity: .5; cursor: not-allowed; }

.lista-simple { display: flex; flex-direction: column; }
.lista-simple > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linea-suave);
  font-size: 13px;
}
.lista-simple > div:last-child { border-bottom: 0; }

/* ==========================================================================
   Cofres
   ========================================================================== */

.cofres-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.cofre-carta {
  border-radius: var(--r-lg);
  padding: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 2px solid var(--linea);
  background: linear-gradient(165deg, #143039, #0a1c24);
}
.cofre-carta.bronce { border-color: var(--bronce); box-shadow: 0 0 26px rgba(217, 166, 121, .2); }
.cofre-carta.plata  { border-color: var(--plata);  box-shadow: 0 0 26px rgba(201, 211, 214, .2); }
.cofre-carta.oro    { border-color: var(--oro);    box-shadow: 0 0 30px rgba(245, 196, 81, .3); }
/* T69-P3 — el cofre que NO se compra. Se pinta distinto a propósito: si se ve igual que los tres
   de la escalera, se lee como un producto de la tienda que está agotado. Es un regalo. */
.cofre-carta.regalo { border-color: var(--morado, #b07bff); box-shadow: 0 0 30px rgba(176, 123, 255, .22); }
.cofre-carta.regalo .precio { font-size: 20px; color: var(--morado, #b07bff); letter-spacing: .08em; }
.cofre-como { margin-top: 10px; text-align: left; line-height: 1.4; }
.cofre-carta .icono { font-size: 54px; line-height: 1; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .5)); }
.cofre-carta .precio { font-family: var(--fuente-titulos); font-size: 30px; color: var(--oro); line-height: 1; margin-top: 6px; }
.tabla-rareza { margin: 12px 0 14px; font-size: 12px; }
.tabla-rareza div { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed rgba(255, 255, 255, .08); }
.tabla-rareza div:last-child { border-bottom: 0; }

.rareza-comun      { color: var(--texto-2); }
.rareza-raro       { color: var(--agua); }
.rareza-epico      { color: var(--morado); }
.rareza-legendario { color: var(--oro); }

/* T4 — piso, fragmentos y cosméticos. El piso se publica junto al precio: el asesor sabe qué es
   lo peor que le puede pasar ANTES de gastar sus BEKY. */
.cofre-piso {
  font-size: 12px; line-height: 1.35; color: var(--texto-2);
  background: rgba(53, 224, 214, .08); border: 1px solid rgba(53, 224, 214, .25);
  border-radius: var(--r-sm, 8px); padding: 6px 8px; margin-top: 10px;
}
.cofre-piso b { color: var(--agua); }
.cofre-extra {
  margin: 8px auto 0; max-width: 340px; font-size: 13px;
  padding: 8px 10px; border-radius: var(--r-md, 12px);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--linea-suave);
}
.cofre-extra.oro { border-color: var(--oro); background: rgba(245, 196, 81, .12); }
.barra-fina { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.barra-fina i { display: block; height: 100%; background: linear-gradient(90deg, var(--agua), var(--oro)); }
.cosmeticos-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.cosmetico {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 6px; border-radius: var(--r-md, 12px); cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--linea-suave);
  color: inherit; font: inherit; text-align: center;
}
.cosmetico .ico { font-size: 24px; line-height: 1; }
.cosmetico .nom { font-size: 12px; font-weight: 700; }
.cosmetico .mini { font-size: 12px; color: var(--oro); letter-spacing: .06em; text-transform: uppercase; }
.cosmetico.bloqueado { opacity: .4; cursor: default; }
.cosmetico.puesto { border-color: var(--oro); box-shadow: 0 0 14px rgba(245, 196, 81, .25); }
.cosmetico.rareza-raro { border-color: rgba(53, 224, 214, .45); }
.cosmetico.rareza-epico { border-color: rgba(180, 140, 255, .45); }
.cosmetico.rareza-legendario { border-color: rgba(245, 196, 81, .55); }
.avatar.con-marco { box-shadow: 0 0 0 2px var(--linea), 0 0 14px rgba(255, 255, 255, .15); }
.avatar.marco-raro { box-shadow: 0 0 0 2px var(--agua), 0 0 14px rgba(53, 224, 214, .4); }
.avatar.marco-epico { box-shadow: 0 0 0 2px var(--morado), 0 0 14px rgba(180, 140, 255, .45); }
.avatar.marco-legendario { box-shadow: 0 0 0 2px var(--oro), 0 0 16px rgba(245, 196, 81, .55); }

/* T31 — el cosmético solo vale por lo que se ve. Catálogo abierto (nada de "???"), vista previa
   antes de tenerlo, y la firma (marco + título) en las tres pantallas donde el equipo se ve
   entre sí: ranking, campana y chat. */
.cosmetico .rar { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.cosmetico.no-tengo { opacity: .55; }
.cosmetico.no-tengo .ico { filter: grayscale(1); }
.cosmetico.elegido { border-color: var(--agua); box-shadow: 0 0 0 1px var(--agua) inset; }
.cosm-como {
  font-size: 12px; line-height: 1.5; display: flex; flex-direction: column; gap: 3px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--linea-suave);
  border-radius: var(--r-md, 12px); padding: 8px 10px; margin-bottom: 6px;
}
.cosm-previa {
  border: 1px solid var(--linea-suave); border-radius: var(--r-md, 12px);
  background: rgba(255, 255, 255, .05); padding: 12px;
}
.cosm-previa-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cosm-previa-cuerpo { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.cosm-previa-yo { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.cosm-previa-firma { margin-top: 3px; min-height: 18px; }
.cosm-previa-chat { display: flex; align-items: flex-start; gap: 8px; flex: 1; min-width: 220px; }
.cosm-previa-pie { margin-top: 12px; }
.titulo-chip {
  display: inline-block; font-size: 12px; font-weight: 700; line-height: 1.4;
  padding: 1px 7px; border-radius: 999px; margin-left: 6px;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--linea-suave);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
}
.titulo-chip.rareza-raro { border-color: rgba(53, 224, 214, .45); }
.titulo-chip.rareza-epico { border-color: rgba(180, 140, 255, .45); }
.titulo-chip.rareza-legendario { border-color: rgba(245, 196, 81, .55); }
.podio-col .titulo-chip { margin: 2px 0 0; font-size: 12px; }
.chat-sticker { font-size: 16px; margin-right: 5px; vertical-align: -2px; }

.cofre-fila {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--linea-suave);
  flex-wrap: wrap;
}
.cofre-fila .icono { font-size: 32px; }

.cofre-anim { font-size: 110px; line-height: 1; display: inline-block; }
.cofre-anim.temblor { animation: temblar .5s ease-in-out 3; }
@keyframes temblar {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-7px) rotate(-5deg); }
  55% { transform: translateX(7px) rotate(5deg); }
  80% { transform: translateX(-4px) rotate(-3deg); }
}
.cofre-anim.estalla { animation: estallar .7s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes estallar {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.4); filter: brightness(2.4); }
  100% { transform: scale(1.1); filter: brightness(1.2); opacity: .25; }
}
.resplandor {
  position: absolute; inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(245, 196, 81, .8), transparent 62%);
  animation: brillar 1.2s ease forwards;
}
@keyframes brillar { 0% { opacity: 0; } 55% { opacity: .95; } 100% { opacity: 0; } }

/* ==========================================================================
   Billetera, tienda, bonos, ranking
   ========================================================================== */

.saldos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.saldo-caja {
  border-radius: var(--r-md);
  padding: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--linea-suave);
}
.saldo-caja .cifra { font-family: var(--fuente-titulos); font-size: 34px; line-height: 1; margin-top: 4px; }
.saldo-caja.disponible { border-color: rgba(245, 196, 81, .45); }
.saldo-caja.disponible .cifra { color: var(--oro); }
.saldo-caja.pendiente .cifra { color: var(--agua); }
.saldo-caja.reserva .cifra { color: var(--morado); }

.ayuda {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid var(--apagado);
  color: var(--apagado);
  font-size: 12px;
  font-weight: 800;
  cursor: help;
  vertical-align: middle;
  margin-left: 5px;
}

.movimientos { display: flex; flex-direction: column; gap: 8px; max-height: 480px; overflow-y: auto; padding-right: 4px; }
.movimiento {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--linea-suave);
  font-size: 13px;
}
.movimiento .monto { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.movimiento .monto.mas { color: var(--verde); }
.movimiento .monto.menos { color: var(--rojo-claro); }

.articulos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.articulo {
  border-radius: var(--r-md);
  padding: 18px;
  background: linear-gradient(165deg, #143039, #0a1c24);
  border: 1px solid var(--linea);
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .18s ease, transform .18s ease;
}
.articulo:hover { border-color: rgba(245, 196, 81, .5); transform: translateY(-2px); }
.articulo .icono { font-size: 38px; line-height: 1; }
.articulo .nombre { font-weight: 800; font-size: 15px; }
.articulo .precio { font-family: var(--fuente-titulos); font-size: 26px; color: var(--oro); line-height: 1; }
.articulo .boton { margin-top: auto; }
.articulo .etiquetas { display: flex; flex-wrap: wrap; gap: 5px; }
/* Lo que le falta para pagarlo es lo único que el asesor puede cambiar vendiendo: se ve en verde
   y no en rojo, porque es un objetivo, no un castigo. */
.articulo .faltan { font-size: 12px; font-weight: 800; color: var(--agua); }
.articulo .acciones { display: flex; gap: 8px; margin-top: auto; }
.articulo .acciones .boton { margin-top: 0; flex: 1; }

/* Buscador y categorías de la tienda (T11 c) */
.tienda-buscador { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; }
.tienda-buscador input {
  flex: 1; min-width: 0;
  padding: 10px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--linea);
  color: var(--texto); font: inherit; font-size: 14px;
}
.tienda-buscador input:focus { outline: none; border-color: rgba(245, 196, 81, .55); }
.tienda-categorias { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cat-chip {
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--linea);
  color: var(--texto-2); font: inherit; font-size: 12px; font-weight: 700;
  transition: border-color .15s ease, color .15s ease;
}
.cat-chip:hover { border-color: rgba(245, 196, 81, .4); color: var(--texto); }
.cat-chip.activo { background: rgba(245, 196, 81, .12); border-color: rgba(245, 196, 81, .55); color: var(--oro); }
.cat-chip .n { opacity: .6; margin-left: 4px; }

/* Simulador de cuotas: la tabla de "esto pagas" (T11 c) */
.fin-plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.fin-plan > div { background: rgba(255, 255, 255, .03); border: 1px solid var(--linea); border-radius: var(--r-sm); padding: 12px 14px; }
.fin-plan .k { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.fin-plan .num { font-weight: 800; font-size: 19px; font-variant-numeric: tabular-nums; }
.fin-motivos { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.fin-motivos li { list-style: none; font-size: 13px; color: var(--rojo-claro); }

/* Ticket de bono */
.ticket {
  position: relative;
  border-radius: var(--r-md);
  padding: 16px 20px;
  background: linear-gradient(160deg, var(--oro-claro), var(--oro) 40%, var(--oro-oscuro));
  color: var(--oro-tinta);
  display: flex; align-items: center; gap: 16px;
  box-shadow: var(--sombra-corta);
  flex-wrap: wrap;
}
.ticket::before, .ticket::after {
  content: "";
  position: absolute; top: 50%;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--suelo);
  transform: translateY(-50%);
}
.ticket::before { left: -9px; }
.ticket::after  { right: -9px; }
.ticket .valor { font-family: var(--fuente-titulos); font-size: 38px; line-height: 1; margin-left: auto; }
.ticket .sello {
  display: inline-block;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(42, 28, 5, .18);
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
}
.ticket.apagado { background: linear-gradient(160deg, #4a5a5f, #33454b); color: #cfe0e3; }
.ticket.apagado .sello { background: rgba(255, 255, 255, .14); }

/* Línea de tiempo de un bono (T12). Va DENTRO del ticket y ocupa el ancho entero: es la historia
   de ese bono, no un adorno al costado. Los hitos que todavía no pasaron van translúcidos, nunca
   ocultos: saber qué falta es la mitad de la respuesta. */
.bono-linea {
  flex-basis: 100%;
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed rgba(42, 28, 5, .28);
}
.ticket.apagado .bono-linea { border-top-color: rgba(255, 255, 255, .22); }
.bono-hito { display: flex; gap: 8px; align-items: flex-start; min-width: 140px; flex: 1; opacity: .5; }
.bono-hito.hecho { opacity: 1; }
.bono-hito-punto {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(42, 28, 5, .18); font-size: 12px; flex: none;
}
.ticket.apagado .bono-hito-punto { background: rgba(255, 255, 255, .16); }
.bono-hito-tit { font-weight: 800; font-size: 13px; }
.bono-hito .enlace-comprobante { display: inline-block; margin-top: 2px; text-decoration: underline; }

.totales-bonos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }

/* Podio */
.podio { display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin-top: 46px; }
.podio-col { text-align: center; width: 104px; }
.podio-col .base {
  border-radius: 12px 12px 0 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fuente-titulos);
  font-size: 26px;
  color: var(--oro-tinta);
}
.podio-col.p1 .base { height: 84px; background: linear-gradient(180deg, var(--oro-claro), var(--oro-oscuro)); font-size: 32px; }
.podio-col.p2 .base { height: 58px; background: linear-gradient(180deg, var(--plata), #8a9ba0); color: #1a2a30; }
.podio-col.p3 .base { height: 42px; background: linear-gradient(180deg, var(--bronce), #8f5a30); }
/* T83 · C5: nombre + primer apellido ya entra casi siempre; si aun así no cabe en los 104 px de
   la columna, se corta con puntos suspensivos y el nombre completo queda en el `title` (hover). */
.podio-col .quien { font-size: 12px; font-weight: 800; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podio-col .avatar { margin: 0 auto 6px; }
.podio-col.p1 .avatar { border: 3px solid var(--oro); box-shadow: 0 0 18px rgba(245, 196, 81, .7); }
.corona { font-size: 22px; line-height: 1; }

/* ---------- Tabla de posiciones (T71-U3) ---------------------------------
   El ranking dejó de ser dos filas de píldoras y un podio de colores: es un tablero. Cinco
   columnas fijas —puesto, quién, cifra, variación contra el período anterior y distancia al de
   arriba— alineadas en rejilla para que las cifras caigan una debajo de otra; en el teléfono la
   rejilla se reduce a tres y las dos de contexto pasan debajo del nombre. */
.rank-cab { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; justify-content: space-between; margin-bottom: 6px; }
.rank-titulos { min-width: 0; }
.rank-controles { display: flex; gap: 12px; flex-wrap: wrap; }
.rank-campo { min-width: 190px; }
.rank-campo label { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); margin-bottom: 4px; }
.rank-campo select { width: 100%; }
.rank-comparativa { margin-top: 10px; }

.rank-tabla { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.rank-encab, .fila-rank {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 116px 150px 150px;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
}
.rank-encab {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--apagado); padding-bottom: 2px; padding-top: 2px;
}
.rank-encab .c-cifra, .rank-encab .c-falta { text-align: right; }
.fila-rank { background: rgba(255, 255, 255, .04); }
.fila-rank .c-puesto { font-weight: 800; color: var(--tenue); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 4px; }
.fila-rank .c-quien { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fila-rank .rank-nombre { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-rank .rank-contexto { white-space: nowrap; }
.fila-rank .c-cifra, .fila-rank .c-falta { text-align: right; font-variant-numeric: tabular-nums; }
.fila-rank .c-cifra { font-weight: 800; font-size: 15px; }
.fila-rank .c-var { font-size: 12px; }
.fila-rank.yo { background: rgba(245, 196, 81, .14); border: 1px solid rgba(245, 196, 81, .4); color: var(--oro); }
.fila-rank.propia { background: rgba(245, 196, 81, .2); }

/* Verde y rojo no van solos: el triángulo dice lo mismo sin depender del color (UX-17). */
.rank-var.sube { color: var(--verde); font-weight: 800; }
.rank-var.baja { color: var(--rojo-claro); font-weight: 800; }
.rank-var.igual, .rank-var.nada { color: var(--apagado); }
.rank-salto { font-size: 12px; font-weight: 800; }
.rank-salto.sube { color: var(--verde); }
.rank-salto.baja { color: var(--rojo-claro); }

/* La fila propia, pegada al pie de la tarjeta: quien va noveno no tiene que buscarse. */
.rank-yo {
  position: sticky; bottom: 0;
  margin-top: 14px; padding-top: 10px;
  background: linear-gradient(180deg, transparent, var(--vidrio-b) 40%);
}
.rank-yo .k { margin-bottom: 6px; }

@media (max-width: 760px) {
  .rank-encab { display: none; }
  .fila-rank {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas: 'puesto quien cifra' '. var falta';
    row-gap: 4px;
  }
  .fila-rank .c-puesto { grid-area: puesto; }
  .fila-rank .c-quien { grid-area: quien; flex-wrap: wrap; }
  .fila-rank .c-cifra { grid-area: cifra; }
  .fila-rank .c-var { grid-area: var; text-align: left; }
  .fila-rank .c-falta { grid-area: falta; text-align: right; }
  .rank-campo { min-width: 0; flex: 1; }
}

/* Bote del equipo */
.bote {
  border-radius: var(--r-lg);
  padding: 18px 22px;
  background: linear-gradient(160deg, #16323d, #0a1c24);
  border: 1px solid rgba(245, 196, 81, .35);
  box-shadow: inset 0 0 40px rgba(245, 196, 81, .06);
}
/* Los tres botes de T33 dentro del bloque de "Hoy". En fila cuando entra y apilados cuando no:
   el bloque es lo primero que el equipo mira, no puede depender de un scroll horizontal. */
.bote-tres {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.bote-uno {
  flex: 1 1 140px;
  min-width: 130px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(245, 196, 81, .18);
}
.bote-uno-cifra {
  font-family: var(--fuente-titulos);
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: .03em;
  color: var(--oro);
  font-variant-numeric: tabular-nums;
}
.mini.verde { color: var(--verde); }

.bote .contador {
  font-family: var(--fuente-titulos);
  font-size: 48px;
  line-height: 1;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro) 45%, var(--oro-oscuro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Salas bloqueadas */
/* Tu puesto (T27.2) */
.puesto-fila { display: flex; align-items: center; gap: 16px; }
.puesto-num {
  font-family: var(--fuente-titulos);
  font-size: 56px;
  line-height: 1;
  color: var(--plata);
  flex: none;
}
.puesto-num.p1 { color: var(--oro); }
.puesto-texto { font-size: 13px; color: var(--texto-2); min-width: 0; }
.puesto-texto strong { color: var(--agua); }

/* UX-12: la tarjeta entera es un botón hacia Salas. Hereda la tipografía y el color del cuerpo
   porque un <button> nativo trae los suyos; sin el velo, que tapaba la cabecera con un texto fijo. */
.salas-teaser {
  position: relative; overflow: hidden; padding: 22px 24px;
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
}
.salas-teaser:hover { border-color: rgba(53, 224, 214, .45); }
.salas-teaser .tarjeta-cab { gap: 10px; flex-wrap: wrap; }
.tapete-mini {
  position: relative;
  height: 118px;
  border-radius: 90px / 46px;
  background: radial-gradient(ellipse at 50% 40%, #2f8a5a, #1b5e3c 70%);
  border: 8px solid #5a3a1e;
  box-shadow: inset 0 0 34px rgba(0, 0, 0, .5);
  margin: 14px 8px 4px;
}
.asiento {
  position: absolute;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  border: 3px solid #0b1a22;
  background: var(--agua);
  color: #062026;
}

/* ==========================================================================
   Modal y toast
   ========================================================================== */

.modal {
  position: fixed; inset: 0;
  z-index: 100;
  background: rgba(4, 12, 16, .78);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.modal-caja {
  width: min(520px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  border-radius: var(--r-lg);
  padding: 26px;
  position: relative;
  background: linear-gradient(160deg, #16333e, #0a1e26);
  border: 1px solid rgba(245, 196, 81, .35);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
  animation: aparece .28s cubic-bezier(.22, 1, .36, 1);
  text-align: center;
}
@keyframes aparece { 0% { transform: translateY(18px) scale(.94); opacity: 0; } 100% { transform: none; opacity: 1; } }
.modal-caja h3 {
  font-family: var(--fuente-titulos);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: .04em;
  margin: 0 0 6px;
}
.modal-cerrar {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--linea);
  background: rgba(255, 255, 255, .06);
  color: var(--texto);
  font-size: 16px;
  cursor: pointer;
}
.premio-grande {
  font-family: var(--fuente-titulos);
  font-size: 64px;
  line-height: 1;
  margin: 10px 0;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro) 45%, var(--oro-oscuro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.toast {
  position: fixed;
  bottom: calc(18px + var(--alto-nav));
  left: 50%;
  transform: translateX(-50%);
  background: #0e2a34;
  border: 1px solid rgba(245, 196, 81, .5);
  color: var(--texto);
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  z-index: 120;
  box-shadow: var(--sombra);
  animation: entratoast .3s ease;
  max-width: calc(100vw - 36px);
  text-align: center;
}
@keyframes entratoast { 0% { transform: translate(-50%, 16px); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 1; } }

/* ==========================================================================
   Login
   ========================================================================== */

.login-envoltura {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-caja { width: min(400px, 100%); }
.login-caja .marco-bombillas { margin-bottom: 20px; }
.login-caja .marquesina-cuerpo { justify-content: center; align-items: center; text-align: center; flex-direction: column; gap: 8px; padding: 22px 18px; }
.login-caja .titulo-app { white-space: normal; font-size: 27px; line-height: 1.05; }
.login-form { padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.login-error {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: rgba(224, 75, 75, .14);
  border: 1px solid rgba(224, 75, 75, .5);
  color: var(--rojo-claro);
  font-size: 13px;
  font-weight: 700;
}

/* ==========================================================================
   Adaptación a pantallas chicas
   ========================================================================== */

/* T47: en escritorio la cabecera suelta lastre (equivalencia en dólares, segundos del reloj,
   bajada de la marca, nombre recortado) en vez de comerle el sitio a la navegación. Sin tope
   superior a propósito: el cuerpo de la barra está limitado a --ancho-app (1440 px), así que una
   pantalla de 1920 no tiene ni un píxel más que una de 1440 y no hay razón para que muestre
   menos secciones. El menú "Más" recoge lo que aun así no quepa; estas reglas solo bajan
   cuántos ítems tienen que irse allí. */
@media (min-width: 861px) {
  .barra-sup-cuerpo { gap: 14px; }
  .barra-sup .zona-estado { gap: 8px; }
  .barra-sup .saldo-fila .mini { display: none; }
  .barra-sup .reloj .reloj-seg { display: none; }
  /* UX-09: "Lima" sobra en la barra (el title del reloj ya lo dice) y la marca se queda con el
     logo y "EL CLUB" por debajo de 1500 px; el chip, solo con el avatar por debajo de 1400. La
     marca y el estado se llevaban 760-810 px de la barra y a la navegación le quedaban 434 en
     un portátil de 1280: cuatro secciones a la vista y once detrás de "Más". */
  .barra-sup .reloj .reloj-zona { display: none; }
  .barra-sup .sep-barra { display: none; }
  .barra-sup .zona-marca .marca-sub { display: none; }
  .barra-sup .chip-usuario .chip-textos { max-width: 120px; }
  .barra-sup .nav button { padding: 9px 6px; gap: 3px; font-size: 12px; }
  .barra-sup .nav button .ico { width: 16px; height: 16px; }
  .barra-sup .saldo-beky .cifra { font-size: 26px; }
  .barra-sup .saldo-beky .k { font-size: 12px; letter-spacing: .08em; }
  .barra-sup .zona-marca .logo-gta { width: 36px; height: 36px; }
  .barra-sup .zona-marca .titulo-app { font-size: 22px; }
  /* El cuerpo de la barra se para en --ancho-app (1440 px): una pantalla de 1600 no tiene más
     sitio que una de 1440, así que el "DE LA PELEA" se va en todo el escritorio y no solo por
     debajo de un ancho. El nombre completo sigue en el login, en la pestaña y en el teléfono. */
  .barra-sup .zona-marca .titulo-resto { display: none; }
}
@media (min-width: 861px) and (max-width: 1399px) {
  .barra-sup .chip-usuario .chip-textos { display: none; }
  .barra-sup .chip-usuario { padding: 4px; }
  /* En un portátil los 32 px de margen a cada lado son dos ítems menos en la barra. */
  :root { --pad-app: 24px; }
}

@media (max-width: 1180px) {
  .rejilla-hoy, .ruleta-rejilla, .rejilla-racha { grid-template-columns: minmax(0, 1fr); }
  .rejilla-racha .racha-caja { flex-direction: row; align-items: center; }
  .ruleta-rejilla .rueda-caja { max-width: 460px; margin: 0 auto; }
}

@media (max-width: 860px) {
  /* Móvil: el mismo sistema, no otra app (T27.4). La barra superior se parte en dos filas y la
     navegación baja al pie, que es donde llega el pulgar. */
  :root { --alto-nav: 74px; --pad-app: 12px; }

  .marquesina { padding: 8px 12px 0; }
  .marquesina-cuerpo { padding: 10px 12px; gap: 10px; }
  .titulo-app { font-size: 21px; white-space: normal; }
  .logo-gta { width: 38px; height: 38px; border-radius: 11px; }
  .marquesina-derecha { width: 100%; margin-left: 0; gap: 8px; justify-content: space-between; }
  .saldo-beky { text-align: left; }
  .saldo-beky .k { justify-content: flex-start; }
  .saldo-beky .cifra { font-size: 32px; }
  .chip-usuario { padding: 4px 12px 4px 4px; }
  .chip-usuario .avatar { width: 32px; height: 32px; font-size: 16px; }
  .reloj { padding: 6px 10px; font-size: 12px; }

  .barra-sup-cuerpo { height: auto; flex-wrap: wrap; padding: 8px var(--pad-app); gap: 8px; }
  /* El título no se parte ni empuja: se recorta con puntos antes que mandar el menú a la fila de abajo. */
  .zona-marca .titulo-app { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .zona-marca > div { min-width: 0; }
  .zona-marca .logo-gta { width: 34px; height: 34px; }
  .zona-marca .marca-sub { display: none; }
  /* UX-08: la cabecera fija medía 172 px (el 20 % del teléfono) porque el estado se partía en
     dos filas debajo de la marca. Con `display: contents` sus piezas pasan a ser hijas directas
     de la barra y se reparten en DOS filas: marca + campana + menú arriba (a la derecha, donde ya
     estaban), y saldo + reloj + chip abajo. El chip se encoge y recorta en vez de empujar la
     fila: con un nombre completo de Gisselle ("Francis Gabriela Sánchez Ramírez") la cabecera se
     salía 212 px del teléfono. */
  .zona-estado { display: contents; }
  /* Base chica y crecimiento: el salto de fila se decide con la base, no con lo que encoge. */
  .barra-sup .zona-marca { order: 0; flex: 1 1 120px; min-width: 0; }
  .barra-sup .campana-envoltura { order: 1; }
  .barra-sup .menu-envoltura { order: 2; }
  /* Salto de fila forzado entre el menú y el saldo: un ítem de ancho completo y alto cero. */
  .barra-sup-cuerpo::before { content: ''; order: 3; width: 100%; height: 0; margin: -8px 0 0; }
  .barra-sup .saldo-beky { order: 4; flex: none; }
  .barra-sup .reloj { order: 5; flex: none; }
  .barra-sup .chip-usuario { order: 6; min-width: 0; flex: 1 1 120px; margin-left: auto; }
  .barra-sup .reloj .reloj-seg { display: none; }
  .barra-sup .chip-usuario .chip-textos { max-width: none; flex: 1 1 auto; }
  .sep-barra { display: none; }
  .barra-sup .saldo-beky { text-align: left; }
  .barra-sup .saldo-beky .k { justify-content: flex-start; }
  .saldo-fila { justify-content: flex-start; }
  .barra-sup .chip-usuario .avatar { width: 32px; height: 32px; font-size: 16px; }

  .banda-evento-cuerpo { padding: 12px 14px; gap: 12px; }
  .multiplicador { font-size: 36px; }
  .cuenta-atras { font-size: 24px; }

  main { padding: 14px var(--pad-app) 30px; }
  .tarjeta { padding: 18px 16px; }
  .tarjeta-cab h2 { font-size: 27px; }

  .rodillos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .carrete { padding: 14px 14px; }
  .carrete .cifra { font-size: 33px; }
  .carrete.principal { grid-column: 1 / -1; }
  .carrete.principal .cifra { font-size: 46px; }

  .pista { display: none; }
  .pista-lista { display: flex; }
  .ruta-cab h1 { font-size: 34px; }
  .ruta-secundarias { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .chips-escalones { flex-direction: column; gap: 8px; }

  .saldos, .totales-bonos { grid-template-columns: minmax(0, 1fr); }
  .feed { max-height: none; }
  .podio-col { width: 84px; }
  .modal-caja { padding: 22px 18px; }
  .premio-grande { font-size: 48px; }

  /* Barra inferior fija: solo la navegación de secciones (#nav), nunca los sub-menús de período. */
  #nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    /* En el pie el desplazamiento con el dedo sí es natural, así que aquí la barra vuelve a
       deslizarse y el menú "Más" del escritorio no pinta nada. */
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
    background: rgba(8, 21, 27, .97);
    border-top: 1px solid var(--linea-suave);
    backdrop-filter: blur(10px);
  }
  #nav button {
    position: relative;
    flex-direction: column;
    gap: 3px;
    min-width: 68px;
    padding: 7px 8px;
    font-size: 12px;   /* UX-17: nada por debajo de 12 px en el teléfono */
    border-radius: 12px;
    border-color: transparent;
    background: none;
  }
  /* UX-08: la barra tiene 15 ítems y a 390 px se ven 5,5; sin esta sombra pegada al borde
     derecho nada decía que se puede deslizar. Es `sticky` dentro del carril, así viaja con el
     scroll y desaparece al llegar al final. */
  #nav::after {
    content: '›';
    position: sticky;
    right: 0;
    flex: none;
    width: 34px;
    margin-left: -34px;
    align-self: stretch;
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: 4px;
    font-size: 22px; font-weight: 800; color: var(--oro);
    background: linear-gradient(90deg, rgba(8, 21, 27, 0), rgba(8, 21, 27, .97) 55%);
    pointer-events: none;
  }
  #nav button .ico { width: 22px; height: 22px; }
  #nav button.activo { background: rgba(245, 196, 81, .16); border-color: rgba(245, 196, 81, .5); color: var(--oro); box-shadow: none; }
  #nav .globo { position: absolute; top: 2px; right: 10px; }
  #nav .nav-mas { display: none; }
}

@media (max-width: 420px) {
  .titulo-app, .zona-marca .titulo-app { font-size: 18px; }
  .marca-sub { display: none; }
  .barra-sup .reloj .reloj-zona { display: none; }
  .carrete .cifra { font-size: 29px; }
  .ticket { padding: 14px 16px; gap: 10px; }
  .ticket .valor { font-size: 32px; }
}

/* Respeto por quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   Salas de juego (fase 2): cabecera de horario, juegos, duelos, chat y bote.
   Se añade al final: no cambia nada de lo anterior.
   ========================================================================== */

.salas-cabecera { padding: 20px 24px; margin-bottom: 16px; }

.salas-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
}
.salas-cab.cerradas { filter: saturate(.75); }
.salas-estado { flex: 2 1 300px; min-width: 0; }
.salas-medidor, .salas-bote-mini { flex: 1 1 210px; min-width: 190px; }

.salas-cuenta {
  flex: 0 0 auto;
  text-align: center;
  padding: 10px 18px;
  border-radius: var(--r-md);
  background: var(--hueco);
  border: 1px solid var(--linea);
}
.salas-cuenta span {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 32px;
  line-height: 1.05;
  color: var(--agua);
  font-variant-numeric: tabular-nums;
}
.salas-cab.cerradas .salas-cuenta span { color: var(--oro); }

/* Tope del día alcanzado (T20): no es un error ni un castigo, es BEKI mandando a vender. */
.tope-aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  padding: 20px 24px;
  margin-bottom: 16px;
  border-left: 3px solid var(--oro);
}
.tope-beki { flex: 0 0 auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
.tope-texto { flex: 1 1 260px; min-width: 0; }
.tope-texto h2 { margin: 0; font-size: 24px; line-height: 1.15; }
.tope-texto .sub { margin: 4px 0 8px; }
.tope-acciones { flex: 0 1 220px; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 560px) {
  .tope-acciones { flex: 1 1 100%; }
}

/* Las tres maneras de subir el tope (T32). Lo que ya está al máximo no se tacha ni se apaga: se
   marca en verde, porque es algo que la persona YA hizo. */
.tope-como {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 5px;
}
.tope-como li {
  position: relative;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--tenue);
}
.tope-como li::before {
  content: "↑";
  position: absolute;
  left: 0;
  color: var(--oro);
}
.tope-como li.listo::before { content: "✓"; color: var(--verde); }
.tope-como li b { color: inherit; }

.salas-bote-cifra {
  font-family: var(--fuente-titulos);
  font-size: 30px;
  line-height: 1;
  margin-top: 2px;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro) 45%, var(--oro-oscuro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.salas-nota {
  padding: 20px 18px;
  border: 1px dashed var(--linea);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .02);
  color: var(--tenue);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

/* ---------- Pestañas internas (no es la barra inferior del móvil) -------- */

.salas-tabs {
  display: flex;
  gap: 8px;
  padding: 0 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.salas-tabs::-webkit-scrollbar { display: none; }
.salas-tabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: var(--texto-2);
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: all .16s ease;
}
.salas-tabs button:hover { color: var(--texto); border-color: rgba(53, 224, 214, .4); }
.salas-tabs button.activo {
  background: linear-gradient(180deg, var(--oro-claro), var(--oro) 50%, var(--oro-oscuro));
  border-color: var(--oro-claro);
  color: var(--oro-tinta);
  box-shadow: 0 0 20px rgba(245, 196, 81, .38);
}
.salas-tabs .globo {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--rojo);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.salas-tabs button.activo .globo { background: var(--oro-tinta); color: var(--oro); }

/* ---------- Rejilla de juegos ------------------------------------------- */

.juegos-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }

.juego-carta {
  border-radius: var(--r-md);
  padding: 18px;
  background: linear-gradient(165deg, #143039, #0a1c24);
  border: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.juego-carta:hover { border-color: rgba(245, 196, 81, .5); transform: translateY(-2px); }
.juego-carta.abierta { border-color: var(--oro); box-shadow: 0 0 26px rgba(245, 196, 81, .25); }
.juego-carta.apagada { opacity: .62; }
.juego-carta .juego-ico { font-size: 42px; line-height: 1; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .5)); }
.juego-carta .juego-nombre { font-weight: 800; font-size: 16px; }
.juego-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.juego-chips .pastilla { padding: 4px 9px; font-size: 10px; letter-spacing: .04em; }
.juego-carta .juego-desc { min-height: 16px; }
.juego-carta .boton { margin-top: auto; }

/* ---------- Mesa ---------------------------------------------------------- */

.mesa { margin-top: 18px; }
.mesa-error {
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: rgba(224, 75, 75, .14);
  border: 1px solid rgba(224, 75, 75, .5);
  color: var(--rojo-claro);
  font-size: 13px;
  font-weight: 700;
}
.mesa-botones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.mesa-resultado {
  min-height: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.mesa-resultado.banner {
  padding: 12px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--linea);
}
.mesa-pie { margin-top: 16px; text-align: center; }
.mesa-historial { margin-top: 18px; border-top: 1px dashed var(--linea); padding-top: 14px; }
.mesa-historial .lista-simple b.gana { color: var(--verde); }
/* T3: el retorno publicado de la ruleta y los giros que salvó la protección de racha */
#rulRetorno b.gana, #rulHistorial b.gana { color: var(--verde); }
.mesa-historial .lista-simple b.pierde { color: var(--rojo-claro); }

.boton.grande { padding: 14px 30px; font-size: 16px; width: min(320px, 100%); }
.boton.confirmar {
  background: linear-gradient(180deg, #ff9d9d, var(--rojo) 55%, #a92f2f);
  border-color: rgba(255, 157, 157, .8);
  color: #fff;
  box-shadow: 0 0 24px rgba(224, 75, 75, .45);
  animation: latecfm 1.2s ease-in-out infinite;
}
/* El destello no mueve el botón: el dedo apunta al mismo sitio en los dos toques. */
@keyframes latecfm {
  0%, 100% { box-shadow: 0 0 16px rgba(224, 75, 75, .35); }
  50% { box-shadow: 0 0 34px rgba(224, 75, 75, .8); }
}
.boton.cargando { opacity: .7; }

.fichas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ficha {
  min-width: 58px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 2px dashed rgba(53, 224, 214, .5);
  background: var(--hueco);
  color: var(--agua);
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform .12s ease, background .16s ease, color .16s ease;
}
.ficha:hover:not(:disabled) { transform: translateY(-2px); background: rgba(53, 224, 214, .12); }
.ficha.activa {
  border-style: solid;
  border-color: var(--oro);
  background: linear-gradient(180deg, var(--oro-claro), var(--oro) 50%, var(--oro-oscuro));
  color: var(--oro-tinta);
  box-shadow: 0 0 18px rgba(245, 196, 81, .4);
}
.ficha:disabled { opacity: .35; cursor: not-allowed; }

/* ---------- Tragamonedas (diseño de máquina, T18 b) ------------------------
   Todo el movimiento es CSS o `translate3d` sobre la cinta: ni una animación
   toca ancho, alto ni posición, así el navegador no rehace el diseño de la
   página en ningún cuadro y la máquina va fluida en un portátil normal.
   Alturas en variables porque el JS mide la ficha para saber cuánto desplazar
   la cinta: si el CSS y el JS no coinciden, el símbolo queda a medio rodillo. */

.tragamonedas { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.tragamonedas.maquina { --tm-ficha: 116px; --tm-ancho: 96px; gap: 14px; width: 100%; }

/* Marquesina del jackpot */
.marquesina {
  position: relative;
  text-align: center;
  width: min(460px, 100%);
  padding: 16px 24px 14px;
  border-radius: 18px 18px 10px 10px;
  background: linear-gradient(180deg, #16323d, #08171e 70%);
  border: 2px solid var(--oro-oscuro);
  box-shadow: 0 0 34px rgba(245, 196, 81, .18), inset 0 -18px 30px rgba(0, 0, 0, .5);
}
.marquesina .k { position: relative; z-index: 1; }
.marquesina .mini { position: relative; z-index: 1; margin-top: 4px; }
.jackpot-cifra {
  position: relative;
  z-index: 1;
  font-family: var(--fuente-titulos);
  font-size: 40px;
  line-height: 1.05;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro) 45%, var(--oro-oscuro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 26px rgba(245, 196, 81, .25);
}

/* Luces perimetrales: un punto por `<i>`, encendiéndose en cadena con --luz. */
.luces { position: absolute; inset: 6px; pointer-events: none; }
.luces i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--oro);
  opacity: .28;
  box-shadow: 0 0 8px rgba(245, 196, 81, .8);
  animation: parpadeo 1.6s ease-in-out infinite;
  animation-delay: calc(var(--luz) * .09s);
}
@keyframes parpadeo { 0%, 100% { opacity: .2; transform: scale(.85); } 45% { opacity: 1; transform: scale(1.15); } }

/* Reparto de los 18 puntos de la marquesina: 8 arriba, 8 abajo, 1 por lado. */
.marquesina .luces i:nth-child(-n+8) { top: 0; }
.marquesina .luces i:nth-child(1) { left: 0%; }
.marquesina .luces i:nth-child(2) { left: 14%; }
.marquesina .luces i:nth-child(3) { left: 28%; }
.marquesina .luces i:nth-child(4) { left: 42%; }
.marquesina .luces i:nth-child(5) { left: 56%; }
.marquesina .luces i:nth-child(6) { left: 70%; }
.marquesina .luces i:nth-child(7) { left: 84%; }
.marquesina .luces i:nth-child(8) { left: 98%; }
.marquesina .luces i:nth-child(n+9):nth-child(-n+16) { bottom: 0; }
.marquesina .luces i:nth-child(9)  { left: 0%; }
.marquesina .luces i:nth-child(10) { left: 14%; }
.marquesina .luces i:nth-child(11) { left: 28%; }
.marquesina .luces i:nth-child(12) { left: 42%; }
.marquesina .luces i:nth-child(13) { left: 56%; }
.marquesina .luces i:nth-child(14) { left: 70%; }
.marquesina .luces i:nth-child(15) { left: 84%; }
.marquesina .luces i:nth-child(16) { left: 98%; }
.marquesina .luces i:nth-child(17) { left: 0; top: 50%; }
.marquesina .luces i:nth-child(18) { right: 0; top: 50%; }

/* Cuerpo de la máquina: los rodillos entre dos tiras de luces. */
.tm-caja {
  position: relative;
  padding: 14px 26px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #123039, #08171d);
  border: 2px solid var(--oro-oscuro);
  box-shadow: var(--sombra-corta), inset 0 0 40px rgba(0, 0, 0, .55);
}
.luces.laterales i:nth-child(-n+12) { left: 0; }
.luces.laterales i:nth-child(n+13)  { right: 0; }
.luces.laterales i:nth-child(1),  .luces.laterales i:nth-child(13) { top: 4%; }
.luces.laterales i:nth-child(2),  .luces.laterales i:nth-child(14) { top: 12%; }
.luces.laterales i:nth-child(3),  .luces.laterales i:nth-child(15) { top: 20%; }
.luces.laterales i:nth-child(4),  .luces.laterales i:nth-child(16) { top: 28%; }
.luces.laterales i:nth-child(5),  .luces.laterales i:nth-child(17) { top: 36%; }
.luces.laterales i:nth-child(6),  .luces.laterales i:nth-child(18) { top: 44%; }
.luces.laterales i:nth-child(7),  .luces.laterales i:nth-child(19) { top: 52%; }
.luces.laterales i:nth-child(8),  .luces.laterales i:nth-child(20) { top: 60%; }
.luces.laterales i:nth-child(9),  .luces.laterales i:nth-child(21) { top: 68%; }
.luces.laterales i:nth-child(10), .luces.laterales i:nth-child(22) { top: 76%; }
.luces.laterales i:nth-child(11), .luces.laterales i:nth-child(23) { top: 84%; }
.luces.laterales i:nth-child(12), .luces.laterales i:nth-child(24) { top: 92%; }

.rodillos-juego {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #0a1a20, #061014);
  border: 3px solid var(--oro-oscuro);
  box-shadow: inset 0 0 34px rgba(0, 0, 0, .7), 0 0 26px rgba(245, 196, 81, .18);
  transition: box-shadow .3s ease;
}
.rodillos-juego.gana { box-shadow: inset 0 0 34px rgba(0, 0, 0, .5), 0 0 46px rgba(75, 227, 143, .45); }
.rodillos-juego.jackpot-gordo { animation: jackpotazo 1.2s ease-in-out 2; }
@keyframes jackpotazo {
  0%, 100% { box-shadow: inset 0 0 34px rgba(0, 0, 0, .5), 0 0 40px rgba(245, 196, 81, .35); }
  50%      { box-shadow: inset 0 0 20px rgba(0, 0, 0, .3), 0 0 90px rgba(245, 196, 81, .9); }
}
/* Suspenso del "casi": lo decide el servidor, la caja solo lo cuenta. */
.rodillos-juego.casi { animation: tembleque .28s linear infinite; }
@keyframes tembleque { 0%, 100% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(-2px, 0, 0); } 75% { transform: translate3d(2px, 0, 0); } }

/* Línea de pago: la raya que cruza los tres rodillos por el centro. */
.linea-pago {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 2px;
  transform: translateY(-1px);
  background: linear-gradient(90deg, transparent, rgba(245, 196, 81, .75), transparent);
  z-index: 2;
  pointer-events: none;
}

.rodillo {
  position: relative;
  width: var(--tm-ancho, 96px);
  height: var(--tm-ficha, 116px);
  border-radius: 12px;
  background: linear-gradient(180deg, #f6f2e6, #cfc6ad);
  border: 2px solid #8a7135;
  overflow: hidden;
  box-shadow: inset 0 -14px 22px rgba(0, 0, 0, .28), inset 0 14px 18px rgba(255, 255, 255, .5);
}
/* Sombra de tambor: da la sensación de cilindro sin una sola imagen. */
.rodillo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .38), transparent 32%, transparent 68%, rgba(0, 0, 0, .38));
}
.rodillo.gana { border-color: var(--verde); box-shadow: 0 0 26px rgba(75, 227, 143, .7), inset 0 0 18px rgba(75, 227, 143, .3); }
.rodillo.gana .tm-ficha { animation: destello .5s ease-in-out 3; }
@keyframes destello { 0%, 100% { filter: none; } 50% { filter: brightness(1.6) saturate(1.3); } }
.rodillo.para { animation: frenazo .44s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes frenazo { 0% { transform: translateY(-10px); } 60% { transform: translateY(4px); } 100% { transform: none; } }

.cinta { will-change: transform; }
.cinta.veloz { filter: blur(1.1px); }

.tm-ficha {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--tm-ficha, 116px);
  padding: 0 6px;
  font-family: var(--fuente-titulos);
  font-size: 38px;
  line-height: 1;
  letter-spacing: .02em;
  text-align: center;
  color: #26180a;
}
.tm-ficha.largo { font-size: 28px; }
.tm-ficha.muylargo { font-size: 20px; }
/* T94 (QA del 8-sep): a 390 px "Python", "PowerBI" y "BEKY" se partían en dos líneas dentro del
   rodillo —`overflow-wrap: anywhere` partía la palabra en cuanto no cabía—. El nombre del curso es
   el símbolo: partido no se lee. No se parte nunca; lo que cede es el ancho del rodillo, que en el
   móvil tenía 66 px cuando la fila entera dispone de ~110 px por rodillo. */
.tm-ficha .tm-txt {
  display: block;
  max-width: 100%;
  white-space: nowrap;
}
/* Colores de los cursos GTA. El nombre del curso se lee, no se adivina por un icono. */
.tm-ficha[data-tono="sap"]     { color: #0a5fa8; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.tm-ficha[data-tono="powerbi"] { color: #b07c05; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.tm-ficha[data-tono="excel"]   { color: #14713f; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.tm-ficha[data-tono="python"]  { color: #244f8f; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.tm-ficha[data-tono="notion"]  { color: #2b2b2b; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.tm-ficha[data-tono="ia"]      { color: #6b3fb5; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.tm-ficha[data-tono="beky"]    { color: #8a5b06; text-shadow: 0 1px 0 rgba(255, 255, 255, .75); }
.tm-ficha[data-tono="t1"] { color: #9c3a1f; }
.tm-ficha[data-tono="t2"] { color: #1f6b6b; }
.tm-ficha[data-tono="t3"] { color: #5c2f7a; }
.tm-ficha[data-tono="t4"] { color: #2d5d1f; }
.tm-ficha[data-tono="t5"] { color: #7a4a12; }
.tm-ficha[data-tono="t6"] { color: #1d3f7a; }

/* Mandos: el botón grande rebota al pulsarlo, como una palanca de verdad. */
.tm-mandos { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.boton.palanca { box-shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 0 28px rgba(245, 196, 81, .4); }
.boton.palanca:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 20px rgba(245, 196, 81, .35); }
.boton.verde {
  background: rgba(75, 227, 143, .14);
  border: 1px solid rgba(75, 227, 143, .55);
  color: var(--verde);
}
.boton.verde:hover:not(:disabled) { background: rgba(75, 227, 143, .24); }
.pastilla.grande { font-size: 15px; padding: 8px 16px; }
/* ---------- Rasca y gana (T19 b) ------------------------------------------
   El billete va sobre el mismo paño de casino que el blackjack: BEKI lo
   presenta, el arco publica el retorno y las nueve casillas se rascan de
   verdad sobre un `canvas`. Todo el movimiento es `transform`/`opacity`, así
   la mesa no rehace el diseño de la página mientras el dedo raspa. */

.rasca { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.rasca-cab { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; text-align: center; }

/* El billete: papel crema con filo dorado y un troquelado a los lados. */
.rasca-billete {
  position: relative;
  margin: 0 auto;
  padding: 14px 16px 10px;
  width: max-content;
  max-width: 100%;
  border-radius: 14px;
  border: 2px solid var(--oro-oscuro);
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, #1b3a44, #0a1c24);
  box-shadow: 0 14px 26px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(245, 196, 81, .18);
}
.rasca-billete.entra { animation: rascaEntra .5s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes rascaEntra {
  0%   { transform: translate3d(120px, -70px, 0) rotate(11deg) scale(.9); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.rasca-titulo {
  font-family: var(--fuente-titulos);
  letter-spacing: .12em;
  font-size: 14px;
  color: var(--oro-claro);
  text-align: center;
  margin-bottom: 8px;
}
.rasca-marca {
  margin-top: 8px;
  text-align: center;
  font-family: var(--fuente-titulos);
  letter-spacing: .22em;
  font-size: 10px;
  color: rgba(245, 196, 81, .45);
}
.rasca-rejilla {
  display: grid;
  grid-template-columns: repeat(3, 88px);
  gap: 8px;
  /* El dedo rasca en diagonal: sin esto el navegador se lleva el gesto como scroll. */
  touch-action: none;
}
.rasca-celda {
  position: relative;
  height: 88px;
  padding: 0;
  border-radius: 10px;
  border: 2px solid #6f5a2a;
  background: linear-gradient(160deg, #f6f2e6, #ddd5c0);
  color: #1d1206;
  font-family: var(--fuente-titulos);
  font-size: 26px;
  cursor: crosshair;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.rasca-celda:disabled, .rasca-celda.vista { cursor: default; }
/* El papel dorado que se raspa. Encima de la casilla y sin eventos propios:
   los gestos los escucha la rejilla entera, para poder arrastrar de una
   casilla a la siguiente sin soltar. */
.rasca-foil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 8px;
}
.rasca-celda.vista { animation: destapa .3s ease; }
.rasca-celda.premiada {
  background: linear-gradient(160deg, var(--oro-claro), var(--oro-oscuro));
  border-color: var(--oro);
  box-shadow: 0 0 20px rgba(245, 196, 81, .55);
  animation: latido 1s ease-in-out 2;
}
@keyframes destapa { 0% { transform: rotateY(70deg); opacity: .3; } 100% { transform: none; opacity: 1; } }
.rasca-valor { padding: 0 4px; text-align: center; font-size: 26px; word-break: break-word; }

/* ---------- Cartas y mesa de blackjack (T19 a) ----------------------------
   La carta va en dos caras dentro de `.carta-giro`: el envoltorio hace el
   reparto (la carta viene del zapato) y el interior el giro 3D al voltear.
   Van separados a propósito: las dos cosas son `transform` y, si compartieran
   elemento, la última en aplicarse borraría a la otra.
   Todo el movimiento es `transform` y `opacity` —nada de ancho, alto ni
   posición—, así el navegador no rehace el diseño de la página en ningún
   cuadro y la mesa va a 60 fps en el portátil de cualquiera. */

.bj, .hilo { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.bj-mesa { width: 100%; }

/* El paño: teal profundo, filo dorado, foco de luz arriba y textura de fieltro
   hecha con un degradado repetido (ni una imagen que descargar). */
.bj-pano {
  position: relative;
  width: 100%;
  padding: 20px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 28px;
  border: 3px solid var(--oro-oscuro);
  background:
    radial-gradient(680px 300px at 50% -12%, rgba(53, 224, 214, .16), transparent 70%),
    radial-gradient(520px 260px at 50% 118%, rgba(0, 0, 0, .38), transparent 72%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .014) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, #0f4a4a, #093036 62%, #06232a);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .55), 0 18px 34px rgba(0, 0, 0, .4);
}
.bj-pano.vacio { min-height: 210px; justify-content: center; }
.bj-fila { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bj-lado { flex: 1 1 240px; min-width: 0; text-align: center; }
.bj-reglas { text-align: center; max-width: 56ch; margin: 0 auto; }

/* El zapato, arriba a la derecha: de ahí sale cada carta que se reparte. */
.bj-zapato {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 56px;
  height: 44px;
  border-radius: 7px 12px 12px 7px;
  background: linear-gradient(160deg, #1b3b45, #08181e);
  border: 2px solid var(--oro-oscuro);
  transform: rotate(-8deg);
  box-shadow: var(--sombra-corta);
}
.bj-zapato i { position: absolute; left: 6px; width: 40px; height: 3px; border-radius: 2px; background: rgba(246, 242, 230, .7); }
.bj-zapato i:nth-child(1) { top: 7px; }
.bj-zapato i:nth-child(2) { top: 13px; }
.bj-zapato i:nth-child(3) { top: 19px; }
.bj-zapato-boca { position: absolute; left: 5px; bottom: 5px; width: 44px; height: 9px; border-radius: 5px; background: rgba(0, 0, 0, .6); }

/* BEKI de crupier: la mascota reparte, piensa, celebra o se encoge de hombros.
   El gesto lo pone el JS con `data-gesto` cuando ya pasó lo que cuenta. */
.bj-crupier { width: 132px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bj-beki { width: 66px; height: 66px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .5)); }
.bj-beki[data-gesto="espera"]  { animation: bekiRespira 3.6s ease-in-out infinite; }
.bj-beki[data-gesto="reparte"] { animation: bekiReparte .5s ease-in-out 2; }
.bj-beki[data-gesto="piensa"]  { animation: bekiPiensa 1.1s ease-in-out infinite; }
.bj-beki[data-gesto="celebra"] { animation: bekiCelebra .5s cubic-bezier(.2, 1.6, .4, 1) 3; }
.bj-beki[data-gesto="encoge"]  { animation: bekiEncoge .8s ease-in-out 2; }
@keyframes bekiRespira { 0%, 100% { transform: none; } 50% { transform: translate3d(0, -3px, 0); } }
@keyframes bekiReparte { 0%, 100% { transform: none; } 40% { transform: translate3d(12px, -5px, 0) rotate(9deg); } }
@keyframes bekiPiensa  { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes bekiCelebra { 0%, 100% { transform: none; } 45% { transform: translate3d(0, -10px, 0) scale(1.06); } }
@keyframes bekiEncoge  { 0%, 100% { transform: none; } 50% { transform: translate3d(0, 4px, 0) scale(.94) rotate(-3deg); } }
.bj-globo {
  position: relative;
  max-width: 132px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(6, 20, 26, .85);
  border: 1px solid rgba(245, 196, 81, .35);
  color: var(--texto-2);
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
}
.bj-globo::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-bottom-color: rgba(245, 196, 81, .35);
}

/* El arco de la mesa: la raya curva con las reglas de la casa, como en el paño. */
.bj-arco {
  border-top: 2px solid rgba(245, 196, 81, .45);
  border-radius: 50% 50% 0 0 / 34px 34px 0 0;
  padding-top: 8px;
  text-align: center;
}
.bj-arco span {
  font-family: var(--fuente-titulos);
  letter-spacing: .09em;
  font-size: 14px;
  color: var(--oro-claro);
  opacity: .85;
}

.bj-total { font-family: var(--fuente-titulos); font-size: 22px; color: var(--oro-claro); }
.bj-total.pasado { color: var(--rojo-claro); }
.pastilla.chica { font-size: 12px; padding: 3px 9px; }

/* Fichas de casino: en esta mesa son redondas, con el filo a rayas. Solo aquí,
   para no tocar las mesas que ya estaban cerradas. */
.bj-mesa .ficha {
  width: 62px;
  height: 62px;
  min-width: 62px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 3px dashed rgba(53, 224, 214, .55);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .45), inset 0 0 0 4px rgba(255, 255, 255, .05);
}
.bj-mesa .ficha.activa { border-style: dashed; box-shadow: 0 0 20px rgba(245, 196, 81, .45), inset 0 0 0 4px rgba(255, 255, 255, .22); }
.bj-mesa .ficha:hover:not(:disabled) { transform: translateY(-3px) rotate(-4deg); }

/* Atajo de teclado impreso en el botón: la mesa se juega sin soltar el teclado. */
.boton kbd {
  margin-left: 8px;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 5px;
  font-family: inherit;
  font-size: 12px;
  opacity: .55;
}

.cartas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; min-height: 96px; }
.carta { position: relative; width: 64px; height: 92px; perspective: 800px; }
.carta.reparte { animation: reparte .42s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--n, 0) * .16s); }
@keyframes reparte {
  0%   { transform: translate3d(130px, -92px, 0) rotate(16deg) scale(.86); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.carta-giro {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2, .8, .3, 1);
}
.carta-giro.tapada { transform: rotateY(180deg); }
.cara {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .45);
}
.cara.frente {
  background: linear-gradient(160deg, #fdfbf5, #e6e0d0);
  border: 1px solid #9c9483;
  color: #13212a;
}
.carta.roja .cara.frente { color: #c0322f; }
/* El dorso lleva la moneda de BEKI: el naipe es del Club, no de una baraja cualquiera. */
.cara.dorso {
  transform: rotateY(180deg);
  background: repeating-linear-gradient(45deg, #123a44 0 6px, #0d2b33 6px 12px);
  border: 1px solid var(--oro-oscuro);
}
.cara.dorso img { width: 34px; height: 34px; opacity: .92; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55)); }
.carta .rango {
  position: absolute; top: 5px; left: 7px;
  font-family: var(--fuente-titulos);
  font-size: 19px;
  line-height: 1;
}
.carta .rango.pie { top: auto; left: auto; bottom: 5px; right: 7px; transform: rotate(180deg); }
.carta .palo { font-size: 30px; line-height: 1; }
.carta.vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--linea);
  border-radius: 9px;
  color: var(--apagado);
  perspective: none;
}

/* Resultado: entra cuando la última carta ya aterrizó (--espera lo calcula el JS). */
.bj-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--linea);
  background: rgba(8, 23, 30, .6);
  text-align: center;
  animation: bannerEntra .45s cubic-bezier(.2, 1.4, .4, 1) both;
  animation-delay: var(--espera, 0ms);
}
@keyframes bannerEntra { 0% { transform: translate3d(0, 10px, 0) scale(.94); opacity: 0; } 100% { transform: none; opacity: 1; } }
.bj-banner-txt { font-family: var(--fuente-titulos); font-size: 30px; line-height: 1; }
.bj-banner.gana { border-color: rgba(75, 227, 143, .5); background: rgba(75, 227, 143, .1); }
.bj-banner.gana .bj-banner-txt { color: var(--verde); }
.bj-banner.blackjack {
  border-color: var(--oro);
  background: radial-gradient(420px 180px at 50% 120%, rgba(245, 196, 81, .28), rgba(8, 23, 30, .6) 70%);
  box-shadow: 0 0 40px rgba(245, 196, 81, .3);
}
.bj-banner.blackjack .bj-banner-txt {
  font-size: 42px;
  color: var(--oro-claro);
  text-shadow: 0 0 26px rgba(245, 196, 81, .5);
  animation: latido 1s ease-in-out 3;
}
.bj-banner.empata .bj-banner-txt { color: var(--oro-claro); }
.bj-banner.pierde { border-color: rgba(224, 75, 75, .28); }
.bj-banner.pierde .bj-banner-txt { color: var(--rojo-claro); }

/* ---------- Mayor o menor (T19 b) -----------------------------------------
   La misma mesa: paño, zapato y BEKI. La carta grande llega tapada y se
   voltea; el marcador de racha son fichas que se encienden, porque un número
   solo no se siente como una racha. */

.hilo-cartas { display: flex; gap: 18px; align-items: flex-end; justify-content: center; flex-wrap: wrap; }
.hilo-anterior { text-align: center; opacity: .55; }
.hilo-anterior .carta { width: 52px; height: 76px; }
.hilo-anterior .carta .palo { font-size: 22px; }
.hilo-actual { text-align: center; }
.hilo-actual .carta { width: 96px; height: 138px; }
.hilo-actual .carta .rango { font-size: 24px; }
.hilo-actual .carta .palo { font-size: 46px; }
.hilo-actual .cara.dorso img { width: 46px; height: 46px; }
.hilo-anterior .k, .hilo-actual .k { margin-bottom: 6px; }

.hilo-marcador {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  justify-content: center;
  padding-top: 4px;
}
.hilo-dato { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hilo-dato .num { font-family: var(--fuente-titulos); font-size: 26px; line-height: 1; }
.hilo-dato .num.oro { color: var(--oro-claro); }
.hilo-pips { display: flex; gap: 3px; margin-top: 3px; }
.hilo-pips i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(246, 242, 230, .16);
  transition: background .25s ease, box-shadow .25s ease;
}
.hilo-pips i.on { background: var(--oro); box-shadow: 0 0 8px rgba(245, 196, 81, .7); }
.hilo-retiro { text-align: center; max-width: 52ch; }
.hilo-retiro b { color: var(--oro); }

/* ---------- Duelos -------------------------------------------------------- */

.duelos-envoltura { display: flex; flex-direction: column; gap: 18px; }
.duelo-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; }
.duelo-form .boton { height: 44px; }
.duelos-listas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.duelos-lista { display: flex; flex-direction: column; gap: 10px; }

.duelo-fila {
  border-radius: var(--r-md);
  padding: 14px 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.duelo-arriba { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.duelo-lados { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.duelo-lado { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.duelo-lado.yo b { color: var(--oro); }
.duelo-vs {
  font-family: var(--fuente-titulos);
  font-size: 20px;
  color: var(--rojo-claro);
  letter-spacing: .06em;
}
.estado.propuesto { background: rgba(245, 196, 81, .12); border-color: rgba(245, 196, 81, .45); color: var(--oro); }
/* T71-U6: la solicitud con el visto bueno del supervisor, esperando la firma de la banca. */
.estado.visado { background: rgba(180, 140, 255, .14); border-color: rgba(180, 140, 255, .45); color: var(--morado); }
.estado.aceptado { background: rgba(53, 224, 214, .10); border-color: rgba(53, 224, 214, .45); color: var(--agua); }
.estado.resuelto { background: rgba(75, 227, 143, .12); border-color: rgba(75, 227, 143, .45); color: var(--verde); }
.estado.vencido { background: rgba(224, 75, 75, .12); border-color: rgba(224, 75, 75, .45); color: var(--rojo-claro); }
.estado.abierto { background: rgba(180, 140, 255, .12); border-color: rgba(180, 140, 255, .45); color: var(--morado); }
.estado.cancelado { background: rgba(255, 255, 255, .06); border-color: var(--linea); }

/* Duelos de varios: la fila deja de ser "A vs B" y pasa a ser un conjunto de fichas. */
.duelo-jugadores { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.duelo-jugador {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  background: rgba(255, 255, 255, .04);
  font-size: 12px;
  font-weight: 700;
}
.duelo-jugador.yo { border-color: rgba(245, 196, 81, .55); color: var(--oro); }
.duelo-jugador.pendiente { opacity: .55; }
.duelo-jugador.vacante { border-style: dashed; opacity: .5; font-weight: 600; }

.duelo-rivales { margin: 16px 0 4px; }
.duelo-invitados { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.duelo-invitado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  background: rgba(255, 255, 255, .03);
  font-size: 13px;
  cursor: pointer;
}
.duelo-invitado.activo { border-color: rgba(245, 196, 81, .7); background: rgba(245, 196, 81, .14); color: var(--oro); }
.duelo-reglas { margin: 14px 0 16px; max-width: 720px; line-height: 1.55; }

.duelo-detalle-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 10px; }
.duelo-detalle { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.duelo-detalle-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--linea);
  background: rgba(255, 255, 255, .03);
}
.duelo-detalle-fila.yo { border-color: rgba(245, 196, 81, .45); }
.duelo-detalle-fila .barra { grid-column: 1 / -1; }
.duelo-detalle-quien { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.duelo-detalle-num { text-align: right; }
.duelo-detalle-num .gana { color: var(--verde); }

/* ---------- Chat ---------------------------------------------------------- */

.chat-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 46vh;
  min-height: 240px;
  overflow-y: auto;
  padding: 4px 6px 4px 2px;
  border-radius: var(--r-md);
  background: rgba(6, 16, 20, .5);
  border: 1px solid var(--linea);
}
.chat-linea { display: flex; gap: 8px; align-items: flex-end; max-width: 86%; }
.chat-linea.mia { margin-left: auto; flex-direction: row-reverse; }
.chat-burbuja {
  padding: 8px 12px;
  border-radius: 14px 14px 14px 4px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--linea-suave);
  min-width: 0;
}
.chat-linea.mia .chat-burbuja {
  border-radius: 14px 14px 4px 14px;
  background: rgba(245, 196, 81, .13);
  border-color: rgba(245, 196, 81, .4);
}
.chat-quien { font-size: 12px; font-weight: 800; color: var(--tenue); letter-spacing: .04em; }
/* Aviso del motor: se distingue de un mensaje de persona sin robarle la pantalla al equipo. */
.chat-linea.sistema { max-width: 100%; }
.chat-linea.sistema .chat-burbuja { background: rgba(245, 196, 81, .10); border: 1px solid rgba(245, 196, 81, .35); }
.chat-linea.sistema .chat-quien { color: var(--oro); }
.chat-texto { font-size: 14px; font-weight: 600; word-break: break-word; white-space: pre-wrap; }
.chat-form { display: flex; gap: 10px; margin-top: 12px; }
.chat-form input { flex: 1; min-width: 0; }
.chat-pie { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; }

/* ---------- Chat: burbuja flotante y widget (T5 b) ------------------------- */
/* El widget es UNO solo y se mueve entre la burbuja y la pestaña Chat de las salas, así que estos
   estilos tienen que servir en los dos sitios: dentro de la burbuja manda `.chat-panel` (alto fijo,
   ancho de ventanita) y dentro de la pestaña, el ancho de la tarjeta. */

.chat-flotante {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.chat-flotante > * { pointer-events: auto; }

.chat-boton {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(245, 196, 81, .5);
  background: linear-gradient(180deg, var(--superficie-2), var(--superficie));
  color: var(--oro);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}
.chat-boton:hover { border-color: var(--oro); }
/* El globo se sale del círculo a propósito: tiene que verse antes que el icono. */
.chat-boton .globo {
  position: absolute;
  top: -2px; right: -2px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: var(--rojo);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  border: 2px solid var(--suelo-2);
}

.chat-panel {
  width: min(370px, calc(100vw - 28px));
  height: min(560px, calc(100vh - 130px));
  background: #0e2a34;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .55);
  overflow: hidden;
  display: flex;
}
.chat-panel > .chat-widget { flex: 1; min-width: 0; }

.chat-widget { display: flex; flex-direction: column; min-height: 0; }
.chat-panel .chat-widget { height: 100%; }
/* Dentro de la pestaña de salas el widget se pinta como una tarjeta más. */
#chatCuerpo .chat-widget {
  background: linear-gradient(160deg, var(--vidrio-a), var(--vidrio-b));
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: 4px 0;
}

.chat-cab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--linea);
}
.chat-cab-txt { flex: 1; min-width: 0; }
.chat-cab-txt h3 { margin: 2px 0 0; font-size: 16px; letter-spacing: .04em; }
.chat-cab-txt .k, .chat-cab-txt h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-icono {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--linea);
  background: rgba(255, 255, 255, .05);
  color: var(--texto);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.chat-icono:hover { border-color: var(--oro); color: var(--oro); }

/* El aviso no se puede cerrar: es lo que separa el modo fantasma del espionaje. */
.chat-aviso {
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--oro);
  background: rgba(245, 196, 81, .10);
  border-bottom: 1px solid rgba(245, 196, 81, .28);
}

.chat-cuerpo {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 14px 14px;
  overflow-y: auto;
}
/* Dentro de la burbuja la lista de mensajes crece con el panel; en la pestaña conserva su alto. */
.chat-panel .chat-lista { height: auto; flex: 1; min-height: 0; }

.chat-canales { display: flex; flex-direction: column; gap: 6px; }
.chat-canal {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--linea-suave);
  background: rgba(255, 255, 255, .03);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
}
.chat-canal:hover { border-color: var(--oro); }
.chat-canal.sin-leer { border-color: rgba(245, 196, 81, .45); background: rgba(245, 196, 81, .08); }
.chat-canal-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-canal-nombre { font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-canal-ultimo { font-size: 12px; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-canal-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.chat-canal-lado .globo {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--rojo); color: #fff;
  font-size: 12px; font-weight: 800;
}

.chat-acciones { margin-top: 12px; }
.chat-grupo-form { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-marcas { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; }
.chat-marca { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.chat-miembros { display: flex; flex-direction: column; gap: 8px; }
.chat-miembro { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; }

/* ---------- Bote ---------------------------------------------------------- */

.bote-grande {
  font-family: var(--fuente-titulos);
  font-size: 64px;
  line-height: 1;
  letter-spacing: .03em;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro) 45%, var(--oro-oscuro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Pantallas chicas --------------------------------------------- */

@media (max-width: 860px) {
  .salas-cabecera { padding: 16px; }
  .salas-cab { gap: 14px 18px; }
  .salas-cuenta { flex: 1 1 120px; padding: 8px 12px; }
  .salas-cuenta span { font-size: 26px; }
  .salas-medidor, .salas-bote-mini { flex: 1 1 100%; }
  .juegos-rejilla { grid-template-columns: minmax(0, 1fr); }
  .rodillos-juego { gap: 8px; padding: 10px; }
  .tragamonedas.maquina { --tm-ficha: 98px; --tm-ancho: 92px; }
  .tm-caja { padding: 12px 20px; }
  .tm-ficha { font-size: 30px; }
  .tm-ficha.largo { font-size: 23px; }
  .tm-ficha.muylargo { font-size: 17px; }
  .rasca-rejilla { grid-template-columns: repeat(3, 76px); }
  .rasca-celda { height: 76px; }
  .hilo-actual .carta { width: 84px; height: 122px; }
  .hilo-actual .carta .palo { font-size: 38px; }
  .chat-lista { height: 52vh; }
  /* En el celular la ventanita del chat ocupa casi todo: media pantalla no sirve para escribir.
     UX-08: la burbuja va ENCIMA de la barra inferior (--alto-nav), no sobre ella: a 390 px el
     botón de 56 px tapaba entero el quinto ítem ("Cofres", justo la colección de D-1). */
  .chat-flotante { right: 12px; bottom: calc(var(--alto-nav) + 12px + env(safe-area-inset-bottom, 0px)); left: 12px; align-items: stretch; }
  .chat-panel { width: auto; height: min(72vh, calc(100vh - 110px)); }
  .chat-boton { align-self: flex-end; }
  .duelo-form { grid-template-columns: minmax(0, 1fr); }
  .bote-grande { font-size: 48px; }
}

@media (max-width: 420px) {
  .rodillos-juego { gap: 6px; padding: 8px; }
  .tragamonedas.maquina { --tm-ficha: 86px; --tm-ancho: 88px; }
  .tm-caja { padding: 10px 16px; }
  .tm-ficha { font-size: 24px; }
  .tm-ficha.largo { font-size: 18px; }
  .tm-ficha.muylargo { font-size: 14px; }
  .luces i { width: 5px; height: 5px; }
  .rasca-rejilla { grid-template-columns: repeat(3, 66px); gap: 6px; }
  .rasca-celda { height: 66px; font-size: 20px; }
  .rasca-valor { font-size: 20px; }
  .rasca-billete { padding: 12px 12px 8px; }
  .carta { width: 54px; height: 78px; }
  .carta .palo { font-size: 24px; }
  .hilo-actual .carta { width: 72px; height: 104px; }
  .hilo-actual .carta .palo { font-size: 32px; }
  .hilo-anterior .carta { width: 44px; height: 64px; }
  .jackpot-cifra { font-size: 30px; }
  .ficha { min-width: 50px; padding: 9px 10px; font-size: 13px; }
  .chat-linea { max-width: 94%; }
}

/* ==========================================================================
   Temporada (fase 3): cabecera con el premio final, el pase e insignias.
   Se añade al final: no cambia nada de lo anterior.
   ========================================================================== */

.temporada-cab { padding: 20px 24px; margin-bottom: 16px; }
.temporada-desc { margin: -2px 0 14px; max-width: 78ch; }

.temporada-vacia {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 22px 20px;
  border: 1px dashed var(--linea);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .02);
}
.temporada-vacia-ico { font-size: 42px; line-height: 1; }

/* El premio final: el ancla de todo el mes. */
.temporada-premio {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 20px;
  border-radius: var(--r-md);
  border: 1px solid rgba(245, 196, 81, .42);
  background:
    radial-gradient(420px 220px at 8% -30%, rgba(245, 196, 81, .22), transparent 70%),
    linear-gradient(160deg, rgba(245, 196, 81, .10), rgba(10, 28, 36, .5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.temporada-premio-ico {
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  font-size: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255, 224, 138, .34), rgba(10, 28, 36, .7));
  border: 2px solid rgba(245, 196, 81, .6);
  box-shadow: 0 0 34px rgba(245, 196, 81, .32);
}
.temporada-premio-cuerpo { flex: 1 1 260px; min-width: 0; }
.temporada-premio-nombre {
  font-size: 34px;
  line-height: 1.02;
  margin: 4px 0 6px;
  color: var(--oro-claro);
  text-shadow: 0 0 26px rgba(245, 196, 81, .35);
  overflow-wrap: anywhere;
}
.temporada-premio-pie {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.temporada-premio-pie b { color: var(--oro); }

/* T70-P1 · la escalera del premio de temporada, por asesor. Cada fila dice las cuatro cosas que el
   asesor pregunta mirando un premio: cuánto hay que cobrar, cuánto paga, si ya lo tiene y cuánto le
   falta. Rejilla y no tabla: en el teléfono las dos últimas columnas caen debajo solas. */
.premio-escalera { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.premio-esc {
  display: grid;
  grid-template-columns: 28px minmax(90px, 1fr) minmax(110px, 1.2fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm, 10px);
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(10, 28, 36, .38);
}
.premio-esc.logrado { border-color: rgba(245, 196, 81, .45); background: rgba(245, 196, 81, .09); }
.premio-esc.siguiente { border-color: rgba(120, 226, 255, .5); box-shadow: 0 0 0 1px rgba(120, 226, 255, .16) inset; }
.premio-esc-nivel {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font-size: 12px; font-weight: 800;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
}
.premio-esc.logrado .premio-esc-nivel { background: rgba(245, 196, 81, .28); border-color: rgba(245, 196, 81, .6); color: var(--oro-claro); }
.premio-esc-meta { font-variant-numeric: tabular-nums; }
.premio-esc-meta i { font-style: normal; font-size: 12px; }
.premio-esc-premio { font-weight: 800; color: var(--oro-claro); overflow-wrap: anywhere; }
.premio-esc-falta { text-align: right; }
@media (max-width: 520px) {
  .premio-esc { grid-template-columns: 24px 1fr auto; }
  .premio-esc-falta { grid-column: 2 / -1; text-align: left; }
}

/* ---------- El pase ------------------------------------------------------ */

.pase-caja { padding: 20px 24px; margin-bottom: 16px; }

.pase-regla {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(53, 224, 214, .45);
  background: rgba(53, 224, 214, .09);
  color: var(--agua);
  font-size: 12.5px;
  font-weight: 800;
}

.pase-resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  flex-wrap: wrap;
  margin: 14px 0 16px;
}
.pase-xp-cifra { font-size: 34px; line-height: 1; color: var(--agua); margin-top: 2px; }
.pase-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.pase-escalera {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 2px 14px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.pase-lista {
  display: flex;
  align-items: stretch;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: min-content;
}

.pase-nodo {
  position: relative;
  flex: 0 0 auto;
  width: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--linea);
  background: linear-gradient(170deg, rgba(20, 49, 58, .7), rgba(10, 28, 36, .8));
  text-align: center;
}
/* La cuerda que une los niveles. */
.pase-nodo::before {
  content: "";
  position: absolute;
  top: 32px;
  left: -11px;
  width: 11px;
  height: 2px;
  background: var(--linea);
}
.pase-lista > :first-child::before { display: none; }

.pase-nivel { position: relative; display: flex; align-items: center; gap: 5px; }
.pase-num {
  font-family: var(--fuente-titulos);
  font-size: 26px;
  line-height: 1;
  color: var(--texto);
}
.pase-check { color: var(--verde); font-size: 15px; font-weight: 800; }
.pase-ico { font-size: 26px; line-height: 1; }
.pase-premio { font-size: 12.5px; font-weight: 800; color: var(--texto); line-height: 1.25; overflow-wrap: anywhere; }
.pase-beky { font-size: 12px; font-weight: 800; color: var(--tenue); }
.pase-estado {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--apagado);
  margin-top: 2px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.pase-boton { margin-top: 2px; width: 100%; }

/* Reclamado: apagado y con su check. */
.pase-nodo.reclamado { opacity: .55; border-color: rgba(75, 227, 143, .3); }
.pase-nodo.reclamado .pase-num { color: var(--verde); }
.pase-nodo.reclamado .pase-estado { color: var(--verde); opacity: .8; }

/* Alcanzado y sin reclamar: el oro que llama. */
.pase-nodo.listo {
  border-color: var(--oro);
  background: linear-gradient(170deg, rgba(245, 196, 81, .2), rgba(10, 28, 36, .82));
  box-shadow: 0 0 26px rgba(245, 196, 81, .35), inset 0 1px 0 rgba(255, 255, 255, .1);
  animation: paselatido 2.4s ease-in-out infinite;
}
.pase-nodo.listo .pase-num { color: var(--oro-claro); }
.pase-nodo.listo::before { background: var(--oro); }

@keyframes paselatido {
  0%, 100% { box-shadow: 0 0 22px rgba(245, 196, 81, .28), inset 0 1px 0 rgba(255, 255, 255, .1); }
  50%      { box-shadow: 0 0 40px rgba(245, 196, 81, .6), inset 0 1px 0 rgba(255, 255, 255, .14); }
}

/* Bloqueado. */
.pase-nodo.cerrado { opacity: .48; }
.pase-nodo.cerrado .pase-ico { filter: grayscale(1); }

/* Marcador de "estás aquí". */
.pase-marca {
  flex: 0 0 auto;
  width: 156px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 10px;
  text-align: center;
  border-radius: var(--r-md);
  border: 1px dashed var(--agua);
  background: rgba(53, 224, 214, .08);
}
.pase-marca-punto { color: var(--agua); font-size: 16px; line-height: 1; }
.pase-marca .k { color: var(--agua); }
.pase-marca-txt { font-size: 12px; font-weight: 700; color: var(--texto-2); line-height: 1.3; }
.pase-marca-txt b { color: var(--oro); }

/* ---------- Insignias ---------------------------------------------------- */

.insignias-caja { padding: 20px 24px; }

.insignias-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 12px;
}

.insignia {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 16px 12px 14px;
  text-align: center;
  border-radius: var(--r-md);
  border: 1px solid var(--linea);
  background: linear-gradient(170deg, rgba(20, 49, 58, .62), rgba(10, 28, 36, .8));
}
.insignia-ico { font-size: 32px; line-height: 1; }
.insignia-nombre { font-weight: 800; font-size: 13.5px; color: var(--texto); line-height: 1.25; }
.insignia-desc { line-height: 1.35; }
.insignia-barra { width: 100%; margin-top: auto; }
.insignia-pie { font-size: 12px; font-weight: 800; color: var(--tenue); margin-top: 4px; }
.insignia-pie.hecha { color: var(--verde); margin-top: auto; padding-top: 6px; }

.insignia.ganada {
  border-color: rgba(245, 196, 81, .5);
  background: linear-gradient(170deg, rgba(245, 196, 81, .14), rgba(10, 28, 36, .8));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.insignia.ganada .insignia-nombre { color: var(--oro-claro); }

.insignia.pendiente { opacity: .62; }
.insignia.pendiente .insignia-ico { filter: grayscale(1); opacity: .75; }

.insignia.nueva {
  border-color: var(--oro);
  animation: insignianueva 2.2s ease-out 1;
}
.insignia-sello {
  position: absolute;
  top: -9px;
  right: -6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro-oscuro));
  color: var(--oro-tinta);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  box-shadow: 0 0 18px rgba(245, 196, 81, .6);
}

@keyframes insignianueva {
  0%   { transform: scale(1); box-shadow: 0 0 0 rgba(245, 196, 81, 0); }
  18%  { transform: scale(1.07); box-shadow: 0 0 42px rgba(245, 196, 81, .75); }
  40%  { transform: scale(1); box-shadow: 0 0 26px rgba(245, 196, 81, .5); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(245, 196, 81, 0); }
}

/* ---------- Pantallas chicas --------------------------------------------- */

@media (max-width: 860px) {
  .temporada-cab, .pase-caja, .insignias-caja { padding: 16px; }
  .temporada-premio { gap: 14px; padding: 14px; }
  .temporada-premio-ico { width: 62px; height: 62px; font-size: 32px; }
  .temporada-premio-nombre { font-size: 28px; }
  .insignias-rejilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* Álbum (T9): colección del mes, avance por familia, próximas a caer y filtros. Las piezas y las
   familias son fichas chicas porque son veinticinco: en tarjetas grandes tapan la rejilla. */
.coleccion-caja {
  padding: 14px 14px 12px;
  margin-bottom: 14px;
  border-radius: 14px;
  border: 1px solid rgba(245, 196, 81, .28);
  background: linear-gradient(180deg, rgba(245, 196, 81, .10), rgba(255, 255, 255, .02));
}
.coleccion-caja .tarjeta-cab h2 { font-size: 20px; }

.insig-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.insig-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px; font-size: 12px; line-height: 1.5;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: var(--texto-2);
}
.insig-chip b { color: var(--texto); font-weight: 700; }
.insig-chip.ok {
  border-color: rgba(75, 227, 143, .45);
  background: rgba(75, 227, 143, .12);
  color: var(--verde);
}
.insig-proximas, .insig-familias { margin-bottom: 12px; }
.insig-proximas .k, .insig-familias .k { margin-bottom: 6px; }

.insig-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.insig-filtros button {
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font-size: 12px; letter-spacing: .02em;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  color: var(--texto-2);
}
.insig-filtros button .mini { opacity: .7; }
.insig-filtros button:hover { border-color: rgba(255, 255, 255, .3); color: var(--texto); }
.insig-filtros button.activo {
  border-color: rgba(245, 196, 81, .55);
  background: rgba(245, 196, 81, .14);
  color: var(--oro);
}

@media (max-width: 420px) {
  .pase-nodo { width: 118px; padding: 12px 8px 10px; }
  .pase-estado { font-size: 12px; letter-spacing: .04em; }
  .pase-premio { font-size: 12px; }
  .pase-marca { width: 138px; }
  .pase-xp-cifra { font-size: 28px; }
  .temporada-premio-nombre { font-size: 24px; }
  .insignias-rejilla { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 10px; }
  .insignia { padding: 14px 9px 12px; }
  .insignia-ico { font-size: 27px; }
}

/* ==========================================================================
   Retos de meta: "apuesto 500 BEKY a que hago 3 ventas antes de las 5".
   Se añade al final: no cambia nada de lo anterior.
   ========================================================================== */

.reto-principal { display: flex; flex-direction: column; gap: 16px; }

.reto-aviso {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  flex-wrap: wrap;
}
.reto-aviso.gana   { border-color: rgba(75, 227, 143, .45); }
.reto-aviso.pierde { border-color: rgba(224, 75, 75, .35); }

.reto-caja { padding: 22px 24px; }
.reto-caja.ganando { border-color: rgba(75, 227, 143, .5); box-shadow: var(--sombra), 0 0 44px rgba(75, 227, 143, .16); }

/* ---------- Formulario ---------------------------------------------------- */

.reto-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}
.reto-campos { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* En pantalla ancha los campos van de dos en dos: si no, quedan estirados. */
@media (min-width: 861px) {
  .reto-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; align-content: start; }
}

.reto-stepper { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.reto-stepper > .boton { min-width: 44px; font-size: 18px; line-height: 1; padding: 8px 14px; }
.reto-meta { display: flex; align-items: baseline; gap: 8px; }
.reto-meta-cifra {
  font-family: var(--fuente-titulos);
  font-size: 46px;
  line-height: 1;
  color: var(--oro);
  text-shadow: 0 0 20px rgba(245, 196, 81, .45);
}
.reto-meta-txt { font-size: 13px; font-weight: 800; color: var(--tenue); text-transform: uppercase; letter-spacing: .1em; }

.reto-atajos { display: flex; flex-wrap: wrap; gap: 6px; }
.reto-atajos .boton { padding: 6px 12px; font-size: 12px; }

/* ---------- Panel de cuota en vivo ---------------------------------------- */

.reto-cuota {
  border: 1px solid rgba(245, 196, 81, .42);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(245, 196, 81, .10), rgba(10, 26, 32, .85));
  padding: 18px 16px 16px;
  text-align: center;
  transition: opacity .18s ease;
}
.reto-cuota.calculando { opacity: .45; }
.reto-cuota .boton { margin-top: 14px; }

.reto-mult {
  font-family: var(--fuente-titulos);
  font-size: clamp(54px, 13vw, 74px);
  line-height: 1;
  margin: 4px 0 2px;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro) 45%, var(--oro-oscuro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: .02em;
}
.reto-mult.apagada { background: none; color: var(--apagado); -webkit-text-fill-color: currentColor; }
.reto-mult.chico {
  font-size: 26px;
  margin: 0;
  flex: none;
  -webkit-text-fill-color: transparent;
}

.reto-premio { font-family: var(--fuente-titulos); font-size: 30px; line-height: 1; color: var(--texto); letter-spacing: .04em; }
.reto-prob { margin-top: 10px; font-size: 13px; font-weight: 800; color: var(--agua); }

.reto-motivo {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(224, 75, 75, .12);
  border: 1px solid rgba(224, 75, 75, .4);
  color: var(--rojo-claro);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}
.reto-motivo.chico { font-size: 12px; padding: 8px 10px; }

.reto-tope { margin-top: 18px; max-width: 560px; }
.reto-reglas { margin-top: 12px; line-height: 1.5; }

/* ---------- Tablero de mi reto -------------------------------------------- */

.reto-cartel {
  text-align: center;
  padding: 14px;
  margin-bottom: 14px;
  border-radius: var(--r-md);
  background: rgba(75, 227, 143, .10);
  border: 1px solid rgba(75, 227, 143, .45);
}
.reto-cartel-titulo { font-size: 36px; line-height: 1; color: var(--verde); }

.reto-frase {
  font-size: 14px;
  font-style: italic;
  color: var(--texto-2);
  border-left: 3px solid rgba(245, 196, 81, .55);
  padding: 2px 0 2px 12px;
  margin: 10px 0;
  overflow-wrap: anywhere;
}
.reto-frase.grande { font-size: 17px; margin: 0 0 16px; }

.reto-tablero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
.reto-avance { min-width: 0; }
.reto-marcador { font-family: var(--fuente-titulos); font-size: 52px; line-height: 1; display: flex; align-items: baseline; gap: 8px; }
.reto-marcador .num { color: var(--oro); text-shadow: 0 0 20px rgba(245, 196, 81, .4); }
.reto-marcador .tenue { font-size: 30px; }
.reto-marcador.chico { font-size: 30px; }
.reto-marcador.chico .tenue { font-size: 20px; }

.reto-cuenta { text-align: center; }
.reto-cuenta .cuenta-atras { margin-left: 0; text-align: center; }
.reto-cuenta .cuenta-atras.agotada { color: var(--rojo-claro); }
.reto-cuenta.chico .cuenta-atras { font-size: 22px; }

.reto-premio-caja { text-align: right; min-width: 0; }
.reto-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-top: 8px; }

.reto-apoyos { margin-top: 18px; border-top: 1px solid var(--linea-suave); padding-top: 14px; }
.reto-apoyos-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.reto-apoyo-chip {
  display: inline-flex;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(53, 224, 214, .10);
  border: 1px solid rgba(53, 224, 214, .35);
  font-size: 12px;
  font-weight: 700;
  color: var(--texto-2);
}
.reto-acciones { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Los retos del equipo ------------------------------------------ */

.retos-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 14px;
}

.reto-carta {
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background: rgba(10, 26, 32, .55);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.reto-carta.ganando { border-color: rgba(75, 227, 143, .45); }
.reto-carta-cab { display: flex; align-items: center; gap: 10px; }
.reto-nombre { font-weight: 800; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reto-carta-datos { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.reto-apoyo {
  margin-top: 4px;
  border-top: 1px solid var(--linea-suave);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reto-apoyo.dentro { gap: 6px; }
.reto-apoyo-fila { display: flex; gap: 8px; align-items: center; }
.reto-apoyo-input { width: auto; flex: 1; min-width: 0; padding: 9px 11px; font-size: 14px; }
.reto-apoyo-btn { flex: none; }

.retos-cerrados { display: flex; flex-direction: column; gap: 8px; }
.reto-cerrado {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--linea-suave);
  opacity: .82;
}
.reto-cerrado > div > div:first-child { overflow-wrap: anywhere; }

/* ---------- Los tres ejes del reto (T14 b) -------------------------------- */

.reto-ejes { display: grid; gap: 16px; margin-bottom: 18px; }
@media (min-width: 620px) { .reto-ejes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.reto-opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.reto-opcion { padding: 7px 13px; font-size: 12px; }
.reto-opcion.activa {
  border-color: rgba(245, 196, 81, .75);
  background: rgba(245, 196, 81, .16);
  color: var(--oro);
}
.reto-cierre {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--linea);
  background: rgba(255, 255, 255, .03);
  font-weight: 800;
  text-transform: capitalize;
}

/* ---------- El equipo: ranking, respaldo y lo que cerró (T14 c) ----------- */

.reto-equipo { display: flex; flex-direction: column; gap: 18px; }
.reto-equipo-rejilla { display: grid; gap: 18px; }
@media (min-width: 860px) { .reto-equipo-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.reto-equipo-bloque { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.reto-equipo-bloque > .k { margin-bottom: 2px; }

.reto-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--linea-suave);
}
.reto-fila > div > div:first-child { overflow-wrap: anywhere; }
.reto-pos {
  flex: none;
  width: 22px;
  text-align: center;
  font-family: var(--fuente-titulos);
  font-size: 20px;
  color: var(--oro);
}

/* ---------- El muro del reto: comentarios y reacciones -------------------- */

.reto-muro { margin-top: 14px; border-top: 1px solid var(--linea-suave); padding-top: 12px; }
.reto-reacciones { display: flex; flex-wrap: wrap; gap: 6px; }
.reto-reaccion {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  background: rgba(255, 255, 255, .03);
  color: var(--texto-2);
  font-size: 13px;
  cursor: pointer;
}
.reto-reaccion:hover:not(:disabled) { border-color: rgba(53, 224, 214, .5); }
.reto-reaccion.mia { border-color: rgba(245, 196, 81, .7); background: rgba(245, 196, 81, .14); color: var(--oro); }
.reto-reaccion:disabled { opacity: .5; cursor: default; }
.reto-reaccion b { font-size: 12px; }

.reto-comentarios { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.reto-comentario { display: flex; align-items: flex-start; gap: 8px; }
.reto-comentario-txt { font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.reto-comentario-x {
  flex: none;
  border: none;
  background: none;
  color: var(--apagado);
  font-size: 16px;
  line-height: 1;
  padding: 2px 5px;
  cursor: pointer;
}
.reto-comentario-x:hover { color: var(--rojo-claro); }

.reto-comentar { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.reto-comentar-txt { flex: 1; min-width: 0; width: auto; padding: 9px 11px; font-size: 13px; }
.reto-comentar-btn { flex: none; }

@media (max-width: 860px) {
  .reto-caja { padding: 18px 16px; }
  .reto-form { grid-template-columns: minmax(0, 1fr); }
  /* UX-14: en el móvil la cuota va DESPUÉS de la meta y la apuesta que la producen. Arriba
     "enganchaba", pero el asesor veía "la casa te paga ×10 · 5.000 BEKY" antes de saber con qué
     apuesta y con qué meta se calculó, y el número cambiaba al tocar los controles de abajo. */
  .reto-tablero { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .reto-cuenta { text-align: left; }
  .reto-cuenta .cuenta-atras { text-align: left; }
  .reto-premio-caja { text-align: left; }
  .reto-chips { justify-content: flex-start; }
  .reto-marcador { font-size: 44px; }
  .reto-cartel-titulo { font-size: 30px; }
}

@media (max-width: 420px) {
  .reto-stepper > .boton { min-width: 40px; }
  .reto-meta-cifra { font-size: 40px; }
  .reto-premio { font-size: 26px; }
  .reto-cerrado { padding: 9px 10px; }
}

/* ==========================================================================
   Fase 4 — campanita, bóveda, liquidación y premios financiados
   ========================================================================== */

/* ---------- Campanita (bandeja de pendientes) ----------------------------- */

.campana-envoltura { position: relative; }

.boton-campana {
  position: relative;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: var(--texto);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.boton-campana.tiene { border-color: rgba(245, 196, 81, .55); background: rgba(245, 196, 81, .12); color: var(--oro); }
/* El globo se sale del círculo a propósito: tiene que verse antes que el icono. */
.boton-campana .globo {
  position: absolute;
  top: -4px; right: -4px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--rojo);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  border: 2px solid var(--suelo-2);
}

.bandeja {
  position: absolute;
  right: 0; top: calc(100% + 8px);
  width: min(340px, calc(100vw - 32px));
  background: #0e2a34;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  box-shadow: var(--sombra);
  padding: 8px;
  z-index: 70;
}
.bandeja-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 6px 10px;
  border-bottom: 1px solid var(--linea-suave);
}
.bandeja-lista { max-height: min(60vh, 420px); overflow-y: auto; padding-top: 6px; }

.noti {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px;
  background: none;
  border: 0;
  border-radius: 12px;
  color: var(--texto);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.noti:hover { background: rgba(53, 224, 214, .10); }
.noti.leida { opacity: .58; }
.noti-ico { font-size: 18px; line-height: 1.2; flex: none; }
.noti-cuerpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.noti-titulo { font-weight: 800; font-size: 13px; overflow-wrap: anywhere; }
.noti-texto { font-size: 12px; color: var(--texto-2); overflow-wrap: anywhere; }
.noti-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--oro); flex: none; margin-top: 6px; }

/* ---------- Bóveda -------------------------------------------------------- */

/* ---------------------------------------------------------------- MI BANCO
   T10 (a): número de cuenta, las tres cuentas y el estado de cuenta.
   La tabla es propia y no hereda de `.tabla` del panel: la app del asesor solo carga casino.css. */
.banco-numero {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid rgba(245, 196, 81, .35);
  border-radius: var(--r-md);
  background: rgba(245, 196, 81, .06);
  padding: 12px 14px;
}
.banco-num { font-family: var(--fuente-titulos); font-size: 30px; letter-spacing: .06em; color: var(--oro); line-height: 1.1; }

.banco-cuentas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.banco-cuenta {
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background: rgba(10, 26, 32, .55);
  padding: 12px 14px;
  min-width: 0;
}
.banco-cuenta .cifra { font-family: var(--fuente-titulos); font-size: 34px; line-height: 1.05; }
.banco-cuenta.corriente { border-color: rgba(245, 196, 81, .45); }
.banco-cuenta.corriente .cifra { color: var(--oro); }
.banco-cuenta.ahorro .cifra { color: var(--agua); }
.banco-cuenta.inversion .cifra { color: var(--verde); }
.banco-ganado { margin-top: 12px; font-size: 13px; color: var(--texto-2); }

.banco-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.banco-tab {
  border: 1px solid var(--linea); border-radius: 999px; background: transparent;
  color: var(--texto-2); font: inherit; font-size: 12px; font-weight: 700;
  padding: 6px 14px; cursor: pointer; letter-spacing: .04em; text-transform: uppercase;
}
.banco-tab:hover { color: var(--texto); }
.banco-tab.activo { border-color: rgba(245, 196, 81, .6); background: rgba(245, 196, 81, .12); color: var(--oro); }

.banco-tabla-wrap { overflow-x: auto; }
.banco-tabla { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }
.banco-tabla th {
  text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-2); padding: 8px 10px; border-bottom: 1px solid var(--linea); white-space: nowrap;
}
.banco-tabla td { padding: 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, .05); vertical-align: top; }
.banco-tabla tr:last-child td { border-bottom: 0; }
.banco-tabla .n { text-align: right; white-space: nowrap; }
.banco-tabla .cargo { color: var(--rojo-claro); }
.banco-tabla .abono { color: var(--verde); }
.banco-saldo-ini { margin-bottom: 8px; }
.banco-saldo-fin { margin-top: 10px; text-align: right; font-size: 14px; color: var(--oro); }

@media (max-width: 760px) {
  .banco-cuentas { grid-template-columns: 1fr; }
  .banco-numero { flex-direction: column; align-items: flex-start; }
}

.boveda-cifras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.boveda-cifra {
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background: rgba(10, 26, 32, .55);
  padding: 12px 14px;
  min-width: 0;
}
.boveda-cifra .cifra { font-family: var(--fuente-titulos); font-size: 34px; line-height: 1.05; }
.boveda-cifra.oro { border-color: rgba(245, 196, 81, .45); }
.boveda-cifra.oro .cifra { color: var(--oro); }
.boveda-cifra.verde { border-color: rgba(75, 227, 143, .35); }
.boveda-cifra.verde .cifra { color: var(--verde); }

.boveda-form { display: flex; flex-direction: column; gap: 14px; }

.boveda-plazos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.boveda-plazo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--linea);
  background: rgba(10, 26, 32, .55);
  color: var(--texto);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.boveda-plazo:hover { border-color: rgba(53, 224, 214, .5); }
.boveda-plazo.activo {
  border-color: var(--oro);
  background: rgba(245, 196, 81, .12);
  box-shadow: 0 0 22px rgba(245, 196, 81, .22);
}
.boveda-dias { font-family: var(--fuente-titulos); font-size: 24px; line-height: 1; letter-spacing: .03em; }
.boveda-pct { font-weight: 800; font-size: 13px; color: var(--oro); }
/* El gancho: lo que cobrarías con lo que estás escribiendo. Es la cifra que decide. */
.boveda-gancho { font-size: 12px; color: var(--texto-2); line-height: 1.35; overflow-wrap: anywhere; }
.boveda-plazo.activo .boveda-gancho { color: var(--texto); font-weight: 700; }

.boveda-regla {
  margin: 16px 0;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid rgba(75, 227, 143, .35);
  background: rgba(75, 227, 143, .08);
  font-size: 13px;
  line-height: 1.45;
  color: var(--texto);
}

/* Inversión (T10 b). Reusa las cifras, la regla y las filas de la bóveda: son la misma caja de
   ahorro con otra cara, y dos diseños distintos para lo mismo se leen como dos productos. Lo propio
   es el bloque de la meta del equipo y los dos desenlaces. */
.inv-meta {
  padding: 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--linea-suave);
  background: rgba(255, 255, 255, .03);
}
.inv-meta-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.inv-desenlaces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.inv-desenlace {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(75, 227, 143, .3);
  background: rgba(75, 227, 143, .07);
}
.inv-desenlace b { font-size: 18px; }

.boveda-lista { display: flex; flex-direction: column; gap: 8px; }
.boveda-dep {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--linea-suave);
  background: rgba(255, 255, 255, .03);
}
.boveda-dep.cerrado { opacity: .62; }
.boveda-dep-datos { flex: 1; min-width: 160px; }
.boveda-dep-cobro { text-align: right; min-width: 96px; }
.boveda-dep-cobro .cifra { font-family: var(--fuente-titulos); font-size: 26px; line-height: 1; color: var(--oro); }
.boveda-dep.cerrado .boveda-dep-cobro .cifra { color: var(--texto-2); }

/* ---------- Liquidación --------------------------------------------------- */

.liq-abierta {
  padding: 18px;
  border-radius: var(--r-md);
  border: 1px solid rgba(245, 196, 81, .45);
  background: rgba(245, 196, 81, .08);
}
.liq-desglose, .liq-total { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.liq-desglose > div, .liq-total > div { display: flex; justify-content: space-between; gap: 12px; }
.liq-desglose .menos b, .liq-total .menos b { color: var(--rojo-claro); }
.liq-total {
  margin-top: 4px;
  padding: 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--linea);
  background: rgba(10, 26, 32, .55);
}
.liq-total .total {
  border-top: 1px solid var(--linea-suave);
  margin-top: 4px; padding-top: 10px;
  font-weight: 800;
}
.liq-total .total b { font-family: var(--fuente-titulos); font-size: 30px; line-height: 1; color: var(--oro); }

.liq-form { display: flex; flex-direction: column; gap: 14px; }
.liq-bonos { display: flex; flex-direction: column; gap: 6px; }
.liq-linea {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--linea-suave);
  background: rgba(255, 255, 255, .03);
}
.liq-aviso {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(245, 196, 81, .45);
  background: rgba(245, 196, 81, .08);
  font-size: 13px;
  line-height: 1.4;
}
/* UX-01: el motivo por el que no se puede pedir se pinta en rojo y en español, debajo del botón;
   el globito nativo del navegador no se ve en el teléfono. */
#liqMotivo.liq-error { color: var(--rojo); font-weight: 700; }
.liq-historial { display: flex; flex-direction: column; gap: 8px; }
.enlace-comprobante { color: var(--agua); font-weight: 800; text-decoration: none; }
.enlace-comprobante:hover { text-decoration: underline; }

/* ---------- Premios financiados ------------------------------------------- */

.premios-fin-lista { display: flex; flex-direction: column; gap: 18px; }
.pfin-carta.apagada { opacity: .6; }
.pfin-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.pfin-datos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.pfin-datos > div {
  border: 1px solid var(--linea-suave);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .03);
  padding: 10px 12px;
  min-width: 0;
}
.pfin-progreso { margin-bottom: 12px; }

.pfin-cuotas { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.pfin-cuota {
  display: grid;
  grid-template-columns: 44px 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--linea-suave);
  background: rgba(255, 255, 255, .03);
  font-size: 13px;
}
.pfin-cuota.pagada { border-color: rgba(75, 227, 143, .3); }
.pfin-cuota.anulada { opacity: .55; }
.pfin-cuota-n { font-weight: 800; color: var(--tenue); }
.pfin-cuota-monto { font-weight: 800; }

/* El aviso de las cuotas pendientes va siempre a la vista, nunca en un tooltip: la regla es
   justa, lo que la vuelve un problema es enterarse el día que te vas. */
.pfin-aviso {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(224, 75, 75, .45);
  background: rgba(224, 75, 75, .10);
  color: var(--texto);
  font-size: 12.5px;
  line-height: 1.45;
}

/* Estados que faltaban (femeninos de cuotas y liquidaciones, y los de la bóveda) */
.estado.solicitada, .estado.abierto { background: rgba(245, 196, 81, .12); border-color: rgba(245, 196, 81, .45); color: var(--oro); }
.estado.aprobada, .estado.completado { background: rgba(75, 227, 143, .12); border-color: rgba(75, 227, 143, .45); color: var(--verde); }
.estado.pagada { background: rgba(53, 224, 214, .10); border-color: rgba(53, 224, 214, .45); color: var(--agua); }
.estado.rechazada, .estado.anulada, .estado.cancelado { background: rgba(224, 75, 75, .12); border-color: rgba(224, 75, 75, .45); color: var(--rojo-claro); }
.estado.retirado { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: var(--texto-2); }

/* ================================================================ MESA DE DADOS (T22)
   Mismo lenguaje que el blackjack y el rasca: paño con filo dorado, foco de luz y textura de
   fieltro hecha con degradados (ni una imagen que descargar). Lo propio de esta mesa son los dos
   dados: un cubo de cara plana con los puntos en la rejilla de 3×3 de un dado de verdad, para que
   la cara se lea de un vistazo desde el teléfono sin tener que contar puntos. */
.dados-pano {
  position: relative;
  width: 100%;
  padding: 22px 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  border-radius: 28px;
  border: 3px solid var(--oro-oscuro);
  background:
    radial-gradient(680px 300px at 50% -12%, rgba(53, 224, 214, .16), transparent 70%),
    radial-gradient(520px 260px at 50% 118%, rgba(0, 0, 0, .38), transparent 72%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .014) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, #0f4a4a, #093036 62%, #06232a);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .55), 0 18px 34px rgba(0, 0, 0, .4);
}

/* El cubilete, arriba a la derecha: el equivalente del zapato del blackjack. De ahí salen los dados. */
.dados-cubilete {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 44px;
  height: 48px;
  border-radius: 6px 6px 16px 16px;
  background: linear-gradient(160deg, #1b3b45, #08181e);
  border: 2px solid var(--oro-oscuro);
  transform: rotate(9deg);
  box-shadow: var(--sombra-corta);
}
.dados-cubilete i { position: absolute; left: 5px; width: 30px; height: 2px; border-radius: 2px; background: rgba(246, 242, 230, .55); }
.dados-cubilete i:nth-child(1) { top: 9px; }
.dados-cubilete i:nth-child(2) { top: 15px; }
.dados-cubilete i:nth-child(3) { top: 21px; }

.dados-zona { display: flex; gap: 18px; justify-content: center; min-height: 86px; align-items: center; }

.dado {
  width: 78px;
  height: 78px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(155deg, #fbf7ec, #ddd4bf 68%, #c4b99f);
  border: 1px solid rgba(0, 0, 0, .25);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .45), inset 0 -6px 12px rgba(0, 0, 0, .16), inset 0 4px 8px rgba(255, 255, 255, .6);
}
.dado i { border-radius: 50%; background: transparent; }
.dado i.on { background: radial-gradient(circle at 34% 30%, #4a4436, #14110b 72%); box-shadow: inset 0 1px 2px rgba(255, 255, 255, .35); }

/* Rodar: giro y salto compuestos en la GPU (transform), sin tocar el diseño de la página en ningún
   cuadro. La cara que se ve al terminar la escribe el JS con lo que mandó el servidor. */
@keyframes dado-rueda {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  25%  { transform: translate3d(-10px, -22px, 0) rotate(200deg); }
  50%  { transform: translate3d(8px, 4px, 0) rotate(430deg); }
  75%  { transform: translate3d(-6px, -14px, 0) rotate(680deg); }
  100% { transform: translate3d(0, 0, 0) rotate(900deg); }
}
.dado.rodando { animation: dado-rueda .9s cubic-bezier(.3, .8, .4, 1) both; }

.dados-suma-viva { letter-spacing: .08em; text-transform: uppercase; font-size: 13px; color: var(--texto-2); }

.dados-banner {
  width: min(100%, 460px);
  text-align: center;
  padding: 10px 14px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid transparent;
}
.dados-banner-t { font-weight: 700; }
.dados-banner.gana { background: rgba(75, 227, 143, .12); border-color: rgba(75, 227, 143, .45); color: var(--verde); }
.dados-banner.consuelo { background: rgba(53, 224, 214, .10); border-color: rgba(53, 224, 214, .40); color: var(--agua); }
/* La tirada que no paga NO se pinta de rojo: no es un error ni una derrota, es la siguiente tirada. */
.dados-banner.casa { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); color: var(--texto-2); }

.dados-tablero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(100%, 520px); }
.dados-opcion {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  border-radius: 14px;
  cursor: pointer;
  color: var(--texto);
  background: rgba(0, 0, 0, .22);
  border: 2px solid rgba(246, 242, 230, .16);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.dados-opcion:hover { transform: translateY(-2px); }
.dados-opcion.activa { border-color: var(--oro); background: rgba(212, 175, 55, .16); box-shadow: 0 0 0 3px rgba(212, 175, 55, .12); }
.dados-op-t { font-weight: 700; letter-spacing: .06em; }
.dados-op-s { font-size: 12px; color: var(--texto-2); }
.dados-op-p { font-size: 12px; color: var(--oro); }

.dados-sumas { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; width: min(100%, 560px); }
.dados-suma {
  min-width: 52px;
  padding: 6px 8px;
  border-radius: 11px;
  cursor: pointer;
  color: var(--texto);
  background: rgba(0, 0, 0, .22);
  border: 2px solid rgba(246, 242, 230, .14);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.dados-suma span { font-size: 11px; color: var(--oro); }
.dados-suma.activa { border-color: var(--oro); background: rgba(212, 175, 55, .16); }
.dados-nota { text-align: center; max-width: 52ch; }

@media (prefers-reduced-motion: reduce) { .dado.rodando { animation: none; } }
@media (max-width: 620px) {
  .dado { width: 62px; height: 62px; padding: 8px; gap: 3px; }
  .dados-tablero { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================ MESA DEL COHETE (T22)
   El cielo es un degradado que se aclara al despegar (nada que descargar) y el cohete sube por él
   con `bottom` en porcentaje, movido desde el JS con el MISMO reloj y la MISMA curva que usa el
   servidor para pagar. La marca del objetivo se dibuja a la altura exacta en la que se va a cobrar
   solo: el asesor ve a dónde va antes de lanzar. */
.coh-pano {
  position: relative;
  width: 100%;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-radius: 28px;
  border: 3px solid var(--oro-oscuro);
  background:
    radial-gradient(620px 280px at 50% -10%, rgba(53, 224, 214, .14), transparent 70%),
    linear-gradient(180deg, #0b2a3a, #071a26 64%, #050f16);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .55), 0 18px 34px rgba(0, 0, 0, .4);
}

.coh-cielo {
  position: relative;
  width: min(100%, 520px);
  height: 240px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(246, 242, 230, .12);
  background: linear-gradient(180deg, #04070f 0%, #0a1b2e 55%, #14364a 100%);
  transition: filter .4s ease;
}
.coh-cielo.activo { filter: brightness(1.12) saturate(1.1); }
.coh-estrella { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: rgba(246, 242, 230, .8); }
.coh-estrella.e1 { top: 16%; left: 22%; }
.coh-estrella.e2 { top: 34%; left: 71%; }
.coh-estrella.e3 { top: 58%; left: 38%; }
.coh-estrella.e4 { top: 74%; left: 82%; }

/* La marca del objetivo: la línea donde el retiro automático cobra solo. */
.coh-marca { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(212, 175, 55, .65); }
.coh-marca span {
  position: absolute;
  right: 8px;
  top: -9px;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 8px;
  color: var(--oro);
  background: rgba(0, 0, 0, .55);
}

.coh-nave { position: absolute; left: 50%; margin-left: -18px; font-size: 30px; line-height: 1; transform: translate3d(0, 50%, 0); }
.coh-fuego {
  position: absolute;
  left: 9px;
  top: 26px;
  width: 12px;
  height: 18px;
  border-radius: 50% 50% 60% 60%;
  background: linear-gradient(180deg, #ffe08a, rgba(224, 75, 75, .1));
  animation: coh-llama .18s ease-in-out infinite alternate;
}
@keyframes coh-llama { from { transform: scaleY(.7); opacity: .75; } to { transform: scaleY(1.25); opacity: 1; } }

.coh-cifra { position: absolute; left: 0; right: 0; top: 26px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.coh-cifra b { font-size: 42px; letter-spacing: .02em; color: var(--oro); text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.coh-cifra span { color: var(--texto-2); }

.coh-objetivos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: min(100%, 520px); }
.coh-obj {
  min-width: 78px;
  padding: 8px 10px;
  border-radius: 13px;
  cursor: pointer;
  color: var(--texto);
  background: rgba(0, 0, 0, .22);
  border: 2px solid rgba(246, 242, 230, .16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.coh-obj:hover { transform: translateY(-2px); }
.coh-obj span { font-size: 11px; color: var(--texto-2); }
.coh-obj.activa { border-color: var(--oro); background: rgba(212, 175, 55, .16); box-shadow: 0 0 0 3px rgba(212, 175, 55, .12); }
.coh-obj.activa span { color: var(--oro); }

.coh-banner {
  width: min(100%, 460px);
  text-align: center;
  padding: 10px 14px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid transparent;
}
.coh-banner-t { font-weight: 700; }
.coh-banner.gana { background: rgba(75, 227, 143, .12); border-color: rgba(75, 227, 143, .45); color: var(--verde); }
.coh-banner.consuelo { background: rgba(53, 224, 214, .10); border-color: rgba(53, 224, 214, .40); color: var(--agua); }
/* El vuelo que no paga NO se pinta de rojo: no es una derrota, es el siguiente lanzamiento. */
.coh-banner.casa { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); color: var(--texto-2); }
.coh-nota { text-align: center; max-width: 56ch; }

@media (prefers-reduced-motion: reduce) { .coh-fuego { animation: none; } }
@media (max-width: 620px) {
  .coh-cielo { height: 200px; }
  .coh-cifra b { font-size: 34px; }
}

/* ================================================================ MESA DE MINAS (T22)
   El tablero es una rejilla de botones: tapada es una losa de piedra, destapada es una gema. Las
   minas SOLO se pintan cuando la ronda terminó —mientras se juega, el navegador no las tiene— y la
   que estalló se marca aparte. La casilla recién destapada se voltea con una animación corta que
   solo lleva ella (`.nueva`): sin eso, cada repintado volvería a voltear las diez anteriores. */
.min-pano {
  position: relative;
  width: 100%;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-radius: 28px;
  border: 3px solid var(--oro-oscuro);
  background:
    radial-gradient(620px 280px at 50% -10%, rgba(212, 175, 55, .12), transparent 70%),
    linear-gradient(180deg, #17202b, #10171f 64%, #0a0f14);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .55), 0 18px 34px rgba(0, 0, 0, .4);
}

.min-marcador {
  width: min(100%, 460px);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.min-marcador b { font-size: 34px; color: var(--oro); line-height: 1; }
.min-marcador span { display: block; color: var(--texto-2); }
.min-sig { color: var(--agua); font-size: 13px; text-align: right; }

.min-tablero { display: grid; gap: 8px; width: min(100%, 420px); }
.min-casilla {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  border-radius: 14px;
  cursor: pointer;
  color: var(--texto);
  background: linear-gradient(180deg, rgba(246, 242, 230, .12), rgba(0, 0, 0, .28));
  border: 2px solid rgba(246, 242, 230, .16);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.min-casilla:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--oro); }
.min-casilla:disabled { cursor: default; }
.min-casilla.abierta { background: rgba(53, 224, 214, .14); border-color: rgba(53, 224, 214, .45); }
.min-casilla.mina { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); }
/* La que estalló se marca, pero NO en rojo de error: la ronda terminó, no se rompió nada. */
.min-casilla.pisada { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(212, 175, 55, .18); }
.min-casilla.nueva { animation: min-voltea .22s ease-out; }
@keyframes min-voltea { from { transform: rotateY(90deg) scale(.9); } to { transform: none; } }

.min-escalera { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; width: min(100%, 520px); }
.min-paso {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  padding: 4px 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(246, 242, 230, .12);
}
.min-paso b { font-size: 12px; color: var(--oro); }
.min-paso span { font-size: 10px; color: var(--texto-2); }
.min-paso.pasada { opacity: .45; }
.min-paso.activa { border-color: var(--oro); background: rgba(212, 175, 55, .16); }

.min-banner {
  width: min(100%, 460px);
  text-align: center;
  padding: 10px 14px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid transparent;
}
.min-banner-t { font-weight: 700; }
.min-banner.gana { background: rgba(75, 227, 143, .12); border-color: rgba(75, 227, 143, .45); color: var(--verde); }
/* El tablero que termina en mina NO se pinta de rojo: no es una derrota, es el siguiente tablero. */
.min-banner.casa { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); color: var(--texto-2); }
.min-nota { text-align: center; max-width: 56ch; }

@media (prefers-reduced-motion: reduce) { .min-casilla.nueva { animation: none; } }
@media (max-width: 620px) {
  .min-tablero { gap: 6px; }
  .min-casilla { font-size: 20px; border-radius: 11px; }
  .min-marcador b { font-size: 28px; }
}

/* ================================================================ MESA DE RULETA GTA (T22)
   La rueda se pinta con 40 sectores girados uno a uno (`--a` es el ángulo de cada casilla), no con
   una imagen: así una casilla más o menos en el panel cambia la rueda sola. La que gira es la rueda
   entera con un `transform` compuesto en la GPU; la flecha está fija arriba. El tapete es el de
   siempre —tres filas de doce, la de arriba con los múltiplos de tres— y la ficha apilada se dibuja
   encima de la casilla, no al lado: es donde el ojo la busca. */
.rul-pano {
  position: relative;
  width: 100%;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-radius: 28px;
  border: 3px solid var(--oro-oscuro);
  background:
    radial-gradient(620px 300px at 50% -10%, rgba(212, 175, 55, .14), transparent 70%),
    linear-gradient(180deg, #0f3a30, #0b2a24 62%, #071a16);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, .55), 0 18px 34px rgba(0, 0, 0, .4);
}

.rul-rueda-caja { position: relative; width: min(300px, 74vw); aspect-ratio: 1 / 1; }
.rul-rueda {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 6px solid var(--oro-oscuro);
  background: radial-gradient(circle at 50% 50%, #123, #050b0e 74%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .7), 0 10px 26px rgba(0, 0, 0, .5);
  overflow: hidden;
  will-change: transform;
}
/* Un sector por casilla: se gira al ángulo que le toca y el texto se endereza dentro. */
.rul-sector {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 50%;
  transform-origin: 50% 100%;
  transform: rotate(var(--a));
}
.rul-sector b {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  padding: 3px 4px;
  border-radius: 5px;
  color: #fff;
}
.rul-sector.rojo b { background: #a3232b; }
.rul-sector.negro b { background: #14181d; }
/* Las cuatro de la casa se ven distintas a propósito: la ventaja está a la vista en la rueda. */
.rul-sector.casa b { background: var(--oro-oscuro); color: #0b0f12; }
.rul-eje {
  position: absolute;
  left: 50%; top: 50%;
  width: 34%; height: 34%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(212, 175, 55, .55), rgba(0, 0, 0, .85) 70%);
  border: 2px solid var(--oro-oscuro);
}
.rul-flecha {
  position: absolute;
  left: 50%; top: -10px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 18px solid var(--oro);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6));
  z-index: 2;
}

.rul-cifra { text-align: center; font-size: 20px; font-weight: 700; color: var(--oro); }

.rul-tapete { display: flex; gap: 6px; width: min(100%, 620px); align-items: stretch; }
.rul-casa { display: flex; flex-direction: column; gap: 4px; }
.rul-rejilla { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rul-fila { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)) 46px; gap: 4px; }
.rul-docenas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rul-pares { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.rul-num, .rul-fuera {
  position: relative;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  border: 1px solid rgba(246, 242, 230, .18);
  padding: 6px 2px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  transition: transform .1s ease, border-color .1s ease;
}
.rul-num:hover, .rul-fuera:hover { transform: translateY(-2px); border-color: var(--oro); }
.rul-num.rojo { background: #a3232b; }
.rul-num.negro { background: #14181d; }
.rul-num.casa { background: linear-gradient(180deg, var(--oro-oscuro), #7a5f16); color: #0b0f12; min-height: 34px; }
.rul-fuera {
  background: rgba(0, 0, 0, .3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 11px;
}
.rul-fuera i { font-style: normal; font-size: 10px; color: var(--texto-2); }

/* La ficha puesta: encima de la casilla, redonda y con su cifra. */
.rul-ficha {
  position: absolute;
  right: -5px;
  top: -6px;
  min-width: 22px;
  padding: 1px 4px;
  border-radius: 11px;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  color: #0b0f12;
  background: var(--oro);
  border: 2px solid #fff8e1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}

.rul-puesto { margin-top: 8px; color: var(--texto-2); font-size: 13px; }
.rul-ayuda { margin-top: 6px; max-width: 68ch; }
.rul-nota { text-align: center; max-width: 66ch; }

.rul-banner {
  width: min(100%, 480px);
  text-align: center;
  padding: 10px 14px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid transparent;
}
.rul-banner-t { font-weight: 700; }
.rul-banner.gana { background: rgba(75, 227, 143, .12); border-color: rgba(75, 227, 143, .45); color: var(--verde); }
.rul-banner.consuelo { background: rgba(53, 224, 214, .10); border-color: rgba(53, 224, 214, .40); color: var(--agua); }
/* El giro que no paga NO se pinta de rojo: no es una derrota, es el siguiente giro. */
.rul-banner.casa { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); color: var(--texto-2); }

@media (prefers-reduced-motion: reduce) { .rul-rueda { transition: none !important; } }
@media (max-width: 620px) {
  .rul-fila { grid-template-columns: repeat(12, minmax(0, 1fr)) 34px; gap: 2px; }
  .rul-num, .rul-fuera { font-size: 10px; padding: 5px 0; border-radius: 6px; }
  .rul-fuera i { font-size: 9px; }
  .rul-ficha { min-width: 18px; font-size: 9px; right: -3px; top: -4px; }
  .rul-cifra { font-size: 17px; }
}

@media (max-width: 860px) {
  /* En el móvil la bandeja se ancla al ancho de la pantalla: la campanita queda pegada al
     borde derecho y un desplegable de 340 px se saldría. */
  .bandeja { right: -6px; width: min(340px, calc(100vw - 24px)); }
  .boveda-cifras { grid-template-columns: minmax(0, 1fr); }
  .inv-desenlaces { grid-template-columns: minmax(0, 1fr); }
  .boveda-cifra .cifra { font-size: 30px; }
  .boveda-plazos { grid-template-columns: minmax(0, 1fr); }
  .boveda-plazo { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 8px; }
  .boveda-gancho { flex-basis: 100%; }
  .boveda-dep-cobro { text-align: left; }
  .pfin-datos { grid-template-columns: minmax(0, 1fr); }
  .pfin-fila { grid-template-columns: minmax(0, 1fr); }
  .pfin-cuota { grid-template-columns: 38px 1fr auto; row-gap: 6px; }
  .pfin-cuota .estado, .pfin-cuota .enlace-comprobante { grid-column: 2 / -1; justify-self: start; }
}

/* ================================================================ MESA DE PLINKO (T22)
   El triángulo de clavijas se pinta con puntos posicionados en porcentaje (`left`/`top`), no con
   una imagen ni con una rejilla: así un tablero de 8 o de 16 filas editado desde el panel se dibuja
   solo, sin tocar una línea de CSS. La ficha se mueve con `left`/`top` en porcentaje y `transition`,
   que es lo que hace que la caída se vea continua aunque el salto entre filas sea un solo cambio de
   estilo. El tono de cada canaleta lo decide su PAGO y no su posición: lo que hay que leer de un
   vistazo es cuánto paga cada boca. */
.pk-pano {
  position: relative;
  width: 100%;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-radius: 28px;
  border: 3px solid var(--oro-oscuro);
  background:
    radial-gradient(620px 280px at 50% -10%, rgba(212, 175, 55, .12), transparent 70%),
    linear-gradient(180deg, #17202b, #10171f 64%, #0a0f14);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .55), 0 18px 34px rgba(0, 0, 0, .4);
}

.pk-tablero {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 13 / 11;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .30), rgba(0, 0, 0, .12));
  border: 1px solid rgba(246, 242, 230, .10);
  border-bottom: 0;
  overflow: hidden;
}
.pk-clavija {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(246, 242, 230, .55);
  box-shadow: 0 0 4px rgba(246, 242, 230, .25);
}
.pk-ficha {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f7e39a, var(--oro) 55%, var(--oro-oscuro));
  box-shadow: 0 0 10px rgba(212, 175, 55, .55);
  /* El salto entre dos filas dura lo mismo que el paso de la animación (95 ms): la ficha llega a la
     clavija justo cuando suena el tic, no antes ni después. */
  transition: left .095s linear, top .095s ease-in;
}

.pk-canaletas { display: flex; gap: 2px; width: min(100%, 460px); }
.pk-canaleta {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  padding: 7px 0;
  border-radius: 0 0 8px 8px;
  color: #0b0f12;
  border: 1px solid rgba(0, 0, 0, .25);
  transition: transform .12s ease, box-shadow .12s ease;
}
/* Tres tonos por lo que paga: oro cuando multiplica de verdad, agua cuando devuelve más de la
   ficha, y piedra cuando devuelve una parte. NINGUNO es rojo: no hay canaleta perdedora. */
.pk-canaleta.alta { background: linear-gradient(180deg, #f2d16b, var(--oro-oscuro)); }
.pk-canaleta.media { background: linear-gradient(180deg, #6fe6df, #2a9d97); color: #05201f; }
.pk-canaleta.baja { background: linear-gradient(180deg, rgba(246, 242, 230, .34), rgba(246, 242, 230, .18)); color: var(--texto); }
.pk-canaleta.activa { transform: translateY(3px); box-shadow: 0 0 0 2px var(--oro), 0 6px 14px rgba(0, 0, 0, .45); }

.pk-tabla { width: min(100%, 460px); }
.pk-tabla summary { cursor: pointer; color: var(--texto-2); font-size: 13px; }
.pk-tabla-filas { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.pk-tabla-fila {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(246, 242, 230, .10);
}
.pk-tabla-fila b { color: var(--oro); }
.pk-tabla-fila span { color: var(--texto-2); font-size: 12px; }
.pk-tabla-fila i { font-style: normal; color: var(--texto-2); font-size: 12px; }

.pk-banner {
  width: min(100%, 460px);
  text-align: center;
  padding: 10px 14px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid transparent;
}
.pk-banner-t { font-weight: 700; }
.pk-banner.gana { background: rgba(75, 227, 143, .12); border-color: rgba(75, 227, 143, .45); color: var(--verde); }
/* La ficha que cae al centro devuelve el 40 %: es un consuelo, no una derrota, y no se pinta de rojo. */
.pk-banner.consuelo { background: rgba(53, 224, 214, .10); border-color: rgba(53, 224, 214, .40); color: var(--agua); }

@media (prefers-reduced-motion: reduce) { .pk-ficha { transition: none; } }
@media (max-width: 620px) {
  .pk-canaleta { font-size: 8px; padding: 5px 0; }
  .pk-clavija { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
  .pk-ficha { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
  .pk-tabla-fila { grid-template-columns: 52px 1fr auto; }
}

/* --- Carrera de cuyes (T22 · RF-6) --------------------------------------- */

.cy-pano {
  position: relative;
  width: 100%;
  padding: 16px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-radius: 28px;
  border: 3px solid var(--oro-oscuro);
  background:
    radial-gradient(620px 280px at 50% -10%, rgba(212, 175, 55, .12), transparent 70%),
    linear-gradient(180deg, #1b2418, #131a12 64%, #0b100a);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .55), 0 18px 34px rgba(0, 0, 0, .4);
}

.cy-pista-caja {
  position: relative;
  width: min(100%, 520px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Cada carril es un botón: tocarlo elige a ese cuy. No cuesta BEKY —la apuesta se cobra al
   largar— así que no lleva confirmación en dos toques. */
.cy-carril {
  display: grid;
  grid-template-columns: 122px 1fr;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 14px 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(246, 242, 230, .10);
  background: rgba(0, 0, 0, .26);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.cy-carril:hover { background: rgba(0, 0, 0, .34); }
.cy-carril.elegido { border-color: var(--oro); background: rgba(212, 175, 55, .12); }

.cy-datos { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.cy-nombre { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cy-cuota { color: var(--oro); font-weight: 700; font-size: 13px; }
.cy-veces { font-size: 10px; }

.cy-pista {
  position: relative;
  height: 30px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(246, 242, 230, .05) 0 22px, transparent 22px 44px),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .18));
  border: 1px solid rgba(246, 242, 230, .07);
  overflow: hidden;
}
/* La meta: la banda a cuadros del final del carril, para que se vea a dónde corren. */
.cy-pista::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 6px;
  background: repeating-linear-gradient(180deg, var(--oro) 0 5px, #0b100a 5px 10px);
  opacity: .8;
}
.cy-corredor {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 4px;
  /* La duración la pone la pantalla en cada carrera (un puesto tarda más que el anterior); aquí solo
     queda la curva, que arranca y frena como un bicho y no como un ascensor. */
  transition: left 0s cubic-bezier(.34, .12, .28, 1);
}
.cy-bicho {
  font-size: 20px;
  line-height: 1;
  filter: drop-shadow(0 0 6px var(--cy-color, var(--oro)));
}
.cy-puesto {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--cy-color, var(--oro));
  color: #0b0f12;
  opacity: 0;
  transition: opacity .18s ease;
}
.cy-corredor.llego .cy-puesto { opacity: 1; }
.cy-puesto.oro { box-shadow: 0 0 0 2px var(--oro), 0 4px 10px rgba(0, 0, 0, .45); }

.cy-tabla { width: min(100%, 520px); }
.cy-tabla summary { cursor: pointer; color: var(--texto-2); font-size: 13px; }
.cy-tabla-filas { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.cy-tabla-fila {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(246, 242, 230, .10);
}
.cy-tabla-fila b { color: var(--oro); }
.cy-tabla-fila span, .cy-tabla-fila i { color: var(--texto-2); font-size: 12px; font-style: normal; }

.cy-banner {
  width: min(100%, 520px);
  text-align: center;
  padding: 10px 14px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid transparent;
}
.cy-banner-t { font-weight: 700; }
.cy-banner.gana { background: rgba(75, 227, 143, .12); border-color: rgba(75, 227, 143, .45); color: var(--verde); }
/* El segundo puesto devuelve el 30 %: es un consuelo, no una derrota, y no se pinta de rojo. */
.cy-banner.consuelo { background: rgba(53, 224, 214, .10); border-color: rgba(53, 224, 214, .40); color: var(--agua); }
/* Y la carrera que se lleva la casa TAMPOCO es roja: la apuesta se fue al bote del equipo. */
.cy-banner.casa { background: rgba(246, 242, 230, .06); border-color: rgba(246, 242, 230, .18); color: var(--texto-2); }

@media (prefers-reduced-motion: reduce) { .cy-corredor { transition: none; } }
@media (max-width: 620px) {
  .cy-carril { grid-template-columns: 96px 1fr; padding: 5px 10px 5px 6px; }
  .cy-nombre, .cy-cuota { font-size: 12px; }
  .cy-pista { height: 26px; }
  .cy-bicho { font-size: 17px; }
  .cy-tabla-fila { grid-template-columns: 80px 1fr auto; }
}

/* ============================================================ TRIVIA GTA (T22 · RF-7)
   El paño es el mismo de las otras mesas del registro; lo propio de esta es la pregunta grande, las
   cuatro opciones tocables con el pulgar y la revisión del final, que es donde el juego enseña. La
   opción marcada se resalta ANTES de que conteste el servidor: entre el toque y la respuesta hay
   una petición de red, y sin esa marca el asesor no sabe si su dedo entró. */
.tri-pano {
  position: relative;
  width: 100%;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-radius: 28px;
  border: 3px solid var(--oro-oscuro);
  background:
    radial-gradient(620px 280px at 50% -10%, rgba(53, 224, 214, .10), transparent 70%),
    linear-gradient(180deg, #17202b, #10171f 64%, #0a0f14);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .55), 0 18px 34px rgba(0, 0, 0, .4);
}

.tri-marcador {
  width: min(100%, 520px);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.tri-marcador b { font-size: 26px; color: var(--oro); line-height: 1; }
.tri-marcador span { display: block; color: var(--texto-2); }
.tri-sig { color: var(--agua); font-size: 13px; text-align: right; }

.tri-escalera { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; width: min(100%, 520px); }
.tri-paso {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
  padding: 4px 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(246, 242, 230, .12);
}
.tri-paso b { font-size: 12px; color: var(--oro); }
.tri-paso span { font-size: 10px; color: var(--texto-2); }
.tri-paso.pasada { opacity: .45; }
.tri-paso.activa { border-color: var(--oro); background: rgba(212, 175, 55, .16); }

.tri-pregunta {
  width: min(100%, 560px);
  text-align: center;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  padding: 4px 2px;
}
.tri-opciones { width: min(100%, 560px); display: grid; gap: 8px; }
.tri-opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 11px 12px;
  border-radius: 14px;
  cursor: pointer;
  color: var(--texto);
  font-size: 14px;
  line-height: 1.3;
  background: linear-gradient(180deg, rgba(246, 242, 230, .10), rgba(0, 0, 0, .28));
  border: 1px solid rgba(246, 242, 230, .16);
  transition: border-color .15s ease, background .15s ease;
}
.tri-opcion:hover:not(:disabled) { border-color: var(--agua); }
.tri-opcion.marcada { border-color: var(--oro); background: rgba(212, 175, 55, .18); }
.tri-letra {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #0b0f12;
  background: var(--oro);
}

/* El cartel de que la siguiente pregunta va tapada. No es decoración: explica POR QUÉ se decide a
   ciegas, que es lo que hace que la cuota publicada valga. */
.tri-ciega {
  width: min(100%, 520px);
  text-align: center;
  font-size: 13px;
  color: var(--texto-2);
  padding: 12px;
  border-radius: 14px;
  border: 1px dashed rgba(246, 242, 230, .22);
  background: rgba(0, 0, 0, .22);
}

.tri-revision { width: min(100%, 560px); display: flex; flex-direction: column; gap: 6px; }
.tri-rev {
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .22);
  border-left: 3px solid rgba(246, 242, 230, .18);
}
.tri-rev.bien { border-left-color: var(--verde); }
.tri-rev.mal { border-left-color: var(--agua); }
.tri-rev-p { font-size: 13px; font-weight: 600; }
.tri-rev-r { font-size: 13px; color: var(--texto-2); margin-top: 2px; }
.tri-rev-r b { color: var(--verde); }

.tri-nota { width: min(100%, 560px); text-align: center; }

.tri-banner {
  width: min(100%, 560px);
  text-align: center;
  padding: 10px 14px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid transparent;
}
.tri-banner-t { font-weight: 700; }
.tri-banner.gana { background: rgba(75, 227, 143, .12); border-color: rgba(75, 227, 143, .45); color: var(--verde); }
/* Fallar NO se pinta de rojo: siempre vuelve el consuelo y siempre se aprende la respuesta. */
.tri-banner.parcial { background: rgba(53, 224, 214, .10); border-color: rgba(53, 224, 214, .40); color: var(--agua); }

@media (max-width: 620px) {
  .tri-pregunta { font-size: 16px; }
  .tri-opcion { font-size: 13px; padding: 10px; }
  .tri-marcador b { font-size: 22px; }
}

/* ============================================================ VIDEO PÓKER (T22 · RF-8)
   El paño es el mismo de las otras mesas del registro y los naipes son los mismos del blackjack
   (`cartaHTML`, compartido por `apiMesa`): una carta se lee igual en las trece salas.
   Lo propio de esta mesa es el hueco: la carta va dentro de un botón con su etiqueta debajo, para
   que "me quedo" y "cambio" se vean de un vistazo sin tener que acordarse de qué significa el
   resaltado. La tabla de pagos está SIEMPRE presente —en la rampa y con la mano puesta— porque es
   lo que convierte el cambio en una decisión y no en una corazonada. */
.pk-pano {
  position: relative;
  width: 100%;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-radius: 28px;
  border: 3px solid var(--oro-oscuro);
  background:
    radial-gradient(620px 280px at 50% -10%, rgba(53, 224, 214, .10), transparent 70%),
    linear-gradient(180deg, #17202b, #10171f 64%, #0a0f14);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .55), 0 18px 34px rgba(0, 0, 0, .4);
}

.pk-marcador {
  width: min(100%, 520px);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.pk-marcador b { font-size: 26px; color: var(--oro); line-height: 1; }
.pk-marcador span { display: block; color: var(--texto-2); }
.pk-sig { color: var(--agua); font-size: 13px; text-align: right; }

.pk-mano { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pk-hueco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px 5px 5px;
  border-radius: 14px;
  cursor: pointer;
  background: transparent;
  border: 2px solid transparent;
  color: var(--texto-2);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.pk-hueco:hover { border-color: rgba(53, 224, 214, .5); }
/* La carta que se conserva sube un poco: en un video póker de salón la ficha "HELD" se enciende
   sobre la carta, y ese gesto es el que se reconoce sin leer nada. */
.pk-hueco.quedo { border-color: var(--oro); background: rgba(212, 175, 55, .16); transform: translateY(-5px); }
.pk-hueco.cambiada .carta { opacity: .55; }
.pk-marca { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.pk-hueco.quedo .pk-marca { color: var(--oro); font-weight: 700; }
.pk-mano.cerrada .pk-hueco { cursor: default; border-color: transparent; transform: none; }
.pk-mano.cerrada .pk-hueco.quedo { border-color: rgba(212, 175, 55, .5); }
@media (prefers-reduced-motion: reduce) { .pk-hueco.quedo { transform: none; } }

.pk-consejo {
  width: min(100%, 560px);
  text-align: center;
  font-size: 13px;
  color: var(--texto-2);
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(212, 175, 55, .45);
  background: rgba(212, 175, 55, .08);
}
.pk-consejo b { color: var(--oro); }

.pk-tabla { width: min(100%, 520px); border-collapse: collapse; font-size: 13px; }
.pk-tabla td { padding: 3px 6px; border-bottom: 1px solid rgba(246, 242, 230, .08); }
.pk-tabla .pk-x { color: var(--oro); text-align: right; white-space: nowrap; }
.pk-tabla .pk-b { color: var(--agua); text-align: right; white-space: nowrap; }
.pk-tabla .pk-f { text-align: right; white-space: nowrap; }
.pk-tabla tr.servida td { background: rgba(75, 227, 143, .14); }
.pk-tabla tr.servida .pk-n { color: var(--verde); font-weight: 700; }

.pk-nota { width: min(100%, 560px); text-align: center; }

.pk-banner {
  width: min(100%, 560px);
  text-align: center;
  padding: 10px 14px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid transparent;
}
.pk-banner-t { font-weight: 700; }
.pk-banner.gana { background: rgba(75, 227, 143, .12); border-color: rgba(75, 227, 143, .45); color: var(--verde); }
.pk-banner.parcial { background: rgba(53, 224, 214, .10); border-color: rgba(53, 224, 214, .40); color: var(--agua); }
/* La mano que no llegó tampoco se pinta de rojo: la siguiente sale de la misma baraja. */
.pk-banner.seca { background: rgba(246, 242, 230, .06); border-color: rgba(246, 242, 230, .18); color: var(--texto-2); }

@media (max-width: 620px) {
  .pk-marcador b { font-size: 22px; }
  .pk-tabla { font-size: 12px; }
  .pk-tabla .pk-f { display: none; }
  .pk-hueco { padding: 4px 3px 3px; }
}

/* --- Bingo del día (T22 · RF-9) ------------------------------------------ */

.bg-pano {
  position: relative;
  width: 100%;
  padding: 16px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-radius: 28px;
  border: 3px solid var(--oro-oscuro);
  background:
    radial-gradient(620px 280px at 50% -10%, rgba(212, 175, 55, .12), transparent 70%),
    linear-gradient(180deg, #171d2a, #121722 64%, #0a0d14);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .55), 0 18px 34px rgba(0, 0, 0, .4);
}

/* El pozo primero y en grande: en esta mesa el premio no sale de una tabla de pagos, sale de los
   cartones que compró el equipo, y es lo único que hay que mirar antes de jugar. */
.bg-pozo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
  width: 100%;
}
.bg-pozo-dato {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(246, 242, 230, .05);
  border: 1px solid rgba(246, 242, 230, .12);
}
.bg-pozo-dato b { font-size: 18px; }

.bg-bolero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.bg-bola-grande {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: radial-gradient(circle at 34% 28%, #fffdf5, #e8dfc4 58%, #b9ae8c);
  color: #14110a;
  border: 3px solid var(--oro-oscuro);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .45);
}
.bg-bola-grande.vacia { background: rgba(246, 242, 230, .08); color: var(--texto-2); border-color: rgba(246, 242, 230, .18); }
.bg-bola-grande .bg-letra { font-size: 13px; letter-spacing: .18em; font-weight: 700; }
.bg-bola-grande .bg-num { font-size: 34px; font-weight: 800; line-height: 1; }
.bg-bola-grande.sale { animation: bgSale .34s ease-out; }
@keyframes bgSale { from { transform: scale(.4) rotate(-14deg); opacity: 0; } to { transform: none; opacity: 1; } }

.bg-cantadas { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.bg-bolita {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(246, 242, 230, .08);
  border: 1px solid rgba(246, 242, 230, .16);
  color: var(--texto-2);
}

.bg-cartones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; width: 100%; }
.bg-carton {
  padding: 8px;
  border-radius: 18px;
  background: rgba(10, 13, 20, .55);
  border: 2px solid var(--oro-oscuro);
}
.bg-carton-cab { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-bottom: 6px; }
.bg-sello { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--agua); }
.bg-sello.oro { color: var(--oro); }
.bg-premio { font-size: 12px; font-weight: 700; color: var(--verde); }
.bg-tabla { border-collapse: separate; border-spacing: 3px; }
.bg-tabla th { font-size: 12px; letter-spacing: .16em; color: var(--oro); }
.bg-tabla td {
  width: 34px;
  height: 34px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  border-radius: 9px;
  background: rgba(246, 242, 230, .06);
  border: 1px solid rgba(246, 242, 230, .12);
  transition: background .18s ease, color .18s ease;
}
/* La casilla marcada se ve de un vistazo desde el otro lado de la sala: es lo único que se mira
   mientras cantan las bolas. */
.bg-tabla td.bg-puesta { background: rgba(212, 175, 55, .32); border-color: var(--oro); color: #14110a; }
.bg-tabla td.bg-libre { background: rgba(53, 224, 214, .16); border-color: rgba(53, 224, 214, .4); color: var(--agua); }

@media (max-width: 620px) {
  .bg-tabla td { width: 30px; height: 30px; font-size: 13px; }
  .bg-bola-grande { width: 76px; height: 76px; }
  .bg-bola-grande .bg-num { font-size: 28px; }
}

/* =================================================== TRANSFERENCIAS (T10 c)
   La lista de destinos y el comprobante. Todo lo demás de esta tarjeta reutiliza las clases de la
   bóveda y de la inversión a propósito: las tres cuentas del banco se leen igual porque son la
   misma pantalla, no tres pantallas parecidas. */
.tr-destinos { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tr-destino {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--linea-suave);
  background: rgba(255, 255, 255, .04);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.tr-destino:hover { border-color: var(--oro); background: rgba(212, 175, 55, .1); }
.tr-elegido-fila {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(75, 227, 143, .35);
  background: rgba(75, 227, 143, .08);
}
.tr-comprobante { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; text-align: left; }
.tr-comp-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tr-comp-fila span { color: var(--tenue, rgba(246, 242, 230, .6)); font-size: 13px; }
.tr-comp-fila.total { border-top: 1px solid var(--linea-suave); padding-top: 8px; margin-top: 4px; }

/* ====================================================== MI PERFIL (T15 b)
   La ficha del asesor. Dos criterios de forma:
     · el formulario va en rejilla ancha y no en una columna de 400 px, porque son 24 campos y una
       columna larga se siente como un trámite;
     · lo obligatorio se marca con un punto dorado junto a la etiqueta y lo opcional lo dice con
       todas sus letras: el porcentaje solo mide lo requerido y la pantalla no puede sugerir otra
       cosa (T15: el grupo sanguíneo se pide, no se exige). */
.perfil-aviso {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-color: rgba(245, 196, 81, .45);
  font: inherit;
  color: inherit;
}
.perfil-aviso:hover { border-color: var(--oro); }
.perfil-cab { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.perfil-cara { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.perfil-cara img {
  width: 108px; height: 108px; object-fit: cover;
  border-radius: 50%; border: 2px solid rgba(245, 196, 81, .5);
}
.perfil-cara-vacia {
  width: 108px; height: 108px; display: grid; place-items: center;
  font-size: 46px; border-radius: 50%;
  border: 2px dashed var(--linea-suave); background: rgba(255, 255, 255, .04);
}
.pf-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.pf-rejilla textarea, .pf-rejilla input, .pf-rejilla select { width: 100%; }
.pf-obl { color: var(--oro); font-size: 14px; line-height: 1; }
.pf-bloque { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea-suave); }
.pf-galeria { display: flex; gap: 12px; flex-wrap: wrap; margin: 10px 0; }
.pf-galeria figure { margin: 0; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.pf-galeria img {
  width: 96px; height: 96px; object-fit: cover;
  border-radius: var(--r-sm); border: 1px solid var(--linea-suave);
}
.pf-mas { align-self: center; min-height: 96px; }
.pf-aviso {
  margin-bottom: 14px; padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(245, 196, 81, .4);
  background: rgba(245, 196, 81, .07);
}
.pf-consent { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 13px; font-weight: 700; cursor: pointer; }

/* Mis unidades de participación (T25 b) ------------------------------------ */
/* El calendario de vesting se lee de un vistazo: lo adquirido en oro y lo que falta apagado. Los
   números y las fechas los manda el servidor; aquí solo se pintan. */
.uni-tramos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 12px 0; }
.uni-tramo { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.uni-tramo.hecho { border-color: rgba(245, 196, 81, .45); background: rgba(245, 196, 81, .08); }
.uni-tramo-n { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: rgba(255, 255, 255, .08); font-size: 12px; font-weight: 800; }
.uni-tramo.hecho .uni-tramo-n { background: rgba(245, 196, 81, .22); color: var(--oro); }
.uni-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 11px; border-radius: 12px; background: rgba(255, 255, 255, .04); font-size: 13px; }

/* ==========================================================================
   T57 — pasada visual: objetivos táctiles en el teléfono.

   Medido con `scripts/verificar_club.mjs` a 360 y 390 px: la campana medía 38 px, el menú "⋯"
   40 px, las pestañas de sección 40 px, los chips de la tienda 31 px y los botones `.chico`
   33 px. Todos por debajo de los 44 px que necesita un pulgar. En una app que se usa de pie,
   entre llamadas, un botón que se falla dos veces se lee como "la app no responde", y el asesor
   deja de tocarlo: los chips de categoría de la tienda y los atajos de los retos son justo los
   que más se pulsan.

   Va por media query y no cambiando el `padding` base a propósito: en el escritorio la densidad
   actual es la correcta (José mira el ranking entero de un vistazo) y subir todo a 44 px ahí
   solo separaría lo que ya se lee bien.
   ========================================================================== */
@media (max-width: 900px) {
  .boton,
  .nav button,
  .salas-tabs button,
  .cat-chip,
  .campo input, .campo select, .campo textarea,
  .tienda-buscador input,
  select, textarea,
  input[type=text], input[type=number], input[type=search], input[type=password],
  input[type=date], input[type=time], input[type=tel], input[type=email], input[type=file] {
    min-height: 44px;
  }
  /* `.chico` sigue siendo tipografía pequeña —es un botón secundario y tiene que verse como tal—,
     pero deja de ser un objetivo pequeño. */
  .boton.chico { padding-top: 10px; padding-bottom: 10px; }
  .cat-chip { padding-top: 10px; padding-bottom: 10px; }
  .boton-menu, .boton-campana { width: 44px; height: 44px; }

  /* Las casillas y fichas de las mesas quedan fuera: un tablero de minas con celdas de 44 px no
     entra en un teléfono, y ahí el objetivo no es el dedo suelto sino la cuadrícula completa. */
  .mesa .boton, .mesa button, .mesa input, .mesa select { min-height: 0; }

  /* Una casilla de 13 px no se marca con el pulgar; la etiqueta que la acompaña tampoco alcanza
     si el propio control es invisible. 22 px es el mínimo con el que se acierta a la primera. */
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; flex: none; }
}


/* ==========================================================================
   T71 · MI ÁREA, EL PIN DE LA PRIMERA VEZ, LA SOLICITUD A CUOTAS Y LAS UNIDADES
   ========================================================================== */

/* ---------- Mi área (U1) ------------------------------------------------- */
.area-cab { margin-bottom: 18px; }
.area-bloque { margin-bottom: 18px; }
.area-aviso {
  margin-top: 12px; padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(53, 224, 214, .1);
  border: 1px solid rgba(53, 224, 214, .3);
  font-size: 12px; line-height: 1.5;
}
.area-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.area-cifra { padding: 12px 14px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .04); }
.area-cifra .num { font-family: var(--fuente-titulos); font-size: 26px; line-height: 1.1; margin-top: 2px; }
.area-lista { margin-top: 18px; }
.area-lista .k { margin-bottom: 8px; }
.area-fila {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  margin-bottom: 6px; font-size: 13px;
}
.area-nombre { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.area-hoy { font-variant-numeric: tabular-nums; }
.area-total { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.area-total.ojo { color: var(--oro); }
.area-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.area-form input { flex: 1; min-width: 120px; }
.area-motivo { flex: 1; min-width: 120px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; padding: 6px 8px; color: inherit; font-size: 12px; }
.area-meta { padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); margin-bottom: 8px; }
.area-meta-cab { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.area-barra { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); margin: 8px 0 6px; overflow: hidden; }
.area-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--agua), var(--oro)); }
.area-check {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  margin-bottom: 6px; font-size: 13px; cursor: pointer;
}
.area-check span:first-of-type { flex: 1; }
.area-check.hecha { opacity: .6; text-decoration: line-through; }
.area-check input { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- El PIN de la primera vez (U5) -------------------------------- */
.pin-intro { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.pin-punto { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .04); }
.pin-punto b { display: block; margin-bottom: 2px; }
.pin-ico { font-size: 20px; line-height: 1.2; }

/* ---------- Las dos firmas de una solicitud a cuotas (U6) ---------------- */
.fin-pasos, .pfin-pasos { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.fin-paso { display: flex; gap: 10px; align-items: flex-start; flex: 1 1 200px; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .04); }
.pfin-paso {
  flex: 1 1 130px; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .04);
  border: 1px solid transparent;
  opacity: .55;
}
.pfin-paso.hecho { opacity: 1; border-color: rgba(53, 224, 214, .35); }
.pfin-paso.actual { opacity: 1; border-color: rgba(245, 196, 81, .55); background: rgba(245, 196, 81, .1); }
.pfin-paso-tit { font-weight: 800; font-size: 13px; }
.pfin-bolita {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px; flex: none;
  background: rgba(255, 255, 255, .12); font-weight: 800; font-size: 12px;
}
.pfin-paso.hecho .pfin-bolita { background: var(--agua); color: #06222a; }
.pfin-paso.actual .pfin-bolita { background: var(--oro); color: var(--oro-tinta); }

/* ---------- Unidades de participación (U7) ------------------------------- */
.uni-parrafo { margin: 10px 0 0; line-height: 1.6; }
.uni-destaca {
  margin-top: 14px; padding: 12px 14px;
  border-radius: var(--r-sm);
  background: rgba(245, 196, 81, .1);
  border: 1px solid rgba(245, 196, 81, .3);
  font-weight: 700;
}
.uni-lista { margin: 10px 0 0; padding-left: 18px; }
.uni-lista li { margin-bottom: 6px; line-height: 1.5; font-size: 13px; }
.uni-firmado { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linea-suave); line-height: 1.5; }