/* ═══════════════════════════════════════════════════════════════════════════
   cd-design-v2.css — CAPA DE PULIDO VISUAL (rediseño aprobado, 11-jul-2026)
   ---------------------------------------------------------------------------
   ADITIVA y REVERSIBLE: se carga al FINAL de la cascada; quitar su <link> en
   index.html devuelve el aspecto anterior al instante. No redefine layout ni
   colores de marca — impone DISCIPLINA sobre lo que ya existe:

     · Radio único:   12px componentes (--r) · 8px pequeños (--r-s) · 16px hojas (--r-l)
     · Dorado = ACCIÓN (botón primario, foco, selección)
     · Violeta = solo PREMIUM (no se toca aquí; la limpieza por-componente
       se hará con capturas reales de Max, no a ciegas)
     · Verde = solo EN VIVO / éxito
     · Superficies mate: borde 1px rgba + brillo interior sutil (cristal robusto)
     · Estados completos: hover / active / focus-visible / disabled
     · Utilidades nuevas: skeletons (.cd-skel*) y estados vacíos (.cd-empty*)

   Todos los selectores de componentes citados EXISTEN en cd-main.css
   (.btn/.btn-sm/.btn-ghost/.card/.camp-card/.modal/.pill…) — verificado.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · Escala de tokens (completa la existente, no la pisa) ─────────────── */
:root{
  --r-s:8px;            /* radio pequeño: chips, tags, mini-botones            */
  --r-l:16px;           /* radio grande: modales, hojas, tarjetas hero          */
  --bd:rgba(255,255,255,.06);       /* borde estándar (igual a --b)             */
  --bd-hi:rgba(255,255,255,.12);    /* borde en hover/foco de superficie        */
  --glow-gold:0 0 0 3px rgba(245,200,66,.22);   /* anillo de foco (acción)      */
  --sh-1:0 2px 10px rgba(0,0,0,.35);            /* sombra suave (reposo)        */
  --sh-2:0 10px 30px rgba(0,0,0,.45);           /* sombra media (elevado/hover) */
  --sh-in:inset 0 1px 0 rgba(255,255,255,.04);  /* brillo interior mate         */
}

