/* ================================================================
   MarketAds.co — COMPONENTES REUTILIZABLES
   Glassmorphism, indicadores de estado, focus ring
================================================================ */


/* ================================================================
   GLASSMORPHISM
================================================================ */

.glass {
  background:      rgba(255,255,255,0.05);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border:          1px solid rgba(255,255,255,0.1);
  border-radius:   var(--radio-lg, 1rem);
}

.glass--oscuro {
  background:      rgba(7,9,15,0.7);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border:          1px solid rgba(255,255,255,0.07);
  border-radius:   var(--radio-lg, 1rem);
  box-shadow:      0 8px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}

.glass--primario {
  background:      rgba(109,40,255,0.1);
  backdrop-filter: blur(12px);
  border:          1px solid rgba(109,40,255,0.2);
  border-radius:   var(--radio-lg, 1rem);
}


/* ================================================================
   INDICADOR DE SECCIÓN ACTIVA — NAV
================================================================ */

.nav__enlace.activo {
  color: #fff;
}

.nav__enlace.activo::after {
  content:       '';
  display:       block;
  height:        2px;
  background:    var(--c-primario, #6D28FF);
  border-radius: 1px;
  margin-top:    2px;
}


/* ================================================================
   FOCUS RING GLOBAL
================================================================ */

.btn:focus-visible,
.ac-item__pregunta:focus-visible,
.casos-flecha:focus-visible,
.casos-dot:focus-visible,
.sv-flecha:focus-visible,
.sv-tab:focus-visible {
  outline:        2px solid #A78BFA;
  outline-offset: 3px;
}