/* ════════════════════════════════════════════════════════════════════════════
   cd-glass.css — MATERIAL DE VIDRIO UNIFICADO
   Un solo lenguaje táctil para TODOS los botones y cajas del sitio.

   CRITERIO (decidido tras auditar las 17 páginas):
   · El vidrio se construye SOLO con box-shadow inset. Nunca se escribe
     `background`, así que los colores semánticos (rojo, oro, violeta) y los
     degradados que ya existen quedan intactos: el vidrio se compone ENCIMA.
   · Sin pseudo-elementos: ::before y ::after ya están ocupados en varios
     botones (barrido de luz, iconos) y colisionarían.
   · Vidrio OSCURO, no escarcha blanca: la identidad del sitio es nocturna.
     El filo superior aporta la luz; la base, el peso.
   · Funciona en tema claro y oscuro porque las sombras son translúcidas.
   ════════════════════════════════════════════════════════════════════════════ */
:root{
  /* anatomía del vidrio, en capas */
  --gl-edge:  inset 0 1px 0 rgba(255,255,255,.26);        /* filo pulido */
  --gl-sheen: inset 0 9px 18px -12px rgba(255,255,255,.32);/* luz que entra */
  --gl-floor: inset 0 -9px 16px -12px rgba(0,0,0,.55);    /* poso de sombra */
  --gl-base:  inset 0 -1px 0 rgba(0,0,0,.32);             /* canto inferior */
  --gl-lift:  0 5px 14px -7px rgba(0,0,0,.6);             /* separación */
  --gl-lift-h:0 12px 26px -10px rgba(0,0,0,.7);           /* al levantarse */
  --gl-ease:  cubic-bezier(.2,.85,.25,1);
}
:root[data-theme="light"]{
  --gl-edge:  inset 0 1px 0 rgba(255,255,255,.85);
  --gl-sheen: inset 0 9px 18px -12px rgba(255,255,255,.7);
  --gl-floor: inset 0 -9px 16px -12px rgba(20,24,60,.16);
  --gl-base:  inset 0 -1px 0 rgba(20,24,60,.12);
  --gl-lift:  0 4px 12px -6px rgba(20,24,60,.18);
  --gl-lift-h:0 10px 22px -8px rgba(20,24,60,.26);
}

/* ── TODOS los botones del sitio ──────────────────────────────────────────
   Lista construida a partir del inventario real de las 17 páginas. ── */
.btn, .btn-sm, .btn-ghost, .btn-main,
.btn-acc, .btn-d, .btn-p, .btn-gold, .btn-primary, .btn-aff, .btn-play,
.bt-key, .v-key, .modal-key, .sa-btn, .sa-btn-ghost, .sa-btn-gold,
.gi-btn, .rec-btn, .snd-btn, .cdck-btn, .cdv-btn, .cdt-btns > button,
.rg-lk-btn, .cd-ctl, .cdl-google, .cdl-primary, .cdl-tab, .apro-tab,
.accordion-button, .bt-ktab, .bt-ovbtn, .bt-seg > button{
  box-shadow: var(--gl-edge), var(--gl-sheen), var(--gl-floor), var(--gl-base), var(--gl-lift);
  backdrop-filter: blur(9px) saturate(1.15);
  -webkit-backdrop-filter: blur(9px) saturate(1.15);
  transition: transform .18s var(--gl-ease), box-shadow .26s ease, filter .26s ease;
}

