/* ---------- 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; }
}