/* ============================================================ 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: var(--r);
  border: 3px solid var(--oro-oscuro);
  background:
    radial-gradient(620px 280px at 50% -10%, color-mix(in srgb, var(--verde-f) 10%, transparent), transparent 70%),
    linear-gradient(180deg, var(--tapete-fieltro-1), var(--tapete-fieltro-2) 64%, var(--tapete-fondo));
  box-shadow: inset 0 0 60px color-mix(in srgb, var(--texto) 27.5%, transparent), 0 18px 34px color-mix(in srgb, var(--texto) 20%, transparent);
}

.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: color-mix(in srgb, var(--tapete-fondo) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
}
.tri-paso b { font-size: 12px; color: var(--oro); }
.tri-paso span { font-size: 12px; color: var(--texto-2); }
.tri-paso.pasada { opacity: .45; }
.tri-paso.activa { border-color: var(--oro); background: color-mix(in srgb, var(--oro-oscuro) 16%, transparent); }

.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: var(--r);
  cursor: pointer;
  color: var(--texto);
  font-size: 14px;
  line-height: 1.3;
  background: linear-gradient(180deg, color-mix(in srgb, var(--texto) 10%, transparent), color-mix(in srgb, var(--tapete-fondo) 28%, transparent));
  border: 1px solid color-mix(in srgb, var(--texto) 16%, transparent);
  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: color-mix(in srgb, var(--oro-oscuro) 18%, transparent); }
.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: var(--tapete-tinta);
  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: var(--r);
  border: 1px dashed color-mix(in srgb, var(--texto) 22%, transparent);
  background: color-mix(in srgb, var(--tapete-fondo) 22%, transparent);
}

.tri-revision { width: min(100%, 560px); display: flex; flex-direction: column; gap: 6px; }
.tri-rev {
  padding: 8px 10px;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--tapete-fondo) 22%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--texto) 18%, transparent);
}
.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: var(--r);
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid transparent;
}
.tri-banner-t { font-weight: 700; }
.tri-banner.gana { background: color-mix(in srgb, var(--verde-f) 12%, transparent); border-color: color-mix(in srgb, var(--verde-f) 45%, transparent); color: var(--verde); }
/* Fallar NO se pinta de rojo: siempre vuelve el consuelo y siempre se aprende la respuesta. */
.tri-banner.parcial { background: color-mix(in srgb, var(--verde-f) 10%, transparent); border-color: color-mix(in srgb, var(--verde-f) 40%, transparent); 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: var(--r);
  border: 3px solid var(--oro-oscuro);
  background:
    radial-gradient(620px 280px at 50% -10%, color-mix(in srgb, var(--verde-f) 10%, transparent), transparent 70%),
    linear-gradient(180deg, var(--tapete-fieltro-1), var(--tapete-fieltro-2) 64%, var(--tapete-fondo));
  box-shadow: inset 0 0 60px color-mix(in srgb, var(--texto) 27.5%, transparent), 0 18px 34px color-mix(in srgb, var(--texto) 20%, transparent);
}

.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: var(--r);
  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: color-mix(in srgb, var(--verde-f) 50%, transparent); }
/* 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: color-mix(in srgb, var(--oro-oscuro) 16%, transparent); transform: translateY(-5px); }
.pk-hueco.cambiada .carta { opacity: .55; }
.pk-marca { font-size: 12px; 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: color-mix(in srgb, var(--oro-oscuro) 50%, transparent); }
@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: var(--r);
  border: 1px dashed color-mix(in srgb, var(--oro-oscuro) 45%, transparent);
  background: color-mix(in srgb, var(--oro-oscuro) 8%, transparent);
}
.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 color-mix(in srgb, var(--texto) 8%, transparent); }
.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: color-mix(in srgb, var(--verde-f) 14%, transparent); }
.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: var(--r);
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid transparent;
}
.pk-banner-t { font-weight: 700; }
.pk-banner.gana { background: color-mix(in srgb, var(--verde-f) 12%, transparent); border-color: color-mix(in srgb, var(--verde-f) 45%, transparent); color: var(--verde); }
.pk-banner.parcial { background: color-mix(in srgb, var(--verde-f) 10%, transparent); border-color: color-mix(in srgb, var(--verde-f) 40%, transparent); color: var(--agua); }
/* La mano que no llegó tampoco se pinta de rojo: la siguiente sale de la misma baraja. */
.pk-banner.seca { background: color-mix(in srgb, var(--texto) 6%, transparent); border-color: color-mix(in srgb, var(--texto) 18%, transparent); 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: var(--r);
  border: 3px solid var(--oro-oscuro);
  background:
    radial-gradient(620px 280px at 50% -10%, color-mix(in srgb, var(--oro-oscuro) 12%, transparent), transparent 70%),
    linear-gradient(180deg, var(--tapete-fieltro-1), var(--tapete-fieltro-2) 64%, var(--tapete-fondo));
  box-shadow: inset 0 0 60px color-mix(in srgb, var(--texto) 27.5%, transparent), 0 18px 34px color-mix(in srgb, var(--texto) 20%, transparent);
}

