/* Fondo opcional del inicio. Añadir images/fondos/inicio-trailer.png. */
.app-shell.portal-mode {
    position: relative;
    isolation: isolate;
}
.app-shell.portal-mode::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: #edf2fa;
    background-image:
        linear-gradient(110deg, rgba(244, 247, 253, .88), rgba(246, 247, 252, .62)),
        url("../images/fondos/inicio-trailer.png");
    background-repeat: no-repeat;
    background-position: center, center bottom;
    background-size: cover;
}
/* Superficies sólidas sobre el paisaje, con los colores de las tarjetas. */
.portal-mode .module-directory-toolbar,
.portal-mode .portal-overview > a {
    background-color: rgba(255, 255, 255, .96);
    box-shadow: 0 5px 22px rgba(38, 63, 97, .08);
}
.portal-mode .module-directory-label {
    padding: 10px 14px;
    border: 1px solid rgba(209, 221, 239, .85);
    border-radius: 12px;
    background: rgba(249, 251, 255, .94);
}
.portal-mode .page-footer {
    padding: 15px;
    border-radius: 12px;
    background: rgba(249, 251, 255, .94);
}
/* Reencuadre a la derecha para conservar el tráiler en pantallas estrechas. */
@media (max-width: 900px) {
    .app-shell.portal-mode::before {
        background-position: center, 70% bottom;
    }
}
@media (max-width: 600px) {
    .app-shell.portal-mode::before {
        background-image:
            linear-gradient(rgba(244, 247, 253, .86), rgba(246, 247, 252, .74)),
            url("../images/fondos/inicio-trailer.png");
        background-position: center, 72% bottom;
    }
    .portal-mode .module-directory-label {
        padding: 10px;
    }
}
@media print {
    .app-shell.portal-mode::before {
        display: none;
    }
}