/* ── 2 · Base: selección, foco accesible, scrollbar con presencia ─────────── */
::selection{background:rgba(245,200,66,.28);color:#fff}
:focus-visible{outline:none;box-shadow:var(--glow-gold)}/* ── 3 · Radio ÚNICO en componentes clave (fin de la dispersión 3–20px) ───── */
.btn,.btn-aff,.btn-red,.btn-ghost,
input[type="text"],input[type="email"],input[type="password"],input[type="number"],
input[type="search"],input[type="url"],select,textarea{border-radius:var(--r)}
.btn-sm,.ar-filter-btn{border-radius:var(--r-s)}
.pill{border-radius:999px}   /* la pastilla es cápsula por diseño — se respeta, solo se unifica el valor */
.card,.camp-card,.badge-card{border-radius:var(--r)}
.modal{border-radius:var(--r-l)}

/* ── 4 · Superficies mate "cristal robusto": borde fino + brillo interior ─── */
.card,.camp-card,.badge-card{
  border:1px solid var(--bd);
  box-shadow:var(--sh-1),var(--sh-in);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.card:hover,.camp-card:hover{border-color:var(--bd-hi);box-shadow:var(--sh-2),var(--sh-in)}
.modal{border:1px solid var(--bd-hi);box-shadow:var(--sh-2),var(--sh-in)}

/* ── 5 · Botones: estados COMPLETOS y consistentes ────────────────────────── */
.btn,.btn-sm,.btn-aff,.btn-red,.btn-ghost,.cc-btn,.ar-action-btn{
  transition:transform .12s ease,filter .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.btn:hover,.btn-sm:hover,.btn-aff:hover{filter:brightness(1.07)}
.btn:active,.btn-sm:active,.btn-aff:active,.btn-red:active{transform:translateY(1px) scale(.99);filter:brightness(.96)}
.btn:focus-visible,.btn-sm:focus-visible,.btn-aff:focus-visible,.btn-red:focus-visible,.btn-ghost:focus-visible{box-shadow:var(--glow-gold)}
.btn:disabled,.btn-sm:disabled,.btn-aff:disabled,.btn-red:disabled,
.btn[disabled],.btn-sm[disabled]{opacity:.62;cursor:not-allowed;transform:none;filter:none}
.btn-ghost{border:1px solid var(--bd)}
.btn-ghost:hover{border-color:var(--bd-hi);background:rgba(255,255,255,.04)}

/* ── 6 · Inputs: reposo sereno, foco DORADO (acción) ──────────────────────── */
input[type="text"],input[type="email"],input[type="password"],input[type="number"],
input[type="search"],input[type="url"],select,textarea{
  border:1px solid var(--bd);
  transition:border-color .15s ease,box-shadow .15s ease;
}
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,
input[type="number"]:focus,input[type="search"]:focus,input[type="url"]:focus,
select:focus,textarea:focus{
  outline:none;border-color:rgba(245,200,66,.55);box-shadow:var(--glow-gold);
}
input::placeholder,textarea::placeholder{color:rgba(240,240,248,.34)}

/* ── 7 · Jerarquía numérica: las CIFRAS son la sensación premium ──────────── */
.cd-num{font-family:var(--fd);font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:.3px}
.cd-num-xl{font-family:var(--fd);font-weight:900;font-variant-numeric:tabular-nums;font-size:clamp(26px,5vw,40px);line-height:1.05}

/* ── 8 · SKELETONS (cargando sin saltos) — listos para el JS ──────────────── */
.cd-skel{position:relative;overflow:hidden;background:rgba(255,255,255,.05);border-radius:var(--r-s)}
.cd-skel::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  transform:translateX(-100%);animation:cdSkel 1.4s ease infinite}
@keyframes cdSkel{to{transform:translateX(100%)}}
.cd-skel-line{height:12px;margin:6px 0}
.cd-skel-line.w40{width:40%}.cd-skel-line.w60{width:60%}.cd-skel-line.w80{width:80%}
.cd-skel-circle{width:42px;height:42px;border-radius:50%}
.cd-skel-card{height:96px;border-radius:var(--r)}

/* ── 9 · ESTADOS VACÍOS con diseño (adiós al hueco en blanco) ─────────────── */
.cd-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:34px 18px;text-align:center;border:1px dashed var(--bd-hi);
  border-radius:var(--r);background:rgba(255,255,255,.02)}
.cd-empty-ico{font-size:34px;line-height:1;opacity:.85;filter:grayscale(.15)}
.cd-empty-title{font-family:var(--fd);font-weight:800;font-size:15px;color:var(--tx)}
.cd-empty-hint{font-size:12.5px;color:rgba(240,240,248,.55);max-width:320px}
.cd-empty .btn,.cd-empty .btn-sm{margin-top:6px}

/* ── 10 · Movimiento con respeto (accesibilidad) ──────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .cd-skel::after{animation:none}
  .card,.camp-card,.btn,.btn-sm,.btn-aff,.btn-red,.btn-ghost{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   LENGUAJE "LÍQUIDO VIVO" — barrido cohesivo (aprobado 11-jul).
   Se aplica a las clases COMPARTIDAS para que todo el sitio herede el mismo
   diseño de una vez (sin zonas parchadas). Paleta intacta: oro=acción/dinero,
   verde --live=en vivo/éxito, violeta=acento/premium, rojo=peligro/batalla.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── LIVE TILE (.cmp-card): respira, sin caja-dentro-de-caja ──────────────── */
.cmp-card{position:relative;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
.cmp-card::after{content:'';position:absolute;left:-60%;top:0;bottom:0;width:50%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,232,150,.09),transparent);transition:left .55s}
.cmp-card:hover::after{left:130%}
/* anillo de VIDA verde alrededor del avatar del live */
.cmp-av{position:relative}
.cmp-av::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--live,#00e896);will-change:transform,box-shadow;
  box-shadow:0 0 12px rgba(0,232,150,.5);animation:cdLiveRing 2s ease-in-out infinite;pointer-events:none}
@keyframes cdLiveRing{0%,100%{box-shadow:0 0 10px rgba(0,232,150,.55);transform:scale(1)}50%{box-shadow:0 0 26px rgba(0,232,150,1);transform:scale(1.06)}}
/* el #1 respira ORO con un hairline superior (no un borde más) */
.cmp-card.cmp-r1::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--coin,#f5c842),transparent);opacity:.85}
/* stats como texto con glifo (el verde para viewers, oro para drops) */
.cmp-stat .cmp-coin{color:var(--coin)}
.cmp-drops{color:var(--coin)!important}