/* 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: var(--r);
  background: color-mix(in srgb, var(--texto) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
}
.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%, var(--cg-superficie-alta), var(--cg-papel-3) 58%, var(--cg-bronce));
  color: var(--cg-texto);
  border: 3px solid var(--oro-oscuro);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--texto) 22.5%, transparent);
}
.bg-bola-grande.vacia { background: color-mix(in srgb, var(--texto) 8%, transparent); color: var(--texto-2); border-color: color-mix(in srgb, var(--texto) 18%, transparent); }
.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: 12px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--texto) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--texto) 16%, transparent);
  color: var(--texto-2);
}

.bg-cartones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; width: 100%; }
.bg-carton {
  padding: 8px;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--tapete-fondo) 55%, transparent);
  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: 12px; 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: color-mix(in srgb, var(--texto) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
  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: color-mix(in srgb, var(--oro-oscuro) 32%, transparent); border-color: var(--oro); color: var(--cg-texto); }
.bg-tabla td.bg-libre { background: color-mix(in srgb, var(--verde-f) 16%, transparent); border-color: color-mix(in srgb, var(--verde-f) 40%, transparent); 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: color-mix(in srgb, var(--oro-oscuro) 6%, transparent);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.tr-destino:hover { border-color: var(--oro); background: color-mix(in srgb, var(--oro-oscuro) 10%, transparent); }
.tr-elegido-fila {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--verde-f) 35%, transparent);
  background: color-mix(in srgb, var(--verde-f) 8%, transparent);
}
.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, color-mix(in srgb, var(--texto) 60%, transparent)); 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: color-mix(in srgb, var(--oro-oscuro) 45%, transparent);
  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 color-mix(in srgb, var(--oro-oscuro) 50%, transparent);
}
.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: color-mix(in srgb, var(--oro-oscuro) 6%, transparent);
}
.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 color-mix(in srgb, var(--oro-oscuro) 40%, transparent);
  background: color-mix(in srgb, var(--oro-oscuro) 7%, transparent);
}
.pf-consent {
  display: flex; gap: 8px; align-items: center; min-height: 44px;
  margin-top: 10px; padding: 4px 0; font-size: 13px; font-weight: 700; cursor: pointer;
}
.pf-consent input[type=checkbox] { width: 22px; height: 22px; flex: none; }

/* 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: var(--r); background: color-mix(in srgb, var(--oro-oscuro) 6%, transparent); border: 1px solid color-mix(in srgb, var(--oro-oscuro) 12%, transparent); }
.uni-tramo.hecho { border-color: color-mix(in srgb, var(--oro-oscuro) 45%, transparent); background: color-mix(in srgb, var(--oro-oscuro) 8%, transparent); }
.uni-tramo-n { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: color-mix(in srgb, var(--oro-oscuro) 12%, transparent); font-size: 12px; font-weight: 800; }
.uni-tramo.hecho .uni-tramo-n { background: color-mix(in srgb, var(--oro-oscuro) 22%, transparent); color: var(--oro); }
.uni-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 11px; border-radius: var(--r); background: color-mix(in srgb, var(--oro-oscuro) 6%, transparent); 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) {
  /* iOS Safari hace ZOOM automático al enfocar cualquier campo con font-size < 16px, y deja la
     página ampliada y desplazada en horizontal. Ningún campo de la app llegaba a 16 (base 15, el
     buscador de la tienda 14, los filtros de cobranza 13), y `login.html` carga esta misma hoja:
     el primerísimo gesto del día 1 —tocar "Clave" en el teléfono— ya hacía zoom. Los asesores
     venden desde el móvil, así que esto se nota en cada campo del día. 16px solo en móvil: en
     escritorio el tamaño de antes se ve mejor. */
  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] { font-size: 16px; }

  .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, .modal-cerrar { 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: color-mix(in srgb, var(--verde-f) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--verde-f) 30%, transparent);
  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: color-mix(in srgb, var(--oro-oscuro) 6%, transparent); }
