/* CoreFlow · vidrio líquido. Añade class="liquido" a tarjetas, paneles, botones o barras. */
/* posición con especificidad cero: si el elemento ya es fixed/absolute (una barra, un escaneo), manda su propia regla */
:where(.liquido) { position: relative; }
.liquido {
  isolation: isolate;
  background: linear-gradient(160deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .015) 45%, rgba(22, 105, 122, .06));
  -webkit-backdrop-filter: blur(12px) saturate(1.6) brightness(1.05);
  backdrop-filter: blur(12px) saturate(1.6) brightness(1.05);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 -1px 0 rgba(255, 255, 255, .06),
    inset 1px 0 0 rgba(255, 255, 255, .08),
    0 24px 60px -28px rgba(0, 0, 0, .8);
}
html.liquido-real .liquido {
  -webkit-backdrop-filter: url(#cf-liquido) blur(3px) saturate(1.75) brightness(1.06);
  backdrop-filter: url(#cf-liquido) blur(3px) saturate(1.75) brightness(1.06);
}
/* brillo especular: una franja de luz en el borde que sigue al puntero */
.liquido::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  padding: 1px;
  background: radial-gradient(160px 160px at var(--lx, 20%) var(--ly, 0%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%),
              linear-gradient(135deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 198, 41, .25));
  -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);
  transition: opacity .4s var(--ola);
}
/* reflejo interior suave */
.liquido::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(420px 220px at var(--lx, 30%) var(--ly, -10%), rgba(255, 255, 255, .07), transparent 70%);
}
:where(.liquido > *) { position: relative; }
.liquido > * { z-index: 2; }
/* botón de vidrio líquido */
.btn.liquido { background: rgba(255, 255, 255, .06); color: var(--txt); }
.btn.liquido:hover { background: rgba(255, 255, 255, .1); }
@media (prefers-reduced-transparency: reduce) { .liquido { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 24, 30, .95); } }