html,
body {
    min-height: 100%;
}

body.xcm-has-background {
    position: relative;
    min-height: 100vh;
    background: transparent;
}

.xcm-background {
    position: fixed;
    inset: 0;
    z-index: -3;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    transform: scale(1.01);
}

.xcm-background-overlay {
    position: fixed;
    inset: 0;
    z-index: -2;

    background:
        linear-gradient(
            rgba(20, 24, 28, 0.12),
            rgba(20, 24, 28, 0.20)
        );
}

body.xcm-has-background .xcm-header {
    background:
        rgba(31, 111, 159, 0.88);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}

body.xcm-has-background .xcm-main {
    position: relative;
    z-index: 0;
}

body.xcm-has-background .xcm-folder-container,
body.xcm-has-background .xcm-car-hero,
body.xcm-has-background .xcm-card,
body.xcm-has-background .xcm-panel {
    background:
        rgba(255, 255, 255, 0.82);

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);
}

@media (max-width: 700px) {
    .xcm-background {
        background-position: center center;
    }

    .xcm-background-overlay {
        background:
            rgba(20, 24, 28, 0.48);
    }
}

/*
 * Cabecera del coche.
 * Algo más transparente para que el fondo
 * tenga mayor presencia.
 */
body.xcm-has-background .xcm-car-hero {
    background:
        rgba(255, 255, 255, 0.70) !important;

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);
}


/*
 * El archivador completo comparte la misma
 * transparencia: pestañas + contenido.
 */
body.xcm-has-background .xcm-folder-container {
    background:
        rgba(255, 255, 255, 0.74) !important;

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);
}


/*
 * Muy importante:
 * los elementos interiores no vuelven
 * a pintar un fondo blanco opaco.
 */
body.xcm-has-background .xcm-folder-body,
body.xcm-has-background .xcm-folder-panel {
    background:
        transparent !important;

    backdrop-filter:
        none;

    -webkit-backdrop-filter:
        none;
}


body.xcm-has-background .xcm-folder-tabs {
    background:
        transparent !important;
}


/*
 * Las pestañas inactivas siguen distinguiéndose,
 * pero permiten ver el fondo.
 */
body.xcm-has-background .xcm-folder-tab {
    background:
        rgba(235, 238, 241, 0.58) !important;

    backdrop-filter:
        blur(2px);

    -webkit-backdrop-filter:
        blur(2px);
}


/*
 * La activa destaca ligeramente sobre
 * el cuerpo del archivador.
 */
body.xcm-has-background .xcm-folder-tab.is-active {
    background:
        rgba(255, 255, 255, 0.76) !important;
}

/*
 * Con fondo activo, el contenido principal
 * deja visible parte de la imagen a ambos lados.
 */
body.xcm-has-background .xcm-main {
    width: calc(100% - 24px);
    max-width: 1680px;

    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 700px) {

    body.xcm-has-background .xcm-main {
        width: calc(100% - 12px);
    }

}