.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: color-mix(in srgb, var(--oro-oscuro) 6%, transparent);
  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: color-mix(in srgb, var(--oro-oscuro) 6%, transparent); border: 1px solid color-mix(in srgb, var(--oro-oscuro) 15%, transparent); border-radius: 8px; padding: 6px 8px; color: inherit; font-size: 12px; }
.area-meta { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--oro-oscuro) 6%, transparent); 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: color-mix(in srgb, var(--oro-oscuro) 15%, transparent); 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: color-mix(in srgb, var(--oro-oscuro) 6%, transparent);
  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; }

/* ---------- B4-COBRANZA: "A quién cobrar" --------------------------------- */
/* R3-c: los tramos de antigüedad. Son la primera decisión de la cola del lunes, así que van
   arriba del buscador y se ven como botones, no como un select escondido. */
.cobrar-tramos { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.cobrar-tramo {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  padding: 6px 10px; border-radius: 10px; font: inherit; font-size: 13px; color: inherit;
  background: color-mix(in srgb, var(--oro-oscuro) 6%, transparent); border: 1px solid color-mix(in srgb, var(--oro-oscuro) 15%, transparent);
}
.cobrar-tramo .cobrar-tramo-et { font-weight: 700; }
.cobrar-tramo.activo { background: color-mix(in srgb, var(--oro-oscuro) 18%, transparent); border-color: color-mix(in srgb, var(--cg-superficie-alta) 32%, transparent); }
.cobrar-tramo.vacio { opacity: .45; cursor: default; }
.cobrar-tramo:focus-visible { outline: 2px solid var(--acento, var(--oro-oscuro)); outline-offset: 2px; }
.cobrar-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.cobrar-filtros input[type=search], .cobrar-filtros select {
  flex: 1; min-width: 140px; background: color-mix(in srgb, var(--oro-oscuro) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--oro-oscuro) 15%, transparent); border-radius: 8px;
  padding: 7px 10px; color: inherit; font-size: 13px;
}
.cobrar-tabla-wrap { overflow-x: auto; }
.cobrar-tabla { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 480px; }
.cobrar-tabla th { text-align: left; padding: 6px 10px; color: var(--texto-2); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.cobrar-contacto { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.cobrar-tabla td { padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--oro-oscuro) 7.5%, transparent); vertical-align: top; }
.cobrar-tabla td.n, .cobrar-tabla th.n { text-align: right; white-space: nowrap; }
.cobrar-tabla tr[hidden], .cobrar-tarjeta[hidden] { display: none; }
.cobrar-tarjetas { display: none; }
.cobrar-tarjeta {
  padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--oro-oscuro) 6%, transparent);
  margin-bottom: 8px; font-size: 13px;
}
.cobrar-tarjeta .num { font-weight: 800; margin: 4px 0; }
@media (max-width: 390px) {
  .cobrar-tabla-wrap { display: none; }
  .cobrar-tarjetas { display: block; }
}

/* ---------- 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: color-mix(in srgb, var(--oro-oscuro) 6%, transparent); }
.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: color-mix(in srgb, var(--oro-oscuro) 6%, transparent); }
.pfin-paso {
  flex: 1 1 130px; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--oro-oscuro) 6%, transparent);
  border: 1px solid transparent;
  opacity: .55;
}
.pfin-paso.hecho { opacity: 1; border-color: color-mix(in srgb, var(--verde-f) 35%, transparent); }
.pfin-paso.actual { opacity: 1; border-color: color-mix(in srgb, var(--oro-oscuro) 55%, transparent); background: color-mix(in srgb, var(--oro-oscuro) 10%, transparent); }
.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: color-mix(in srgb, var(--oro-oscuro) 18%, transparent); font-weight: 800; font-size: 12px;
}
.pfin-paso.hecho .pfin-bolita { background: var(--agua); color: var(--oro-tinta); }
.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: color-mix(in srgb, var(--oro-oscuro) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--oro-oscuro) 30%, transparent);
  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; }

/* J2 (ENCARGO 007): el resultado de cada jugada en neto, y el acumulado del día en la sala. */
.neto-linea { display: block; font-size: .95rem; }
.neto-num { font-size: 1.35em; }
.neto-num.gana, .neto-dia.gana b { color: var(--verde); }
.neto-num.pierde, .neto-dia.pierde b { color: var(--rojo-claro); }
.neto-dia { margin-bottom: 10px; }

/* ENCARGO 041: rótulo a la izquierda y cifra a la derecha en «Tu cuenta de Global Capital» y en «Mi cuenta» (028).
   La clase se usaba sin estilo y el rótulo quedaba pegado a la cifra ("Disponible para cobrarUS$ 0.00"). */
