/* ═══════════════════════════════════════════════════════════════════════════
   cd-aurora.css — CoinDrop · sistema visual único
   ───────────────────────────────────────────────────────────────────────────
   Un solo archivo que define cómo se ve TODO en la plataforma: los botones
   (familia Aurora), los iconos (acabado Veta) y el menú (montaje Cortina).
   Se carga en todas las páginas, así que no puede haber una pantalla con el
   diseño viejo y otra con el nuevo.

   Paleta: oro (voz principal) + violeta (segunda). Nada más.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --au-o:#f5c842; --au-o-hi:#ffe9a8; --au-o-lo:#c9870f; --au-o-gl:rgba(245,200,66,.30);
  --au-v:#9d6bff; --au-v-hi:#c9acff; --au-v-lo:#6a34c8; --au-v-gl:rgba(157,107,255,.30);
}

/* El ángulo del gradiente que gira. Sin esto el borde no se anima. */
@property --au-ang{ syntax:'<angle>'; initial-value:0deg; inherits:false }
@keyframes au-gira{ to{ --au-ang:360deg } }

/* ── BOTONES · familia AURORA ──────────────────────────────────────────────
   El borde es un gradiente cónico que gira despacio. Al pasar el cursor
   acelera y el texto se enciende. Se conservan los nombres de clase que ya
   usa la plataforma (.btn, .btn-ghost…) para no tocar 189 llamadas: lo que
   cambia es de qué están hechos. */
.btn,.btn-sm,.btn-aff,.btn-live-big,.btn-outline-big,.btn-crystal,.btn-cd,.btn-main,.btn-primary,.btn-gold,.btn-acc,.btn-g,.btn-d,.btn-p,.pro-cta,.pro-plan-btn,.mj-btn,.dcw-btn,.sec-cta,.rg-lk-btn,.rg-more-btn,.rg-btn-play,.rg-btn-ghost,.cdck-btn,.rec-btn,.cdfg-btn,.sa-btn,.gi-btn,.snd-btn,.ob-cta,.cdv-btn,.gd-dl-btn,.dp-plan-cta,.dr-cta,.pf-plan-cta,.cd-connect-btn,.tt-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:9px;cursor:pointer;isolation:isolate;white-space:nowrap;
  font-family:var(--fd,'Plus Jakarta Sans',system-ui,sans-serif);font-weight:700;letter-spacing:-.005em;
  background:var(--bg,#09090f);color:var(--au-o-hi);
  transition:color .25s,transform .2s cubic-bezier(.3,1.3,.5,1)}
.btn{padding:11px 20px;font-size:13.5px}
/* Los botones que no traen medida propia se quedaban con el tamaño por defecto
   del navegador y descuadraban. Se les da el mismo cuerpo que a .btn. */
.btn-crystal,.btn-cd,.btn-main,.btn-primary,.btn-gold,.btn-acc,.btn-g,.btn-d,.btn-p,
.pro-cta,.pro-plan-btn,.mj-btn,.dcw-btn,.sec-cta,.rg-lk-btn,.rg-more-btn,.rg-btn-play,
.rg-btn-ghost,.cdck-btn,.rec-btn,.cdfg-btn,.sa-btn,.gi-btn,.snd-btn,.ob-cta,.cdv-btn,
.gd-dl-btn,.dp-plan-cta,.dr-cta,.pf-plan-cta,.cd-connect-btn,.tt-btn{
  padding:11px 20px;font-size:13.5px;line-height:1.25}
.btn-sm{padding:7px 13px;font-size:11.5px;border-radius:7px}
.btn-aff{width:100%;padding:9px;font-size:11.5px}
.btn-live-big,.btn-outline-big{padding:13px 26px;font-size:15px}

.btn::before,.btn-sm::before,.btn-aff::before,.btn-live-big::before,.btn-outline-big::before,.btn-crystal::before,.btn-cd::before,.btn-main::before,.btn-primary::before,.btn-gold::before,.btn-acc::before,.btn-g::before,.btn-d::before,.btn-p::before,.pro-cta::before,.pro-plan-btn::before,.mj-btn::before,.dcw-btn::before,.sec-cta::before,.rg-lk-btn::before,.rg-more-btn::before,.rg-btn-play::before,.rg-btn-ghost::before,.cdck-btn::before,.rec-btn::before,.cdfg-btn::before,.sa-btn::before,.gi-btn::before,.snd-btn::before,.ob-cta::before,.cdv-btn::before,.NOAPLICA::before,.gd-dl-btn::before,.dp-plan-cta::before,.dr-cta::before,.pf-plan-cta::before,.cd-connect-btn::before,.tt-btn::before{
  content:'';position:absolute;inset:-1.5px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from var(--au-ang),
    var(--au-o),var(--au-o-hi) 12%,var(--au-v) 34%,transparent 52%,var(--au-o) 100%);
  animation:au-gira 5.5s linear infinite;opacity:.75;transition:opacity .3s}