/* ── EL RÍO DE ACTIVIDAD (#dash-feed → .cd-stream) ───────────────────────── */
.cd-stream{position:relative;padding-left:22px!important}
.cd-stream::before{content:'';position:absolute;left:12px;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--live,#00e896),var(--acc,#9d6bff) 50%,transparent);opacity:.32}
.cd-ev{position:relative;display:flex;align-items:center;gap:10px;padding:9px 6px;--nc:var(--acc)}
.cd-ev::before{content:'';position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:10px;height:10px;
  border-radius:50%;background:var(--nc);border:2px solid var(--bg,#09090f);box-shadow:0 0 8px var(--nc)}
.cd-ev.gift{--nc:var(--coin)} .cd-ev.win{--nc:var(--coin)} .cd-ev.follow{--nc:var(--acc)}
.cd-ev.join{--nc:var(--live)} .cd-ev.live{--nc:var(--red)} .cd-ev.spark{--nc:var(--acc)}
.cd-ev-av{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0}
.cd-ev-av.ph{display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--tx2);
  background:linear-gradient(135deg,var(--sf2),var(--sf))}
.cd-ev-body{flex:1;min-width:0;font-size:12px;line-height:1.35;overflow:hidden;text-overflow:ellipsis}
.cd-ev-body b{font-weight:800;color:var(--nc)}
.cd-ev-body span{color:var(--tx2)}
.cd-ev-tm{font-size:10.5px;color:var(--tx3);font-weight:600;flex-shrink:0}
.cd-ev.fresh{animation:cdEvIn .5s ease}
.cd-ev.fresh::after{content:'';position:absolute;inset:0;border-radius:10px;background:var(--nc);opacity:.09;
  animation:cdEvFade 1.8s ease forwards;pointer-events:none}
@keyframes cdEvIn{from{opacity:0;transform:translateX(-8px)}}
@keyframes cdEvFade{to{opacity:0}}

/* ── EYEBROW / título de sección con punto sonar (para cabeceras "en vivo") ── */
.card-title.cd-eye,.cd-eye{display:inline-flex;align-items:center;gap:9px}
.cd-eye .cd-sonar{position:relative;width:9px;height:9px;flex-shrink:0}
.cd-eye .cd-sonar::before,.cd-eye .cd-sonar::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--live)}
.cd-eye .cd-sonar::after{animation:cdSonar 1.8s ease-out infinite}
.cd-eye.gold .cd-sonar::before,.cd-eye.gold .cd-sonar::after{background:var(--coin)}
.cd-eye.purple .cd-sonar::before,.cd-eye.purple .cd-sonar::after{background:var(--acc)}
@keyframes cdSonar{0%{transform:scale(1);opacity:.85}100%{transform:scale(3.4);opacity:0}}

/* ── BOTONES: lenguaje único (oro acción · verde live · glass · violeta pro) ── */
.btn,.btn-crystal,.btn-red,.btn-pur,.btn-sm{transition:transform .15s cubic-bezier(.34,1.4,.64,1),box-shadow .2s,filter .2s,border-color .15s}
.btn:hover,.btn-crystal:hover{transform:translateY(-1px)}
.btn:active,.btn-crystal:active,.btn-red:active,.btn-sm:active{transform:translateY(0) scale(.98)}
.btn:focus-visible,.btn-crystal:focus-visible,.btn-red:focus-visible,.btn-sm:focus-visible{box-shadow:var(--glow-gold);outline:none}
/* estados vacíos: ilustración propia (arco líquido) en vez de emoji plano cuando aplique */
.cd-empty-arc{width:120px;height:64px;margin:0 auto 12px;border-radius:0 0 120px 120px;
  border:2px solid rgba(0,232,150,.5);border-top:none;position:relative}
.cd-empty-arc::before{content:'';position:absolute;left:50%;top:-20px;transform:translateX(-50%);
  width:16px;height:20px;border-radius:0 0 50% 50%/0 0 60% 60%;background:var(--coin);
  clip-path:path('M8 0C8 0 0 12 0 15a8 8 0 0016 0c0-3-8-15-8-15z');animation:cdDrop 3s ease-in-out infinite}
@keyframes cdDrop{50%{transform:translateX(-50%) translateY(5px)}}
.cd-empty.sm{padding:26px 16px}

