/*
 * Vidrio de marca Synaptic — cajas y píldoras.
 * Aprobado por Miguel el 2026-10-16: debe verse como la tarjeta "Settings" del
 * generador de hype4.academy (blur 8, refraction 0.15, depth 6).
 *
 * OJO: el botón "Copy CSS" del generador exporta OTRA receta (relleno blanco al 15 %
 * y brillo interior al 60 %) que se ve lechosa. Esta receta reproduce la tarjeta que
 * el generador dibuja en pantalla, tomada de su código fuente.
 *
 * Uso:
 *   <div class="glass">…</div>              caja
 *   <div class="glass glass--pill">…</div>  píldora
 *
 * --glass-scale multiplica medidas (blur, radio, líneas, sombras), no colores:
 *   1 → web.  2 → lienzos de 1080 px (reels 1080×1920, posts 1080×1350), que en el
 *   celular se ven a ~40 %.
 */
:root {
  --glass-scale: 1;
}

.glass {
  --s: var(--glass-scale);
  --glass-radius: calc(30px * var(--s));
  position: relative;
  border-radius: var(--glass-radius);
  -webkit-backdrop-filter: blur(calc(8px * var(--s))) saturate(1.2);
  backdrop-filter: blur(calc(8px * var(--s))) saturate(1.2);
  background-color: rgba(255, 255, 255, 0.018);
  background-image:
    /* destello superior (10 %–90 % del ancho) */
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent),
    /* destello izquierdo (10 %–90 % del alto) */
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.06), transparent),
    /* profundidad (depth 6): luz suave arriba a la izquierda */
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
  background-size:
    80% calc(1px * var(--s)),
    calc(1px * var(--s)) 80%,
    100% 100%;
  background-position:
    50% 0,
    0 50%,
    0 0;
  background-repeat: no-repeat;
  box-shadow:
    0 calc(8px * var(--s)) calc(32px * var(--s)) rgba(0, 0, 0, 0.15),
    0 calc(2px * var(--s)) calc(8px * var(--s)) rgba(0, 0, 0, 0.05),
    inset 0 calc(1px * var(--s)) 0 rgba(255, 255, 255, 0.12),
    inset 0 calc(-1px * var(--s)) 0 rgba(255, 255, 255, 0.06);
}

/* Borde degradado: gris oscuro arriba → gris claro abajo */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: calc(1px * var(--s));
  background: linear-gradient(180deg, rgba(57, 57, 57, 0.21) 1%, rgba(151, 151, 151, 0.35) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Sombras interiores finas que dan el canto del vidrio */
.glass::after {
  content: "";
  position: absolute;
  inset: calc(1px * var(--s));
  border-radius: inherit;
  box-shadow:
    inset 0 0 calc(2px * var(--s)) 0 rgba(255, 255, 255, 0.15),
    inset 0 calc(2px * var(--s)) calc(4px * var(--s)) 0 rgba(255, 255, 255, 0.08),
    inset 0 calc(-2px * var(--s)) calc(2px * var(--s)) 0 rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.glass--pill {
  --glass-radius: 999px;
}