/**
 * Liquid Glass Effect - Apple-style Glassmorphism
 *  https://www.tonnitools.com/liquid-glass/
 * USO SIMPLE: Añade la clase "liquid-glass" a cualquier elemento
 * El JavaScript inyectará automáticamente la estructura necesaria
 * 
 * Variables CSS personalizables:
 * --glass-radius: border-radius (default: 24px)
 * --glass-blur: intensidad del blur (default: 14px)
 * --glass-softness: suavidad del efecto (default: 12px)
 * --glass-invert: inversión del color (default: 10%)
 */

/* ===========================================
   LIQUID GLASS - Estructura completa
   =========================================== */

.liquid-glass {
    --corner-radius: var(--glass-radius, 24px);
    --base-strength: var(--glass-blur, 14px);
    --extra-blur: 2px;
    --softness: var(--glass-softness, 12px);
    --invert: var(--glass-invert, 10%);

    --total-strength: calc(var(--base-strength) + var(--extra-blur));
    --edge-width: calc(0.3px + (var(--softness) * 0.1));
    --emboss-width: calc((var(--softness) * 0.38));
    --refraction-width: calc((var(--softness) * 0.3));

    position: relative;
    overflow: visible;
    border-radius: var(--corner-radius);
}

/* Contenido del usuario - siempre encima */
.liquid-glass > *:not(.GlassMaterial) {
    position: relative;
    z-index: 100;
}

/* Material del cristal - capa base */
.liquid-glass > .GlassMaterial {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: visible;
    pointer-events: none;
    border-radius: inherit;
}

.liquid-glass > .GlassMaterial:after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    border-radius: var(--corner-radius);
    background-color: rgba(128, 128, 128, 0);
}

.liquid-glass > .GlassMaterial > div {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border-radius: var(--corner-radius);
    z-index: 2;
    overflow: hidden;
}

.liquid-glass > .GlassMaterial .GlassEdgeReflection {
    z-index: 4;
    margin: calc(var(--total-strength) * -1);
    border-radius: calc(var(--corner-radius) + var(--total-strength));
    backdrop-filter: blur(var(--total-strength));
    -webkit-backdrop-filter: blur(var(--total-strength));
    padding: var(--edge-width);
    border: var(--total-strength) solid transparent;
    -webkit-mask: 
        linear-gradient(white 0 0) padding-box,
        linear-gradient(white 0 0) content-box;
    -webkit-mask-composite: xor;
    mask: 
        linear-gradient(white 0 0) padding-box,
        linear-gradient(white 0 0) content-box;
    mask-composite: exclude;
}

.liquid-glass > .GlassMaterial .GlassEmbossReflection {
    backdrop-filter: blur(calc(var(--total-strength) * 1.2));
    -webkit-backdrop-filter: blur(calc(var(--total-strength) * 1.2));
    padding: var(--emboss-width);
    border: 0 solid transparent;
    -webkit-mask: 
        linear-gradient(white 0 0) padding-box,
        linear-gradient(white 0 0) content-box;
    -webkit-mask-composite: xor;
    mask: 
        linear-gradient(white 0 0) padding-box,
        linear-gradient(white 0 0) content-box;
    mask-composite: exclude;
}

.liquid-glass > .GlassMaterial .GlassRefraction {
    padding: var(--refraction-width);
    border: calc(var(--emboss-width)) solid transparent;
    -webkit-mask: 
        linear-gradient(white 0 0) padding-box,
        linear-gradient(white 0 0) content-box;
    -webkit-mask-composite: xor;
    mask: 
        linear-gradient(white 0 0) padding-box,
        linear-gradient(white 0 0) content-box;
    mask-composite: exclude;
}

.liquid-glass > .GlassMaterial .GlassBlur {
    backdrop-filter: blur(var(--extra-blur));
    -webkit-backdrop-filter: blur(var(--extra-blur));
    border-radius: calc(var(--corner-radius) - (var(--emboss-width) + var(--refraction-width)));
    margin: calc(var(--emboss-width) + var(--refraction-width));
}

.liquid-glass > .GlassMaterial .BlendLayers {
    z-index: 3;
    backdrop-filter: blur(calc((var(--softness) * 0.2) + (var(--extra-blur) * 0.2)));
    -webkit-backdrop-filter: blur(calc((var(--softness) * 0.2) + (var(--extra-blur) * 0.2)));
}

.liquid-glass > .GlassMaterial .BlendEdge {
    z-index: 8;
    backdrop-filter: blur(calc(var(--edge-width) * 0.4));
    -webkit-backdrop-filter: blur(calc(var(--edge-width) * 0.4));
}

/* Borde con gradiente sutil */
.liquid-glass > .GlassMaterial::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 11;
    display: block;
    border-radius: var(--corner-radius);
    padding: 1px;
    border: 0 solid transparent;
    background: linear-gradient(155deg, hsla(0, 0%, 100%, 0.1) 0%, hsla(0, 0%, 100%, 0.05) 50%, hsla(0, 0%, 100%, 0.1) 100%);
    -webkit-mask: 
        linear-gradient(white 0 0) padding-box,
        linear-gradient(white 0 0) content-box;
    -webkit-mask-composite: xor;
    mask: 
        linear-gradient(white 0 0) padding-box,
        linear-gradient(white 0 0) content-box;
    mask-composite: exclude;
}

.liquid-glass > .GlassMaterial .Highlight {
    z-index: 12;
    display: block;
    border-radius: var(--corner-radius);
    padding: 1px;
    border: 0 solid transparent;
    -webkit-mask: 
        linear-gradient(white 0 0) padding-box,
        linear-gradient(white 0 0) content-box;
    -webkit-mask-composite: xor;
    mask: 
        linear-gradient(white 0 0) padding-box,
        linear-gradient(white 0 0) content-box;
    mask-composite: exclude;
}

/* ===========================================
   VARIANTES
   =========================================== */

.liquid-glass--subtle {
    --glass-blur: 8px;
    --glass-softness: 6px;
    --glass-invert: 5%;
}

.liquid-glass--intense {
    --glass-blur: 20px;
    --glass-softness: 16px;
    --glass-invert: 15%;
}

.liquid-glass--dark {
    --glass-invert: 20%;
}

/* ===========================================
   TAMAÑOS DE RADIUS
   =========================================== */
.liquid-glass--xs { --glass-radius: 4px; }
.liquid-glass--sm { --glass-radius: 8px; }
.liquid-glass--md { --glass-radius: 16px; }
.liquid-glass--lg { --glass-radius: 24px; }
.liquid-glass--xl { --glass-radius: 32px; }
.liquid-glass--pill { --glass-radius: 9999px; }