/* ═══════════════════════════════════════════════════════════════════════════
   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/.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-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:var(--r-full,999px)}   /* la pastilla es cápsula por diseño — se respeta, solo se unifica el valor */
.card{border-radius:var(--r)}
.modal{border-radius:var(--r-l)}

/* ── 4 · Superficies mate "cristal robusto": borde fino + brillo interior ─── */
.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{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-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{filter:brightness(1.07)}
.btn:active,.btn-sm:active,.btn-red:active{transform:translateY(1px) scale(.99);filter:brightness(.96)}
.btn:focus-visible,.btn-sm:focus-visible,.btn-red:focus-visible,.btn-ghost:focus-visible{box-shadow:var(--glow-gold)}
.btn:disabled,.btn-sm: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}

/* ── 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)}
@keyframes cdSkel{to{transform:translateX(100%)}}
.cd-skel-line.w40{width:40%}

/* ── 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){
  .card,.btn,.btn-sm,.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) */
/* stats como texto con glifo (verde para viewers, oro para destacados) */
/* ── 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}