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