.fila-dato { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--oro-oscuro) 9%, transparent); }
.fila-dato strong { text-align: right; font-variant-numeric: tabular-nums; }

/* D28-F (038, pantalla 1) · Hoy · Siguiente escalón: la cifra que falta es lo grande; el premio y el pie
   no empujan la tarjeta a 390 px (min-width:0 + recorte a un renglón, como en 025b). */
#cajaSiguiente .sig-izq { min-width: 0; flex: 1 1 auto; }
#cajaSiguiente .sig-falta {
  font-family: var(--fuente-titulos); font-size: 44px; line-height: 1; margin: 6px 0 0;
  font-variant-numeric: tabular-nums; color: var(--texto);
}
#cajaSiguiente .sig-premio { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
#cajaSiguiente .sig-pie { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* D28-F (ENCARGO_CASINO_038, pantalla 5): el contador «2/5» de Misiones y Del equipo es la cifra grande
   de la tarjeta; la palabra «cumplidas» y la regla van al title. */
.pastilla.resumen-grande { font-size: 24px; font-weight: 800; line-height: 1; padding: 6px 14px; }

/* D28-F (ENCARGO_CASINO_038, pantalla 6): en la Ruta, lo que falta para el siguiente escalón sube
   debajo del título como cifra grande; «para $Y → premio» queda chico al lado y baja de renglón. */