/* al pasar el cursor el cristal se levanta y capta más luz */
.btn:hover, .btn-sm:hover, .btn-ghost:hover, .btn-main:hover, .btn-acc:hover, .btn-d:hover,
.btn-p:hover, .btn-gold:hover, .btn-primary:hover, .btn-aff:hover,
.bt-key:hover, .v-key:hover, .modal-key:hover, .sa-btn:hover,
.sa-btn-ghost:hover, .sa-btn-gold:hover, .gi-btn:hover, .rec-btn:hover,
.snd-btn:hover, .cdck-btn:hover, .cdv-btn:hover, .rg-lk-btn:hover,
.cd-ctl:hover, .cdl-google:hover, .cdl-primary:hover, .cdl-tab:hover,
.apro-tab:hover, .accordion-button:hover, .bt-ktab:hover, .bt-ovbtn:hover{
  transform: translateY(-1.5px);
  box-shadow: var(--gl-edge), var(--gl-sheen), var(--gl-floor), var(--gl-base), var(--gl-lift-h);
  filter: brightness(1.05) saturate(1.04);
}

/* al pulsar, el cristal se hunde: la luz se apaga y entra la sombra */
.btn:active, .btn-sm:active, .btn-ghost:active, .btn-main:active, .btn-acc:active,
.btn-d:active, .btn-p:active, .btn-gold:active, .btn-primary:active,
.btn-aff:active, .bt-key:active, .v-key:active, .modal-key:active,
.sa-btn:active, .sa-btn-ghost:active, .sa-btn-gold:active, .gi-btn:active,
.rec-btn:active, .snd-btn:active, .cdck-btn:active, .cdv-btn:active,
.rg-lk-btn:active, .cd-ctl:active, .cdl-google:active, .cdl-primary:active,
.accordion-button:active{
  transform: translateY(0) scale(.985);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.1);
  transition-duration: .06s;
  filter: none;
}

/* estado activo/seleccionado: el cristal queda encendido por dentro */
.cdl-tab.on, .apro-tab.on, .bt-ktab.on, .bt-seg > button.on, .sa-btn.on{
  box-shadow: var(--gl-edge), inset 0 10px 20px -12px rgba(255,255,255,.45),
              var(--gl-base), var(--gl-lift);
}

/* deshabilitado: vidrio mate, sin luz */
.btn:disabled, .bt-key:disabled, .sa-btn:disabled, .cdl-primary:disabled,
.btn-primary:disabled, .cdck-btn:disabled{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.2);
  transform: none; filter: saturate(.5) brightness(.85);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ── CAJAS: el mismo material, más contenido ──────────────────────────────
   Las cajas son fondo, no protagonistas: reciben el filo y el poso, pero no
   la elevación ni el brillo interior fuerte. ── */
.card, .cdl-card, .rg-card, .modal-card, .sa-card, .cdb-card, .apro-card,
.bt-card, .v-card, .gi-card, .cd-card{
  box-shadow: var(--gl-edge),
              inset 0 14px 28px -22px rgba(255,255,255,.22),
              inset 0 -1px 0 rgba(0,0,0,.28),
              0 14px 34px -18px rgba(0,0,0,.5);
}

/* ── Accesibilidad: el anillo de foco no se recorta ── */
.btn:focus-visible, .bt-key:focus-visible, .cd-ctl:focus-visible,
.cdl-google:focus-visible, .cdl-primary:focus-visible,
.sa-btn:focus-visible, .accordion-button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(10,10,18,.9), 0 0 0 4px rgba(245,200,66,.75),
              var(--gl-edge), var(--gl-base);
}

@media (prefers-reduced-motion: reduce){
  .btn, .bt-key, .cd-ctl, .sa-btn, .cdl-google, .cdl-primary{ transition: none }
  .btn:hover, .bt-key:hover, .cd-ctl:hover{ transform: none }
}

/* ── Variantes con identidad de color ──────────────────────────────────────
   .btn-red/.btn-pur/.btn-g/.btn-cd ya llevan su propio relieve con halo del
   color de la marca. El vidrio genérico los borraría, así que aquí solo se
   les añade la translucidez, que no compite con box-shadow. ── */
.btn-red, .btn-pur, .btn-g, .btn-cd{
  backdrop-filter: blur(9px) saturate(1.15);
  -webkit-backdrop-filter: blur(9px) saturate(1.15);
}