/* ════════════════════════════════════════════════════════════════════════════
   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-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,.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);
  /* El material del botón se resuelve con relieve/sombras. Un backdrop-filter
     por cada control fuerza capas de composición y no aporta nada cuando el
     relleno del botón ya es opaco. El blur queda reservado a superficies
     realmente translúcidas (modales/menús). */
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  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,.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,.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{
  /* Variantes semánticas conservan su color y relieve sin crear una capa de
     blur independiente por botón. */
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CRISTAL en MODALES FLOTANTES (2026-08)
   ---------------------------------------------------------------------------
   Las tarjetas que flotan SOBRE un velo (modales, diálogos) ahora son cristal
   real: fondo translúcido + blur fuerte, para que se vea difuminado lo que hay
   detrás — igual que el menú Cortina. Solo aplica a tarjetas dentro de un velo
   fijo (selector descendiente), NO a las tarjetas de contenido de la página.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El velo detrás del modal: difumina toda la página. */
.rg-modal,.modal,.cd-modal,.mj-modal,.dp-modal{
  backdrop-filter: blur(10px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
}

/* La tarjeta del modal: cristal translúcido con blur propio. El !important
   sobrescribe el fondo opaco (linear-gradient) que traían de antes. */
.rg-modal .rg-modal-card,.rg-modal-card,.modal .modal-card,.modal-card,.mj-modal .mj-card,.pro-modal,.rg-confirm-card{
  background: rgba(18, 17, 28, .70) !important;
  backdrop-filter: blur(30px) saturate(1.6) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.6) brightness(1.05) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 24px 70px -18px rgba(0,0,0,.7),
              0 0 0 1px rgba(255,255,255,.06),
              inset 0 1px 0 rgba(255,255,255,.09) !important;
}