:root {
    --kj-background-overlay:
        linear-gradient(
            rgba(255, 252, 247, 0.66),
            rgba(255, 252, 247, 0.66)
        );

    --kj-background-default:
        url("/assets/backgrounds/default-green-marble.png");

    --kj-background-fans:
        url("/assets/backgrounds/fans-pink-marble.png");

    --kj-background-schools:
        url("/assets/backgrounds/schools-blue-marble.png");

    --kj-background-affiliate:
        url("/assets/backgrounds/affiliate-white-marble.png");
}

/*
 * Fondo predeterminado de KKUM JAI.
 */
body {
    background-color: #eef3ec;
    background-image:
        var(--kj-background-overlay),
        var(--kj-background-default);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

/*
 * Fans.
 */
body.kj-bg-fans,
body[data-kj-background="fans"] {
    background-color: #fbeef2;
    background-image:
        linear-gradient(
            rgba(255, 247, 250, 0.64),
            rgba(255, 247, 250, 0.64)
        ),
        var(--kj-background-fans);
}

/*
 * Schools.
 */
body.kj-bg-schools,
body[data-kj-background="schools"] {
    background-color: #edf7fa;
    background-image:
        linear-gradient(
            rgba(247, 253, 255, 0.66),
            rgba(247, 253, 255, 0.66)
        ),
        var(--kj-background-schools);
}

/*
 * Perfiles afiliados oficialmente a KKUM JAI.
 */
body.kj-bg-affiliate,
body[data-kj-background="affiliate"] {
    background-color: #fffaf2;
    background-image:
        linear-gradient(
            rgba(255, 252, 246, 0.58),
            rgba(255, 252, 246, 0.58)
        ),
        var(--kj-background-affiliate);
}

/*
 * Comunidad general.
 * Mantiene el fondo anterior generado mediante CSS.
 */
body.kj-bg-community,
body[data-kj-background="community"] {
    background:
        radial-gradient(
            circle at 10% 12%,
            rgba(239, 169, 184, 0.32) 0,
            rgba(239, 169, 184, 0) 22rem
        ),
        radial-gradient(
            circle at 92% 86%,
            rgba(185, 203, 189, 0.38) 0,
            rgba(185, 203, 189, 0) 24rem
        ),
        linear-gradient(
            135deg,
            #fffaf3 0%,
            #f7f2e9 48%,
            #fbf5ed 100%
        );
    background-attachment: fixed;
}

/*
 * Las tarjetas deben seguir siendo legibles sobre mármol.
 */
.auth-card,
.security-card {
    background: rgba(255, 255, 255, 0.91);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}