/* Superficies de cristal. Fallback sólido cuando no hay backdrop-filter. */
.glass{
  position:relative;
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-deep);
  isolation:isolate;
}
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,var(--glass-highlight),transparent 42%);
  opacity:.9;
}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));backdrop-filter:blur(var(--blur)) saturate(var(--sat))}
}
.glass--strong{background:var(--glass-bg-strong)}
.glass--flat{box-shadow:var(--shadow-soft)}

/* Reflejo que sigue al cursor (lo alimenta liquid-glass.js con --mx/--my) */
.sheen{position:relative;overflow:hidden}
.sheen::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(120,205,255,.16),transparent 62%);
  transition:opacity .35s var(--ease);
}
.sheen:hover::after,.sheen:focus-within::after{opacity:1}
.glass-edge{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 -1px 0 rgba(0,0,0,.5) inset}