/* ========================================
   GLASSMORPHISM - Utilidades Reutilizables
   Apple HIG Style - Vibrancy Effect
   ======================================== */

/* ===== CLASE BASE ===== */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-top: var(--glass-border-top);
  border-bottom: var(--glass-border-bottom);
}

/* ===== VARIANTE ELEVADA (dropdowns, modales, cards flotantes) ===== */
.glass-elevated {
  background: var(--glass-bg-elevated);
  backdrop-filter: blur(calc(var(--glass-blur) * 1.5)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.5)) saturate(var(--glass-saturate));
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* ===== VARIANTE SUTIL (menos blur, mas transparente) ===== */
.glass-subtle {
  background: var(--glass-bg-subtle);
  backdrop-filter: blur(calc(var(--glass-blur) * 0.5)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.5)) saturate(var(--glass-saturate));
}

/* ===== FALLBACK PARA NAVEGADORES SIN SOPORTE ===== */
@supports not (backdrop-filter: blur(1px)) {
  .glass,
  .glass-elevated,
  .glass-subtle {
    background: var(--color-bg-card);
    opacity: 0.98;
  }
}

/* ===== FALLBACK WEBKIT ===== */
@supports not (-webkit-backdrop-filter: blur(1px)) {
  @supports not (backdrop-filter: blur(1px)) {
    .glass,
    .glass-elevated,
    .glass-subtle {
      background: var(--color-bg-card);
      opacity: 0.98;
    }
  }
}