.btn::after,.btn-sm::after,.btn-aff::after,.btn-live-big::after,.btn-outline-big::after,.btn-crystal::after,.btn-cd::after,.btn-main::after,.btn-primary::after,.btn-gold::after,.btn-acc::after,.btn-g::after,.btn-d::after,.btn-p::after,.pro-cta::after,.pro-plan-btn::after,.mj-btn::after,.dcw-btn::after,.sec-cta::after,.rg-lk-btn::after,.rg-more-btn::after,.rg-btn-play::after,.rg-btn-ghost::after,.cdck-btn::after,.rec-btn::after,.cdfg-btn::after,.sa-btn::after,.gi-btn::after,.snd-btn::after,.ob-cta::after,.cdv-btn::after,.NOAPLICA::after,.gd-dl-btn::after,.dp-plan-cta::after,.dr-cta::after,.pf-plan-cta::after,.cd-connect-btn::after,.tt-btn::after{
  content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;background:var(--bg,#09090f)}

.btn:hover,.btn-sm:hover,.btn-aff:hover,.btn-live-big:hover,.btn-outline-big:hover,.btn-crystal:hover,.btn-cd:hover,.btn-main:hover,.btn-primary:hover,.btn-gold:hover,.btn-acc:hover,.btn-g:hover,.btn-d:hover,.btn-p:hover,.pro-cta:hover,.pro-plan-btn:hover,.mj-btn:hover,.dcw-btn:hover,.sec-cta:hover,.rg-lk-btn:hover,.rg-more-btn:hover,.rg-btn-play:hover,.rg-btn-ghost:hover,.cdck-btn:hover,.rec-btn:hover,.cdfg-btn:hover,.sa-btn:hover,.gi-btn:hover,.snd-btn:hover,.ob-cta:hover,.cdv-btn:hover,.NOAPLICA:hover,.gd-dl-btn:hover,.dp-plan-cta:hover,.dr-cta:hover,.pf-plan-cta:hover,.cd-connect-btn:hover,.tt-btn:hover{
  color:#fff;transform:translateY(-2px)}
.btn:hover::before,.btn-sm:hover::before,.btn-aff:hover::before,.btn-live-big:hover::before,.btn-outline-big:hover::before,.btn-crystal:hover::before,.btn-cd:hover::before,.btn-main:hover::before,.btn-primary:hover::before,.btn-gold:hover::before,.btn-acc:hover::before,.btn-g:hover::before,.btn-d:hover::before,.btn-p:hover::before,.pro-cta:hover::before,.pro-plan-btn:hover::before,.mj-btn:hover::before,.dcw-btn:hover::before,.sec-cta:hover::before,.rg-lk-btn:hover::before,.rg-more-btn:hover::before,.rg-btn-play:hover::before,.rg-btn-ghost:hover::before,.cdck-btn:hover::before,.rec-btn:hover::before,.cdfg-btn:hover::before,.sa-btn:hover::before,.gi-btn:hover::before,.snd-btn:hover::before,.ob-cta:hover::before,.cdv-btn:hover::before,.NOAPLICA:hover::before,.gd-dl-btn:hover::before,.dp-plan-cta:hover::before,.dr-cta:hover::before,.pf-plan-cta:hover::before,.cd-connect-btn:hover::before,.tt-btn:hover::before{opacity:1;animation-duration:1.6s}
.btn:active,.btn-sm:active,.btn-aff:active,.btn-live-big:active,.btn-outline-big:active,.btn-crystal:active,.btn-cd:active,.btn-main:active,.btn-primary:active,.btn-gold:active,.btn-acc:active,.btn-g:active,.btn-d:active,.btn-p:active,.pro-cta:active,.pro-plan-btn:active,.mj-btn:active,.dcw-btn:active,.sec-cta:active,.rg-lk-btn:active,.rg-more-btn:active,.rg-btn-play:active,.rg-btn-ghost:active,.cdck-btn:active,.rec-btn:active,.cdfg-btn:active,.sa-btn:active,.gi-btn:active,.snd-btn:active,.ob-cta:active,.cdv-btn:active,.NOAPLICA:active,.gd-dl-btn:active,.dp-plan-cta:active,.dr-cta:active,.pf-plan-cta:active,.cd-connect-btn:active,.tt-btn:active{
  transform:translateY(0) scale(.985)}
.btn:disabled,.btn-sm:disabled,.btn-aff:disabled,.btn-live-big:disabled,.btn-outline-big:disabled,.btn-crystal:disabled,.btn-cd:disabled,.btn-main:disabled,.btn-primary:disabled,.btn-gold:disabled,.btn-acc:disabled,.btn-g:disabled,.btn-d:disabled,.btn-p:disabled,.pro-cta:disabled,.pro-plan-btn:disabled,.mj-btn:disabled,.dcw-btn:disabled,.sec-cta:disabled,.rg-lk-btn:disabled,.rg-more-btn:disabled,.rg-btn-play:disabled,.rg-btn-ghost:disabled,.cdck-btn:disabled,.rec-btn:disabled,.cdfg-btn:disabled,.sa-btn:disabled,.gi-btn:disabled,.snd-btn:disabled,.ob-cta:disabled,.cdv-btn:disabled,.NOAPLICA:disabled,.gd-dl-btn:disabled,.dp-plan-cta:disabled,.dr-cta:disabled,.pf-plan-cta:disabled,.cd-connect-btn:disabled,.tt-btn:disabled{/* Antes bajaba a .4 y el texto era ilegible: solo se distinguía al pasar el
   ratón. Se sube el contraste manteniendo claro que está inactivo. */
  opacity:.62;cursor:not-allowed;transform:none;filter:grayscale(.35)}
.btn:disabled::before,.btn-sm:disabled::before,.btn-aff:disabled::before,.btn-live-big:disabled::before,.btn-outline-big:disabled::before,.btn-crystal:disabled::before,.btn-cd:disabled::before,.btn-main:disabled::before,.btn-primary:disabled::before,.btn-gold:disabled::before,.btn-acc:disabled::before,.btn-g:disabled::before,.btn-d:disabled::before,.btn-p:disabled::before,.pro-cta:disabled::before,.pro-plan-btn:disabled::before,.mj-btn:disabled::before,.dcw-btn:disabled::before,.sec-cta:disabled::before,.rg-lk-btn:disabled::before,.rg-more-btn:disabled::before,.rg-btn-play:disabled::before,.rg-btn-ghost:disabled::before,.cdck-btn:disabled::before,.rec-btn:disabled::before,.cdfg-btn:disabled::before,.sa-btn:disabled::before,.gi-btn:disabled::before,.snd-btn:disabled::before,.ob-cta:disabled::before,.cdv-btn:disabled::before,.NOAPLICA:disabled::before,.gd-dl-btn:disabled::before,.dp-plan-cta:disabled::before,.dr-cta:disabled::before,.pf-plan-cta:disabled::before,.cd-connect-btn:disabled::before,.tt-btn:disabled::before{animation-play-state:paused;opacity:.3}

/* Pasivo · violeta */
.btn-ghost,.btn-outline-big,.btn-red,.btn-g,.rg-btn-ghost,.sa-btn-ghost,.dcw-btn-g,.dcw-btn-pur,.btn-p{color:var(--au-v-hi)}
.btn-ghost::before,.btn-outline-big::before,.btn-red::before,.btn-g::before,.rg-btn-ghost::before,.sa-btn-ghost::before,.dcw-btn-g::before,.dcw-btn-pur::before,.btn-p::before{
  background:conic-gradient(from var(--au-ang),
    var(--au-v),var(--au-v-hi) 14%,var(--au-o) 36%,transparent 54%,var(--au-v) 100%)}
/* Sutil · gris, sin color de marca */
.btn-sutil{color:var(--tx2,#8888aa);font-weight:600}
.btn-sutil::before{background:conic-gradient(from var(--au-ang),
  rgba(255,255,255,.22),transparent 40%,rgba(255,255,255,.22));animation-duration:9s}
.btn-sutil:hover{color:var(--tx,#f0f0f8)}
/* Fantasma · sin contorno hasta que se toca */
.btn-fantasma{color:var(--tx3,#44445a);font-weight:600}
.btn-fantasma::before{opacity:0}
.btn-fantasma:hover{color:var(--au-o)}
.btn-fantasma:hover::before{opacity:.5}


/* Botones que en el diseño original ocupaban todo el ancho de su tarjeta.
   Al retirar sus reglas antiguas perdían el ancho y se encogían: se restituye. */
.btn-aff,.pro-cta,.pro-plan-btn,.dr-cta,.cdv-btn,.dp-plan-cta,.pf-plan-cta,
.sec-cta,.cdfg-btn,.rec-btn,.mj-btn{width:100%}
.dcw-btn,.cdck-btn{width:100%}

button:focus-visible,a:focus-visible{outline:2px solid var(--au-o-hi);outline-offset:3px}

/* ── ICONOS · acabado VETA ─────────────────────────────────────────────────
   Trazo fino; el detalle de cada icono va recorrido por una veta que pasa del
   oro al violeta. Al pasar el cursor, el icono desprende un halo. */
.ic-veta{/* El tamaño se hereda del contexto: un icono dentro de una etiqueta de
   11px sale pequeño y dentro de un botón de 15px sale mayor. Antes se forzaba a
   22px y eso descuadraba los que en el diseño original medían 12 o 13. */
  width:1.25em;height:1.25em;display:inline-block;vertical-align:-.16em;
  flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:color .28s,transform .28s,filter .28s}
.ic-veta .ac{stroke:url(#cdVeta)}
.ic-veta .ac[fill]{fill:url(#cdVeta);stroke:none}
.ic-veta .dt{stroke-width:1;opacity:.45}
:hover > .ic-veta,.ic-veta:hover{filter:drop-shadow(0 0 6px var(--au-o-gl))}

/* ── MENÚ · montaje CORTINA ────────────────────────────────────────────────
   Sin barra fija ni cajas: la galleta vive arriba y los accesos caen desde
   ella en cascada, guiados por una línea de luz que desciende con ellos. */
.cdm-gall{position:relative;width:38px;height:38px;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;border-radius:10px;transition:background .25s;flex:0 0 auto}
.cdm-gall:hover{background:rgba(245,200,66,.08)}
.cdm-gall i{position:absolute;left:10px;height:1.8px;width:18px;border-radius:2px;background:var(--au-o);
  transition:transform .45s cubic-bezier(.6,-.3,.3,1.4),opacity .3s,width .35s}
.cdm-gall i:nth-child(1){top:13px}
.cdm-gall i:nth-child(2){top:18.6px;width:12px}
.cdm-gall i:nth-child(3){top:24.2px}
.cdm-gall.on i:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.cdm-gall.on i:nth-child(2){opacity:0;width:0}
.cdm-gall.on i:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

.cdm-scrim{position:fixed;inset:0;background:rgba(6,6,12,.55);
  opacity:0;pointer-events:none;visibility:hidden;z-index:1400;
  transition:opacity .4s,visibility 0s linear .4s}
body.cdm-open .cdm-scrim{backdrop-filter:blur(3px)}
body.cdm-open .cdm-scrim{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .4s,visibility 0s}

.cdm{position:fixed;top:var(--cdm-top,56px);left:0;width:min(300px,86vw);z-index:1450;
  padding:8px 22px 22px;
  /* Cerrado: ni se ve ni intercepta el ratón. Antes quedaba una zona muerta
     arriba a la izquierda que tapaba la barra superior. */
  pointer-events:none;visibility:hidden;opacity:0;
  transition:visibility 0s linear .45s,opacity .25s}
body.cdm-open .cdm{visibility:visible;opacity:1;transition:visibility 0s,opacity .2s}
.cdm .cdm-ln{position:absolute;left:28px;top:0;width:1px;height:0;
  background:linear-gradient(var(--au-o),var(--au-v),transparent);
  transition:height .6s cubic-bezier(.4,0,.2,1)}
body.cdm-open .cdm .cdm-ln{height:calc(100% - 16px)}
.cdm a,.cdm button{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:10px 0 10px 24px;color:var(--tx2,#8888aa);font-family:var(--fb,'Inter',system-ui,sans-serif);font-size:13.5px;font-weight:500;
  text-decoration:none;position:relative;background:none;border:0;cursor:pointer;
  opacity:0;transform:translateY(-14px);
  transition:opacity .42s,transform .5s cubic-bezier(.2,1.1,.3,1),color .25s}
body.cdm-open .cdm a,body.cdm-open .cdm button{opacity:1;transform:none;pointer-events:auto}
.cdm a svg,.cdm button svg{width:19px;height:19px;color:var(--tx3,#44445a);flex:0 0 auto;transition:.25s}
.cdm a::before,.cdm button::before{content:'';position:absolute;left:8px;top:50%;width:0;height:1px;
  background:var(--au-o);transform:translateY(-50%);transition:width .3s}
.cdm a:hover,.cdm button:hover{color:var(--tx,#f0f0f8)}
.cdm a:hover svg,.cdm button:hover svg{color:var(--au-o)}
.cdm a:hover::before,.cdm button:hover::before{width:12px}
.cdm .on{color:var(--au-o-hi)}
.cdm .on svg{color:var(--au-o)}
.cdm .on::before{width:12px;box-shadow:0 0 8px var(--au-o)}
.cdm small{display:block;font-size:10.5px;color:var(--tx3,#44445a);font-weight:400;margin-top:1px}
.cdm-sep{height:1px;background:rgba(255,255,255,.07);margin:8px 0 8px 24px}


/* ── BLINDAJE DE LA CORTINA ─────────────────────────────────────────────────
   Los accesos conservan sus clases originales (sb-item, sb-parent) porque el
   sistema de submenús las necesita. Al eliminar el riel quedaron reglas suyas
   con !important —width:48px, padding:0— que amontonaban el menú. Aquí se fija
   la maquetación con especificidad suficiente para que eso no vuelva a pasar. */
nav.cdm{display:block}
nav.cdm > button,nav.cdm > a,
nav.cdm .sb-item,nav.cdm .sb-parent{
  display:flex !important;align-items:center !important;justify-content:flex-start !important;
  width:100% !important;height:auto !important;min-height:0 !important;
  margin:0 !important;padding:10px 0 10px 24px !important;
  border-radius:0 !important;background:none !important;border:0 !important;
  text-align:left !important;box-shadow:none !important;
  font-family:var(--fb,'Inter',sans-serif) !important;font-size:13.5px !important;
  font-weight:500 !important;line-height:1.25 !important;color:var(--tx2,#8888aa)}
nav.cdm > button > span,nav.cdm > a > span{
  display:block !important;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
nav.cdm small{display:block !important;font-size:10.5px;color:var(--tx3,#44445a);
  font-weight:400;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav.cdm .ic-veta,nav.cdm svg{width:19px !important;height:19px !important;flex:0 0 auto}
/* el acceso con submenú abierto */
nav.cdm .fly-active{color:var(--au-o-hi) !important}
nav.cdm .fly-active svg{color:var(--au-o) !important}
/* cabecera del submenú (su regla vivía en el CSS del riel) */
#sb-flyout .sb-fly-head{display:flex;align-items:center;gap:9px}
#sb-flyout .sb-fly-hico{display:inline-flex;width:20px;height:20px;color:var(--au-o)}
#sb-flyout .sb-fly-hico svg{width:20px;height:20px}


/* ── ORDEN DE CAPAS ────────────────────────────────────────────────────────
   El submenú vivía en el nivel 300, heredado de cuando colgaba del riel. Con la
   Cortina (1450) y su velo difuminado (1400) delante, quedaba enterrado detrás
   del difuminado. Se eleva por encima de todo el menú. */
#sb-flyout{z-index:1500 !important}
/* Fondo propio para que el submenú se lea sobre el velo */
#sb-flyout{background:linear-gradient(160deg,rgba(28,24,52,.98),rgba(12,12,22,.97)) !important;
  backdrop-filter:blur(18px) saturate(1.1)}


/* Con el menú abierto, la galleta debe seguir siendo pulsable para cerrar.
   Vive dentro de la barra superior (nivel 50), así que el velo la tapaba: se
   eleva la barra por encima y se atenúa todo lo demás que hay en ella. */
/* Por encima del velo (1400) para que la galleta se pueda pulsar, pero POR
   DEBAJO del menú (1450): antes lo tapaba y los primeros accesos —Inicio,
   Lives— no recibían el clic. */
body.cdm-open #cd-topbar,body.cdm-open .top,body.cdm-open header{z-index:1420 !important}
body.cdm-open #cd-topbar > *:not(.cdm-gall),
body.cdm-open .top > *:not(.cdm-gall),
body.cdm-open header > *:not(.cdm-gall){opacity:.28;pointer-events:none;transition:opacity .3s}
body.cdm-open .cdm-gall{background:rgba(245,200,66,.12)}


/* ── CONTROLES DE LA BARRA SUPERIOR ────────────────────────────────────────
   App, Conectar y el resto de la barra son controles compactos, no botones de
   formulario. Al aplicarles la medida de botón (11px 20px) el icono y el texto
   ya no cabían. Conservan el contorno Aurora pero con su cuerpo original. */
.cd-connect-btn,.tt-btn{
  padding:0 12px !important;font-size:12px !important;height:34px;
  gap:6px !important;border-radius:9px !important}
.cd-connect-btn svg,.tt-btn svg{width:15px !important;height:15px !important;flex:0 0 auto}
.cd-connect-btn span{white-space:nowrap}

/* App e idioma son controles con diseño propio (definido en el bloque
   «Fase B» del index). Aurora les imponía cuerpo de botón genérico y los
   descuadraba.

   FIX RAÍZ (2026-07-27) — «el icono de descarga se ve asqueroso».
   El parche anterior era peor que la enfermedad: usaba
     padding:revert !important; height:revert !important;
     border-radius:revert !important; gap:revert !important;
   y en un <div> `revert` no devuelve al estilo del sitio, devuelve al del
   NAVEGADOR: padding 0, height auto, border-radius 0, gap normal. Es decir,
   borraba el redondeo de 13px, el fondo y el respiro interno… pero NO tocaba
   `border:1px` ni `width:40px`, que sí están en el index. Resultado: una caja
   rectangular con borde visible, sin fondo, con el texto pegado a los bordes
   y la bandera aplastada. Justo lo de la captura.
   Ahora Aurora simplemente NO se mete con estos tres: se limita a anular su
   propio decorado (::before/::after) y deja que mande el diseño del index. */
.cd-ctl::before,.cd-dl-btn::before,.cd-lang-btn::before,
.cd-ctl::after,.cd-dl-btn::after,.cd-lang-btn::after{content:none !important;display:none !important}
/* Los tamaños de icono y bandera se fijaron aquí a base de !important para
   ganarle al parche `revert` de arriba. Retirado ese parche, estas reglas ya
   sólo estorban: bloqueaban cualquier ajuste hecho desde el propio bloque de
   diseño del index (que es donde vive este componente). El tamaño del icono y
   el recorte de la bandera se definen ahora en «Fase B · Selectores de
   tema/idioma» del index, sin !important y en un solo sitio. */


/* ═══════════════════════════════════════════════════════════════════════════
   BARRAS DE DESPLAZAMIENTO · una sola, y donde toca
   ───────────────────────────────────────────────────────────────────────────
   Había páginas con dos y hasta tres barras haciendo lo mismo: la de la página,
   la de un contenedor que la envolvía entera y la de un panel interior. Aquí se
   deja UNA sola para la página y se quitan las de los contenedores que sólo
   sirven de maquetación. Las listas y los modales conservan la suya, que ahí sí
   tiene sentido.
   ═══════════════════════════════════════════════════════════════════════════ */
/* NO se toca el desbordamiento de ningún contenedor. Intenté quitar barras
   forzando overflow en los contenedores de maquetación y rompí la colocación
   del pie de página y de los elementos posicionados: esos contenedores crean
   contextos de los que dependen otras piezas. Aquí sólo se pinta la barra. */

/* ── la barra ─────────────────────────────────────────────────────────────
   FIX RAÍZ (2026-07-27) — «barras asquerosas con flechitas doradas».
   Aquí había DOS declaraciones que se peleaban y ganaba la peor:

     *{scrollbar-width:thin;scrollbar-color:<pulgar> transparent}
     *:hover{scrollbar-color:var(--au-o) rgba(255,255,255,.06)}

   1) En Chromium (121+), en cuanto un elemento declara `scrollbar-color`, el
      navegador IGNORA por completo los pseudo-elementos ::-webkit-scrollbar-*
      de ese elemento y dibuja la barra NATIVA del sistema, sólo teñida. Por eso
      salían con flechas en los extremos (los botones que abajo se mandan
      `display:none` nunca llegaban a aplicarse) y con el canal ancho.
   2) Peor aún: `*:hover` casa con TODOS los ancestros bajo el cursor
      (html, body, .main-area, .card…), así que con mover el ratón por la
      página TODAS las barras se encendían en oro a la vez. De ahí las dos
      barras doradas simultáneas de las capturas.

   Solución: el color estándar se declara SÓLO para navegadores que no tienen
   los pseudo-elementos de WebKit (Firefox), mediante @supports. Chromium,
   Edge y Safari se quedan con el dibujo fino de abajo, sin flechas, y el oro
   aparece únicamente cuando el cursor toca la barra de verdad. */
@supports not selector(::-webkit-scrollbar-thumb){
  *{scrollbar-width:thin;scrollbar-color:rgba(157,107,255,.42) transparent}
  *:hover{scrollbar-color:rgba(245,166,35,.62) rgba(255,255,255,.05)}
}

/* GROSOR (petición 2026-07-27): fina mientras no la tocas, EL DOBLE de gruesa
   cuando la señalas o la arrastras. El truco es que el CANAL mide siempre
   14 px y lo que cambia es el borde transparente del pulgar:
       reposo   borde 5 px  ->  14 - 5*2 =  4 px de pulgar visible
       hover    borde 3 px  ->  14 - 3*2 =  8 px  (exactamente el doble)
       arrastre borde 3 px  ->            =  8 px  (se mantiene, solo se enciende)
   Al no cambiar el ancho del canal, el contenido NO se desplaza ni un píxel
   cuando la barra engorda: es lo que hace que el gesto se sienta sólido. */
::-webkit-scrollbar{width:14px;height:14px;background:transparent}
/* Sin las flechas de los extremos: sobran y ensucian. */
::-webkit-scrollbar-button{display:none !important;width:0;height:0}
::-webkit-scrollbar-track{background:transparent;border:none}
::-webkit-scrollbar-thumb{
  border:5px solid transparent;background-clip:padding-box;border-radius:99px;
  background-color:rgba(157,107,255,.34);
  transition:background-color .16s ease,border-width .16s ease}
::-webkit-scrollbar-thumb:hover{
  border-width:3px;
  background-color:rgba(245,166,35,.62);
  background-clip:padding-box}
::-webkit-scrollbar-thumb:active{
  border-width:3px;
  background-color:rgba(245,200,66,.9);
  background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}


/* Estas dos se declaraban pero nunca se definieron: los elementos que debían
   brillar y latir se quedaban quietos. Se recuperan con el lenguaje del sistema. */
@keyframes cd-shimmer{
  0%{transform:translateX(-120%) skewX(-14deg);opacity:0}
  18%{opacity:.55}
  82%{opacity:.55}
  100%{transform:translateX(220%) skewX(-14deg);opacity:0}}
@keyframes cd-live-pulse{
  0%{box-shadow:0 0 0 0 rgba(245,200,66,.55)}
  70%{box-shadow:0 0 0 9px rgba(245,200,66,0)}
  100%{box-shadow:0 0 0 0 rgba(245,200,66,0)}}

@media (prefers-reduced-motion:reduce){
  .btn::before,.btn-sm::before,.btn-aff::before,.btn-live-big::before,.btn-outline-big::before,.btn-crystal::before,.btn-cd::before,.btn-main::before,.btn-primary::before,.btn-gold::before,.btn-acc::before,.btn-g::before,.btn-d::before,.btn-p::before,.pro-cta::before,.pro-plan-btn::before,.mj-btn::before,.dcw-btn::before,.sec-cta::before,.rg-lk-btn::before,.rg-more-btn::before,.rg-btn-play::before,.rg-btn-ghost::before,.cdck-btn::before,.rec-btn::before,.cdfg-btn::before,.sa-btn::before,.gi-btn::before,.snd-btn::before,.ob-cta::before,.cdv-btn::before,.NOAPLICA::before,.gd-dl-btn::before,.dp-plan-cta::before,.dr-cta::before,.pf-plan-cta::before,.cd-connect-btn::before,.tt-btn::before{animation:none}
  .cdm a,.cdm button,.cdm .cdm-ln{transition-duration:.01ms}
}

/* ═══════════════════════════════════════════════════════════════════════════
   NORMALIZACIÓN DE ICONOS
   ───────────────────────────────────────────────────────────────────────────
   La plataforma tenía 310 iconos dibujados a mano, repartidos por el HTML y el
   JavaScript, con CATORCE grosores de trazo distintos (de 1.5 a 3.2). El sprite
   Veta solo alcanza a los que se usan con <use>; estos otros quedaban fuera.

   Esta regla los alinea a todos de golpe: el CSS gana a los atributos del SVG,
   así que basta con declararlo aquí para que 310 iconos adopten el acabado Veta
   sin tocar 310 sitios (y sin riesgo de romper ninguno).
   ═══════════════════════════════════════════════════════════════════════════ */
svg[viewBox="0 0 24 24"],
svg[viewBox="0 0 20 20"],
svg[viewBox="0 0 22 22"]{
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:color .28s,filter .28s,transform .28s;
  overflow:visible}

/* El detalle de acento lleva la veta oro→violeta. Aquí sí funciona por CSS
   porque son SVG en línea, no contenido de <use>. */
svg .acc{stroke:url(#cdVeta)}
svg .acc[fill]:not([fill="none"]){fill:url(#cdVeta);stroke:none}
svg .accf{fill:url(#cdVeta);stroke:none}

/* Al apuntar un elemento interactivo, su icono se tiñe y desprende halo. */
button:hover > svg,a:hover > svg,
button:hover svg[viewBox="0 0 24 24"],a:hover svg[viewBox="0 0 24 24"],
.cdm button:hover svg,.sb-fly-item:hover svg{
  color:var(--au-o);filter:drop-shadow(0 0 6px var(--au-o-gl))}

/* Los iconos gruesos a propósito (marcas, ilustraciones) quedan fuera. */
svg.logo,svg.brand,svg[data-raw],.cd-coin svg,.cd-frame,.ic-veta{stroke-width:inherit}
.ic-veta{stroke-width:1.5}
/* Contextos con medida propia (el em no aplica bien ahí) */
.cdm .ic-veta,.cdm a svg,.cdm button svg{width:19px;height:19px}
#sb-flyout .ic-veta,#sb-flyout .sb-fly-ico svg{width:18px;height:18px}
.btn .ic-veta,.btn-sm .ic-veta{width:1.2em;height:1.2em}

/* ── SUBMENÚS · mismo idioma que la Cortina ──────────────────────────────── */
#sb-flyout{background:linear-gradient(160deg,rgba(24,20,44,.96),rgba(10,10,18,.94)) !important;
  border:1px solid rgba(245,200,66,.20) !important;border-radius:14px !important;
  box-shadow:0 22px 54px rgba(0,0,0,.6),0 0 0 1px rgba(157,107,255,.10) !important;
  backdrop-filter:blur(14px)}
#sb-flyout .sb-fly-head{border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:9px;margin-bottom:6px}
#sb-flyout .sb-fly-t{font-family:var(--fd,'Plus Jakarta Sans',sans-serif);font-weight:700;
  font-size:13px;color:var(--au-o-hi)}
#sb-flyout .sb-fly-prin{font-size:9px;font-weight:800;letter-spacing:.18em;color:var(--au-o);
  background:rgba(245,200,66,.12);border-radius:5px;padding:2px 6px;margin-left:auto}
#sb-flyout .sb-fly-item{position:relative;background:none;border:0;width:100%;text-align:left;
  display:flex;align-items:center;gap:11px;padding:9px 10px 9px 14px;border-radius:9px;
  color:var(--tx2,#8888aa);font-family:var(--fb,'Inter',sans-serif);font-size:12.5px;font-weight:500;
  cursor:pointer;transition:color .22s,background .22s}
#sb-flyout .sb-fly-item::before{content:'';position:absolute;left:2px;top:50%;width:0;height:1px;
  background:var(--au-o);transform:translateY(-50%);transition:width .28s}
#sb-flyout .sb-fly-item:hover{color:var(--tx,#f0f0f8);background:rgba(255,255,255,.04)}
#sb-flyout .sb-fly-item:hover::before{width:8px}
#sb-flyout .sb-fly-ico svg{width:18px;height:18px}

/* ═══════════════════════════════════════════════════════════════════════════
   LA LUZ ES LA MONEDA (27-jul-2026)
   ───────────────────────────────────────────────────────────────────────────
   El panel deja de ser un informe: la pantalla se enciende con la actividad de
   la comunidad. La cifra del día manda sobre todo, las tarjetas pasan a ser
   planos de luz y los regalos caen en lugar de aparecer.
   El podio y las coronas NO se tocan: quedan tal cual.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{ --calor:.55 }   /* 0–1 · lo encendida que está la comunidad ahora mismo */

/* ── el calor de fondo ── */
/* Capa −1: queda por detrás de todo el contenido sin tener que elevar ningún
   contenedor. Elevar .page creaba un contexto que atrapaba modales y menús
   dentro de él, dejándolos por debajo de elementos exteriores. */
#cd-calor{position:fixed;inset:0;pointer-events:none;z-index:-1;transition:opacity 1.2s;
  /* Las masas de luz sobresalen del borde a propósito. Sin este recorte
     provocarían barra horizontal en la página. */
  overflow:hidden}
#cd-calor span{position:absolute;border-radius:50%;display:block}
#cd-calor .b1{left:-8%;top:-14%;width:62%;height:78%;filter:blur(70px);
  background:radial-gradient(circle,rgba(157,107,255,calc(var(--calor)*.26)),transparent 64%);
  animation:cdDerivaA 22s ease-in-out infinite}
#cd-calor .b2{right:-12%;top:4%;width:58%;height:70%;filter:blur(80px);
  background:radial-gradient(circle,rgba(245,200,66,calc(var(--calor)*.18)),transparent 62%);
  animation:cdDerivaB 27s ease-in-out infinite}
#cd-calor .b3{left:26%;bottom:-24%;width:52%;height:60%;filter:blur(90px);
  background:radial-gradient(circle,rgba(157,107,255,calc(var(--calor)*.15)),transparent 62%);
  animation:cdDerivaA 31s ease-in-out infinite reverse}
@keyframes cdDerivaA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5%,7%) scale(1.12)}}
@keyframes cdDerivaB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6%,5%) scale(1.08)}}

/* ── grano: le quita el plástico a los degradados ── */
/* Capa 3: por encima del contenido pero por debajo de menús (1450), modales
   (9999) y avisos, para no velarlos. */
#cd-grano{position:fixed;inset:0;pointer-events:none;z-index:3;opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* ── EL FARO · la cifra del día ── */
.cd-faro{position:relative;padding:34px 0 26px;overflow:hidden}
.cd-faro::before{content:'';position:absolute;left:-6%;top:18%;width:56%;height:80%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(245,200,66,calc(var(--calor)*.30)),transparent 66%);
  filter:blur(58px);animation:cdPulsoFaro 5.4s ease-in-out infinite}
@keyframes cdPulsoFaro{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
.cd-faro > *{position:relative}
.cd-faro .et{font-family:var(--fd,'Plus Jakarta Sans',sans-serif);font-size:10px;font-weight:800;
  letter-spacing:.32em;text-transform:uppercase;color:var(--au-v-hi);margin-bottom:16px;opacity:.85}
.cd-faro .cifra{display:inline-flex;align-items:baseline;gap:13px;
  font-family:var(--fd,'Plus Jakarta Sans',sans-serif);font-weight:800;letter-spacing:-.055em;line-height:.88}
.cd-faro .cifra .n{font-size:clamp(50px,10vw,124px);font-variant-numeric:tabular-nums;
  background:linear-gradient(174deg,#fffdf4 4%,var(--au-o-hi) 24%,var(--au-o) 52%,var(--au-o-lo) 78%,#7a4f04);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 12px 40px rgba(245,200,66,.26))}
.cd-faro .cifra .u{font-size:clamp(13px,1.7vw,20px);font-weight:700;color:var(--tx2,#8888aa);letter-spacing:-.01em}
.cd-faro .sub{margin-top:16px;font-size:14px;color:var(--tx2,#8888aa);max-width:46ch}
.cd-faro .sub b{color:var(--au-o-hi);font-weight:600}

/* ── EL TERMÓMETRO ── */
.cd-term{margin-top:24px;max-width:520px;position:relative}
.cd-term-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;
  font-size:11.5px;color:var(--tx3,#44445a)}
.cd-term-h b{font-family:var(--fd,'Plus Jakarta Sans',sans-serif);font-size:10.5px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tx2,#8888aa)}
.cd-term-p{position:relative;height:7px;border-radius:99px;background:rgba(255,255,255,.05)}
.cd-term-p .f{position:absolute;inset:0 auto 0 0;border-radius:99px;width:0;
  background:linear-gradient(90deg,var(--au-v-lo),var(--au-v) 26%,var(--au-o) 74%,var(--au-o-hi));
  box-shadow:0 0 22px -3px rgba(245,200,66,.5);
  transition:width 1.6s cubic-bezier(.2,.9,.25,1)}
.cd-term-p .m{position:absolute;top:50%;left:0;width:15px;height:15px;border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle at 36% 32%,#fff,var(--au-o-hi) 45%,var(--au-o));
  box-shadow:0 0 0 4px rgba(245,200,66,.14),0 0 22px var(--au-o);
  transition:left 1.6s cubic-bezier(.2,.9,.25,1),transform .5s cubic-bezier(.2,1.6,.4,1) 1.2s}
.cd-term.on .m{transform:translate(-50%,-50%) scale(1)}
.cd-term-n{margin-top:10px;font-size:12px;color:var(--tx3,#44445a)}
.cd-term-n b{color:var(--tx2,#8888aa)}

/* ── PLANOS DE LUZ · las tarjetas dejan de ser cajas ─────────────────────────
   Un filo de luz arriba, sombra profunda debajo y un velo muy leve: flotan
   sobre el fondo en vez de recortarse contra él. */
/* Sin overflow:hidden a propósito: recortaría menús, etiquetas de nivel y
   cualquier pieza que sobresalga de la tarjeta. El filo de luz se redondea solo. */
#page-dashboard .card{position:relative;border-radius:20px;
  background:linear-gradient(168deg,rgba(255,255,255,.042),rgba(255,255,255,.010) 40%,transparent) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.055),
             0 30px 70px -50px #000 !important;
  border:0 !important;backdrop-filter:blur(3px)}
#page-dashboard .card::before{content:'';position:absolute;left:14px;right:14px;top:0;height:1px;z-index:2;
  border-radius:99px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22) 20%,rgba(255,255,255,.06) 60%,transparent)}

/* ── LA LLUVIA · los regalos caen ── */
#page-dashboard .act-row,#page-dashboard .cd-act-row,#page-dashboard .actv-item{
  position:relative;transition:background .25s}
.cd-cae{animation:cdCae .72s cubic-bezier(.22,1.24,.32,1) both}
@keyframes cdCae{
  0%{opacity:0;transform:translateY(-20px)}
  46%{opacity:1;box-shadow:0 0 28px -6px rgba(245,200,66,.45)}
  100%{opacity:1;transform:none;box-shadow:0 0 0 0 transparent}}

/* ── ESTADO VACÍO QUE INVITA ── */
.cd-vacio{position:relative;display:grid;place-items:center;text-align:center;gap:12px;
  padding:30px 22px;border-radius:16px;overflow:hidden;
  background:radial-gradient(90% 80% at 50% 112%,rgba(157,107,255,.16),transparent 62%)}
.cd-vacio::before{content:'';position:absolute;left:50%;bottom:-46px;width:180px;height:180px;
  transform:translateX(-50%);border-radius:50%;filter:blur(18px);pointer-events:none;
  background:radial-gradient(circle,rgba(245,200,66,.24),transparent 62%);
  animation:cdPulsoFaro 3.8s ease-in-out infinite}
.cd-vacio > *{position:relative}
.cd-vacio .t{font-family:var(--fd,'Plus Jakarta Sans',sans-serif);font-weight:800;font-size:16px;letter-spacing:-.02em}
.cd-vacio .s{font-size:12.5px;color:var(--tx2,#8888aa);max-width:250px}

/* Ya no hace falta elevar nada: el calor vive en la capa −1. */
@media (prefers-reduced-motion:reduce){
  #cd-calor span,.cd-faro::before,.cd-vacio::before{animation:none}
}


/* ═══════════════════════════════════════════════════════════════════════════
   RELLENO DE LOS BOTONES · el ::after ya no se come el color propio
   ───────────────────────────────────────────────────────────────────────────
   FIX RAÍZ (auditoría 2026-07-27) — botón «+ Crear boost» oscuro e ilegible,
   y con él una docena más repartidos por toda la plataforma.

   La familia Aurora monta cada botón en tres capas dentro de un
   `isolation:isolate`:
       ::before  inset:-1.5px  z-index:-1  → el aro cónico dorado que gira
       ::after   inset:0       z-index:-1  → un relleno OPACO var(--bg) #09090f
       el texto, encima de todo

   El problema está en el ::after. Dentro de un contexto de apilamiento, un
   hijo con z-index negativo se pinta POR ENCIMA del fondo del propio elemento
   (y por debajo de su texto). Así que da igual quién gane la cascada: si un
   modificador le pone al botón un fondo dorado, el ::after lo tapa con negro
   un instante después. Lo que queda a la vista es exactamente lo que se ve en
   la captura — el aro dorado asomando por los bordes, el cuerpo negro, y el
   texto en #1A1206 (pensado para leerse SOBRE oro) invisible sobre ese negro.

   No era cosa de un botón. Un barrido por los 38 selectores de la familia
   encontró 25 reglas en 10 archivos intentando pintar un relleno que nunca
   llegaba a verse: el CTA «Actualizar a Pro» del panel lateral y del perfil,
   el botón de vincular TikTok de la barra superior, «Descargar PNG» de la
   galería, el aceptar del aviso de cookies, los CTA de seguridad, los de la
   cortina y los de regalos.

   La cura es una línea por selector: `background:inherit` hace que el ::after
   pinte EL MISMO fondo que declara el botón, sea el negro por defecto de
   Aurora o el degradado que le haya puesto su modificador. Cero colores
   duplicados aquí, así que si mañana cambia un degradado en su archivo, esto
   lo sigue sin tocar nada.

   Las variantes translúcidas o «fantasma» (.pro, .ghost, .danger) se quedan
   deliberadamente con el relleno oscuro: ahí el ::after no estorba, es lo que
   les da cuerpo, y heredar un `background:none` las dejaría con el aro cónico
   asomando por todo el interior.
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Relleno SÓLIDO propio (degradados y colores opacos): el ::after lo respeta.
     Estos son los que estaban rotos de verdad: todos llevan texto OSCURO
     (#1A1206, #20160a, #0a0712, #3a2c0c…) porque su diseño da por hecho un
     fondo claro. Sin fondo claro, texto negro sobre negro. — */
.cd-oro::after,
.dp-plan-cta::after,
.pf-plan-cta::after,
.tt-btn::after,
.gd-dl-btn::after,
.sec-cta::after,
.mj-btn.gold::after,
.cdck-btn.gold::after,
.dcw-btn-pur::after, .dcw-btn-g::after,
.rg-lk-btn::after, .rg-btn-play::after, .rg-more-btn::after{
  background:inherit}

/* — Variantes translúcidas y «fantasma»: se quedan como estaban, a propósito.
     Su relleno es un rgba() de baja opacidad y su texto ya es CLARO, así que
     hoy se leen bien; heredarlo dejaría el aro cónico transparentándose por
     todo el interior del botón. Aquí el ::after opaco no es el problema:
     es lo que les da cuerpo. — */
.dp-plan-cta.pro::after,
.pf-plan-cta.pro::after,
.sec-cta.ghost::after, .sec-cta.danger::after,
.mj-btn.green::after, .mj-btn.red::after,
.cdck-btn.ghost::after,
.dcw-btn-ghost::after,
.rg-btn-ghost::after{
  background:var(--bg,#09090f)}