/* ==========================================================================
   GLOBAL PARTY — 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:        var(--superficie);
  /* 060: los tapetes de los juegos y las tarjetas de grado del perfil son piezas de «noche de
     sillar» sobre el marfil, como las tarjetas verdes de la portada. Conservan los valores
     oscuros del 052 y los aplican con las reglas «piezas oscuras» del final de esta hoja. */
  --tapete-texto:   #F3EEE2;
  --tapete-texto-2: #CFC9B8;
  --tapete-tenue:   #A3A08E;
  --tapete-oro:     #D4B06A;
  --tapete-oro-cl:  #ECD49C;
  --tapete-oro-os:  #9C7A3A;
  --tapete-tinta:   #1E1606;
  --tapete-sup:     #172019;
  --tapete-sup-2:   #1E2A21;
  --tapete-sup-3:   #25332A;
  --tapete-linea:   rgba(243, 238, 226, .10);
  --tapete-linea-2: rgba(243, 238, 226, .18);
  --tapete-rojo:    #E07A6E;
  --tapete-verde:   #7DBB91;
  /* 060: fieltros y fondos de los juegos con los verdes del sistema (cabecera, profundo, vivo) y el verde de piedra de
     siempre para lo casi negro: ya no hay azules ni cianes de mesa, que el sistema prohíbe. */
  --tapete-fieltro-1: #14473C;
  --tapete-fieltro-2: #103C34;
  --tapete-fieltro-3: #082F28;
  --tapete-fondo:   #0D120F;
  --linea-suave:  color-mix(in srgb, var(--oro-oscuro) 12%, transparent);
  --vidrio-a:     color-mix(in srgb, var(--superficie) 92%, transparent);
  --vidrio-b:     color-mix(in srgb, var(--suelo-2) 92%, transparent);
  --agua-hondo:   var(--sup-3);
  --apagado:      var(--tenue);   /* UX-17: 4,8:1 sobre --superficie; el #4f7480 daba 3,1 */
  /* 060: en marfil el «claro» de estos cuatro era un tono de noche (salmón, lila, plata) ilegible sobre papel. El
     sistema no admite morado: --morado queda como verde profundo (estados), la plata en tinta y el bronce en bronce. */
  --rojo-claro:   var(--rojo);
  --morado:       var(--agua);
  --plata:        var(--texto-2);
  --bronce:       var(--oro-oscuro);
  /* 060 · rarezas como las gemas de la maqueta (LEY §13): común gris, raro verde, épico bronce, legendario oro con brillo.
     Sin lila ni azul. «Reservado» (saldo guardado, no una rareza) va en gris tenue. */
  --rar-comun:      #B9B3A4;
  --rar-raro:       var(--verde-f);
  --rar-epico:      linear-gradient(135deg, var(--cg-bronce-claro), var(--cg-bronce-osc));
  --rar-legendario: linear-gradient(135deg, #FFF3C4, #D9A93F 55%, #8A6215);
  --rar-epico-tinta:      var(--cg-bronce-osc);   /* texto: 5,6:1 sobre marfil */
  --rar-legendario-tinta: #8A6215;

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

  --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: light; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 18% -10%, color-mix(in srgb, var(--verde-f) 16%, transparent), transparent 60%),
    radial-gradient(700px 500px at 92% 8%, color-mix(in srgb, var(--oro-oscuro) 14%, transparent), 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;
  font-variant-numeric: lining-nums tabular-nums;   /* 073 (A-09): Cormorant trae cifras «de texto» (1 como ı, 0 como o): aquí todas van alineadas */
  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: var(--sup-3); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--oro-oscuro); }

.oculto { display: none !important; }

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

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

.k {
  font-size: 12px;
  font-weight: 700;
  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 lining-nums; }
.tenue { color: var(--tenue); }
.suave { color: var(--texto-2); }
.mini  { font-size: 12px; }

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

.vidrio {
  background: linear-gradient(180deg, var(--superficie) 0%, var(--suelo-2) 100%);
  border: 1px solid var(--linea);
  border-radius: var(--r);
}

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pastilla.oro   { background: color-mix(in srgb, var(--oro-oscuro) 12%, transparent); border: 1px solid color-mix(in srgb, var(--oro-oscuro) 50%, transparent); color: var(--oro); }
.pastilla.agua  { background: color-mix(in srgb, var(--verde-f) 10%, transparent); border: 1px solid color-mix(in srgb, var(--verde-f) 50%, transparent); color: var(--agua); }
.pastilla.verde { background: color-mix(in srgb, var(--verde-f) 12%, transparent); border: 1px solid color-mix(in srgb, var(--verde-f) 50%, transparent); color: var(--verde); }
.pastilla.roja  { background: color-mix(in srgb, var(--rojo) 14%, transparent); border: 1px solid color-mix(in srgb, var(--rojo) 60%, transparent); color: var(--rojo-claro); }
.pastilla.gris  { background: color-mix(in srgb, var(--oro-oscuro) 9%, transparent); border: 1px solid color-mix(in srgb, var(--oro-oscuro) 21%, transparent); 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: color-mix(in srgb, var(--oro-oscuro) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--oro-oscuro) 21%, transparent);
  color: var(--texto-2);
}
.estado.pendiente, .estado.solicitado { background: color-mix(in srgb, var(--oro-oscuro) 12%, transparent); border-color: color-mix(in srgb, var(--oro-oscuro) 45%, transparent); color: var(--oro); }
.estado.confirmado, .estado.disponible, .estado.aprobado, .estado.entregado { background: color-mix(in srgb, var(--verde-f) 12%, transparent); border-color: color-mix(in srgb, var(--verde-f) 45%, transparent); color: var(--verde); }
.estado.pagado, .estado.usado { background: color-mix(in srgb, var(--verde-f) 10%, transparent); border-color: color-mix(in srgb, var(--verde-f) 45%, transparent); color: var(--agua); }
.estado.anulado, .estado.rechazado, .estado.vencida { background: color-mix(in srgb, var(--rojo) 12%, transparent); border-color: color-mix(in srgb, var(--rojo) 45%, transparent); color: var(--rojo-claro); }
.estado.reserva { background: color-mix(in srgb, var(--tenue) 12%, transparent); border-color: color-mix(in srgb, var(--tenue) 45%, transparent); color: var(--tenue); }

/* Botones */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  min-height: 44px;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  background: var(--superficie-2);
  border-color: var(--linea-2);
  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: var(--sup-3); }
.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));
  border-color: transparent;
  color: var(--oro-tinta);
}
.boton.oro:hover:not(:disabled) { background: linear-gradient(180deg, var(--oro), var(--oro-claro)); }
.boton.fant { background: transparent; }

.boton.agua {
  background: color-mix(in srgb, var(--verde-f) 12%, transparent);
  border-color: color-mix(in srgb, var(--verde-f) 55%, transparent);
  color: var(--agua);
}
.boton.agua:hover:not(:disabled) { background: color-mix(in srgb, var(--verde-f) 20%, transparent); }

.boton.chico { min-height: 44px; 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: 700; letter-spacing: .04em; color: var(--texto-2); }

input, select, textarea {
  font-family: inherit;
  font-weight: 500;
  font-size: 15px;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--linea-2);
  border-radius: 10px;
  min-height: 44px;
  padding: 11px 13px;
  width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--oro); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro-oscuro) 18%, transparent); }
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 color-mix(in srgb, var(--oro-oscuro) 55%, transparent);
  transition: width .6s cubic-bezier(.22, 1, .36, 1);
}
.barra > i.prov { background: linear-gradient(90deg, color-mix(in srgb, var(--verde-f) 55%, transparent), color-mix(in srgb, var(--verde-f) 25%, transparent)); 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, var(--lacre-f), var(--rojo)); box-shadow: 0 0 14px color-mix(in srgb, var(--rojo) 45%, transparent); }
.barra > i.amarillo { background: linear-gradient(90deg, var(--oro), var(--oro-oscuro)); box-shadow: 0 0 14px color-mix(in srgb, var(--oro-oscuro) 45%, transparent); }
.barra > i.verde    { background: linear-gradient(90deg, var(--agua), var(--verde)); box-shadow: 0 0 16px color-mix(in srgb, var(--verde-f) 50%, transparent); }
.pastilla.rojo     { background: color-mix(in srgb, var(--rojo) 14%, transparent); border: 1px solid color-mix(in srgb, var(--rojo) 60%, transparent); color: var(--rojo-claro); }
.pastilla.amarillo { background: color-mix(in srgb, var(--oro-oscuro) 14%, transparent); border: 1px solid color-mix(in srgb, var(--oro-oscuro) 55%, transparent); color: var(--oro-oscuro); }

/* Esqueleto de carga */
.esq {
  border-radius: 10px;
  background: linear-gradient(90deg, var(--sup-3) 25%, var(--superficie-2) 37%, var(--sup-3) 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, color-mix(in srgb, var(--suelo) 96%, transparent) 60%, color-mix(in srgb, var(--suelo) 0%, transparent));
  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: var(--r); }
.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: color-mix(in srgb, var(--oro-oscuro) 7.5%, transparent); 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: color-mix(in srgb, var(--oro-oscuro) 12%, transparent);
  border-color: transparent;
  color: var(--oro);
  box-shadow: none;
}
.barra-sup .nav button.activo .globo { background: var(--rojo); color: var(--oro-tinta); }

.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: color-mix(in srgb, var(--oro-oscuro) 7.5%, transparent); }
.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: var(--r);
  border: 1px solid var(--linea);
  background: var(--superficie);
  box-shadow: 0 24px 50px color-mix(in srgb, var(--texto) 27.5%, transparent);
}
.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-oscuro), var(--oro));
  box-shadow: 0 22px 46px color-mix(in srgb, var(--texto) 25%, transparent);
}
/* Anillo de bombillas: una fila de puntos por cada borde, en persecución horaria. */
.bombillas {
  border-radius: var(--r);
  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: var(--r);
  background: linear-gradient(160deg, var(--superficie-2), var(--superficie));
  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: var(--r);
  flex: none;
  display: block;
  box-shadow: 0 0 24px color-mix(in srgb, var(--oro-oscuro) 45%, transparent);
}

.titulo-app {
  font-family: var(--fuente-titulos);
  font-size: 30px;
  line-height: 1;
  letter-spacing: .05em;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro) 55%, var(--oro-oscuro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 26px color-mix(in srgb, var(--oro-oscuro) 25%, transparent);
  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; position: relative; cursor: pointer; }
.saldo-beky .k { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }

.panel-balance { text-align: left; cursor: default; width: min(300px, calc(100vw - 32px)); }
.panel-balance .balance-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px; }
.panel-balance .balance-fila .k { font-size: 12px; color: var(--tenue); }
.panel-balance .balance-fila .v { font-family: var(--fuente-titulos); font-size: 15px; }
.panel-balance .balance-sep { margin: 4px 0; border: none; border-top: 1px solid var(--linea-suave); }
/* D28: «Mi balance» en simple. La única fila que importa —cuánto tienes que se cobra— va sola, con el
   número grande y su valor en dólares debajo; el resto son filas chicas. Un panel lleno de texto se
   cierra sin leerse. */
.panel-balance .balance-grande { display: block; padding: 10px 6px 12px; }
.panel-balance .balance-grande .k { display: block; font-size: 13px; color: var(--tenue); }
.panel-balance .balance-grande .k b { color: var(--verde); font-weight: 800; }
.panel-balance .balance-grande .v { display: block; margin-top: 4px; font-size: 38px; line-height: 1.05; color: var(--oro); }
.panel-balance .balance-grande .usd { display: block; margin-top: 2px; font-family: var(--fuente-titulos); font-size: 17px; font-weight: 800; color: var(--verde); }
.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: color-mix(in srgb, var(--oro-oscuro) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--oro-oscuro) 18%, transparent);
}
.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: var(--oro-tinta);
  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: color-mix(in srgb, var(--verde-f) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--verde-f) 35%, transparent);
  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 color-mix(in srgb, var(--oro-oscuro) 21%, transparent);
  background: color-mix(in srgb, var(--oro-oscuro) 9%, transparent);
  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: var(--superficie-2);
  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: color-mix(in srgb, var(--verde-f) 12%, transparent); }

/* 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 color-mix(in srgb, var(--oro-oscuro) 28%, transparent);
}
@keyframes correbanda { 0% { background-position: 0 0; } 100% { background-position: 220% 0; } }

.banda-evento-cuerpo {
  border-radius: var(--r);
  background: linear-gradient(160deg, var(--superficie-2), var(--superficie));
  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 color-mix(in srgb, var(--oro-oscuro) 60%, transparent);
  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 color-mix(in srgb, var(--oro-oscuro) 18%, transparent);
  background: color-mix(in srgb, var(--oro-oscuro) 6%, transparent);
  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: color-mix(in srgb, var(--verde-f) 40%, transparent); }
.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 color-mix(in srgb, var(--oro-oscuro) 38%, transparent);
}
.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: var(--oro-tinta);
  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: 26px;
  line-height: 1.1;
  margin: 4px 0 0;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Ayuda dentro de la app (ENCARGO_CASINO_018 punto 3): acordeón nativo, sin JS. */
.manual-ayuda details { border-top: 1px solid var(--linea-suave); padding: 14px 2px; }
.manual-ayuda details:first-of-type { border-top: none; padding-top: 4px; }
.manual-ayuda summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--oro);
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.manual-ayuda summary::-webkit-details-marker { display: none; }
.manual-ayuda summary::before { content: '▸'; color: var(--agua); margin-right: 10px; }
.manual-ayuda details[open] summary::before { content: '▾'; }
.manual-ayuda details p { margin: 8px 0 0; color: var(--apagado); line-height: 1.5; }

/* ==========================================================================
   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: var(--r);
  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, color-mix(in srgb, var(--oro-oscuro) 10.5%, transparent), 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; } }

/* ==========================================================================
   D28 · Llamadas de hoy (indicadores por hora)
   ========================================================================== */

/* Casi sin texto a propósito: el asesor la mira entre llamada y llamada. Los colores son los de los
   rodillos (agua y oro) y los del semáforo de las barras (verde); no se define ningún token nuevo. */
.llam-cab { align-items: center; margin-bottom: 10px; }
.llam-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.llam-cifra {
  border-radius: var(--r-sm);
  padding: 12px 16px 10px;
  background: var(--suelo-2);
  border: 1px solid var(--linea);
}
.llam-cifra .k { margin-top: 4px; }
.llam-num {
  font-family: var(--fuente-titulos);
  font-size: 56px;
  line-height: 1;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.llam-cifra.llam-oro { border-color: var(--oro-oscuro); background: linear-gradient(160deg, var(--oro-tinta), var(--suelo-2)); }
.llam-cifra.llam-oro .llam-num, .llam-cifra.llam-oro .k { color: var(--oro); }

/* Un chip por hora, en dos filas parejas (el número de columnas lo pone el JS según cuántas horas
   haya). La forma de la marca —✓ ✗ ●— dice el estado sin depender del color. */
.llam-chips {
  display: grid;
  grid-template-columns: repeat(var(--llam-cols, 6), minmax(0, 1fr));
  gap: 6px;
}
.llam-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 52px;
  padding: 6px 0;
  border-radius: var(--r-sm);
  border: 1px dashed var(--linea);
  color: var(--tenue);
}
.llam-marca { font-size: 20px; line-height: 1; font-weight: 800; min-height: 20px; }
.llam-hora { font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.llam-chip.cumplida { background: color-mix(in srgb, var(--verde-f) 14%, transparent); border: 1px solid color-mix(in srgb, var(--verde-f) 55%, transparent); color: var(--verde); }
.llam-chip.no { background: color-mix(in srgb, var(--oro-oscuro) 9%, transparent); border: 1px solid color-mix(in srgb, var(--oro-oscuro) 21%, transparent); color: var(--texto-2); }
.llam-chip.en_curso {
  background: color-mix(in srgb, var(--oro-oscuro) 12%, transparent);
  border: 1px solid var(--oro);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro-oscuro) 12%, transparent);
  color: var(--oro);
}
.llam-chip.en_curso .llam-marca { animation: llam-late 1.6s ease-in-out infinite; }
@keyframes llam-late { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .llam-chip.en_curso .llam-marca { animation: none; } }

/* Las dos barritas de la hora en curso: minutos hablados y llamadas hechas. */
.llam-barras { display: grid; gap: 10px; margin-top: 14px; }
.llam-barra-cab { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; font-size: 14px; }
.llam-barra-cab b { font-size: 20px; }
.llam-ok { color: var(--verde); font-weight: 800; }
.llam-pie { display: flex; justify-content: space-between; align-items: center; gap: 4px 14px; flex-wrap: wrap; margin-top: 12px; }
.llam-atrasado { color: var(--oro); font-weight: 800; }
@media (max-width: 420px) {
  .llam-num { font-size: 46px; }
  .llam-cifra { padding: 10px 12px 8px; }
}

/* ==========================================================================
   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 color-mix(in srgb, var(--oro-oscuro) 60%, transparent);
  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, color-mix(in srgb, var(--verde-f) 55%, transparent) 0 8px, color-mix(in srgb, var(--verde-f) 18%, transparent) 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: var(--oro-tinta);
  border: 2px solid var(--superficie-2);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 0 16px color-mix(in srgb, var(--verde-f) 80%, transparent);
  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%, var(--oro-oscuro), var(--oro) 55%, var(--oro-claro));
  color: var(--oro-tinta);
  box-shadow: 0 0 0 4px var(--superficie), 0 0 26px color-mix(in srgb, var(--oro-oscuro) 75%, transparent);
}
.nodo.prov {
  background: var(--superficie-2);
  border: 3px dashed var(--agua);
  color: var(--agua);
  box-shadow: 0 0 22px color-mix(in srgb, var(--verde-f) 45%, transparent);
}
.nodo.bloq { background: var(--sup-3); 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: color-mix(in srgb, var(--verde-f) 12%, transparent); border: 1px solid var(--agua-oscuro);
  border-radius: 999px; padding: 6px 13px;
}
.nodo-col.bloqueada .objetivo, .nodo-col.bloqueada .umbral { color: var(--apagado); }
.nodo-col.bloqueada .premio { color: var(--texto-2); 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: var(--superficie-2);
  border: 1px solid var(--agua);
  border-radius: var(--r);
  padding: 12px 14px;
  text-align: left;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--texto) 22.5%, transparent);
  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: var(--r); }
/* 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: var(--r); 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: color-mix(in srgb, var(--verde-f) 10%, transparent); 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: var(--texto-2); }
.chip-esc:not(.proxima):not(.bloqueada) { background: color-mix(in srgb, var(--oro-oscuro) 10%, transparent); 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: var(--apagado); }
.pista-fila.bloqueada .datos span { color: var(--apagado); }
.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%, color-mix(in srgb, var(--oro-oscuro) 35%, transparent), color-mix(in srgb, var(--rojo) 18%, transparent) 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 color-mix(in srgb, var(--oro-oscuro) 80%, transparent));
  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 var(--superficie);
}
@keyframes flamear { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.09) rotate(2deg); } }
/* D28-F · racha: multiplicador grande, una palabra al lado, sin frase. min-width:0 y wrap para que a
   390 px nada empuje el ancho de la tarjeta. */
#rachaTexto { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
#rachaTexto .racha-mult { font-family: var(--fuente-titulos); font-size: 40px; line-height: 1; color: var(--oro); }
#rachaTexto .racha-etq { font-size: 13px; color: var(--tenue, inherit); }
#rachaSiguiente { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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: color-mix(in srgb, var(--oro-oscuro) 6%, transparent);
  border: 1px solid var(--linea-suave);
}
.mision .cuerpo { flex: 1; min-width: 0; }
.mision .titulo { font-weight: 800; font-size: 14px; }
.mision.cumplida { background: color-mix(in srgb, var(--verde-f) 8%, transparent); border-color: color-mix(in srgb, var(--verde-f) 35%, transparent); }
.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: var(--oro-tinta); }
.mision .recompensa { font-family: var(--fuente-titulos); font-size: 22px; color: var(--oro); flex: none; }

/* D28 · TAREAS DEL DÍA para gente que odia el texto (José, 28-sep-2026): un número grande arriba y,
   por tarea, ícono + título corto + premio + un botón. La descripción larga aparece al tocar.
   Se usan los mismos tokens de las misiones de arriba; nada de fuentes ni colores nuevos. */
.tareas-tablero { padding: 4px 4px 12px; text-align: center; }
.tareas-cuenta { display: flex; align-items: baseline; justify-content: center; gap: 8px; font-family: var(--fuente-titulos); line-height: 1; }
.tareas-cuenta b { font-weight: 400; font-size: 68px; color: var(--texto); display: inline-block; }
.tareas-cuenta .de { font-size: 34px; color: var(--apagado); }
.tareas-cuenta .lbl { font-size: 22px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.tareas-cuenta.salto b { animation: tarea-salto .55s ease; }
@keyframes tarea-salto { 0% { transform: scale(1); } 40% { transform: scale(1.4); color: var(--verde); } 100% { transform: scale(1); } }
.tareas-beky { margin-top: 2px; font-family: var(--fuente-titulos); font-size: 42px; line-height: 1.1; color: var(--oro); }
.tareas-beky small { font-size: 20px; letter-spacing: .06em; color: var(--texto-2); }
.tareas-barra { height: 12px; margin: 12px 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--oro-oscuro) 12%, transparent); overflow: hidden; }
.tareas-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--agua), var(--verde)); transition: width .5s ease; }
.tareas-faltan { min-height: 20px; font-weight: 800; font-size: 14px; color: var(--texto-2); }
.tareas-faltan b { color: var(--oro); }
.tareas-listo { font-family: var(--fuente-titulos); font-size: 26px; letter-spacing: .04em; color: var(--verde); }

.tarea-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--oro-oscuro) 6%, transparent); border: 1px solid var(--linea-suave); }
.tarea-fila.hecha { background: color-mix(in srgb, var(--verde-f) 8%, transparent); border-color: color-mix(in srgb, var(--verde-f) 35%, transparent); }
.tarea-fila.vencida { opacity: .5; }
.tarea-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; font-size: 20px; border-radius: 50%; background: color-mix(in srgb, var(--oro-oscuro) 9%, transparent); border: 2px solid var(--red, var(--linea)); }
/* El título es un botón de verdad (teclado y lector de pantalla) vestido de texto. */
.tarea-tap { flex: 1 1 130px; min-width: 0; margin: 0; padding: 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; }
button.tarea-tap { cursor: pointer; }
.tarea-titulo { font-weight: 800; font-size: 15px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarea-sub { margin-top: 3px; font-size: 12px; color: var(--texto-2); }
.tarea-sub.mal { color: var(--rojo-claro); }
.tarea-premio { flex: none; font-family: var(--fuente-titulos); font-size: 30px; line-height: 1; color: var(--oro); }
.tarea-fila.hecha .tarea-premio { color: var(--verde); }
.tarea-accion { flex: none; padding: 9px 14px; font-size: 13px; }
.tarea-marca { flex: none; min-width: 34px; text-align: center; font-size: 22px; }
.tarea-desc { flex: 1 0 100%; padding: 0 4px 2px 52px; font-size: 13px; line-height: 1.4; color: var(--texto-2); }
.tarea-desc[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .tareas-cuenta.salto b { animation: none; } .tareas-barra i { transition: 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: color-mix(in srgb, var(--oro-oscuro) 4.5%, transparent); border: 1px solid var(--linea);
}
.aporte-fila.yo { border-color: color-mix(in srgb, var(--verde-f) 45%, transparent); background: color-mix(in srgb, var(--verde-f) 7%, transparent); }

/* ==========================================================================
   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: var(--r);
  background: color-mix(in srgb, var(--oro-oscuro) 6%, transparent);
  border: 1px solid var(--linea-suave);
  font-size: 13px;
}
.feed-fila.mia { background: color-mix(in srgb, var(--oro-oscuro) 10%, transparent); border-color: color-mix(in srgb, var(--oro-oscuro) 40%, transparent); }
/* 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: color-mix(in srgb, var(--oro-oscuro) 55%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--oro-oscuro) 16%, transparent), color-mix(in srgb, var(--oro-oscuro) 6%, transparent) 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 color-mix(in srgb, var(--oro-oscuro) 55%, transparent); }
  60% { box-shadow: inset 3px 0 0 var(--oro), 0 0 0 10px color-mix(in srgb, var(--oro-oscuro) 0%, transparent); }
  100% { box-shadow: inset 3px 0 0 var(--oro), 0 0 0 0 color-mix(in srgb, var(--oro-oscuro) 0%, transparent); }
}
.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: var(--texto); }
.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 color-mix(in srgb, var(--oro-oscuro) 85%, transparent), 0 6px 20px color-mix(in srgb, var(--texto) 30%, transparent);
  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 color-mix(in srgb, var(--texto) 30%, transparent)); }
.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 color-mix(in srgb, var(--texto) 30%, transparent));
}
.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 color-mix(in srgb, var(--texto) 27.5%, transparent)); }
.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, var(--oro-oscuro));
  text-shadow: 0 2px 6px color-mix(in srgb, var(--texto) 30%, transparent);
}
.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 color-mix(in srgb, var(--oro-oscuro) 55%, transparent), 0 12px 24px color-mix(in srgb, var(--texto) 25%, transparent);
  transition: transform .12s ease, box-shadow .2s ease;
}
.boton-girar:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 48px color-mix(in srgb, var(--oro-oscuro) 75%, transparent), 0 14px 26px color-mix(in srgb, var(--texto) 25%, transparent); }
.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, var(--superficie-2), var(--superficie));
}
.cofre-carta.bronce { border-color: var(--bronce); box-shadow: 0 0 26px color-mix(in srgb, var(--bronce) 20%, transparent); }
.cofre-carta.plata  { border-color: var(--plata);  box-shadow: 0 0 26px color-mix(in srgb, var(--plata) 20%, transparent); }
.cofre-carta.oro    { border-color: var(--oro);    box-shadow: 0 0 30px color-mix(in srgb, var(--oro-oscuro) 30%, transparent); }
/* 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); box-shadow: 0 0 30px color-mix(in srgb, var(--morado) 22%, transparent); }
.cofre-carta.regalo .precio { font-size: 20px; color: var(--morado); 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 color-mix(in srgb, var(--texto) 25%, transparent)); }
.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 color-mix(in srgb, var(--oro-oscuro) 12%, transparent); }
.tabla-rareza div:last-child { border-bottom: 0; }

.rareza-comun      { color: var(--texto-2); }
.rareza-raro       { color: var(--agua); }
.rareza-epico      { color: var(--rar-epico-tinta); }
.rareza-legendario { color: var(--rar-legendario-tinta); }
/* La gema de la maqueta: un rombo de 10 px delante de cada fila de la tabla de rareza (sin tocar el HTML). */
.tabla-rareza span[class^="rareza-"]::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 9px; transform: rotate(45deg); border-radius: 2px; vertical-align: -1px; background: var(--rar-comun); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cg-bronce-osc) 25%, transparent); }
.tabla-rareza span.rareza-raro::before { background: var(--rar-raro); box-shadow: none; }
.tabla-rareza span.rareza-epico::before { background: var(--rar-epico); box-shadow: none; }
.tabla-rareza span.rareza-legendario::before { background: var(--rar-legendario); box-shadow: 0 0 8px color-mix(in srgb, #D9A93F 80%, transparent); }

/* 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: color-mix(in srgb, var(--verde-f) 8%, transparent); border: 1px solid color-mix(in srgb, var(--verde-f) 25%, transparent);
  border-radius: var(--r-sm, 8px); padding: 6px 8px; margin-top: 10px;
}
.cofre-piso b { color: var(--agua); }
/* D28-F (ENCARGO_CASINO_025): explicación de "cómo llega" un cofre regalo a un renglón, completa
   por title= (mismo patrón que .juego-desc / .tarea-titulo / .banco-num-ayuda / .articulo-desc /
   .bono-concepto). Solo el texto largo de comoLlegaCofre() para cofres regalo; el resto de
   .cofre-piso son frases cortas de plantilla fija y se dejan igual. */
.cofre-piso-como { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Mensaje de un cofre ya recibido (origen campaña/fragmentos): puede llegar largo, mismo patrón. */
.cofre-mensaje { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cofre-extra {
  margin: 8px auto 0; max-width: 340px; font-size: 13px;
  padding: 8px 10px; border-radius: var(--r-md, 12px);
  background: color-mix(in srgb, var(--oro-oscuro) 7.5%, transparent); border: 1px solid var(--linea-suave);
}
.cofre-extra.oro { border-color: var(--oro); background: color-mix(in srgb, var(--oro-oscuro) 12%, transparent); }
.barra-fina { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--oro-oscuro) 13.5%, transparent); 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: color-mix(in srgb, var(--oro-oscuro) 6%, transparent); 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 color-mix(in srgb, var(--oro-oscuro) 25%, transparent); }
.cosmetico.rareza-raro { border-color: color-mix(in srgb, var(--verde-f) 45%, transparent); }
.cosmetico.rareza-epico { border-color: color-mix(in srgb, var(--cg-bronce-osc) 55%, transparent); }
.cosmetico.rareza-legendario { border-color: color-mix(in srgb, var(--oro-oscuro) 55%, transparent); }
.avatar.con-marco { box-shadow: 0 0 0 2px var(--linea), 0 0 14px color-mix(in srgb, var(--oro-oscuro) 22.5%, transparent); }
.avatar.marco-raro { box-shadow: 0 0 0 2px var(--agua), 0 0 14px color-mix(in srgb, var(--verde-f) 40%, transparent); }
.avatar.marco-epico { box-shadow: 0 0 0 2px var(--cg-bronce-osc), 0 0 14px color-mix(in srgb, var(--cg-bronce-osc) 45%, transparent); }
.avatar.marco-legendario { box-shadow: 0 0 0 2px var(--rar-legendario-tinta), 0 0 16px color-mix(in srgb, var(--oro-oscuro) 55%, transparent); }

/* 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: color-mix(in srgb, var(--oro-oscuro) 6%, transparent); 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: color-mix(in srgb, var(--oro-oscuro) 7.5%, transparent); 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: color-mix(in srgb, var(--oro-oscuro) 10.5%, transparent); 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: color-mix(in srgb, var(--verde-f) 45%, transparent); }
.titulo-chip.rareza-epico { border-color: color-mix(in srgb, var(--cg-bronce-osc) 55%, transparent); }
.titulo-chip.rareza-legendario { border-color: color-mix(in srgb, var(--oro-oscuro) 55%, transparent); }
.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: color-mix(in srgb, var(--oro-oscuro) 6%, transparent);
  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%, color-mix(in srgb, var(--oro-oscuro) 80%, transparent), 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: color-mix(in srgb, var(--oro-oscuro) 6%, transparent);
  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: color-mix(in srgb, var(--oro-oscuro) 45%, transparent); }
.saldo-caja.disponible .cifra { color: var(--oro); }
.saldo-caja.pendiente .cifra { color: var(--agua); }
.saldo-caja.reserva .cifra { color: var(--tenue); }

.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: var(--r);
  background: color-mix(in srgb, var(--oro-oscuro) 5.3%, transparent);
  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, var(--superficie-2), var(--superficie));
  border: 1px solid var(--linea);
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .18s ease, transform .18s ease;
}
.articulo:hover { border-color: color-mix(in srgb, var(--oro-oscuro) 50%, transparent); 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; }
/* D28-F (ENCARGO_CASINO_025): descripción del artículo a un renglón, completa por title= (mismo patrón que .juego-desc / .tarea-titulo / .banco-num-ayuda). */
.articulo-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 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: color-mix(in srgb, var(--oro-oscuro) 6%, transparent); border: 1px solid var(--linea);
  color: var(--texto); font: inherit; font-size: 14px;
}
.tienda-buscador input:focus { outline: none; border-color: color-mix(in srgb, var(--oro-oscuro) 55%, transparent); }
.tienda-categorias { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cat-chip {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--oro-oscuro) 6%, transparent); 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: color-mix(in srgb, var(--oro-oscuro) 40%, transparent); color: var(--texto); }
.cat-chip.activo { background: color-mix(in srgb, var(--oro-oscuro) 12%, transparent); border-color: color-mix(in srgb, var(--oro-oscuro) 55%, transparent); 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: color-mix(in srgb, var(--oro-oscuro) 4.5%, transparent); 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: color-mix(in srgb, var(--cg-texto) 18%, transparent);
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
}
.ticket.apagado { background: linear-gradient(160deg, var(--tenue), var(--texto-2)); color: var(--oro-tinta); }
.ticket.apagado .sello { background: color-mix(in srgb, var(--oro-oscuro) 21%, transparent); }

/* 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 color-mix(in srgb, var(--cg-texto) 28%, transparent);
}
.ticket.apagado .bono-linea { border-top-color: var(--linea-2); }
.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: color-mix(in srgb, var(--cg-texto) 18%, transparent); font-size: 12px; flex: none;
}
.ticket.apagado .bono-hito-punto { background: color-mix(in srgb, var(--oro-oscuro) 24%, transparent); }
.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; }
.total-bono { font-size: 40px; line-height: 1; margin-top: 4px; overflow-wrap: anywhere; }
.total-bono.principal { font-size: 56px; }
.ciclo-cifras { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; align-items: flex-end; }
.ciclo-entra { font-size: 44px; line-height: 1; color: var(--oro); overflow-wrap: anywhere; }
.ciclo-sigue { font-size: 28px; line-height: 1; overflow-wrap: anywhere; }
section[data-panel="bonos"] .tarjeta-cab { flex-wrap: wrap; }

/* Podio (ENCARGO 052, maqueta «Ranking»): insignia y avatar arriba, nombre y cifra, y debajo la
   peana en tarjeta con el puesto en serif. El oro es solo del primero. */
.podio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; margin-top: 18px; max-width: 460px; margin-left: auto; margin-right: auto; }
.podio-col { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.podio-col .ins, .ins { object-fit: contain; max-width: 100%; height: auto; }
.podio-col .base {
  width: 100%;
  border-radius: var(--r) var(--r) 4px 4px;
  display: grid; place-items: center;
  font-family: var(--fuente-titulos);
  font-size: 26px;
  color: var(--texto-2);
  background: linear-gradient(180deg, var(--sup-3), var(--superficie));
  border: 1px solid color-mix(in srgb, var(--texto) 14%, transparent);
}
.podio-col.p1 .base { height: 132px; font-size: 38px; color: var(--oro-claro); background: linear-gradient(180deg, var(--sup-3), var(--superficie)); border-color: color-mix(in srgb, var(--oro-oscuro) 50%, transparent); }
.podio-col.p2 .base { height: 96px; font-size: 30px; }
.podio-col.p3 .base { height: 74px; }
.podio-col .cifra-podio { font-size: 15px; font-weight: 700; color: var(--texto); }
.podio-col.p1 .cifra-podio { font-size: 17px; color: var(--oro); }
/* T83 · C5: nombre + primer apellido ya entra casi siempre; si aun así no cabe en la columna, se
   corta con puntos suspensivos y el nombre completo queda en el `title` (hover). */
.podio-col .quien { max-width: 100%; font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podio-col .avatar { margin: 0 auto; }
.podio-col.p1 .avatar { border: 3px solid var(--oro); box-shadow: 0 0 18px color-mix(in srgb, var(--oro-oscuro) 55%, transparent); }
/* Insignia chica de la fila: al lado del avatar, sin cambiar el alto de la fila. */
.fila-rank .ins { width: 28px; height: 28px; flex: none; }

/* Podio (ENCARGO 057 A): sillar sobre verde. Tres pedestales, el del centro más alto; la cifra va
   grabada en la piedra. Los tokens del sistema de diseño (ops/SISTEMA_DISENO_COLISEO.md) no están
   en este repo todavía: se usan los colores que ya tiene la pantalla y se retoca cuando aparezcan. */
.rank-capsulas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.rank-capsulas button {
  border: 1px solid var(--linea); background: rgba(255, 255, 255, .05); color: var(--texto);
  border-radius: 999px; padding: 7px 16px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.rank-capsulas button.on { background: var(--oro); border-color: var(--oro); color: var(--oro-tinta); }
.rank-capsulas-sep { width: 1px; height: 22px; background: var(--linea); margin: 0 6px; }
.podio {
  margin-top: 18px; padding: 26px 12px 0; border-radius: var(--r-md);
  background: linear-gradient(180deg, #123d2c, #0d2d21);
  border: 1px solid rgba(255, 255, 255, .08);
  display: flex; align-items: flex-end; justify-content: center; gap: 10px;
}
.podio-col { text-align: center; width: 132px; display: flex; flex-direction: column; align-items: center; }
.podio-foto {
  width: 64px; height: 64px; border-radius: 10px; margin-bottom: 6px;
  background: linear-gradient(160deg, var(--agua), var(--agua-oscuro)); color: var(--tapete-tinta);
  display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800;
}
.podio-col.p1 .podio-foto { width: 76px; height: 76px; font-size: 36px; box-shadow: 0 0 18px rgba(212, 176, 106, .6); }
.podio-nombre { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; font-weight: 700; margin: 4px 0 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podio-nombre.yo { color: var(--oro); }
.podio-col .base {
  width: 100%; border-radius: 8px 8px 0 0; flex-direction: column; gap: 2px; padding-top: 8px;
  display: flex; align-items: center; justify-content: flex-start;
  background: linear-gradient(180deg, #d9d2c0, #b9b19b); color: #2b2a24;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35);
}
.podio-col.p1 .base { height: 120px; }
.podio-col.p2 .base { height: 92px; }
.podio-col.p3 .base { height: 72px; }
.podio-puesto { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; line-height: 1; font-weight: 700; }
.podio-cifra { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.podio-col .titulo-chip { margin: 0; font-size: 12px; }
.podio-vacio { width: 100%; text-align: center; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; font-weight: 700; padding: 6px 0 18px; }
.podio-sub { width: 100%; text-align: center; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); margin-bottom: 14px; }
.podio-fila { display: flex; align-items: flex-end; justify-content: center; gap: 10px; width: 100%; }
.podio:has(.podio-vacio) { flex-wrap: wrap; }
/* El podio del Coliseo (057) no usa el tope de 460 px del podio 052. */
.podio { max-width: none; }
.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; }
/* D28-F (ENCARGO_CASINO_025): el select ya lleva su aria-label ("Período del ranking" / "Medidor
   del ranking"), así que el rótulo visible repetía lo mismo antes del podio. Se quita solo en
   pantalla: el lector de accesibilidad sigue anunciándolo por el aria-label del <select>. */
.rank-campo label { display: none; }
.rank-campo select { width: 100%; }
.rank-comparativa { margin-top: 10px; }
/* La h2 (pintarRanking en casino.js) ya repite "RANKING · " + esta misma frase: la línea suelta
   sobraba antes del podio. El id se conserva para que casino.js le siga escribiendo el texto. */
#rankEtiqueta { display: none; }

.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: color-mix(in srgb, var(--oro-oscuro) 6%, transparent); }
.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: color-mix(in srgb, var(--oro-oscuro) 14%, transparent); border: 1px solid color-mix(in srgb, var(--oro-oscuro) 40%, transparent); color: var(--oro); }
.fila-rank.propia { background: color-mix(in srgb, var(--oro-oscuro) 20%, transparent); }

/* 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, var(--superficie-2), var(--superficie));
  border: 1px solid color-mix(in srgb, var(--oro-oscuro) 35%, transparent);
  box-shadow: inset 0 0 40px color-mix(in srgb, var(--oro-oscuro) 6%, transparent);
}
/* 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 96px;
  min-width: 0; /* D28-F: sin la regla debajo, las tres bolsas caben en una fila a 390 px */
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--tapete-fondo) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--oro-oscuro) 18%, transparent);
}
.bote-uno-cifra {
  font-family: var(--fuente-titulos);
  font-size: 26px;
  overflow-wrap: anywhere;
  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: 14px; color: var(--texto-2); min-width: 0; overflow-wrap: anywhere; }
.puesto-texto strong { color: var(--agua); font-family: var(--fuente-titulos); font-size: 24px; line-height: 1.1; }

/* 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: color-mix(in srgb, var(--verde-f) 45%, transparent); }
.salas-teaser .tarjeta-cab { gap: 10px; flex-wrap: wrap; }
.tapete-mini {
  position: relative;
  height: 118px;
  border-radius: var(--r) / var(--r);
  background: radial-gradient(ellipse at 50% 40%, var(--agua-oscuro), var(--tapete-fieltro-1) 70%);
  border: 8px solid var(--cg-bronce-osc);
  box-shadow: inset 0 0 34px color-mix(in srgb, var(--texto) 25%, transparent);
  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 var(--superficie);
  background: var(--agua);
  color: var(--oro-tinta);
}

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

.modal {
  position: fixed; inset: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--cg-verde-cab) 78%, transparent);
  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, var(--superficie-2), var(--superficie));
  border: 1px solid color-mix(in srgb, var(--oro-oscuro) 35%, transparent);
  box-shadow: 0 30px 70px color-mix(in srgb, var(--texto) 30%, transparent);
  animation: aparece .28s cubic-bezier(.22, 1, .36, 1);
  text-align: center;
}
/* ENCARGO_CASINO_017 (4): la guía de primer ingreso es un recorrido corto, no un formulario: cabe en 390px. */
.modal-caja.bienvenida {
  width: min(390px, 100%);
}
@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: color-mix(in srgb, var(--oro-oscuro) 9%, transparent);
  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;
}

#toasts {
  position: fixed;
  bottom: calc(18px + var(--alto-nav));
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 36px);
  pointer-events: none;
}
.toast {
  background: var(--superficie-2);
  border: 1px solid color-mix(in srgb, var(--oro-oscuro) 50%, transparent);
  color: var(--texto);
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  box-shadow: var(--sombra);
  animation: entratoast .3s ease;
  max-width: 100%;
  text-align: center;
  pointer-events: auto;
}
.toast[role="alert"] { border-color: color-mix(in srgb, var(--rojo) 70%, transparent); }
@keyframes entratoast { 0% { transform: translateY(16px); opacity: 0; } 100% { transform: translateY(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: color-mix(in srgb, var(--rojo) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--rojo) 50%, transparent);
  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), así que en su día el "DE LA PELEA"
     se escondía en todo el escritorio y no solo por debajo de un ancho. Con GLOBAL PARTY el
     nombre entero cabe —doce caracteres contra diecinueve— y esconder la segunda palabra dejaría
     la barra diciendo "GLOBAL" a secas, que además es como empieza Global Capital. Se queda
     entero. El `<span>` no se quita: si algún día el nombre vuelve a ser largo, el corte ya está
     hecho y basta con volver a poner el `display: none`. */
  .barra-sup .zona-marca .titulo-resto { display: inline; }
}
@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: var(--r); }
  .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 .quien { font-size: 13px; }
  .podio-col { width: 96px; }
  .podio-foto { width: 52px; height: 52px; font-size: 24px; }
  .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: color-mix(in srgb, var(--suelo) 97%, transparent);
    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: var(--r);
    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, color-mix(in srgb, var(--suelo) 0%, transparent), color-mix(in srgb, var(--suelo) 97%, transparent) 55%);
    pointer-events: none;
  }
  #nav button .ico { width: 22px; height: 22px; }
  #nav button.activo { background: color-mix(in srgb, var(--oro-oscuro) 16%, transparent); border-color: color-mix(in srgb, var(--oro-oscuro) 50%, transparent); 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 color-mix(in srgb, var(--texto) 17.5%, transparent)); }
.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: color-mix(in srgb, var(--oro-oscuro) 3%, transparent);
  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 color-mix(in srgb, var(--oro-oscuro) 18%, transparent);
  background: color-mix(in srgb, var(--oro-oscuro) 6%, transparent);
  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: color-mix(in srgb, var(--verde-f) 40%, transparent); }
.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 color-mix(in srgb, var(--oro-oscuro) 38%, transparent);
}
.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: var(--oro-tinta);
  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, var(--superficie-2), var(--superficie));
  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: color-mix(in srgb, var(--oro-oscuro) 50%, transparent); transform: translateY(-2px); }
.juego-carta.abierta { border-color: var(--oro); box-shadow: 0 0 26px color-mix(in srgb, var(--oro-oscuro) 25%, transparent); }
.juego-carta.apagada { opacity: .62; }
.juego-carta .juego-ico { font-size: 42px; line-height: 1; filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--texto) 25%, transparent)); }
.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: 12px; letter-spacing: .04em; }
.juego-carta .juego-desc { min-height: 16px; max-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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: color-mix(in srgb, var(--rojo) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--rojo) 50%, transparent);
  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: color-mix(in srgb, var(--oro-oscuro) 6%, transparent);
  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, var(--rojo), var(--lacre-f));
  border-color: color-mix(in srgb, var(--rojo) 80%, transparent);
  color: var(--oro-tinta);
  box-shadow: 0 0 24px color-mix(in srgb, var(--rojo) 45%, transparent);
  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 color-mix(in srgb, var(--rojo) 35%, transparent); }
  50% { box-shadow: 0 0 34px color-mix(in srgb, var(--rojo) 80%, transparent); }
}
.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 color-mix(in srgb, var(--verde-f) 50%, transparent);
  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: color-mix(in srgb, var(--verde-f) 12%, transparent); }
.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 color-mix(in srgb, var(--oro-oscuro) 40%, transparent);
}
.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: var(--r) var(--r) 10px 10px;
  background: linear-gradient(180deg, var(--superficie-2), var(--tapete-fondo) 70%);
  border: 2px solid var(--oro-oscuro);
  box-shadow: 0 0 34px color-mix(in srgb, var(--oro-oscuro) 18%, transparent), inset 0 -18px 30px color-mix(in srgb, var(--texto) 25%, transparent);
}
.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 color-mix(in srgb, var(--oro-oscuro) 25%, transparent);
}

/* 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 color-mix(in srgb, var(--oro-oscuro) 80%, transparent);
  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, var(--tapete-fieltro-1), var(--tapete-fondo));
  border: 2px solid var(--oro-oscuro);
  box-shadow: var(--sombra-corta), inset 0 0 40px color-mix(in srgb, var(--texto) 27.5%, transparent);
}
.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, var(--superficie), var(--tapete-fondo));
  border: 3px solid var(--oro-oscuro);
  box-shadow: inset 0 0 34px color-mix(in srgb, var(--texto) 35%, transparent), 0 0 26px color-mix(in srgb, var(--oro-oscuro) 18%, transparent);
  transition: box-shadow .3s ease;
}
.rodillos-juego.gana { box-shadow: inset 0 0 34px color-mix(in srgb, var(--texto) 25%, transparent), 0 0 46px color-mix(in srgb, var(--verde-f) 45%, transparent); }
.rodillos-juego.jackpot-gordo { animation: jackpotazo 1.2s ease-in-out 2; }
@keyframes jackpotazo {
  0%, 100% { box-shadow: inset 0 0 34px color-mix(in srgb, var(--texto) 25%, transparent), 0 0 40px color-mix(in srgb, var(--oro-oscuro) 35%, transparent); }
  50%      { box-shadow: inset 0 0 20px color-mix(in srgb, var(--texto) 15%, transparent), 0 0 90px color-mix(in srgb, var(--oro-oscuro) 90%, transparent); }
}
/* 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, color-mix(in srgb, var(--oro-oscuro) 75%, transparent), transparent);
  z-index: 2;
  pointer-events: none;
}

.rodillo {
  position: relative;
  width: var(--tm-ancho, 96px);
  height: var(--tm-ficha, 116px);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--cg-superficie-alta), var(--cg-papel-3));
  border: 2px solid var(--cg-bronce-osc);
  overflow: hidden;
  box-shadow: inset 0 -14px 22px color-mix(in srgb, var(--texto) 14%, transparent), inset 0 14px 18px color-mix(in srgb, var(--cg-superficie-alta) 50%, transparent);
}
/* 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, color-mix(in srgb, var(--tapete-fondo) 38%, transparent), transparent 32%, transparent 68%, color-mix(in srgb, var(--tapete-fondo) 38%, transparent));
}
.rodillo.gana { border-color: var(--verde); box-shadow: 0 0 26px color-mix(in srgb, var(--verde-f) 70%, transparent), inset 0 0 18px color-mix(in srgb, var(--verde-f) 30%, transparent); }
.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: var(--cg-texto);
}
.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: var(--cg-ok); text-shadow: 0 1px 0 color-mix(in srgb, var(--cg-superficie-alta) 60%, transparent); }
.tm-ficha[data-tono="powerbi"] { color: var(--cg-aviso); text-shadow: 0 1px 0 color-mix(in srgb, var(--cg-superficie-alta) 60%, transparent); }
.tm-ficha[data-tono="excel"]   { color: var(--cg-ok); text-shadow: 0 1px 0 color-mix(in srgb, var(--cg-superficie-alta) 60%, transparent); }
.tm-ficha[data-tono="python"]  { color: var(--cg-texto); text-shadow: 0 1px 0 color-mix(in srgb, var(--cg-superficie-alta) 60%, transparent); }
.tm-ficha[data-tono="notion"]  { color: var(--cg-texto); text-shadow: 0 1px 0 color-mix(in srgb, var(--cg-superficie-alta) 60%, transparent); }
.tm-ficha[data-tono="ia"]      { color: var(--cg-mal); text-shadow: 0 1px 0 color-mix(in srgb, var(--cg-superficie-alta) 60%, transparent); }
.tm-ficha[data-tono="beky"]    { color: var(--cg-bronce-osc); text-shadow: 0 1px 0 color-mix(in srgb, var(--cg-superficie-alta) 75%, transparent); }
.tm-ficha[data-tono="t1"] { color: var(--cg-mal); }
.tm-ficha[data-tono="t2"] { color: var(--cg-ok); }
.tm-ficha[data-tono="t3"] { color: var(--cg-verde); }
.tm-ficha[data-tono="t4"] { color: var(--cg-aviso); }
.tm-ficha[data-tono="t5"] { color: var(--cg-bronce-osc); }
.tm-ficha[data-tono="t6"] { color: var(--cg-texto); }

/* 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 color-mix(in srgb, var(--texto) 17.5%, transparent), 0 0 28px color-mix(in srgb, var(--oro-oscuro) 40%, transparent); }
.boton.palanca:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 color-mix(in srgb, var(--texto) 17.5%, transparent), 0 0 20px color-mix(in srgb, var(--oro-oscuro) 35%, transparent); }
.boton.verde {
  background: color-mix(in srgb, var(--verde-f) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--verde-f) 55%, transparent);
  color: var(--verde);
}
.boton.verde:hover:not(:disabled) { background: color-mix(in srgb, var(--verde-f) 24%, transparent); }
.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: var(--r);
  border: 2px solid var(--oro-oscuro);
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--tapete-fondo) 5%, transparent) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, var(--superficie-2), var(--superficie));
  box-shadow: 0 14px 26px color-mix(in srgb, var(--texto) 22.5%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--oro-oscuro) 18%, transparent);
}
.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: 12px;
  color: color-mix(in srgb, var(--oro-oscuro) 45%, transparent);
}
.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 var(--cg-bronce-osc);
  background: linear-gradient(160deg, var(--cg-superficie-alta), var(--cg-papel-3));
  color: var(--cg-texto);
  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 color-mix(in srgb, var(--oro-oscuro) 55%, transparent);
  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: var(--r);
  border: 3px solid var(--oro-oscuro);
  background:
    radial-gradient(680px 300px at 50% -12%, color-mix(in srgb, var(--verde-f) 16%, transparent), transparent 70%),
    radial-gradient(520px 260px at 50% 118%, color-mix(in srgb, var(--tapete-fondo) 38%, transparent), transparent 72%),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--oro-oscuro) 2.1%, transparent) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, var(--tapete-fieltro-1), var(--tapete-fieltro-2) 62%, var(--tapete-fieltro-3));
  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);
}
.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 var(--r) var(--r) 7px;
  background: linear-gradient(160deg, var(--tapete-fieltro-1), var(--tapete-fondo));
  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: color-mix(in srgb, var(--texto) 70%, transparent); }
.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: color-mix(in srgb, var(--tapete-fondo) 60%, transparent); }

/* 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 color-mix(in srgb, var(--texto) 25%, transparent)); }
.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: var(--r);
  background: color-mix(in srgb, var(--tapete-fondo) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--oro-oscuro) 35%, transparent);
  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: color-mix(in srgb, var(--oro-oscuro) 35%, transparent);
}

/* 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 color-mix(in srgb, var(--oro-oscuro) 45%, transparent);
  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 color-mix(in srgb, var(--verde-f) 55%, transparent);
  box-shadow: 0 6px 12px color-mix(in srgb, var(--texto) 22.5%, transparent), inset 0 0 0 4px color-mix(in srgb, var(--oro-oscuro) 7.5%, transparent);
}
.bj-mesa .ficha.activa { border-style: dashed; box-shadow: 0 0 20px color-mix(in srgb, var(--oro-oscuro) 45%, transparent), inset 0 0 0 4px color-mix(in srgb, var(--cg-superficie-alta) 22%, transparent); }
.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 color-mix(in srgb, var(--texto) 22.5%, transparent);
}
.cara.frente {
  background: linear-gradient(160deg, var(--cg-superficie-alta), var(--cg-papel-3));
  border: 1px solid var(--cg-bronce);
  color: var(--cg-texto);
}
.carta.roja .cara.frente { color: var(--cg-caida); }
/* El dorso lleva la moneda de BEKI: el naipe es de Global Party, no de una baraja cualquiera. */
.cara.dorso {
  transform: rotateY(180deg);
  background: repeating-linear-gradient(45deg, var(--sup-3) 0 6px, var(--tapete-fondo) 6px 12px);
  border: 1px solid var(--oro-oscuro);
}
.cara.dorso img { width: 34px; height: 34px; opacity: .92; filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--texto) 27.5%, transparent)); }
.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: color-mix(in srgb, var(--tapete-fondo) 60%, transparent);
  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: color-mix(in srgb, var(--verde-f) 50%, transparent); background: color-mix(in srgb, var(--verde-f) 10%, transparent); }
.bj-banner.gana .bj-banner-txt { color: var(--verde); }
.bj-banner.blackjack {
  border-color: var(--oro);
  background: radial-gradient(420px 180px at 50% 120%, color-mix(in srgb, var(--oro-oscuro) 28%, transparent), color-mix(in srgb, var(--tapete-fondo) 60%, transparent) 70%);
  box-shadow: 0 0 40px color-mix(in srgb, var(--oro-oscuro) 30%, transparent);
}
.bj-banner.blackjack .bj-banner-txt {
  font-size: 42px;
  color: var(--oro-claro);
  text-shadow: 0 0 26px color-mix(in srgb, var(--oro-oscuro) 50%, transparent);
  animation: latido 1s ease-in-out 3;
}
.bj-banner.empata .bj-banner-txt { color: var(--oro-claro); }
.bj-banner.pierde { border-color: color-mix(in srgb, var(--rojo) 28%, transparent); }
.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: color-mix(in srgb, var(--texto) 16%, transparent);
  transition: background .25s ease, box-shadow .25s ease;
}
.hilo-pips i.on { background: var(--oro); box-shadow: 0 0 8px color-mix(in srgb, var(--oro-oscuro) 70%, transparent); }
.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: color-mix(in srgb, var(--oro-oscuro) 6%, transparent);
  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: color-mix(in srgb, var(--oro-oscuro) 12%, transparent); border-color: color-mix(in srgb, var(--oro-oscuro) 45%, transparent); color: var(--oro); }
/* T71-U6: la solicitud con el visto bueno del supervisor, esperando la firma de la banca. */
.estado.visado { background: color-mix(in srgb, var(--morado) 14%, transparent); border-color: color-mix(in srgb, var(--morado) 45%, transparent); color: var(--morado); }
.estado.aceptado { background: color-mix(in srgb, var(--verde-f) 10%, transparent); border-color: color-mix(in srgb, var(--verde-f) 45%, transparent); color: var(--agua); }
.estado.resuelto { background: color-mix(in srgb, var(--verde-f) 12%, transparent); border-color: color-mix(in srgb, var(--verde-f) 45%, transparent); color: var(--verde); }
.estado.vencido { background: color-mix(in srgb, var(--rojo) 12%, transparent); border-color: color-mix(in srgb, var(--rojo) 45%, transparent); color: var(--rojo-claro); }
.estado.abierto { background: color-mix(in srgb, var(--morado) 12%, transparent); border-color: color-mix(in srgb, var(--morado) 45%, transparent); color: var(--morado); }
.estado.cancelado { background: color-mix(in srgb, var(--oro-oscuro) 9%, transparent); 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: color-mix(in srgb, var(--oro-oscuro) 6%, transparent);
  font-size: 12px;
  font-weight: 700;
}
.duelo-jugador.yo { border-color: color-mix(in srgb, var(--oro-oscuro) 55%, transparent); 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: color-mix(in srgb, var(--oro-oscuro) 4.5%, transparent);
  font-size: 13px;
  cursor: pointer;
}
.duelo-invitado.activo { border-color: color-mix(in srgb, var(--oro-oscuro) 70%, transparent); background: color-mix(in srgb, var(--oro-oscuro) 14%, transparent); 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: color-mix(in srgb, var(--oro-oscuro) 4.5%, transparent);
}
.duelo-detalle-fila.yo { border-color: color-mix(in srgb, var(--oro-oscuro) 45%, transparent); }
.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: color-mix(in srgb, var(--sup-3) 50%, transparent);
  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: var(--r) var(--r) var(--r) 4px;
  background: color-mix(in srgb, var(--oro-oscuro) 9%, transparent);
  border: 1px solid var(--linea-suave);
  min-width: 0;
}
.chat-linea.mia .chat-burbuja {
  border-radius: var(--r) var(--r) 4px var(--r);
  background: color-mix(in srgb, var(--oro-oscuro) 13%, transparent);
  border-color: color-mix(in srgb, var(--oro-oscuro) 40%, transparent);
}
.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: color-mix(in srgb, var(--oro-oscuro) 10%, transparent); border: 1px solid color-mix(in srgb, var(--oro-oscuro) 35%, transparent); }
.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 color-mix(in srgb, var(--oro-oscuro) 50%, transparent);
  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 color-mix(in srgb, var(--texto) 22.5%, transparent);
}
.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: var(--oro-tinta);
  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: var(--superficie-2);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  box-shadow: 0 18px 46px color-mix(in srgb, var(--texto) 27.5%, transparent);
  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: color-mix(in srgb, var(--oro-oscuro) 7.5%, transparent);
  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: color-mix(in srgb, var(--oro-oscuro) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--oro-oscuro) 28%, transparent);
}

.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: color-mix(in srgb, var(--oro-oscuro) 4.5%, transparent);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
}
.chat-canal:hover { border-color: var(--oro); }
.chat-canal.sin-leer { border-color: color-mix(in srgb, var(--oro-oscuro) 45%, transparent); background: color-mix(in srgb, var(--oro-oscuro) 8%, transparent); }
.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: var(--oro-tinta);
  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; }
/* D28-F (ENCARGO_CASINO_025): descripción de la temporada a un renglón, completa por title= (mismo patrón que .juego-desc / .tarea-titulo / .banco-num-ayuda / .articulo-desc / .bono-concepto / .cofre-piso-como). Texto libre de administración, sin tope de largo en la base. */
.temporada-desc { margin: -2px 0 14px; max-width: 78ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.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: color-mix(in srgb, var(--oro-oscuro) 3%, transparent);
}
.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 color-mix(in srgb, var(--oro-oscuro) 42%, transparent);
  background:
    radial-gradient(420px 220px at 8% -30%, color-mix(in srgb, var(--oro-oscuro) 22%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--oro-oscuro) 10%, transparent), color-mix(in srgb, var(--sup-3) 50%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--oro-oscuro) 12%, transparent);
}
.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%, color-mix(in srgb, var(--cg-bronce-claro) 34%, transparent), color-mix(in srgb, var(--sup-3) 70%, transparent));
  border: 2px solid color-mix(in srgb, var(--oro-oscuro) 60%, transparent);
  box-shadow: 0 0 34px color-mix(in srgb, var(--oro-oscuro) 32%, transparent);
}
.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 color-mix(in srgb, var(--oro-oscuro) 35%, transparent);
  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 color-mix(in srgb, var(--oro-oscuro) 15%, transparent);
  background: color-mix(in srgb, var(--sup-3) 38%, transparent);
}
.premio-esc.logrado { border-color: color-mix(in srgb, var(--oro-oscuro) 45%, transparent); background: color-mix(in srgb, var(--oro-oscuro) 9%, transparent); }
.premio-esc.siguiente { border-color: color-mix(in srgb, var(--agua) 50%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--agua) 16%, transparent) inset; }
.premio-esc-nivel {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font-size: 12px; font-weight: 800;
  background: color-mix(in srgb, var(--oro-oscuro) 12%, transparent); border: 1px solid color-mix(in srgb, var(--oro-oscuro) 24%, transparent);
}
.premio-esc.logrado .premio-esc-nivel { background: color-mix(in srgb, var(--oro-oscuro) 28%, transparent); border-color: color-mix(in srgb, var(--oro-oscuro) 60%, transparent); 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 color-mix(in srgb, var(--verde-f) 45%, transparent);
  background: color-mix(in srgb, var(--verde-f) 9%, transparent);
  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, color-mix(in srgb, var(--superficie) 70%, transparent), color-mix(in srgb, var(--sup-3) 80%, transparent));
  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: color-mix(in srgb, var(--verde-f) 30%, transparent); }
.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, color-mix(in srgb, var(--oro-oscuro) 20%, transparent), color-mix(in srgb, var(--sup-3) 82%, transparent));
  box-shadow: 0 0 26px color-mix(in srgb, var(--oro-oscuro) 35%, transparent), inset 0 1px 0 color-mix(in srgb, var(--oro-oscuro) 15%, transparent);
  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 color-mix(in srgb, var(--oro-oscuro) 28%, transparent), inset 0 1px 0 color-mix(in srgb, var(--oro-oscuro) 15%, transparent); }
  50%      { box-shadow: 0 0 40px color-mix(in srgb, var(--oro-oscuro) 60%, transparent), inset 0 1px 0 color-mix(in srgb, var(--oro-oscuro) 21%, transparent); }
}

/* 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: color-mix(in srgb, var(--verde-f) 8%, transparent);
}
.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, color-mix(in srgb, var(--superficie) 62%, transparent), color-mix(in srgb, var(--sup-3) 80%, transparent));
}
.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: color-mix(in srgb, var(--oro-oscuro) 50%, transparent);
  background: linear-gradient(170deg, color-mix(in srgb, var(--oro-oscuro) 14%, transparent), color-mix(in srgb, var(--sup-3) 80%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--oro-oscuro) 12%, transparent);
}
.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 color-mix(in srgb, var(--oro-oscuro) 60%, transparent);
}

@keyframes insignianueva {
  0%   { transform: scale(1); box-shadow: 0 0 0 color-mix(in srgb, var(--oro-oscuro) 0%, transparent); }
  18%  { transform: scale(1.07); box-shadow: 0 0 42px color-mix(in srgb, var(--oro-oscuro) 75%, transparent); }
  40%  { transform: scale(1); box-shadow: 0 0 26px color-mix(in srgb, var(--oro-oscuro) 50%, transparent); }
  100% { transform: scale(1); box-shadow: 0 0 0 color-mix(in srgb, var(--oro-oscuro) 0%, transparent); }
}

/* ---------- 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: var(--r);
  border: 1px solid color-mix(in srgb, var(--oro-oscuro) 28%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--oro-oscuro) 10%, transparent), color-mix(in srgb, var(--oro-oscuro) 3%, transparent));
}
.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 color-mix(in srgb, var(--oro-oscuro) 18%, transparent);
  background: color-mix(in srgb, var(--oro-oscuro) 6%, transparent);
  color: var(--texto-2);
}
.insig-chip b { color: var(--texto); font-weight: 700; }
.insig-chip.ok {
  border-color: color-mix(in srgb, var(--verde-f) 45%, transparent);
  background: color-mix(in srgb, var(--verde-f) 12%, transparent);
  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 {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  font-size: 12px; letter-spacing: .02em;
  border: 1px solid color-mix(in srgb, var(--oro-oscuro) 21%, transparent);
  background: color-mix(in srgb, var(--oro-oscuro) 6%, transparent);
  color: var(--texto-2);
}
.insig-filtros button .mini { opacity: .7; }
.insig-filtros button:hover { border-color: color-mix(in srgb, var(--cg-superficie-alta) 30%, transparent); color: var(--texto); }
.insig-filtros button.activo {
  border-color: color-mix(in srgb, var(--oro-oscuro) 55%, transparent);
  background: color-mix(in srgb, var(--oro-oscuro) 14%, transparent);
  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: color-mix(in srgb, var(--verde-f) 45%, transparent); }
.reto-aviso.pierde { border-color: color-mix(in srgb, var(--rojo) 35%, transparent); }

.reto-caja { padding: 22px 24px; }
.reto-caja.ganando { border-color: color-mix(in srgb, var(--verde-f) 50%, transparent); box-shadow: var(--sombra), 0 0 44px color-mix(in srgb, var(--verde-f) 16%, transparent); }

/* ---------- 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 color-mix(in srgb, var(--oro-oscuro) 45%, transparent);
}
.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 color-mix(in srgb, var(--oro-oscuro) 42%, transparent);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, color-mix(in srgb, var(--oro-oscuro) 10%, transparent), color-mix(in srgb, var(--sup-3) 85%, transparent));
  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: 44px; line-height: 1; overflow-wrap: anywhere; 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: color-mix(in srgb, var(--rojo) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--rojo) 40%, transparent);
  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: color-mix(in srgb, var(--verde-f) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--verde-f) 45%, transparent);
}
.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 color-mix(in srgb, var(--oro-oscuro) 55%, transparent);
  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 color-mix(in srgb, var(--oro-oscuro) 40%, transparent); }
.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: color-mix(in srgb, var(--verde-f) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--verde-f) 35%, transparent);
  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: color-mix(in srgb, var(--sup-3) 55%, transparent);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.reto-carta.ganando { border-color: color-mix(in srgb, var(--verde-f) 45%, transparent); }
.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: color-mix(in srgb, var(--oro-oscuro) 4.5%, transparent);
  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: color-mix(in srgb, var(--oro-oscuro) 75%, transparent);
  background: color-mix(in srgb, var(--oro-oscuro) 16%, transparent);
  color: var(--oro);
}
.reto-cierre {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--linea);
  background: color-mix(in srgb, var(--oro-oscuro) 4.5%, transparent);
  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: color-mix(in srgb, var(--oro-oscuro) 4.5%, transparent);
  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: color-mix(in srgb, var(--oro-oscuro) 4.5%, transparent);
  color: var(--texto-2);
  font-size: 13px;
  cursor: pointer;
}
.reto-reaccion:hover:not(:disabled) { border-color: color-mix(in srgb, var(--verde-f) 50%, transparent); }
.reto-reaccion.mia { border-color: color-mix(in srgb, var(--oro-oscuro) 70%, transparent); background: color-mix(in srgb, var(--oro-oscuro) 14%, transparent); 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: var(--r);
  border: 1px solid color-mix(in srgb, var(--oro-oscuro) 21%, transparent);
  background: color-mix(in srgb, var(--oro-oscuro) 9%, transparent);
  color: var(--texto);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.boton-campana.tiene { border-color: color-mix(in srgb, var(--oro-oscuro) 55%, transparent); background: color-mix(in srgb, var(--oro-oscuro) 12%, transparent); 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: var(--oro-tinta);
  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: var(--superficie-2);
  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: var(--r);
  color: var(--texto);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.noti:hover { background: color-mix(in srgb, var(--verde-f) 10%, transparent); }
.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 color-mix(in srgb, var(--oro-oscuro) 35%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--oro-oscuro) 6%, transparent);
  padding: 12px 14px;
}
.banco-num { font-family: var(--fuente-titulos); font-size: 30px; letter-spacing: .06em; color: var(--oro); line-height: 1.1; }
/* D28-F (ENCARGO_CASINO_025): texto de ayuda a un renglón, completo por title= (mismo patrón que .juego-desc / .tarea-titulo). */
.banco-num-ayuda { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* D28-F (ENCARGO_CASINO_025): concepto de cada bono a un renglón, completo por title= (mismo patrón que .juego-desc / .tarea-titulo / .banco-num-ayuda / .articulo-desc). Puede llegar largo: "<campaña>: <meta> → <premio>". */
.bono-concepto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* D28-F (ENCARGO_CASINO_025): descripción de la campaña en la Ruta (kicker de la tarjeta y detalle del anillo de meta) a un renglón, completa por title= (mismo patrón que .juego-desc / .tarea-titulo / .banco-num-ayuda / .articulo-desc / .bono-concepto). Texto libre de administración (campanas.descripcion, hasta 400 caracteres). */
.campana-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* D28-F (ENCARGO_CASINO_025): precio especial de recuperación en Mi área (Cobranza) a un renglón, completo por title= (mismo patrón que .campana-desc). Texto libre de José (ajustes.recuperacion.politica_precio, hasta 600 caracteres). */
.area-politica-precio { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.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: color-mix(in srgb, var(--sup-3) 55%, transparent);
  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: color-mix(in srgb, var(--oro-oscuro) 45%, transparent); }
.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 {
  display: inline-flex; align-items: center; min-height: 44px;
  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: color-mix(in srgb, var(--oro-oscuro) 60%, transparent); background: color-mix(in srgb, var(--oro-oscuro) 12%, transparent); 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 color-mix(in srgb, var(--oro-oscuro) 7.5%, transparent); 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: color-mix(in srgb, var(--sup-3) 55%, transparent);
  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: color-mix(in srgb, var(--oro-oscuro) 45%, transparent); }
.boveda-cifra.oro .cifra { color: var(--oro); }
.boveda-cifra.verde { border-color: color-mix(in srgb, var(--verde-f) 35%, transparent); }
.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: color-mix(in srgb, var(--sup-3) 55%, transparent);
  color: var(--texto);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.boveda-plazo:hover { border-color: color-mix(in srgb, var(--verde-f) 50%, transparent); }
.boveda-plazo.activo {
  border-color: var(--oro);
  background: color-mix(in srgb, var(--oro-oscuro) 12%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--oro-oscuro) 22%, transparent);
}
.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 color-mix(in srgb, var(--verde-f) 35%, transparent);
  background: color-mix(in srgb, var(--verde-f) 8%, transparent);
  font-size: 13px;
  line-height: 1.45;
  color: var(--texto);
}

.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: color-mix(in srgb, var(--oro-oscuro) 4.5%, transparent);
}
.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 color-mix(in srgb, var(--oro-oscuro) 45%, transparent);
  background: color-mix(in srgb, var(--oro-oscuro) 8%, transparent);
}
.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: color-mix(in srgb, var(--sup-3) 55%, transparent);
}
.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: color-mix(in srgb, var(--oro-oscuro) 4.5%, transparent);
}
.liq-aviso {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--oro-oscuro) 45%, transparent);
  background: color-mix(in srgb, var(--oro-oscuro) 8%, transparent);
  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: color-mix(in srgb, var(--oro-oscuro) 4.5%, transparent);
  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: color-mix(in srgb, var(--oro-oscuro) 4.5%, transparent);
  font-size: 13px;
}
.pfin-cuota.pagada { border-color: color-mix(in srgb, var(--verde-f) 30%, transparent); }
.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 color-mix(in srgb, var(--rojo) 45%, transparent);
  background: color-mix(in srgb, var(--rojo) 10%, transparent);
  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: color-mix(in srgb, var(--oro-oscuro) 12%, transparent); border-color: color-mix(in srgb, var(--oro-oscuro) 45%, transparent); color: var(--oro); }
.estado.aprobada, .estado.completado { background: color-mix(in srgb, var(--verde-f) 12%, transparent); border-color: color-mix(in srgb, var(--verde-f) 45%, transparent); color: var(--verde); }
.estado.pagada { background: color-mix(in srgb, var(--verde-f) 10%, transparent); border-color: color-mix(in srgb, var(--verde-f) 45%, transparent); color: var(--agua); }
.estado.rechazada, .estado.anulada, .estado.cancelado { background: color-mix(in srgb, var(--rojo) 12%, transparent); border-color: color-mix(in srgb, var(--rojo) 45%, transparent); color: var(--rojo-claro); }
.estado.retirado { background: color-mix(in srgb, var(--oro-oscuro) 9%, transparent); border-color: color-mix(in srgb, var(--oro-oscuro) 24%, transparent); 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: var(--r);
  border: 3px solid var(--oro-oscuro);
  background:
    radial-gradient(680px 300px at 50% -12%, color-mix(in srgb, var(--verde-f) 16%, transparent), transparent 70%),
    radial-gradient(520px 260px at 50% 118%, color-mix(in srgb, var(--tapete-fondo) 38%, transparent), transparent 72%),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--oro-oscuro) 2.1%, transparent) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, var(--tapete-fieltro-1), var(--tapete-fieltro-2) 62%, var(--tapete-fieltro-3));
  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 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 var(--r) var(--r);
  background: linear-gradient(160deg, var(--tapete-fieltro-1), var(--tapete-fondo));
  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: color-mix(in srgb, var(--texto) 55%, transparent); }
.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: var(--r);
  background: linear-gradient(155deg, var(--cg-superficie-alta), var(--cg-papel-3) 68%, var(--cg-bronce));
  border: 1px solid color-mix(in srgb, var(--tapete-fondo) 25%, transparent);
  box-shadow: 0 10px 18px color-mix(in srgb, var(--texto) 22.5%, transparent), inset 0 -6px 12px color-mix(in srgb, var(--texto) 8%, transparent), inset 0 4px 8px color-mix(in srgb, var(--cg-superficie-alta) 60%, transparent);
}
.dado i { border-radius: 50%; background: transparent; }
.dado i.on { background: radial-gradient(circle at 34% 30%, var(--cg-texto-2), var(--cg-texto) 72%); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--cg-superficie-alta) 35%, transparent); }

/* 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: var(--r);
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid transparent;
}
.dados-banner-t { font-weight: 700; }
.dados-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); }
.dados-banner.consuelo { 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 tirada que no paga NO se pinta de rojo: no es un error ni una derrota, es la siguiente tirada. */
.dados-banner.casa { background: color-mix(in srgb, var(--oro-oscuro) 7.5%, transparent); border-color: color-mix(in srgb, var(--oro-oscuro) 21%, transparent); 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: var(--r);
  cursor: pointer;
  color: var(--texto);
  background: color-mix(in srgb, var(--tapete-fondo) 22%, transparent);
  border: 2px solid color-mix(in srgb, var(--texto) 16%, transparent);
  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: color-mix(in srgb, var(--oro-oscuro) 16%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro-oscuro) 12%, transparent); }
.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: var(--r);
  cursor: pointer;
  color: var(--texto);
  background: color-mix(in srgb, var(--tapete-fondo) 22%, transparent);
  border: 2px solid color-mix(in srgb, var(--texto) 14%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.dados-suma span { font-size: 12px; color: var(--oro); }
.dados-suma.activa { border-color: var(--oro); background: color-mix(in srgb, var(--oro-oscuro) 16%, transparent); }
.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: var(--r);
  border: 3px solid var(--oro-oscuro);
  background:
    radial-gradient(620px 280px at 50% -10%, color-mix(in srgb, var(--verde-f) 14%, transparent), transparent 70%),
    linear-gradient(180deg, var(--tapete-fieltro-1), var(--tapete-fondo) 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);
}

.coh-cielo {
  position: relative;
  width: min(100%, 520px);
  height: 240px;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
  background: linear-gradient(180deg, var(--tapete-fondo) 0%, var(--tapete-fieltro-2) 55%, var(--tapete-fieltro-1) 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: color-mix(in srgb, var(--texto) 80%, transparent); }
.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 color-mix(in srgb, var(--oro-oscuro) 65%, transparent); }
.coh-marca span {
  position: absolute;
  right: 8px;
  top: -9px;
  font-size: 12px;
  padding: 1px 7px;
  border-radius: 8px;
  color: var(--oro);
  background: color-mix(in srgb, var(--tapete-fondo) 55%, transparent);
}

.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, var(--oro-claro), color-mix(in srgb, var(--rojo) 10%, transparent));
  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 color-mix(in srgb, var(--texto) 30%, transparent); }
.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: var(--r);
  cursor: pointer;
  color: var(--texto);
  background: color-mix(in srgb, var(--tapete-fondo) 22%, transparent);
  border: 2px solid color-mix(in srgb, var(--texto) 16%, transparent);
  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: 12px; color: var(--texto-2); }
.coh-obj.activa { border-color: var(--oro); background: color-mix(in srgb, var(--oro-oscuro) 16%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro-oscuro) 12%, transparent); }
.coh-obj.activa span { color: var(--oro); }

.coh-banner {
  width: min(100%, 460px);
  text-align: center;
  padding: 10px 14px;
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid transparent;
}
.coh-banner-t { font-weight: 700; }
.coh-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); }
.coh-banner.consuelo { background: color-mix(in srgb, var(--verde-f) 10%, transparent); border-color: color-mix(in srgb, var(--verde-f) 40%, transparent); 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: color-mix(in srgb, var(--oro-oscuro) 7.5%, transparent); border-color: color-mix(in srgb, var(--oro-oscuro) 21%, transparent); 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: 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);
}

.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: var(--r);
  cursor: pointer;
  color: var(--texto);
  background: linear-gradient(180deg, color-mix(in srgb, var(--texto) 12%, transparent), color-mix(in srgb, var(--tapete-fondo) 28%, transparent));
  border: 2px solid color-mix(in srgb, var(--texto) 16%, transparent);
  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: color-mix(in srgb, var(--verde-f) 14%, transparent); border-color: color-mix(in srgb, var(--verde-f) 45%, transparent); }
.min-casilla.mina { background: color-mix(in srgb, var(--oro-oscuro) 9%, transparent); border-color: color-mix(in srgb, var(--oro-oscuro) 27%, transparent); }
/* 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 color-mix(in srgb, var(--oro-oscuro) 18%, transparent); }
.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: color-mix(in srgb, var(--tapete-fondo) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
}
.min-paso b { font-size: 12px; color: var(--oro); }
.min-paso span { font-size: 12px; color: var(--texto-2); }
.min-paso.pasada { opacity: .45; }
.min-paso.activa { border-color: var(--oro); background: color-mix(in srgb, var(--oro-oscuro) 16%, transparent); }

.min-banner {
  width: min(100%, 460px);
  text-align: center;
  padding: 10px 14px;
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid transparent;
}
.min-banner-t { font-weight: 700; }
.min-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); }
/* El tablero que termina en mina NO se pinta de rojo: no es una derrota, es el siguiente tablero. */
.min-banner.casa { background: color-mix(in srgb, var(--oro-oscuro) 7.5%, transparent); border-color: color-mix(in srgb, var(--oro-oscuro) 21%, transparent); 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: var(--r); }
  .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: var(--r);
  border: 3px solid var(--oro-oscuro);
  background:
    radial-gradient(620px 300px at 50% -10%, color-mix(in srgb, var(--oro-oscuro) 14%, transparent), transparent 70%),
    linear-gradient(180deg, var(--tapete-fieltro-1), var(--tapete-fieltro-2) 62%, var(--tapete-fondo));
  box-shadow: inset 0 0 70px color-mix(in srgb, var(--texto) 27.5%, transparent), 0 18px 34px color-mix(in srgb, var(--texto) 20%, transparent);
}

.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%, var(--tapete-fieltro-2), var(--tapete-fondo) 74%);
  box-shadow: inset 0 0 30px color-mix(in srgb, var(--texto) 35%, transparent), 0 10px 26px color-mix(in srgb, var(--texto) 25%, transparent);
  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: 12px;
  line-height: 1;
  font-weight: 700;
  padding: 3px 4px;
  border-radius: 5px;
  color: var(--cg-superficie-alta);
}
.rul-sector.rojo b { background: var(--cg-caida); }
.rul-sector.negro b { background: var(--tapete-fondo); }
/* 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: var(--tapete-tinta); }
.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%, color-mix(in srgb, var(--oro-oscuro) 55%, transparent), color-mix(in srgb, var(--tapete-fondo) 85%, transparent) 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 color-mix(in srgb, var(--texto) 30%, transparent));
  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: var(--cg-superficie-alta);
  border: 1px solid color-mix(in srgb, var(--texto) 18%, transparent);
  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: var(--cg-caida); }
.rul-num.negro { background: var(--tapete-fondo); }
.rul-num.casa { background: linear-gradient(180deg, var(--oro-oscuro), var(--cg-bronce-osc)); color: var(--tapete-tinta); min-height: 34px; }
.rul-fuera {
  background: color-mix(in srgb, var(--tapete-fondo) 30%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 12px;
}
.rul-fuera i { font-style: normal; font-size: 12px; 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: var(--r);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  color: var(--tapete-tinta);
  background: var(--oro);
  border: 2px solid var(--cg-superficie-alta);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--texto) 25%, transparent);
}

.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: var(--r);
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid transparent;
}
.rul-banner-t { font-weight: 700; }
.rul-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); }
.rul-banner.consuelo { background: color-mix(in srgb, var(--verde-f) 10%, transparent); border-color: color-mix(in srgb, var(--verde-f) 40%, transparent); 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: color-mix(in srgb, var(--oro-oscuro) 7.5%, transparent); border-color: color-mix(in srgb, var(--oro-oscuro) 21%, transparent); 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; }
  /* Las apuestas de fuera (docenas, pares) también son .rul-fila: sin esto heredaban las 12 columnas y se aplastaban. */
  .rul-docenas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rul-pares { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rul-fuera[data-tipo="columna"] { font-size: 7px; overflow: hidden; }   /* «columna» no cabe en 34 px a 10 px */
  .rul-fuera[data-tipo="columna"] i { font-size: 9px; }
  .rul-num, .rul-fuera { font-size: 10px; padding: 5px 0; border-radius: 6px; }
  .rul-fuera i { font-size: 12px; }
  .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); }
  .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: 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);
}

.pk-tablero {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 13 / 11;
  border-radius: var(--r) var(--r) 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tapete-fondo) 30%, transparent), color-mix(in srgb, var(--tapete-fondo) 12%, transparent));
  border: 1px solid color-mix(in srgb, var(--texto) 10%, transparent);
  border-bottom: 0;
  overflow: hidden;
}
.pk-clavija {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--texto) 55%, transparent);
  box-shadow: 0 0 4px color-mix(in srgb, var(--texto) 25%, transparent);
}
.pk-ficha {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--cg-bronce-claro), var(--oro) 55%, var(--oro-oscuro));
  box-shadow: 0 0 10px color-mix(in srgb, var(--oro-oscuro) 55%, transparent);
  /* 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;
  /* 081 · M-07: la cifra de cada boca es EL dato de la mesa: 12 px como mínimo (antes 10 px, y 8 px en celular). */
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  padding: 7px 0;
  border-radius: 0 0 8px 8px;
  color: var(--tapete-tinta);
  border: 1px solid color-mix(in srgb, var(--tapete-fondo) 25%, transparent);
  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, var(--cg-bronce-claro), var(--oro-oscuro)); }
.pk-canaleta.media { background: linear-gradient(180deg, var(--cg-verde-dato), var(--cg-ok)); color: var(--tapete-tinta); }
.pk-canaleta.baja { background: linear-gradient(180deg, color-mix(in srgb, var(--texto) 34%, transparent), color-mix(in srgb, var(--texto) 18%, transparent)); color: var(--texto); }
.pk-canaleta.activa { transform: translateY(3px); box-shadow: 0 0 0 2px var(--oro), 0 6px 14px color-mix(in srgb, var(--texto) 22.5%, transparent); }

.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: color-mix(in srgb, var(--tapete-fondo) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--texto) 10%, transparent);
}
.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: 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); }
/* 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: color-mix(in srgb, var(--verde-f) 10%, transparent); border-color: color-mix(in srgb, var(--verde-f) 40%, transparent); color: var(--agua); }

@media (prefers-reduced-motion: reduce) { .pk-ficha { transition: none; } }
@media (max-width: 620px) {
  /* 081 · M-07: con trece bocas de ~24 px, «×0,9» no cabe en un renglón a 12 px: el «×» sube a su propio renglón y la cifra queda entera. */
  .pk-canaletas { gap: 1px; }
  .pk-canaleta { font-size: 12px; padding: 4px 0 5px; letter-spacing: -.5px; font-variant-numeric: normal; border-left-width: 0; border-right-width: 0; }
  .pk-canaleta .pk-x, .pk-canaleta .pk-n { display: block; }
  .pk-canaleta .pk-x { line-height: 1; opacity: .8; }
  .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: 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);
}

.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: var(--r);
  border: 1px solid color-mix(in srgb, var(--texto) 10%, transparent);
  background: color-mix(in srgb, var(--tapete-fondo) 26%, transparent);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.cy-carril:hover { background: color-mix(in srgb, var(--tapete-fondo) 34%, transparent); }
.cy-carril.elegido { border-color: var(--oro); background: color-mix(in srgb, var(--oro-oscuro) 12%, transparent); }

.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: 12px; }

.cy-pista {
  position: relative;
  height: 30px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--texto) 5%, transparent) 0 22px, transparent 22px 44px),
    linear-gradient(180deg, color-mix(in srgb, var(--oro-oscuro) 7.5%, transparent), color-mix(in srgb, var(--tapete-fondo) 18%, transparent));
  border: 1px solid color-mix(in srgb, var(--texto) 7%, transparent);
  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, var(--tapete-fondo) 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: 12px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--cy-color, var(--oro));
  color: var(--tapete-tinta);
  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 color-mix(in srgb, var(--texto) 22.5%, transparent); }

.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: color-mix(in srgb, var(--tapete-fondo) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--texto) 10%, transparent);
}
.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: var(--r);
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid transparent;
}
.cy-banner-t { font-weight: 700; }
.cy-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); }
/* El segundo puesto devuelve el 30 %: es un consuelo, no una derrota, y no se pinta de rojo. */
.cy-banner.consuelo { background: color-mix(in srgb, var(--verde-f) 10%, transparent); border-color: color-mix(in srgb, var(--verde-f) 40%, transparent); 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: color-mix(in srgb, var(--texto) 6%, transparent); border-color: color-mix(in srgb, var(--texto) 18%, transparent); 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: 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; }
}

/* 049 · Tu rango de carrera: la insignia del asset (SVG) a la izquierda, los datos a la derecha; la chica va junto al nombre en el ranking. */
.rango-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.rango-insignia { width: 84px; height: 84px; flex: none; }
.rango-datos { min-width: 0; }
.rango-nombre { font-family: var(--fuente-titulos); font-size: 22px; font-weight: 800; color: var(--oro); overflow-wrap: anywhere; }
.rango-mini { width: 22px; height: 22px; vertical-align: middle; margin-left: 4px; flex: none; }
.chip-usuario .chip-nivel .rango-mini { width: 16px; height: 16px; margin: 0 2px 0 0; }
#cajaRango .mini { margin-top: 6px; }
#cajaRango .rango-escudo-btn { margin-left: 6px; }

/* ---- 053 · Logros y perfil de carrera (pc-*). Mismos tokens que el resto de la app: nada de colores nuevos. */
.pc-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pc-filtro { border: 1px solid var(--borde, color-mix(in srgb, var(--texto) 14%, transparent)); background: transparent; color: inherit; border-radius: 999px; padding: 6px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.pc-filtro.on { background: var(--oro); color: var(--oro-tinta); border-color: var(--oro); }
.pc-muro { display: flex; flex-direction: column; gap: 14px; }
.pc-tarjeta { display: flex; flex-direction: column; gap: 10px; }
.pc-tarjeta.pc-rango, .pc-tarjeta.pc-fila { flex-direction: row; align-items: center; gap: 14px; }
.pc-cuerpo { flex: 1; min-width: 0; }
.pc-titulo { font-weight: 800; margin: 4px 0 2px; }
.pc-cita { font-size: 1.1rem; line-height: 1.4; margin: 0; }
.pc-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pc-enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--oro); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.pc-aplauso { border: 1px solid var(--oro); background: transparent; color: var(--oro); border-radius: 999px; padding: 6px 14px; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pc-aplauso.on { background: var(--oro); color: var(--oro-tinta); }
.pc-medalla { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--oro); color: var(--oro); flex: none; }
.pc-medalla .ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pc-logro.bloq .pc-medalla { border-color: color-mix(in srgb, var(--texto) 20%, transparent); color: color-mix(in srgb, var(--texto) 40%, transparent); }
.pc-portada { padding: 12px 0; }
.pc-cabecera { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-bottom: 18px; }
.pc-insignia { object-fit: contain; }
.pc-nombre { margin: 4px 0 0; font-size: 1.7rem; }
.pc-rango { margin: 4px 0 0; font-weight: 700; letter-spacing: .04em; color: var(--oro); }
.pc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.pc-kpi { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--texto) 14%, transparent); }
.pc-kpi b { font-size: 1.3rem; }
.pc-kpi span { font-size: .8rem; opacity: .7; }
.pc-bloque { margin-bottom: 16px; }
.pc-bloque h3 { margin: 0 0 10px; }
.pc-barras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
.pc-barra { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.pc-barra i { width: 100%; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--oro-claro), var(--oro-oscuro)); }
.pc-barra span { font-size: .8rem; opacity: .7; }
.pc-lista > div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--texto) 8%, transparent); }
.pc-vitrina { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; text-align: center; }
.pc-logro { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; }
.pc-logro small { display: block; font-weight: 500; opacity: .7; }
.pc-linea { display: flex; flex-direction: column; }
.pc-hito { display: flex; gap: 12px; padding-bottom: 14px; }
.pc-hito p { margin: 0; font-weight: 700; }
.pc-hito small { opacity: .7; }
.pc-punto { width: 12px; height: 12px; border-radius: 50%; background: var(--oro); margin-top: 5px; flex: none; }
.pc-punto.gerencia { background: var(--verde-f); }
.pc-punto.logro { background: var(--tenue); }
[data-perfil][role="button"] { cursor: pointer; }

/* ===================================================================   v2 «Noche de sillar» (ENCARGO 052, punto 3) — componentes de la maqueta gp2.css.
   Clases nuevas y aditivas: las pantallas de 049/053 y las que se rediseñan después las usan
   sin tocar lo existente. Tarjeta = `.vidrio.tarjeta`; con `.oro` para rango, meta y dinero.
   ========================================================================== */
.serif { font-family: var(--fuente-titulos); letter-spacing: .02em; }
.ceja { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); font-weight: 700; }
.ceja.oro { color: var(--oro); }
.pos { color: var(--verde); }
.neg { color: var(--rojo); }
.vidrio.oro, .tarjeta.oro { border-color: color-mix(in srgb, var(--oro-oscuro) 38%, transparent); background: linear-gradient(160deg, var(--superficie-2) 0%, var(--superficie) 55%, var(--sup-3) 100%); }
.sep { height: 1px; background: var(--linea); margin: 12px 0; }

/* Chips: oro, verde, ámbar, lacre, neutro */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em; border: 1px solid var(--linea-2); color: var(--texto-2); background: transparent; }
.chip.oro { color: var(--oro-claro); border-color: color-mix(in srgb, var(--oro-oscuro) 45%, transparent); background: var(--oro-a); }
.chip.verde { color: var(--verde); border-color: color-mix(in srgb, var(--verde-f) 40%, transparent); background: var(--verde-a); }
.chip.lacre { color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 40%, transparent); background: var(--lacre-a); }
.chip.ambar { color: var(--ambar); border-color: color-mix(in srgb, var(--ambar) 40%, transparent); background: var(--ambar-a); }

/* Barra de avance y los 10 peldaños */
.avance { height: 8px; border-radius: 999px; background: var(--sup-3); overflow: hidden; }
.avance > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--oro-oscuro), var(--oro-claro)); }
.avance.verde > span { background: linear-gradient(90deg, var(--verde-f), var(--verde)); }
.peldanos { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.peldanos i { height: 8px; border-radius: 3px; background: var(--sup-3); }
.peldanos i.ok { background: var(--oro); }
.peldanos i.ya { background: var(--oro-oscuro); }

/* Indicadores */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r); padding: 12px; }
.kpi .v { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums lining-nums; }
.kpi .t { font-size: 12px; color: var(--tenue); margin-top: 2px; line-height: 1.35; }

/* Listas */
.lista-gp { display: flex; flex-direction: column; }
.lista-gp > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--linea); }
.lista-gp > div:last-child { border-bottom: 0; }

/* Medallas de logro */
.medalla { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, var(--superficie-2), var(--sup-3) 70%); border: 1.5px solid var(--oro); color: var(--oro); box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--oro-oscuro) 12%, transparent); }
.medalla.bloq { border-color: var(--linea-2); color: var(--tenue); background: var(--superficie); box-shadow: none; opacity: .7; }
.medalla.verde { border-color: var(--verde); color: var(--verde); background: radial-gradient(circle at 35% 30%, var(--superficie-2), var(--sup-3) 70%); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   v2 «Noche de sillar» (ENCARGO 052, puntos 4-5) — cabecera con marca, barra inferior de 5,
   Inicio, «Mi mes» y «Logros».
   ========================================================================== */
.marca-gp {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--fuente-titulos); font-weight: 700; font-size: 15px; letter-spacing: .04em;
  color: var(--oro-tinta);
  background: linear-gradient(160deg, var(--oro-claro), var(--oro) 55%, var(--oro-oscuro));
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--oro-oscuro) 45%, transparent), 0 0 18px color-mix(in srgb, var(--oro-oscuro) 25%, transparent);
}
.zona-marca .marca-gp { width: 40px; height: 40px; }

.saludo-inicio { padding: 2px 2px 0; }
.saludo-inicio h2 { margin: 4px 0 0; font-size: 28px; line-height: 1.1; color: var(--texto); }
.vacio-vitrina { display: flex; align-items: center; gap: 16px; }
.vacio-vitrina p { margin: 0; }

.mes-atajos { display: flex; flex-direction: column; gap: 18px; }
.mes-grupo { display: flex; flex-direction: column; gap: 10px; }
.mes-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.mes-ficha {
  position: relative; min-height: 76px; padding: 10px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 13px; font-weight: 600; text-align: center;
  color: var(--texto-2); background: var(--superficie-2);
  border: 1px solid var(--linea); border-radius: var(--r-s, 12px); cursor: pointer;
}
.mes-ficha[hidden] { display: none; }
.mes-ficha .ico { width: 24px; height: 24px; color: var(--oro); }
.mes-ficha:hover { border-color: color-mix(in srgb, var(--oro-oscuro) 45%, transparent); color: var(--texto); }
.mes-ficha:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 2px; }
.mes-ficha .globo { position: absolute; top: 6px; right: 8px; }

/* La barra de 5 es solo de teléfono; en escritorio manda la barra de arriba. */
.nav-inferior { display: none; }
@media (max-width: 860px) {
  #nav { display: none; }
  .nav-inferior {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--suelo) 97%, transparent); border-top: 1px solid var(--linea);
    backdrop-filter: blur(10px);
  }
  .nav-inferior button {
    position: relative; min-height: 56px; padding: 6px 2px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .02em;
    color: var(--tenue); background: none; border: 1px solid transparent; border-radius: var(--r); cursor: pointer;
  }
  .nav-inferior button .ico { width: 22px; height: 22px; }
  .nav-inferior button.activo { color: var(--oro); background: color-mix(in srgb, var(--oro-oscuro) 10%, transparent); border-color: color-mix(in srgb, var(--oro-oscuro) 28%, transparent); }
  .nav-inferior button:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 2px; }
  .nav-inferior .globo { position: absolute; top: 4px; right: 14%; }
  .saludo-inicio h2 { font-size: 24px; }
}

/* ==========================================================================
   v2 «Noche de sillar» (ENCARGO 052, pantallas existentes) — Salas: lobby como la maqueta `Salas`.
   Solo estilo: los ids, data-juego y data-sala no cambian.
   ========================================================================== */
section[data-panel="salas"] .salas-cabecera { border-color: color-mix(in srgb, var(--oro-oscuro) 38%, transparent); background: linear-gradient(160deg, var(--superficie-2) 0%, var(--superficie) 55%, var(--sup-3) 100%); border-radius: var(--r); }
section[data-panel="salas"] .tarjeta-cab h2 { font-family: var(--fuente-titulos); font-weight: 600; letter-spacing: .06em; }
.salas-cuenta { background: var(--superficie); border-radius: var(--r-s); }
.salas-cuenta span { font-weight: 600; }

/* Pestañas internas: chips de 44 px, activa en oro lleno. */
.salas-tabs { gap: 8px; }
.salas-tabs button { min-height: 44px; padding: 0 18px; border-color: var(--linea-2); background: transparent; font-weight: 700; }
.salas-tabs button:hover { border-color: color-mix(in srgb, var(--oro-oscuro) 45%, transparent); }
.salas-tabs button.activo { background: var(--oro); border-color: var(--oro); color: var(--oro-tinta); box-shadow: none; }
.salas-tabs button:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 2px; }

/* Cartas de juego: icono en caja dorada, nombre en Cinzel, "Jugar" como chip. */
.juegos-rejilla { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.juego-carta { gap: 10px; padding: 16px; min-height: 168px; border-radius: var(--r); border-color: var(--linea-2); background: linear-gradient(170deg, var(--superficie-2) 0%, var(--suelo-2) 100%); }
.juego-carta:hover { transform: none; border-color: color-mix(in srgb, var(--oro-oscuro) 50%, transparent); }
.juego-carta.abierta { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro); }
.juego-carta.apagada { opacity: .55; }
.juego-carta .juego-ico { width: 52px; height: 52px; display: grid; place-items: center; font-size: 26px; border-radius: var(--r); background: var(--oro-a); border: 1px solid color-mix(in srgb, var(--oro-oscuro) 35%, transparent); filter: none; }
.juego-carta .juego-nombre { font-family: var(--fuente-titulos); font-weight: 600; font-size: 16px; letter-spacing: .02em; overflow-wrap: anywhere; }
.juego-chips .pastilla { background: transparent; border-color: var(--linea-2); color: var(--texto-2); }
.juego-chips .pastilla.oro { background: var(--oro-a); border-color: color-mix(in srgb, var(--oro-oscuro) 45%, transparent); color: var(--oro-claro); }
.juego-chips .pastilla.verde { background: var(--verde-a); border-color: color-mix(in srgb, var(--verde-f) 40%, transparent); color: var(--verde); }
.juego-carta .juego-desc { color: var(--tenue); }
.juego-carta .boton { min-height: 44px; white-space: normal; line-height: 1.2; }

@media (max-width: 860px) {
  .juegos-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .juego-carta { padding: 14px; }
}
@media (max-width: 340px) {
  .juegos-rejilla { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   ENCARGO 052 · Ruleta y Cofres con el sistema «Noche de sillar» (solo CSS: ids y clases intactos)
   ========================================================================== */

/* Ruleta: botón de girar sobrio (oro lleno, Cinzel, 44 px+), aguja en lacre y fieltro verde sillar. */
.boton-girar { font-size: 24px; font-weight: 700; padding: 12px 36px; min-height: 52px; background: var(--oro); box-shadow: 0 8px 20px color-mix(in srgb, var(--texto) 22.5%, transparent); }
.boton-girar:hover:not(:disabled) { box-shadow: 0 0 0 2px var(--oro-claro), 0 10px 22px color-mix(in srgb, var(--texto) 25%, transparent); }
.boton-girar:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 3px; }
.aguja { border-top-color: var(--rojo); }
.rueda-caja canvas { filter: drop-shadow(0 14px 22px color-mix(in srgb, var(--texto) 27.5%, transparent)); }
.rul-pano {
  border-radius: var(--r);
  border-width: 2px;
  background: radial-gradient(620px 300px at 50% -10%, var(--oro-a), transparent 70%), linear-gradient(180deg, var(--superficie-2), var(--tapete-fieltro-2) 62%, var(--tapete-fondo));
}
.rul-rueda { background: radial-gradient(circle at 50% 50%, var(--sup-3), var(--tapete-fondo) 74%); border-width: 4px; }
.ruleta-rejilla .lista-simple > div { padding: 11px 0; }
.ruleta-rejilla .lista-simple b { font-variant-numeric: tabular-nums; }

/* Cofres: cartas como las de las salas (borde fino, metal en el borde, icono en caja dorada). */
.cofres-rejilla { gap: 12px; }
.cofre-carta {
  border-radius: var(--r);
  border: 1px solid var(--linea-2);
  background: linear-gradient(170deg, var(--superficie-2) 0%, var(--suelo-2) 100%);
  box-shadow: none;
}
.cofre-carta.bronce { border-color: var(--bronce); box-shadow: none; }
.cofre-carta.plata  { border-color: var(--plata);  box-shadow: none; }
.cofre-carta.oro    { border-color: var(--oro);    box-shadow: 0 0 0 1px var(--oro); }
.cofre-carta.regalo { box-shadow: none; }
.cofre-carta .icono { width: 72px; height: 72px; margin: 0 auto 6px; display: grid; place-items: center; font-size: 40px; border-radius: var(--r); background: var(--oro-a); border: 1px solid color-mix(in srgb, var(--oro-oscuro) 35%, transparent); filter: none; }
.cofre-carta .precio { font-weight: 600; font-variant-numeric: tabular-nums; }
.cofre-carta .boton { min-height: 44px; width: 100%; }
.tabla-rareza div { border-bottom-color: var(--linea); font-variant-numeric: tabular-nums; }
.cofre-piso { background: color-mix(in srgb, var(--verde-f) 8%, transparent); border-color: color-mix(in srgb, var(--verde-f) 30%, transparent); border-radius: var(--r-s); }
.cofre-extra { background: var(--superficie-2); border-radius: var(--r-s); }
.cofre-fila { background: var(--superficie-2); border-color: var(--linea-2); border-radius: var(--r-s); min-height: 56px; }
.cosmetico { min-height: 44px; background: var(--superficie-2); border-color: var(--linea-2); border-radius: var(--r-s); }
.cosmetico:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 2px; }
.cosmetico.puesto { box-shadow: 0 0 0 1px var(--oro); }
.barra-fina { height: 8px; background: var(--linea); }
.barra-fina i { background: linear-gradient(90deg, var(--agua-oscuro), var(--oro)); }
@media (max-width: 860px) {
  .cofres-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cofre-carta { padding: 14px; }
}
@media (max-width: 340px) { .cofres-rejilla { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .cofre-anim.temblor, .cofre-anim.estalla, .aguja.golpe { animation: none !important; }
}

/* ---- 052 · Extraordinarios como la maqueta Retos: «Lo próximo» en tarjeta oro y familias en filas con cuadro de id. ---- */
#cajaExtra .llam-barras { margin-top: 12px; }
.xtr-proximo { padding: 14px 16px; border-radius: var(--r-s); border: 1px solid color-mix(in srgb, var(--oro-oscuro) 38%, transparent); background: linear-gradient(160deg, var(--superficie-2) 0%, var(--superficie) 55%, var(--sup-3) 100%); }
.xtr-proximo-t { margin: 8px 0 0; font-weight: 800; font-size: 15px; line-height: 1.35; color: var(--texto); }
.xtr-fam { margin-top: 10px; border-top: 1px solid var(--linea-suave); }
.xtr-fam > summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--fuente-titulos); font-size: 18px; font-weight: 600; letter-spacing: .03em; color: var(--texto); }
.xtr-fam > summary::-webkit-details-marker { display: none; }
.xtr-fam > summary::after { content: '+'; font-family: var(--fuente); font-weight: 700; color: var(--oro); font-size: 20px; }
.xtr-fam[open] > summary::after { content: '–'; }
.xtr-fila { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--linea-suave); }
.xtr-fila:last-child { border-bottom: 0; }
.xtr-fila b { font-size: 14px; }
.xtr-fila p { margin: 2px 0 0; font-size: 12px; color: var(--tenue); line-height: 1.35; }
.xtr-id { width: 44px; height: 44px; border-radius: var(--r); display: grid; place-items: center; font-weight: 800; font-size: 12px;
  background: var(--superficie-2); color: var(--tenue); border: 1px solid color-mix(in srgb, var(--texto) 14%, transparent); }
.xtr-id.ganado { background: color-mix(in srgb, var(--oro-oscuro) 12%, transparent); color: var(--oro-claro); border-color: color-mix(in srgb, var(--oro-oscuro) 35%, transparent); }
.xtr-v { font-weight: 800; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.xtr-v small { display: block; font-size: 12px; font-weight: 700; color: var(--oro); margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .xtr-fam > summary { transition: none; } }

/* ==========================================================================
   ENCARGO 052 · Retos de meta (cuotas y apoyos) con el sistema «Noche de sillar».
   Solo CSS: ids, clases y textos del servidor intactos. Quita el teal viejo (10,26,32) y sube los
   controles táctiles a 44 px, como pide la maqueta.
   ========================================================================== */
.reto-caja { padding: 22px 24px; border-radius: var(--r); }
.reto-caja .k { font-family: var(--fuente-titulos); letter-spacing: .06em; }
.reto-cuota {
  border-color: color-mix(in srgb, var(--oro-oscuro) 38%, transparent);
  background: linear-gradient(160deg, var(--superficie-2) 0%, var(--superficie) 55%, var(--sup-3) 100%);
  border-radius: var(--r-s);
}
.reto-mult.chico { font-size: 28px; }
.reto-prob { color: var(--verde); }
.reto-motivo { background: var(--lacre-a); border-color: color-mix(in srgb, var(--rojo) 40%, transparent); color: var(--rojo); }
.reto-cartel { background: var(--verde-a); border-color: color-mix(in srgb, var(--verde-f) 40%, transparent); border-radius: var(--r-s); }
.reto-cartel-titulo { font-family: var(--fuente-titulos); letter-spacing: .04em; }
.reto-frase { border-left-color: var(--oro-oscuro); }
.reto-marcador .num { text-shadow: none; }
.reto-cuenta .cuenta-atras.agotada { color: var(--rojo); }
.reto-comentario-x:hover { color: var(--rojo); }

/* Controles: pastillas de opción, atajos, stepper, campos de apoyo y comentario a 44 px. */
.reto-opcion, .reto-atajos .boton { min-height: 44px; padding-left: 14px; padding-right: 14px; font-size: 13px; }
.reto-opcion.activa { border-color: var(--oro); background: var(--oro-a); color: var(--oro-claro); }
.reto-stepper > .boton { min-width: 44px; min-height: 44px; }
.reto-apoyo-input, .reto-comentar-txt { min-height: 44px; }
.reto-apoyo-btn, .reto-comentar-btn { min-height: 44px; }
.reto-reaccion { min-height: 44px; padding: 6px 14px; background: var(--superficie-2); }
.reto-reaccion.mia { border-color: var(--oro); background: var(--oro-a); color: var(--oro-claro); }
.reto-comentario-x { min-width: 44px; min-height: 44px; }

/* Cartas del equipo: superficie de la maqueta, la que va ganando se enciende en verde sillar. */
.reto-carta {
  background: var(--superficie);
  border-color: var(--linea-2);
  border-radius: var(--r-s);
}
.reto-carta.ganando { border-color: color-mix(in srgb, var(--verde-f) 50%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--verde-f) 10%, transparent), var(--superficie) 60%); }
.reto-nombre { font-size: 15px; }
.reto-apoyo-chip { background: var(--verde-a); border-color: color-mix(in srgb, var(--verde-f) 35%, transparent); color: var(--texto-2); }
.reto-cerrado { background: var(--superficie); border-color: var(--linea); border-radius: var(--r-s); }
.reto-fila { border-radius: var(--r-s); }
.reto-pos { color: var(--oro); }
.reto-cierre { background: var(--superficie-2); border-color: var(--linea-2); border-radius: var(--r-s); }

@media (max-width: 600px) {
  .reto-caja { padding: 18px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .reto-cuota { transition: none; }
}

/* ==========================================================================
   Billetera, tienda y liquidaciones con el sistema «Noche de sillar» (ENCARGO 052).
   Solo estilo: ids, clases de JS y textos del servidor no cambian. Va al final para ganar
   sobre las reglas viejas sin reordenarlas.
   ========================================================================== */

/* Los tres saldos: tarjeta de superficie, el disponible se enciende como tarjeta oro. */
.saldo-caja { background: var(--superficie-2); border-color: var(--linea); border-radius: var(--r-s); }
.saldo-caja.disponible {
  border-color: color-mix(in srgb, var(--oro-oscuro) 45%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--oro-oscuro) 14%, transparent), var(--superficie-2) 70%);
}
.saldo-caja.reserva .cifra { color: var(--ambar); }
@media (max-width: 600px) {
  .saldos { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* Historial: filas en la superficie nueva, cifra con números tabulares. */
.movimiento { background: var(--superficie-2); border-color: var(--linea); border-radius: var(--r-s); }
.movimiento .monto.menos { color: var(--rojo); }

/* Canjear: la cifra en dólares manda, campos y botón a 44 px. */
#formCanje input { min-height: 44px; }
#btnCanjear { min-height: 48px; }

/* Liquidación: caja abierta como tarjeta oro, totales en superficie, avisos con tokens. */
.liq-abierta {
  border-radius: var(--r-s);
  border-color: color-mix(in srgb, var(--oro-oscuro) 45%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--oro-oscuro) 14%, transparent), var(--superficie-2) 70%);
}
.liq-total { background: var(--suelo-2); border-color: var(--linea); border-radius: var(--r-s); }
.liq-desglose .menos b, .liq-total .menos b { color: var(--rojo); }
.liq-linea { background: var(--superficie-2); border-color: var(--linea); border-radius: var(--r-s); }
.liq-aviso { background: var(--ambar-a); border-color: color-mix(in srgb, var(--ambar) 45%, transparent); border-radius: var(--r-s); }

/* Tienda: artículo en superficie (sin el degradado teal), precio en oro, buscador de 44 px. */
.articulo {
  background: var(--superficie);
  border-color: var(--linea);
  border-radius: var(--r-s);
}
.articulo:hover { border-color: color-mix(in srgb, var(--oro-oscuro) 50%, transparent); }
.articulo .acciones .boton, .articulo > .boton { min-height: 44px; }
.tienda-buscador input {
  min-height: 44px;
  background: var(--superficie-2);
  border-radius: var(--r-s);
}
.tienda-buscador input:focus { border-color: var(--oro); outline: 2px solid color-mix(in srgb, var(--oro-oscuro) 35%, transparent); outline-offset: 1px; }
.cat-chip { background: var(--superficie-2); }
.cat-chip.activo { background: var(--oro-a); color: var(--oro-claro); }
.fin-plan > div, .fin-paso { background: var(--superficie-2); border-radius: var(--r-s); }
.fin-cuota { background: linear-gradient(160deg, color-mix(in srgb, var(--oro-oscuro) 14%, transparent), var(--superficie-2) 70%); border-radius: var(--r-s); }
.fin-motivos li { color: var(--rojo); }
@media (max-width: 600px) {
  .articulos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .articulo { padding: 14px; }
}
@media (max-width: 380px) {
  .articulos { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .articulo { transition: none; }
  .articulo:hover { transform: none; }
}

/* ==========================================================================
   Temporada, pase e insignias, duelos, misiones, tareas y eventos con el sistema
   «Noche de sillar» (ENCARGO 052, pantallas existentes 6/9). Solo estilo: ids y textos intactos.
   ========================================================================== */

/* Temporada: el premio final es tarjeta oro; la fila que sigue se marca en verde sillar. */
.temporada-premio {
  border-color: color-mix(in srgb, var(--oro-oscuro) 45%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--oro-oscuro) 14%, transparent), var(--superficie-2) 70%);
  box-shadow: none;
}
.temporada-premio-ico {
  background: var(--oro-a);
  border: 1px solid color-mix(in srgb, var(--oro-oscuro) 50%, transparent);
  box-shadow: none;
}
.temporada-premio-nombre { font-family: var(--fuente-titulos); text-shadow: none; }
.temporada-vacia { background: var(--superficie); border-radius: var(--r-s); }
.premio-esc { background: var(--superficie-2); border-color: var(--linea); }
.premio-esc.siguiente { border-color: color-mix(in srgb, var(--verde-f) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--verde-f) 18%, transparent) inset; }

/* Pase: nodos en superficie, el que se puede reclamar en oro sin resplandor pulsante, botón de 44 px. */
.pase-regla { background: var(--verde-a); }
.pase-nodo { background: var(--superficie); border-radius: var(--r-s); }
.pase-nodo.listo {
  background: linear-gradient(160deg, color-mix(in srgb, var(--oro-oscuro) 16%, transparent), var(--superficie-2) 70%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--oro-oscuro) 35%, transparent) inset;
  animation: none;
}
.pase-boton { min-height: 44px; }
.pase-marca { background: var(--verde-a); border-radius: var(--r-s); }

/* Insignias de temporada: superficie nueva; la ganada es tarjeta oro. */
.insignia { background: var(--superficie); border-radius: var(--r-s); }
.insignia.ganada { background: linear-gradient(160deg, color-mix(in srgb, var(--oro-oscuro) 14%, transparent), var(--superficie-2) 70%); box-shadow: none; }
.insignia-sello { box-shadow: none; }

/* Duelos: filas en superficie, estados con la paleta (propuesto oro, abierto/visado ámbar, resuelto verde, vencido lacre). */
.duelo-fila, .duelo-detalle-fila { background: var(--superficie); border-color: var(--linea); border-radius: var(--r-s); }
.duelo-vs { color: var(--rojo); font-family: var(--fuente-titulos); }
.estado.visado, .estado.abierto { background: var(--ambar-a); border-color: color-mix(in srgb, var(--ambar) 45%, transparent); color: var(--ambar); }
.duelo-jugador, .duelo-invitado { background: var(--superficie-2); }
.duelo-invitado { min-height: 44px; }
.duelo-invitado.activo { background: var(--oro-a); }
.duelo-form .boton { min-height: 44px; }

/* Misiones y tareas del día: filas en superficie, marca de cumplida en verde sillar con texto oscuro legible. */
.mision, .tarea-fila { background: var(--superficie); border-color: var(--linea); border-radius: var(--r-s); }
.mision.cumplida, .tarea-fila.hecha { background: var(--verde-a); border-color: color-mix(in srgb, var(--verde-f) 40%, transparent); }
.mision.cumplida .marca { color: var(--suelo); }
.tarea-accion { min-height: 44px; }
.tareas-barra { background: var(--superficie-2); }
.tareas-barra i { background: linear-gradient(90deg, var(--agua-oscuro), var(--verde)); }

/* Racha: la llama en oro tenue, sin resplandor. */
.llama { background: radial-gradient(circle at 50% 65%, var(--oro-a), transparent 72%); }
.llama .emoji { filter: none; }
.llama .dias { border-color: var(--suelo); }

/* Eventos (hora feliz, cierre relámpago, flash): banda en tarjeta oro, sin el borde que corre. */
.banda-evento {
  padding: 1px;
  background: color-mix(in srgb, var(--oro-oscuro) 45%, transparent);
  animation: none;
  box-shadow: none;
}
.banda-evento-cuerpo {
  background: linear-gradient(160deg, color-mix(in srgb, var(--oro-oscuro) 12%, transparent), var(--superficie-2) 70%);
  border-radius: calc(var(--r-lg) - 1px);
}
.multiplicador { text-shadow: none; }
.cuenta-atras { color: var(--oro-claro); }
@media (prefers-reduced-motion: reduce) {
  .multiplicador, .llama .emoji, .pase-nodo.listo, .insignia.nueva { animation: none; }
}

/* ==========================================================================
   052 · Noche de sillar — bandeja de avisos, feed del equipo, modales y toasts
   ========================================================================== */

/* Campanita: botón de 44 px (UX), activa en oro, globo en lacre con texto claro. */
.boton-campana { width: 44px; height: 44px; border-radius: var(--r-s); background: var(--superficie); border-color: var(--linea-2); }
.boton-campana.tiene { background: var(--oro-a); border-color: color-mix(in srgb, var(--oro-oscuro) 55%, transparent); }
.boton-campana .globo { background: var(--lacre-f); color: var(--texto); }

/* Bandeja: superficie de la paleta, cada aviso en fila de 44 px mínimo. */
.bandeja { background: var(--superficie-2); border-color: var(--linea-2); border-radius: var(--r); }
.bandeja-cab { border-bottom-color: var(--linea); }
.noti { min-height: 44px; border-radius: var(--r-s); }
.noti:hover, .noti:focus-visible { background: var(--oro-a); }
.noti.leida { opacity: .7; }
.noti-titulo { color: var(--texto); }
.noti-texto { color: var(--texto-2); }
.noti-punto { background: var(--oro); }

/* Feed del equipo: filas en superficie; la venta, en tarjeta oro con borde izquierdo (sin el tañido de sombra). */
.feed-fila { background: var(--superficie); border-color: var(--linea); border-radius: var(--r-s); }
.feed-fila.mia { background: var(--oro-a); border-color: color-mix(in srgb, var(--oro-oscuro) 40%, transparent); }
.feed-fila.campana {
  background: linear-gradient(90deg, var(--oro-a), var(--superficie) 60%);
  border-color: color-mix(in srgb, var(--oro-oscuro) 50%, transparent);
}
.feed-fila b { color: var(--texto); }
.feed-fila .hora { color: var(--tenue); }
.sello-yo { background: var(--oro); color: var(--oro-tinta); }

/* Modales: velo de la paleta y caja en superficie con filo dorado, sin el degradado teal. */
.modal { background: color-mix(in srgb, var(--cg-verde-cab) 82%, transparent); }
.modal-caja {
  background: linear-gradient(160deg, var(--superficie-2), var(--superficie));
  border-color: color-mix(in srgb, var(--oro-oscuro) 40%, transparent);
  border-radius: var(--r);
}
.modal-caja h3 { font-weight: 600; color: var(--oro-claro); }
.modal-cerrar { background: var(--superficie); border-color: var(--linea-2); }
.modal-cerrar:hover { background: var(--sup-3); }
.premio-grande { font-weight: 700; }

/* Toasts: píldora en superficie con filo oro; el aviso de error en lacre. */
.toast { background: var(--superficie-2); border-color: color-mix(in srgb, var(--oro-oscuro) 50%, transparent); color: var(--texto); }
.toast[role="alert"] { background: var(--lacre-a); border-color: color-mix(in srgb, var(--rojo) 70%, transparent); }

/* Flotantes (cifras que suben): oro sobrio, sin el halo grande. */
.flotante { text-shadow: 0 4px 16px color-mix(in srgb, var(--texto) 30%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .modal-caja, .toast, .feed-fila.nueva { animation: none; }
  .capa-confeti, .capa-flotantes { display: none; }
}

/* ==========================================================================
   Bóveda, bonos, campañas y Ruta, y premios en cuotas con el sistema «Noche de sillar»
   (ENCARGO 052). Solo estilo: ids, clases de JS y textos del servidor no cambian. Va al final
   para ganar sobre las reglas viejas sin reordenarlas.
   ========================================================================== */

/* Ruta y campañas: nodos con tokens nuevos (fuera los azules petróleo), tooltip en superficie. */
.nodo.hecho { box-shadow: 0 0 0 4px var(--suelo-2), 0 0 18px color-mix(in srgb, var(--oro-oscuro) 45%, transparent); }
.nodo.prov { background: var(--superficie-2); box-shadow: 0 0 14px color-mix(in srgb, var(--verde-f) 30%, transparent); }
.nodo.bloq { background: var(--suelo-2); }
.nodo-col.bloqueada .objetivo, .nodo-col.bloqueada .umbral { color: var(--tenue); }
.nodo-col .premio { background: var(--oro-a); border-color: var(--oro-oscuro); color: var(--oro-claro); }
.nodo-col.proxima .premio { background: color-mix(in srgb, var(--verde-f) 12%, transparent); border-color: var(--agua-oscuro); color: var(--agua); }
.nodo-col.bloqueada .premio { background: var(--suelo-2); }
.nodo-col .tip { background: var(--superficie-2); border-radius: var(--r-s); }
.riel-lleno { box-shadow: none; }
.marcador .globo-valor { color: var(--oro-tinta); border: 2px solid var(--oro-claro); box-shadow: none; }
.campana-mapa.compacta { padding: 18px; }
.chip-esc { background: var(--superficie-2); border-radius: var(--r-s); }
.chip-esc.bloqueada .chip-meta, .chip-esc.bloqueada .chip-premio { color: var(--tenue); }

/* Bonos: el ticket pasa de degradado dorado a tarjeta oro sobria; apagado en superficie. */
.ticket {
  background: linear-gradient(160deg, color-mix(in srgb, var(--oro-oscuro) 16%, transparent), var(--superficie-2) 70%);
  border: 1px solid color-mix(in srgb, var(--oro-oscuro) 45%, transparent);
  border-radius: var(--r-s);
  color: var(--texto);
  box-shadow: none;
}
.ticket::before, .ticket::after { background: var(--suelo); border: 1px solid color-mix(in srgb, var(--oro-oscuro) 45%, transparent); }
.ticket .valor { color: var(--oro); }
.ticket .sello { background: var(--oro-a); color: var(--oro-claro); }
.ticket.apagado { background: var(--superficie); border-color: var(--linea); color: var(--texto-2); }
.ticket.apagado .valor { color: var(--texto-2); }
.ticket.apagado::before, .ticket.apagado::after { border-color: var(--linea); }
.bono-linea { border-top-color: var(--linea); }
.bono-hito-punto { background: var(--oro-a); color: var(--oro-claro); }
.bono-hito.hecho .bono-hito-punto { background: color-mix(in srgb, var(--verde-f) 18%, transparent); color: var(--verde); }
.bono-hito-tit { color: var(--texto); }
.total-bono.principal { color: var(--oro); }

/* Bóveda: cifras y plazos en superficie, plazo activo como tarjeta oro, plazos de 44 px. */
.boveda-cifra, .boveda-plazo { background: var(--superficie-2); border-radius: var(--r-s); }
.boveda-plazo { min-height: 44px; }
.boveda-plazo.activo {
  background: linear-gradient(160deg, color-mix(in srgb, var(--oro-oscuro) 16%, transparent), var(--superficie-2) 70%);
  box-shadow: none;
}
.boveda-regla { background: color-mix(in srgb, var(--verde-f) 8%, transparent); border-radius: var(--r-s); }
.boveda-dep { background: var(--superficie-2); border-color: var(--linea); border-radius: var(--r-s); }
@media (max-width: 480px) {
  .boveda-plazos, .boveda-cifras { grid-template-columns: minmax(0, 1fr); }
}

/* Premios en cuotas (Cachea): datos y cuotas en superficie, el aviso de salida en lacre. */
.pfin-datos > div, .pfin-cuota { background: var(--superficie-2); border-color: var(--linea); border-radius: var(--r-s); }
.pfin-cuota.pagada { border-color: color-mix(in srgb, var(--verde-f) 35%, transparent); }
.pfin-aviso { background: var(--lacre-a); border-color: color-mix(in srgb, var(--rojo) 45%, transparent); border-radius: var(--r-s); }
@media (max-width: 600px) {
  .pfin-fila, .pfin-datos { grid-template-columns: minmax(0, 1fr); }
  .pfin-cuota { grid-template-columns: 36px 1fr auto; }
}
@media (prefers-reduced-motion: reduce) {
  .riel-lleno, .riel-prov, .marcador, .nodo-col .tip { transition: none; }
}

/* «Mi área» (Óscar, María, José Luis): cifras en tarjeta oro, filas y metas en superficie, controles de 44 px,
   tramos de cobranza como botones, aviso en verde sillar. Solo estilos: ids y textos del servidor intactos. */
.area-cab { border-color: color-mix(in srgb, var(--oro-oscuro) 38%, transparent); background: linear-gradient(160deg, var(--superficie-2) 0%, var(--superficie) 55%, var(--sup-3) 100%); }
.area-aviso { background: color-mix(in srgb, var(--verde-f) 8%, transparent); border: 1px solid color-mix(in srgb, var(--verde-f) 30%, transparent); border-radius: var(--r-s); color: var(--texto-2); font-size: 13px; }
.area-cifra, .area-fila, .area-meta, .area-check, .pin-punto, .cobrar-tarjeta { background: var(--superficie-2); border: 1px solid var(--linea); border-radius: var(--r-s); }
.area-cifra .num { font-family: var(--fuente-titulos); font-variant-numeric: tabular-nums; color: var(--texto); }
.area-total.ojo { color: var(--ambar); }
.area-form input, .area-motivo, .cobrar-filtros input[type=search], .cobrar-filtros select {
  min-height: 44px; background: var(--suelo-2); border: 1px solid var(--linea); border-radius: var(--r-s);
  padding: 8px 12px; color: var(--texto); font-size: 14px;
}
.area-form .boton, .area-bloque .boton, .area-lista .boton { min-height: 44px; }
.area-barra { background: var(--sup-3); }
.area-barra i { background: linear-gradient(90deg, var(--agua-oscuro), var(--oro)); }
.area-check { min-height: 44px; }
.area-check.hecha { opacity: .65; }
.area-check input { width: 22px; height: 22px; accent-color: var(--oro); }
.cobrar-tramo { min-height: 44px; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: var(--r-s); color: var(--texto); }
.cobrar-tramo.activo { background: var(--oro-a); border-color: var(--oro-oscuro); color: var(--oro-claro); }
.cobrar-tramo:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 2px; }
.cobrar-tabla-wrap { border: 1px solid var(--linea); border-radius: var(--r-s); background: var(--superficie); }
.cobrar-tabla th { color: var(--tenue); border-bottom: 1px solid var(--linea); }
.cobrar-tabla td { border-bottom-color: var(--linea); font-variant-numeric: tabular-nums; }
.cobrar-tarjeta .num { font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .area-fila { flex-wrap: wrap; }
  .area-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 054 · La cara del asesor (foto en círculo con aro dorado; sin foto, iniciales sobre verde), el certificado en el perfil y el muro. */
.cara-asesor { width: var(--cara, 56px); height: var(--cara, 56px); border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--oro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro-oscuro) 18%, transparent); }
.cara-asesor.sin { display: grid; place-items: center; background: linear-gradient(145deg, var(--agua-oscuro), var(--agua)); color: var(--oro-tinta); font-weight: 700; letter-spacing: .04em; font-size: calc(var(--cara, 56px) * .36); }
.pc-caras { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 8px; }
.pc-cara-rango { display: flex; align-items: center; gap: 8px; flex: none; }
.pc-cert-mini { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--oro-oscuro) 45%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--oro-oscuro) 10%, transparent), color-mix(in srgb, var(--oro-oscuro) 3%, transparent)); }
.pc-cert-mini div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-cert-mini small { opacity: .7; }
.pc-cert-ins { object-fit: contain; flex: none; }
.pc-cert-botones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.pc-cert-botones a, .pc-cert-fila a { text-decoration: none; }
.pc-foto-botones { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.pc-nombre-fila { display: flex; gap: 8px; margin-top: 6px; }
.pc-nombre-fila input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--texto) 25%, transparent); background: rgba(0,0,0,.25); color: inherit; font: inherit; }
.pc-cert-ant { margin: 16px 0 6px; font-size: .85rem; opacity: .75; }
.pc-cert-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid color-mix(in srgb, var(--texto) 10%, transparent); font-size: .85rem; }
.rango-cab { flex-wrap: wrap; }
.rango-cab #rangoCara { flex: none; line-height: 0; }

/* ==========================================================================
   054C · «Perfil del miembro» (prefijo pm-). Mismas formas de la maqueta ops/maquetas/054C: menos cajas, hilos de oro,
   Cinzel en rótulos con espaciado ancho, Cormorant itálica en nombres y cifras, Manrope en el texto.
   ========================================================================== */
.pm { margin: -24px calc(-1 * var(--pad-app)) 0; }
.pm svg { stroke-linecap: round; stroke-linejoin: round; }
.pm-sec { padding: 34px 22px 0; position: relative; }
.pm-titulo-sec { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pm-titulo-sec h3 { margin: 0; font: 600 11px var(--fuente-titulos); letter-spacing: .32em; color: var(--oro); text-transform: uppercase; white-space: nowrap; }
.pm-titulo-sec::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--hilo), transparent); }
.pm-titulo-sec .lado { font-size: 12px; color: var(--tenue); white-space: nowrap; order: 3; }

.pm-heroe { position: relative; padding: 30px 22px 30px; text-align: center; overflow: hidden; }
.pm-heroe::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 330px;
  background: url(/assets/fondos/misti-yanahuara-1400.jpg) 62% 32% / auto 150% no-repeat;
  filter: grayscale(.4) sepia(.3) brightness(.7) contrast(1.08); }
.pm-heroe::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 332px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tapete-fondo) 55%, transparent) 0%, color-mix(in srgb, var(--tapete-fondo) 25%, transparent) 30%, color-mix(in srgb, var(--tapete-fondo) 78%, transparent) 72%, var(--suelo) 100%),
              radial-gradient(70% 55% at 50% 52%, color-mix(in srgb, var(--oro-oscuro) 18%, transparent), transparent 70%); }
.pm-heroe > * { position: relative; z-index: 1; }
.pm-volver { position: absolute; left: 16px; top: 14px; z-index: 2; width: 36px; height: 36px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--tapete-fondo) 45%, transparent); border: 1px solid color-mix(in srgb, var(--texto) 18%, transparent); backdrop-filter: blur(8px); color: var(--texto); }
.pm-volver svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pm-marca-sup { font: 600 9.5px var(--fuente-titulos); letter-spacing: .4em; color: color-mix(in srgb, var(--texto) 75%, transparent); margin-top: 6px; }
.pm-retrato { position: relative; width: 132px; height: 132px; margin: 40px auto 0; }
.pm-retrato .aro { position: absolute; inset: -9px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--cg-bronce-claro) 28%, transparent); }
.pm-retrato .aro::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--cg-bronce-claro) 10%, transparent); }
.pm-retrato .cara { position: absolute; inset: 0; border-radius: 50%; padding: 3px; background: conic-gradient(from 200deg, var(--cg-bronce-claro), var(--cg-bronce), var(--cg-bronce-claro), var(--cg-bronce-osc), var(--cg-bronce-claro)); box-shadow: 0 18px 40px color-mix(in srgb, var(--texto) 30%, transparent), 0 0 40px color-mix(in srgb, var(--oro-oscuro) 18%, transparent); }
.pm-foto { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.pm-monograma { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--tapete-fieltro-1) 0%, var(--tapete-fieltro-2) 55%, var(--tapete-fieltro-3) 100%);
  font: italic 500 50px/1 var(--serif); color: var(--oro-claro); letter-spacing: .02em; text-shadow: 0 2px 10px color-mix(in srgb, var(--texto) 25%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texto) 20%, transparent), inset 0 6px 20px color-mix(in srgb, var(--texto) 17.5%, transparent); }
.pm-retrato .medalla { position: absolute; right: -30px; bottom: -22px; width: 82px; height: 82px; object-fit: contain; filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--texto) 30%, transparent)); }
.pm-retrato .camara { position: absolute; left: -4px; bottom: 4px; width: 34px; height: 34px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--superficie-2); border: 1px solid var(--hilo-2); color: var(--oro-claro); box-shadow: 0 4px 12px color-mix(in srgb, var(--texto) 25%, transparent); }
.pm-retrato .camara svg, .pm-boton-fino svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.pm-retrato .camara svg { width: 15px; height: 15px; }
.pm-miembro { margin-top: 30px; font: 600 9.5px var(--fuente-titulos); letter-spacing: .38em; color: var(--oro); }
.pm-nombre { margin: 10px 0 0; font: italic 500 38px/1.05 var(--serif); color: var(--texto); letter-spacing: -.005em; overflow-wrap: anywhere; }
.pm-grado { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.pm-grado::before, .pm-grado::after { content: ''; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--oro)); }
.pm-grado::after { transform: scaleX(-1); }
.pm-grado b { font: 600 13px var(--fuente-titulos); letter-spacing: .3em; background: var(--oro-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pm-grado span { font: 500 10px var(--fuente-titulos); letter-spacing: .24em; color: var(--tenue); }
.pm-meta { margin-top: 12px; font-size: 12px; color: var(--texto-2); letter-spacing: .02em; }
.pm-meta i { font-style: normal; color: var(--oro-oscuro); margin: 0 8px; }
.pm-acciones { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pm-boton-fino { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--hilo); color: var(--oro-claro); cursor: pointer;
  font: 600 10px var(--fuente-titulos); letter-spacing: .2em; text-transform: uppercase; background: color-mix(in srgb, var(--oro-oscuro) 4%, transparent); }
.pm-boton-fino svg { width: 13px; height: 13px; }

.pm-credencial { position: relative; aspect-ratio: 1.586; border-radius: var(--r); padding: 20px 22px; overflow: hidden; isolation: isolate;
  background: radial-gradient(130% 100% at 100% 0%, color-mix(in srgb, var(--oro-oscuro) 20%, transparent), transparent 52%), radial-gradient(90% 80% at 0% 100%, color-mix(in srgb, var(--verde-f) 10%, transparent), transparent 60%), linear-gradient(155deg, var(--tapete-fieltro-1) 0%, var(--tapete-fieltro-2) 48%, var(--tapete-fieltro-3) 100%);
  box-shadow: 0 34px 60px -12px color-mix(in srgb, var(--texto) 37.5%, transparent), 0 0 0 1px color-mix(in srgb, var(--cg-bronce-claro) 30%, transparent), inset 0 1px 0 color-mix(in srgb, var(--oro-oscuro) 15%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--texto) 30%, transparent); }
.pm-credencial::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: url(/assets/guilloche.svg) 118% 46% / 330px no-repeat, repeating-linear-gradient(90deg, color-mix(in srgb, var(--oro-oscuro) 2.4%, transparent) 0 1px, transparent 1px 3px); opacity: .2; }
.pm-credencial::after { content: ''; position: absolute; inset: -40%; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, color-mix(in srgb, var(--cg-superficie-alta) 13%, transparent) 49%, color-mix(in srgb, var(--cg-superficie-alta) 4%, transparent) 53%, transparent 58%);
  animation: pm-brillo 6.5s ease-in-out 1.2s infinite; transform: translateX(-60%); }
@keyframes pm-brillo { 0% { transform: translateX(-60%); } 38%, 100% { transform: translateX(60%); } }
@media (prefers-reduced-motion: reduce) { .pm-credencial::after { animation: none; display: none; } }
.pm-credencial .arriba { display: flex; justify-content: space-between; align-items: flex-start; }
.pm-credencial .club b { display: block; font: 700 11.5px var(--fuente-titulos); letter-spacing: .34em; color: var(--oro-claro); }
.pm-credencial .club span { display: block; font: 600 7.5px var(--fuente-titulos); letter-spacing: .36em; color: var(--tenue); margin-top: 5px; }
.pm-credencial .chip { width: 38px; height: 29px; border-radius: 6px; position: relative; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texto) 12.5%, transparent);
  background-image: linear-gradient(90deg, transparent 32%, color-mix(in srgb, var(--tapete-fondo) 22%, transparent) 32% 34%, transparent 34% 66%, color-mix(in srgb, var(--tapete-fondo) 22%, transparent) 66% 68%, transparent 68%), linear-gradient(0deg, transparent 46%, color-mix(in srgb, var(--tapete-fondo) 22%, transparent) 46% 54%, transparent 54%), var(--oro-grad); }
.pm-credencial .insignia-cred { position: absolute; right: 14px; top: 50%; transform: translateY(-46%); width: 104px; filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--texto) 30%, transparent)); z-index: 1; }
.pm-credencial .grado { position: absolute; left: 22px; top: 50%; transform: translateY(-38%); }
.pm-credencial .grado b { display: block; font: 600 27px/1 var(--fuente-titulos); letter-spacing: .12em; background: var(--oro-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--texto) 30%, transparent)); }
.pm-credencial .grado span { display: block; margin-top: 7px; font: 600 8.5px var(--fuente-titulos); letter-spacing: .32em; color: var(--texto-2); }
.pm-credencial .abajo { position: absolute; left: 22px; right: 22px; bottom: 18px; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.pm-credencial .rot { font: 600 6.5px var(--fuente-titulos); letter-spacing: .34em; color: var(--tenue); display: block; margin-bottom: 4px; }
.pm-credencial .titular { font: 600 11px var(--fuente); letter-spacing: .16em; text-transform: uppercase; color: var(--texto); }
.pm-credencial .numero { font: 600 10.5px var(--fuente); letter-spacing: .14em; color: var(--oro-claro); font-variant-numeric: tabular-nums; text-align: right; }
.pm-bajo-cred { display: flex; gap: 10px; margin-top: 18px; }
.pm-btn { flex: 1; display: inline-flex; justify-content: center; align-items: center; gap: 9px; height: 46px; border-radius: var(--r); font: 700 13px var(--fuente); letter-spacing: .02em; text-decoration: none; }
.pm-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pm-btn.oro { background: var(--oro-grad); color: var(--oro-tinta); box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--oro-oscuro) 55%, transparent), inset 0 1px 0 color-mix(in srgb, var(--cg-superficie-alta) 45%, transparent); }
.pm-btn.linea { border: 1px solid var(--hilo-2); color: var(--oro-claro); background: color-mix(in srgb, var(--oro-oscuro) 4%, transparent); }

.pm-escalera { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; padding-top: 8px; }
.pm-escalera::before { content: ''; position: absolute; left: 8.33%; right: 8.33%; top: 46px; height: 1px; background: var(--linea-2); }
.pm-escalera::after { content: ''; position: absolute; left: 8.33%; width: var(--tramo, 0%); top: 46px; height: 1px; background: linear-gradient(90deg, var(--oro-oscuro), var(--oro-claro)); box-shadow: 0 0 8px color-mix(in srgb, var(--oro-oscuro) 60%, transparent); }
.pm-peldano { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pm-peldano img { width: 44px; height: 44px; object-fit: contain; margin-bottom: 4px; }
.pm-peldano.falta img { filter: grayscale(1) brightness(.55); opacity: .55; }
.pm-peldano.aqui img { width: 66px; height: 66px; margin-bottom: -6px; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--oro-oscuro) 45%, transparent)) drop-shadow(0 6px 10px color-mix(in srgb, var(--texto) 30%, transparent)); }
.pm-peldano b { font: 600 6.8px/1.3 var(--fuente-titulos); letter-spacing: .05em; color: var(--tenue); text-align: center; text-transform: uppercase; min-height: 19px; }
.pm-peldano.hecho b { color: var(--texto-2); }
.pm-peldano.aqui b { color: var(--oro-claro); }
.pm-peldano small { font: 500 8px var(--fuente-titulos); color: var(--tenue); letter-spacing: .1em; }
.pm-peldano.aqui::after { content: 'TÚ'; position: absolute; top: -14px; font: 700 7.5px var(--fuente-titulos); letter-spacing: .3em; color: var(--oro-tinta); background: var(--oro-grad); padding: 3px 6px 2px 8px; border-radius: 999px; }

.pm-proximo { margin-top: 26px; padding: 18px 18px 16px; border-radius: var(--r); background: linear-gradient(180deg, color-mix(in srgb, var(--oro-oscuro) 6%, transparent), color-mix(in srgb, var(--oro-oscuro) 1.5%, transparent)); border: 1px solid var(--linea-2); }
.pm-proximo .fila { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pm-proximo .rot { font: 600 9px var(--fuente-titulos); letter-spacing: .3em; color: var(--tenue); }
.pm-proximo .val { font: 500 13px var(--fuente); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.pm-proximo .val b { color: var(--texto); font-weight: 700; }
.pm-proximo h4 { font: italic 500 24px var(--serif); margin: 6px 0 14px; color: var(--texto); }
.pm-proximo .nota { font-size: 12px; color: var(--texto-2); margin: 10px 0 0; }
.pm-barra { height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--texto) 8%, transparent); overflow: hidden; }
.pm-barra i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--oro-oscuro), var(--oro-claro)); box-shadow: 0 0 12px color-mix(in srgb, var(--oro-oscuro) 50%, transparent); }
.pm-proximo .pie { display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea); }
.pm-proximo .pie div + div { border-left: 1px solid var(--linea); padding-left: 14px; }
.pm-proximo .pie .rot { font-size: 12px; letter-spacing: .28em; display: block; }
.pm-proximo .pie b { display: block; margin-top: 6px; font: 600 15px var(--fuente); color: var(--texto); font-variant-numeric: tabular-nums; }
.pm-proximo .pie span.u { font-size: 12px; color: var(--tenue); }

.pm-cifras { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.pm-cifras div { padding: 18px 4px 16px; text-align: center; }
.pm-cifras div + div { border-left: 1px solid var(--linea); }
.pm-cifras b { display: block; font: 500 30px/1 var(--serif); color: var(--texto); font-variant-numeric: lining-nums tabular-nums; }
.pm-cifras b sup { font: 600 10px var(--fuente); color: var(--oro); vertical-align: top; margin-right: 2px; position: relative; top: 4px; }
.pm-cifras span { display: block; margin-top: 8px; font: 600 7.5px/1.4 var(--fuente-titulos); letter-spacing: .24em; color: var(--tenue); text-transform: uppercase; }
.pm-meses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: end; height: 150px; padding: 0 18px; margin-top: 22px; position: relative; }
.pm-meses .prom { position: absolute; left: 0; right: 0; border-top: 1px dashed color-mix(in srgb, var(--oro-oscuro) 45%, transparent); z-index: 0; }
.pm-mes { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.pm-mes em { font: 500 15px var(--fuente); font-style: normal; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.pm-mes i { width: 14px; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, var(--oro-claro), var(--oro-oscuro) 85%); box-shadow: 0 0 14px color-mix(in srgb, var(--oro-oscuro) 25%, transparent); }
.pm-mes small { line-height: 12px; font: 600 8.5px/12px var(--fuente-titulos); letter-spacing: .26em; color: var(--tenue); text-transform: uppercase; }
.pm-eje { height: 1px; background: var(--linea-2); }
.pm-leyenda { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12px; color: var(--tenue); }
.pm-leyenda span::before { content: ''; display: inline-block; width: 18px; border-top: 1px dashed var(--oro); vertical-align: middle; margin-right: 8px; }
.pm-leyenda b { color: var(--texto-2); font-weight: 600; font-variant-numeric: tabular-nums; }

.pm-privilegios { margin: 0; padding: 0; }
.pm-privilegios li { list-style: none; display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--linea); }
.pm-privilegios li:last-child { border-bottom: 0; }
.pm-privilegios .ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--hilo); color: var(--oro-claro); background: radial-gradient(circle, color-mix(in srgb, var(--oro-oscuro) 10%, transparent), transparent 70%); }
.pm-privilegios .ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.pm-privilegios p { margin: 0; font-size: 13.5px; color: var(--texto); line-height: 1.3; }
.pm-privilegios p small { display: block; font-size: 12px; color: var(--tenue); margin-top: 2px; }
.pm-privilegios .v { font: 600 14px var(--fuente); color: var(--oro-claro); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-nota-pie { font-size: 12px; color: var(--tenue); margin: 12px 0 0; }

.pm-cert-mini { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center; }
.pm-hojita { position: relative; aspect-ratio: 1.414; border-radius: 4px; overflow: hidden; background: var(--cg-marfil); box-shadow: 0 16px 30px -8px color-mix(in srgb, var(--texto) 35%, transparent), 0 0 0 1px color-mix(in srgb, var(--texto) 15%, transparent); display: grid; grid-template-columns: 34% 1fr; transform: rotate(-2.5deg); }
.pm-hojita .izq { background: var(--oro-tinta) url(/assets/fondos/misti-yanahuara-1400.jpg) 38% 18% / auto 112% no-repeat; position: relative; display: grid; place-items: center; }
.pm-hojita .izq::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--tapete-fondo) 85%, transparent), color-mix(in srgb, var(--tapete-fondo) 45%, transparent), color-mix(in srgb, var(--tapete-fondo) 95%, transparent)); }
.pm-hojita .izq img { position: relative; width: 70%; }
.pm-hojita .der { padding: 8px 7px; position: relative; }
.pm-hojita .der::before { content: ''; position: absolute; inset: 4px; border: 1px solid var(--cg-bronce); outline: 1px solid color-mix(in srgb, var(--cg-bronce) 40%, transparent); outline-offset: -3px; }
.pm-hojita .der i { display: block; height: 3px; border-radius: 2px; background: var(--cg-linea-fuerte); margin: 3px 6px; }
.pm-hojita .der .t { font: 700 6px var(--fuente-titulos); color: var(--cg-texto); text-align: center; margin: 6px 0 3px; letter-spacing: .08em; }
.pm-hojita .der .n { font: italic 600 8.5px var(--serif); color: var(--cg-texto); text-align: center; margin-bottom: 4px; }
.pm-cert-mini .datos .rot { font: 600 8px var(--fuente-titulos); letter-spacing: .3em; color: var(--oro); }
.pm-cert-mini .datos h4 { font: italic 500 22px/1.1 var(--serif); margin: 6px 0 6px; }
.pm-cert-mini .datos p { margin: 0; font-size: 12px; color: var(--tenue); line-height: 1.45; font-variant-numeric: tabular-nums; }
.pm-cert-mini .enlaces { display: flex; gap: 16px; margin-top: 10px; }
.pm-cert-mini .enlaces a { font: 700 12px var(--fuente); color: var(--oro-claro); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.pm-cert-mini .enlaces svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pm-anteriores { margin: 18px 0 0; padding: 0; border-top: 1px solid var(--linea); }
.pm-anteriores li { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-size: 12.5px; color: var(--texto-2); border-bottom: 1px solid var(--linea); }
.pm-anteriores li span { color: var(--tenue); font-variant-numeric: tabular-nums; }
.pm-anteriores li a { color: var(--oro-claro); font-weight: 700; text-decoration: none; font-size: 12px; }
.pm-ant-rot { text-transform: uppercase; font: 600 8px var(--fuente-titulos); letter-spacing: .3em; color: var(--tenue); margin: 18px 0 0; }

.pm-vitrina { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
.pm-logro { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.pm-disco { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; position: relative; }
.pm-disco.oro { background: var(--oro-grad); box-shadow: 0 8px 18px -4px color-mix(in srgb, var(--texto) 30%, transparent), 0 0 18px color-mix(in srgb, var(--oro-oscuro) 25%, transparent); color: var(--oro-tinta); }
.pm-disco.oro::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--oro-tinta) 35%, transparent); }
.pm-disco.cerrado { background: radial-gradient(circle at 40% 35%, var(--tapete-fieltro-1), var(--tapete-fieltro-3)); box-shadow: inset 0 2px 6px color-mix(in srgb, var(--texto) 35%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--oro-oscuro) 7.5%, transparent), 0 0 0 1px var(--linea-2); color: color-mix(in srgb, var(--texto) 28%, transparent); }
.pm-disco svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.pm-disco img { width: 40px; height: 40px; object-fit: contain; }
.pm-logro b { font: 600 7.5px/1.4 var(--fuente-titulos); letter-spacing: .16em; color: var(--texto-2); text-transform: uppercase; }
.pm-logro small { font-size: 12px; color: var(--tenue); margin-top: -5px; }

.pm-historia { position: relative; padding-left: 26px; }
.pm-historia::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(180deg, var(--oro), color-mix(in srgb, var(--oro-oscuro) 10%, transparent)); }
.pm-hito { position: relative; padding-bottom: 20px; }
.pm-hito::before { content: ''; position: absolute; left: -24px; top: 5px; width: 9px; height: 9px; transform: rotate(45deg); background: var(--oro-grad); box-shadow: 0 0 0 4px var(--suelo), 0 0 10px color-mix(in srgb, var(--oro-oscuro) 50%, transparent); }
.pm-hito.gris::before { background: var(--superficie-2); box-shadow: 0 0 0 4px var(--suelo), 0 0 0 5px var(--linea-2); }
.pm-hito time { font: 600 8px var(--fuente-titulos); letter-spacing: .3em; color: var(--oro); text-transform: uppercase; }
.pm-hito.gris time { color: var(--tenue); }
.pm-hito p { margin: 5px 0 0; font-size: 13.5px; color: var(--texto); }
.pm-hito small { display: block; font-size: 12px; color: var(--tenue); margin-top: 3px; }
.pm-colofon { text-align: center; padding: 30px 22px 40px; }
.pm-colofon img { width: 26px; opacity: .55; filter: grayscale(.3); }
.pm-colofon p { margin: 10px 0 0; font: 600 7.5px var(--fuente-titulos); letter-spacing: .36em; color: var(--tenue); }
.pm-aplauso-fila { display: flex; justify-content: center; padding: 24px 22px 0; }
.pm-aplauso { display: inline-flex; align-items: center; gap: 7px; font: 700 12px var(--fuente); color: var(--oro-claro); border: 1px solid var(--hilo-2); padding: 10px 16px; border-radius: 999px; background: color-mix(in srgb, var(--oro-oscuro) 6%, transparent); cursor: pointer; }
.pm-aplauso.dado { background: var(--oro-grad); color: var(--oro-tinta); border-color: transparent; }

/* 054C · Tarea 2: la tarjeta «Tu grado» de Inicio (maqueta, pantalla 02). */
.tarjeta-grado { margin: 18px 0 0; position: relative; border-radius: var(--r); padding: 18px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--oro-oscuro) 16%, transparent), transparent 50%), linear-gradient(160deg, var(--tapete-fieltro-1), var(--tapete-fieltro-3));
  box-shadow: 0 24px 50px -16px color-mix(in srgb, var(--texto) 40%, transparent), 0 0 0 1px color-mix(in srgb, var(--cg-bronce-claro) 24%, transparent), inset 0 1px 0 color-mix(in srgb, var(--oro-oscuro) 12%, transparent); }
.tarjeta-grado::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url(/assets/guilloche.svg) 135% 40% / 280px no-repeat; opacity: .35; }
.tarjeta-grado .cuerpo { display: grid; grid-template-columns: 86px 1fr; gap: 14px; align-items: center; }
.tarjeta-grado .cuerpo img { width: 86px; height: auto; filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--texto) 30%, transparent)); }
.tarjeta-grado .rot { font: 600 8px var(--fuente-titulos); letter-spacing: .34em; color: var(--tenue); }
.tarjeta-grado h3 { margin: 7px 0 5px; font: 600 22px/1 var(--fuente-titulos); letter-spacing: .12em; background: var(--oro-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tarjeta-grado .sub { font-size: 12px; color: var(--texto-2); }
.tarjeta-grado .avance { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea); }
.tarjeta-grado .avance .fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: var(--tenue); margin-bottom: 9px; }
.tarjeta-grado .avance .fila b { color: var(--texto); font-weight: 700; font-variant-numeric: tabular-nums; }
.tarjeta-grado .avance .pm-barra { margin-bottom: 10px; }
.tarjeta-grado .avance.finas { margin-top: 6px; padding-top: 12px; }
.tarjeta-grado .avance.finas .fila:last-child { margin-bottom: 0; }
.tarjeta-grado .ir { display: flex; width: 100%; justify-content: space-between; align-items: center; margin-top: 14px; padding: 0; background: none; border: 0; cursor: pointer; font: 700 12px var(--fuente); color: var(--oro-claro); }
.tarjeta-grado .ir svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   054C · Tarea 3 — pastilla del grado en la cabecera, Muro del Club y aviso de Inicio (formas de ops/maquetas/054C).
   ========================================================================== */
.chip-usuario .chip-nivel.con-pastilla { overflow: visible; letter-spacing: normal; font-weight: 400; }
.pm-pastilla { display: inline-flex; align-items: center; gap: 9px; padding: 4px 14px 4px 4px; border-radius: 999px; border: 1px solid var(--hilo); background: linear-gradient(90deg, color-mix(in srgb, var(--oro-oscuro) 10%, transparent), color-mix(in srgb, var(--oro-oscuro) 2%, transparent)); max-width: 100%; }
.pm-pastilla .pm-pastilla-ins { width: 30px; height: 30px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--texto) 25%, transparent)); }
.pm-pastilla > span { line-height: 1.15; min-width: 0; text-align: left; }
.pm-pastilla b { display: block; font: 600 10.5px var(--fuente-titulos); letter-spacing: .2em; color: var(--oro-claro); }
.pm-pastilla small { display: block; font-size: 12px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pm-cab-muro { padding: 8px 2px 0; }
.pm-cab-muro .ceja { font: 600 9px var(--fuente-titulos); letter-spacing: .34em; color: var(--oro); text-transform: none; }
.pm-cab-muro h2 { margin: 8px 0 0; font: italic 500 34px/1.05 var(--serif); }
.pm-cab-muro p { margin: 8px 0 12px; font-size: 12.5px; color: var(--tenue); }
.pc-filtros { gap: 8px; margin: 14px 0 4px; }
.pc-filtro { font: 600 9px var(--fuente-titulos); letter-spacing: .22em; text-transform: uppercase; padding: 9px 13px; border: 1px solid var(--linea-2); color: var(--texto-2); white-space: nowrap; }
.pc-filtro.on { background: var(--oro-grad); color: var(--oro-tinta); border-color: transparent; }
.pc-muro { gap: 0; }

.ascenso { margin: 18px 0 0; border-radius: var(--r); overflow: hidden; position: relative; isolation: isolate;
  background: linear-gradient(160deg, var(--tapete-fieltro-1), var(--tapete-fondo)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cg-bronce-claro) 26%, transparent), 0 26px 50px -18px color-mix(in srgb, var(--texto) 42.5%, transparent); }
.ascenso::before { content: ''; position: absolute; inset: 0 0 45% 0; z-index: -1; background: url(/assets/fondos/misti-yanahuara-1400.jpg) 60% 30% / cover; filter: grayscale(.5) sepia(.35) brightness(.45); }
.ascenso::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--tapete-fondo) 25%, transparent), color-mix(in srgb, var(--tapete-fondo) 90%, transparent) 50%, var(--tapete-fondo) 70%); }
.ascenso .tope { padding: 14px 16px 0; display: flex; justify-content: space-between; }
.ascenso .tope span { font: 700 8px var(--fuente-titulos); letter-spacing: .32em; color: var(--oro-tinta); background: var(--oro-grad); padding: 5px 9px 4px 11px; border-radius: 999px; }
.ascenso .tope time { font-size: 12px; color: color-mix(in srgb, var(--texto) 70%, transparent); }
.ascenso .centro { display: flex; flex-direction: column; align-items: center; padding: 14px 18px 4px; text-align: center; }
.ascenso .duo { position: relative; width: 150px; height: 104px; }
.ascenso .duo .r { position: absolute; left: 6px; top: 6px; width: 92px; height: 92px; border-radius: 50%; padding: 3px; background: conic-gradient(from 200deg, var(--cg-bronce-claro), var(--cg-bronce), var(--cg-bronce-claro), var(--cg-bronce-osc), var(--cg-bronce-claro)); box-shadow: 0 12px 26px color-mix(in srgb, var(--texto) 30%, transparent); }
.ascenso .duo .r div { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, var(--tapete-fieltro-1), var(--tapete-fieltro-3)); font: italic 500 34px var(--serif); color: var(--oro-claro); }
.ascenso .duo .r .foto { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.ascenso .duo > img { position: absolute; right: 0; top: 4px; width: 92px; filter: drop-shadow(0 10px 16px color-mix(in srgb, var(--texto) 32.5%, transparent)); }
.ascenso h4 { margin: 12px 0 0; font: italic 500 26px/1.1 var(--serif); }
.ascenso h4 .pc-enlace { font: inherit; color: inherit; }
.ascenso .que { margin-top: 6px; font-size: 12.5px; color: var(--texto-2); }
.ascenso .que b { font: 600 11px var(--fuente-titulos); letter-spacing: .22em; color: var(--oro-claro); }
.ascenso .pie { margin-top: 14px; padding: 12px 16px 14px; border-top: 1px solid var(--linea); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ascenso .pie .quienes { font-size: 12px; color: var(--tenue); }
.pm-aplauso svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.entrada { margin: 12px 0 0; display: grid; grid-template-columns: 46px 1fr; gap: 13px; padding: 14px; border-radius: var(--r); border: 1px solid var(--linea); background: var(--superficie); }
.entrada .txt { min-width: 0; }
.entrada .txt p { margin: 0; font-size: 13px; color: var(--texto-2); line-height: 1.4; }
.entrada .txt p b, .entrada .txt p b .pc-enlace { color: var(--texto); }
.entrada .txt p em { font: italic 600 16px var(--serif); color: var(--oro-claro); }
.entrada .txt .lin { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.entrada .txt time { font-size: 12px; color: var(--tenue); }
.entrada .der { display: inline-flex; align-items: center; gap: 8px; }
.entrada .pm-aplauso { padding: 6px 11px; }
.disco-chico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--oro-grad); color: var(--oro-tinta); box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--texto) 30%, transparent); }
.disco-chico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.mini-retrato { width: 46px; height: 46px; position: relative; }
.mini-retrato .m { width: 46px; height: 46px; border-radius: 50%; padding: 2px; background: conic-gradient(from 200deg, var(--cg-bronce-claro), var(--cg-bronce), var(--cg-bronce-claro), var(--cg-bronce-osc), var(--cg-bronce-claro)); }
.mini-retrato .m div { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, var(--tapete-fieltro-1), var(--tapete-fieltro-3)); font: italic 500 18px var(--serif); color: var(--oro-claro); }
.mini-retrato .m .foto { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.mini-retrato .ins { position: absolute; right: -8px; bottom: -6px; width: 26px; filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--texto) 30%, transparent)); }

.aviso-club { width: calc(100% - 0px); margin: 16px 0 0; display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--linea-2); background: color-mix(in srgb, var(--texto) 2%, transparent); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.aviso-club.oculto { display: none; }
.aviso-club p { margin: 0; font-size: 12.5px; color: var(--texto-2); line-height: 1.35; }
.aviso-club p b { color: var(--texto); }
.aviso-club p em { font: italic 600 15px var(--serif); color: var(--oro-claro); }
.aviso-club small { display: block; font-size: 12px; color: var(--tenue); margin-top: 2px; }
.aviso-club .ap { font: 700 11px var(--fuente); color: var(--oro-claro); border: 1px solid var(--hilo); padding: 6px 10px; border-radius: 999px; white-space: nowrap; }

/* 054C T4 · hoja «Editar perfil» (pantalla 04 de la maqueta). Texto mínimo 12 px (UX-17). */
.pm-velo { position: fixed; inset: 0; background: color-mix(in srgb, var(--tapete-fondo) 62%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 900; }
.pm-hoja { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 520px; max-height: 94vh; overflow-y: auto; z-index: 901;
  border-radius: var(--r) var(--r) 0 0; padding: 12px 22px calc(26px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--tapete-fieltro-1), var(--tapete-fieltro-3)); box-shadow: 0 -20px 60px color-mix(in srgb, var(--texto) 30%, transparent), 0 0 0 1px color-mix(in srgb, var(--cg-bronce-claro) 18%, transparent); }
.pm-hoja .asa { width: 40px; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--texto) 20%, transparent); margin: 0 auto 18px; }
.pm-hoja .ceja { font: 600 12px var(--fuente-titulos); letter-spacing: .34em; color: var(--oro); text-align: center; }
.pm-hoja h3 { font: italic 500 28px var(--serif); text-align: center; margin: 6px 0 0; color: var(--texto); }
.pm-foto-fila { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding: 14px; border-radius: var(--r); border: 1px solid var(--linea-2); }
.pm-foto-fila .m { width: 64px; height: 64px; border-radius: 50%; padding: 2px; flex: none; background: conic-gradient(from 200deg, var(--cg-bronce-claro), var(--cg-bronce), var(--cg-bronce-claro), var(--cg-bronce-osc), var(--cg-bronce-claro)); }
.pm-foto-fila .m div { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--tapete-fieltro-1), var(--tapete-fieltro-3)); font: italic 500 24px var(--serif); color: var(--oro-claro); }
.pm-foto-fila .t b { display: block; font-size: 14px; color: var(--texto); }
.pm-foto-fila .t small { font-size: 12px; color: var(--tenue); }
.pm-foto-fila .bs { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.pm-foto-fila .bs button { font: 700 12px var(--fuente); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--hilo-2); color: var(--oro-claro); background: transparent; cursor: pointer; }
.pm-foto-fila .bs button.q { border-color: var(--linea-2); color: var(--tenue); }
.pm-campo { margin-top: 18px; }
.pm-campo label { display: block; font: 600 12px var(--fuente-titulos); letter-spacing: .3em; color: var(--tenue); }
.pm-campo input { width: 100%; box-sizing: border-box; margin-top: 8px; background: transparent; border: 0; border-bottom: 1px solid var(--oro); border-radius: 0;
  padding: 8px 2px 10px; font: 500 17px var(--fuente); color: var(--texto); caret-color: var(--oro-claro); }
.pm-campo input:focus, .pm-campo input:focus-visible { outline: none; box-shadow: none; border-bottom-color: var(--oro-claro); }
.pm-campo .pm-ayuda { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--tenue); margin-top: 7px; }
.pm-campo .pm-ayuda b { color: var(--verde); font-weight: 600; text-align: right; }
.pm-campo .pm-ayuda b.mal { color: var(--rojo); }
.pm-asi { margin-top: 18px; border-radius: var(--r); padding: 14px 16px; background: var(--cg-marfil); color: var(--cg-texto); text-align: center; position: relative; }
.pm-asi::before { content: ''; position: absolute; inset: 5px; border: 1px solid var(--cg-bronce); border-radius: 10px; pointer-events: none; }
.pm-asi small { font: 600 12px var(--fuente-titulos); letter-spacing: .3em; color: var(--cg-bronce-osc); }
.pm-asi p { font: italic 600 22px/1.15 var(--serif); margin: 4px 0 0; overflow-wrap: anywhere; }
.pm-asi span { display: block; font-size: 12px; color: var(--cg-texto-2); margin-top: 3px; }
.pm-hoja .pm-btn { width: 100%; margin-top: 16px; border: 0; cursor: pointer; }
.pm-hoja .pm-btn:disabled { opacity: .6; }
.pm-hoja .nota { font-size: 12px; color: var(--tenue); text-align: center; margin-top: 12px; line-height: 1.45; }

/* 054C · unión de PARTY: `.avance` es la barra de 8 px de antes (alto fijo y overflow oculto). Dentro de la tarjeta «Tu grado» se
   anula: si no, recorta las filas del avance y la tarjeta muestra dos barras grises vacías. */
.tarjeta-grado .avance { height: auto; overflow: visible; background: none; border-radius: 0; }
/* «PARA MANTENER» cabe en una línea a 390 px con el mínimo de 12 px. */
.pm-proximo .pie .rot { letter-spacing: .14em; }
/* El guilloche de la tarjeta de Inicio, más tenue (tapa las cifras), y el botón del escudo en una sola línea. */
.tarjeta-grado::before { opacity: .18; }
.tarjeta-grado .avance .pm-boton-fino { white-space: nowrap; letter-spacing: .12em; }
/* 054D · «Ver como asesor»: la pastilla fija sobre la barra de abajo. Siempre visible; no se cierra. */
.vc-pastilla { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 9000;
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 8px 8px 8px 16px; border-radius: 999px;
  background: linear-gradient(90deg, var(--superficie-2), var(--sup-3)); border: 1px solid color-mix(in srgb, var(--oro-oscuro) 55%, transparent); box-shadow: 0 12px 30px color-mix(in srgb, var(--texto) 27.5%, transparent);
  color: var(--oro-claro, var(--oro-claro)); font: 600 12px var(--fuente); letter-spacing: .03em; }
.vc-pastilla span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-pastilla button { flex: none; font: 700 12px var(--fuente); padding: 7px 14px; border-radius: 999px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--cg-bronce-claro), var(--cg-bronce) 40%, var(--cg-bronce-osc)); color: var(--oro-tinta); }
/* En la vista no hay chat (escribir está cerrado): la burbuja se esconde y la pastilla queda sola. */
body.con-ver-como #chatBurbuja { display: none; }

/* ==========================================================================
   055 · COLISEO GLOBAL — Tarea 1: la cabecera (prefijo cg-)
   Copia de la maqueta ops/maquetas/055/index.html: verde cabecera, marca en Cormorant con espaciado
   ancho, menú de tres con línea de bronce, MIS BEKY con borde, campana y avatar. La barra vieja
   (#nav) queda escondida: solo guarda los contadores que copia sincronizarCG().
   ========================================================================== */
.cg-viejo { display: none !important; }
.barra-sup.cg-cab { background: var(--cg-verde-cab); border-bottom: 0; }
.cg-cab .barra-sup-cuerpo { height: 86px; gap: 28px; }
.cg-cab .reloj, .cg-cab .sep-barra, .cg-cab .boton-menu, .cg-cab .chip-textos, .cg-cab .marca-sub { display: none; }

.cg-marca { gap: 13px; }
.cg-escudo {
  width: 46px; height: 46px; padding: 0; flex: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: transparent; border: 1px dashed rgba(179,148,92,.65); color: var(--cg-bronce);
}
.cg-escudo img { width: 46px; height: 46px; object-fit: contain; display: block; }
.cg-escudo img[hidden] { display: none; }
.cg-escudo-hueco { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.cg-marca-enlace { color: inherit; text-decoration: none; }
.cg-cab .cg-marca-txt {
  margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 25px; font-weight: 600;
  color: #F7F2E6; letter-spacing: 3.2px; white-space: nowrap; line-height: 1;
}

.cg-nav { display: flex; align-items: center; gap: 6px; margin-left: 18px; flex: 1 1 auto; min-width: 0; }
.cg-grupo { position: relative; flex: none; }
.cg-item {
  position: relative; display: flex; align-items: center; gap: 9px; height: 52px; padding: 0 20px;
  background: none; border: 0; border-radius: 0; box-sizing: border-box; cursor: pointer; white-space: nowrap;
  font: 500 14.5px/1 'Manrope', system-ui, sans-serif; color: #B6C6C0;
}
/* P-64 · los dos ítems que son enlaces (<a>): sin subrayado y con el mismo aspecto que los botones de la barra. */
a.cg-item { text-decoration: none; }
/* P-64 · con cinco ítems en la barra (Mi panel, Global Party, Finanzas, Calendario, Cotizador) la fila ya no cabía en pantallas de
   escritorio medianas y el último ítem se montaba sobre «MIS BEKY». Se aprieta el aire por tramos; debajo de 860 px la barra baja a
   su propia fila con desplazamiento (regla de más abajo) y ahí no hace falta. */
@media (min-width: 861px) and (max-width: 1500px) {
  .cg-cab .barra-sup-cuerpo { gap: 16px; }
  .cg-nav { margin-left: 6px; gap: 0; }
  .cg-item { padding: 0 12px; gap: 7px; font-size: 14px; }
}
@media (min-width: 861px) and (max-width: 1240px) {
  .cg-item { padding: 0 9px; }
  .cg-item .ico { display: none; }
  /* el supervisor además lleva «Volver al panel»: el rótulo de marca y ese botón ceden espacio para que la barra no pise MIS BEKY */
  .cg-cab .cg-marca-txt { font-size: 18px; letter-spacing: 1.4px; }
  .cg-cab .cg-marca { gap: 8px; }
  .cg-cab #btnVolverPanel { font-size: 12px; padding: 5px 9px; }
  .cg-cab .zona-estado { gap: 10px; }
  .cg-cab .barra-sup-cuerpo { gap: 10px; }
}
/* Supervisor (lleva «Volver al panel») entre 821 y 1100 px: ni con todo apretado caben cinco ítems más ese botón en una sola fila,
   así que la barra baja a su propia fila, igual que ya hace en celular. */
@media (min-width: 821px) and (max-width: 1100px) {
  .cg-cab:has(#btnVolverPanel:not([hidden]):not(.oculto)) .barra-sup-cuerpo { height: auto; flex-wrap: wrap; padding: 8px var(--pad-app, 20px) 0; gap: 8px 12px; }
  .cg-cab:has(#btnVolverPanel:not([hidden]):not(.oculto)) .zona-marca { order: 0; flex: 1 1 auto; }
  .cg-cab:has(#btnVolverPanel:not([hidden]):not(.oculto)) .zona-estado { order: 1; }
  .cg-cab:has(#btnVolverPanel:not([hidden]):not(.oculto)) .cg-nav { order: 5; flex: 0 0 100%; width: 100%; margin-left: 0; }
  .cg-cab:has(#btnVolverPanel:not([hidden]):not(.oculto)) .zona-estado { flex-wrap: nowrap; flex: none; }
  .cg-cab:has(#btnVolverPanel:not([hidden]):not(.oculto)) .zona-marca { min-width: 0; flex: 1 1 0; }
}
@media (min-width: 821px) and (max-width: 900px) {
  .cg-cab .cg-marca-txt { font-size: 15px; letter-spacing: 1px; }
  .cg-cab .cg-beky { padding: 3px 8px; }
  /* con cinco ítems tampoco le cabe en una fila al asesor común: baja a su propia fila, como el supervisor y como en celular */
  .cg-cab .barra-sup-cuerpo { height: auto; flex-wrap: wrap; padding: 8px var(--pad-app, 20px) 0; gap: 8px 12px; }
  .cg-cab .zona-marca { order: 0; flex: 1 1 0; min-width: 0; }
  .cg-cab .zona-estado { display: flex; order: 1; flex-wrap: nowrap; flex: none; }
  .cg-cab .cg-nav { order: 5; flex: 0 0 100%; width: 100%; margin-left: 0; }
}
.cg-item .ico { width: 17px; height: 17px; stroke: #8CA49C; stroke-width: 1.8; flex: none; }
.cg-item:hover { color: #FAF7F0; }
.cg-item.activo { color: #FAF7F0; font-weight: 700; box-shadow: inset 0 -2px 0 var(--cg-bronce); }
.cg-item.activo .ico { stroke: var(--cg-bronce); }
.cg-item:focus-visible, .cg-lista button:focus-visible, .cg-beky:focus-visible, .cg-chip:focus-visible { outline: 2px solid var(--cg-bronce); outline-offset: 3px; }
.cg-cab .globo { background: #B5333C; color: #FDF2E9; font-size: 12px; }

.cg-lista {
  position: fixed; z-index: 60; min-width: 220px; padding: 6px;
  background: var(--cg-verde); border: 1px solid rgba(179,148,92,.3); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,.4);
}
.cg-lista.oculto { display: none; }
.cg-lista button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
  background: none; border: 0; border-radius: 7px; cursor: pointer; text-align: left;
  font: 600 13.5px/1 'Manrope', system-ui, sans-serif; color: var(--cg-marfil);
}
.cg-lista button .ico { width: 17px; height: 17px; stroke: var(--cg-bronce); stroke-width: 1.8; flex: none; }
.cg-lista button:hover, .cg-lista button.activo { background: rgba(179,148,92,.16); }
.cg-lista button .globo { margin-left: auto; }

/* MIS BEKY: botón con borde que lleva a Finanzas */
.cg-cab .cg-beky {
  display: block; text-align: right; padding: 5px 11px; border-radius: 7px; border: 1px solid rgba(179,148,92,.3);
}
.cg-cab .cg-beky .k { font-size: 12px; letter-spacing: 1.8px; font-weight: 700; color: var(--cg-bronce); text-transform: uppercase; }
.cg-cab .cg-beky .k .ico-beky { display: none; }
.cg-cab .cg-beky .saldo-fila .mini { display: none; }
.cg-cab .cg-beky .cifra {
  font-family: 'Manrope', system-ui, sans-serif; font-variant-numeric: tabular-nums lining-nums;
  font-size: 21px; font-weight: 700; color: var(--cg-bronce-claro); line-height: 1.25; letter-spacing: -.4px;
}
.cg-cab .zona-estado { gap: 18px; }

/* campana redonda con contador */
.cg-cab .boton-campana {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(179,148,92,.3); background: transparent; color: var(--cg-bronce-claro);
}
.cg-cab .boton-campana.tiene { background: transparent; border-color: rgba(179,148,92,.3); color: var(--cg-bronce-claro); }
.cg-cab .boton-campana .globo { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; background: #B5333C; color: #FDF2E9; }

/* avatar: la llave del menú de la cuenta */
.cg-cab .cg-chip { padding: 0; background: none; border: 0; border-radius: 50%; cursor: pointer; }
.cg-cab .cg-chip .avatar {
  width: 40px; height: 40px; font-size: 18px; color: var(--cg-bronce-claro);
  background: var(--cg-verde); border: 2px solid var(--cg-bronce);
}
.cg-cab .menu-envoltura { width: 0; }
.cg-cab .menu-lista { background: var(--cg-verde); border: 1px solid rgba(179,148,92,.3); border-radius: 10px; right: 0; }
.cg-cab .menu-lista button { color: var(--cg-marfil); }
.cg-cab .menu-lista button .globo { margin-left: auto; }

/* La barra de 5 del teléfono se va: los tres ítems de arriba la reemplazan (su HTML se conserva). */
.nav-inferior { display: none !important; }
@media (max-width: 860px) {
  :root { --alto-nav: 0px; }
}

/* ===== 390 px — copia de las reglas de celular de la maqueta ===== */
@media (max-width: 820px) {
  .cg-cab .barra-sup-cuerpo { height: auto; padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .cg-cab .barra-sup-cuerpo::before { display: none; }
  .cg-cab .zona-marca { order: 0; flex: 1 1 0; min-width: 0; gap: 8px; }
  .cg-cab .cg-escudo, .cg-cab .cg-escudo img { width: 38px; height: 38px; }
  .cg-cab .cg-marca-txt { font-size: 13.5px; letter-spacing: 1.2px; overflow: hidden; text-overflow: clip; }
  .cg-cab .cg-marca-enlace { min-width: 0; }
  .cg-cab .zona-estado { display: contents; }
  .cg-cab .cg-beky { order: 1; padding: 3px 8px; }
  .cg-cab .cg-beky .cifra { font-size: 17px; }
  .cg-cab .campana-envoltura { order: 2; }
  .cg-cab .cg-chip { order: 3; margin-left: 0; flex: none; }
  .cg-cab .menu-envoltura { order: 4; }
  .cg-cab .boton-campana { width: 36px; height: 36px; }
  .cg-cab .cg-chip .avatar { width: 34px; height: 34px; font-size: 16px; }
  .cg-nav {
    order: 5; width: 100%; flex: 0 0 100%; margin-left: 0; gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cg-nav::-webkit-scrollbar { display: none; }
  .cg-item { padding: 0 13px; font-size: 13.5px; height: 44px; }
  .cg-cab .bandeja { right: -52px; }
}
@media (max-width: 820px) {
  .cg-cab .panel-balance { left: 0; right: auto; }
}

/* ============ ENCARGO 055 · Tarea 2 · Tira de perfil incompleto (Coliseo Global) ============
   Tira delgada bajo la cabecera, a todo el ancho. Ámbar = perfil incompleto; roja apagada = sin
   cuenta de BEKY (antes un bloque grande). Copia el CSS de la maqueta (ops/maquetas/055). */
.cg-tira { background: linear-gradient(180deg, #F6E9CC, #EFDFBB); box-shadow: inset 0 -1px 0 rgba(128,98,48,.35); color: #4A3C22; }
.cg-tira.oculto { display: none; }
.cg-tira-cuerpo { max-width: var(--ancho-app, 1520px); margin: 0 auto; padding: 7px 32px; min-height: 44px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; box-sizing: border-box; font-size: 13px; }
.cg-tira-cuerpo svg { flex: none; color: var(--cg-bronce-osc); }
.cg-tira-relleno { flex-grow: 1; }
.cg-tira-btn { padding: 7px 15px; border: 0; border-radius: 7px; background: var(--cg-bronce-osc); color: #FDF8EC; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.cg-tira-btn:hover { filter: brightness(1.08); }
.cg-tira-roja { background: linear-gradient(180deg, #F1DAD3, #E8C9C0); box-shadow: inset 0 -1px 0 rgba(140,60,50,.35); color: #5A2A22; }
.cg-tira-roja .cg-tira-cuerpo svg { color: #8C3C32; }
.cg-tira-roja .cg-tira-btn { background: #8C3C32; }
@media (max-width: 640px) { .cg-tira-cuerpo { padding: 8px 14px; gap: 8px; } .cg-tira-btn { width: 100%; } }

/* ENCARGO 055 · Tarea 3 · Cinta en vivo (la maqueta, tal cual). Corre sola con una animación CSS y se
   queda quieta —con scroll propio— si el usuario pidió menos movimiento. */
.cg-cinta { overflow: hidden; background: #0B3A31; box-shadow: inset 0 1px 0 rgba(179,148,92,.26), inset 0 -1px 0 rgba(179,148,92,.26); }
.cg-cinta.oculto { display: none; }
.cg-cinta-cuerpo { max-width: var(--ancho-app, 1520px); margin: 0 auto; padding: 0 32px; height: 56px; display: flex; align-items: center; gap: 18px; box-sizing: border-box; }
.cg-cinta-vivo { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; }
.cg-cinta-punto { width: 7px; height: 7px; border-radius: 50%; background: #8CD6AA; box-shadow: 0 0 8px rgba(140,214,170,.9); animation: cg-late 2s ease-in-out infinite; }
.cg-cinta-vivo-txt { font-size: 12px; letter-spacing: 2.6px; font-weight: 700; color: #8CD6AA; }
.cg-cinta-sep { flex: 0 0 auto; width: 1px; height: 20px; background: rgba(179,148,92,.3); }
.cg-cinta-ventana { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.cg-cinta-pista { display: inline-flex; animation: cg-corre var(--cg-cinta-seg, 46s) linear infinite; }
.cg-cinta-pista:hover { animation-play-state: paused; }
.cg-cinta-grupo { display: inline-flex; }
.cg-cap { display: inline-flex; align-items: center; gap: 10px; margin: 0 11px; padding: 8px 18px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(180deg, rgba(179,148,92,.26), rgba(179,148,92,.1)); border: 1px solid rgba(179,148,92,.45); }
.cg-cap svg { flex: none; fill: #E8C87E; }
.cg-cap strong { color: #FAF7F0; font-size: 13.5px; font-weight: 700; }
.cg-cap-txt { color: #DCC79B; font-size: 13.5px; }
.cg-cap-hace { color: #7E9A92; font-size: 12px; }
.cg-cap-equipo { background: linear-gradient(180deg, rgba(46,122,98,.5), rgba(16,60,52,.6)); border-color: rgba(140,214,170,.45); box-shadow: 0 0 16px rgba(46,122,98,.3); }
.cg-cap-equipo svg { fill: #8CD6AA; }
.cg-cap-equipo .cg-cap-txt { color: #A8D8C2; }
@keyframes cg-corre { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes cg-late { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (max-width: 820px) { .cg-cinta-cuerpo { padding: 0 16px; gap: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .cg-cinta-punto, .cg-cinta-pista { animation: none; }
  .cg-cinta-ventana { overflow-x: auto; }
  .cg-cinta-pista .cg-cinta-grupo + .cg-cinta-grupo { display: none; }
}

/* ENCARGO 055 · Tarea 4 · Bienvenida (la maqueta, tal cual): muro de sillar con velo claro a la izquierda, retrato
   enmarcado en bronce, identidad en Cormorant y la distinción en una hornacina con remate en arco. Las etiquetas
   de la maqueta (9-10,5 px) suben a 12 px por UX-17. */
.cg-bienv { position: relative; overflow: hidden; background: #F4F0E7 url('/assets/coliseo/muro_sillar.jpg') 50% 48% / cover no-repeat; }
.cg-bienv.oculto { display: none; }
.cg-bienv::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(248,244,235,.62) 0%, rgba(248,244,235,.34) 34%, rgba(248,244,235,0) 58%); }
.cg-bv-cuerpo { position: relative; max-width: var(--ancho-app, 1520px); margin: 0 auto; padding: 32px; min-height: 432px; box-sizing: border-box; display: flex; align-items: center; gap: 40px; color: var(--cg-texto); }
.cg-bv-marco { flex: 0 0 232px; padding: 7px; background: linear-gradient(150deg, #E2CC9A, #B3945C 46%, #806230); box-shadow: 0 18px 34px rgba(50,38,18,.34); box-sizing: border-box; }
.cg-bv-retrato { width: 100%; height: 352px; object-fit: cover; object-position: 50% 14%; display: block; background: #2A2E30; }
.cg-bv-mono { width: 100%; height: 352px; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #103C34, #082F28); color: #E8D5A8; font: italic 600 96px/1 'Cormorant Garamond', Georgia, serif; }
.cg-bv-id { flex: 1 1 auto; min-width: 0; }
.cg-bv-ceja { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.cg-bv-rot { font-size: 12px; letter-spacing: 2.6px; font-weight: 700; color: var(--cg-bronce-osc); }
.cg-bv-filete { width: 90px; height: 1px; background: rgba(128,98,48,.45); }
.cg-bv-rol { font-size: 13px; letter-spacing: 4.4px; font-weight: 700; color: var(--cg-bronce-osc); margin-bottom: 12px; text-transform: uppercase; }
.cg-bv-nombre { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 88px; font-weight: 600; line-height: .92; letter-spacing: -2px; color: var(--cg-texto); overflow-wrap: anywhere; }
.cg-bv-frase-fila { display: flex; align-items: flex-end; gap: 12px; margin-top: 18px; }
.cg-bv-frase { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 40px; color: var(--cg-bronce-osc); line-height: 1.15; overflow-wrap: anywhere; }
.cg-bv-lapiz { flex: 0 0 auto; width: 44px; height: 44px; margin-bottom: 2px; border-radius: 50%; border: 1px solid rgba(128,98,48,.4); background: rgba(255,253,248,.7); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.cg-bv-lapiz svg { width: 15px; height: 15px; fill: none; stroke: var(--cg-bronce-osc); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cg-bv-lapiz:focus-visible, .cg-bv-ver:focus-visible { outline: 2px solid var(--cg-bronce); outline-offset: 3px; }
.cg-bv-dist { flex: 0 0 358px; position: relative; padding: 26px 26px 24px; text-align: center; box-sizing: border-box; border-radius: 179px 179px 12px 12px;
  background-color: var(--cg-superficie); background-image: linear-gradient(rgba(255,253,248,.88), rgba(246,241,230,.92)), url('/assets/coliseo/textura_sillar.png'); background-size: auto, 300px;
  box-shadow: inset 0 0 40px rgba(120,100,70,.14), inset 0 2px 0 rgba(255,255,255,.9), 0 20px 40px rgba(50,38,18,.22); }
.cg-bv-dist .cg-bv-rot { display: block; margin-bottom: 14px; }
/* 071: los 258 px son SOLO de «Tu distinción» de la portada; suelta, la regla estiraba las insignias de Mi perfil y del perfil del miembro. */
.cg-bv-dist .cg-brillo { position: relative; display: block; width: 258px; margin: 0 auto; }
.cg-brillo::before { content: ''; position: absolute; inset: -24%; border-radius: 50%; background: radial-gradient(circle, rgba(255,216,134,.7) 0%, rgba(214,170,90,.3) 36%, rgba(214,170,90,0) 70%); animation: cg-resp 4.5s ease-in-out infinite; }
.cg-bv-dist .cg-brillo img { position: relative; width: 258px; height: auto; display: block; filter: drop-shadow(0 14px 22px rgba(60,42,18,.38)); }
@keyframes cg-resp { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.cg-bv-rango { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; color: var(--cg-texto); margin-top: 12px; }
.cg-bv-franja { display: flex; align-items: stretch; margin-top: 16px; background: var(--cg-superficie-alta); border-radius: 8px; box-shadow: 0 2px 10px rgba(60,42,18,.12); }
.cg-bv-franja > div { flex: 1; padding: 12px 6px; }
.cg-bv-franja > span { width: 1px; background: rgba(128,98,48,.2); margin: 10px 0; }
.cg-bv-cifra { font-variant-numeric: tabular-nums lining-nums; font-size: 23px; font-weight: 700; color: var(--cg-texto); line-height: 1.1; letter-spacing: -.5px; }
.cg-bv-cifra.oro { color: var(--cg-bronce-osc); }
.cg-bv-franja .cg-bv-rot { margin: 4px 0 0; font-size: 12px; letter-spacing: 1.4px; color: var(--cg-texto-2, #5F645C); }
.cg-bv-prio { font-size: 12.5px; color: var(--cg-texto-2, #5F645C); margin-top: 14px; }
.cg-bv-ver { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 8px 4px; color: var(--cg-bronce-osc); font-size: 13px; font-weight: 700; min-height: 44px; box-sizing: border-box; background: none; border: 0; cursor: pointer; font-family: inherit; }
.cg-bv-ver svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 820px) {
  .cg-bv-cuerpo { flex-direction: column; align-items: stretch; padding: 20px 16px; min-height: 0; gap: 22px; }
  .cg-bv-marco { flex: 0 0 auto; width: 180px; align-self: center; }
  .cg-bv-retrato, .cg-bv-mono { height: 274px; }
  .cg-bv-nombre { font-size: 46px; letter-spacing: -1px; }
  .cg-bv-frase { font-size: 26px; }
  .cg-bv-dist { flex: 0 0 auto; border-radius: 160px 160px 12px 12px; }
}
@media (prefers-reduced-motion: reduce) { .cg-brillo::before { animation: none; opacity: .8; } }

/* ===== ENCARGO 055 · Tarea 5 · Tu actividad (banda de 4 celdas con dígitos de sillar) =====
   Copiado de la maqueta (docs/consola/C2-CASINO/material/maqueta, sección «Tu actividad»). Los dígitos de
   sillar solo se usan de 32 px para arriba; la altura baja a 32, nunca más. */
.cg-act { margin: 0 0 26px; }
.cg-act-cab { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; }
.cg-act-tit { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 31px; font-weight: 600; color: var(--texto); line-height: 1; }
.cg-act-linea { flex-grow: 1; height: 1px; background: rgba(128,98,48,.28); }
.cg-act-rot { font-size: 12px; letter-spacing: 2.6px; font-weight: 700; color: var(--cg-bronce-osc); }
.cg-act-banda { position: relative; display: flex; flex-wrap: nowrap; align-items: stretch; padding: 17px 4px; background: var(--cg-superficie);
  border: 1px solid rgba(128,98,48,.34); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 12px 28px rgba(60,42,18,.14); }
.cg-act-banda::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 8px; border-radius: 10px 10px 0 0;
  background-color: #E6DAC0; background-image: linear-gradient(rgba(168,142,100,.34), rgba(136,112,76,.5)), url('/assets/coliseo/textura_sillar.png');
  background-size: auto, 170px; background-blend-mode: multiply, normal; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 0 rgba(128,98,48,.4); }
.cg-act-banda > * { position: relative; }
.cg-act-celda { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; gap: 14px; padding: 0 22px; }
.cg-act-sep { width: 1px; align-self: stretch; background: rgba(128,98,48,.18); }
.cg-act-ico { flex: 0 0 auto; width: 40px; height: 40px; margin-top: 2px; border-radius: 50%; background: #EDF1EC; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.cg-act-cuerpo { min-width: 0; }
.cg-act-k { display: block; font-size: 12px; letter-spacing: 2.2px; font-weight: 700; color: var(--cg-texto-2); margin-bottom: 6px; white-space: nowrap; }
.cg-act-cifra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; min-height: 44px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 36px; font-weight: 600; color: var(--cg-texto); line-height: 1; }
.cg-act-prefijo { font-family: var(--fuente); font-weight: 700; font-size: 24px; color: var(--cg-texto); line-height: 1; margin-right: 4px; letter-spacing: -.4px; }
.cg-act-dig { height: 44px; width: auto; display: block; filter: drop-shadow(0 2px 3px rgba(56,40,16,.45)) drop-shadow(0 1px 1px rgba(56,40,16,.35)); }
.cg-act-pt { display: block; width: 5px; height: 5px; margin-bottom: 1px; background-color: #DCCDAE;
  background-image: linear-gradient(rgba(168,142,100,.25), rgba(132,110,76,.38)), url('/assets/coliseo/textura_sillar.png'); background-size: auto, 60px; background-blend-mode: multiply, normal;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.9), inset -1.5px -1.5px 0 rgba(96,76,48,.9); filter: drop-shadow(0 2px 3px rgba(56,40,16,.45)) drop-shadow(0 1px 1px rgba(56,40,16,.35)); }
.cg-act-mes { display: block; margin-top: 9px; font-size: 12px; color: var(--cg-texto-2); white-space: nowrap; }
.cg-act-mes strong { color: var(--cg-texto); font-variant-numeric: tabular-nums lining-nums; }
.cg-act-pie { display: block; margin-top: 3px; font-size: 12px; color: var(--cg-texto-3); }
.cg-act-pie:empty { display: none; }
@media (max-width: 900px) {
  .cg-act-banda { flex-wrap: wrap; }
  .cg-act-celda { flex: 1 1 46%; padding: 12px 14px; }
  .cg-act-sep { display: none; }
  .cg-act-tit { font-size: 25px; }
  .cg-act-rot { display: none; }
  .cg-act-dig { height: 32px; }
  .cg-act-pt { width: 4px; height: 4px; }
  .cg-act-cifra { min-height: 32px; }
  .cg-act-mes, .cg-act-pie { white-space: normal; }
}
@media (max-width: 480px) {
  .cg-act-ico { display: none; }
  .cg-act-k { letter-spacing: 1.4px; white-space: normal; }
}

/* ===== ENCARGO 055 · Tarea 6 · Tu jornada + Tu mes (fila de dos) =====
   Copiado de la maqueta (sección «Tu jornada» y «Tu mes»). La superficie es la `.sup` de la maqueta; como adentro
   siguen los renderizadores de siempre (misiones, tareas, equipo), que se pintaron para la noche de sillar, se
   reasignan aquí los tokens de texto y superficie a los del marfil: así lo de adentro se lee sin tocar su marcado. */
.cg-fila2 { display: flex; gap: 22px; margin: 0 0 26px; align-items: stretch; flex-wrap: nowrap; }
.cg-sup { position: relative; background: var(--cg-superficie); border: 1px solid rgba(128,98,48,.34); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 12px 28px rgba(60,42,18,.14);
  --texto: #172B26; --texto-2: #5F645C; --tenue: #5F645C; --superficie: var(--cg-superficie-alta); --superficie-2: #F4F0E7; --sup-3: #EDE6D5;
  --linea: rgba(128,98,48,.2); --linea-2: rgba(128,98,48,.34); --oro: #806230; --oro-claro: #806230; --agua: #2E6B57; --verde: #2E7A62; --rojo: #B4472F; }
.cg-sup::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 8px; border-radius: 10px 10px 0 0;
  background-color: #E6DAC0; background-image: linear-gradient(rgba(168,142,100,.34), rgba(136,112,76,.5)), url('/assets/coliseo/textura_sillar.png');
  background-size: auto, 170px; background-blend-mode: multiply, normal; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 0 rgba(128,98,48,.4); }
.cg-sup > * { position: relative; }
.cg-sup { font-weight: 400; }
.cg-jornada .resumen-grande { font-size: 13px; padding: 3px 11px; }
.cg-sec { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 27px; font-weight: 600; color: #172B26; line-height: 1; }

.cg-jornada { flex: 1 1 0; min-width: 0; padding: 20px 26px; color: #172B26; }
.cg-jor-cab { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.cg-jor-tabs { display: flex; align-items: center; gap: 6px; }
.cg-jor-tab { padding: 6px 13px; border-radius: 999px; border: 1px solid rgba(128,98,48,.35); background: transparent; color: #5F645C; font: 600 12px/1.2 var(--fuente); cursor: pointer; }
.cg-jor-tab.activo { background: #103C34; border-color: #103C34; color: #E8D5A8; font-weight: 700; }
.cg-jor-tab:focus-visible { outline: 2px solid #B3945C; outline-offset: 3px; }
.cg-jor-sub { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(128,98,48,.16); }
.cg-jor-panel > .cg-jor-sub:first-child { margin-top: 0; }
.cg-jor-subt { font-size: 12px; letter-spacing: 2.2px; font-weight: 700; color: #5F645C; }
.cg-jornada .misiones { gap: 0; }
.cg-jornada .mision, .cg-jornada .tarea-fila { background: transparent; border-color: rgba(128,98,48,.16); border-radius: 0; box-shadow: none; }
.cg-jornada .mision.cumplida { background: rgba(46,122,98,.07); }
.cg-jornada .mision .marca { border: 2px solid rgba(128,98,48,.4); background: transparent; }
.cg-jornada .mision.cumplida .marca { background: #2E7A62; border-color: #2E7A62; color: #fff; }
.cg-jornada .mision .titulo { font-size: 14px; font-weight: 600; color: #172B26; }
.cg-jornada .mision.cumplida .titulo { color: #666B64; text-decoration: line-through; }
.cg-jornada .mision .recompensa { font-family: var(--fuente); font-size: 12px; font-weight: 700; color: #806230; white-space: nowrap; }
.cg-jornada .mision .recompensa::after { content: ' BEKY'; }
.cg-jornada .pastilla { background: rgba(128,98,48,.1); color: #5F645C; border-color: rgba(128,98,48,.28); }
.cg-jornada .boton { color: #172B26; }
.cg-jor-pie { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.cg-jor-ruta { font-size: 12px; color: #5F645C; }
.cg-jor-ruta strong { color: #172B26; }
.cg-jor-esp { flex-grow: 1; }
.cg-jor-ver { font-size: 12px; font-weight: 700; color: #806230; text-decoration: none; }
.cg-jor-ver:focus-visible { outline: 2px solid #B3945C; outline-offset: 3px; }

.cg-mes { flex: 0 0 352px; min-width: 0; padding: 20px 24px; display: flex; flex-direction: column; justify-content: space-between;
  background-color: var(--cg-superficie); background-image: linear-gradient(rgba(255,253,248,.9), rgba(246,241,230,.94)), url('/assets/coliseo/textura_sillar.png'); background-size: auto, 320px; }
.cg-mes.oculto { display: none; }
.cg-mes-fila { display: flex; align-items: center; gap: 14px; }
.cg-mes-cuerpo { min-width: 0; }
.cg-mes-ico-verde { background: #E4EFE8; }
.cg-mes-k-verde { color: #2E6B57; }
.cg-mes-cifra { min-height: 38px; }
.cg-mes-cifra .cg-act-dig { height: 38px; }
.cg-mes-cifra .cg-act-prefijo { font-size: 19px; }
.cg-mes-barra-caja { margin: 14px 0 13px; }
.cg-mes-barra { position: relative; height: 24px; border-radius: 5px; background: #E8E1D2; box-shadow: inset 0 2px 5px rgba(80,62,34,.3), inset 0 -1px 0 rgba(255,255,255,.7); }
.cg-mes-llena { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 5px 2px 2px 5px; background: linear-gradient(180deg, #2E7A62, #103C34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22); animation: cgMesLlena 1.5s cubic-bezier(.22,.9,.3,1) both; }
.cg-mes-llena span { position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #E2CC9A, #B3945C); }
.cg-mes-marcas { position: absolute; inset: 0; border-radius: 5px; background: repeating-linear-gradient(90deg, rgba(128,98,48,0) 0 calc(25% - 1px), rgba(128,98,48,.22) calc(25% - 1px), rgba(128,98,48,.22) 25%); }
.cg-mes-pct { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-variant-numeric: tabular-nums lining-nums; font-size: 12.5px; font-weight: 800; color: #172B26; }
.cg-mes-pie { display: flex; justify-content: space-between; margin-top: 7px; font-size: 12px; color: #5F645C; }
.cg-mes-pie strong { color: #172B26; }
.cg-mes-pie #cgMesFaltan strong { color: #806230; }
.cg-mes-esc { margin-top: 15px; padding-top: 14px; border-top: 1px solid rgba(128,98,48,.22); }
.cg-mes-esc > .cg-act-k { margin-bottom: 12px; }
.cg-mes-postas { display: flex; align-items: center; gap: 0; }
.cg-mes-posta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cg-mes-punto { width: 15px; height: 15px; border-radius: 50%; background: #FFFDF8; border: 2px solid #C8BDA4; box-sizing: border-box; }
.cg-mes-posta.meta .cg-mes-punto { border-color: #B3945C; }
.cg-mes-posta.pasada .cg-mes-punto { background: #2E7A62; border-color: #2E7A62; }
.cg-mes-posta.actual .cg-mes-punto { width: 17px; height: 17px; background: #2E7A62; border-color: #2E7A62; box-shadow: 0 0 0 4px rgba(46,122,98,.18); }
.cg-mes-rot { font-size: 12px; letter-spacing: 1.2px; font-weight: 700; color: #666B64; }
.cg-mes-posta.meta .cg-mes-rot { color: #806230; }
.cg-mes-posta.pasada .cg-mes-rot, .cg-mes-posta.actual .cg-mes-rot { color: #2E6B57; font-weight: 800; }
.cg-mes-hilo { flex: 1 1 auto; height: 3px; background: #DED6C4; margin: 0 2px 22px; }
.cg-mes-hilo.lleno { background: #2E7A62; }
.cg-mes-frase { margin-top: 13px; padding: 11px 13px; border-radius: 8px; background: rgba(46,122,98,.09); border: 1px solid rgba(46,122,98,.22); }
.cg-mes-f1 { font-size: 12.5px; color: #172B26; line-height: 1.5; }
.cg-mes-f2 { font-size: 12px; color: #2E6B57; margin-top: 6px; font-weight: 700; }
@keyframes cgMesLlena { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { .cg-mes-llena { animation: none; } }
@media (max-width: 900px) {
  .cg-fila2 { flex-direction: column; gap: 18px; }
  .cg-mes { flex: 1 1 auto; }
  .cg-jornada { padding: 18px 16px; }
  .cg-sec { font-size: 25px; }
}

/* ===== ENCARGO 055 · Tarea 7 · Tu plan de carrera + Tu equipo (fila de dos) =====
   Copiado de la maqueta (sección «Tu plan de carrera» y «Tu equipo»). Rótulos a 12 px, no los 9-10 px de la maqueta (UX-17). */
.cg-fila3 { margin-top: 22px; }
.cg-plan { flex: 1 1 0; min-width: 0; padding: 20px 26px 22px; display: flex; flex-direction: column; justify-content: space-between; color: #172B26; }
.cg-plan.oculto, .cg-equipo.oculto { display: none; }
/* Sin huecos (055B · 6): si una de las dos no tiene datos, la otra toma la fila entera; si ninguna, la fila no existe. */
.cg-plan.oculto + .cg-equipo { flex: 1 1 auto; }
.cg-fila3:not(:has(> .cg-sup:not(.oculto))) { display: none; }
.cg-plan-riel { position: relative; overflow-x: auto; overflow-y: hidden; padding-top: 30px; margin-top: -30px; padding-bottom: 2px; } /* el relleno deja respirar el halo de la insignia actual: con overflow-x el eje y también recorta */
.cg-plan-hilo { position: absolute; left: 8%; right: 8%; top: 82px; height: 1px; background: rgba(128,98,48,.3); }
.cg-plan-fila { position: relative; display: flex; align-items: flex-start; gap: 4px; min-width: 520px; }
.cg-plan-rango { flex: 1 1 0; text-align: center; position: relative; }
.cg-plan-ins { display: inline-block; position: relative; }
.cg-plan-img { height: 80px; width: auto; display: block; position: relative; filter: drop-shadow(0 7px 12px rgba(60,42,18,.3)); }
.cg-plan-rango.futura .cg-plan-img { opacity: .62; }
.cg-plan-rango.actual .cg-plan-img { height: 118px; }
.cg-brillo-sm::before { content: ''; position: absolute; inset: -24%; border-radius: 50%; background: radial-gradient(circle, rgba(255,216,134,.7) 0%, rgba(214,170,90,.3) 36%, rgba(214,170,90,0) 70%); animation: cg-resp 4.5s ease-in-out infinite; }
.cg-plan-nombre { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14.5px; font-weight: 500; color: #5F645C; line-height: 1.2; margin-top: 12px; }
.cg-plan-rango.actual .cg-plan-nombre { font-size: 17px; font-weight: 700; color: #172B26; }
.cg-plan-num { font-size: 12px; letter-spacing: 1.8px; font-weight: 700; color: #666B64; margin-top: 4px; }
.cg-plan-rango.actual .cg-plan-num { color: #806230; }
.cg-plan-sub { display: block; width: 46px; height: 2px; background: #B3945C; margin: 7px auto 0; }
.cg-plan-pie { text-align: center; margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(128,98,48,.2); font-size: 12.5px; color: #5F645C; }
.cg-plan-pie strong { color: #172B26; }

.cg-equipo { flex: 0 0 352px; min-width: 0; padding: 20px 24px; background: linear-gradient(180deg, #14473C 0%, #103C34 55%, #0B332B 100%); border-color: rgba(179,148,92,.45); color: #F3EBD9; }
.cg-eq-cab { display: flex; align-items: center; gap: 11px; margin: 3px 0 15px; }
.cg-eq-escudo { position: relative; flex: 0 0 auto; width: 34px; height: 34px; }
.cg-eq-hueco { width: 34px; height: 34px; border-radius: 50%; border: 1px dashed rgba(179,148,92,.6); display: flex; align-items: center; justify-content: center; color: #B3945C; box-sizing: border-box; }
.cg-eq-hueco svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.cg-eq-escudo img { position: absolute; inset: 0; width: 34px; height: 34px; object-fit: contain; }
.cg-eq-nombre { font-size: 12px; letter-spacing: 2.2px; font-weight: 700; color: #8CD6AA; overflow-wrap: anywhere; }
.cg-eq-k { display: block; font-size: 12px; letter-spacing: 2.2px; font-weight: 700; color: #93B3A8; margin-bottom: 7px; }
.cg-eq-u { letter-spacing: 1.2px; color: #7E9A92; }
.cg-eq-puesto { padding-bottom: 14px; border-bottom: 1px solid rgba(179,148,92,.22); }
.cg-eq-puesto-cifra { display: flex; align-items: baseline; gap: 9px; }
.cg-eq-de { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; color: #A8C4BA; }
.cg-eq-dig { display: flex; align-items: flex-end; gap: 4px; min-height: 38px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 32px; font-weight: 600; color: #F3EBD9; line-height: 1; }
.cg-eq-dig .cg-act-dig { height: 38px; }
.cg-eq-puesto .cg-eq-dig .cg-act-dig { height: 42px; }
.cg-eq-bote { padding-top: 14px; }
.cg-eq-cajitas { display: flex; gap: 8px; margin-top: 13px; }
.cg-eq-caja { flex: 1; min-width: 0; padding: 9px 10px; border-radius: 7px; background: rgba(0,0,0,.2); border: 1px solid rgba(179,148,92,.2); }
.cg-eq-caja-k { display: block; font-size: 12px; letter-spacing: 1.3px; font-weight: 700; color: #7E9A92; margin-bottom: 4px; white-space: nowrap; }
.cg-eq-caja-v { font-variant-numeric: tabular-nums lining-nums; font-size: 17px; font-weight: 700; color: #F3EBD9; }
@media (prefers-reduced-motion: reduce) { .cg-brillo-sm::before { animation: none; } }
@media (max-width: 900px) {
  .cg-fila3 { margin-top: 18px; }
  .cg-plan { padding: 18px 16px; }
  .cg-equipo { flex: 1 1 auto; }
}

/* ===== ENCARGO 055 · Tarea 8 · Tus récords + En el coliseo =====
   Copiado de la maqueta (secciones «Tus récords» y «En el coliseo»). Rótulos y pies a 12 px, no los 9-10,5 px de la
   maqueta (UX-17). Los rótulos pueden partirse en dos líneas (a 12 px «MÁS MATRÍCULAS EN UN DÍA» no cabe en una celda de 1/5). */
.cg-rec-sec, .cg-col-sec { margin: 0 0 26px; }
.cg-rec-sec.oculto, .cg-col-sec.oculto { display: none; }
.cg-sec-cab { margin: 0 0 14px; }
.cg-rec { position: relative; display: flex; flex-wrap: nowrap; align-items: center; padding: 15px 4px; border-radius: 10px; border: 1px solid rgba(179,148,92,.4);
  background: linear-gradient(180deg, #14473C 0%, #103C34 55%, #0B332B 100%); box-shadow: 0 12px 28px rgba(30,20,8,.26); }
.cg-rec::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 8px; border-radius: 10px 10px 0 0;
  background-color: #E6DAC0; background-image: linear-gradient(rgba(168,142,100,.34), rgba(136,112,76,.5)), url('/assets/coliseo/textura_sillar.png');
  background-size: auto, 170px; background-blend-mode: multiply, normal; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.cg-rec-celda { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 13px; padding: 0 20px; }
.cg-rec-sep { width: 1px; align-self: stretch; background: rgba(179,148,92,.26); }
.cg-rec-ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: rgba(179,148,92,.14); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(179,148,92,.3); }
.cg-rec-celda.viva .cg-rec-ico { background: rgba(140,214,170,.16); box-shadow: inset 0 0 0 1px rgba(140,214,170,.45); }
.cg-rec-cuerpo { min-width: 0; }
.cg-rec-k { display: block; font-size: 12px; letter-spacing: 1.4px; font-weight: 700; color: #B3945C; margin-bottom: 5px; }
.cg-rec-celda.viva .cg-rec-k { color: #8CD6AA; }
.cg-rec-fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 10px; }
.cg-rec .cg-rec-cifra { min-height: 32px; gap: 4px; }
.cg-rec .cg-act-dig { height: 32px; }
.cg-rec .cg-act-pt { width: 5px; height: 5px; }
.cg-rec .cg-act-prefijo { font-size: 17px; color: #E8D5A8; }
.cg-rec-pie { font-size: 12px; color: #8CA49C; white-space: nowrap; padding-bottom: 4px; }
.cg-rec-link { font: inherit; font-size: 12px; color: #E8D5A8; white-space: nowrap; padding: 0 0 4px; background: none; border: 0; text-decoration: underline; cursor: pointer; }
.cg-rec-link:focus-visible { outline: 2px solid #B3945C; outline-offset: 3px; }

.cg-col-ver { margin-left: 8px; background: none; border: 0; padding: 0; font: 700 12px/1.2 var(--fuente); color: #806230; cursor: pointer; }
.cg-col-ver:focus-visible { outline: 2px solid #B3945C; outline-offset: 3px; }
.cg-col { display: flex; gap: 16px; flex-wrap: nowrap; align-items: stretch; }
.cg-col-vacio { flex: 1; padding: 18px; border-radius: 10px; border: 1px dashed rgba(128,98,48,.35); color: #5F645C; font-size: 13px; text-align: center; }
/* Equipo: placa verde oscura, más ancha */
.cg-col-eq { flex: 1.25 1 0; min-width: 0; position: relative; padding: 18px 22px 17px; border-radius: 10px; border: 1px solid rgba(179,148,92,.5);
  background: linear-gradient(180deg, #14473C 0%, #103C34 55%, #0B332B 100%); box-shadow: 0 12px 26px rgba(30,20,8,.3); }
.cg-col-remate { position: absolute; left: -1px; right: -1px; top: -1px; height: 7px; border-radius: 10px 10px 0 0;
  background-color: #E6DAC0; background-image: linear-gradient(rgba(168,142,100,.34), rgba(136,112,76,.5)), url('/assets/coliseo/textura_sillar.png');
  background-size: auto, 170px; background-blend-mode: multiply, normal; }
.cg-col-rot { display: flex; align-items: center; gap: 9px; margin: 4px 0 11px; font-size: 12px; letter-spacing: 2.2px; font-weight: 700; color: #8CD6AA; }
.cg-col-tit { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 23px; font-weight: 600; color: #FAF7F0; line-height: 1.2; }
.cg-col-sub { font-size: 12.5px; color: #A8C4BA; margin-top: 8px; line-height: 1.45; }
/* Compañero: clara, barra dorada en el canto izquierdo, inicial en disco de piedra. Sin cifras. */
.cg-col-co { flex: 1 1 0; min-width: 0; display: flex; border-radius: 10px; overflow: hidden; border: 1px solid rgba(128,98,48,.32); background: #FAF7F0; box-shadow: 0 8px 20px rgba(60,42,18,.1); }
.cg-col-barra { flex: 0 0 6px; background: linear-gradient(180deg, #E2CC9A, #B3945C 50%, #806230); }
.cg-col-co-cuerpo { flex: 1 1 auto; min-width: 0; padding: 17px 20px 16px; display: flex; gap: 14px; align-items: flex-start; }
.cg-col-disco { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(160deg, #EFE7D6, #D6C7A6); display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; font-weight: 700; color: #806230; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.cg-col-co-txt { min-width: 0; }
.cg-col-co-rot { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; font-size: 12px; letter-spacing: 2.2px; font-weight: 700; color: #806230; }
.cg-col-co-msg { display: block; font-size: 15px; color: #172B26; line-height: 1.4; overflow-wrap: anywhere; }
.cg-col-hace { display: block; font-size: 12px; color: #5F645C; margin-top: 8px; }
/* Tuyo: doble filo de oro, cartela «TÚ» colgando del borde, tu foto y la cifra en sillar. El único con montos y BEKY. */
.cg-col-mio { flex: 1 1 0; min-width: 0; position: relative; padding: 17px 20px 16px; border-radius: 10px; border: 2px solid #B3945C; background: linear-gradient(180deg, #FFFDF6, #F7EFDD); box-shadow: 0 10px 24px rgba(60,42,18,.16); }
.cg-col-borde { position: absolute; inset: 4px; border: 1px solid rgba(179,148,92,.4); border-radius: 6px; pointer-events: none; }
.cg-col-tu { position: absolute; top: -1px; right: 16px; padding: 5px 11px 6px; border-radius: 0 0 5px 5px; background: #B3945C; font-size: 12px; letter-spacing: 2px; font-weight: 800; color: #0B332B; }
.cg-col-mio-cab { display: flex; align-items: center; gap: 13px; }
.cg-col-foto { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #B3945C; display: block; object-fit: cover; object-position: 50% 14%; }
.cg-col-foto-mono { display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #EFE7D6, #D6C7A6); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; font-weight: 700; color: #806230; }
.cg-col-mio-rot { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: 12px; letter-spacing: 2.2px; font-weight: 700; color: #806230; }
.cg-col .cg-col-cifra { min-height: 34px; gap: 4px; }
.cg-col .cg-col-cifra .cg-act-dig { height: 34px; }
.cg-col .cg-col-cifra .cg-act-pt { width: 5px; height: 5px; }
.cg-col .cg-col-cifra .cg-act-prefijo { font-size: 17px; }
.cg-col-mio-beky { font-size: 12.5px; color: #172B26; margin-top: 12px; }
.cg-col-mio .cg-col-hace { margin-top: 7px; }
@media (max-width: 820px) {
  /* récords con scroll lateral propio, nunca de la página; los avisos se apilan */
  .cg-rec { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cg-rec-celda { flex: 0 0 72%; padding: 0 16px; }
  .cg-col { flex-direction: column; }
  .cg-col-eq, .cg-col-co, .cg-col-mio { flex: 1 1 auto; }
  .cg-col-ver { margin-left: 0; }
}
/* Títulos y filtros de estas dos secciones viven sobre la página (no sobre una tarjeta de marfil): toman el color del tema, como «Tu actividad». */
.cg-sec-cab .cg-sec { color: var(--texto); }
.cg-sec-cab .cg-jor-tab { color: var(--texto-2); border-color: var(--linea-2); }
.cg-sec-cab .cg-jor-tab.activo { background: #103C34; border-color: #103C34; color: #E8D5A8; }
.cg-col-ver { color: var(--oro-claro, #B3945C); }

/* ===== 060 · Piezas oscuras sobre el marfil =====
   Los tapetes de los juegos, la marquesina y las tarjetas del perfil siguen siendo oscuros (son
   arte de mesa y de credencial). Dentro de ellos los tokens vuelven a su valor oscuro, así el
   texto de siempre —var(--texto), var(--oro)…— se lee igual que antes del cambio de piel. */
.tm-caja, .rodillos-juego, .marquesina, .bj-pano, .dados-pano, .coh-pano, .min-pano, .rul-pano,
.pk-pano, .cy-pano, .tri-pano, .bg-pano, .pm-credencial, .pm-hoja, .tarjeta-grado, .ascenso,
.pm-disco.cerrado, .pm-monograma, .mini-retrato, .pm-foto-fila .m, .podio-col.p1 .base, .pm-marca-sup, .pm-miembro, .pm-volver {
  --texto: var(--tapete-texto); --texto-2: var(--tapete-texto-2); --tenue: var(--tapete-tenue);
  --apagado: var(--tapete-tenue);
  --oro: var(--tapete-oro); --oro-claro: var(--tapete-oro-cl); --oro-oscuro: var(--tapete-oro-os);
  --oro-tinta: var(--tapete-tinta);
  --superficie: var(--tapete-sup); --superficie-2: var(--tapete-sup-2); --sup-3: var(--tapete-sup-3);
  --linea: var(--tapete-linea); --linea-2: var(--tapete-linea-2);
  --rojo: var(--tapete-rojo); --verde: var(--tapete-verde); --rojo-claro: var(--tapete-rojo);
  color: var(--texto);
}

/* ENCARGO 055B · punto 5 y 9: «Tu jornada» compacta (filas de misión como la maqueta) y «Tus tareas de hoy» como panel propio al final.
   .cg-sr = texto solo para lector de pantalla (el contador «2/3» de las misiones ya no se ve, sale en las pastillas). */
.cg-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cg-jornada .mision { padding: 11px 0; gap: 13px; align-items: center; border-width: 0 0 1px 0; }
.cg-jornada .mision .marca { width: 22px; height: 22px; flex: 0 0 22px; font-size: 12px; }
.cg-jornada .mision .titulo { font-weight: 400; }
.cg-jornada .mision.cumplida .titulo { text-decoration: none; }
.cg-jornada .mision .barra.fina { height: 4px; }
/* «Tus tareas de hoy» (055B punto 9): portado de la maqueta tareas_panel.html (bloque .tt-*), con prefijo cg-tt-. Textos a 12 px mínimo (UX-17), no los 9,5 de la maqueta. */
.cg-tt-sec { margin: 30px 0 26px; }
.cg-tt-panel { padding: 20px 26px 18px; color: #172B26; }
.cg-tt-panel .vacio { color: #5F645C; }
.cg-tt-res { display: flex; align-items: center; gap: 26px; padding: 4px 2px 16px; border-bottom: 1px solid rgba(128,98,48,.2); }
.cg-tt-bloque { display: flex; align-items: flex-end; gap: 10px; }
.cg-tt-bloque .de { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; color: #5F645C; padding-bottom: 3px; white-space: nowrap; }
.cg-tt-cifra .cg-act-dig { height: 40px; }
.cg-tt-bloque.salto .cg-tt-cifra { animation: tarea-salto .55s ease; }
.cg-tt-sepv { width: 1px; align-self: stretch; background: rgba(128,98,48,.2); }
.cg-tt-medio { display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; min-width: 220px; }
.cg-tt-linea { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: #5F645C; }
.cg-tt-linea b { color: #172B26; }
.cg-tt-linea b.bronce, .cg-tt-faltan b.bronce { color: #806230; }
.cg-tt-linea b.bronce { font-size: 15px; }
.cg-tt-barra { position: relative; height: 10px; border-radius: 999px; background: rgba(128,98,48,.15); box-shadow: inset 0 1px 2px rgba(80,62,34,.18); }
.cg-tt-barra > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #B3945C, #806230); transition: width .5s ease; }
.cg-tt-faltan { font-size: 12.5px; color: #5F645C; white-space: nowrap; }
.cg-tt-faltan b { color: #172B26; }
.cg-tt-listo { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 600; color: #1F6349; }
.cg-tt-rejilla { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; }
.cg-tt-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; padding: 8px 0; border-bottom: 1px solid rgba(128,98,48,.14); min-height: 52px; }
.cg-tt-ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: #EDF1EC; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.cg-tt-txt { flex: 1 1 0; min-width: 0; display: block; margin: 0; padding: 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; }
button.cg-tt-txt { cursor: pointer; }
.cg-tt-tit { display: block; font-size: 13.5px; color: #172B26; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-tt-sub { display: block; margin-top: 3px; font-size: 12px; letter-spacing: 1.2px; font-weight: 700; color: #666B64; text-transform: uppercase; }
.cg-tt-sub .mal { color: #B4472F; letter-spacing: .2px; font-size: 12px; font-weight: 600; text-transform: none; }
.cg-tt-premio { flex: 0 0 auto; font-family: var(--fuente); font-size: 12.5px; font-weight: 800; color: #806230; font-variant-numeric: tabular-nums lining-nums; min-width: 30px; text-align: right; }
.cg-tt-acc { flex: 0 0 auto; width: 132px; display: flex; justify-content: flex-end; }
.cg-tt-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 7px; border: 1px solid rgba(179,148,92,.55); background: transparent; color: #806230; font-family: var(--fuente); font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.cg-tt-btn:hover { background: rgba(179,148,92,.12); }
.cg-tt-btn:focus-visible, button.cg-tt-txt:focus-visible { outline: 2px solid #B3945C; outline-offset: 3px; }
.cg-tt-marca { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.cg-tt-check { width: 22px; height: 22px; border-radius: 50%; background: #2E7A62; display: flex; align-items: center; justify-content: center; }
.cg-tt-fila.hecha .cg-tt-tit { color: #666B64; text-decoration: line-through; text-decoration-color: rgba(142,147,139,.6); }
.cg-tt-fila.hecha .cg-tt-ico { background: #E4EFE8; }
.cg-tt-fila.hecha .cg-tt-premio { color: #666B64; }
.cg-tt-fila.vencida { opacity: .55; }
.cg-tt-desc { flex: 1 0 100%; padding: 6px 4px 4px 48px; font-size: 13px; line-height: 1.4; color: #5F645C; }
.cg-tt-desc[hidden] { display: none; }
.cg-tt-nota { margin-top: 12px; font-size: 12px; color: #666B64; line-height: 1.5; }
@media (max-width: 900px) {
  .cg-tt-rejilla { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cg-tt-panel { padding: 16px 14px; }
  .cg-tt-res { flex-wrap: wrap; gap: 12px 18px; }
  .cg-tt-sepv { display: none; }
  .cg-tt-cifra .cg-act-dig { height: 32px; }
  .cg-tt-fila { row-gap: 8px; }
  .cg-tt-txt { flex: 1 1 calc(100% - 100px); }
  .cg-tt-sub { white-space: normal; line-height: 1.5; }
  .cg-tt-tit { white-space: normal; }
  .cg-tt-acc { width: 100%; justify-content: flex-start; padding-left: 48px; }
  .cg-tt-btn { height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .cg-tt-bloque.salto .cg-tt-cifra { animation: none; } .cg-tt-barra > span { transition: none; } }
/* Récords de la casa (057 B): tira entre el podio y la tabla. */
.records-casa { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; padding: 14px; border: 1px solid rgba(212, 176, 106, .3); border-radius: 12px; background: rgba(125, 187, 145, .06); }
.records-casa.oculto { display: none; }
.record { text-align: center; padding: 4px 6px; }
.record-etiqueta { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.record-cifra { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 48px; font-weight: 700; line-height: 1.05; margin: 4px 0; }
.record-quien { font-size: 12px; color: var(--apagado); }
.record.halo .record-cifra { color: var(--oro-claro); text-shadow: 0 0 14px rgba(212, 176, 106, .75), 0 0 28px rgba(212, 176, 106, .35); }

/* El Muro (057 D): hitos en paneles del sistema, sin fondos propios. */
.muro { margin-top: 16px; }
.muro-titulo { font-family: 'Cormorant Garamond', Georgia, serif; margin: 0; }
.muro-lista { display: grid; gap: 10px; margin: 14px 0; }
.hito { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linea); background: rgba(255, 255, 255, .04); }
.hito.mio { border-color: rgba(212, 176, 106, .45); }
.hito-cuerpo { flex: 1; min-width: 0; }
.hito-nombre { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hito-texto { font-size: 12px; letter-spacing: .06em; font-variant: small-caps; margin: 2px 0 8px; }
.hito-fecha { font-size: 12px; color: var(--apagado); white-space: nowrap; }
.hito-aplauso { border: 1px solid var(--linea); background: rgba(255, 255, 255, .05); color: var(--texto); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.hito-aplauso.on { background: var(--oro); border-color: var(--oro); color: var(--oro-tinta); }

/* ENCARGO 058 · Global Party: ruleta, cofres, juegos y duelos apilados en una sola pantalla */
.party-bloque { margin-top: 22px; }
.party-titulo { margin: 0 0 10px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
/* 071 · T3: en Mi ruta la pestaña ya dice «Retos»; el rótulo suelto se esconde (el nodo queda por las pruebas) */
#rutaRetos > .party-titulo { display: none; }
.party-pie { margin-top: 22px; text-align: center; }

/* 064 · TAREA 1 — cabecera de página de Global Party (pieza compartida CGP.cabeceraPagina; la mayoría del CSS vive en
   coliseo_paginas.css). Aquí solo lo propio de Party: el estado de las salas, la cuenta atrás y los pies de la placa. */
.party-cab { margin-bottom: 18px; border-radius: 12px; overflow: hidden; }
.cg-lema-fila { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cg-estado { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 11px; border-radius: 999px; font-family: var(--fuente); font-style: normal;
  font-size: 12px; font-weight: 800; letter-spacing: 1.6px; white-space: nowrap; }
.cg-estado.abierto { background: rgba(46, 122, 98, .14); color: var(--cg-ok); box-shadow: inset 0 0 0 1px rgba(46, 122, 98, .35); }
.cg-estado.cerrado { background: rgba(250, 247, 240, .8); color: var(--cg-bronce-osc); box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .4); }
.cg-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--cg-verde-vivo); box-shadow: 0 0 0 3px rgba(46, 122, 98, .18); }
.cg-party-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 14px; font: 600 12px/1.4 var(--fuente); color: var(--cg-texto-2); }
.cg-cuenta b { color: var(--cg-texto); font-variant-numeric: tabular-nums lining-nums; }
.cg-party-nota { max-width: 640px; margin-top: 8px; font: 400 12px/1.45 var(--fuente); color: var(--cg-texto-2); }
.cg-placa-barra { width: 168px; margin-top: 11px; }
.cg-placa-barra.ancha { width: 190px; }
.cg-placa-pie { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--cg-texto-2); white-space: nowrap; }
.cg-placa-pie strong { color: var(--cg-texto); font-variant-numeric: tabular-nums lining-nums; }
.cg-placa-pie strong.cg-bronce { color: var(--cg-bronce-osc); }
.cg-placa-beky { display: block; margin-top: 3px; }
.salas-tabs[hidden] { display: none; }   /* 064: las pestañas de la cabecera lo reemplazan */
@media (max-width: 820px) { .cg-placa-barra, .cg-placa-barra.ancha { width: 100%; } }

/* 068 · TAREA 1 — cabecera de Mi ruta (misma pieza CGP.cabeceraPagina). La cifra de cada celda es «N» en piedra y «de M» en
   Cormorant al lado, como la maqueta ruta_hoy. */
.cg-placa-cifra { display: flex; align-items: flex-end; gap: 9px; }
.cg-placa-de { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; line-height: 1; color: var(--cg-texto-2); padding-bottom: 3px; }

/* 064 · TAREA 2 — los 13 juegos (porte de gp_juegos). `.cg-pagina` es el lienzo marfil de la página; las piezas `.cg-*` son las de la
   maqueta con prefijo. La mesa que se abre al tocar «Jugar» no se toca: solo hereda el lienzo. Textos chicos de la maqueta (10-11 px) en 12. */
.cg-pagina { background: var(--cg-marfil); border-radius: 12px; padding: 26px 32px 40px; font-family: var(--fuente); color: var(--cg-texto); }
.cg-cab { display: flex; align-items: center; gap: 20px; margin: 0 0 14px; }
.cg-hilo { flex-grow: 1; height: 1px; background: rgba(128, 98, 48, .28); }
.cg-sec { margin: 0; font-family: var(--fuente-titulos); font-size: 31px; font-weight: 600; line-height: 1; color: var(--cg-texto); text-transform: none; letter-spacing: 0; }
.cg-rot { font-size: 12px; letter-spacing: 2.6px; font-weight: 700; color: var(--cg-bronce-osc); text-transform: uppercase; }
.cg-k { display: block; margin-bottom: 6px; font-size: 12px; letter-spacing: 2.2px; font-weight: 700; color: var(--cg-verde-dato); text-transform: uppercase; white-space: nowrap; }
.cg-sup { position: relative; background: var(--cg-superficie); border: 1px solid rgba(128, 98, 48, .34); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 12px 28px rgba(60, 42, 18, .14); }
.cg-sup::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 8px; border-radius: 10px 10px 0 0;
  background-color: var(--cg-sillar); background-image: linear-gradient(rgba(168, 142, 100, .34), rgba(136, 112, 76, .5)), url('/assets/coliseo/textura_sillar.png');
  background-size: auto, 170px; background-blend-mode: multiply, normal; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 0 rgba(128, 98, 48, .4); }
.cg-sup > * { position: relative; }
.cg-sup.cg-verde { background: linear-gradient(180deg, var(--cg-verde-2) 0%, var(--cg-verde) 55%, var(--cg-verde-borde) 100%); border-color: rgba(179, 148, 92, .45);
  box-shadow: 0 12px 28px rgba(30, 20, 8, .26); color: var(--cg-marfil); }
.cg-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 5px; font-size: 12px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; }
.cg-j-tags .cg-tag { max-width: 100%; height: auto; min-height: 22px; padding-top: 2px; padding-bottom: 2px; white-space: normal; }
.cg-destacado .cg-k { white-space: normal; }
.cg-tag.gris { background: var(--cg-papel-3); color: var(--cg-texto-2); box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .2); }
.cg-tag.bronce { background: rgba(179, 148, 92, .14); color: var(--cg-bronce-osc); box-shadow: inset 0 0 0 1px rgba(179, 148, 92, .38); }
.cg-tag.lleno { background: var(--cg-verde-lleno); color: var(--cg-superficie-alta); }
.cg-btn-pri { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; margin: 0; border: 0; border-radius: 7px; cursor: pointer;
  background: linear-gradient(180deg, var(--cg-bronce), var(--cg-bronce-osc)); color: var(--cg-superficie-alta); font: 700 13px/1 var(--fuente); white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 10px rgba(96, 72, 32, .28); }
.cg-btn-pri:disabled { background: var(--cg-papel-3); color: var(--cg-texto-3); box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .18); cursor: default; }
.cg-rejilla { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.cg-juego { display: flex; flex-direction: column; padding: 20px 18px 14px; }
.cg-juego.abierta { border-color: var(--cg-bronce); box-shadow: 0 0 0 2px var(--cg-bronce), 0 12px 28px rgba(60, 42, 18, .14); }
.cg-j-cab { display: flex; align-items: center; gap: 14px; min-height: 60px; }
.cg-j-ico { flex: 0 0 auto; position: relative; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: repeating-conic-gradient(from -7.5deg, var(--cg-verde) 0 30deg, var(--cg-ficha) 30deg 45deg);
  box-shadow: inset 0 0 0 2px var(--cg-ficha-filo), inset 0 0 0 3px rgba(255, 243, 208, .35), 0 4px 10px rgba(60, 42, 18, .22); }
.cg-j-ico::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 38% 30%, var(--cg-superficie-alta) 0%, var(--cg-papel-3) 62%, var(--cg-sillar) 100%);
  box-shadow: 0 0 0 1.5px var(--cg-bronce), inset 0 1px 1px rgba(255, 255, 255, .9), inset 0 -3px 5px rgba(60, 42, 18, .13); }
.cg-j-ico svg { position: relative; }
.cg-juego h3 { margin: 0; font-family: var(--fuente-titulos); font-size: 21px; font-weight: 600; line-height: 1.08; letter-spacing: 0; text-transform: none; color: var(--cg-texto); overflow-wrap: anywhere; }
.cg-j-desc { margin: 13px 0 0; font-size: 12px; line-height: 1.5; color: var(--cg-texto-2); }
.cg-j-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; min-height: 22px; }
.cg-juego .cg-j-pie { position: static; display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 11px; border-top: 1px solid rgba(128, 98, 48, .16); }
.cg-apuesta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--cg-texto); font-variant-numeric: tabular-nums lining-nums; }
.cg-apuesta small { font-size: 12px; font-weight: 700; color: var(--cg-bronce-osc); letter-spacing: .4px; }
/* El botón de «Jugar» estira su toque a toda la carta (::after): un asesor en celular no tiene que apuntar al enlace. */
.cg-accion { margin: 0 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: 700 12.5px/1.2 var(--fuente); color: var(--cg-bronce-osc); }
.cg-accion::after { content: ''; position: absolute; inset: 0; border-radius: 10px; }
.cg-accion:focus-visible { outline: none; }
.cg-accion:focus-visible::after { outline: 2px solid var(--cg-bronce); outline-offset: -2px; }
.cg-accion:disabled { color: var(--cg-texto-3); font-weight: 600; font-size: 12px; cursor: default; }
.cg-juego.apagado .cg-j-ico { filter: saturate(.35); opacity: .85; }
.cg-destacado { grid-column: span 3; display: flex; align-items: center; gap: 22px; padding: 20px 24px 18px; }
.cg-medallon { flex: 0 0 auto; position: relative; width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: repeating-conic-gradient(from -7.5deg, var(--cg-verde-borde) 0 30deg, var(--cg-ficha) 30deg 45deg);
  box-shadow: inset 0 0 0 2px var(--cg-ficha-filo), 0 0 0 4px rgba(179, 148, 92, .18), 0 0 30px rgba(214, 170, 90, .35); }
.cg-medallon::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: radial-gradient(circle at 38% 30%, var(--cg-verde-vivo), var(--cg-verde-borde) 75%); box-shadow: 0 0 0 1.5px var(--cg-bronce); }
.cg-medallon svg { position: relative; }
.cg-destacado h3 { margin: 0; font-size: 29px; color: var(--cg-superficie); }
.cg-destacado p { margin: 9px 0 0; max-width: 440px; font-size: 12.5px; line-height: 1.5; color: var(--cg-texto-verde); }
.cg-destacado-datos { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.cg-destacado-datos > div { display: flex; gap: 8px; }
.cg-interna { min-width: 104px; padding: 9px 10px; border-radius: 7px; background: rgba(0, 0, 0, .2); border: 1px solid rgba(179, 148, 92, .2); }
.cg-interna.pozo { min-width: 156px; }
.cg-interna .cg-k { margin-bottom: 4px; font-size: 12px; letter-spacing: 1.3px; color: var(--cg-texto-verde-3); }
.cg-interna b { font-size: 24px; font-weight: 700; color: var(--cg-marfil); font-variant-numeric: tabular-nums lining-nums; }
.cg-nota-pie { margin: 16px 2px 0; font-size: 12px; color: var(--cg-texto-3); }
@media (max-width: 820px) {
  .cg-pagina { padding: 18px 12px 28px; }
  .cg-cab { flex-wrap: wrap; gap: 6px 14px; }
  .cg-hilo { display: none; }
  .cg-cab .cg-rot { flex-basis: 100%; order: 3; line-height: 1.6; }
  .cg-sec { font-size: 27px; }
  .cg-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cg-juego { padding: 16px 12px 12px; }
  .cg-j-cab { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; }
  .cg-j-ico { width: 50px; height: 50px; }
  .cg-juego h3 { font-size: 19px; }
  .cg-j-desc { display: none; }
  .cg-juego .cg-j-pie { flex-wrap: wrap; }
  .cg-destacado { grid-column: 1 / -1; flex-wrap: wrap; }
  .cg-destacado-datos { align-items: stretch; width: 100%; }
  .cg-destacado-datos .cg-btn-pri { width: 100%; }
}

/* 064 · TAREA 3 — la ruleta (porte de gp_ruleta). El dibujo de la rueda es JS (ruedaColiseo); aquí van el marco, la aguja, la leyenda y la
   tarjeta verde «Tu giro». Los ids y las clases que casino.js busca (.rueda-caja, .aguja, .rueda-hub, .boton-girar, .lista-simple) siguen. */
.cg-gema { flex: 0 0 auto; width: 10px; height: 10px; transform: rotate(45deg); border-radius: 2px; }
.cg-gema.comun { background: #B9B3A4; box-shadow: inset 0 0 0 1px rgba(60, 42, 18, .25); }
.cg-gema.raro { background: var(--cg-verde-lleno); }
.cg-gema.epico { background: linear-gradient(135deg, var(--cg-bronce-brillo), var(--cg-bronce-osc)); }
.cg-gema.legendario { background: linear-gradient(135deg, #FFF3C4, #D9A93F 55%, #8A6215); box-shadow: 0 0 8px rgba(217, 169, 63, .8); }
.cg-ruleta-fila { display: flex; gap: 22px; align-items: stretch; }
.cg-ruleta-caja { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 36px; padding: 26px 34px 22px; }
.cg-rueda-col { flex: 0 0 auto; width: min(540px, 58%); min-width: 0; margin: -20px; }
.cg-ruleta .rueda-envoltura { display: block; }
.cg-ruleta .rueda-caja { width: 100%; max-width: 560px; margin: 0 auto; }
.cg-ruleta .rueda-caja canvas { filter: none; }   /* la sombra ya va dentro del dibujo */
/* La aguja es el SVG de AGUJA_COLISEO: su viewBox es 60 x 96 sobre una rueda de 660, así que mide el 9,09 % de la caja y su punta
   (y = -226) entra unos píxeles en las casillas; el top es la posición de su borde superior (y = -318) en ese mismo marco. */
.cg-ruleta .aguja { top: 1.82%; width: 9.09%; height: auto; border: 0; filter: none; transform-origin: 50% 20%; }
.cg-ruleta .aguja svg { width: 100%; height: auto; }
.cg-ruleta .rueda-beki { width: 11.5%; }
.cg-leyenda { flex: 1 1 0; min-width: 0; }
.cg-leyenda > .k { display: block; margin: 0 0 10px; font-size: 12px; letter-spacing: 2.2px; color: var(--cg-texto-2); }
.cg-leyenda .lista-simple > div { align-items: center; justify-content: flex-start; gap: 11px; padding: 8px 0; border-bottom: 1px solid rgba(128, 98, 48, .14); font-size: 13px; color: var(--cg-texto); }
.cg-leyenda .lista-simple > div:last-child { border-bottom: 0; }
.cg-leyenda .lista-simple b { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--cg-texto-2); font-variant-numeric: tabular-nums lining-nums; }
.cg-leyenda .lista-simple b i { font-style: normal; font-weight: 700; color: var(--cg-texto); }
.cg-regla-racha { margin-top: 14px; padding: 12px 14px; border-radius: 7px; background: rgba(46, 122, 98, .08); border: 1px solid rgba(46, 122, 98, .25);
  font-size: 12px; line-height: 1.5; color: var(--cg-ok); }
.cg-regla-racha[hidden] { display: none; }
.cg-ruleta .vacio { font-family: var(--fuente-titulos); font-style: italic; font-size: 19px; color: var(--cg-texto-3); border: 0; background: none; padding: 6px 0; }

/* la tarjeta verde «Tu giro» */
.cg-giro-tarjeta { flex: 0 0 372px; display: flex; flex-direction: column; padding: 22px 24px; }
.cg-giro-cab { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.cg-giro-cab .cg-k { margin: 0; }
.cg-giro-resto { flex: 1; }
.cg-giro-cab #chipGiros { min-height: 22px; padding: 0 8px; border-radius: 5px; font-size: 12px; letter-spacing: .2px; background: rgba(0, 0, 0, .22); border: 0;
  color: var(--cg-bronce-claro); box-shadow: inset 0 0 0 1px rgba(179, 148, 92, .35); }
.cg-giro-precio { margin-top: 16px; }
.cg-k-v { color: var(--cg-texto-verde-2); }
.cg-k-b { color: var(--cg-bronce); letter-spacing: 2px; }
.cg-giro-cifra { min-height: 46px; }
.cg-giro-tarjeta .boton-girar { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 52px; min-height: 52px; margin: 18px 0 0; padding: 0 26px;
  border-radius: 7px; font: 700 15px/1 var(--fuente); letter-spacing: .3px; color: var(--cg-superficie-alta); text-shadow: none;
  background: linear-gradient(180deg, var(--cg-bronce), var(--cg-bronce-osc)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 10px rgba(96, 72, 32, .28); }
.cg-giro-tarjeta .boton-girar:hover:not(:disabled) { transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 14px rgba(96, 72, 32, .4); }
.cg-giro-tarjeta .boton-girar:disabled { background: var(--cg-papel-3); color: var(--cg-texto-3); box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .18); opacity: 1; }
.cg-giro-pie { margin-top: 9px; font-size: 12px; color: var(--cg-texto-verde-2); text-align: center; }
.cg-giro-internas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.cg-giro-internas > div.cg-interna { display: block; min-width: 0; padding: 9px 10px; border-bottom: 1px solid rgba(179, 148, 92, .2); }
#rulRetorno.cg-giro-internas .cg-interna b { display: block; font-size: 17px; text-align: left; color: var(--cg-marfil); }
#rulRetorno.cg-giro-internas .cg-interna b.gana { color: var(--cg-verde-dato); }
.cg-giro-internas .cg-interna small { display: block; margin-top: 2px; font-size: 12px; color: var(--cg-texto-verde-3); overflow-wrap: anywhere; }
.cg-giro-internas .cg-k { white-space: normal; letter-spacing: 1.3px; margin-bottom: 4px; color: var(--cg-texto-verde-3); }
.cg-giro-internas .vacio { grid-column: 1 / -1; color: var(--cg-texto-verde-2); }
.cg-giro-ultimos { margin-top: 20px; }
.cg-giro-ultimos .lista-simple > div, .cg-giros-mas > div { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid rgba(179, 148, 92, .18); font-size: 12.5px; color: var(--cg-texto-verde); }
.cg-giro-ultimos .lista-simple > div svg, .cg-giros-mas > div svg { flex: 0 0 auto; color: var(--cg-bronce); }
.cg-giro-ultimos .lista-simple b.premio, .cg-giros-mas b.premio { margin-left: auto; color: var(--cg-marfil); font-weight: 700; text-align: right; }
.cg-giro-ultimos b.gana { padding: 2px 8px; border-radius: 5px; background: rgba(0, 0, 0, .22); color: var(--cg-bronce-claro); font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(179, 148, 92, .35); }
.cg-giros-mas summary { cursor: pointer; padding-top: 12px; font-size: 12px; font-weight: 700; color: var(--cg-bronce-claro); }
@media (max-width: 820px) {
  .cg-ruleta-fila { flex-direction: column; }
  .cg-ruleta-caja { flex-direction: column; padding: 18px 14px; gap: 18px; }
  .cg-rueda-col { width: 100%; margin: -10px 0 0; }
  .cg-leyenda { width: 100%; }
  .cg-giro-tarjeta { flex: 1 1 auto; width: 100%; }
}

/* ===================================================================================================================
   063 · EL MURO (Ranking + Logros) — porte de la maqueta muro_el_muro. Todo cuelga de `.mu-pagina` para no pisar nada.
   La cabecera es la pieza compartida de PARTY (coliseo_paginas.css); aquí va el resto de la página.
   =================================================================================================================== */
.mu-pagina { background: #F4F0E7; border-radius: 12px; overflow: hidden; --mu-bronce: #B3945C; --mu-bronce-o: #806230; --mu-tinta: #172B26; --mu-verde: #103C34; --mu-papel: #FAF7F0; --mu-tenue: #5F645C; }
.mu-pagina .mu-cont { max-width: 1520px; margin: 0 auto; padding: 26px 32px 40px; font-family: var(--fuente); color: var(--mu-tinta); }
.mu-pagina .mu-k { display: block; font-size: 12px; letter-spacing: 2.2px; font-weight: 700; color: #8CD6AA; white-space: nowrap; }
.mu-pagina .mu-rot { font-size: 12px; letter-spacing: 2.6px; font-weight: 700; color: var(--mu-bronce-o); }
.mu-pagina .mu-cab { display: flex; align-items: center; gap: 20px; margin: 2px 0 10px; }
.mu-pagina .mu-cab-grande { margin: 0 0 14px; }
.mu-pagina .mu-hilo { flex-grow: 1; height: 1px; background: rgba(128, 98, 48, .28); }
.mu-pagina .mu-sec { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 27px; font-weight: 600; color: var(--mu-tinta); line-height: 1; text-transform: none; letter-spacing: 0; }
.mu-pagina .mu-cab-grande .mu-sec { font-size: 31px; }
.mu-pagina .mu-sup { position: relative; background: var(--mu-papel); border: 1px solid rgba(128, 98, 48, .34); border-radius: 10px; padding: 20px 26px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 12px 28px rgba(60, 42, 18, .14); }
.mu-pagina .mu-sup::before, .mu-pagina .mu-arena::after, .mu-pagina .mu-ascenso::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 8px; border-radius: 10px 10px 0 0;
  background-color: #E6DAC0; background-image: linear-gradient(rgba(168, 142, 100, .34), rgba(136, 112, 76, .5)), url('/assets/coliseo/textura_sillar.png');
  background-size: auto, 170px; background-blend-mode: multiply, normal; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 0 rgba(128, 98, 48, .4); }
.mu-pagina .mu-sup > * { position: relative; }
.mu-pagina .vacio { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 19px; color: #666B64; border: 0; background: none; padding: 6px 0; text-align: left; }

/* la cabecera: botón del perfil y la placa */
.mu-pagina .mu-btn-lin { display: inline-flex; align-items: center; gap: 8px; height: 36px; margin-top: 18px; padding: 0 18px; border-radius: 7px; cursor: pointer;
  border: 1px solid rgba(179, 148, 92, .55); background: rgba(255, 253, 248, .55); color: var(--mu-bronce-o); font: 700 13px/1 var(--fuente); }
.mu-pagina .mu-puesto-fila { display: inline-flex; align-items: flex-end; gap: 10px; }
.mu-pagina .mu-de { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; color: var(--mu-tenue); padding-bottom: 4px; }
.mu-pagina .mu-salto.sube, .mu-pagina .var.sube { color: #1F6349; font-weight: 800; }
.mu-pagina .mu-salto.baja, .mu-pagina .var.baja { color: #B4472F; font-weight: 800; }
.mu-pagina .var.igual { color: #666B64; }
.mu-pagina .mu-manda { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 26px; color: var(--mu-bronce-o); }

/* la arena del podio */
.mu-pagina .mu-arena { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid rgba(179, 148, 92, .45); color: #F3EBD9;
  background: radial-gradient(ellipse 46% 62% at 50% 0%, rgba(226, 204, 154, .22) 0%, rgba(226, 204, 154, .07) 46%, rgba(226, 204, 154, 0) 72%), linear-gradient(180deg, #14473C 0%, #103C34 55%, #0B332B 100%);
  box-shadow: 0 18px 40px rgba(30, 20, 8, .30); }
.mu-pagina .mu-arena::before { content: ''; position: absolute; inset: 0; background-image: url('/assets/coliseo/textura_sillar.png'); background-size: 420px; opacity: .06; mix-blend-mode: screen; pointer-events: none; }
.mu-pagina .mu-arena > * { position: relative; z-index: 1; }
.mu-pagina .mu-arena-cab { display: flex; align-items: flex-end; gap: 18px; padding: 30px 30px 0; }
.mu-pagina .mu-arena-cab h2 { margin: 6px 0 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 34px; font-weight: 600; color: #FAF7F0; line-height: 1; text-transform: none; letter-spacing: 0; }
.mu-pagina .mu-ventana { font-size: 12px; color: #93B3A8; margin-top: 8px; }
.mu-pagina .mu-controles { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.mu-pagina .mu-seg { display: inline-flex; align-items: center; padding: 3px; border-radius: 999px; border: 1px solid rgba(179, 148, 92, .42); background: rgba(0, 0, 0, .2); }
.mu-pagina .mu-seg > button, .mu-pagina .mu-seg-sel { position: relative; display: inline-flex; align-items: center; height: 30px; padding: 0 15px; border-radius: 999px; border: 0; background: transparent;
  font: 600 12px/1 var(--fuente); color: #A8C4BA; white-space: nowrap; cursor: pointer; }
.mu-pagina .mu-seg > button.on, .mu-pagina .mu-seg-sel.on { background: #F4F0E7; color: #103C34; font-weight: 700; box-shadow: 0 2px 6px rgba(0, 0, 0, .28); }
.mu-pagina .mu-seg-sel select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.mu-pagina .mu-podio { display: flex; flex-direction: column; }
.mu-pagina .mu-podio, .mu-pagina .mu-podio-fila { padding: 16px 30px 0; }
.mu-pagina .mu-podio { flex-direction: row; justify-content: center; align-items: flex-end; gap: 34px; }
.mu-pagina .mu-podio-fila { display: flex; justify-content: center; align-items: flex-end; gap: 34px; }
.mu-pagina .mu-podio:has(.mu-podio-vacio) { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.mu-pagina .mu-podio:has(.mu-podio-vacio) .mu-podio-fila { padding: 16px 30px 0; }
.mu-pagina .col { flex: 0 0 296px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mu-pagina .corona { height: 38px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 6px; color: #E2CC9A; font-size: inherit; filter: drop-shadow(0 0 10px rgba(226, 204, 154, .55)); }
.mu-pagina .marco { position: relative; padding: 4px; border-radius: 12px; background: linear-gradient(150deg, #E2CC9A, #B3945C 46%, #806230); box-shadow: 0 14px 26px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .5); }
.mu-pagina .marco .f { display: block; width: 100px; height: 100px; object-fit: cover; object-position: 50% 22%; border-radius: 9px; }
.mu-pagina .col.c1 .marco .f { width: 124px; height: 124px; }
.mu-pagina .f.mono { display: flex; align-items: center; justify-content: center; border-radius: 9px; background: linear-gradient(160deg, #1B5A4B, #0E3A31); color: #E8D5A8; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; }
.mu-pagina .marco .f.mono { font-size: 40px; }
.mu-pagina .col.c1 .marco .f.mono { font-size: 50px; }
.mu-pagina .marco .ins { position: absolute; right: -22px; bottom: -14px; width: auto; height: 52px; filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .5)); }
.mu-pagina .col.c1 .marco .ins { height: 62px; }
.mu-pagina .col .nom { margin-top: 16px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; font-weight: 600; color: #FAF7F0; line-height: 1.05; display: flex; align-items: center; gap: 8px; justify-content: center; max-width: 100%; margin-bottom: 0; }
.mu-pagina .col .grado { margin-top: 4px; font-size: 12px; letter-spacing: 2px; font-weight: 700; color: #B3945C; }
.mu-pagina .col .cifra { margin-top: 12px; display: flex; justify-content: center; }
.mu-pagina .col .sub { margin: 7px 0 14px; font-size: 12px; color: #93B3A8; }
.mu-pagina .col .sub b { color: #E8D5A8; font-variant-numeric: tabular-nums lining-nums; }
.mu-pagina .tu { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; margin-left: 6px; border-radius: 5px; background: linear-gradient(180deg, #B3945C, #806230); color: #FFFDF8; font: 800 12px/1 var(--fuente); letter-spacing: 1px; }
.mu-pagina .ped { position: relative; width: 100%; height: 116px; border-radius: 7px 7px 0 0; display: flex; justify-content: center; align-items: flex-start; background-color: #E3D6BA;
  background-image: linear-gradient(180deg, rgba(255, 251, 240, .55) 0%, rgba(255, 251, 240, .08) 22%, rgba(110, 86, 50, .06) 60%, rgba(84, 64, 34, .32) 100%), url('/assets/coliseo/textura_sillar.png'); background-size: auto, 250px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .85), inset 2px 0 0 rgba(255, 255, 255, .35), inset -3px 0 0 rgba(96, 76, 48, .22), 0 -1px 0 rgba(0, 0, 0, .1); }
.mu-pagina .ped::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, rgba(255, 252, 243, .75), rgba(255, 252, 243, .12)); box-shadow: 0 1px 0 rgba(128, 98, 48, .38); }
.mu-pagina .ped .n { position: relative; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; line-height: 1; font-size: 66px; margin-top: 24px; color: rgba(104, 80, 44, .58); text-shadow: 0 1.5px 0 rgba(255, 255, 255, .75), 0 -1px 0 rgba(60, 44, 20, .28); font-feature-settings: 'lnum' 1; }
.mu-pagina .col.c1 .ped { height: 156px; background-color: #EADFC6; }
.mu-pagina .col.c1 .ped .n { font-size: 84px; margin-top: 30px; }
.mu-pagina .col.c3 .ped { height: 88px; }
.mu-pagina .col.c3 .ped .n { font-size: 54px; margin-top: 20px; }
.mu-pagina .col.c1 .ped::after { content: ''; position: absolute; left: 18%; right: 18%; top: 0; height: 3px; background: linear-gradient(90deg, rgba(226, 204, 154, 0), #E2CC9A, rgba(226, 204, 154, 0)); }
.mu-pagina .mu-repisa { height: 16px; background-color: #E6DAC0; background-image: linear-gradient(rgba(168, 142, 100, .26), rgba(120, 98, 64, .52)), url('/assets/coliseo/textura_sillar.png'); background-size: auto, 170px; background-blend-mode: multiply, normal;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(96, 76, 48, .55), 0 4px 10px rgba(0, 0, 0, .32); }
.mu-pagina .mu-podio-vacio { margin: 22px auto 0; text-align: center; }
.mu-pagina .mu-podio-vacio > span { display: inline-block; padding: 12px 28px 13px; border-radius: 7px; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 26px; color: #3A2E1A;
  background-color: #E6DAC0; background-image: linear-gradient(rgba(255, 251, 240, .5), rgba(168, 142, 100, .22)), url('/assets/coliseo/textura_sillar.png'); background-size: auto, 220px;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(96, 76, 48, .45), 0 8px 18px rgba(0, 0, 0, .3); }
.mu-pagina .mu-podio-vacio small { display: block; margin-top: 12px; font-size: 12px; letter-spacing: 2.4px; font-weight: 700; color: #93B3A8; }
.mu-pagina .mu-podio:has(.mu-podio-vacio) .mu-podio-vacio { padding-bottom: 0; }

/* 064 · 0B: el nombre del podio nunca se corta; a 390 parte en dos líneas */
.mu-pagina .col .podio-nombre { overflow: visible; text-overflow: clip; white-space: normal; text-align: center; }
.mu-pagina .col .mu-nom-t { min-width: 0; overflow-wrap: normal; word-break: normal; }

/* récords de la casa: la tira, al pie del podio */
.mu-pagina .mu-records { display: flex; align-items: stretch; padding: 20px 4px 22px; background: rgba(0, 0, 0, .16); }
.mu-pagina .mu-records.oculto { display: none; }
.mu-pagina .mu-rec { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 0 22px; }
.mu-pagina .mu-div { width: 1px; align-self: stretch; background: rgba(179, 148, 92, .26); }
.mu-pagina .mu-ico-c { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #B3945C; background: rgba(179, 148, 92, .14); box-shadow: inset 0 0 0 1px rgba(179, 148, 92, .3); }
.mu-pagina .mu-rec-cuerpo { min-width: 0; display: block; }
.mu-pagina .mu-rec .mu-k { font-size: 12px; letter-spacing: 2px; color: #B3945C; margin-bottom: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mu-pagina .mu-rq { display: block; margin-top: 7px; font-size: 12px; color: #8CA49C; white-space: nowrap; }
.mu-pagina .mu-rq b { color: #E8D5A8; }
.mu-pagina .mu-rec-nada { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 34px; color: #8CA49C; }
.mu-pagina .mu-nuevo { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; margin-left: 0; border-radius: 4px; background: linear-gradient(180deg, #E2CC9A, #B3945C); color: #0B332B; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; vertical-align: 2px; }
.mu-pagina .mu-rec-nuevo { position: relative; }
.mu-pagina .mu-rec-nuevo::before { content: ''; position: absolute; left: 4%; right: 4%; top: -10%; bottom: -10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 216, 134, .28), rgba(214, 170, 90, .1) 55%, rgba(214, 170, 90, 0)); pointer-events: none; }
.mu-pagina .mu-rec-nuevo > * { position: relative; }
.mu-pagina .mu-nota { display: block; padding: 0 30px 16px; font-size: 12px; color: #7E9A92; }
/* los números en piedra: sobre el verde llevan el prefijo claro */
.mu-pagina .mu-arena .cgp-piedra .cgp-pre, .mu-pagina .mu-arena .cgp-piedra .cgp-cent { color: #E8D5A8; }
.mu-pagina .mu-arena .cgp-piedra .cgp-suf { color: #B3945C; }

/* la tabla y los logros */
.mu-pagina .mu-fila2 { display: flex; gap: 24px; align-items: stretch; margin-top: 24px; }
.mu-pagina .mu-tabla-caja { flex: 1 1 0; min-width: 0; }
.mu-pagina .mu-logros-caja { flex: 0 0 410px; display: flex; flex-direction: column; padding: 20px 24px 12px; }
.mu-pagina .mu-logros-caja .mu-sec { font-size: 25px; }
.mu-pagina .mu-rot { white-space: nowrap; }
.mu-pagina .mu-tabla { width: 100%; border-collapse: separate; border-spacing: 0; }
.mu-pagina .mu-tabla th { font-size: 12px; letter-spacing: 2px; font-weight: 700; color: var(--mu-tenue); text-align: left; padding: 0 12px 11px; border-bottom: 1px solid rgba(128, 98, 48, .28); white-space: nowrap; }
.mu-pagina .mu-tabla th.d, .mu-pagina .mu-tabla td.d { text-align: right; }
.mu-pagina .mu-tabla th.c, .mu-pagina .mu-tabla td.c { text-align: center; }
.mu-pagina .mu-tabla td { padding: 11px 12px; border-bottom: 1px solid rgba(128, 98, 48, .13); vertical-align: middle; font-size: 14px; }
.mu-pagina .mu-tabla tr:last-child td { border-bottom: 0; }
.mu-pagina .mu-tabla tr.yo td { background: rgba(179, 148, 92, .11); border-top: 1.5px solid #B3945C; border-bottom: 1.5px solid #B3945C; }
.mu-pagina .mu-tabla tr.yo td:first-child { border-left: 1.5px solid #B3945C; border-radius: 9px 0 0 9px; }
.mu-pagina .mu-tabla tr.yo td:last-child { border-right: 1.5px solid #B3945C; border-radius: 0 9px 9px 0; }
.mu-pagina .mu-pto { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; font-weight: 700; color: #4A4F48; font-feature-settings: 'lnum' 1; }
.mu-pagina .mu-pto.oro { background: radial-gradient(circle at 36% 30%, #FFF3C4, #D9A93F 58%, #8A6215); color: #3D2A08; box-shadow: 0 2px 6px rgba(138, 98, 21, .45), inset 0 1px 0 rgba(255, 255, 255, .6); }
.mu-pagina .mu-pto.plata { background: radial-gradient(circle at 36% 30%, #FFFFFF, #CFCFC9 58%, #7F817C); color: #2E302C; box-shadow: 0 2px 6px rgba(80, 80, 76, .4), inset 0 1px 0 rgba(255, 255, 255, .7); }
.mu-pagina .mu-pto.bronce { background: radial-gradient(circle at 36% 30%, #F6DCBC, #B8804F 58%, #6E4326); color: #FFF8EE; box-shadow: 0 2px 6px rgba(110, 67, 38, .45), inset 0 1px 0 rgba(255, 255, 255, .45); }
.mu-pagina .mu-salto { display: block; width: 36px; margin-top: 2px; font-size: 12px; font-weight: 800; text-align: center; }
.mu-pagina .mu-ases { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mu-pagina .mu-cara { position: relative; flex: 0 0 auto; display: inline-block; }
.mu-pagina .mu-cara .f { display: block; object-fit: cover; border-radius: 7px; box-shadow: 0 0 0 1px rgba(128, 98, 48, .28); }
.mu-pagina .mu-cara .f.mono { display: flex; background: linear-gradient(160deg, #1B5A4B, #0E3A31); }
.mu-pagina .mu-cara .ins { position: absolute; right: -8px; bottom: -6px; width: auto; filter: drop-shadow(0 2px 3px rgba(60, 42, 18, .4)); }
.mu-pagina .mu-ases b { display: block; font-size: 14.5px; color: var(--mu-tinta); white-space: nowrap; cursor: pointer; }
.mu-pagina .mu-ases small { display: block; margin-top: 2px; font-size: 12px; color: var(--mu-bronce-o); font-weight: 600; white-space: nowrap; }
.mu-pagina .mu-ases small.mu-cel { display: none; color: var(--mu-tenue); font-weight: 500; }
.mu-pagina .tu + *, .mu-pagina .mu-ases .tu { vertical-align: 1px; }
.mu-pagina .cob { font-weight: 800; font-size: 15px; color: var(--mu-tinta); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.mu-pagina .dist { width: 104px; margin: 6px 0 0 auto; height: 4px; border-radius: 999px; background: rgba(128, 98, 48, .13); }
.mu-pagina .dist > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #B3945C, #806230); }
.mu-pagina .var { font-weight: 800; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.mu-pagina .mu-falta { display: inline-block; text-align: right; white-space: normal; font-size: 13px; }
.mu-pagina .mu-falta b { color: var(--mu-tinta); font-variant-numeric: tabular-nums lining-nums; }
.mu-pagina .mu-falta span, .mu-pagina .mu-falta-v { color: #666B64; }
.mu-pagina .mu-logros-nota { margin: 0 0 6px; font-size: 12px; color: var(--mu-tenue); line-height: 1.45; }
.mu-pagina .mu-logro { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-bottom: 1px solid rgba(128, 98, 48, .15); }
.mu-pagina .mu-logro:last-child { border-bottom: 0; }
.mu-pagina .mu-logro .mu-disco { width: 42px; height: 42px; }
.mu-pagina .mu-logro-t { flex: 1 1 auto; min-width: 0; }
.mu-pagina .mu-logro-t b { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18.5px; font-weight: 600; color: var(--mu-tinta); line-height: 1.1; }
.mu-pagina .mu-logro-t span { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--mu-tenue); flex-wrap: wrap; }
.mu-pagina .mu-caras { display: inline-flex; }
.mu-pagina .mu-caras .mono { width: 22px; height: 22px; border-radius: 5px; margin-left: -5px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #E8D5A8; background: linear-gradient(160deg, #1B5A4B, #0E3A31); box-shadow: 0 0 0 2px #FAF7F0; }
.mu-pagina .mu-caras img.f { width: 22px; height: 22px; border-radius: 5px; margin-left: -5px; object-fit: cover; box-shadow: 0 0 0 2px #FAF7F0; }
.mu-pagina .mu-caras .mono:first-child, .mu-pagina .mu-caras img.f:first-child { margin-left: 0; }
.mu-pagina .mu-pasos { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.mu-pagina .mu-pasos i { min-width: 24px; padding: 0 4px; height: 18px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; font-weight: 800; color: #666B64; background: #F2ECDF; box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .2); }
.mu-pagina .mu-pasos i.si { background: #2E7A62; color: #FFFDF8; box-shadow: none; }
.mu-pagina .mu-ver { margin: auto 0 4px; padding: 8px 0 0; align-self: flex-end; border: 0; background: none; cursor: pointer; font: 700 12px/1 var(--fuente); color: var(--mu-bronce-o); }
.mu-pagina .mu-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 5px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.mu-pagina .mu-tag.gris { background: #F2ECDF; color: var(--mu-tenue); box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .2); }
.mu-pagina .mu-tag.bronce { background: rgba(179, 148, 92, .14); color: var(--mu-bronce-o); box-shadow: inset 0 0 0 1px rgba(179, 148, 92, .38); }
.mu-pagina .mu-tag.verde { background: rgba(46, 122, 98, .12); color: #1F6349; box-shadow: inset 0 0 0 1px rgba(46, 122, 98, .3); }

/* el muro: hitos como placas en la pared */
.mu-pagina .mu-muro-caja { margin-top: 30px; }
.mu-pagina .mu-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.mu-pagina .mu-filtros button { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 999px; border: 1px solid rgba(128, 98, 48, .35); background: transparent; color: var(--mu-tenue); font: 600 12px/1.2 var(--fuente); cursor: pointer; white-space: nowrap; }
.mu-pagina .mu-filtros button.on { background: var(--mu-verde); color: #E8D5A8; border-color: var(--mu-verde); font-weight: 700; }
.mu-pagina .mu-muro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mu-pagina .mu-muro > .vacio { grid-column: 1 / -1; }
.mu-pagina .mu-hito { position: relative; display: flex; gap: 15px; padding: 16px 18px 14px; border-radius: 10px; background: #FFFDF8; border: 1px solid rgba(128, 98, 48, .24); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 6px 16px rgba(60, 42, 18, .08); }
.mu-pagina .mu-hito.mio { box-shadow: inset 3px 0 0 #B3945C, inset 0 1px 0 rgba(255, 255, 255, .95), 0 6px 16px rgba(60, 42, 18, .08); }
.mu-pagina .mu-hito > .mu-cara, .mu-pagina .mu-hito > .mu-disco { align-self: flex-start; }
.mu-pagina .mu-hito .mu-cara .f { width: 48px; height: 48px; font-size: 20px; }
.mu-pagina .mu-hito .mu-cara .ins { height: 26px; right: -9px; bottom: -7px; }
.mu-pagina .mu-cuerpo { flex: 1 1 auto; min-width: 0; padding-top: 1px; }
.mu-pagina .mu-der { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 10px; }
.mu-pagina .mu-der time { font-size: 12px; color: #666B64; white-space: nowrap; }
.mu-pagina .mu-quien { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; font-weight: 600; color: var(--mu-tinta); line-height: 1.15; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(179, 148, 92, .75); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mu-pagina .mu-acc { display: block; margin-top: 6px; font-size: 12px; letter-spacing: 1.5px; font-weight: 800; color: var(--mu-bronce-o); text-transform: uppercase; }
.mu-pagina .mu-acc b { color: var(--mu-tinta); }
.mu-pagina .mu-cita { margin-top: 7px; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 17px; color: #3A3F38; line-height: 1.3; }
.mu-pagina .mu-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.mu-pagina .mu-aplauso { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(179, 148, 92, .55); background: transparent; color: var(--mu-bronce-o); font: 700 12px/1 var(--fuente); white-space: nowrap; cursor: pointer; }
.mu-pagina .mu-aplauso svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mu-pagina .mu-aplauso.on { background: var(--mu-verde); border-color: var(--mu-verde); color: #E8D5A8; }
.mu-pagina .mu-aplauso.on svg { fill: currentColor; }
.mu-pagina .mu-disco { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #EDF1EC; color: #2E7A62; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.mu-pagina .mu-disco.oro { background: radial-gradient(circle at 36% 30%, #FFF3C4, #D9A93F 58%, #8A6215); color: #5B3F0C; box-shadow: 0 3px 8px rgba(138, 98, 21, .35), inset 0 1px 0 rgba(255, 255, 255, .6); }
.mu-pagina .mu-disco.verde { background: linear-gradient(180deg, #14473C, #0B332B); color: #E8D5A8; box-shadow: 0 3px 8px rgba(11, 51, 43, .3); }
.mu-pagina .mu-ascenso { grid-column: 1 / -1; align-items: center; gap: 26px; padding: 20px 26px;
  background-color: var(--mu-papel); background-image: linear-gradient(rgba(255, 253, 248, .9), rgba(246, 241, 230, .94)), url('/assets/coliseo/textura_sillar.png'); background-size: auto, 320px; }
.mu-pagina .mu-ascenso .mu-duo { position: relative; flex: 0 0 auto; display: flex; align-items: center; }
.mu-pagina .mu-ascenso .marco { padding: 3px; }
.mu-pagina .mu-ascenso .marco .f { width: 92px; height: 92px; }
.mu-pagina .mu-brillo { position: relative; display: inline-block; margin-left: -14px; }
.mu-pagina .mu-brillo::before { content: ''; position: absolute; inset: -24%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 216, 134, .7) 0%, rgba(214, 170, 90, .3) 36%, rgba(214, 170, 90, 0) 70%); }
.mu-pagina .mu-brillo > img { position: relative; display: block; height: 104px; width: auto; filter: drop-shadow(0 7px 12px rgba(60, 42, 18, .3)); }
.mu-pagina .mu-ascenso .mu-quien { font-size: 30px; }
.mu-pagina .mu-ascenso .mu-acc { font-size: 12px; letter-spacing: 2px; margin-top: 9px; }
.mu-pagina .mu-ascenso .mu-cita { font-size: 18px; }
.mu-pagina .mu-ascenso .mu-der { align-self: stretch; }
.mu-pagina .mu-mas { display: flex; justify-content: center; margin-top: 18px; }
.mu-pagina .mu-btn-mas { height: 36px; padding: 0 22px; border-radius: 7px; border: 1px solid rgba(128, 98, 48, .4); background: #FFFDF8; color: var(--mu-bronce-o); font: 700 13px/1 var(--fuente); cursor: pointer; }
.mu-pagina .mu-btn-mas.oculto { display: none; }
.mu-pagina .mu-pie .mu-tag { white-space: normal; height: auto; min-height: 22px; padding: 3px 8px; }

@media (max-width: 820px) {
  .mu-pagina .mu-cont { padding: 20px 16px 28px; }
  .mu-pagina .mu-cab { flex-wrap: wrap; gap: 6px 14px; }
  .mu-pagina .mu-hilo { display: none; }
  .mu-pagina .mu-sec { font-size: 25px; }
  .mu-pagina .mu-cab .mu-rot { white-space: normal; flex-basis: 100%; order: 3; line-height: 1.6; }
  .mu-pagina .mu-arena-cab { flex-direction: column; align-items: flex-start; padding: 24px 16px 0; }
  .mu-pagina .mu-arena-cab h2 { font-size: 28px; }
  .mu-pagina .mu-controles { margin-left: 0; align-items: flex-start; width: 100%; }
  .mu-pagina .mu-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .mu-pagina .mu-seg > button, .mu-pagina .mu-seg-sel { padding: 0 11px; font-size: 12px; }
  .mu-pagina .mu-podio, .mu-pagina .mu-podio-fila { gap: 8px; padding: 14px 10px 0; }
  .mu-pagina .col { flex: 1 1 0; min-width: 0; }
  .mu-pagina .col .nom { font-size: 16px; margin-top: 12px; flex-direction: column; gap: 4px; }
  .mu-pagina .col .grado { font-size: 12px; letter-spacing: 1.2px; }
  .mu-pagina .col .sub { font-size: 12px; margin: 5px 0 10px; }
  .mu-pagina .marco .ins { right: -12px; bottom: -9px; }
  .mu-pagina .marco .f { width: 72px; height: 72px; }
  .mu-pagina .col.c1 .marco .f { width: 88px; height: 88px; }
  .mu-pagina .marco .f.mono { font-size: 28px; }
  .mu-pagina .col .marco .ins, .mu-pagina .col.c1 .marco .ins { height: 34px; }
  .mu-pagina .col .ped { height: 76px; }
  .mu-pagina .col.c1 .ped { height: 104px; }
  .mu-pagina .col.c3 .ped { height: 58px; }
  .mu-pagina .col .ped .n { font-size: 44px; margin-top: 14px; }
  .mu-pagina .col.c1 .ped .n { font-size: 58px; margin-top: 18px; }
  .mu-pagina .col.c3 .ped .n { font-size: 38px; margin-top: 10px; }
  .mu-pagina .col .cgp-piedra img, .mu-pagina .mu-records .cgp-piedra img { height: 32px !important; }
  .mu-pagina .col .cgp-pre { font-size: 14px !important; }
  .mu-pagina .mu-records { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 0; padding: 16px 0; }
  .mu-pagina .mu-records > .mu-div { display: none; }
  .mu-pagina .mu-rec { padding: 0 12px; align-items: flex-start; }
  .mu-pagina .mu-rec .mu-ico-c { display: none; }
  .mu-pagina .mu-rec .mu-k { white-space: normal; line-height: 1.5; }
  .mu-pagina .mu-rq { white-space: normal; }
  .mu-pagina .mu-nota { padding: 0 16px 14px; }
  .mu-pagina .mu-fila2 { flex-direction: column; }
  .mu-pagina .mu-logros-caja { flex: 1 1 auto; width: 100%; }
  .mu-pagina .mu-sup { padding: 16px 14px 12px; }
  .mu-pagina .mu-tabla td { padding: 9px 5px; }
  .mu-pagina .mu-tabla th { padding: 0 5px 10px; }
  .mu-pagina .mu-ocultar-cel { display: none; }
  .mu-pagina .mu-ases { gap: 10px; }
  .mu-pagina .mu-ases b { white-space: normal; font-size: 13.5px; line-height: 1.25; }
  .mu-pagina .mu-ases .mu-cara .f { width: 36px !important; height: 36px !important; font-size: 15px !important; }
  .mu-pagina .mu-ases .mu-cara .ins { height: 21px !important; }
  .mu-pagina .mu-ases small.mu-esc { display: none; }
  .mu-pagina .mu-ases small.mu-cel { display: block; }
  .mu-pagina .tu { display: none; }
  .mu-pagina .cob { font-size: 13.5px; }
  .mu-pagina .mu-pto { width: 30px; height: 30px; font-size: 18px; }
  .mu-pagina .mu-muro { grid-template-columns: 1fr; }
  .mu-pagina .mu-hito { flex-wrap: wrap; padding: 14px; }
  .mu-pagina .mu-hito .mu-cuerpo { flex: 1 1 0; padding-right: 44px; }
  .mu-pagina .mu-der { flex: 1 1 100%; flex-direction: row; justify-content: flex-end; }
  .mu-pagina .mu-der time { position: absolute; top: 14px; right: 14px; }
  .mu-pagina .mu-ascenso { flex-direction: column; align-items: flex-start; gap: 14px; }
  .mu-pagina .mu-ascenso .mu-quien { font-size: 26px; }
}

/* 064 · TAREA 4 — los cofres (porte de gp_cofres). El dibujo del cofre es JS (cofreColiseo); aquí van la rejilla de 4, la tabla de rareza,
   «Mis cofres» + fragmentos y la tarjeta de la colección. Las clases viejas (.cofre-carta, .cofre-fila…) quedan sin uso en esta pantalla. */
.cg-k-m { color: var(--cg-verde-dato); }
.cg-tag.verde { background: rgba(46, 122, 98, .12); color: var(--cg-ok); box-shadow: inset 0 0 0 1px rgba(46, 122, 98, .3); }
.cg-tag.oscuro { background: rgba(0, 0, 0, .22); color: var(--cg-bronce-claro); box-shadow: inset 0 0 0 1px rgba(179, 148, 92, .35); }
.cg-ancho { width: 100%; }
.cg-btn-lin { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: 7px; font: 700 13px/1 var(--fuente); white-space: nowrap;
  border: 1px solid rgba(179, 148, 92, .55); color: var(--cg-bronce-osc); background: transparent; cursor: default; }
.cg-verde .cg-btn-lin { color: var(--cg-bronce-claro); border-color: rgba(179, 148, 92, .5); }
.cg-pil { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; border: 1px solid rgba(128, 98, 48, .35); color: var(--cg-texto-2);
  font-size: 12px; font-weight: 600; white-space: nowrap; background: transparent; }
.cg-pil.on { background: var(--cg-verde); color: var(--cg-bronce-claro); border-color: var(--cg-verde); font-weight: 700; }
.cg-ico-c { flex: 0 0 auto; width: 40px; height: 40px; margin-top: 2px; border-radius: 50%; background: var(--cg-icono-fondo); display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.cg-barra { position: relative; flex: 1 1 auto; height: 10px; border-radius: 999px; background: rgba(128, 98, 48, .15); box-shadow: inset 0 1px 2px rgba(80, 62, 34, .18); }
.cg-barra > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--cg-bronce), var(--cg-bronce-osc)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.cg-ver { display: block; margin: auto 0 0; padding: 14px 0 0; border: 0; background: none; cursor: pointer; font: 700 12px/1.2 var(--fuente); color: var(--cg-bronce-osc); text-align: left; white-space: nowrap; }

.cg-cofres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cg-cofre { display: flex; flex-direction: column; align-items: stretch; padding: 16px 20px 18px; text-align: center; }
.cg-cofre-ilus { display: flex; justify-content: center; margin: 0 0 4px; }
.cg-cofre-ilus svg { max-width: 100%; height: auto; }
.cg-cofre h3 { margin: 0; font-family: var(--fuente-titulos); font-size: 24px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--cg-texto); }
.cg-cofre.cg-verde h3 { color: var(--cg-superficie); }
.cg-cofre-precio { display: flex; justify-content: center; margin-top: 8px; min-height: 38px; align-items: center; }
.cg-cofre-precio .cg-k { margin: 0; white-space: normal; }
.cg-cofre .cg-min { align-self: center; margin-top: 10px; max-width: 100%; height: auto; min-height: 22px; padding-top: 2px; padding-bottom: 2px; white-space: normal; }
.cg-cofre-como { margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--cg-texto-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cg-cofre.cg-verde .cg-cofre-como { color: var(--cg-texto-verde-2); }
.cg-rareza { margin-top: 14px; text-align: left; }
.cg-rareza .rf { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-bottom: 1px dashed rgba(128, 98, 48, .2); font-size: 12px; color: var(--cg-texto); }
.cg-cofre.cg-verde .cg-rareza .rf { border-color: rgba(179, 148, 92, .22); color: var(--cg-marfil); }
.cg-rareza .rf:last-child { border-bottom: 0; }
.cg-rareza .rf .p { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums lining-nums; }
.cg-rareza .rf small { font-size: 12px; color: var(--cg-bronce-osc); font-weight: 700; }
.cg-cofre.cg-verde .cg-rareza .rf small { color: var(--cg-bronce); }
.cg-cofre-pie { margin-top: auto; padding-top: 14px; }
.cg-ret { font-size: 12px; line-height: 1.45; color: var(--cg-texto-2); margin-bottom: 10px; min-height: 1.4em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cg-cofre.cg-verde .cg-ret { color: var(--cg-texto-verde-2); }
.cg-cofre .cg-btn-pri { width: 100%; min-height: 44px; }

.cg-cofres-fila2 { display: flex; gap: 22px; margin-top: 22px; align-items: stretch; }
.cg-cofres-izq { flex: 1 1 0; min-width: 0; padding: 20px 26px; }
.cg-cofres-izq .cg-cab { margin: 0 0 6px; }
.cg-cofres-izq .cg-sec { font-size: 27px; }
.cg-cofres-izq .cg-cab-fragmentos { margin-top: 14px; }
.cg-cofres-izq .cg-cab-fragmentos .cg-sec { font-size: 22px; }
.cg-cofres-izq .cofres-resumen { display: inline-flex; align-items: center; gap: 10px; }
.cg-fila { display: flex; align-items: center; gap: 13px; padding: 10px 0; border-bottom: 1px solid rgba(128, 98, 48, .16); }
.cg-fila:last-child { border-bottom: 0; }
.cg-fila-ico { flex: 0 0 auto; display: flex; width: 52px; justify-content: center; }
.cg-fila-txt { flex: 1 1 0; min-width: 0; font-size: 14px; }
.cg-fila-txt .mini { font-size: 12px; color: var(--cg-texto-2); }
.cg-fila-abierta { opacity: .75; }
.cg-frag { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(128, 98, 48, .16); }
.cg-frag:last-child { border-bottom: 0; }
.cg-frag-txt { flex: 0 0 210px; min-width: 0; font-size: 13px; }
.cg-frag-sub { margin-top: 2px; font-size: 12px; color: var(--cg-texto-2); }
.cg-frag-n { flex: 0 0 auto; min-width: 54px; text-align: right; font-size: 14px; }

.cg-coleccion { flex: 0 0 420px; display: flex; flex-direction: column; padding: 20px 24px; background-image: linear-gradient(rgba(250, 247, 240, .9), rgba(250, 247, 240, .9)), url('/assets/coliseo/textura_sillar.png'); }
.cg-coleccion > #misCosmeticos { display: flex; flex-direction: column; flex: 1 1 auto; }
.cg-col-cab { display: flex; align-items: center; gap: 14px; }
.cg-col-cuenta { display: flex; align-items: flex-end; gap: 10px; }
.cg-col-de { font-family: var(--fuente-titulos); font-size: 21px; color: var(--cg-texto-2); padding-bottom: 3px; }
.cg-col-asi { margin-left: auto; text-align: right; font-size: 12px; color: var(--cg-texto-2); line-height: 1.4; }
.cg-col-yo { flex: 0 0 auto; width: 44px; height: 44px; font-size: 22px; background: linear-gradient(150deg, var(--cg-papel-3), var(--cg-sillar) 55%, var(--cg-superficie-alta)); color: var(--cg-texto); }
.cg-col-fam { margin-top: 12px; }
.cg-col-fam-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.cg-col-fam-cab .cg-k { font-size: 12px; letter-spacing: 1.6px; margin: 0; color: var(--cg-texto-2); }
.cg-col-fam-cab b { font-size: 12px; }
.cg-piezas { display: flex; flex-wrap: wrap; gap: 4px; }
.cg-pieza { width: 28px; height: 28px; border-radius: 5px; display: flex; align-items: center; justify-content: center; background: var(--cg-superficie-alta); box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .22); }
.cg-pieza.tengo { background: linear-gradient(160deg, var(--cg-superficie-alta), var(--cg-bronce-claro)); box-shadow: inset 0 0 0 1.5px var(--cg-bronce), 0 2px 5px rgba(96, 72, 32, .18); }
.cg-pieza.raro { box-shadow: inset 0 0 0 1px rgba(46, 122, 98, .45); }
.cg-pieza.epico { box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .6); }
.cg-pieza.legendario { box-shadow: inset 0 0 0 1.5px #D9A93F, 0 0 6px rgba(217, 169, 63, .45); }
.cg-pieza.tengo.raro { box-shadow: inset 0 0 0 1.5px var(--cg-verde-lleno), 0 2px 5px rgba(96, 72, 32, .18); }
.cg-pieza.tengo.legendario { box-shadow: inset 0 0 0 1.5px #D9A93F, 0 0 6px rgba(217, 169, 63, .45); }
.cg-coleccion-detalle { margin-top: 22px; padding: 20px 26px; }
.cg-coleccion-detalle[hidden] { display: none; }
@media (max-width: 1100px) { .cg-cofres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .cg-cofres { gap: 10px; }
  .cg-cofre { padding: 14px 12px 14px; }
  .cg-cofre h3 { font-size: 21px; }
  .cg-rareza .rf { flex-wrap: wrap; row-gap: 0; gap: 0 9px; }
  .cg-rareza .rf small { order: 3; flex-basis: 100%; padding-left: 19px; white-space: nowrap; }
  .cg-cofre .cg-btn-lin { height: auto; min-height: 40px; padding: 8px 10px; white-space: normal; text-align: center; line-height: 1.25; }
  .cg-cofre .cg-btn-pri { height: auto; padding: 8px 10px; white-space: normal; line-height: 1.25; }
  .cg-cofres-fila2 { flex-direction: column; gap: 16px; }
  .cg-coleccion { flex-basis: auto; padding: 18px 16px; }
  .cg-cofres-izq { padding: 16px 14px; }
  .cg-frag { flex-wrap: wrap; row-gap: 6px; }
  .cg-frag-txt { flex: 1 1 100%; }
  .cg-barra { flex: 1 1 0; }
  .cg-fila-txt .mini { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- 064 · TAREA 5: Duelos con la forma de gp_duelos (clases cg-, colores solo con tokens) ---------- */
.cg-solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }
.cg-duelos-pag .cg-cab-grande .globo { margin-left: -8px; }
.cg-duelos-fila2 { display: flex; gap: 22px; align-items: stretch; }
.cg-duelos-form { flex: 1 1 0; min-width: 0; padding: 20px 28px 22px; }
.cg-duelos-form .cg-cab { margin: 0 0 4px; }
.cg-duelos-form .cg-sec { font-size: 27px; }
.cg-form-fila { display: grid; grid-template-columns: 170px minmax(0, 1fr); column-gap: 18px; align-items: start; padding: 14px 0; border-bottom: 1px solid rgba(128, 98, 48, .16); }
.cg-form-fila > :first-child { grid-column: 1; grid-row: 1 / span 5; padding-top: 11px; }
.cg-form-fila > :not(:first-child) { grid-column: 2; min-width: 0; }
.cg-form-fila > .et, .cg-form-fila > label:first-child { margin: 0; font-size: 12px; letter-spacing: 2.2px; font-weight: 700; color: var(--cg-texto-2); text-transform: uppercase; }
.cg-ayuda { margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--cg-texto-2); }
.cg-form-fila .reto-atajos { margin-top: 10px; }
.cg-form-fila .mini.tenue, .cg-duelos-form .mini.tenue { color: var(--cg-texto-2); }
.cg-form-fila input[type="number"], .cg-form-fila select { font: 600 14px var(--fuente); color: var(--cg-texto); background: var(--cg-superficie-alta); border: 1px solid rgba(128, 98, 48, .35); border-radius: 7px; min-height: 40px; padding: 0 12px; }
.cg-duelos-form .cg-op { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 15px; border-radius: 7px; border: 1px solid rgba(128, 98, 48, .3);
  background: var(--cg-superficie-alta); font: 600 13px var(--fuente); color: var(--cg-texto); box-shadow: none; text-transform: none; letter-spacing: 0; }
.cg-duelos-form .cg-op.activa, .cg-duelos-form .reto-atajos .boton.activa { background: var(--cg-verde); border-color: var(--cg-verde); color: var(--cg-bronce-claro); font-weight: 700; box-shadow: 0 3px 8px rgba(16, 60, 52, .25); }
.cg-duelos-form .reto-atajos .boton { min-height: 40px; background: var(--cg-superficie-alta); border: 1px solid rgba(128, 98, 48, .3); border-radius: 7px; color: var(--cg-texto); font: 600 13px var(--fuente); box-shadow: none; text-transform: none; letter-spacing: 0; }
.cg-duelos-form .reto-stepper > .boton { background: var(--cg-superficie-alta); border: 1px solid rgba(128, 98, 48, .35); color: var(--cg-bronce-osc); box-shadow: none; }
.cg-duelos-form .reto-meta-cifra { color: var(--cg-texto); }
.cg-duelos-form .reto-meta-txt, .cg-duelos-form .reto-cierre { color: var(--cg-texto-2); }
.cg-rivales { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cg-rival { position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 13px 0 5px; border-radius: 7px; border: 1px solid rgba(128, 98, 48, .3);
  background: var(--cg-superficie-alta); font-size: 13px; font-weight: 600; color: var(--cg-texto); cursor: pointer; }
.cg-rival.on { border-color: var(--verde-f); box-shadow: inset 0 0 0 1px var(--verde-f); background: rgba(46, 122, 98, .06); }
.cg-rival:focus-within { outline: 2px solid var(--cg-bronce); outline-offset: 2px; }
.cg-du-foto { flex: 0 0 auto; display: block; border-radius: 6px; object-fit: cover; box-shadow: 0 0 0 1px rgba(128, 98, 48, .25); }
span.cg-du-foto { display: inline-flex; align-items: center; justify-content: center; background: var(--cg-icono-fondo); }
.cg-monto { justify-self: start; display: inline-flex; align-items: center; border: 1px solid rgba(128, 98, 48, .35); border-radius: 7px; background: var(--cg-superficie-alta); overflow: hidden; }
.cg-monto button { width: 42px; height: 42px; border: 0; background: transparent; color: var(--cg-bronce-osc); font: 700 20px/1 var(--fuente); cursor: pointer; }
.cg-form-fila .cg-monto input[type="number"] { width: 96px; min-height: 42px; border: 0; border-left: 1px solid rgba(128, 98, 48, .2); border-right: 1px solid rgba(128, 98, 48, .2); border-radius: 0; text-align: center; font-size: 17px; font-variant-numeric: tabular-nums lining-nums; }
.cg-duelo-lanzar { display: flex; justify-content: flex-end; margin-top: 16px; }
.cg-duelo-lanzar .cg-btn-pri { height: 44px; padding: 0 28px; }
.cg-duelos-form .duelo-reglas { margin-top: 12px; }
.cg-duelos-resumen { flex: 0 0 400px; padding: 22px 24px; display: flex; flex-direction: column; }
.cg-duelos-cont { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.cg-duelos-cont .cg-interna { min-width: 0; }
.cg-duelos-cont .cg-interna b { font-size: 22px; }
.cg-interna-ojo { box-shadow: inset 0 0 0 1px rgba(140, 214, 170, .45); }
.cg-duelos-bloque { margin-top: 18px; }
.cg-duelos-bloque .cg-k { letter-spacing: 2px; margin-bottom: 10px; }
.cg-reto-c { display: flex; align-items: center; gap: 11px; margin-top: 8px; padding: 12px 14px; border-radius: 7px; background: rgba(0, 0, 0, .18); border: 1px solid rgba(179, 148, 92, .25); }
.cg-reto-c .cg-fila-txt b { display: block; font-size: 14px; color: var(--cg-superficie); }
.cg-reto-c .cg-fila-txt .mini { display: block; font-size: 12px; color: var(--cg-texto-verde); white-space: normal; overflow: visible; }
.cg-reto-acc { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cg-reto-monto { font-weight: 800; font-size: 14px; color: var(--cg-bronce-claro); white-space: nowrap; }
.cg-reto-btns { display: flex; gap: 8px; }
.cg-reto-c .cg-btn-pri, .cg-reto-c .cg-btn-lin { height: 36px; min-height: 36px; padding: 0 12px; font-size: 13px; }
.cg-reto-c .cg-btn-lin { cursor: pointer; }
.cg-duelos-vacio { color: var(--cg-texto-verde-2); }
.cg-duelos-enlaces { margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; gap: 12px; }
.cg-enlace { background: transparent; border: 0; padding: 4px 0; font: 700 13px var(--fuente); color: var(--cg-bronce-claro); cursor: pointer; white-space: nowrap; }
.cg-duelos-listas { margin-top: 22px; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cg-duelos-lista .duelo-fila { background: var(--cg-superficie-alta); border: 1px solid rgba(128, 98, 48, .25); border-radius: 7px; color: var(--cg-texto); }
.cg-duelos-lista .duelo-jugador { background: var(--cg-papel-3); border-color: rgba(128, 98, 48, .25); color: var(--cg-texto); }
.cg-duelos-lista .duelo-jugador.yo, .cg-duelos-lista .duelo-lado.yo b { color: var(--cg-bronce-osc); border-color: rgba(179, 148, 92, .55); }
.cg-duelos-lista .duelo-vs { color: var(--cg-caida); }
.cg-duelos-lista .estado { background: rgba(179, 148, 92, .14); border-color: rgba(179, 148, 92, .38); color: var(--cg-bronce-osc); }
.cg-duelos-lista .estado.resuelto, .cg-duelos-lista .estado.aceptado { background: rgba(46, 122, 98, .12); border-color: rgba(46, 122, 98, .3); color: var(--cg-ok); }
.cg-duelos-lista .estado.vencido, .cg-duelos-lista .estado.rechazado { background: rgba(180, 71, 47, .1); border-color: rgba(180, 71, 47, .3); color: var(--cg-caida); }
.cg-duelos-lista .mini.tenue, .cg-duelos-lista .vacio { color: var(--cg-texto-2); }
.cg-duelos-lista .mesa-botones { justify-content: flex-start; }
.cg-duelos-lista .boton:not(.oro) { background: transparent; border: 1px solid rgba(179, 148, 92, .55); color: var(--cg-bronce-osc); box-shadow: none; }
.cg-duelos-lista { padding: 20px 24px; min-width: 0; }
.cg-duelos-lista .cg-cab { margin: 0 0 12px; }
.cg-duelos-lista .cg-sec { font-size: 22px; }
.cg-duelos-lista .cg-rot { white-space: normal; text-align: right; }
@media (max-width: 820px) {
  .cg-duelos-fila2 { flex-direction: column; gap: 16px; }
  .cg-duelos-form { padding: 16px 14px; }
  .cg-duelos-resumen { flex-basis: auto; padding: 18px 16px; }
  .cg-form-fila { grid-template-columns: 1fr; row-gap: 6px; }
  .cg-form-fila > :first-child { grid-row: auto; padding-top: 0; }
  .cg-form-fila > :not(:first-child) { grid-column: 1; }
  .cg-reto-c { flex-wrap: wrap; }
  .cg-reto-acc { flex: 1 1 100%; flex-direction: row; justify-content: space-between; align-items: center; }
  .cg-duelo-lanzar .cg-btn-pri { width: 100%; }
  .cg-duelos-listas { grid-template-columns: 1fr; gap: 16px; }
  .cg-duelos-lista .cg-cab .cg-hilo { display: none; }
}

/* 064 · TAREA 6 — chat y bote del equipo (porte de gp_chat y gp_bote). Mismas piezas `.cg-*` de la maqueta; el chat conserva sus
   `data-chat` y el bote sus ids. Textos chicos de la maqueta (10-11 px) en 12. */
.cg-k-t { color: var(--cg-texto-2); }
.cg-clic { cursor: pointer; }
.cg-chat-fila2 { display: flex; gap: 22px; align-items: stretch; }
.cg-chat-izq { flex: 1 1 0; min-width: 0; padding: 22px 26px 16px; display: flex; flex-direction: column; min-height: 470px; }
.cg-chat-izq .cg-cab { margin: 0 0 12px; }
.cg-chat-izq .cg-sec { font-size: 24px; }
.cg-chat-der { flex: 0 0 372px; padding: 20px 24px; display: flex; flex-direction: column; min-width: 0;
  background-image: linear-gradient(rgba(255, 253, 248, .9), rgba(246, 241, 230, .94)), url('/assets/coliseo/textura_sillar.png'); background-size: auto, 320px; }
.cg-chat-der .cg-k { color: var(--cg-texto-2); }
.cg-chat-canales { display: flex; flex-direction: column; }
.cg-chat-canal { display: flex; align-items: center; gap: 13px; width: 100%; margin: 0; padding: 11px 10px; border: 0; border-bottom: 1px solid rgba(128, 98, 48, .16);
  border-radius: 0; background: transparent; color: var(--cg-texto); font: inherit; text-align: left; cursor: pointer; }
.cg-chat-canal:last-child { border-bottom: 0; }
.cg-chat-canal.activa { background: rgba(46, 122, 98, .07); border-radius: 7px; border-bottom-color: transparent; }
.cg-chat-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: var(--cg-verde); color: var(--cg-bronce-brillo); }
.cg-chat-ico.uno { background: var(--cg-icono-fondo); color: var(--cg-verde-vivo); }
.cg-chat-canal .cg-fila-txt b { display: block; font-size: 13.5px; }
.cg-chat-ult { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-chat-n { border-radius: 999px; }
.cg-chat-acc { display: flex; gap: 8px; margin-top: 14px; }
.cg-chat-acc .cg-btn-lin { flex: 1; }
/* el widget deja de ser la tarjeta oscura de siempre: aquí las tarjetas son las dos de la maqueta */
#chatCuerpo .chat-widget.chat-sala { background: none; border: 0; border-radius: 0; padding: 0; }
.chat-sala .chat-cab { display: none; }
/* el aviso fijo (no se puede cerrar) pasa a ser la nota al pie, como la de la maqueta */
.chat-sala .chat-aviso { order: 2; margin: 14px 2px 0; padding: 0; background: none; border: 0; font-size: 12px; line-height: 1.5; color: var(--cg-texto-2); }
.chat-sala .chat-cuerpo { order: 1; }
.chat-sala .chat-lista { flex: 1 1 auto; height: auto; min-height: 300px; max-height: 52vh; padding: 0 4px 0 0; background: none; border: 0; border-radius: 0; gap: 12px; }
.chat-sala .chat-linea { max-width: 78%; align-items: flex-start; gap: 10px; }
.chat-sala .chat-linea.mia { max-width: 78%; margin-left: auto; flex-direction: row; }
.chat-sala .chat-linea.mia .cg-chat-foto, .chat-sala .chat-linea.sistema .cg-chat-foto, .chat-sala .chat-linea.mia .avatar, .chat-sala .chat-linea.sistema .avatar { display: none; }
.cg-chat-foto { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 7px; object-fit: cover; display: block; box-shadow: 0 0 0 1px rgba(128, 98, 48, .25); background: var(--cg-papel-3); }
.cg-chat-foto.mono { display: flex; align-items: center; justify-content: center; font-size: 17px; }
.chat-sala .chat-burbuja { padding: 10px 14px; border-radius: 10px 10px 10px 3px; background: var(--cg-superficie-alta); border: 1px solid rgba(128, 98, 48, .22); color: var(--cg-texto); font-size: 13px; line-height: 1.45; }
.chat-sala .chat-linea.mia .chat-burbuja { margin-left: auto; border-radius: 10px 10px 3px 10px; background: var(--cg-verde); border-color: var(--cg-verde); color: var(--cg-marfil); }
.chat-sala .chat-quien { font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--cg-bronce-osc); margin-bottom: 3px; }
.chat-sala .chat-linea.mia .chat-quien { display: none; }
.chat-sala .chat-texto { font-size: 13px; font-weight: 500; }
.chat-sala .chat-hora { margin-top: 4px; font-size: 12px; color: var(--cg-texto-3); }
.chat-sala .chat-linea.mia .chat-hora { text-align: right; color: var(--cg-texto-verde-2); }
.chat-sala .chat-linea.sistema { align-items: center; gap: 12px; max-width: 100%; margin: 6px 0 2px; }
.chat-sala .chat-linea.sistema::before, .chat-sala .chat-linea.sistema::after { content: ''; flex: 1 1 0; height: 1px; background: rgba(128, 98, 48, .28); }
.chat-sala .chat-linea.sistema .chat-burbuja { flex: 0 1 auto; padding: 0; border: 0; background: none; text-align: center; }
.chat-sala .chat-linea.sistema .chat-quien { display: none; }
.chat-sala .chat-linea.sistema .chat-texto { font-size: 12px; font-weight: 600; color: var(--cg-bronce-osc); }
.chat-sala .chat-linea.sistema .chat-hora { display: none; }
.chat-sala .chat-form { margin-top: 10px; padding-top: 14px; border-top: 1px solid rgba(128, 98, 48, .16); }
.chat-sala .chat-form input { height: 44px; border-radius: 7px; border: 1px solid rgba(128, 98, 48, .3); background: var(--cg-superficie-alta); color: var(--cg-texto); padding: 0 14px; font-size: 13px; }
.chat-sala .chat-form .cg-btn-pri { height: 44px; }
.chat-sala .chat-pie .mini, .chat-sala .vacio { color: var(--cg-texto-2); }
.chat-sala .chat-acciones .boton { background: transparent; border: 1px solid rgba(179, 148, 92, .55); color: var(--cg-bronce-osc); box-shadow: none; }
.chat-sala .chat-canales { color: var(--cg-texto); }
.chat-sala .chat-grupo-form, .chat-sala .chat-marca { color: var(--cg-texto); }
.chat-sala .chat-canales .k, .chat-sala .chat-grupo-form .k, .chat-sala .chat-grupo-form label { color: var(--cg-texto-2); }
.chat-sala .chat-canales .chat-canal { display: flex; background: var(--cg-superficie-alta); border: 1px solid rgba(128, 98, 48, .22); border-radius: 7px; color: var(--cg-texto); margin-bottom: 6px; }
.chat-sala .chat-canales .chat-canal .chat-canal-ultimo { color: var(--cg-texto-2); }
.chat-sala .chat-grupo-form input[type=text] { border: 1px solid rgba(128, 98, 48, .3); background: var(--cg-superficie-alta); color: var(--cg-texto); }

.cg-banda-botes { display: flex; flex-wrap: nowrap; align-items: stretch; padding: 17px 4px; }
.cg-celda-bote { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; gap: 14px; padding: 0 22px; }
.cg-div { width: 1px; align-self: stretch; background: rgba(128, 98, 48, .18); }
.cg-celda-cuerpo { min-width: 0; flex: 1 1 auto; display: block; }
.cg-bote-puerta { margin-top: 9px; display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--cg-texto-2); line-height: 1.4; }
.cg-bote-motivo { display: block; margin-top: 6px; color: var(--cg-texto-2); }
.cg-bote-nota { margin-top: 10px; }
.cg-bote-fila2 { display: flex; gap: 22px; margin-top: 22px; align-items: stretch; }
.cg-bote-izq { flex: 1 1 0; min-width: 0; padding: 20px 26px; }
.cg-bote-izq .cg-cab { margin: 0 0 4px; }
.cg-bote-izq .cg-sec, .cg-bote-misiones .cg-sec { font-size: 27px; }
.cg-bote-izq .cg-cab-mov { margin-top: 18px; }
.cg-premio { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--cg-bronce-osc); white-space: nowrap; }
.cg-mov { flex: 0 0 auto; font-size: 13px; font-weight: 800; }
.cg-mov.mas { color: var(--cg-ok); }
.cg-mov.menos { color: var(--cg-caida); }
.cg-ver-todo { border: 0; background: none; padding: 0; cursor: pointer; font: 700 12px/1.2 var(--fuente); color: var(--cg-bronce-osc); white-space: nowrap; }
.cg-bote-der { flex: 0 0 400px; padding: 22px 24px; display: flex; flex-direction: column; min-width: 0; }
.cg-bote-exc { display: flex; align-items: flex-end; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.cg-bote-sobre { font-family: var(--fuente-titulos); font-size: 21px; color: var(--cg-texto-verde); padding-bottom: 4px; }
.cg-bote-p { margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: var(--cg-texto-verde); }
.cg-bote-bloque { margin-top: 16px; }
.cg-bote-bloque .cg-k { color: var(--cg-bronce); }
.cg-bote-reparto { display: flex; gap: 8px; }
.cg-bote-reparto .cg-interna { flex: 1; min-width: 0; }
.cg-bote-meta { display: flex; flex-direction: column; gap: 8px; }
.cg-bote-meta .mini { color: var(--cg-texto-verde); }
.cg-bote-der .cg-barra-meta { background: rgba(0, 0, 0, .25); }
.cg-bote-der .cg-barra-meta > span { background: linear-gradient(90deg, var(--cg-verde-dato), var(--cg-verde-lleno)); }
.cg-bote-ultimo { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(179, 148, 92, .22); }
.cg-bote-ultimo .cg-k { color: var(--cg-bronce); white-space: normal; }
.cg-bote-ult-fila { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cg-bote-ult-fila > b { font-size: 22px; color: var(--cg-marfil); }
.cg-bote-ult-fila span { font-size: 12px; color: var(--cg-texto-verde-2); }
.cg-bote-ult-fila span b { color: var(--cg-verde-dato); }
.cg-bote-ultimo .mini { display: block; margin-top: 6px; color: var(--cg-texto-verde-2); }
.cg-bote-misiones { margin-top: 22px; padding: 20px 26px; }
.cg-bote-misiones .mision { background: var(--cg-superficie-alta); border: 1px solid rgba(128, 98, 48, .22); color: var(--cg-texto); }
.cg-bote-misiones .mision.cumplida { background: rgba(46, 122, 98, .08); border-color: rgba(46, 122, 98, .3); }
.cg-bote-misiones .mision .recompensa { color: var(--cg-bronce-osc); }
.cg-bote-misiones .mini, .cg-bote-misiones .mini.tenue, .cg-bote-misiones .mini.suave { color: var(--cg-texto-2); }
@media (max-width: 820px) {
  .cg-chat-fila2, .cg-bote-fila2 { flex-direction: column; gap: 16px; }
  .cg-chat-izq { flex: 0 0 auto; padding: 16px 14px; min-height: 0; }
  .cg-bote-izq { flex: 0 0 auto; }
  .cg-chat-der { flex-basis: auto; padding: 16px 14px; }
  .chat-sala .chat-linea, .chat-sala .chat-linea.mia { max-width: 94%; }
  .cg-banda-botes { flex-direction: column; gap: 16px; padding: 16px 4px; }
  .cg-div { width: auto; height: 1px; align-self: auto; }
  .cg-celda-bote { padding: 0 14px; }
  .cg-bote-izq, .cg-bote-misiones { padding: 16px 14px; }
  .cg-bote-der { flex-basis: auto; padding: 18px 16px; }
  .cg-bote-reparto { flex-wrap: wrap; }
}
.cg-verde .cgp-piedra .cgp-pre, .cg-verde .cgp-piedra .cgp-cent { color: var(--cg-bronce-claro); }
.cg-verde .cgp-piedra .cgp-suf { color: var(--cg-bronce); }
/* ===================================================================== FINANZAS (encargo 056)
   Cabecera de dinero y libro de bonos. Reutiliza los tokens de esta hoja (el sistema Coliseo del
   encargo no estaba en el repo): los montos grandes en la fuente de títulos, los de la lista en
   bronce y chicos, porque son muchos. */
.fin-cab-fila { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 0; align-items: center; }
.fin-cifra { padding: 4px 24px; border-left: 1px solid var(--bronce); }
.fin-cifra:first-child { padding-left: 0; border-left: 0; }
.fin-num { font-family: var(--fuente-titulos); line-height: 1; font-size: 56px; margin: 6px 0; }
.fin-cifra-grande .fin-num { font-size: 72px; color: var(--oro); }
.fin-canjear { margin-left: 12px; white-space: nowrap; }
.fin-capsulas { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.fin-capsula { font: inherit; font-size: 13px; padding: 7px 14px; border-radius: 999px; cursor: pointer; color: var(--texto-2); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); }
.fin-capsula.activo { color: var(--oro); border-color: var(--oro); background: var(--oro-a); }
.fin-pedida { border: 1px solid var(--oro); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.fin-bonos { display: flex; flex-direction: column; }
.fin-bono { border-top: 1px solid var(--linea-suave); }
.fin-bono.apagado { opacity: .7; }
.fin-bono > summary { display: grid; grid-template-columns: minmax(0, 1.6fr) auto auto; gap: 16px; align-items: center; padding: 12px 2px; cursor: pointer; list-style: none; }
.fin-bono > summary::-webkit-details-marker { display: none; }
.fin-bono-concepto { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.fin-bono-monto { font-weight: 700; font-size: 15px; color: var(--bronce); text-align: right; min-width: 72px; }
.fin-bono-detalle { padding: 0 2px 12px; display: flex; flex-direction: column; gap: 6px; }
.fin-linea { display: inline-flex; align-items: flex-start; }
.fin-hito { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-width: 78px; position: relative; }
.fin-hito i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: block; position: relative; z-index: 1; }
.fin-hito.hecho i { background: var(--bronce); }
.fin-hito:not(:last-child)::after { content: ""; position: absolute; top: 4px; left: 50%; width: 100%; height: 2px; background: rgba(255, 255, 255, .14); }
.fin-hito.hecho:not(:last-child)::after { background: var(--bronce); }
.fin-hito em { font-style: normal; font-size: 12px; color: var(--texto-2); }
.fin-pie { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
@media (max-width: 860px) {
  .fin-cab-fila { grid-template-columns: 1fr; gap: 14px; }
  .fin-cifra { border-left: 0; padding: 0; }
  .fin-cifra-grande .fin-num { font-size: 56px; }
  .fin-num { font-size: 44px; }
  .fin-canjear { margin-left: 0; }
  .fin-bono > summary { grid-template-columns: 1fr auto; }
  .fin-bono-linea { grid-column: 1 / -1; order: 3; }
}

/* Finanzas · C (mi cuenta) y D (movimientos), encargo 056 */
.fin-cuenta-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.fin-cuenta-num { font-size: 20px; letter-spacing: .04em; }
.fin-cuenta-saldos { justify-content: flex-start; gap: 36px; }
.fin-pausa { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); color: var(--texto-2); }

/* Finanzas · niveles de Bonos (048) y comisión neta (047), encargo 062 */
.fin-niveles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 8px; }
.fin-nivel { padding: 10px 12px; border: 1px solid var(--linea-suave); border-radius: var(--r-md); opacity: .75; }
.fin-nivel.hecho { opacity: 1; border-color: var(--bronce); }
.fin-nivel.actual { opacity: 1; border-color: var(--oro); background: var(--oro-a); }
.fin-niveles-pie { margin-bottom: 12px; }
/* 084 · ¿Qué tengo abierto este mes? */
.fin-grupos { margin: 4px 0 14px; border: 1px solid var(--linea-suave); border-radius: var(--r-md); padding: 10px 12px; }
.fin-grupos > summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.fin-grupos-lista { list-style: none; margin: 10px 0 8px; padding: 0; display: grid; gap: 8px; }
.fin-grupo { display: flex; gap: 10px; align-items: flex-start; }
.fin-grupo.cerrado { opacity: .8; }
.fin-grupo-ic { width: 22px; flex: none; text-align: center; font-weight: 700; color: var(--oro); }
.fin-grupo-tx { display: grid; gap: 2px; min-width: 0; flex: 1; }
.fin-grupo-barra { display: block; height: 4px; border-radius: 2px; background: var(--linea-suave); overflow: hidden; margin-top: 3px; }
.fin-grupo-barra i { display: block; height: 100%; background: var(--oro); border-radius: 2px; }
.fin-com-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-bottom: 12px; }
.fin-com-fila > div { padding: 4px 24px; border-left: 1px solid var(--bronce); }
.fin-com-fila > div:first-child { padding-left: 0; border-left: 0; }
.fin-com-fila .fin-num { font-size: 40px; }
@media (max-width: 860px) {
  .fin-niveles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-com-fila { grid-template-columns: 1fr; gap: 12px; }
  .fin-com-fila > div { padding: 0; border-left: 0; }
}

/* ===================================================================== MI PERFIL (encargo 059)
   Ficha arriba y «Tus datos» en grupos que se pliegan. Solo tokens: el color lo pone la piel
   (encargo 060), no esta hoja. Foto cuadrada de 10 px, nunca círculo. */
.pf-ficha { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(260px, 1fr); gap: 24px; align-items: center; }
.pf-foto { position: relative; width: 120px; height: 120px; }
.pf-foto img, .pf-foto-vacia { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; border: 1px solid var(--linea); display: block; }
.pf-foto-vacia { display: grid; place-items: center; font-family: var(--fuente-titulos); font-size: 54px; color: var(--oro); background: var(--superficie-2); }
.pf-rango { position: absolute; right: -8px; bottom: -8px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--oro-tinta); background: var(--oro); border: 1px solid var(--linea-2, var(--linea)); box-shadow: 0 0 0 3px var(--linea), 0 4px 14px var(--linea); }
.pf-nombre { margin: 2px 0 4px; font-family: var(--fuente-titulos); font-size: 30px; letter-spacing: .02em; line-height: 1.1; }
.pf-cargo { font-size: 14px; color: var(--texto-2); margin-bottom: 10px; }
.pf-ficha-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.pf-avance { display: flex; flex-direction: column; gap: 6px; }
.pf-avance-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.pf-datos { padding-bottom: 8px; }
.pf-leyenda { margin: -4px 0 10px; }
.pf-grupo { border-top: 1px solid var(--linea); }
.pf-grupo > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 2px; cursor: pointer; list-style: none; }
.pf-grupo > summary::-webkit-details-marker { display: none; }
.pf-grupo > summary::before { content: "▸"; margin-right: 8px; color: var(--oro); }
.pf-grupo[open] > summary::before { content: "▾"; }
.pf-grupo-tit { flex: 1; font-family: var(--fuente-titulos); font-size: 22px; letter-spacing: .02em; }
.pf-grupo-estado { display: inline-flex; gap: 8px; align-items: center; }
.pf-grupo-cuerpo { padding: 0 2px 18px; }
.pf-quien { margin-bottom: 10px; }
.pf-fotos { margin-top: 0; padding-top: 0; border-top: 0; }
.pf-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); max-width: 640px; }
.pf-galeria img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px; }
@media (max-width: 820px) {
  .pf-ficha { grid-template-columns: 1fr; justify-items: start; }
  .pf-foto, .pf-foto img, .pf-foto-vacia { width: 100%; max-width: 320px; height: auto; aspect-ratio: 1; }
  .pf-avance { width: 100%; }
}
/* 059 (b) · Ayuda al final de Mi perfil: las preguntas reutilizan el acordeón de los grupos. */
.ay-resp { margin: 6px 0 10px; font-size: 14px; line-height: 1.5; color: var(--texto-2); }
.ay-contacto { margin-top: 10px; }
.ay-contacto ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* ===================================================================== MI PERFIL · TU DISTINCIÓN (encargo 062, patrón D)
   Pieza a la izquierda (la escalera de seis insignias) y tarjeta verde a la derecha (certificado,
   escudos y nombre completo). Solo tokens, salvo el verde de la tarjeta, que es el de la portada. */
#perfilDistincion:not(:empty) { margin-top: 20px; }
.pf-sec-cab { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.pf-sec-cab h2 { margin: 0; font-family: var(--fuente-titulos); font-size: 27px; font-weight: 600; line-height: 1; }
.pf-sec-cab::after { content: ''; flex: 1; height: 1px; background: var(--linea); order: 2; }
.pf-sec-cab .ante { order: 3; font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--bronce); white-space: nowrap; }
.pf-dist { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: 22px; align-items: stretch; }
.pf-dist-pieza { display: flex; flex-direction: column; justify-content: space-between; }
.pf-dist .pm-peldano b { font-size: 12px; letter-spacing: .02em; }
.pf-dist .pm-peldano small { font-size: 12px; }
.pf-dist-pie { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea-suave); font-size: 13px; color: var(--texto-2); }
.pf-dist-pie b { color: var(--texto); }
.pf-dist-verde { display: flex; flex-direction: column; gap: 14px; padding: 20px 24px; border-radius: var(--r-md); border: 1px solid rgba(179, 148, 92, .45); background: linear-gradient(180deg, #14473C 0%, #103C34 55%, #0B332B 100%); color: #F3EBD9; }
.pf-dist-verde .k { display: block; font-size: 12px; font-weight: 700; letter-spacing: .16em; color: #93B3A8; margin-bottom: 4px; }
.pf-dist-id { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(179, 148, 92, .22); }
.pf-dist-medalla { width: 64px; height: 64px; object-fit: contain; flex: none; }
.pf-dist-id h3 { margin: 0; font-family: var(--fuente-titulos); font-size: 26px; font-weight: 600; line-height: 1.1; }
.pf-dist-id .sub { margin-top: 4px; font-size: 12px; color: #8CD6AA; font-variant-numeric: tabular-nums; }
.pf-dist-enlaces { display: flex; gap: 18px; }
.pf-dist-enlaces a, .pf-dist-ant a { font-size: 13px; font-weight: 700; color: #D9B871; text-decoration: none; }
.pf-dist-celdas { display: grid; gap: 8px; }
.pf-dist-celdas > div { padding: 9px 10px; border-radius: 7px; background: rgba(0, 0, 0, .2); border: 1px solid rgba(179, 148, 92, .2); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pf-dist-celdas .k { font-size: 12px; letter-spacing: .1em; color: #7E9A92; margin: 0; }
.pf-dist-celdas b { font-size: 17px; font-variant-numeric: tabular-nums; }
.pf-dist-celdas b.chica { font-size: 14px; }
.pf-dist-celdas b small { font-size: 12px; font-weight: 500; color: #93B3A8; }
.pf-dist-nombre .fila { display: flex; gap: 8px; }
.pf-dist-nombre input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 7px; border: 1px solid rgba(179, 148, 92, .35); background: rgba(0, 0, 0, .25); color: inherit; font: inherit; }
.pf-dist-nombre .mini { margin-top: 6px; color: #93B3A8; }
.pf-dist-nombre .mini b.mal { color: #F2B28C; }
.pf-dist-ant summary { cursor: pointer; font-size: 12px; color: #93B3A8; }
.pf-dist-ant ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.pf-dist-ant li { display: flex; gap: 10px; align-items: baseline; }
.pf-dist-ant li span { flex: 1; color: #93B3A8; font-variant-numeric: tabular-nums; }
.pf-dist-verde .ir { margin-top: auto; align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: #D9B871; }
.pf-dist-verde .ir::after { content: " →"; }
.pf-dist-verde .pm-boton-fino { align-self: flex-start; }
@media (max-width: 960px) {
  .pf-dist { grid-template-columns: minmax(0, 1fr); }
  .pf-dist > * { min-width: 0; }
  .pf-dist .pm-peldano b { font-size: 12px; }
}
/* A 390 px la escalera de 6 insignias no cabía en una fila: pasa a 3 + 3, sin el hilo, con rótulos de 12 px, para que no ensanche la página. */
@media (max-width: 480px) {
  .pf-sec-cab { flex-wrap: wrap; gap: 6px 12px; }
  .pf-sec-cab .ante { white-space: normal; }
  .pf-dist .pm-escalera { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 6px; }
  .pf-dist .pm-escalera::before, .pf-dist .pm-escalera::after { display: none; }
  .pf-dist .pm-peldano { min-width: 0; }
  .pf-dist .pm-peldano b { font-size: 12px; letter-spacing: 0; overflow-wrap: anywhere; }
}

/* ===================================================================== FINANZAS · LA FORMA DE LA PORTADA (encargo 065)
   Cabecera de página compartida (coliseo_paginas.css, `cgp-`) + la libreta a la derecha, portada de
   `maqueta/paginas/fin_cuenta.html` con prefijo `cg-`. Los colores salen de los tokens `--cg-*` de la
   portada; el segundo valor de cada `var()` es solo el respaldo mientras ese token no esté en tokens.css. */
.cg-fin { background: var(--cg-marfil, #F4F0E7); border-radius: 12px; overflow: hidden; color: var(--cg-texto, #172B26); }
.cg-fin-cuerpo { max-width: 1520px; margin: 0 auto; padding: 26px 32px 40px; box-sizing: border-box; }
.cg-fin-cab > .esq { display: none; }
.cg-fin-nota { margin: 10px 0 0; max-width: 470px; font-size: 12.5px; line-height: 1.55; color: var(--cg-texto-2, #5F645C); }
.cg-libreta { position: relative; flex: 0 0 auto; width: 720px; max-width: 100%; box-sizing: border-box; padding: 18px 22px 16px; border-radius: 10px;
  border: 1px solid rgba(128, 98, 48, .34); background-color: var(--cg-superficie, #FAF7F0);
  background-image: linear-gradient(rgba(255, 253, 248, .9), rgba(246, 241, 230, .94)), url('/assets/coliseo/textura_sillar.png'); background-size: auto, 320px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 18px 36px rgba(50, 38, 18, .22); }
.cg-libreta::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 8px; border-radius: 10px 10px 0 0;
  background-color: var(--cg-sillar, #E6DAC0); background-image: linear-gradient(rgba(168, 142, 100, .34), rgba(136, 112, 76, .5)), url('/assets/coliseo/textura_sillar.png');
  background-size: auto, 170px; background-blend-mode: multiply, normal; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 0 rgba(128, 98, 48, .4); }
.cg-libreta > * { position: relative; }
.cg-libreta svg { width: 20px; height: 20px; stroke: var(--cg-bronce-osc, #806230); fill: none; flex: 0 0 auto; }
.cg-libreta-cab { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(128, 98, 48, .2); }
.cg-libreta-num { white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; font-size: 19px; font-weight: 800; letter-spacing: 1.6px; color: var(--cg-texto, #172B26); }
.cg-libreta-pausa { margin-left: auto; font-size: 12px; color: var(--cg-texto-3, #666B64); text-align: right; }
.cg-libreta-celdas { display: flex; align-items: stretch; padding: 14px 0 12px; }
.cg-libreta-celdas .cgp-celda { flex: 1 1 0; padding: 0 18px; }
.cg-libreta-celdas .cgp-celda:first-child { padding-left: 0; }
.cg-libreta-celdas .cgp-celda > span:last-child { flex: 1 1 auto; }
.cg-libreta-celdas .cgp-pie { white-space: normal; }
.cg-fin-ug { display: block; font-size: 26px; line-height: 40px; color: var(--cg-texto, #172B26); }
.cg-fin-ug-vacia { color: var(--cg-texto-3, #666B64); }
.cg-libreta-bot { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(128, 98, 48, .2); }
.cg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 7px; border: 0; margin: 0; cursor: pointer;
  font-family: var(--fuente); font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; text-align: center; }
.cg-btn.cg-pri { background: linear-gradient(180deg, var(--cg-bronce, #B3945C), var(--cg-bronce-osc, #806230)); color: var(--cg-superficie-alta, #FFFDF8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 10px rgba(96, 72, 32, .28); }
.cg-btn.cg-lin { background: transparent; border: 1px solid rgba(179, 148, 92, .55); color: var(--cg-bronce-osc, #806230); }
.cg-btn.cg-apag { background: var(--cg-papel-3, #F2ECDF); color: var(--cg-texto-3, #666B64); box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .18); cursor: default; }
.cg-btn.cg-chico { height: 30px; padding: 0 10px; font-size: 12px; }
.cg-btn.cg-chico svg { width: 13px; height: 13px; }
.cg-btn:disabled { cursor: default; }
@media (max-width: 820px) {
  .cg-fin-cuerpo { padding: 18px 14px 30px; }
  .cg-libreta { width: 100%; padding: 14px; }
  .cg-libreta-cab { flex-wrap: wrap; }
  .cg-libreta-pausa { flex-basis: 100%; margin-left: 0; text-align: left; }
  .cg-libreta-celdas { flex-wrap: wrap; }
  .cg-libreta-celdas .cgp-celda { flex: 1 1 100%; padding: 8px 0; }
  .cg-libreta-celdas .cgp-div { display: none; }
  .cg-libreta-bot { flex-wrap: wrap; }
  .cg-libreta-bot .cg-btn { flex: 1 1 100% !important; }
}

/* ---- 065 · tarea 2 · LA CUENTA: Mis bonos + Tu liquidación (portada de `fin_cuenta.html`, prefijo `cg-`) ---- */
.cg-aviso { display: flex; align-items: center; gap: 14px; padding: 12px 20px; margin-bottom: 22px; border-radius: 10px;
  background: linear-gradient(180deg, var(--cg-aviso-1, #F6E9CC), var(--cg-aviso-2, #EFDFBB)); box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .35); }
.cg-aviso svg { width: 18px; height: 18px; stroke: var(--cg-bronce-osc, #806230); flex: 0 0 auto; }
.cg-aviso p { margin: 0; font-size: 13px; color: #4A3C22; }
.cg-aviso .cg-aviso-btn { height: 34px; font-size: 12px; background: var(--cg-bronce-osc, #806230); color: var(--cg-superficie-alta, #FFFDF8); }
.cg-fila2 { display: flex; gap: 22px; align-items: stretch; }
.cg-sup { position: relative; background: var(--cg-superficie, #FAF7F0); border: 1px solid rgba(128, 98, 48, .34); border-radius: 10px; box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 12px 28px rgba(60, 42, 18, .14); color: var(--cg-texto, #172B26); }
.cg-sup::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 8px; border-radius: 10px 10px 0 0;
  background-color: var(--cg-sillar, #E6DAC0); background-image: linear-gradient(rgba(168, 142, 100, .34), rgba(136, 112, 76, .5)), url('/assets/coliseo/textura_sillar.png');
  background-size: auto, 170px; background-blend-mode: multiply, normal; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 0 rgba(128, 98, 48, .4); }
.cg-sup > * { position: relative; }
.cg-sup-piedra { background-image: linear-gradient(rgba(255, 253, 248, .9), rgba(246, 241, 230, .94)), url('/assets/coliseo/textura_sillar.png'); background-size: auto, 320px; }
.cg-fin-bonos { flex: 1 1 0; min-width: 0; padding: 20px 26px; }
.cg-fin-liq { flex: 0 0 400px; padding: 20px 24px; display: flex; flex-direction: column; }
.cg-cab { display: flex; align-items: center; gap: 14px; margin: 0 0 6px; flex-wrap: wrap; }
.cg-sec { font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-size: 27px; font-weight: 600; line-height: 1; margin: 0; color: var(--cg-texto, #172B26); }
.cg-hilo { flex-grow: 1; height: 1px; min-width: 16px; background: rgba(128, 98, 48, .28); }
.cg-pils { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.cg-pil { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; border: 1px solid rgba(128, 98, 48, .35); background: transparent;
  color: var(--cg-texto-2, #5F645C); font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.cg-pil.on { background: var(--cg-verde, #103C34); color: var(--cg-bronce-claro, #E8D5A8); border-color: var(--cg-verde, #103C34); font-weight: 700; }
.cg-ver { font-size: 12px; font-weight: 700; color: var(--cg-bronce-osc, #806230); white-space: nowrap; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.cg-bono { border-bottom: 1px solid rgba(128, 98, 48, .16); }
.cg-bono:last-child { border-bottom: 0; }
.cg-bono.apagado { opacity: .65; }
.cg-bono > summary { display: flex; align-items: center; gap: 13px; padding: 14px 0; cursor: pointer; list-style: none; }
.cg-bono > summary::-webkit-details-marker { display: none; }
.cg-bono-concepto { flex: 1 1 auto; min-width: 0; }
.cg-bono-concepto b { display: block; font-size: 14px; overflow-wrap: anywhere; }
.cg-bono-sub { display: block; font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-premio { flex: 0 0 auto; min-width: 64px; text-align: right; font-size: 15px; font-weight: 700; color: var(--cg-bronce-osc, #806230); white-space: nowrap; }
.cg-bono-detalle { padding: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.cg-vida { display: flex; align-items: center; min-width: 300px; }
.cg-vida .cg-p { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; letter-spacing: .6px; color: #666B64; }
.cg-vida .cg-p i { width: 13px; height: 13px; border-radius: 50%; background: var(--cg-superficie-alta, #FFFDF8); border: 2px solid #C8BDA4; }
.cg-vida .cg-p.ok { color: var(--cg-ok, #1F6349); }
.cg-vida .cg-p.ok i { background: var(--verde-f, #2E7A62); border-color: var(--verde-f, #2E7A62); box-shadow: 0 0 0 3px rgba(46, 122, 98, .16); }
.cg-vida .cg-t { flex: 1 1 auto; height: 2px; background: #DED6C4; margin: 0 4px 16px; min-width: 24px; }
.cg-vida .cg-t.ok { background: var(--verde-f, #2E7A62); }
.cg-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 5px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.cg-tag.cg-gris { background: var(--cg-papel-3, #F2ECDF); color: var(--cg-texto-2, #5F645C); box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .2); }
.cg-bonos-mas { display: flex; justify-content: flex-end; margin-top: 10px; }
.cg-nota-reloj { display: flex; gap: 10px; align-items: center; margin-top: 14px; font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-nota-reloj svg { width: 15px; height: 15px; stroke: var(--cg-bronce-osc, #806230); flex: 0 0 auto; }
.cg-vacio { font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-style: italic; font-size: 19px; color: var(--cg-texto-3, #666B64); padding: 6px 0; }
.cg-pedida { border: 1px solid rgba(179, 148, 92, .55); border-radius: 8px; padding: 12px 14px; margin: 8px 0; display: flex; flex-direction: column; gap: 8px; background: rgba(179, 148, 92, .08); }
.cg-fin-bonos .fin-niveles, .cg-fin-bonos .fin-niveles-pie { color: var(--cg-texto, #172B26); }
/* Tu liquidación */
.cg-liq-cab { display: flex; align-items: center; gap: 14px; }
.cg-liq-total { display: block; min-height: 44px; }
.cg-liq-cuando { margin-left: auto; text-align: right; font-size: 12px; line-height: 1.5; color: var(--cg-texto-2, #5F645C); }
.cg-liq-cuando b { color: var(--cg-texto, #172B26); }
.cg-liq-form { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; }
.cg-liq-desglose { display: flex; flex-direction: column; gap: 0; margin-top: 12px; padding: 0; border: 0; background: none; }
.cg-liq-desglose > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 13px; border-bottom: 1px solid rgba(128, 98, 48, .16); }
.cg-liq-desglose > div:last-child { border-bottom: 0; }
.cg-liq-aviso { padding: 10px 12px; border-radius: 7px; background: rgba(179, 148, 92, .12); font-size: 12px; line-height: 1.5; color: #5E4720; }
.cg-liq-pie { font-size: 12px; color: var(--cg-texto-3, #666B64); text-align: center; }
.cg-liq-corte { font-size: 12px; color: var(--cg-texto-3, #666B64); text-align: center; }
.cg-liq-bonos > summary, .cg-liq-ya > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--cg-bronce-osc, #806230); }
.cg-liq-ya { margin-top: auto; padding-top: 12px; }
.cg-liq-ya .liq-historial { margin-top: 8px; }
.cg-btn.cg-ancho { width: 100%; }
.cg-btn:disabled.cg-pri { opacity: .5; }
/* Lo plegado bajo la liquidación */
.cg-fin-mas { margin-top: 22px; }
.cg-fin-mas > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--cg-bronce-osc, #806230); padding: 8px 0; }
@media (max-width: 1100px) {
  .cg-fila2 { flex-direction: column; }
  .cg-fin-liq { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .cg-fin-bonos { padding: 16px 14px; }
  .cg-fin-liq { padding: 16px 14px; }
  .cg-bono > summary { flex-wrap: wrap; }
  .cg-vida { order: 3; flex: 1 1 100%; min-width: 0; }
  .cg-aviso { flex-wrap: wrap; padding: 12px 14px; }
}
/* los campos del formulario de la liquidación sobre papel (los del resto de la app son de fondo oscuro) */
.cg-fin-liq .campo label { color: var(--cg-texto-2, #5F645C); }
.cg-fin-liq .campo input { background: var(--cg-superficie-alta, #FFFDF8); color: var(--cg-texto, #172B26); border: 1px solid rgba(128, 98, 48, .3); border-radius: 7px; }
.cg-fin-liq .campo input::placeholder { color: var(--cg-texto-3, #666B64); }
.cg-fin-liq .mini.tenue { color: var(--cg-texto-3, #666B64); }
.cg-vacio { text-transform: none; font-variant: normal; letter-spacing: 0; }

/* ---- 065 · tarea 3 · TU MES (portada de `fin_mes.html`, prefijo `cg-`) ---- */
.cg-cab-grande .cg-sec { font-size: 31px; }
.cg-rot { font-size: 12px; letter-spacing: 2px; font-weight: 700; color: var(--cg-bronce-osc, #806230); white-space: nowrap; }
.cg-banda { display: flex; flex-wrap: nowrap; align-items: stretch; padding: 17px 4px; }
.cg-banda .cgp-celda { flex: 1 1 0; padding: 0 22px; }
.cg-banda .cgp-celda > span:last-child { flex: 1 1 auto; }
.cg-banda .cgp-pie { white-space: normal; }
.cg-fin-mes-fila { margin-top: 22px; }
.cg-fin-mes-escala { flex: 1 1 0; min-width: 0; padding: 20px 26px; }
.cg-fin-mes-meta { flex: 0 0 400px; padding: 22px 24px; display: flex; flex-direction: column; }
.cg-tabla { width: 100%; border-collapse: collapse; }
.cg-tabla th { font-size: 12px; letter-spacing: 1.6px; font-weight: 700; color: var(--cg-texto-2, #5F645C); text-align: left; padding: 0 0 10px; border-bottom: 1px solid rgba(128, 98, 48, .28); }
.cg-tabla td { padding: 12px 0; border-bottom: 1px solid rgba(128, 98, 48, .14); font-size: 14px; font-variant-numeric: tabular-nums lining-nums; }
.cg-tabla td.cg-der, .cg-tabla th.cg-der { text-align: right; }
.cg-nota-mes { margin-top: 12px; font-size: 12px; color: var(--cg-texto-3, #666B64); }
/* La tarjeta verde: sobre fondo oscuro, así que sus textos son claros (no los del papel) */
.cg-verde { background: linear-gradient(180deg, #14473C 0%, var(--cg-verde, #103C34) 55%, #0B332B 100%); border-color: rgba(179, 148, 92, .45); box-shadow: 0 12px 28px rgba(30, 20, 8, .26); color: #F3EBD9; }
.cg-verde::before { display: none; }
.cg-k { display: block; font-size: 12px; letter-spacing: 1.8px; font-weight: 700; color: var(--cg-texto-2, #5F645C); margin-bottom: 6px; }
.cg-k.cg-k-m { color: #8CD6AA; margin-top: 4px; }
.cg-barra { position: relative; height: 10px; border-radius: 999px; background: rgba(128, 98, 48, .15); box-shadow: inset 0 1px 2px rgba(80, 62, 34, .18); }
.cg-barra > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--cg-bronce, #B3945C), var(--cg-bronce-osc, #806230)); }
.cg-verde .cg-barra { background: rgba(0, 0, 0, .25); }
.cg-verde .cg-barra > span { background: linear-gradient(90deg, #8CD6AA, #2E7A62); }
.cg-barra-gruesa { height: 12px; margin-top: 12px; }
.cg-meta-pie { display: flex; justify-content: space-between; margin-top: 7px; font-size: 12px; color: #93B3A8; }
.cg-meta-pie strong { color: #F3EBD9; }
.cg-meta-pie span:last-child strong { color: var(--cg-bronce-claro, #E8D5A8); }
.cg-desp { margin-top: 18px; border-top: 1px solid rgba(179, 148, 92, .22); }
.cg-desp > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 0; cursor: pointer; }
.cg-desp > summary::-webkit-details-marker { display: none; }
.cg-desp-t { font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-size: 19px; font-weight: 600; color: #FAF7F0; }
.cg-desp > summary::after { content: '⌄'; margin-left: auto; color: #93B3A8; font-size: 20px; line-height: 1; transition: transform .15s; }
.cg-desp[open] > summary::after { transform: rotate(180deg); }
.cg-desp-cuerpo { font-size: 12px; line-height: 1.6; color: #A8C4BA; padding-bottom: 6px; }
.cg-desp-cuerpo b { color: #F3EBD9; }
.cg-ver-claro { margin-top: auto; padding-top: 14px; color: var(--cg-bronce-claro, #E8D5A8); text-align: left; }
@media (max-width: 1100px) {
  .cg-fin-mes-meta { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .cg-banda { flex-wrap: wrap; padding: 8px 4px; }
  .cg-banda .cgp-celda { flex: 1 1 100%; padding: 12px 14px; }
  .cg-banda .cgp-div { display: none; }
  .cg-fin-mes-escala { padding: 16px 14px; }
  .cg-fin-mes-meta { padding: 18px 16px; }
  .cg-tabla th, .cg-tabla td { font-size: 12px; }
  .cg-cab .cg-rot { white-space: normal; flex-basis: 100%; order: 3; line-height: 1.6; }
  .cg-cab .cg-hilo { display: none; }
}

/* ---- 065 · tarea 4 · EXTRAORDINARIOS (portada de `fin_extra.html`, prefijo `cg-`) ---- */
.cg-fin-extra-fila { margin-top: 22px; }
.cg-fin-extra-lista { flex: 1 1 0; min-width: 0; padding: 20px 26px; }
.cg-fin-extra-meta { flex: 0 0 380px; padding: 22px 24px; display: flex; flex-direction: column; }
.cg-xtr-proxs { display: flex; gap: 14px; margin-bottom: 14px; }
.cg-xtr-prox { flex: 1 1 0; min-width: 0; padding: 16px 18px; border-radius: 7px; border: 1px solid rgba(128, 98, 48, .18); background: transparent; }
.cg-xtr-prox-on { background: var(--cg-superficie-alta, #FFFDF8); border-color: rgba(128, 98, 48, .3); }
.cg-xtr-prox-on .cg-k { color: var(--cg-bronce-osc, #806230); }
.cg-xtr-prox-t { font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-size: 24px; font-weight: 600; line-height: 1.1; color: var(--cg-texto, #172B26); overflow-wrap: anywhere; }
.cg-xtr-prox-fila { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.cg-xtr-barra { flex: 1 1 auto; }
.cg-premio { flex: 0 0 auto; font-size: 15px; font-weight: 700; color: var(--cg-bronce-osc, #806230); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.cg-xtr-prox-pie { margin-top: 6px; font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-xtr-cats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; align-items: start; }
.cg-desp-p { border-top: 1px solid rgba(128, 98, 48, .16); }
.cg-desp-p > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 0; cursor: pointer; }
.cg-desp-p > summary::-webkit-details-marker { display: none; }
.cg-desp-p-t { font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-size: 20px; font-weight: 600; color: var(--cg-texto, #172B26); }
.cg-desp-p-n { margin-left: auto; font-size: 12px; color: var(--cg-texto-2, #5F645C); white-space: nowrap; }
.cg-desp-p > summary::after { content: '⌄'; color: var(--cg-bronce-osc, #806230); font-size: 20px; line-height: 1; transition: transform .15s; }
.cg-desp-p[open] > summary::after { transform: rotate(180deg); }
.cg-fin-cobrado { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 16px 22px; margin-bottom: 20px; }
.cg-fin-cobrado-cifra { display: block; min-height: 44px; }
.cg-fin-cobrado-pie { font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-fin-mas .vidrio.tarjeta { color: var(--texto); }   /* lo de siempre vive en tarjetas oscuras: no hereda el texto oscuro de la página clara */
.cg-vacio-n { margin: 0; padding: 6px 0; font-size: 13px; color: var(--cg-texto-2, #5F645C); }
.cg-liq-campos { display: flex; flex-direction: column; gap: 12px; }
.cg-xtr-filas { padding-bottom: 10px; }
.cg-xtr-fila { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px dashed rgba(128, 98, 48, .16); }
.cg-xtr-fila b { font-size: 13px; color: var(--cg-texto, #172B26); }
.cg-xtr-fila p { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--cg-texto-2, #5F645C); }
.cg-xtr-id { display: inline-block; text-align: center; padding: 4px 0; border-radius: 6px; font-size: 12px; font-weight: 700; color: var(--cg-texto-3, #666B64); border: 1px solid rgba(128, 98, 48, .24); }
.cg-xtr-id.ganado { background: var(--cg-bronce, #B3945C); border-color: var(--cg-bronce-osc, #806230); color: #fff; }
.cg-xtr-v { text-align: right; font-size: 13px; font-weight: 700; color: var(--cg-bronce-osc, #806230); font-variant-numeric: tabular-nums lining-nums; }
.cg-xtr-v small { display: block; font-size: 12px; font-weight: 600; color: #2E7A62; }
.cg-xtr-mas { font-style: italic; text-transform: none; font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-size: 21px; color: #A8C4BA; margin-top: 4px; }
.cg-xtr-frase { font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-size: 24px; color: #F3EBD9; line-height: 1.2; }
.cg-xtr-irias { margin-top: 18px; }
.cg-verde .cg-xtr-irias .cg-k { color: #93B3A8; }
.cg-xtr-irias-fila { display: flex; gap: 8px; }
.cg-interna { flex: 1 1 0; min-width: 0; padding: 9px 10px; border-radius: 7px; background: rgba(0, 0, 0, .2); border: 1px solid rgba(179, 148, 92, .2); }
.cg-interna .cg-k { font-size: 12px; letter-spacing: 1.2px; color: #93B3A8; margin-bottom: 4px; }
.cg-interna b { font-variant-numeric: tabular-nums lining-nums; font-size: 17px; font-weight: 700; color: #F3EBD9; }
.cg-xtr-irias-pie { font-size: 12px; color: #93B3A8; margin-top: 6px; }
.cg-xtr-nota { margin-top: auto; padding-top: 16px; font-size: 12px; line-height: 1.55; color: #A8C4BA; }
@media (max-width: 1100px) {
  .cg-fin-extra-meta { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .cg-fin-extra-lista { padding: 16px 14px; }
  .cg-fin-extra-meta { padding: 18px 16px; }
  .cg-xtr-proxs { flex-direction: column; }
  .cg-xtr-cats { grid-template-columns: 1fr; }
}

/* ---- 065 · tarea 5 · DEPÓSITOS A PLAZO (portada de `fin_depositos.html`, prefijo `cg-dep-`) ---- */
.cg-tag.cg-bronce { background: var(--cg-superficie-alta, #FFFDF8); color: var(--cg-bronce-osc, #806230); box-shadow: inset 0 0 0 1px var(--cg-bronce, #B3945C); }
.cg-dep-sim { flex: 1 1 0; min-width: 0; padding: 22px 26px 20px; }
.cg-dep-lado { flex: 0 0 380px; padding: 22px 24px; display: flex; flex-direction: column; }
.cg-dep-mis { flex: 1 1 0; min-width: 0; padding: 18px 26px 16px; }
.cg-dep-simu { display: flex; align-items: center; gap: 22px; }
.cg-dep-monto-col { flex: 1 1 0; min-width: 0; }
.cg-dep-toca-col { flex: 1 1 0; min-width: 0; }
.cg-dep-monto { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; border-bottom: 2px solid var(--cg-bronce, #B3945C); padding-bottom: 4px; }
.cg-dep-monto span { font-size: 15px; font-weight: 700; color: var(--cg-bronce-osc, #806230); }
.cg-dep-monto input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; background: transparent; outline: none; font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-size: 40px; font-weight: 600; line-height: 1.1; color: var(--cg-texto, #172B26); font-variant-numeric: lining-nums; }
.cg-dep-monto:focus-within { border-bottom-color: var(--cg-bronce-osc, #806230); }
.cg-dep-aviso { margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--cg-bronce-osc, #806230); }
.cg-dep-flecha { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(179, 148, 92, .12); box-shadow: inset 0 0 0 1px rgba(179, 148, 92, .4); }
.cg-dep-flecha svg { width: 22px; height: 22px; stroke: var(--cg-bronce, #B3945C); }
.cg-k.cg-k-b { color: var(--cg-bronce-osc, #806230); margin-bottom: 8px; }
.cg-dep-toca { font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-size: 34px; font-weight: 600; line-height: 1; color: var(--cg-texto, #172B26); font-variant-numeric: lining-nums; }
.cg-dep-gana { margin-top: 6px; font-size: 13px; color: var(--cg-texto-2, #5F645C); }
.cg-dep-gana b { color: var(--cg-bronce-osc, #806230); font-size: 15px; }
.cg-dep-nota { margin-top: 8px; font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-dep-plazos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.cg-dep-plazo { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 14px 12px; border-radius: 9px; background: var(--cg-superficie-alta, #FFFDF8); border: 1px solid rgba(128, 98, 48, .22); text-align: left; font-family: inherit; cursor: default; }
.cg-dep-plazo.cand { cursor: pointer; box-shadow: 0 0 0 2px var(--cg-bronce, #B3945C); }
.cg-dep-plazo.on { background: linear-gradient(180deg, #14473C, #0B332B); border-color: #0B332B; box-shadow: 0 0 0 3px rgba(179, 148, 92, .35), 0 10px 20px rgba(11, 51, 43, .25); }
.cg-dep-pz { font-size: 12px; letter-spacing: 1.8px; font-weight: 800; color: var(--cg-texto-2, #5F645C); }
.cg-dep-pc { font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-size: 30px; font-weight: 700; line-height: 1; color: var(--cg-texto, #172B26); font-variant-numeric: lining-nums; }
.cg-dep-tr { font-size: 12px; line-height: 1.35; color: var(--cg-texto-2, #5F645C); }
.cg-dep-gn { font-size: 12px; font-weight: 700; line-height: 1.35; color: var(--cg-bronce-osc, #806230); }
.cg-dep-plazo.on .cg-dep-pz { color: #8CD6AA; }
.cg-dep-plazo.on .cg-dep-pc, .cg-dep-plazo.on .cg-dep-gn { color: var(--cg-bronce-claro, #E8D5A8); }
.cg-dep-plazo.on .cg-dep-tr { color: #A8C4BA; }
.cg-dep-notas { display: flex; gap: 18px; margin-top: 14px; font-size: 12px; line-height: 1.55; color: var(--cg-texto-2, #5F645C); }
.cg-dep-notas > span { flex: 1; }
.cg-dep-notas svg { width: 15px; height: 15px; vertical-align: -3px; stroke: var(--cg-bronce-osc, #806230); }
.cg-k.cg-k-v { color: #8CD6AA; margin: 10px 0 4px; }
.cg-dep-pie-v { font-size: 12px; color: #A8C4BA; margin-top: 6px; }
.cg-dep-pie-v b { color: var(--cg-bronce-claro, #E8D5A8); }
.cg-dep-ancho { width: 100%; margin-top: 18px; justify-content: center; }
.cg-dep-pronto { margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: .4px; color: var(--cg-bronce-claro, #E8D5A8); text-align: center; }
.cg-dep-pronto-c { color: var(--cg-bronce-osc, #806230); }
.cg-dep-tope { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(179, 148, 92, .22); }
.cg-dep-tope-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; font-size: 12px; color: var(--cg-bronce-claro, #E8D5A8); }
.cg-dep-fila { display: flex; align-items: flex-start; gap: 14px; padding: 4px 0 12px; }
.cg-dep-fila + .cg-dep-fila { border-top: 1px solid rgba(128, 98, 48, .16); padding-top: 14px; }
.cg-dep-fila-cuerpo { flex: 1; min-width: 0; }
.cg-dep-fila-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cg-dep-fila-cab > b { font-size: 18px; color: var(--cg-texto, #172B26); }
.cg-dep-fila-plazo { font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-size: 19px; font-weight: 600; color: var(--cg-texto, #172B26); font-variant-numeric: lining-nums; }
.cg-dep-fila-fechas { margin-left: auto; font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-dep-barra { margin-top: 10px; height: 8px; }
.cg-dep-fila-pie { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 7px; font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-dep-fila-pie b { color: var(--cg-texto, #172B26); }
.cg-dep-fila-pie b.cg-dep-bronce { color: var(--cg-bronce-osc, #806230); }
.cg-dep-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--cg-papel-3, #F2ECDF); box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .2); }
.cg-dep-ico svg { width: 20px; height: 20px; stroke: var(--cg-verde-claro, #2E6B57); }
.cg-dep-ops { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-dep-op { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(128, 98, 48, .35); background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--cg-texto, #172B26); }
button.cg-dep-op { cursor: pointer; background: var(--cg-superficie-alta, #FFFDF8); }
.cg-dep-op-txt { cursor: default; }
.cg-dep-decide { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.cg-dep-ayuda { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--cg-texto-2, #5F645C); }
.cg-dep-mas { gap: 0; }
.cg-dep-mas-cab { display: flex; align-items: center; gap: 14px; }
.cg-dep-mas-t { display: block; font-size: 13px; line-height: 1.5; color: var(--cg-texto-2, #5F645C); }
.cg-dep-pie-c { margin-top: auto; padding-top: 14px; font-size: 12px; line-height: 1.5; color: var(--cg-texto-3, #666B64); }
.cg-dep-explorar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cg-dep-exp { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.cg-dep-exp > div { flex: 1; min-width: 0; }
.cg-dep-exp b { display: block; font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-size: 21px; font-weight: 600; line-height: 1.1; color: var(--cg-texto, #172B26); }
.cg-dep-exp span { display: block; font-size: 12px; color: var(--cg-texto-2, #5F645C); margin-top: 3px; }
.cg-dep-exp > span.cg-tag { display: inline-flex; margin-top: 0; }
@media (max-width: 1100px) {
  .cg-dep-lado { flex: 1 1 auto; }
  .cg-dep-plazos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cg-dep-sim { padding: 18px 16px; }
  .cg-dep-mis { padding: 16px 14px; }
  .cg-dep-lado { padding: 18px 16px; }
  .cg-dep-simu { flex-direction: column; align-items: stretch; }
  .cg-dep-flecha { transform: rotate(90deg); align-self: center; }
  .cg-dep-plazos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cg-dep-notas { flex-direction: column; gap: 8px; }
  .cg-dep-explorar { grid-template-columns: 1fr; }
  .cg-dep-fila-fechas { margin-left: 0; flex-basis: 100%; }
}
/* 5-oct (PARTY): la tabla aprobada por José tiene 7 plazos. En escritorio van 4 + 3 (la segunda fila centrada); en
   tableta y celular, la última carta (1 año) ocupa la fila entera en vez de quedar sola en una columna. */
.cg-dep-plazos.cg-dep-7 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.cg-dep-plazos.cg-dep-7 > * { grid-column: span 2; }
.cg-dep-plazos.cg-dep-7 > :nth-child(5) { grid-column: 2 / span 2; }
@media (max-width: 1100px) {
  .cg-dep-plazos.cg-dep-7 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cg-dep-plazos.cg-dep-7 > *, .cg-dep-plazos.cg-dep-7 > :nth-child(5) { grid-column: auto; }
  .cg-dep-plazos.cg-dep-7 > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .cg-dep-plazos.cg-dep-7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ENCARGO 065 · tarea 6: Movimientos con la forma de la maqueta (fin_mov.html). */
.cg-fin-mov-caja { padding: 18px 26px 10px; }
.cg-mov td { vertical-align: top; }
.cg-mov-cargo { color: var(--cg-rojo, #B4472F); }
.cg-mov-abono { color: var(--cg-verde-ok, #1F6349); }
.cg-mov-pie { padding: 12px 0 6px; font-size: 12px; color: var(--cg-texto-3, #666B64); }

/* ===================================================================== MI PERFIL · LA FORMA DE LA PORTADA (encargo 066)
   Cabecera de página compartida (`cgp-`, coliseo_paginas.css) con retrato, frase, avance y la credencial a la derecha:
   portada de `maqueta/paginas/per_grado.html` con prefijo `cg-`. Tarea 1: la cabecera y las cinco pestañas. */
.cg-per { background: var(--cg-marfil, #F4F0E7); border-radius: 12px; overflow: hidden; color: var(--cg-texto, #172B26); }
.cg-per-cuerpo { padding-top: 26px; }
.cg-per-cab > .esq { display: none; }
.cgp-retrato { position: relative; }
.cg-per-inicial { display: grid; place-items: center; width: 132px; height: 170px; background: var(--cg-papel-3, #F2ECDF); color: var(--cg-bronce-osc, #806230);
  font: 600 64px/1 var(--fuente-titulos); }
.cg-per-camara { position: absolute; right: -6px; bottom: -6px; width: 32px; height: 32px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(128, 98, 48, .5); background: var(--cg-superficie-alta, #FFFDF8); box-shadow: 0 4px 10px rgba(50, 38, 18, .25); }
.cg-per-camara svg { width: 16px; height: 16px; stroke: var(--cg-bronce-osc, #806230); fill: none; }
.cg-per-lapiz { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid rgba(128, 98, 48, .4); background: rgba(255, 253, 248, .7); }
.cg-per-lapiz svg { width: 13px; height: 13px; stroke: var(--cg-bronce-osc, #806230); fill: none; }
.cg-per-sin { font-style: normal; font-family: var(--fuente); font-size: 13px; color: var(--cg-texto-3, #666B64); }
.cg-per-avance { display: flex; align-items: center; gap: 12px; margin-top: 14px; max-width: 440px; }
.cg-per-avance-t { font-size: 12px; color: #4A4F48; white-space: nowrap; }
.cg-per-avance .perfil-pct { font: inherit; font-weight: 700; color: var(--cg-texto, #172B26); }
.cg-per-barra { position: relative; flex: 1 1 auto; height: 8px; border-radius: 999px; background: rgba(128, 98, 48, .15); box-shadow: inset 0 1px 2px rgba(80, 62, 34, .18); }
.cg-per-barra > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #B3945C, #806230); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.cg-per-avance-b { font-size: 12px; color: var(--cg-bronce-osc, #806230); font-weight: 700; white-space: nowrap; }
/* La credencial de miembro: la tarjeta verde con filo de bronce de la maqueta. */
.cg-credencial { flex: 0 0 auto; width: 470px; max-width: 100%; box-sizing: border-box; padding: 18px 22px; border-radius: 10px; color: #F3EBD9; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--cg-verde-2, #14473C) 0%, var(--cg-verde, #103C34) 45%, var(--cg-verde-borde, #0B332B) 100%); border: 1px solid rgba(179, 148, 92, .55);
  box-shadow: 0 18px 36px rgba(30, 20, 8, .32), inset 0 1px 0 rgba(255, 255, 255, .08); }
.cg-credencial::after { content: ''; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, rgba(179, 148, 92, .16) 0 1px, transparent 1px 7px); }
.cg-credencial > * { position: relative; z-index: 1; }
.cg-cred-cab { display: flex; align-items: center; gap: 10px; }
.cg-cred-desde { font-size: 12px; letter-spacing: 1.6px; font-weight: 700; color: var(--cg-bronce, #B3945C); }
.cg-cred-cuerpo { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.cg-brillo { position: relative; display: inline-block; }
.cg-brillo::before { content: ''; position: absolute; inset: -24%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 216, 134, .7) 0%, rgba(214, 170, 90, .3) 36%, rgba(214, 170, 90, 0) 70%); }
.cg-brillo > * { position: relative; }
.cg-cred-insignia { height: 86px; width: auto; display: block; opacity: 1; filter: drop-shadow(0 7px 12px rgba(60, 42, 18, .3)); }
.cg-cred-grado { font-family: var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); font-size: 30px; font-weight: 600; color: var(--cg-superficie, #FAF7F0); line-height: 1; }
.cg-cred-rango { font-size: 12px; letter-spacing: 1.6px; font-weight: 700; color: var(--cg-bronce, #B3945C); margin-top: 4px; }
.cg-cred-num { font-variant-numeric: tabular-nums lining-nums; font-size: 14px; font-weight: 800; letter-spacing: 1.2px; color: var(--cg-bronce-claro, #E8D5A8); margin-top: 10px; overflow-wrap: anywhere; }
.cg-cred-vig { font-size: 12px; color: var(--cg-texto-verde-2, #93B3A8); margin-top: 2px; }
.cg-cred-bot { display: flex; gap: 8px; margin-top: 14px; }
.cg-cred-bot .cg-btn { text-decoration: none; }
.cg-btn.cg-sobre-verde { color: var(--cg-bronce-claro, #E8D5A8); border-color: rgba(179, 148, 92, .5); }
.cg-sobre-verde svg, .cg-credencial .cg-pri svg { width: 15px; height: 15px; fill: none; stroke: currentColor; }
.cg-credencial .cg-pri svg { stroke: var(--cg-superficie-alta, #FFFDF8); }
@media (max-width: 820px) {
  .cg-credencial { width: 100%; padding: 16px; }
  .cg-per-avance { flex-wrap: wrap; max-width: none; }
  .cg-per-avance .cg-per-barra { flex: 1 1 100%; order: 3; }
  .cg-cred-bot { flex-direction: column; }
  .cg-per-inicial { width: 96px; height: 124px; font-size: 48px; }
}

/* ===================================================================== MI PERFIL · TU GRADO (encargo 066 · tarea 2)
   Patrón D de `maqueta/paginas/per_grado.html`: «Tu camino» a la izquierda, tarjeta verde de privilegios a la derecha y
   debajo la única tira verde de la página (la placa `cgp-` de coliseo_paginas.css). */
.cg-gr-fila { display: flex; gap: 22px; align-items: stretch; }
.cg-gr-camino-caja { flex: 1 1 0; min-width: 0; padding: 20px 26px 22px; }
.cg-gr-camino { position: relative; display: flex; align-items: flex-start; margin-top: 18px; }
.cg-gr-camino::before { content: ''; position: absolute; left: 8%; right: 8%; top: 40px; height: 1px; background: rgba(128, 98, 48, .3); }
.cg-gr-peldano { flex: 1 1 0; text-align: center; position: relative; }
.cg-gr-ins { height: 74px; width: auto; display: block; margin: 0 auto; filter: drop-shadow(0 7px 12px rgba(60, 42, 18, .3)); }
.cg-gr-ins.cg-gr-ins-aqui { height: 104px; }
.cg-gr-nom { margin-top: 10px; font: 500 14.5px/1.2 var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); color: var(--cg-texto-2, #5F645C); }
.cg-gr-rango { margin-top: 3px; font-size: 12px; letter-spacing: 1.8px; font-weight: 700; color: #666B64; }
.cg-gr-peldano.cg-aqui .cg-gr-nom { font-weight: 700; font-size: 17px; color: var(--cg-texto, #172B26); }
.cg-gr-peldano.cg-aqui .cg-gr-rango { color: var(--cg-bronce-osc, #806230); }
.cg-gr-peldano.cg-aqui .cg-gr-rango::after { content: ''; display: block; width: 28px; height: 2px; margin: 6px auto 0; background: var(--cg-bronce, #B3945C); }
.cg-gr-prox { margin-top: 22px; padding: 16px 18px; border-radius: 7px; background: var(--cg-superficie-alta, #FFFDF8); border: 1px solid rgba(128, 98, 48, .24); }
.cg-gr-prox-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cg-gr-prox-nom { font: italic 600 22px/1 var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); color: var(--cg-texto, #172B26); }
.cg-gr-prox-prom { margin-left: auto; font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-gr-prox-prom b { color: var(--cg-texto, #172B26); font-variant-numeric: tabular-nums lining-nums; }
.cg-gr-prox .cg-barra { margin-top: 10px; }
.cg-gr-dos { display: flex; margin-top: 14px; }
.cg-gr-dos > div { flex: 1 1 0; min-width: 0; padding-right: 18px; }
.cg-gr-dos > div + div { padding: 0 0 0 18px; border-left: 1px solid rgba(128, 98, 48, .18); }
.cg-gr-txt { display: block; font-size: 13px; line-height: 1.45; color: var(--cg-texto-2, #5F645C); }
.cg-gr-ult { margin: 12px 0 0; }
.cg-gr-verde { flex: 0 0 400px; padding: 22px 24px; display: flex; flex-direction: column; }
.cg-gr-priv { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(179, 148, 92, .18); }
.cg-gr-priv:last-of-type { border-bottom: 0; }
.cg-gr-priv b { font-size: 13.5px; color: var(--cg-superficie, #FAF7F0); display: block; }
.cg-gr-priv .cg-gr-priv-s { display: block; font-size: 12px; color: #93B3A8; }
.cg-gr-priv b.cg-gr-priv-v { margin-left: auto; font-size: 15px; color: var(--cg-bronce-claro, #E8D5A8); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.cg-gr-ico, .cg-gr-tira .cgp-ico-c { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(179, 148, 92, .14); box-shadow: inset 0 0 0 1px rgba(179, 148, 92, .3); }
.cg-gr-ico svg, .cg-gr-tira .cgp-ico-c svg { width: 20px; height: 20px; stroke: var(--cg-bronce, #B3945C); fill: none; }
/* La tira verde de la maqueta: la placa de PARTY con el fondo y los filos de «Tus números». */
.cgp-placa.cg-gr-tira { width: 100%; box-sizing: border-box; align-items: center; padding: 15px 4px; border-color: rgba(179, 148, 92, .4);
  background: linear-gradient(180deg, #14473C 0%, #103C34 55%, #0B332B 100%); background-size: auto; box-shadow: 0 12px 28px rgba(30, 20, 8, .26); }
.cg-gr-tira .cgp-celda { flex: 1 1 0; align-items: center; gap: 13px; padding: 0 20px; }
.cg-gr-tira .cgp-celda:last-child { flex: 1.3 1 0; }
.cg-gr-tira .cgp-div { background: rgba(179, 148, 92, .26); }
.cg-gr-tira .cgp-k { font-size: 12px; letter-spacing: 2px; color: var(--cg-bronce, #B3945C); margin-bottom: 5px; }
.cg-gr-tira .cgp-pie { font-size: 12px; color: #8CA49C; margin-top: 4px; }
.cg-gr-escudos { margin-top: 14px; padding: 12px 14px; border-radius: 7px; background: rgba(0, 0, 0, .2); border: 1px solid rgba(179, 148, 92, .25); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cg-gr-escudos > svg { flex: 0 0 auto; width: 22px; height: 22px; stroke: #8CD6AA; fill: none; }
.cg-gr-escudos > span { flex: 1 1 140px; font-size: 12px; line-height: 1.45; color: #A8C4BA; }
.cg-gr-escudos b { color: var(--cg-superficie, #FAF7F0); }
.cg-gr-planilla { margin-top: auto; padding-top: 12px; font-size: 12px; color: #7E9A92; }
.cg-gr-cab-num { margin: 24px 0 14px; }
.cg-gr-meses { display: flex; align-items: flex-end; gap: 14px; height: 46px; margin-top: 2px; }
.cg-gr-mes { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cg-gr-mes > i { display: block; width: 16px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #E2CC9A, #806230); }
.cg-gr-mes > span { font-size: 12px; letter-spacing: 1px; color: #8CA49C; }
.cg-gr-nombre { padding: 18px 22px; }
.cg-gr-nombre-fila { display: flex; gap: 10px; margin-bottom: 8px; }
.cg-gr-nombre-fila input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px; border-radius: 7px; border: 1px solid rgba(128, 98, 48, .34); background: var(--cg-superficie-alta, #FFFDF8); color: var(--cg-texto, #172B26); font: inherit; }
.cg-gr-ant { margin-top: 14px; font-size: 13px; }
.cg-gr-ant ul { list-style: none; margin: 8px 0 0; padding: 0; }
.cg-gr-ant li { display: flex; gap: 12px; padding: 6px 0; border-top: 1px solid rgba(128, 98, 48, .18); }
.cg-gr-ant li span { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--cg-texto-3, #666B64); }
.cg-gr-ant a { color: var(--cg-bronce-osc, #806230); font-weight: 700; text-decoration: none; }
@media (max-width: 820px) {
  .cg-gr-fila { flex-direction: column; }
  .cg-gr-verde { flex: 1 1 auto; }
  .cg-gr-camino-caja { padding: 18px 16px; }
  .cg-gr-camino { overflow-x: auto; }
  .cg-gr-peldano { flex: 0 0 96px; }
  .cg-gr-dos { flex-direction: column; gap: 12px; }
  .cg-gr-dos > div, .cg-gr-dos > div + div { padding: 0; border-left: 0; }
  .cg-gr-prox-prom { margin-left: 0; }
}

/* 066 · Tu credencial (per_cred): certificado con miniatura, vitrina e historia; mismas piezas que el perfil del miembro. */
.cg-cr-cab { margin: 0 0 14px; }
.cg-cr-cab + .cg-cr-cert, .cg-cr-cert + .cg-cr-cab { margin-top: 22px; }
.cg-cr-cert { display: flex; gap: 22px; align-items: center; }
.cg-cr-marco { flex: 0 0 auto; width: 230px; height: 160px; border-radius: 7px; padding: 10px; box-sizing: border-box; background: linear-gradient(150deg, #E2CC9A, #B3945C 46%, #806230); box-shadow: 0 12px 24px rgba(50, 38, 18, .25); }
.cg-cr-hoja { height: 100%; border-radius: 4px; background: #FFFDF8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .3); overflow: hidden; }
.cg-cr-hoja-t { font-size: 12px; letter-spacing: 1px; font-weight: 800; color: #806230; }
.cg-cr-hoja-ins { height: 42px; width: auto; filter: drop-shadow(0 7px 12px rgba(60, 42, 18, .3)); }
.cg-cr-hoja-n { max-width: 92%; font: italic 500 15px/1.1 var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); color: var(--cg-texto, #172B26); }
.cg-cr-hoja-s { font-size: 12px; letter-spacing: 0; color: var(--cg-texto-2, #5F645C); }
.cg-cr-datos { flex: 1 1 0; min-width: 0; }
.cg-cr-grado { font: italic 600 30px/1 var(--fuente-titulos, 'Cormorant Garamond', Georgia, serif); color: var(--cg-texto, #172B26); }
.cg-cr-num { margin-top: 6px; font-size: 12.5px; color: var(--cg-texto-2, #5F645C); font-variant-numeric: tabular-nums; }
.cg-cr-bot { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.cg-cr-bot .cg-btn { text-decoration: none; }
.cg-cr-bot svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cg-cr-ant { margin-top: 14px; font-size: 12px; color: var(--cg-texto-3, #666B64); line-height: 1.6; }
.cg-cr-ant b { color: var(--cg-texto, #172B26); }
.cg-cr-vitrina { display: flex; gap: 18px; flex-wrap: wrap; }
.cg-cr-vit { flex: 0 0 auto; width: 104px; text-align: center; }
.cg-cr-vit b { display: block; margin-top: 8px; font-size: 12px; letter-spacing: 1.4px; font-weight: 800; color: var(--cg-bronce-osc, #806230); text-transform: uppercase; line-height: 1.35; }
.cg-cr-vit b.cg-cr-off { color: #666B64; }
.cg-cr-vit small { display: block; margin-top: 3px; font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-cr-medal { width: 62px; height: 62px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #F2ECDF; box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .25); color: #B9B3A4; }
.cg-cr-medal.cg-oro { background: radial-gradient(circle at 38% 30%, #FFF3C4, #D9A93F 60%, #8A6215); box-shadow: 0 0 0 3px rgba(179, 148, 92, .25), 0 0 18px rgba(214, 170, 90, .5); color: #3A2A08; }
.cg-cr-medal svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cg-cr-medal img { height: 44px; width: auto; }
.cg-cr-lado { flex: 0 0 400px; padding: 20px 24px; box-sizing: border-box; }
.cg-cr-hito { padding: 0 0 14px 18px; position: relative; }
.cg-cr-hito::before { content: ''; position: absolute; left: 0; top: 4px; width: 8px; height: 8px; transform: rotate(45deg); background: var(--cg-bronce, #B3945C); }
.cg-cr-hito-f { font-size: 12px; letter-spacing: 2px; font-weight: 800; color: var(--cg-bronce-osc, #806230); }
.cg-cr-hito-t { font-size: 14px; font-weight: 700; margin-top: 4px; color: var(--cg-texto, #172B26); }
.cg-cr-hito-d { font-size: 12px; color: var(--cg-texto-2, #5F645C); margin-top: 2px; }
.cg-cr-pie { margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(128, 98, 48, .18); font-size: 12px; color: var(--cg-texto-2, #5F645C); line-height: 1.5; }
@media (max-width: 820px) {
  .cg-cr-cert { flex-direction: column; align-items: flex-start; }
  .cg-cr-marco { width: 100%; max-width: 260px; }
  .cg-cr-lado { flex: 1 1 auto; padding: 18px 16px; }
}

/* ===================================================================== PERFIL DEL MIEMBRO (encargo 066 · tarea 8)
   `maqueta/paginas/muro_miembro.html`: cabecera de página con retrato y la tarjeta verde «Su grado»; debajo, las mismas piezas de
   Tu grado y Tu credencial (cg-gr-*, cg-cr-*). Solo se añade lo que esas páginas no tienen. */
.cg-pm-acc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.cg-pm-acc .cg-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-pm-sede { font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-pm-grado { display: block; }
.cg-pm-falta .cg-gr-ins { opacity: .55; }
.cg-pm-falta .cg-gr-nom { color: var(--cg-texto-2, #5F645C); }
.cg-pm-fila2 { margin-top: 24px; }
.cg-pm-colofon { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 34px; text-align: center; }
.cg-pm-colofon img { height: 46px; width: auto; display: block; filter: drop-shadow(0 7px 12px rgba(60, 42, 18, .3)); }
.cg-pm-colofon p { margin: 0; font-size: 12px; letter-spacing: 2.4px; font-weight: 700; color: var(--cg-bronce-osc, #806230); }
@media (max-width: 820px) { .cg-pm-fila2 { margin-top: 18px; } }

/* ===================================================================== MI PERFIL · TUS DATOS (encargo 066 · tarea 4)
   `maqueta/paginas/per_datos.html`: los grupos plegables a la izquierda (cuenta y quién los ve en la propia fila) y, a la derecha,
   el avance en piedra con lo que más falta. Los grupos siguen siendo los `pf-grupo` de siempre: los ids y los guardados no cambian. */
.cg-dat-izq { flex: 1 1 0; min-width: 0; padding: 20px 26px 10px; }
.cg-dat-izq .pf-grupo > summary { padding: 13px 2px; }
.cg-dat-izq .pf-grupo-tit { flex: 0 0 auto; font-size: 20px; font-weight: 600; }
.pf-grupo-quien { flex: 1 1 auto; font-size: 12px; color: var(--cg-texto-3, #666B64); }
.cg-dat-der { flex: 0 0 360px; padding: 20px 24px; display: flex; flex-direction: column; }
.cg-dat-cab { display: flex; align-items: center; gap: 14px; }
.cg-dat-cab .cg-k { margin-bottom: 4px; }
.cg-dat-ico { background: #EDF1EC; box-shadow: inset 0 0 0 1px rgba(46, 107, 87, .25); }
.cg-dat-ico svg { stroke: #2E6B57; }
.cg-dat-barra { flex: none; height: 10px; margin-top: 12px; }
.cg-dat-cuenta { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-dat-cuenta b { color: var(--cg-bronce-osc, #806230); }
.cg-dat-falta { margin: 16px 0 12px; padding: 12px 14px; border-radius: 7px; background: var(--cg-superficie-alta, #FFFDF8); border: 1px solid rgba(128, 98, 48, .22); font-size: 12.5px; line-height: 1.5; color: var(--cg-texto-2, #5F645C); }
.cg-dat-falta b { color: var(--cg-texto, #172B26); }
.cg-dat-pie { margin-top: auto; padding-top: 14px; font-size: 12px; color: var(--cg-texto-3, #666B64); }
@media (max-width: 820px) {
  .cg-dat-izq { padding: 18px 16px 8px; }
  .cg-dat-der { flex: 1 1 auto; }
  .cg-dat-izq .pf-grupo > summary { flex-wrap: wrap; }
  .pf-grupo-quien { flex-basis: 100%; order: 3; }
}

/* ===================================================================== MI PERFIL · AYUDA (encargo 066 · tarea 5)
   `maqueta/paginas/per_ayuda.html`: preguntas y corrección a la izquierda (mismos `pf-grupo` y mismos ids de siempre) y, a la
   derecha en piedra, a quién escribir con la foto real de cada persona. */
.cg-dat-izq .ay-resp { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--cg-texto-2, #5F645C); }
.cg-ay-corr-cab { margin: 18px 0 8px; }
.cg-ay-sec2 { font-size: 22px; }
.cg-ay-der { flex: 0 0 380px; padding: 20px 24px; }
.cg-ay-fila { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.cg-ay-fila img { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 7px; object-fit: cover; box-shadow: 0 0 0 1px rgba(128, 98, 48, .25); }
.cg-ay-quien { flex: 1 1 auto; min-width: 0; }
.cg-ay-quien b { display: block; font-size: 14px; }
.cg-ay-quien span { font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-ay-otros { margin-top: 16px; font-size: 12px; color: var(--cg-texto-2, #5F645C); }
.cg-ay-otros ul { margin: 6px 0 0; padding-left: 18px; }
.cg-ay-nota { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--cg-texto-3, #666B64); }
@media (max-width: 820px) { .cg-ay-der { flex: 1 1 auto; } }

/* ==========================================================================
   068 · TAREA 2 — Mi ruta · Hoy con la forma de la maqueta (ruta_hoy.html).
   La campaña que manda es una tarjeta sobre piedra con su pista; las otras dos medidas, cajitas de escalón.
   ========================================================================== */
.cg-piedra-fondo { background-color: var(--cg-superficie); background-image: linear-gradient(rgba(255, 253, 248, .9), rgba(246, 241, 230, .94)), url('/assets/coliseo/textura_sillar.png'); background-size: auto, 320px; }
.cg-bronce { color: var(--cg-bronce-osc); }
.cg-ruta-otras { margin-top: 26px; }
.cg-ruta-card { padding: 22px 28px 18px; }
.cg-ruta-cab { display: flex; align-items: flex-start; gap: 18px; }
.cg-ruta-k { margin: 0 0 6px; letter-spacing: 2.2px; }
.cg-ruta-card > .cg-ruta-cab .cg-ruta-k { color: var(--cg-bronce); }
.cg-ruta-nombre { font-size: 30px; }
.cg-ruta-llevas { margin-left: auto; text-align: right; flex: none; }
.cg-ruta-llevas .cg-k { color: var(--cg-texto-2); margin-bottom: 4px; }
.cg-ruta-conf { display: block; margin-top: 5px; font-size: 12px; font-weight: 700; color: var(--cg-bronce-osc); }

/* la pista de escalones */
.cg-pista { position: relative; margin: 38px 6px 4px; }
.cg-riel, .cg-lleno, .cg-prov { position: absolute; left: 0; top: 21px; height: 6px; border-radius: 999px; }
.cg-riel { right: 0; background: color-mix(in srgb, var(--cg-bronce-osc) 14%, var(--cg-superficie)); box-shadow: inset 0 1.5px 3px rgba(80, 62, 34, .28), inset 0 -1px 0 rgba(255, 255, 255, .7); }
.cg-lleno { background: linear-gradient(90deg, var(--verde-f), var(--verde)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.cg-prov { background: repeating-linear-gradient(90deg, var(--cg-bronce) 0 8px, color-mix(in srgb, var(--cg-bronce) 35%, transparent) 8px 13px); }
.cg-nodos { position: relative; display: grid; }
.cg-nodo-c { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.cg-nodo { position: relative; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--cg-superficie-alta); color: var(--cg-bronce-osc); box-shadow: inset 0 0 0 2px var(--cg-linea-fuerte), 0 2px 6px rgba(60, 42, 18, .12); }
.cg-nodo.hecho { background: linear-gradient(180deg, var(--verde-f), var(--verde)); color: var(--cg-superficie-alta); box-shadow: 0 0 0 4px var(--verde-a), 0 3px 8px rgba(31, 99, 73, .35); }
.cg-nodo.prov { font-weight: 800; font-size: 22px; line-height: 1; letter-spacing: 1px; }
.cg-nodo.sig { box-shadow: inset 0 0 0 2.5px var(--cg-bronce), 0 0 0 6px rgba(179, 148, 92, .18), 0 0 18px rgba(214, 170, 90, .45); }
.cg-nodo.bloq b { font-family: var(--fuente-titulos); font-size: 21px; font-weight: 700; color: var(--cg-texto-3); font-variant-numeric: lining-nums; }
.cg-obj { margin-top: 12px; font-size: 17px; font-weight: 800; color: var(--cg-texto); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.cg-uni { margin-top: 1px; font-size: 12px; color: var(--cg-texto-3); }
.cg-prem { margin-top: 7px; font-size: 12px; font-weight: 800; color: var(--cg-bronce-osc); white-space: nowrap; }
.cg-nodo-c.bloq .cg-obj { color: var(--cg-texto-2); }
.cg-nota { margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--cg-bronce-osc); letter-spacing: .4px; }
.cg-marcador { position: absolute; top: -30px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 2; }
.cg-marcador span { padding: 4px 9px; border-radius: 6px; background: var(--cg-verde); color: var(--cg-bronce-claro); font-size: 12px; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 10px rgba(16, 60, 52, .3); }
.cg-marcador i { width: 2px; height: 20px; background: var(--cg-verde); }
.cg-marcador i::after { content: ''; display: block; width: 10px; height: 10px; margin: 18px 0 0 -4px; border-radius: 50%; background: var(--cg-bronce); box-shadow: 0 0 0 3px var(--cg-superficie-alta), 0 0 0 4px var(--cg-bronce); }
/* el tooltip de cada escalón (T28.2) se conserva: qué cuenta y cuándo se paga */
.cg-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: var(--cg-superficie-alta); border: 1px solid var(--cg-bronce); border-radius: var(--r); padding: 12px 14px; text-align: left; box-shadow: 0 12px 26px rgba(23, 43, 38, .22); z-index: 9; }
.cg-tip b { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 800; color: var(--cg-texto); }
.cg-tip span { display: block; font-size: 12px; line-height: 1.5; color: var(--cg-texto-2); }
.cg-nodo-c:hover .cg-tip, .cg-nodo-c:focus-within .cg-tip { opacity: 1; visibility: visible; transform: translate(-50%, -8px); }
.cg-nodo-c:focus-visible, .cg-chip-e:focus-visible { outline: 2px solid var(--cg-foco); outline-offset: 4px; border-radius: var(--r-s); }
.cg-ruta-pie { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(128, 98, 48, .18); font-size: 12px; color: var(--cg-texto-2); }
.cg-ruta-pie b { color: var(--cg-texto); }
.cg-ruta-pie b.cg-bronce { color: var(--cg-bronce-osc); }
.cg-ruta-pie svg { flex: none; color: var(--cg-bronce-osc); }
.cg-ruta-bono { display: inline-flex; align-items: center; gap: 8px; }
.cg-ruta-cuenta { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.cg-ruta-cuenta svg { color: var(--cg-texto-3); }

/* tipos especiales dentro de la misma tarjeta */
.cg-ruta-esp { margin-top: 18px; }
.cg-ruta-esp-fila { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.cg-ruta-esp .cg-barra { height: 8px; }
.cg-anillo-pista { stroke: var(--cg-papel-3); }
.cg-anillo-lleno { stroke: var(--verde-f); filter: drop-shadow(0 0 8px rgba(179, 148, 92, .6)); }
.cg-anillo-lleno.listo { stroke: var(--cg-bronce); }
.cg-anillo-cifra { fill: var(--cg-texto); font-family: var(--fuente-titulos); font-weight: 600; }
.cg-anillo-meta { fill: var(--cg-texto-2); font-family: var(--fuente); }
.cg-ruta-estado { font-size: 28px; }
.cg-ruta-ranking { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cg-ruta-pos { display: inline-flex; align-items: flex-end; gap: 3px; }
.cg-ruta-pos-o { font-family: var(--fuente-titulos); font-size: 24px; color: var(--cg-bronce-osc); padding-bottom: 4px; }
.cg-dia-caja { width: 38px; height: 38px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-weight: 800; border: 1px solid rgba(128, 98, 48, .3); color: var(--cg-texto-3); background: var(--cg-superficie-alta); }
.cg-dia-caja.si { background: var(--verde-a); border-color: rgba(46, 122, 98, .35); color: var(--cg-ok); }
.cg-dia-caja.prov { border: 1px dashed var(--cg-bronce); color: var(--cg-bronce-osc); }

/* las otras dos medidas */
.cg-ruta-sec { padding: 18px 20px 16px; min-width: 0; }
.cg-ruta-sec-cab { display: flex; align-items: center; gap: 12px; }
.cg-ruta-sec-cab .cg-ico-c { margin-top: 0; }
.cg-ruta-sec-cab .cg-ruta-k { margin-bottom: 3px; color: var(--cg-texto-2); white-space: normal; }
.cg-ruta-sec-nombre { display: block; font-family: var(--fuente-titulos); font-size: 21px; font-weight: 600; color: var(--cg-texto); }
.cg-ruta-sec-cifra { margin-left: auto; text-align: right; flex: none; }
.cg-ruta-sec-cifra .cg-ruta-conf { font-size: 12px; }
.cg-chips { display: flex; gap: 8px; margin-top: 12px; }
.cg-chip-e { flex: 1 1 0; min-width: 0; padding: 9px 10px; border-radius: 7px; border: 1px solid rgba(128, 98, 48, .24); background: var(--cg-superficie-alta); text-align: center; }
.cg-chip-e b { display: block; font-size: 14px; font-weight: 800; color: var(--cg-texto); font-variant-numeric: tabular-nums lining-nums; }
.cg-chip-e span { display: block; margin-top: 3px; font-size: 12px; font-weight: 800; color: var(--cg-bronce-osc); }
.cg-chip-e em { display: block; margin-top: 3px; font-size: 12px; font-style: normal; font-weight: 700; color: var(--cg-texto-2); }
.cg-chip-e.si { background: var(--verde-a); border-color: rgba(46, 122, 98, .35); }
.cg-chip-e.si b, .cg-chip-e.si em { color: var(--cg-ok); }
.cg-chip-e.sig { border-color: var(--cg-bronce); box-shadow: 0 0 0 3px rgba(179, 148, 92, .15); }
.cg-ruta-ayuda { margin-top: 10px; font-size: 12px; color: var(--cg-texto-3); }
.ruta-secundarias .cg-ruta-sec + .cg-ruta-sec { margin-top: 0; }

@media (max-width: 820px) {
  .cg-ruta-card { padding: 18px 16px 14px; }
  .cg-ruta-cab { gap: 12px; }
  .cg-ruta-nombre { font-size: 25px; }
  .cg-pista { margin: 34px 0 4px; }
  .cg-nodo { width: 38px; height: 38px; }
  .cg-riel, .cg-lleno, .cg-prov { top: 16px; }
  .cg-obj { font-size: 14px; }
  .cg-prem { font-size: 12px; }
  .cg-marcador span { font-size: 12px; }
  .cg-tip { width: 200px; }
  .cg-ruta-cuenta { margin-left: 0; flex-basis: 100%; }
  .cg-chips { flex-wrap: wrap; }
  .cg-ruta-sec { padding: 16px 14px; }
}

/* ==========================================================================
   068 · TAREA 2 (b) — Mi ruta · Hoy: Meta personal (C), Tu día (B) y Racha (D) con la forma de ruta_hoy.html.
   Vienen de Mi panel (055B); los ids son los de siempre y los pinta casino.js.
   ========================================================================== */
.cg-ruta-fila { display: flex; gap: 22px; align-items: stretch; }
.cg-ruta-main { flex: 1 1 0; min-width: 0; }
.cg-ruta-main > .cg-ruta-card:only-child { height: 100%; }
/* con varias campañas del medidor real apiladas, Meta personal no se estira hasta el fondo: queda arriba con su tamaño */
.cg-ruta-fila:has(> .cg-ruta-main > .cg-ruta-card + .cg-ruta-card) > .cg-ruta-lado { align-self: flex-start; }
.cg-ruta-lado { flex: 0 0 352px; min-width: 0; padding: 20px 24px; display: flex; flex-direction: column; }
.cg-ruta-fila:has(> .cg-solo-dia:not(.oculto)) .ruta-secundarias { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 0; }
#mapaSecundarias .ruta-secundarias { margin-top: 0; }
.cg-cab-dia { margin-top: 26px; }
.cg-cab-dia .cg-tag { height: 26px; font-size: 12px; }

/* C · Meta personal */
.cg-meta-cab { display: flex; align-items: center; gap: 14px; }
.cg-meta-cab .cg-ico-c { margin-top: 0; color: var(--cg-verde-vivo); }
.cg-meta-tit { min-width: 0; }
.cg-meta-tit .cg-k { color: var(--cg-texto-2); white-space: normal; letter-spacing: 1.6px; font-size: 12px; }
.cg-meta-falta { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.cg-meta-cifra { font-family: var(--fuente-titulos); font-size: 30px; font-weight: 600; line-height: 1; color: var(--cg-texto); font-variant-numeric: lining-nums; }
.cg-meta-pie { padding-bottom: 4px; font-size: 12px; color: var(--cg-texto-2); }
.cg-meta-pie b { color: var(--cg-texto); }
.cg-meta-barra { margin: 16px 0 13px; }
.cg-meta-lt { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 12px; color: var(--cg-texto-2); }
.cg-meta-lt strong { color: var(--cg-texto); }
.cg-meta-lt span:last-child strong { color: var(--cg-bronce-osc); }
.cg-meta-esc { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(128, 98, 48, .22); }
.cg-meta-esc .cg-k { margin-bottom: 12px; color: var(--cg-texto-2); }
/* la barra de piedra de «Meta del mes» de la portada: 24 px, verde con filo bronce y marcas cada 25 % */
.cg-barra-p { position: relative; height: 24px; border-radius: 5px; background: var(--cg-papel-3); box-shadow: inset 0 2px 5px rgba(80, 62, 34, .3), inset 0 -1px 0 rgba(255, 255, 255, .7); }
.cg-barra-p > b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px 2px 2px 5px; background: linear-gradient(180deg, var(--verde-f), var(--cg-verde)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
.cg-barra-p > b::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--cg-bronce-brillo), var(--cg-bronce)); }
.cg-barra-p > i { position: absolute; inset: 0; border-radius: 5px; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(128, 98, 48, .22) calc(25% - 1px), rgba(128, 98, 48, .22) 25%); }
.cg-barra-p > span { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 12.5px; font-weight: 800; color: var(--cg-texto); font-variant-numeric: tabular-nums lining-nums; }
.cg-puntos { display: flex; align-items: center; }
.cg-puntos .p { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cg-puntos .p i { width: 15px; height: 15px; border-radius: 50%; background: var(--cg-superficie-alta); border: 2px solid var(--cg-linea-fuerte); }
.cg-puntos .p.si i { width: 17px; height: 17px; border: 0; background: var(--verde-f); box-shadow: 0 0 0 4px var(--verde-a); }
.cg-puntos .p.sig i { border-color: var(--cg-bronce); box-shadow: 0 0 0 4px rgba(179, 148, 92, .2); }
.cg-puntos .p span { font-size: 12px; letter-spacing: .3px; font-weight: 700; color: var(--cg-texto-3); white-space: nowrap; }
.cg-puntos .p.si span { color: var(--cg-verde-vivo); font-weight: 800; }
.cg-puntos .p.sig span { color: var(--cg-bronce-osc); }
.cg-puntos .t { flex: 1 1 auto; min-width: 6px; height: 3px; margin: 0 2px 18px; background: var(--cg-linea); }
.cg-puntos .t.si { background: var(--verde-f); }
.cg-nota-v { margin-top: 13px; padding: 11px 13px; border-radius: 8px; background: var(--verde-a); border: 1px solid rgba(46, 122, 98, .22); font-size: 12.5px; line-height: 1.5; color: var(--cg-texto); }

/* B · Tu día: cuatro celdas con la cifra en piedra y su barra */
.cg-dia { padding: 18px 4px 14px; }
.cg-dia-banda { display: flex; align-items: stretch; }
.cg-dia-celda { flex: 1 1 0; min-width: 0; padding: 0 22px; display: flex; flex-direction: column; }
.cg-dia-div { width: 1px; align-self: stretch; background: rgba(128, 98, 48, .18); }
.cg-dia-cab { display: flex; align-items: center; gap: 12px; }
.cg-dia-cab .cg-ico-c { margin-top: 0; color: var(--cg-verde-vivo); }
.cg-dia-cab .cg-k { margin: 0; color: var(--cg-texto-2); white-space: normal; font-size: 12px; letter-spacing: 1.8px; }
.cg-dia-ok { margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--verde-f); color: var(--cg-superficie-alta); }
.cg-dia-val { display: flex; align-items: flex-end; gap: 8px; margin-top: 4px; }
.cg-dia-de { padding-bottom: 4px; font-size: 12px; color: var(--cg-texto-2); white-space: nowrap; }
.cg-dia-de b { color: var(--cg-texto); }
.cg-dia-barra { flex: none; width: auto; height: 8px; margin-top: 10px; }
.cg-dia-celda.ok .cg-dia-barra > span { background: linear-gradient(90deg, var(--cg-verde-dato), var(--verde-f)); }
.cg-grupo-dia { display: flex; margin: 14px 22px 0; padding-top: 12px; border-top: 1px solid rgba(128, 98, 48, .16); }
.cg-grupo-dia > div { flex: 1 1 0; display: flex; align-items: center; gap: 8px; padding: 0 6px; font-size: 12px; color: var(--cg-texto-2); }
.cg-grupo-dia > div svg { flex: none; color: var(--cg-bronce-osc); }
.cg-grupo-dia > div.ok svg { color: var(--verde-f); }
.cg-grupo-dia b { color: var(--cg-texto); }
.cg-dia-pie { margin: 10px 22px 0; font-size: 12px; color: var(--cg-texto-3); }
.cg-dia-pie b { color: var(--cg-texto); }

/* D · Racha, tu constancia (tarjeta verde) */
.cg-ruta-racha { flex-basis: 400px; }
.cg-racha-cab { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.cg-racha-cab .cg-k { margin: 0; }
.cg-racha-cab > span:last-child { margin-left: auto; }
.cg-combo { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: linear-gradient(180deg, var(--cg-bronce-brillo), var(--cg-bronce)); color: var(--cg-verde-borde); font-size: 12px; font-weight: 800; white-space: nowrap; }
.cg-racha-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "llama etq paga" "llama dias paga" "estado estado estado"; column-gap: 16px; row-gap: 4px; align-items: center; margin-top: 16px; }
#cajaRacha #rachaTexto { display: contents; }
.cg-llama { grid-area: llama; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--cg-bronce-brillo);
  background: radial-gradient(circle at 40% 30%, rgba(226, 204, 154, .35), rgba(179, 148, 92, .12) 60%, rgba(179, 148, 92, .05)); box-shadow: inset 0 0 0 1px rgba(179, 148, 92, .45), 0 0 22px rgba(214, 170, 90, .25); }
.cg-llama.apagada { color: var(--cg-texto-verde-3); background: rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px rgba(179, 148, 92, .22); }
#cajaRacha .racha-etq { grid-area: etq; align-self: end; margin: 0; }
#cajaRacha .cg-racha-n { grid-area: dias; align-self: start; font-size: 46px; font-weight: 800; line-height: 1; color: var(--cg-bronce-claro); }
.cg-racha-paga { grid-area: paga; text-align: right; }
.cg-racha-paga .cg-k { margin-bottom: 6px; }
#cajaRacha .racha-mult { display: block; font-family: var(--fuente); font-size: 34px; font-weight: 800; letter-spacing: -.6px; line-height: 1; color: var(--cg-verde-dato); font-variant-numeric: tabular-nums lining-nums; }
.cg-racha-estado { grid-area: estado; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cg-racha-minimo { font-size: 12px; color: var(--cg-texto-verde); }
.cg-racha-minimo b { color: var(--cg-bronce-claro); }
.cg-racha-hacia { margin-top: 16px; }
.cg-racha-hacia-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cg-racha-hacia-cab .cg-k { margin: 0; }
#cajaRacha #rachaSiguiente { font-size: 12px; color: var(--cg-texto-verde); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-dias-r { display: flex; gap: 6px; margin-top: 9px; }
.cg-dias-r i { flex: 1 1 0; min-width: 0; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; font-style: normal; color: var(--cg-texto-verde-3); background: rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px rgba(179, 148, 92, .22); }
.cg-dias-r i.si { background: linear-gradient(180deg, var(--cg-bronce-brillo), var(--cg-bronce)); color: var(--cg-verde-borde); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.cg-dias-r i.hoy-r { box-shadow: inset 0 0 0 1.5px var(--cg-bronce); color: var(--cg-bronce-claro); }
.cg-racha-pie { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(179, 148, 92, .22); }
.cg-racha-escudo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cg-sel-v { height: 36px; width: auto; min-width: 110px; padding: 0 12px; border-radius: 7px; border: 1px solid rgba(179, 148, 92, .4); background: rgba(0, 0, 0, .2); color: var(--cg-bronce-claro); font: 600 12px var(--fuente); }
.cg-sel-v option { color: var(--cg-texto); background: var(--cg-superficie-alta); }
.cg-ruta-racha .cg-btn-lin { height: 36px; flex: 1; padding: 0 12px; gap: 8px; cursor: pointer; }
.cg-ruta-racha .cg-btn-lin:disabled { opacity: .55; cursor: default; }
.cg-racha-regla { margin-top: 9px; font-size: 12px; color: var(--cg-texto-verde-3); }

/* el tooltip de un escalón junto al borde derecho no ensancha la página en el móvil */
#rutaPeriodo { overflow-x: clip; }
@media (max-width: 820px) {
  .cg-ruta-fila { flex-direction: column; gap: 16px; }
  .cg-ruta-lado, .cg-ruta-racha { flex: 1 1 auto; width: 100%; }
  .cg-dia-banda { flex-wrap: wrap; padding: 4px 0; }
  .cg-dia-celda { flex: 1 1 100%; padding: 12px 14px; }
  .cg-dia-div { display: none; }
  .cg-grupo-dia { flex-direction: column; gap: 6px; }
}

/* ==========================================================================
   068 · TAREA 4 — Mi ruta · El mes (ruta_mes.html): Tu nivel del mes, «Vendido este mes» y las dos escaleras T60.7.
   Los ids son los de siempre (#cajaNivel, nivel*, #escalerasBloque); los pinta casino.js. Textos a 12 px (UX-17).
   ========================================================================== */
.cg-nivel { padding: 22px 26px 14px; }
.cg-nivel-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cg-nivel-cab .cg-k { margin: 0; color: var(--cg-texto-2); white-space: normal; }
.cg-niveles { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 6px 0 4px; }
.cg-niveles::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 27px; height: 4px; border-radius: 999px; background: var(--cg-linea); }
.cg-nv-lleno { position: absolute; left: 12.5%; top: 27px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--verde-f), var(--cg-ok)); }
.cg-nv { position: relative; text-align: center; }
.cg-nv .d { width: 58px; height: 58px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--fuente-titulos); font-size: 21px; font-weight: 700;
  background: var(--cg-superficie-alta); color: var(--cg-texto-3); box-shadow: inset 0 0 0 2px var(--cg-linea-fuerte), 0 2px 6px rgba(60, 42, 18, .1); }
.cg-nv.si .d { background: linear-gradient(180deg, var(--verde-f), var(--cg-ok)); color: var(--cg-superficie-alta); box-shadow: 0 0 0 5px var(--verde-a); }
.cg-nv.plata .d:not(:has(svg)) { background: radial-gradient(circle at 36% 30%, var(--cg-superficie-alta), var(--cg-papel-3) 58%, var(--cg-texto-3)); color: var(--cg-texto); }
.cg-nv.oro .d:not(:has(svg)) { background: radial-gradient(circle at 36% 30%, var(--cg-bronce-brillo), var(--cg-bronce) 58%, var(--cg-bronce-osc)); color: var(--cg-texto); }
.cg-nv.meta .d:not(:has(svg)) { background: linear-gradient(180deg, var(--cg-verde), var(--cg-verde-borde)); color: var(--cg-bronce-claro); box-shadow: inset 0 0 0 2px var(--cg-bronce), 0 2px 8px rgba(11, 51, 43, .35); }
.cg-nv.lejos .d { opacity: .75; }
.cg-nv b { display: block; margin-top: 10px; font-family: var(--fuente-titulos); font-size: 21px; font-weight: 600; color: var(--cg-texto); }
.cg-nv small { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--cg-bronce-osc); font-variant-numeric: tabular-nums lining-nums; }
#nivelFrase { margin: 18px 0 14px; }
.cg-peld { display: grid; grid-template-columns: 28px minmax(0, 1fr) 110px 150px 120px; align-items: center; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--cg-linea); font-size: 13px; }
.cg-peld.cab-p { padding-top: 0; font-size: 12px; letter-spacing: 1.6px; font-weight: 700; text-transform: uppercase; color: var(--cg-texto-2); }
.cg-peld.cab-p span:nth-child(n+3) { text-align: right; }
.cg-peld .nom { color: var(--cg-texto); font-weight: 600; line-height: 1.35; }
.cg-peld .n { text-align: right; white-space: nowrap; font-weight: 700; color: var(--cg-texto); font-variant-numeric: tabular-nums lining-nums; }
.cg-peld .n.col-conv { font-weight: 600; color: var(--cg-texto-2); }
.cg-peld .f { text-align: right; white-space: nowrap; font-size: 12px; color: var(--cg-texto-3); }
.cg-peld.abierto .f { color: var(--cg-ok); font-weight: 700; }
.cg-peld-cand { display: inline-flex; color: var(--cg-texto-3); }
.cg-ok { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--verde-f); color: var(--cg-superficie-alta); }
.cg-sep-n { display: flex; align-items: center; gap: 10px; width: 100%; margin: 8px 0 2px; padding: 0; border: 0; background: none; font: 800 12px var(--fuente); letter-spacing: 1.8px; text-transform: uppercase; color: var(--cg-bronce-osc); text-align: left; }
.cg-sep-n::after { content: ''; flex: 1; height: 1px; background: var(--cg-linea); order: 1; }
.cg-sep-n .cuenta { order: 2; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .2px; font-weight: 700; text-transform: none; }
.cg-sep-n.plegado { padding: 10px 0 4px; cursor: pointer; }
.cg-sep-n.plegado .cuenta svg { transition: transform .15s; }
.cg-sep-n.plegado.abierto .cuenta svg { transform: rotate(180deg); }
.cg-nivel-pie { margin: 12px 2px 4px; font-size: 12px; color: var(--cg-texto-3); }

.cg-ruta-colder { flex: 0 0 400px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.cg-mes-vendido { padding: 22px 24px; }
.cg-mes-vendido .cg-k { margin-bottom: 8px; }
.cg-mes-barra { height: 10px; margin-top: 14px; border-radius: 999px; background: rgba(0, 0, 0, .25); overflow: hidden; }
.cg-mes-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cg-verde-dato), var(--verde-f)); }
.cg-mes-sig { display: flex; justify-content: space-between; margin-top: 7px; font-size: 12px; color: var(--cg-texto-verde-2); }
.cg-mes-sig b { color: var(--cg-bronce-claro); }
.cg-mes-internas { display: flex; gap: 8px; margin-top: 16px; }
.cg-mes-internas .cg-interna { flex: 1; min-width: 0; }
.cg-mes-internas .cg-interna b { font-size: 18px; }
.cg-mes-pie { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--cg-texto-verde); }

.cg-escalera { padding: 18px 22px 8px; }
.cg-escalera .cg-k { margin: 0 0 4px; white-space: normal; }
.cg-escalera-cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.cg-escalera-cab b { font-family: var(--fuente-titulos); font-size: 22px; font-weight: 600; color: var(--cg-texto); }
.cg-escalera-cab span { margin-left: auto; font-size: 12px; color: var(--cg-texto-2); }
.cg-escalera-barra { height: 8px; border-radius: 999px; background: rgba(128, 98, 48, .15); box-shadow: inset 0 1px 2px rgba(80, 62, 34, .18); overflow: hidden; }
.cg-escalera-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cg-bronce), var(--cg-bronce-osc)); }
.cg-fila-e { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cg-linea); }
.cg-fila-e:last-child { border-bottom: 0; }
.cg-circulo-e { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--cg-linea-fuerte); box-sizing: border-box; }
.cg-fila-e-txt { min-width: 0; }
.cg-fila-e-txt b { display: block; font-size: 13.5px; color: var(--cg-texto); }
.cg-fila-e-txt small { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--cg-bronce-osc); }
.cg-fila-e-d { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--cg-texto-3); white-space: nowrap; }
.cg-fila-e-d .ya { color: var(--cg-ok); font-weight: 700; }
.cg-escalera-pie { margin: 4px 0 10px; font-size: 12px; color: var(--cg-texto-2); }

@media (max-width: 820px) {
  .cg-ruta-colder { flex: 1 1 auto; width: 100%; }
  .cg-nivel { padding: 18px 14px 10px; }
  .cg-nv b { font-size: 16px; }
  .cg-nv .d { width: 46px; height: 46px; font-size: 17px; }
  .cg-niveles::before, .cg-nv-lleno { top: 21px; }
  .cg-peld { grid-template-columns: 22px minmax(0, 1fr) 84px; gap: 8px; }
  .cg-peld .col-conv, .cg-peld.cab-p { display: none; }
  .cg-peld .f { grid-column: 2 / -1; text-align: left; }
}

/* ---------- 068 · TAREA 5 (a): Retos con la forma de ruta_retos (franja, formulario y tarjeta verde de la cuota) ---------- */
.cg-est { display: inline-flex; align-items: center; flex: 0 0 auto; height: 24px; padding: 0 9px; border-radius: 5px; font-size: 12px; font-weight: 800; letter-spacing: 1px; white-space: nowrap; }
.cg-est.gana { background: var(--verde-f); color: var(--cg-superficie-alta); }
.cg-est.pierde { background: rgba(180, 71, 47, .1); color: var(--cg-caida); box-shadow: inset 0 0 0 1px rgba(180, 71, 47, .35); }
.cg-est.neutro { background: var(--cg-papel-3); color: var(--cg-texto-2); box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .2); }
.cg-reto-franja { display: flex; align-items: center; gap: 14px; padding: 14px 20px; margin-bottom: 18px; }
.cg-reto-franja-txt { min-width: 0; }
.cg-reto-franja-txt b { display: block; font-size: 14px; color: var(--cg-texto); }
.cg-reto-franja-txt span { display: block; margin-top: 2px; font-size: 12px; color: var(--cg-texto-2); }
.cg-retos-fila2 { display: flex; gap: 22px; align-items: stretch; }
.cg-retos-form { flex: 1 1 0; min-width: 0; padding: 22px 28px 22px; }
.cg-retos-form.ganando { box-shadow: inset 0 0 0 1px rgba(46, 122, 98, .5), var(--cg-sombra); }
.cg-retos-cab { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.cg-retos-cab > :first-child { min-width: 0; }
.cg-retos-cab > :last-child { margin-left: auto; }
.cg-retos-cab .cg-sec { font-size: 30px; }
.cg-retos-cab .cg-k { margin-bottom: 6px; white-space: normal; }
.cg-retos-cab .cg-tag { height: 26px; }
.cg-retos-form .reto-ejes { gap: 18px 26px; margin-bottom: 18px; }
.cg-retos-form .reto-campos { gap: 18px 26px; }
.cg-retos-form .campo > label { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .2px; color: var(--cg-texto-2); text-transform: none; }
.cg-retos-form .campo input[type="number"], .cg-retos-form .campo input[type="text"], .cg-retos-form .campo select { width: 100%; min-height: 44px; padding: 0 12px; box-sizing: border-box;
  font: 700 14px var(--fuente); color: var(--cg-texto); background: var(--cg-superficie-alta); border: 1px solid rgba(128, 98, 48, .3); border-radius: 7px; }
.cg-retos-form .campo input::placeholder { font-weight: 500; color: var(--cg-texto-3); }
.cg-retos-form .reto-opciones { gap: 8px; }
.cg-retos-form .reto-atajos { margin-top: 8px; }
.cg-retos-form .reto-stepper { flex-wrap: nowrap; gap: 8px; }
.cg-retos-form .reto-stepper > .boton { flex: 0 0 auto; min-width: 36px; min-height: 36px; padding: 0; }
.cg-retos-form .reto-meta { flex: 1 1 auto; justify-content: center; align-items: center; min-height: 44px; gap: 6px; padding: 0 12px; border: 1px solid rgba(128, 98, 48, .3); border-radius: 7px; background: var(--cg-superficie-alta); }
.cg-retos-form .reto-meta-cifra, .cg-retos-form .reto-meta-txt { font: 700 14px var(--fuente); letter-spacing: 0; text-transform: none; color: var(--cg-texto); text-shadow: none; }
.cg-retos-form .reto-cierre { min-height: 44px; display: flex; align-items: center; }
.cg-retos-form .mini.tenue { color: var(--cg-texto-2); }
.cg-retos-cuenta { text-align: right; }
.cg-retos-form .reto-marcador .num { color: var(--cg-texto); }
.cg-retos-lado { flex: 0 0 380px; padding: 22px 24px; display: flex; flex-direction: column; }
.cg-retos-lado .reto-cuota { padding: 0; border: 0; border-radius: 0; background: none; text-align: left; }
.cg-retos-lado .reto-cuota .cg-btn-pri { margin-top: 18px; }
.cg-retos-premio { margin-top: 4px; min-height: 52px; display: flex; align-items: flex-end; overflow-wrap: anywhere; }
.cg-retos-premio.apagada { font: 600 44px/1 var(--fuente-titulos); color: var(--cg-texto-verde-3); }
.cg-retos-lado .reto-premio { color: var(--cg-bronce-claro); font-size: 30px; }
.cg-retos-internas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.cg-retos-internas .cg-interna { min-width: 0; }
.cg-retos-internas .cg-interna .cg-k { white-space: normal; letter-spacing: .8px; line-height: 1.25; }
.cg-retos-internas .cg-interna b { font-size: 20px; }
.cg-retos-lin { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--cg-texto-verde-2); }
.cg-retos-lado .reto-motivo { background: rgba(0, 0, 0, .2); border-color: rgba(179, 148, 92, .35); color: var(--cg-bronce-claro); }
.cg-retos-lado .reto-motivo .boton { margin-top: 8px; }
.cg-retos-lado .reto-cuenta { margin-top: 14px; text-align: left; }
.cg-retos-lado .reto-cuenta .k { color: var(--cg-verde-dato); }
.cg-retos-lado .cuenta-atras { margin-left: 0; text-align: left; color: var(--cg-bronce-claro); }
.cg-retos-lado .cuenta-atras.agotada { color: var(--cg-bronce); }
.cg-retos-lado .reto-reglas { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--cg-texto-verde-2); }
.cg-retos-lado .reto-tope { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(179, 148, 92, .22); max-width: none; }
.cg-retos-lado .reto-tope .cg-k { margin-bottom: 7px; }
.cg-retos-riesgo { position: relative; height: 8px; border-radius: 999px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); overflow: hidden; }
.cg-retos-riesgo > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--cg-verde-dato), var(--verde-f)); }
.cg-retos-riesgo-pie { margin-top: 6px; font-size: 12px; color: var(--cg-texto-verde); }
.cg-retos-riesgo-pie b { color: var(--cg-bronce-claro); }
.cg-retos-retar::before { content: ''; flex: 0 0 auto; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.4' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.4' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; }
.cg-btn-pri.grande { height: 52px; font-size: 15px; letter-spacing: .3px; padding: 0 26px; }
.cg-btn-pri.ancho { width: 100%; }
@media (max-width: 1100px) {
  .cg-retos-fila2 { flex-direction: column; gap: 16px; }
  .cg-retos-lado { flex-basis: auto; }
}
@media (max-width: 620px) {
  .cg-retos-form { padding: 18px 16px; }
  .cg-retos-lado { padding: 18px 16px; }
  .cg-retos-cab .cg-sec { font-size: 26px; }
  .cg-retos-cab { flex-wrap: wrap; }
}
.cg-retos-lado .cg-btn-pri { text-transform: none; }

/* ---------- 068 · TAREA 5 (b): «En marcha» en rejilla de 3 y «El equipo» en 3 tarjetas (ruta_retos) ---------- */
.cg-retos-seccion { margin: 26px 0 14px; }
.retos-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cg-reto.reto-carta { padding: 18px 20px; gap: 12px; border-radius: 10px; background: var(--cg-superficie); border: 1px solid rgba(128, 98, 48, .34); }
.cg-reto.reto-carta.ganando { box-shadow: inset 0 0 0 1px rgba(46, 122, 98, .5); background: var(--cg-superficie); }
.cg-reto-cara { flex: 0 0 auto; display: inline-flex; }
.cg-reto-cara .cara-asesor { border-radius: 7px; border: 0; box-shadow: 0 0 0 1px rgba(128, 98, 48, .25); }
.cg-reto-cara .cara-asesor.sin { background: var(--cg-verde); color: var(--cg-bronce-claro); }
.cg-reto-q { display: flex; align-items: center; gap: 12px; }
.cg-reto-quien { min-width: 0; flex: 1; }
.cg-reto-quien b { display: block; font-size: 15px; color: var(--cg-texto); white-space: normal; }
.cg-reto-quien span { display: block; margin-top: 2px; font-size: 12px; color: var(--cg-texto-2); }
.cg-reto-cuota { flex: 0 0 auto; font: 600 28px/1 var(--fuente-titulos); color: var(--cg-bronce-osc); }
.cg-reto-cita { font: italic 400 16.5px/1.3 var(--fuente-titulos); color: var(--cg-texto-2); overflow-wrap: anywhere; }
.cg-reto-avance-fila { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 12px; color: var(--cg-texto-2); }
.cg-reto-avance-fila b { color: var(--cg-texto); }
.cg-reto-cierre { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--cg-texto-2); }
.cg-reto-cierre .cuenta-atras { margin: 0; font: 700 12px var(--fuente); color: var(--cg-texto); }
.cg-reto .reto-apoyo { margin-top: 0; padding-top: 12px; border-top: 1px solid rgba(128, 98, 48, .2); gap: 8px; }
.cg-reto .reto-apoyo.dentro { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; }
.cg-reto .reto-apoyo-fila { flex-wrap: wrap; gap: 8px; }
.cg-reto .cg-reto-detras { margin: 0; white-space: nowrap; }
.cg-reto .cg-pil { cursor: pointer; font-family: inherit; }
.cg-reto .cg-pil:hover:not(.on) { border-color: var(--cg-bronce-osc); }
.cg-reto .reto-apoyo-input { flex: 1 1 70px; min-width: 70px; min-height: 36px; padding: 0 10px; box-sizing: border-box; border: 1px solid rgba(128, 98, 48, .3); border-radius: 7px; background: var(--cg-superficie-alta); color: var(--cg-texto); font: 700 13px var(--fuente); }
.cg-reto .reto-apoyo-btn { flex: 0 0 auto; height: 36px; padding: 0 14px; margin-left: auto; }
.cg-reto-nota { font-size: 12px; color: var(--cg-texto-3); }
.cg-reto .reto-apoyos-lista { margin-top: 0; }
.cg-reto .reto-muro { margin-top: 0; border-top: 1px solid rgba(128, 98, 48, .2); padding-top: 10px; }
.cg-reto .reto-reacciones { gap: 6px; }
.cg-reto .reto-reaccion { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 10px; border-radius: 999px; background: transparent; border: 1px solid rgba(128, 98, 48, .3); color: var(--cg-texto-2); font-size: 12px; }
.cg-reto .reto-reaccion.mia { border-color: var(--cg-bronce-osc); background: rgba(179, 148, 92, .14); color: var(--cg-bronce-osc); }
.cg-reto .reto-reaccion b { color: inherit; }

.cg-eq-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cg-eq-rejilla > .reto-equipo { display: contents; }
.cg-eq-card { padding: 18px 22px 12px; min-width: 0; }
.cg-eq-card > .cg-k { white-space: normal; }
.cg-eq-pie { margin: 0 0 8px; font-size: 12px; color: var(--cg-texto-3); }
.cg-eq-sub { margin: 12px 0 4px; font-size: 12px; letter-spacing: 1.6px; font-weight: 700; text-transform: uppercase; color: var(--cg-bronce-osc); }
.cg-eq-card .retos-cerrados { gap: 0; }
.cg-eq-fila { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(128, 98, 48, .16); }
.cg-eq-fila:first-of-type { border-top: 0; }
.cg-eq-card .reto-cerrado { opacity: 1; background: none; border-width: 1px 0 0; border-color: rgba(128, 98, 48, .16); border-radius: 0; padding: 9px 0; }
.cg-eq-txt { min-width: 0; flex: 1; }
.cg-eq-txt b { display: block; font-size: 13.5px; color: var(--cg-texto); overflow-wrap: anywhere; }
.cg-eq-txt small { display: block; margin-top: 2px; font-size: 12px; color: var(--cg-texto-2); overflow-wrap: anywhere; }
.cg-eq-d { flex: 0 0 auto; min-width: 44px; text-align: right; font-size: 12px; font-weight: 600; color: var(--cg-texto-3); }
@media (max-width: 1100px) {
  .retos-rejilla, .cg-eq-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .retos-rejilla, .cg-eq-rejilla { grid-template-columns: minmax(0, 1fr); }
  .cg-eq-rejilla > .reto-equipo { display: contents; }
}
.cg-eq-card > .cg-k { color: var(--cg-bronce-osc); }

/* ---------- 068 · TAREA 6: Temporada con la forma de ruta_temporada (cabecera + premio verde, pase, insignias) ---------- */
.cg-tmp-bloque > .cg-tmp-cab { margin: 26px 0 14px; }
.cg-tmp-cab .cg-tag { flex: 0 0 auto; }
.cg-tmp-fila { display: flex; gap: 22px; align-items: stretch; }
.cg-tmp-id { flex: 0 0 420px; min-width: 0; padding: 22px 26px; }
.cg-tmp-id .cg-k { white-space: normal; }
.cg-tmp-id .cg-sec { font-size: 34px; margin-top: 2px; }
.cg-tmp-desc { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--cg-texto-2); }
.cg-tmp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cg-tmp-cajitas { display: flex; gap: 10px; margin-top: 18px; }
.cg-interna-c { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 7px; background: var(--cg-superficie-alta); border: 1px solid rgba(128, 98, 48, .2); }
.cg-interna-c .cg-k { margin-bottom: 3px; }
.cg-interna-c b { font-size: 17px; color: var(--cg-texto); font-variant-numeric: tabular-nums lining-nums; }
.cg-tmp-vacia { display: flex; align-items: center; gap: 18px; flex: 1 1 auto; }
.cg-tmp-vacia-ico { color: var(--cg-bronce-osc); }
.cg-tmp-premio { flex: 1 1 0; min-width: 0; padding: 22px 26px; }
.cg-tmp-premio .cg-k { white-space: normal; }
.cg-tmp-premio-cab { display: flex; align-items: flex-start; gap: 16px; }
.cg-tmp-premio-nombre { display: block; margin-top: 4px; font: 600 30px/1.1 var(--fuente-titulos); color: var(--cg-marfil); overflow-wrap: anywhere; }
.cg-tmp-premio-cobrado { margin-left: auto; text-align: right; flex: 0 0 auto; }
.cg-tmp-premio-sub { margin-top: 6px; color: var(--cg-texto-verde-2); }
.cg-tmp-barra { margin-top: 14px; flex: none; background: rgba(0, 0, 0, .28); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
.cg-tmp-premio-pie { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 7px; font-size: 12px; color: var(--cg-texto-verde-2); }
.cg-tmp-premio-pie b { color: var(--cg-bronce-claro); }
.cg-esc-t { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 12px; margin-top: 16px; }
.cg-esc-c { padding: 14px 12px; border-radius: 9px; background: rgba(0, 0, 0, .18); border: 1px solid rgba(179, 148, 92, .22); text-align: center; }
.cg-esc-c.siguiente { border-color: var(--cg-bronce); box-shadow: 0 0 0 3px rgba(179, 148, 92, .15); }
.cg-esc-c .cg-k { margin-bottom: 6px; font-size: 12px; letter-spacing: 1.6px; color: var(--cg-texto-verde-3); white-space: nowrap; }
.cg-esc-c b { display: block; font-size: 20px; font-weight: 800; color: var(--cg-marfil); font-variant-numeric: tabular-nums lining-nums; }
.cg-esc-c > span:not(.cg-k) { display: block; margin-top: 4px; font-size: 12px; color: var(--cg-texto-verde-2); }
.cg-esc-c .cg-tmp-falta { color: var(--cg-bronce-claro); font-weight: 700; }
.cg-esc-c.logrado .cg-tmp-falta { color: var(--cg-verde-dato); }
.cg-tmp-ok { display: inline-flex; vertical-align: middle; color: var(--cg-verde-dato); }

/* El pase: tira con scroll, número en pastilla arriba, medallón, premio, umbral y estado. */
.cg-pase-caja { padding: 4px 18px 16px; }
.cg-pase-resumen { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 6px 0; }
.cg-pase-xp { min-width: 0; }
.cg-pase-xp .cg-k { margin-bottom: 2px; white-space: normal; }
.cg-pase-acciones { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cg-pase-acciones .cg-btn-pri { height: 36px; }
.cg-pase { overflow-x: auto; padding: 30px 4px 6px; scrollbar-width: thin; }
.cg-pase-lista { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; width: max-content; min-width: 100%; }
.cg-pn { position: relative; flex: 0 0 112px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 8px 12px; border-radius: 9px; background: var(--cg-superficie-alta); border: 1px solid rgba(128, 98, 48, .22); }
.cg-nv-n { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); min-width: 28px; height: 26px; padding: 0 7px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: var(--cg-papel-3); color: var(--cg-texto-2); box-shadow: inset 0 0 0 1px rgba(128, 98, 48, .3); }
.cg-pn-ico { width: 46px; height: 46px; margin-top: 4px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cg-papel-3); color: var(--cg-texto-3); }
.cg-pn-premio { margin-top: 9px; min-height: 31px; font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--cg-texto); overflow-wrap: anywhere; }
.cg-pn-umbral { margin-top: 3px; font-size: 12px; color: var(--cg-texto-3); font-variant-numeric: tabular-nums lining-nums; }
.cg-pn-estado { margin-top: 9px; font-size: 12px; letter-spacing: 1px; font-weight: 800; text-transform: uppercase; color: var(--cg-texto-3); }
.cg-pn-btn { margin-top: 9px; height: 30px; padding: 0 12px; font-size: 12px; }
.cg-pn.rec { background: rgba(46, 122, 98, .06); border-color: rgba(46, 122, 98, .3); }
.cg-pn.rec .cg-nv-n { background: var(--verde-f); color: var(--cg-superficie-alta); box-shadow: none; }
.cg-pn.rec .cg-pn-estado { color: var(--cg-ok); }
.cg-pn.listo { border-color: var(--cg-bronce); box-shadow: 0 0 0 3px rgba(179, 148, 92, .18), 0 6px 14px rgba(128, 98, 48, .18); }
.cg-pn.listo .cg-nv-n { background: linear-gradient(180deg, var(--cg-bronce-claro), var(--cg-bronce)); color: var(--cg-verde); box-shadow: none; }
.cg-pn.listo .cg-pn-ico, .cg-pn.rec .cg-pn-ico { background: radial-gradient(circle at 36% 30%, var(--cg-bronce-brillo), var(--cg-bronce) 58%, var(--cg-bronce-osc)); color: var(--cg-verde); }
.cg-pn.cerr { opacity: .72; }
.cg-pn.sig { border-color: var(--cg-bronce); }
.cg-aqui { flex: 0 0 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 0 6px; }
.cg-aqui .cg-k { margin: 0; }
.cg-aqui-tri { width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 12px solid var(--cg-bronce); }
.cg-aqui-txt { font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--cg-texto-2); }
.cg-aqui-txt b { color: var(--cg-bronce-osc); }

/* Insignias: tres tarjetas con medallón; «Ver todo» abre vitrinas, colección, próximas y filtros. */
.cg-ins-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cg-ins-c { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 9px; background: var(--cg-superficie-alta); border: 1px solid rgba(128, 98, 48, .22); }
.cg-ins-md { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cg-ins-c.gan .cg-ins-md { background: radial-gradient(circle at 36% 30%, var(--cg-bronce-brillo), var(--cg-bronce) 58%, var(--cg-bronce-osc)); color: var(--cg-verde); box-shadow: 0 0 0 3px rgba(179, 148, 92, .22), 0 0 16px rgba(179, 148, 92, .45); }
.cg-ins-c.cerca .cg-ins-md { background: var(--cg-papel-3); color: var(--cg-bronce-osc); box-shadow: inset 0 0 0 2px rgba(179, 148, 92, .5); }
.cg-ins-cuerpo { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.cg-ins-cuerpo b { font: 600 19px/1.1 var(--fuente-titulos); color: var(--cg-texto); }
.cg-ins-cuerpo > span { font-size: 12px; line-height: 1.35; color: var(--cg-texto-2); overflow-wrap: anywhere; }
.cg-ins-cuerpo > .cg-ins-sello { color: var(--cg-texto-3); }
.cg-ins-nueva { align-self: flex-start; margin-bottom: 2px; }
.cg-ins-barra { display: block; flex: none; height: 6px; margin-top: 6px; }
.cg-ins-cuerpo > .cg-ins-pie { margin-top: 4px; font-weight: 700; color: var(--cg-texto-3); }
.cg-ins-cuerpo > .cg-ins-pie.hecha { display: inline-flex; align-items: center; gap: 5px; color: var(--cg-ok); }
.cg-ins-pie i { display: inline-flex; }
.cg-ins-mas { display: flex; justify-content: center; margin-top: 16px; }
.cg-ins-mas .cg-btn-lin { gap: 6px; background: transparent; cursor: pointer; }
.cg-ins-caja { padding: 20px 24px; margin-bottom: 14px; }
.cg-ins-caja-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cg-ins-caja-cab .cg-sec { font-size: 24px; }
.cg-ins-caja .cg-k, .cg-tmp-bloque .insig-proximas .cg-k, .cg-tmp-bloque .insig-familias .cg-k { white-space: normal; }
.cg-tmp-bloque .insig-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; color: var(--cg-texto-2); background: var(--cg-superficie-alta); border: 1px solid rgba(128, 98, 48, .3); }
.cg-tmp-bloque .insig-chip b { color: var(--cg-texto); font-weight: 700; }
.cg-tmp-bloque .insig-chip.ok { background: rgba(46, 122, 98, .1); border-color: rgba(46, 122, 98, .35); color: var(--cg-ok); }
.cg-tmp-bloque .insig-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.cg-tmp-bloque .insig-filtros .cg-pil { background: transparent; cursor: pointer; font: 600 12px var(--fuente); }
.cg-tmp-bloque .insig-filtros .cg-pil.on { background: var(--cg-verde); }
.cg-tmp-bloque .insig-filtros .cg-pil .mini { opacity: .75; }
@media (max-width: 1100px) {
  .cg-tmp-fila { flex-direction: column; }
  .cg-tmp-id { flex: 1 1 auto; }
  .cg-ins-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .cg-tmp-id, .cg-tmp-premio { padding: 18px 18px; }
  .cg-tmp-premio-cab { flex-wrap: wrap; }
  .cg-tmp-premio-cobrado { margin-left: 0; text-align: left; }
  .cg-esc-t { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cg-ins-rejilla { grid-template-columns: minmax(0, 1fr); }
  .cg-tmp-cajitas { flex-wrap: wrap; }
}

/* ==========================================================================
   068 · LADO A LADO DE MI PANEL (aviso de PARTY, 5-oct 08:07)
   ========================================================================== */
/* 1 · La cabecera va a todo el ancho, como la maqueta: escudo y menú a 32 px del borde izquierdo; a la derecha, MIS BEKY ·
   línea fina · campana · avatar pegados a 32 px del borde. Con el tope de --ancho-app se centraba en un bloque de 1440. */
@media (min-width: 861px) {
  .cg-cab .barra-sup-cuerpo { max-width: none; padding-left: 32px; padding-right: 32px; }
  /* El header es flex con margin auto: sin esto el cuerpo se encoge a su contenido y se centra (escudo a ~205 px). */
  .cg-cab .barra-sup-cuerpo { flex: 1 1 auto; width: 100%; }
}
.cg-cab .sep-barra { display: block; height: 28px; background: var(--cg-bronce); opacity: .45; }
@media (max-width: 860px) { .cg-cab .sep-barra { display: none; } }
/* 2 · La tarjeta del equipo es verde oscura: la copia de .cg-sup de más abajo le pisaba el fondo (mismo peso, llega después). */
.cg-sup.cg-equipo { background: linear-gradient(180deg, var(--cg-verde-2) 0%, var(--cg-verde) 55%, var(--cg-verde-borde) 100%); border-color: rgba(179, 148, 92, .45);
  box-shadow: 0 12px 28px rgba(30, 20, 8, .26); color: var(--cg-marfil); }
/* 6 · «En el coliseo»: tres columnas fijas; una tarjeta sola conserva su tercio en vez de estirarse a todo el ancho. */
.cg-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cg-col > .cg-col-vacio { grid-column: 1 / -1; }
@media (max-width: 820px) { .cg-col { grid-template-columns: minmax(0, 1fr); } }
/* 8 · La cinta EN VIVO, la tira «Tu perfil va al…» y el aviso de campaña son solo de Mi panel. No se borran: se muestran ahí. */
body[data-cg-sec]:not([data-cg-sec="hoy"]) #cgCinta,
body[data-cg-sec]:not([data-cg-sec="hoy"]) #perfilAviso,
body[data-cg-sec]:not([data-cg-sec="hoy"]) #bandaEvento { display: none; }

/* ===================================================================== 071 · REVISIÓN DE USUARIO DEL 5-OCT (PARTY)
   Choques de la unión de las consolas: una misma clase definida en dos pantallas, y la segunda pisaba a la primera.
   Aquí cada regla vuelve a su pantalla. Solo estilos: no cambia datos, textos ni comportamiento. */
/* a) Finanzas · Tu mes: la barra de la meta crecía hasta llenar la tarjeta (heredaba flex:1 de Global Party). */
.cg-fin-mes-meta .cg-barra { flex: 0 0 auto; }
/* b) Mi panel · Meta del mes (055): la barra alta con marcas y su pie, que el «Tu nivel del mes» de Mi ruta (068) había pisado. */
.cg-mes-barra-caja .cg-mes-barra { height: 24px; margin-top: 0; border-radius: 5px; background: rgb(232, 225, 210); overflow: visible;
  box-shadow: inset 0 2px 5px rgba(80,62,34,.3), inset 0 -1px 0 rgba(255,255,255,.7); }
.cg-mes-barra-caja .cg-mes-pie { display: flex; justify-content: space-between; margin-top: 7px; line-height: normal; color: rgb(95, 100, 92); }
.cg-mes-barra-caja .cg-mes-pie strong { color: var(--cg-texto); }
.cg-mes-barra-caja .cg-mes-pie #cgMesFaltan strong { color: var(--cg-bronce-osc); }
/* c) Etiquetas sobre tarjetas verdes: la versión para fondo claro las dejaba grises sobre verde oscuro. */
.cg-verde .cg-k, .cgp-verde .cg-k { color: var(--cg-verde-dato); }
.cg-verde #rachaTexto .racha-etq, .cg-verde .racha-etq { color: var(--cg-verde-dato); }
.cg-verde .cg-meta-pie { display: flex; justify-content: space-between; color: rgb(147, 179, 168); }
.cg-verde .cg-meta-pie strong, .cg-verde .cg-meta-pie b { color: rgb(243, 235, 217); }
.cg-verde .cg-meta-pie span:last-child strong { color: var(--cg-bronce-claro); }
.cg-verde .cg-tag.bronce { background: rgba(232, 213, 168, .14); color: var(--cg-bronce-claro); box-shadow: inset 0 0 0 1px rgba(232, 213, 168, .4); }
/* d) Mi perfil · Ayuda: las preguntas iban pegadas a la derecha (el resumen reparte el espacio y aquí no hay tercer elemento). */
.pf-grupo.ay-faq > summary { justify-content: flex-start; }
.cg-dat-izq .ay-faq .pf-grupo-tit { flex: 1 1 auto; }
/* e) Botones de dos toques con la piel nueva: «¿Seguro? …» quedaba crema sobre crema con el cursor encima. */
.boton.cg-btn-pri.confirmar, .boton.cg-btn-pri.confirmar:hover, .boton.cg-btn-pri.confirmar:focus, .boton.cg-btn-pri.confirmar:active,
.cg-btn-pri.confirmar, .cg-btn-pri.confirmar:hover, .cg-btn-pri.confirmar:focus {
  background: linear-gradient(180deg, rgb(138, 106, 48), rgb(94, 69, 32)); color: var(--cg-superficie-alta); border-color: transparent; }
/* f) Celular */
@media (max-width: 820px) {
  /* «Tus números»: las celdas se encimaban; como en la maqueta, la tira se desliza de lado. */
  .cgp-placa.cg-gr-tira { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 14px 4px; }
  .cgp-placa.cg-gr-tira > .cgp-celda, .cgp-placa.cg-gr-tira > .cgp-celda:last-child { flex: 0 0 auto; padding: 0 18px; }
  .cgp-placa.cg-gr-tira > .cgp-div { display: block; flex: 0 0 1px; }
  /* Depósitos: el rótulo de la tarjeta verde se salía por la derecha. */
  .cg-dep-lado .cg-k { white-space: normal; }
  /* Credencial de Mi perfil: apilados, los dos botones quedaban como una rayita (el flex:1 en línea los aplastaba). */
  .cg-cred-bot .cg-btn { flex: 0 0 auto !important; height: 38px !important; }
}
@media (max-width: 560px) {
  /* El Muro · récords de la casa a dos columnas: una cifra de cinco dígitos se montaba sobre la columna vecina. */
  .mu-records .cgp-piedra img { height: 28px !important; }
  .mu-records .cgp-piedra .cgp-pre { font-size: 15px !important; }
}

/* ===== 072 · UNA SOLA PUBLICACIÓN (PARTY, noche del 5-oct) — solo estilos; se agregan al final para no mover lo anterior ===== */
/* Bote del equipo · «Así se reparte lo que entra»: el porcentaje manda y, si hoy hubo excedente, los BEKY van debajo en chico. */
.cg-bote-reparto .cg-interna small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--cg-texto-verde-3); }
/* «AL DE LA SEMANA» no cabe en una línea a 12 px (UX-17 no deja bajar de ahí): el rótulo parte en dos y la cifra se alinea abajo. */
.cg-bote-reparto .cg-interna { display: flex; flex-direction: column; justify-content: space-between; padding: 9px 9px; }
.cg-bote-reparto .cg-interna .cg-k { white-space: normal; letter-spacing: .9px; line-height: 1.25; }
/* Duelos · «Esperan tu respuesta»: la tarjeta verde mide 366 px y el texto quedaba en una columna de 60 px al lado de los botones
   (peor cuando el botón pasa a «¿Seguro? …»). Arriba quién y qué; abajo, en su propia fila, la apuesta y los botones. */
.cg-verde .cg-reto-c { flex-wrap: wrap; }
.cg-verde .cg-reto-c .cg-reto-acc { flex: 1 1 100%; flex-direction: row; justify-content: space-between; align-items: center; }
/* El contador junto al título «Duelos» salía como un cuadradito rojo pegado a la letra: va como la pastilla de las pestañas. */
.cg-sec + .globo { position: static; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 999px; background: var(--cg-verde-lleno); color: var(--cg-superficie-alta); font: 800 12px/1 var(--fuente); box-shadow: none; transform: none; }
.cg-sec + .globo.oculto { display: none; }
.cg-duelos-pag .cg-cab-grande .cg-sec + .globo { margin-left: 2px; }
/* Cabecera en celular: con un saldo de 5 cifras («MIS BEKY 40.320») la primera fila medía 393 px en una pantalla de 390 y toda la
   página se podía arrastrar de lado. El rótulo cede esos píxeles (menos aire entre letras) y, si aun así no cabe, se recorta él. */
@media (max-width: 430px) {
  .cg-cab .barra-sup-cuerpo { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .cg-cab .cg-nav > .cg-item, .cg-cab .cg-nav > .cg-grupo > .cg-item { padding-left: 10px; padding-right: 10px; }
  .cg-cab .zona-marca { min-width: 0; gap: 6px; }
  .cg-cab .cg-marca-enlace { min-width: 0; overflow: hidden; }
  .cg-cab .cg-marca-txt { letter-spacing: .6px; white-space: nowrap; }
}

/* ===== 073 · NOCHE DE CALIDAD (F1 · app del asesor, 6-oct) — se agrega al final para no mover lo anterior. Solo estilos. ===== */
/* A-01 · El muro: una cadena sin espacios (nombre de evento, reto, mensaje) ensanchaba TODAS las tarjetas y dejaba la fecha y «Aplaudir» fuera de la caja.
   La rejilla de celular era `1fr` (mínimo = contenido): pasa a `minmax(0,1fr)` y el texto largo se parte donde haga falta. */
@media (max-width: 820px) { .mu-pagina .mu-muro { grid-template-columns: minmax(0, 1fr); } }
.mu-pagina .mu-hito, .mu-pagina .mu-cuerpo { min-width: 0; max-width: 100%; }
.mu-pagina .mu-quien, .mu-pagina .mu-acc, .mu-pagina .mu-cita, .mu-pagina .mu-rot, .mu-pagina .col .nom, .mu-pagina .mu-nom-t { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.mu-pagina .mu-pie .mu-tag { max-width: 100%; overflow-wrap: anywhere; text-align: left; }
/* A-02 · Podio de «Los que mandan» en celular: tres columnas de ~99 px y una cifra de piedra de 105-133 px se montaban sobre las vecinas.
   Dígitos más bajos, «US$» encima de la cifra y, si aun así no cabe, la cifra baja de línea en vez de pisar. */
@media (max-width: 480px) {
  .mu-pagina .mu-podio, .mu-pagina .mu-podio-fila { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .mu-pagina .col .cifra { max-width: 100%; }
  .mu-pagina .col .cgp-piedra { flex-wrap: wrap; justify-content: center; max-width: 100%; gap: 2px; }
  .mu-pagina .col .cgp-piedra .cgp-pre { flex: 0 0 100%; margin: 0 0 1px; text-align: center; font-size: 13px !important; }
  .mu-pagina .col .cgp-piedra img { height: 22px !important; }
  .mu-pagina .col .cgp-piedra i.cgp-mil { width: 4px !important; height: 4px !important; }
}
/* A-03 · «Escalera del día» en celular: siete peldaños en 332 px. El importe parte en dos líneas («US$» / «1.100»), sin «cobrado» repetido
   cuando son seis o más (la tarjeta ya dice «Llevas US$ … cobrado») y el premio también puede partir. */
@media (max-width: 480px) {
  .cg-nodos .cg-obj { font-size: 13px; line-height: 1.15; white-space: normal; text-align: center; margin-top: 8px; max-width: 100%; overflow-wrap: anywhere; }
  .cg-nodos .cg-uni { font-size: 12px; line-height: 1.15; max-width: 100%; overflow-wrap: anywhere; text-align: center; }
  .cg-nodos .cg-prem { font-size: 12px; line-height: 1.15; white-space: normal; text-align: center; max-width: 100%; overflow-wrap: anywhere; }
  .cg-nodos:has(> .cg-nodo-c:nth-child(6)) .cg-uni { display: none; }
}
/* A-04 · «Tu escalera de hoy» (Meta personal): siete puntos con su importe en una fila de 427 px dentro de 302-316 px. El importe parte en
   dos líneas y la fila nunca se sale de su tarjeta (si hubiera más escalones, se desliza). */
.cg-puntos { max-width: 100%; overflow-x: auto; padding: 4px 4px 2px; scrollbar-width: thin; }
.cg-puntos .p span { width: min-content; max-width: 100%; white-space: normal; text-align: center; line-height: 1.15; }
.cg-puntos .t { min-width: 4px; }
/* A-08 · Ventanas: la ✕ (44 px en celular) pisaba el título centrado. */
.modal-caja h3 { padding-left: 46px; padding-right: 46px; overflow-wrap: anywhere; }
/* A-06 · Tienda en celular: la pastilla de estado («PRECIO POR CONFIRMAR», «LO APRUEBA TU JEFE») era más ancha que la tarjeta. */
.articulo .pastilla { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; text-align: left; }
.articulo .etiquetas { min-width: 0; }
/* A-05 · «Nuevo grado» del muro en celular: la tarjeta es una columna con `flex-wrap:wrap` y el `flex:1 1 100%` del pie hacía que «Aplaudido · 1» se
   fuera a una segunda columna (fuera de la caja). Columna sin salto de línea, y el pie ocupa su fila. */
@media (max-width: 820px) {
  .mu-pagina .mu-ascenso { flex-wrap: nowrap; }
  .mu-pagina .mu-ascenso .mu-cuerpo { flex: 0 0 auto; width: 100%; padding-right: 0; }
  .mu-pagina .mu-ascenso .mu-der { flex: 0 0 auto; width: 100%; }
}
/* C-03 · Depósitos a plazo: el botón de dos toques («¿Seguro? US$ …») con la misma piel que los demás de dos toques (071 e). */
.cg-btn.cg-pri.confirmar, .cg-btn.cg-pri.confirmar:hover, .cg-btn.cg-pri.confirmar:focus {
  background: linear-gradient(180deg, rgb(138, 106, 48), rgb(94, 69, 32)); color: var(--cg-superficie-alta); border-color: transparent; }
.cg-dep-confirma, .cg-dep-razon { margin-top: 12px; line-height: 1.45; }
/* A-09 · Cifras de Cormorant alineadas («1:34:10», «US$ 0», «1.500»): el `font:` abreviado reinicia las cifras y varios sitios fijaban solo `tabular-nums`. El `body` ya las pide; aquí van las reglas que las pisaban. */
.pm-titulo-sec h3, .pm-marca-sup, .pm-monograma, .pm-miembro, .pm-nombre, .pm-grado b, .pm-grado span, .pm-boton-fino, .pm-credencial .club b,
.pm-credencial .club span, .pm-credencial .grado b, .pm-credencial .grado span, .pm-credencial .rot, .pm-peldano b, .pm-peldano small,
.pm-peldano.aqui::after, .pm-proximo .rot, .pm-proximo h4, .pm-cifras span, .pm-mes small, .pm-hojita .der .t, .pm-hojita .der .n, .pm-cert-mini
.datos .rot, .pm-cert-mini .datos h4, .pm-ant-rot, .pm-logro b, .pm-hito time, .pm-colofon p, .tarjeta-grado .rot, .tarjeta-grado h3, .pm-pastilla b,
.pm-cab-muro .ceja, .pm-cab-muro h2, .pc-filtro, .ascenso .tope span, .ascenso .duo .r div, .ascenso h4, .ascenso .que b, .entrada .txt p em,
.mini-retrato .m div, .aviso-club p em, .pm-hoja .ceja, .pm-hoja h3, .pm-foto-fila .m div, .pm-campo label, .pm-asi small, .pm-asi p, .cg-bv-mono,
.cg-per-inicial, .cg-gr-nom, .cg-gr-prox-nom, .cg-cr-hoja-n, .cg-cr-grado, .cg-retos-premio.apagada, .cg-reto-cuota, .cg-reto-cita,
.cg-tmp-premio-nombre, .cg-ins-cuerpo b, .cuenta-atras, .carrete .cifra, .llam-num, .bote-uno-cifra, .bote .contador, .salas-cuenta span,
#cajaSiguiente .sig-falta, .cofres-resumen-num, .salas-tope-num, .temporada-falta-num, .area-cifra .num, .boveda-dias { font-variant-numeric: lining-nums tabular-nums; }
/* A-12 · Texto de 12 px como mínimo. Los rótulos en mayúsculas de las placas (coliseo_paginas.css) y los de «Mis indicadores» (indicadores.css, por eso el
   `body` delante: esa hoja se carga después) bajan el espaciado entre letras para que no desborden, y los que no cabían en una línea parten. */
.cgp-k { font-size: 12px; letter-spacing: 1.6px; white-space: normal; }
.cgp-rot { font-size: 12px; letter-spacing: 2px; }
.cgp-pie { font-size: 12px; }
.cgp-cnt { font-size: 12px; min-width: 22px; height: 22px; }
.cg-placa-beky { font-size: 12px; }
.aviso-club .ap { font-size: 12px; }
body .cg-ind-k, body .cg-ind-celda .cg-ind-k { font-size: 12px; letter-spacing: 1.4px; white-space: normal; }
body .cg-ind-estado { font-size: 12px; letter-spacing: 1.4px; }
body .cg-ind-nom { font-size: 12px; letter-spacing: 1.2px; }
body .cg-ind-cab .rot, body .cg-isup .rot { font-size: 12px; letter-spacing: 2px; }
/* A-13 · Contraste. `--cg-texto-3` (3,5:1 sobre marfil) pasa a valer lo mismo que `--tenue` (4,8:1). Debe cambiarse también en tokens.css
   (la paleta vive allí); mientras tanto esta línea gana por orden de carga. «PERDIDO» deja el rojo de las tarjetas (4,4:1 sobre su fondo) por el rojo apagado de la paleta. */
:root { --cg-texto-3: var(--tenue); }
.cg-est.pierde { color: var(--rojo); }
/* A-11 / C-09 · Controles de 40 px como mínimo en celular (los de solo icono, 40 × 40). */
@media (max-width: 820px) {
  .cg-cab .cg-escudo, .cg-cab .cg-escudo img { width: 40px; height: 40px; }
  .cg-cab .boton-campana { width: 40px; height: 40px; }
  .cg-cab .cg-chip { min-width: 40px; min-height: 40px; }
  .cg-cab .cg-chip .avatar { width: 40px; height: 40px; }
}
@media (max-width: 480px) {
  .cg-cab .cg-marca-enlace { display: inline-flex; align-items: center; min-height: 40px; }
  .cg-pil, .cg-jor-tab, .cg-dep-op, .cg-btn, .cg-btn-pri, .cg-btn-lin, .cg-btn.cg-chico, .boton, .boton.chico, .cg-tt-btn { min-height: 40px; }
  .cg-reto-c .cg-btn-pri, .cg-reto-c .cg-btn-lin { height: 40px; min-height: 40px; }
  .mu-pagina .mu-filtros button, .mu-pagina .mu-seg > button, .mu-pagina .mu-seg-sel, .mu-pagina .mu-aplauso, .mu-pagina .mu-btn-lin, .mu-pagina .mu-btn-mas { min-height: 40px; }
  .cg-ver, .cg-ver-todo, .cg-ver-claro, .cg-jor-ver { display: flex; align-items: center; min-height: 40px; padding-top: 0; }
  .cg-per-camara, .cg-per-lapiz { width: 40px; height: 40px; }
  .cgp-pestanas > a, .cgp-pestanas > button { min-height: 44px; }
}
@media (max-width: 480px) {
  .cg-tira-btn, .cg-ind-pil, .cg-sep-n.plegado, button.cg-tt-txt { min-height: 40px; }
  body .cg-ind-pil { min-height: 40px; }
  .cg-rec-link, .cg-col-ver, .mu-pagina .mu-ver, .cg-enlace, .cg-liq-ya > summary, .cg-giros-mas summary, .pf-dist-ant summary { display: inline-flex; align-items: center; min-height: 40px; padding-top: 0; padding-bottom: 0; }
  .cg-liq-ya > summary { display: flex; }
  .cg-sep-n.plegado { align-items: center; }
  #retoMenos.boton.chico, #retoMas.boton.chico { min-width: 40px; min-height: 40px; }
  .cg-accion { min-height: 40px; }
}
.cara-asesor.sin { font-size: max(12px, calc(var(--cara, 56px) * .36)); }
/* A-13 · Textos con información que se atenuaban con `opacity` (2,5 a 3,3:1): se quita la opacidad y, donde hacía falta distinguir el estado, se atenúa solo el dibujo. */
.cat-chip .n { opacity: 1; color: var(--tenue); }
.fin-nivel, .cg-fila-abierta { opacity: 1; }
.cg-nv.lejos .d { opacity: 1; }
.insig-filtros button .mini, .cg-tmp-bloque .insig-filtros .cg-pil .mini { opacity: 1; }
.cg-pn.cerr { opacity: 1; }
.cg-pn.cerr .cg-pn-ico { opacity: .72; }
.cgp-cnt { color: var(--oro-claro); }
.cgp-cnt.vivo { color: var(--oro-tinta); }
/* A-16 · C-04 · «Canjear» sin cupo del mes: la razón se lee clara (texto fuerte, sin la atenuación de «tenue») y puede ocupar dos líneas en celular. */
#canjeNota.cg-canje-razon { color: var(--texto); font-weight: 600; line-height: 1.45; }
/* A-26 · «Tu liquidación»: una frase principal en negrita y, debajo, una lista corta con viñetas (todas con punto final). */
.cg-liq-aviso p { margin: 0; font-weight: 700; color: var(--oro-claro); }
.cg-liq-aviso ul { margin: 6px 0 0; padding-left: 18px; }
.cg-liq-aviso li { margin: 0 0 4px; }
.cg-liq-aviso li:last-child { margin-bottom: 0; }
/* C-06 · el motivo por el que «Lanzar» está cerrado se lee junto al botón (a su izquierda en pantalla ancha, encima en celular). */
.cg-duelo-lanzar { align-items: center; gap: 14px; flex-wrap: wrap; }
.cg-duelo-motivo { flex: 1 1 auto; text-align: right; font-size: 12px; line-height: 1.4; color: var(--texto-2); }
.cg-duelo-motivo:empty { display: none; }
@media (max-width: 820px) { .cg-duelo-motivo { flex-basis: 100%; text-align: left; } }
/* C-10 · con el chat del equipo a la vista en su pestaña no se dibuja la burbuja flotante (no tapa «Enviar» en celular). */
body.chat-en-pestana #chatBurbuja { display: none; }
/* A-21 · Radios al sistema de dos (10 px / 7 px): lo que tenía 12, 9 u 8 px pasa a 10 px y lo que tenía 4, 5 o 6 px a 7 px.
   Quedan fuera, a propósito: las píldoras de filtro y pestañas (999 px), los círculos, las barras finas de progreso, el marco
   de las fotos (`.marco`) y la hoja de la credencial (`.cg-cr-hoja`, que imita un documento). */
.cg-pagina, .cg-fin, .cg-per, .mu-pagina, .party-bloque.cg-pagina { border-radius: var(--r); }
.cg-dep-plazo, .cg-esc-c, .cg-ins-c, .cg-pn, .cg-nota-v, .cg-mes-frase, .cg-bv-franja, .banda-evento-cuerpo { border-radius: var(--r); }
body .cg-ind-aviso { border-radius: var(--r); }
.cg-tag, .cg-est, .cg-xtr-id, .mu-pagina .mu-tag, .mu-pagina .tu, .mu-pagina .mu-nuevo { border-radius: var(--r-s); }
body .cg-ind-tag { border-radius: var(--r-s); }
/* A-22 · Los globos numéricos de las insignias (campana, chat, menú) heredan la tipografía de la app: los botones no la heredan solos y salían en Arial. */
.globo, .chat-boton .globo, .boton-campana .globo { font-family: var(--fuente); }
/* A-25 · La marquesina del jackpot baja a verde de la cabecera (no casi negro): el mismo degradado, con --tapete-fieltro-3. */
.marquesina { background: linear-gradient(180deg, var(--superficie-2), var(--tapete-fieltro-3) 70%); }
/* C-19 · La «×» de los buscadores deja de ser la azul nativa del navegador: una propia, en bronce. */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin: 0 0 0 6px; cursor: pointer;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23806230' stroke-width='2.4' stroke-linecap='round'><path d='M6 6l12 12M18 6 6 18'/></svg>") center / 12px 12px no-repeat;
}
/* C-23 · Los cuadros de texto solo crecen hacia abajo y nunca más allá del marco de su tarjeta. */
textarea { resize: vertical; max-width: 100%; }
/* A-27 · El selector de archivo nativo con el botón de contorno bronce del resto de la app. */
input[type="file"] { padding: 6px 8px; font-size: 13px; color: var(--texto-2); }
input[type="file"]::file-selector-button {
  margin: 0 12px 0 0; height: 36px; padding: 0 16px; border-radius: var(--r-s); cursor: pointer;
  border: 1px solid var(--linea-2); background: transparent; color: var(--oro); font: 700 13px/1 var(--fuente);
}
input[type="file"]::file-selector-button:hover { border-color: var(--oro); background: var(--oro-a); }
/* A-24 · «Tu jornada» (Mi panel), «Logros» (El muro) y las listas de Duelos ya no se estiran hasta la altura de su vecina (dejaban 240 a
   650 px en blanco): cada tarjeta mide lo que su contenido. Solo en pantalla ancha, donde van en fila; en celular van en columna. */
@media (min-width: 1101px) {
  #cgFila2, .mu-pagina .mu-fila2, .cg-duelos-listas { align-items: flex-start; }
}
/* A-13 · Dos textos que quedaban bajo 4,5:1: «PERDIDO» (dentro de `.cg-sup` el `--rojo` cambia a un tono más claro, así que se usa `--cg-mal`) y «precio por confirmar» (bronce claro sobre marfil, 2,7:1). */
.cg-est.pierde { color: var(--cg-mal); }
.pastilla.amarillo { color: var(--ambar); }

/* ==========================================================================
   076 · TODOS LOS EVENTOS DEL ASESOR EN EL INICIO (Óscar, 6-oct-2026)
   La banda mostraba un solo evento. Ahora es una lista dentro de la MISMA banda: una fila por evento,
   con su sello (×2 o +200 BEKY), a quién aplica, su avance y su reloj. Con un evento se ve como antes.
   Solo medidas y tokens: ningún color suelto.
   ========================================================================== */
.banda-evento-cuerpo.cg-evs { display: block; padding: 0; }
.cg-ev { display: flex; align-items: center; gap: 18px; padding: 14px 20px; min-width: 0; }
.cg-ev + .cg-ev { border-top: 1px solid var(--cg-linea); }
.cg-ev > .multiplicador { flex: 0 0 96px; text-align: center; animation: none; }
.cg-ev-extra { font-size: 34px; line-height: 1; }
.cg-ev-extra small { display: block; margin-top: 4px; font: 700 12px var(--fuente); letter-spacing: .14em; color: var(--cg-bronce-osc); }
.cg-ev-rayo { display: flex; justify-content: center; }
.cg-ev-txt { flex: 1 1 200px; min-width: 0; }
.cg-ev-k { color: var(--oro); }
.cg-ev-nombre { font-size: 30px; line-height: 1.02; margin-top: 2px; overflow-wrap: anywhere; }
.cg-ev-msj { margin-top: 4px; overflow-wrap: anywhere; }
.cg-ev-avance { display: flex; align-items: center; gap: 10px; margin-top: 7px; max-width: 320px; }
.cg-ev-avance .barra.fina { flex: 1 1 auto; height: 4px; margin: 0; }
.cg-ev-avance .mini { flex: 0 0 auto; white-space: nowrap; }
.cg-ev > .cuenta-atras { flex: 0 0 auto; }
.cg-ev-pronto > .multiplicador, .cg-ev-pronto .cg-ev-nombre { opacity: .72; }
/* Con varios eventos, cada fila es más baja: caben tres sin empujar «Tu actividad» fuera de la pantalla. */
.cg-evs:not([data-n="1"]) .cg-ev { padding-top: 11px; padding-bottom: 11px; }
.cg-evs:not([data-n="1"]) .cg-ev-nombre { font-size: 24px; }
.cg-evs:not([data-n="1"]) .cg-ev > .multiplicador:not(.cg-ev-extra) { font-size: 38px; }
.cg-evs:not([data-n="1"]) .cg-ev-extra { font-size: 28px; }
.cg-evs:not([data-n="1"]) .cg-ev > .cuenta-atras { font-size: 24px; }
/* La meta que es solo de este asesor lleva un filete verde: se distingue de las del equipo sin leer. */
.cg-ev-mio { box-shadow: inset 3px 0 0 var(--cg-verde); }
@media (max-width: 700px) {
  .cg-ev { flex-wrap: wrap; gap: 4px 12px; padding: 12px 14px; align-items: flex-start; }
  .cg-ev > .multiplicador { flex-basis: 62px; font-size: 30px; padding-top: 4px; }
  .cg-ev-extra, .cg-evs:not([data-n="1"]) .cg-ev-extra { font-size: 22px; }
  .cg-evs:not([data-n="1"]) .cg-ev > .multiplicador:not(.cg-ev-extra) { font-size: 30px; }
  .cg-ev-txt { flex-basis: 0; }
  .cg-ev-nombre, .cg-evs:not([data-n="1"]) .cg-ev-nombre { font-size: 20px; line-height: 1.08; }
  /* El reloj baja a su propia línea, alineado con el texto: «termina en 2:13:40» de corrido. */
  .cg-ev > .cuenta-atras, .cg-evs:not([data-n="1"]) .cg-ev > .cuenta-atras { flex: 0 0 100%; margin: 2px 0 0; padding-left: 74px; text-align: left; display: flex; align-items: baseline; gap: 8px; font-size: 20px; }
}

/* ==========================================================================
   077 · DEPÓSITOS A PLAZO: DE DÓNDE SALE EL DINERO (José, 6-oct-2026)
   La pantalla solo dejaba depositar con BEKY; José aprobó BEKY y transferencia. Dos botones en el panel verde,
   la fila que «espera su transferencia» y la salida de cada depósito (cancelar / retirar antes de vencer).
   Solo medidas y tokens: ningún color suelto.
   ========================================================================== */
.cg-dep-orig-k { margin-top: 16px; }
.cg-dep-origs { display: flex; gap: 8px; margin-top: 2px; }
.cg-dep-orig { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 8px 10px; border-radius: 7px; cursor: pointer; font: 700 13px var(--fuente); color: var(--cg-texto-verde-2);
  background: color-mix(in srgb, var(--cg-texto) 38%, transparent); border: 1px solid color-mix(in srgb, var(--cg-bronce) 28%, transparent); }
.cg-dep-orig.on { color: var(--cg-marfil); border-color: var(--cg-bronce-claro); background: color-mix(in srgb, var(--cg-bronce-claro) 14%, transparent); box-shadow: inset 0 0 0 1px var(--cg-bronce-claro); }
.cg-dep-orig:focus-visible { outline: 2px solid var(--cg-bronce-claro); outline-offset: 2px; }
.cg-dep-salida { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--cg-texto-2); }
.cg-dep-salida b { color: var(--cg-texto); }
.cg-dep-salida b.cg-dep-bronce { color: var(--cg-bronce-osc); }
button.cg-dep-op.confirmar { border-color: var(--cg-bronce-osc); color: var(--cg-bronce-osc); box-shadow: inset 0 0 0 1px var(--cg-bronce-osc); }
@media (max-width: 900px) {
  .cg-dep-orig { min-height: 44px; }
}

/* ===== 075 · NOCHE DE CALIDAD, segunda pasada (G2 · app del asesor, 6-oct) — coherencia, sin rediseñar. Solo estilos; se agrega al final. ===== */
/* A-18 · Botones: el primario bronce (`.boton.oro`, `.cg-btn-pri`, `.cg-btn.cg-pri`) y el de contorno (`.cg-btn-lin`, `.cg-btn.cg-lin`, `.boton.chico`,
   `.cg-tt-btn`, `.mu-btn-lin`) miden lo mismo en toda la app: radio 7 px, 13 px de letra y 40 px de alto (44 px en pantallas táctiles, el mismo
   corte de 900 px que ya usa este archivo). Quedan fuera, a propósito: los «grandes» (`.grande`, girar la ruleta, la palanca), los de solo icono
   (− / +) y «Enviar» del chat (44 px: va pegado a su campo, que mide eso). El `:where()` deja la base con el peso de `.boton` a secas: las reglas
   propias de cada mesa de juego siguen mandando. */
.boton:where(:not(.grande, .palanca)) { min-height: 40px; padding: 8px 18px; border-radius: var(--r-s); font-size: 13px; line-height: 1.2; }
.boton.chico { min-height: 40px; padding: 8px 14px; font-size: 13px; }
.articulo .acciones .boton, .articulo > .boton { min-height: 40px; }
.cg-btn-pri, .cg-btn-lin, .cg-btn, .cg-btn.cg-chico, .cg-tt-btn, .cg-pn-btn, .mu-pagina .mu-btn-lin, .mu-pagina .mu-btn-mas { min-height: 40px; }
.cg-btn.cg-chico, .cg-tt-btn, .cg-pn-btn { font-size: 13px; }
.cg-btn.cg-chico { padding: 0 14px; }
.cg-reto-c .cg-btn-pri, .cg-reto-c .cg-btn-lin { height: 40px; min-height: 40px; }
.cg-cofre .cg-btn-pri { min-height: 40px; }
.cg-duelo-lanzar .cg-btn-pri { height: 40px; }
.cg-sel-v { height: 40px; }
@media (max-width: 900px) {
  .boton:where(:not(.grande, .palanca)), .boton.chico, .articulo .acciones .boton, .articulo > .boton { min-height: 44px; }
  .cg-btn-pri, .cg-btn-lin, .cg-btn, .cg-btn.cg-chico, .cg-tt-btn, .cg-pn-btn, .mu-pagina .mu-btn-lin, .mu-pagina .mu-btn-mas, .cg-cofre .cg-btn-pri { min-height: 44px; }
  .cg-reto-c .cg-btn-pri, .cg-reto-c .cg-btn-lin, .cg-duelo-lanzar .cg-btn-pri { height: 44px; min-height: 44px; }
  .cg-sel-v { height: 44px; }
}
/* A-17 · Píldoras de filtro (no se tocan las pestañas «carpeta»): `.cg-pil`, `.cg-jor-tab`, las cápsulas y los filtros del muro, y las de la Tienda
   (`#navTienda`, `.cat-chip`) comparten alto (36 px; 44 px en pantallas táctiles: el mínimo que `a11y_018` vigila en `.cat-chip`), letra (13 px) y
   peso (600; la activa, 700). Sobre fondo marfil la activa es siempre la misma: verde oscuro con texto claro (la Tienda deja el degradado bronce).
   Las cápsulas del muro van sobre verde y conservan su activa en marfil. */
.cg-pil, .cg-jor-tab, .cat-chip, #navTienda button, .cg-tmp-bloque .insig-filtros .cg-pil,
.mu-pagina .mu-filtros button, .mu-pagina .mu-seg > button, .mu-pagina .mu-seg-sel { min-height: 36px; padding-top: 0; padding-bottom: 0; font-size: 13px; font-weight: 600; line-height: 1.2; }
.cat-chip, #navTienda button { background: transparent; border-color: color-mix(in srgb, var(--cg-bronce-osc) 35%, transparent); color: var(--cg-texto-2); box-shadow: none; }
.cat-chip:hover, #navTienda button:hover { border-color: var(--cg-bronce-osc); color: var(--cg-texto); }
.cg-pil.on, .cg-jor-tab.activo, .mu-pagina .mu-filtros button.on, .cat-chip.activo, .cat-chip.activo:hover, #navTienda button.activo, #navTienda button.activo:hover,
.cg-tmp-bloque .insig-filtros .cg-pil.on { background: var(--cg-verde); border-color: var(--cg-verde); color: var(--cg-bronce-claro); font-weight: 700; box-shadow: none; }
.mu-pagina .mu-seg > button.on, .mu-pagina .mu-seg-sel.on { font-weight: 700; }
#navTienda button.activo .globo { background: var(--cg-bronce-claro); color: var(--cg-verde); }
@media (max-width: 900px) {
  .cg-pil, .cg-jor-tab, .cat-chip, #navTienda button, .cg-tmp-bloque .insig-filtros .cg-pil,
  .mu-pagina .mu-filtros button, .mu-pagina .mu-seg > button, .mu-pagina .mu-seg-sel { min-height: 44px; }
}
/* A-20 · Títulos de sección en Cormorant: dos tamaños y nada más, en todos los anchos. Nivel 1 (28 px): el título de una sección o de la tarjeta que
   manda en su pestaña. Nivel 2 (22 px): el de un bloque o cajita dentro de una sección. Los títulos de portada (`h1`, héroes) no se tocan. Los que
   llevaban el tamaño escrito en el HTML (Depósitos a plazo) lo pierden en casino.js y app.html: los de nivel 2 llevan `.cg-sec-2`. */
:root { --cg-tit-1: 28px; --cg-tit-2: 22px; }
.cg-sec, .cg-act-tit, .cg-cab-grande .cg-sec, .cg-retos-cab .cg-sec, .cg-tmp-id .cg-sec, .cg-ruta-nombre, .cg-cofres-izq .cg-sec, .cg-duelos-form .cg-sec,
.cg-bote-izq .cg-sec, .cg-bote-misiones .cg-sec, .mu-pagina .mu-sec, .mu-pagina .mu-cab-grande .mu-sec, .mu-pagina .mu-arena-cab h2, .tarjeta-cab h2,
.pf-sec-cab h2, .cg-tmp-premio-nombre { font-size: var(--cg-tit-1); }
body .cg-ind-cab h2 { font-size: var(--cg-tit-1); }
.cg-sec.cg-sec-2, .cg-cofres-izq .cg-cab-fragmentos .cg-sec, .cg-duelos-lista .cg-sec, .cg-chat-izq .cg-sec, .cg-ins-caja-cab .cg-sec, .cg-ay-sec2,
.mu-pagina .mu-logros-caja .mu-sec { font-size: var(--cg-tit-2); }
body .cg-ind-cab.chica h2 { font-size: var(--cg-tit-2); }
/* A-24 · «Temporada»: la tarjeta de la izquierda se estira a la altura del premio y dejaba ≈ 70 px vacíos al pie. Con `align-items:start` las dos
   tarjetas quedarían de alturas distintas (descuadra); en su lugar las dos cajitas («El pase», «Insignias») crecen hasta el pie. */
@media (min-width: 1101px) {
  .cg-tmp-id.cg-piedra-fondo { display: flex; flex-direction: column; }
  .cg-tmp-id.cg-piedra-fondo .cg-tmp-cajitas { flex: 1 1 auto; }
  .cg-tmp-id.cg-piedra-fondo .cg-interna-c { display: flex; flex-direction: column; justify-content: center; }
}
/* Mi ruta en celular y tableta: el rótulo de cada tarjeta (la descripción de la campaña, en mayúsculas) se cortaba con «…» («DÓLARES COBRADOS Y
   VERIFI…»). Baja a dos o tres renglones (tope de tres, por si la descripción es muy larga), y la frase de debajo de «En camino» parte en vez de
   llegar al borde de la tarjeta (su caja no encogía dentro de la fila). */
.cg-ruta-esp > div { min-width: 0; }
@media (max-width: 820px) {
  .cg-ruta-card .campana-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; white-space: normal; overflow: hidden; text-overflow: clip; overflow-wrap: anywhere; }
  .cg-ruta-card > .cg-ruta-cab .cg-ruta-k.campana-desc { letter-spacing: 1.6px; line-height: 1.4; }
  .cg-ruta-card .cg-ruta-esp .campana-desc { -webkit-line-clamp: 4; line-clamp: 4; line-height: 1.45; }
}
/* «Tu constancia»: «DÍAS SEGUIDOS» y «TU RACHA PAGA» a la misma altura. El bloque de la derecha deja de ser una celda de dos filas centrada:
   su rótulo va en la fila de los rótulos y su cifra en la de las cifras. */
.cg-racha-fila { grid-template-areas: "llama etq pagak" "llama dias pagav" "estado estado estado"; }
.cg-racha-paga { display: contents; }
.cg-racha-paga .cg-k { grid-area: pagak; align-self: end; margin: 0; text-align: right; }
#cajaRacha .racha-mult { grid-area: pagav; align-self: start; text-align: right; }
/* Tableta (768 px): las seis pestañas de Global Party pasaban 54 px del ancho y «Bote del equipo» quedaba cortada; con menos relleno caben las seis.
   Y la descripción de cada artículo de la Tienda (un renglón con «…», completa solo por `title`, que en pantalla táctil no existe) baja a dos. */
@media (min-width: 601px) and (max-width: 900px) {
  .cgp-pestanas > a, .cgp-pestanas > button { padding: 0 9px; gap: 7px; }
}
@media (max-width: 900px) {
  .articulo-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
}
/* A-17 en celular: con 13 px las cápsulas del muro («Por dólares · Por matrículas · Otra medida ▾») pasaban unos píxeles del ancho; menos relleno y caben. */
@media (max-width: 480px) {
  .mu-pagina .mu-seg > button, .mu-pagina .mu-seg-sel { padding-left: 7px; padding-right: 7px; }
}

/* ---- 075 · cierre de la noche: lo que marcó la regresión final (R1) ------------------------------------
   Menú de la cuenta sin emojis y con su contador en píldora; cierre del chat tocable; «Giro gratis» con el
   alto de los demás botones; rótulos de «Tus duelos» y la línea de vida de los bonos sin salirse en celular;
   Solo medidas y tokens: ningún color suelto. */
.menu-lista button { min-height: 40px; }
.menu-lista .globo { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.noti-ico { display: inline-flex; align-items: center; color: var(--oro); }
.chat-icono { min-width: 40px; min-height: 40px; }
#tmGratis { min-height: 40px; }
.cg-interna .cg-k { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .menu-lista button, #tmGratis { min-height: 44px; }
  .chat-icono { min-width: 44px; min-height: 44px; }
}
@media (max-width: 480px) {
  .cg-interna { min-width: 0; }
  .cg-interna .cg-k { letter-spacing: .6px; }
  .cg-vida { min-width: 0; }
  .cg-vida .cg-p { letter-spacing: 0; }
  .cg-vida .cg-t { min-width: 10px; }
}

/* P-64 · simulador «¿Cuánto cobro si vendo más?» */
.fin-sim { margin: 4px 0 14px; border: 1px solid var(--linea-suave); border-radius: var(--r-md); padding: 10px 12px; }
.fin-sim > summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.fin-sim-cuerpo { display: grid; gap: 8px; margin-top: 10px; }
.fin-sim-barra { display: flex; align-items: center; gap: 12px; }
.fin-sim-barra input[type=range] { flex: 1 1 auto; min-width: 0; min-height: 40px; accent-color: var(--oro); }
.fin-sim-barra output { min-width: 96px; text-align: right; font-weight: 700; }
.fin-sim-tabla { width: 100%; border-collapse: collapse; }
.fin-sim-tabla td { padding: 6px 4px; border-bottom: 1px solid var(--linea-suave); }
.fin-sim-tabla td.num { text-align: right; white-space: nowrap; }
.fin-sim-tabla tr.tot td { font-weight: 800; border-bottom: 0; }
.fin-sim-rango { padding: 8px 10px; border-radius: var(--r-md); background: var(--superficie-2, rgba(179,148,92,.12)); }

/* P64 · A3 · iconos de línea propios (iconoLinea() de comun.js): miden lo que el texto de al lado y heredan su color. */
.ico-l { display: inline-block; width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }