/* Cristal estilo «liquid glass» de Apple (como la barra de Spotlight):
   relleno translúcido con mucho desenfoque, un filo de luz fino que brilla más arriba
   y una sombra suave que lo despega del fondo. Sin deformar lo que hay detrás. */

:root {
  --veil: rgba(250, 250, 252, 0.46);
  --veil-strong: rgba(250, 250, 252, 0.78);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.08));
  --edge-top: rgba(255, 255, 255, 0.9);
  --edge-side: rgba(255, 255, 255, 0.35);
  --edge-bottom: rgba(255, 255, 255, 0.55);
  --glass-shadow: 0 8px 28px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
}
:root[data-theme='dark'] {
  --veil: rgba(30, 30, 32, 0.5);
  --veil-strong: rgba(22, 22, 24, 0.78);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
  --edge-top: rgba(255, 255, 255, 0.24);
  --edge-side: rgba(255, 255, 255, 0.07);
  --edge-bottom: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* :where() no suma especificidad: lo que ya es absolute/fixed lo sigue siendo */
:where(.glass) { position: relative; }
.glass {
  background: var(--sheen), var(--veil);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: var(--glass-shadow);
}
/* Filo de luz: borde de 1px en degradado, más brillante arriba y abajo que en los lados */
.glass::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, var(--edge-top), var(--edge-side) 35%, var(--edge-side) 70%, var(--edge-bottom));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* Menús con mucho texto: más velo para que se lean bien */
.drop.glass {
  background: var(--sheen), var(--veil-strong);
  -webkit-backdrop-filter: blur(44px) saturate(1.8);
  backdrop-filter: blur(44px) saturate(1.8);
}

@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--soft); -webkit-backdrop-filter: none; backdrop-filter: none; }
}