/* ═══════════════════════════════════════════════════════════════════════════
   BARRIDO "PROFESIONAL FUTURISTA" · ÁREA CAMPAÑAS (aprobado 14-jul-2026)
   ---------------------------------------------------------------------------
   Cubre las 4 familias del área de campañas que aún no heredaban el lenguaje:
   .jg-* (galería de juegos) · .jgp-* (selector) · .jgpv-* (vista previa) ·
   .mj-* (modal de live). MISMA disciplina: radios de la escala, superficies
   mate-cristal, estados COMPLETOS (hover/active/focus/disabled) y foco dorado.
   ADITIVA: cero cambios de color de marca, cero cambios de layout o lógica.
   ═══════════════════════════════════════════════════════════════════════ */

/* Radios: fin de la dispersión (22px/14px/10px sueltos → escala de tokens) */
.jg-card,.jgpv-card{border-radius:var(--r-l)}
.jgp-card,.jgp-drawer,.mj-win{border-radius:var(--r)}
.mj-btn,.jg-use,.jgp-search input,.jgpv-copy{border-radius:var(--r-s)}
.jg-chip,.jg-badge{border-radius:999px}

/* Superficies mate-cristal: tarjetas de juego y paneles */
.jg-card,.jgp-card,.jgpv-card,.mj-win{
  border:1px solid var(--bd);
  box-shadow:var(--sh-1),var(--sh-in);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.jg-card:hover,.jgp-card:hover{border-color:var(--bd-hi);box-shadow:var(--sh-2),var(--sh-in);transform:translateY(-2px)}

/* Botones de campañas: estados completos + micro-interacción del lenguaje */
.mj-btn,.jg-use,.jgpv-copy{
  transition:transform .15s cubic-bezier(.34,1.4,.64,1),box-shadow .2s,filter .2s,border-color .15s;
}
.mj-btn:hover,.jg-use:hover,.jgpv-copy:hover{filter:brightness(1.08);border-color:var(--bd-hi);transform:translateY(-1px)}
.mj-btn:active,.jg-use:active,.jgpv-copy:active{transform:translateY(0) scale(.98);filter:brightness(.95)}
.mj-btn:focus-visible,.jg-use:focus-visible,.jgpv-copy:focus-visible{box-shadow:var(--glow-gold);outline:none}
.mj-btn:disabled,.jg-use:disabled{opacity:.62;cursor:not-allowed;transform:none;filter:none}

/* Barra de progreso del modal de live: cápsula suave y avance sin saltos */
.mj-prog{border-radius:999px;overflow:hidden}
.mj-bar{border-radius:999px;transition:width .45s cubic-bezier(.25,.8,.35,1)}

/* Chips y badges de juego: presencia sin gritar */
.jg-chip,.jg-badge{border:1px solid var(--bd);box-shadow:var(--sh-in)}

/* Stats del modal: cifras con la jerarquía numérica del lenguaje */
.mj-stat b,.mj-stat strong{font-family:var(--fd);font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:.3px}

/* Drawer del selector y panel de lives: hoja elevada consistente */
.jgp-drawer,.modal-lives-panel{border:1px solid var(--bd-hi);box-shadow:var(--sh-2),var(--sh-in)}

/* Accesibilidad: el área respeta prefers-reduced-motion como el resto */
@media (prefers-reduced-motion:reduce){
  .jg-card,.jgp-card,.mj-btn,.jg-use,.jgpv-copy,.mj-bar{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   BARRIDO "PROFESIONAL FUTURISTA" · DROPCERDITO / WALLET (aprobado 15-jul-2026)
   ---------------------------------------------------------------------------
   Cubre la familia dcw-* (Dropcerdito: hero, tarjetas, conversor, retiro,
   tabs, chips, inputs). MISMA disciplina que campañas: radios de la escala,
   superficies mate-cristal, estados COMPLETOS y foco dorado. Los degradados
   de marca (morado del hero, dorado de acción) se RESPETAN — solo se unifica
   radio, borde, sombra e interacción. ADITIVA: cero cambios de layout/lógica.
   ═══════════════════════════════════════════════════════════════════════ */

/* Radios: fin de la dispersión (22px/18px/14px/12px sueltos → escala de tokens) */
.dcw-hero,.dcw-conv{border-radius:var(--r-l)}
.dcw-card,.dcw-wd,.dcw-pane,.dcw-subpane{border-radius:var(--r)}
.dcw-btn,.dcw-inp,.dcw-tab,.dcw-subtab{border-radius:var(--r-s)}
.dcw-chip,.dcw-cap{border-radius:999px}

/* Superficies mate-cristal: tarjetas y paneles del Dropcerdito */
.dcw-card,.dcw-conv,.dcw-wd{
  box-shadow:var(--sh-1),var(--sh-in);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.dcw-card:hover{border-color:var(--bd-hi);box-shadow:var(--sh-2),var(--sh-in)}

/* El hero (marranera) mantiene su degradado morado — solo hoja elevada */
.dcw-hero{box-shadow:var(--sh-2),var(--sh-in)}

/* Botones del wallet: estados completos + micro-interacción del lenguaje */
.dcw-btn{
  transition:transform .15s cubic-bezier(.34,1.4,.64,1),box-shadow .2s,filter .2s,border-color .15s;
}
.dcw-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.dcw-btn:active{transform:translateY(0) scale(.98);filter:brightness(.95)}
.dcw-btn:focus-visible{box-shadow:var(--glow-gold);outline:none}
.dcw-btn:disabled,.dcw-btn[disabled]{opacity:.62;cursor:not-allowed;transform:none;filter:none}

/* Tabs del wallet: reposo sereno, activo con presencia (ya tiene su gradiente) */
.dcw-tab{transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.dcw-tab:focus-visible{box-shadow:var(--glow-gold);outline:none}

/* Inputs del conversor y del retiro: foco DORADO (acción), coherente con el resto */
.dcw-inp:focus,.dcw-range:focus{outline:none;box-shadow:var(--glow-gold)}

/* Cifras del wallet: la jerarquía numérica premium (saldo, USD, totales) */
.dcw-num,.dcw-drops,.dcw-usd,.dcw-dtot,.dcw-dbal{
  font-family:var(--fd);font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:.3px;
}

/* Chips de monto (atajos) y cápsulas: borde fino + brillo interior */
.dcw-chip{border:1px solid var(--bd);box-shadow:var(--sh-in);transition:border-color .15s,background .15s,transform .12s}
.dcw-chip:hover{border-color:var(--bd-hi);transform:translateY(-1px)}
.dcw-chip:active{transform:translateY(0) scale(.97)}

/* ═══════════════════════════════════════════════════════════════════════════
   BARRIDO "PROFESIONAL FUTURISTA" · PERFIL PÚBLICO (aprobado 15-jul-2026)
   ---------------------------------------------------------------------------
   Cubre la familia mp-* del modal de perfil público (hero, avatar-ring, stats,
   acciones follow/mensaje/compartir, bio). Los colores de marca (violeta del
   follow, dorado del compartir) se RESPETAN. Solo se unifica radio, superficie
   mate, estados de interacción completos y foco dorado. ADITIVA y reversible.
   ═══════════════════════════════════════════════════════════════════════ */

/* Radios: unificar los 11px sueltos de los botones de acción a la escala */
#modal-perfil-inner .mp-hero{border-radius:var(--r-l)}
#modal-perfil-inner .mp-follow,
#modal-perfil-inner .mp-msg,
#modal-perfil-inner .mp-share,
#modal-perfil-inner .mp-self-edit{border-radius:var(--r-s)}
#modal-perfil-inner .mp-stat{border-radius:var(--r-s)}

/* Botones de acción del perfil: estados COMPLETOS (antes solo :hover) */
#modal-perfil-inner .mp-follow,
#modal-perfil-inner .mp-msg,
#modal-perfil-inner .mp-share{
  transition:transform .15s cubic-bezier(.34,1.4,.64,1),background .18s,box-shadow .2s,border-color .15s;
}
#modal-perfil-inner .mp-follow:active,
#modal-perfil-inner .mp-msg:active,
#modal-perfil-inner .mp-share:active{transform:translateY(0) scale(.97)}
#modal-perfil-inner .mp-follow:focus-visible,
#modal-perfil-inner .mp-msg:focus-visible,
#modal-perfil-inner .mp-share:focus-visible{box-shadow:var(--glow-gold);outline:none}
#modal-perfil-inner .mp-msg:hover,
#modal-perfil-inner .mp-share:hover{transform:translateY(-1px)}

/* Stats del perfil: cifras con la jerarquía numérica del lenguaje */
#modal-perfil-inner .mp-stat b,
#modal-perfil-inner .mp-stat strong,
#modal-perfil-inner .mp-ring-num{
  font-family:var(--fd);font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:.3px;
}

/* Accesibilidad: ambas áreas respetan prefers-reduced-motion */
@media (prefers-reduced-motion:reduce){
  .dcw-card,.dcw-conv,.dcw-wd,.dcw-btn,.dcw-chip,.dcw-tab,
  #modal-perfil-inner .mp-follow,
  #modal-perfil-inner .mp-msg,
  #modal-perfil-inner .mp-share{transition:none}
}