/*
 * Vidrio HG — placas de vidrio CRISTAL (sin esmerilado) para el home, sus menús
 * y las páginas oscuras. El fondo siempre es el de la página (el shader); el
 * vidrio solo lo difumina. Sin blobs de color, sin grano.
 *
 * Los valores se pueden ajustar desde el panel del admin y se guardan en
 * Firebase; glass.js los lee y los aplica a estas variables.
 */
:root{
  --glass-blur: 14px;        /* desenfoque del fondo a través del vidrio */
  --glass-alpha: 0.34;       /* opacidad de la placa */
  --glass-sat: 1.35;         /* saturación del fondo difuminado */
  --glass-border: 0.16;      /* alpha del borde */
  --glass-radius: 18px;
  --glass-tint: 16, 14, 22;  /* tinte oscuro de la placa */
}

.glass{
  position: relative;
  background: rgba(var(--glass-tint), var(--glass-alpha));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid rgba(255, 255, 255, var(--glass-border));
  border-radius: var(--glass-radius);
  box-shadow: 0 8px 36px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.10);
}

/* variante "página": placa centrada para el contenido de páginas oscuras */
.glass-page{
  position: relative; z-index: 2;
  max-width: 880px; margin: 2rem auto; padding: 2.4rem 2.2rem;
}
@media (max-width: 640px){
  .glass-page{ margin: 1rem; padding: 1.4rem 1.2rem; --glass-radius: 14px; }
}