.ruta-falta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 14px; min-width: 0; }
.ruta-falta-et { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.ruta-falta-num { font-size: 44px; line-height: 1; color: var(--oro); }
.ruta-falta-txt { font-size: 13px; color: var(--suave, var(--tenue)); min-width: 0; overflow-wrap: anywhere; }
.campana-mapa.compacta .ruta-falta-num { font-size: 32px; }

/* D28-F (ENCARGO_CASINO_038, pantalla 8): en la Ruleta los giros que tienes son la cifra grande de la
   tarjeta y la cabecera puede bajar de renglón a 390 px; las filas de «Qué hay en la rueda» parten la
   cifra en vez de desbordar. */
section[data-panel="ruleta"] .tarjeta-cab { flex-wrap: wrap; gap: 8px 12px; }
#rulRetorno > div, #rulTabla > div { min-width: 0; }
#rulRetorno b, #rulTabla b { overflow-wrap: anywhere; text-align: right; }

/* D28-F (ENCARGO_CASINO_038, pantalla 9): en Cofres lo primero es cuántos tienes por abrir, en cifra
   grande; las frases fijas van al title y las filas recortan a un renglón en vez de empujar a 390 px. */
.cofres-resumen { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; min-width: 0; }
.cofres-resumen-num { font-family: var(--fuente-titulos); font-size: 56px; line-height: 1; color: var(--oro); font-variant-numeric: tabular-nums; }
.cofres-resumen-lado { min-width: 0; }
.cofres-resumen-et { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.cofre-origen, .cofre-como { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cosm-tengo { font-size: 14px; margin: 12px 0 8px; color: var(--tenue); }
.cosm-tengo .num { font-family: var(--fuente-titulos); font-size: 28px; line-height: 1; color: var(--texto); }
section[data-panel="cofres"] .tarjeta-cab { flex-wrap: wrap; gap: 8px 12px; }

/* D28-F (ENCARGO_CASINO_038, pantalla 10): en Salas lo primero es cuánto tope te queda hoy, en cifra
   grande; el consejo, las ventanas y el desglose del tope van al title y la cabecera baja de renglón. */
.salas-tope-num { font-family: var(--fuente-titulos); font-size: 40px; line-height: 1.05; color: var(--oro); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.salas-linea { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
section[data-panel="salas"] .tarjeta-cab { flex-wrap: wrap; gap: 8px 12px; }

/* D28-F (ENCARGO_CASINO_038, pantalla 11): en Temporada lo primero es lo que falta, en cifra grande (BEKY al
   siguiente nivel del pase y dólares al siguiente escalón del premio); las reglas fijas van al title. */
.pase-xp-cifra { font-size: 44px; }
.temporada-falta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin: 4px 0 2px; min-width: 0; }
.temporada-falta-num { font-family: var(--fuente-titulos); font-size: 40px; line-height: 1.05; color: var(--agua); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.temporada-vacia-tit { font-size: 24px; overflow-wrap: anywhere; }
section[data-panel="temporada"] .tarjeta-cab { flex-wrap: wrap; gap: 8px 12px; }
@media (max-width: 420px) {
  .pase-xp-cifra { font-size: 40px; }
  .temporada-falta-num { font-size: 32px; }
}

/* D28-F (ENCARGO_CASINO_038, pantalla 12): en Billetera lo real y lo ganado, el total a canjear y el total de la
   liquidación van en cifra grande; las frases fijas (qué es cada saldo, la regla de los multiplicadores, el ciclo
   semanal) pasan al title. */
.cifra-billetera { font-family: var(--fuente-titulos); font-size: 40px; line-height: 1.05; overflow-wrap: anywhere; }
.liq-gran-total { font-family: var(--fuente-titulos); font-size: 40px; line-height: 1.05; overflow-wrap: anywhere; }
.liq-total .total b.liq-gran-total { font-size: 40px; }
section[data-panel="billetera"] .tarjeta-cab { flex-wrap: wrap; gap: 8px 12px; }
@media (max-width: 420px) {
  .cifra-billetera, .liq-gran-total, .liq-total .total b.liq-gran-total { font-size: 32px; }
}

/* D28-F (ENCARGO_CASINO_038, pantalla 13): en Banco el total, el saldo de cada cuenta y las tres cifras de la bóveda
   van grandes; los subtítulos y las notas de cada cuenta pasan al title (REGLA_BOVEDA y REGLA_TRANSF siguen a la vista). */
.banco-cuenta .cifra, .boveda-cifra .cifra { font-size: 40px; overflow-wrap: anywhere; }
section[data-panel="banco"] .tarjeta-cab { flex-wrap: wrap; gap: 8px 12px; }
@media (max-width: 420px) {
  .banco-cuenta .cifra { font-size: 32px; }
  .boveda-cifra .cifra { font-size: 26px; }
}

/* D28-F (ENCARGO_CASINO_038, pantalla 14): en Tienda el precio va grande, el saldo es la cifra de la cabecera y en «A cuotas»
   la cuota de cada mes manda sobre el resto del cálculo; los subtítulos pasan al title. */
.articulo .precio { font-size: 34px; overflow-wrap: anywhere; }
.articulo .faltan { font-size: 15px; }
.fin-cuota { text-align: center; padding: 14px; margin: 14px 0 0; border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--oro-oscuro) 40%, transparent); background: color-mix(in srgb, var(--oro-oscuro) 6%, transparent); }
.fin-cuota .k { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.fin-cuota .cifra { font-size: 44px; font-weight: 800; line-height: 1.1; color: var(--oro); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
section[data-panel="tienda"] .tarjeta-cab { flex-wrap: wrap; gap: 8px 12px; }
@media (max-width: 420px) {
  .articulo .precio { font-size: 30px; }
  .fin-cuota .cifra { font-size: 36px; }
}

/* D28-F · Bonos: a 390 px las cifras bajan para no desbordar. */
@media (max-width: 420px) {
  .total-bono.principal { font-size: 44px; }
  .ciclo-entra { font-size: 36px; }
}

/* D28-F · Premios financiados: lo que falta por pagar va grande y la próxima cuota debajo. */
.pfin-grande { margin-bottom: 14px; }
.pfin-falta { font-size: 44px; line-height: 1; margin-top: 4px; color: var(--oro); overflow-wrap: anywhere; }
.pfin-prox { margin-top: 6px; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
section[data-panel="premiosfin"] .tarjeta-cab { flex-wrap: wrap; gap: 8px 12px; }
@media (max-width: 420px) {
  .pfin-falta { font-size: 36px; }
}

/* D28-F · Ranking: tu puesto, grande, antes del podio. */
.rank-comparativa:empty { display: none; }
.rank-tu { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 4px; }
.rank-tu-num { font-family: var(--fuente-titulos); font-size: 56px; font-weight: 800; line-height: 1; color: var(--agua); }
.rank-tu-num.p1 { color: var(--oro); }
.rank-tu-resto { font-size: 14px; color: var(--texto-2); min-width: 0; overflow-wrap: anywhere; }
.rank-tu-resto strong { font-size: 24px; color: var(--texto); }
@media (max-width: 420px) {
  .rank-tu-num { font-size: 48px; }
  .rank-tu-resto strong { font-size: 20px; }
}

/* D28-F · Perfil: el avance de la ficha, grande, arriba del nombre de las secciones. */
.perfil-avance { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.perfil-pct { font-family: var(--fuente-titulos); font-size: 56px; font-weight: 800; line-height: 1; color: var(--agua); }
.perfil-pct-resto { font-size: 14px; color: var(--texto-2); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .perfil-pct { font-size: 48px; }
}