/* Pastillas de la barra: las entradas con «formato especial» y el acceso a Discord. Comparten forma y solo cambia el
   color (WP25). El menú estira sus elementos a los 100 px de la barra: la pastilla mantiene su altura y se centra. El
   formato especial no lo tenía y medía 78 px de alto, frente a los 35 de Discord. */
.formatoEspecial,
.moc-menu-discord {
    display: inline-flex !important;
    align-items: center;
    align-self: center;
    justify-content: center;
    gap: .4rem;
    min-width: 92px;
    height: 2.2rem;
    min-height: 0;
    padding: 0 12px !important;
    margin: 0 4px;
    border: 1px solid transparent;
    border-radius: var(--qg-public-radius-sm);
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none !important;
    transition: all 0.25s ease;
}

.formatoEspecial > .mpl-nav-link-name,
.moc-menu-discord > .mpl-nav-link-name {
    padding: 0 !important;
    color: inherit !important;
    background-image: none !important;
}

.formatoEspecial:hover,
.formatoEspecial:focus,
.moc-menu-discord:hover,
.moc-menu-discord:focus {
    text-decoration: none !important;
    transform: translateY(-1px);
}

.mpl-navbar-mobile .formatoEspecial,
.mpl-navbar-mobile .moc-menu-discord {
    width: fit-content;
    max-width: 100%;
    margin: 6px 0;
}

.formatoEspecial {
    color: var(--qg-public-color-ink-gold) !important;
    border-color: var(--qg-public-color-gold-border);
    background: var(--qg-public-gradient-gold) !important;
    box-shadow: var(--qg-public-shadow-gold);
    text-shadow: 0 1px 0 var(--qg-public-color-white-35);
}

.formatoEspecial:hover,
.formatoEspecial:focus {
    color: var(--qg-public-color-ink-gold) !important;
    background: var(--qg-public-gradient-gold-light) !important;
    box-shadow: var(--qg-public-shadow-gold-hover);
}

/* Acceso a la comunidad de Discord: el color y el símbolo de su marca, para que se reconozca de un vistazo. Se declara
   después del formato especial porque comparte esos enlaces y aquí manda la marca. */
.moc-menu-discord {
    color: var(--qg-public-color-white) !important;
    border-color: var(--qg-public-color-discord);
    background: var(--qg-public-color-discord) !important;
    box-shadow: none;
    text-shadow: none;
}

.moc-menu-discord:hover,
.moc-menu-discord:focus {
    color: var(--qg-public-color-white) !important;
    border-color: var(--qg-public-color-discord-hover);
    background: var(--qg-public-color-discord-hover) !important;
}

.moc-menu-discord__icono {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
}

/* Interacción de la barra (WP24): una sola señal, el dorado. La plantilla pintaba al pasar por encima una franja roja
   (#d31c3e) detrás de la parte baja del texto, que parecía un tachado, y la sección actual se marcaba además con el
   texto en dorado. Ahora la franja no se pinta; en su lugar hay un subrayado fino que crece al pasar por encima y que
   se queda completo en la sección que se está viendo (WP14), con el texto en blanco. Las pastillas no lo llevan.
   Los selectores repiten los de la plantilla para ganarle por orden, no por !important. */
.mpl-navbar .mpl-nav-link-name,
.mpl-navbar .mpl-nav-link:hover > .mpl-nav-link-name,
.mpl-navbar .mpl-nav-link:focus > .mpl-nav-link-name,
.mpl-navbar .active > .mpl-nav-link > .mpl-nav-link-name,
.mpl-navbar .mpl-dropdown:hover > .mpl-nav-link > .mpl-nav-link-name,
.mpl-navbar .mpl-dropdown.focus > .mpl-nav-link > .mpl-nav-link-name,
.mpl-navbar .mpl-dropdown.show > .mpl-nav-link > .mpl-nav-link-name {
    position: relative;
    background-image: none;
}

.mpl-navbar .mpl-nav-link > .mpl-nav-link-name::after {
    position: absolute;
    right: 3px;
    bottom: -.35rem;
    left: 3px;
    height: 2px;
    content: "";
    border-radius: var(--qg-public-radius-xs);
    background: var(--qg-public-gradient-gold);
    opacity: .7;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .25s ease, opacity .25s ease;
}

.mpl-navbar .mpl-nav-link:hover > .mpl-nav-link-name::after,
.mpl-navbar .mpl-nav-link:focus-visible > .mpl-nav-link-name::after,
.mpl-navbar .mpl-dropdown:hover > .mpl-nav-link > .mpl-nav-link-name::after,
.mpl-navbar .mpl-dropdown.focus > .mpl-nav-link > .mpl-nav-link-name::after,
.mpl-navbar .mpl-dropdown.show > .mpl-nav-link > .mpl-nav-link-name::after {
    transform: scaleX(1);
}

.mpl-navbar .moc-menu-activo > .mpl-nav-link-name {
    color: var(--qg-public-color-white);
}

.mpl-navbar .moc-menu-activo > .mpl-nav-link-name::after {
    opacity: 1;
    transform: scaleX(1);
}

/* Las pastillas no llevan subrayado, y dentro de los desplegables tampoco: allí el elemento se resalta sobre la
   superficie del panel. */
.mpl-navbar .formatoEspecial > .mpl-nav-link-name::after,
.mpl-navbar .moc-menu-discord > .mpl-nav-link-name::after,
.mpl-navbar .mpl-dropdown-menu .mpl-nav-link > .mpl-nav-link-name::after {
    display: none;
}

.mpl-navbar:not(.mpl-navbar-mobile) .mpl-dropdown-menu .mpl-nav-link:not(.formatoEspecial):not(.moc-menu-discord) {
    border-radius: var(--qg-public-radius-xs);
    transition: color .2s ease, background-color .2s ease;
    gap: 5px;
}

.mpl-navbar:not(.mpl-navbar-mobile) .mpl-dropdown-menu .mpl-nav-link:not(.formatoEspecial):not(.moc-menu-discord):hover,
.mpl-navbar:not(.mpl-navbar-mobile) .mpl-dropdown-menu .mpl-nav-link:not(.formatoEspecial):not(.moc-menu-discord):focus-visible {
    color: var(--qg-public-text-strong);
    background-color: var(--qg-public-color-white-08);
}

/* Iconos de la barra y botón del menú móvil: también se teñían de rojo al pasar por encima. */
.mpl-navbar .mpl-nav-link:hover > .icon:not(.icon-fill),
.mpl-navbar .mpl-dropdown:hover > .mpl-nav-link > .icon:not(.icon-fill) {
    stroke: var(--qg-public-color-gold-light);
}

.mpl-navbar .mpl-nav-link:hover > .icon-fill,
.mpl-navbar .mpl-dropdown:hover > .mpl-nav-link > .icon-fill {
    fill: var(--qg-public-color-gold-light);
}

.mpl-navbar-mobile .mpl-navbar-toggle:hover > span {
    background-color: var(--qg-public-color-gold-light);
}

.mpl-navbar:not(.mpl-navbar-mobile) .mpl-dropdown-menu .formatoEspecial {
    display: flex !important;
    justify-content: flex-start;
    width: calc(100% + 6px);
    min-width: 0;
    margin: 4px 6px 4px -6px;
    padding: 5px 12px !important;
}

.mpl-navbar-nav li {
    opacity: 1 !important;
}

.mili {
    transform: unset !important;
}

.mpl-navbar .mpl-dropdown-menu {
    margin-top: unset !important;
    margin-left: unset !important;
}

/* Los desplegables de la barra superior caían sobre la banda de migas con un color casi igual y con la sombra del
   mismo tono, así que se quedaban pegados al fondo. Se levantan con superficie propia, borde y sombra oscura. */
.mpl-navbar:not(.mpl-navbar-mobile) .mpl-dropdown-menu {
    background-color: var(--qg-public-color-surface-dropdown);
    border: 1px solid var(--qg-public-color-white-12);
    box-shadow: var(--qg-public-shadow-dropdown);
}

/* Pico que engancha el panel de acceso con el icono de usuario. */
.mpl-navbar:not(.mpl-navbar-mobile) .mpl-dropdown-user .mpl-dropdown-menu::after {
    content: "";
    position: absolute;
    top: -.4rem;
    right: .95rem;
    width: .7rem;
    height: .7rem;
    background-color: var(--qg-public-color-surface-dropdown);
    border-top: 1px solid var(--qg-public-color-white-12);
    border-left: 1px solid var(--qg-public-color-white-12);
    transform: rotate(45deg);
}

.moc-page-header-content {
    opacity: 1;
    padding: 5rem !important;
}

.moc-footer-copyright {
    padding-top: 40px;
    background-color: var(--qg-public-color-nav);
}

.moc-footer-brand-link {
    padding-right: 50px !important;
}

.moc-footer {
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: var(--qg-public-color-nav) !important;
}

.moc-footer-row {
    margin-right: 0 !important;
}

.moc-footer-title,
.moc-footer-description {
    color: var(--qg-public-color-white) !important;
}

.moc-footer-legal {
    margin-top: 20px;
}

/* Redes sociales del pie (_RedesSocialesPolo, WP19). Cada red medía el 5 % del ancho, así que en un móvil de 375 px
   se quedaba en unos 17 px y el nombre se partía letra a letra. Ahora el icono tiene tamaño fijo, el nombre va debajo
   y las redes saltan de línea si no caben. */
.moc-footer-redes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem 2.5rem;
    margin: 0;
    padding: 2rem 1rem;
    list-style: none;
    background-color: var(--qg-public-color-nav);
}

.moc-footer-red {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    color: var(--qg-public-text-base);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
}

.moc-footer-red__icono {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
    filter: drop-shadow(0 .25rem .5rem var(--qg-public-color-black-50));
    transition: transform .2s ease;
}

/* Mismo lenguaje que la barra (WP24): el nombre se subraya en dorado al pasar por encima. */
.moc-footer-red:hover,
.moc-footer-red:focus-visible {
    color: var(--qg-public-text-strong);
    text-decoration: underline;
    text-decoration-color: var(--qg-public-color-gold-light);
    text-decoration-thickness: 2px;
    text-underline-offset: .3em;
}

.moc-footer-red:hover .moc-footer-red__icono,
.moc-footer-red:focus-visible .moc-footer-red__icono {
    transform: translateY(-2px);
}

.moc-footer-red:focus-visible {
    outline: 2px solid var(--qg-public-color-gold-light);
    outline-offset: .25rem;
    border-radius: var(--qg-public-radius-xs);
}

@media (max-width: 575.98px) {
    .moc-footer-redes {
        gap: 1rem 1.75rem;
    }

    .moc-footer-red {
        font-size: .85rem;
    }

    .moc-footer-red__icono {
        width: 2.125rem;
        height: 2.125rem;
    }
}

.moc-hero-slider .mpl-image {
    opacity: 1 !important;
}

.moc-hero-slider video.mpl-image {
    border: none !important;
}

.moc-hero-title-image {
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

.moc-hero-title-image--animated {
    display: block;
    width: 50px;
    height: 50px;
    background: transparent !important;
    box-shadow: none !important;
    animation: moc-hero-move-up-down 2s ease-in-out infinite;
}

.moc-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: var(--qg-public-gradient-overlay-bottom);
}

.moc-hero-content {
    position: absolute;
}

.moc-hero-video-container {
    position: absolute;
    overflow: hidden;
}

.moc-hero-scroll-trigger {
    position: relative;
    z-index: 1;
    display: inline-block !important;
    line-height: 0;
    text-decoration: none !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    appearance: none;
    -webkit-appearance: none;
    animation: moc-hero-move-up-down 2s ease-in-out infinite;
}

.moc-hero-scroll-trigger:hover,
.moc-hero-scroll-trigger:active {
    background: none !important;
    box-shadow: none !important;
}

.moc-hero-scroll-trigger:focus-visible {
    outline: 2px solid var(--qg-public-color-white);
    outline-offset: 5px;
}

.sinpadding {
    padding-top: unset !important;
}

.claridad {
    visibility: visible !important;
    color: var(--qg-public-color-white) !important;
}

@keyframes moc-hero-move-up-down {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}
.moc-game-screenshots-carousel {
    z-index: 9 !important;
}

.moc-trailer-hero {
    margin-top: 5%;
    opacity: 0.8;
}

.moc-trailer-hero-media,
.moc-trailer-video-container {
    width: 100%;
    height: 100%;
}

.moc-trailer-video-container {
    position: relative;
    overflow: hidden;
}

.moc-trailer-video {
    width: 100%;
    height: auto;
    object-fit: cover;
    overflow: hidden;
}

.moc-early-access {
    padding: 2rem 1rem;
    text-align: center;
}

.moc-early-access-platforms {
    align-items: center;
    margin-top: 2rem;
}

.moc-early-access-platform a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--qg-public-color-black);
    text-decoration: none;
    transition: transform 0.3s ease;
    will-change: transform;
}

.moc-early-access-platform img {
    width: 100px;
    height: 100px;
    animation: moc-early-access-bounce 1.2s ease infinite alternate;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.moc-early-access-platform-label {
    color: mintcream;
    font-size: 1.5rem;
    font-weight: 700;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.moc-early-access-platform a:hover img {
    filter: drop-shadow(0 5px 15px var(--qg-public-color-black-30));
    transform: scale(1.2) rotate(-5deg);
}

.moc-early-access-platform a:hover .moc-early-access-platform-label {
    opacity: 1;
    transform: translateY(-5px) scale(1.1);
}

.moc-early-access-crossplay {
    margin-top: 25px;
    font-size: 1.75rem;
}

@keyframes moc-early-access-bounce {
    0% {
        transform: translateY(0) scale(1);
    }

    100% {
        transform: translateY(-3px) scale(1.02);
    }
}

@media (max-width: 767px) {
    .moc-trailer-hero {
        height: 27vh;
        margin-top: 40%;
    }

    .moc-early-access-platform-label {
        display: none;
    }

    .moc-early-access-platform img {
        width: 80px;
        height: 80px;
    }
}
.moc-public-status-hero__wrap {
    min-height: 100vh;
}

.moc-public-status-hero__banner {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

.moc-public-status-hero__background {
    position: absolute;
    inset: 0;
}

.moc-public-status-hero__background::after {
    position: absolute;
    inset: 0;
    content: '';
    background: var(--qg-public-gradient-status);
}

.moc-public-status-hero__background img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.moc-public-status-hero__content {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(100% - 2rem, 42rem);
    min-height: 100vh;
    margin: 0 auto;
    place-items: center;
}

.moc-public-status-hero__card,
.moc-public-login__card {
    width: 100%;
    padding: clamp(1.5rem, 4vw, 3rem);
    color: var(--qg-public-color-white);
    text-align: center;
    border: 1px solid var(--qg-public-color-white-20);
    border-radius: 1.25rem;
    background: var(--qg-public-color-surface-deep);
    box-shadow: var(--qg-public-shadow-dark);
    backdrop-filter: blur(.45rem);
}

.moc-public-status-hero__card h1,
.moc-public-login__card h1 {
    margin: 0;
    color: var(--qg-public-color-white);
    font-size: clamp(1.8rem, 4vw, 3rem);
}

.moc-public-status-hero__card p,
.moc-public-login__card > p {
    margin: 1rem 0 0;
    color: var(--qg-public-color-white-86);
    font-size: 1.1rem;
    line-height: 1.6;
}

.moc-public-status-hero__action {
    margin-top: 1.75rem;
}

.moc-public-status-hero--error .moc-public-status-hero__card {
    border-color: var(--qg-public-color-danger-70);
}

.moc-public-status-hero--warning .moc-public-status-hero__card {
    border-color: var(--qg-public-color-warning-70);
}

.moc-public-status-hero--success .moc-public-status-hero__card {
    border-color: var(--qg-public-color-success-70);
}

.moc-public-login__form {
    display: grid;
    gap: 1rem;
    margin-top: 1.75rem;
    text-align: left;
}

.moc-public-login__field {
    display: grid;
    gap: .45rem;
}

.moc-public-login__field label {
    color: var(--qg-public-color-white);
    font-weight: 700;
}

.moc-public-login__field .form-control {
    min-height: 2.85rem;
    border-color: var(--qg-public-color-white-30);
    color: var(--qg-public-color-ink);
    background: var(--qg-public-color-white);
}

.moc-public-login__field .form-control:focus {
    border-color: var(--qg-public-color-cyan-soft);
    box-shadow: 0 0 0 .2rem var(--qg-public-color-cyan-24);
}

.moc-public-login__error {
    margin: 0;
    padding: .75rem .9rem;
    color: var(--qg-public-color-danger-soft);
    border: 1px solid var(--qg-public-color-danger-58);
    border-radius: .65rem;
    background: var(--qg-public-color-danger-deep-42);
    line-height: 1.4;
}

.moc-public-login__form [data-public-login-submit],
.moc-public-login__submit {
    justify-self: center;
    min-width: 11rem;
}

.moc-public-login__link {
    justify-self: center;
    color: var(--qg-public-color-white-86);
    font-size: .95rem;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.moc-public-login__link:hover,
.moc-public-login__link:focus-visible {
    color: var(--qg-public-color-white);
}

@media (max-width: 575px) {
    .moc-public-status-hero__content {
        width: min(100% - 1.5rem, 42rem);
    }

    .moc-public-status-hero__card,
    .moc-public-login__card {
        padding: 1.5rem 1.1rem;
    }
}

/* ---------- Primitivas públicas (WP16.3) ---------- */

/* Aire vertical de una sección de página. Cada bloque traía el suyo, heredado de la plantilla que le tocó: en
   Inicio convivían 0, 14, 50 y 100 px, y el ritmo de la página iba a saltos. */
.qg-seccion {
    padding-top: var(--qg-public-space-section);
    padding-bottom: var(--qg-public-space-section);
}

/* Caja con fondo del sistema. Sustituye a .backgraundDecore y .InfoSection, que pintan un velo de negro al 40 %
   con el :root antiguo de Quasar.css y llevan el relleno en porcentajes, que cambia con el ancho de la ventana. */
/* Campo de formulario de la web pública. Nace del buscador de Noticias, que era el unico con un aspecto propio;
   el resto de formularios usaba el campo de la plantilla, que no tiene fondo ni borde y se apoya en un <span>
   inclinado 4 grados detras, con dos sombras duras encima. Ahora todos usan este. */
.qg-campo,
.qg-content-search input[type="search"],
.qg-content-search-input {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    height: 2.875rem;
    margin: 0;
    padding: 0 1rem;
    border: .0625rem solid var(--qg-public-color-white-20);
    border-radius: .625rem;
    outline: 0;
    background: var(--qg-public-color-white-12);
    color: var(--qg-public-color-white);
    box-shadow: none;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

/* Un area de texto crece con su contenido, asi que no lleva la altura fija. El selector repite el elemento
   porque la plantilla la define con `textarea.form-control` y con una sola clase no se le gana. */
textarea.qg-campo {
    height: auto;
    min-height: 7rem;
    padding: .75rem 1rem;
    border: .0625rem solid var(--qg-public-color-white-20);
    border-radius: .625rem;
    background: var(--qg-public-color-white-12);
    color: var(--qg-public-color-white);
    line-height: 1.5;
}

textarea.qg-campo:hover,
textarea.qg-campo:focus {
    border-color: var(--qg-public-color-secondary-coral);
    background: var(--qg-public-color-white-20);
}

.qg-campo::placeholder,
.qg-content-search input[type="search"]::placeholder,
.qg-content-search-input::placeholder {
    color: var(--qg-public-color-white-78);
}

.qg-campo:hover,
.qg-campo:focus,
.qg-content-search input[type="search"]:hover,
.qg-content-search input[type="search"]:focus,
.qg-content-search-input:hover,
.qg-content-search-input:focus {
    scale: 1;
    border-color: var(--qg-public-color-secondary-coral);
    background: var(--qg-public-color-white-20);
    box-shadow: 0 0 0 .1875rem var(--qg-public-color-coral-13);
}

.qg-panel {
    padding: var(--qg-public-space-panel);
    border: .0625rem solid var(--qg-public-border-subtle);
    border-radius: var(--qg-public-radius-lg);
    background-color: var(--qg-public-surface-card);
    box-shadow: var(--qg-public-shadow-1);
}

/* ---------- Ayuda de un dato (WP17) ---------- */

/* Botón "?" junto a una etiqueta. Va relleno y con su borde para que se vea: con el fondo transparente y 18 px
   pasaba desapercibido. */
.qg-ayuda {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-left: .45rem;
    padding: 0;
    border: .0625rem solid var(--qg-public-border-strong);
    border-radius: var(--qg-public-radius-circle);
    background: var(--qg-public-color-white-12);
    color: var(--qg-public-text-strong);
    font-family: var(--qg-public-font-body);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
    text-transform: none;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease, scale .2s ease;
}

.qg-ayuda:hover,
.qg-ayuda:focus-visible {
    border-color: var(--qg-public-accent-warm);
    background: var(--qg-public-color-coral-13);
    scale: 1.1;
}

/* El tooltip lo coloca Bootstrap, así que aquí solo se viste: no se toca su `transform`, que es lo que lo sitúa. */
.qg-ayuda-tooltip .tooltip-inner {
    max-width: min(20rem, calc(100vw - 2rem));
    padding: .65rem .85rem;
    border: .0625rem solid var(--qg-public-border-subtle);
    border-radius: var(--qg-public-radius-md);
    background: var(--qg-public-surface-raised);
    box-shadow: var(--qg-public-shadow-2);
    color: var(--qg-public-text-base);
    font-family: var(--qg-public-font-body);
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-transform: none;
}

.qg-ayuda-tooltip .tooltip-arrow::before {
    border-top-color: var(--qg-public-surface-raised);
}

/* Entrada y salida suaves: la opacidad la lleva el contenedor y el pequeño desplazamiento, el interior, para no
   pisar el `transform` con el que Bootstrap lo coloca. */
.qg-ayuda-tooltip.tooltip {
    transition: opacity .18s ease;
}

.qg-ayuda-tooltip .tooltip-inner {
    transform: translateY(.35rem) scale(.96);
    transition: transform .18s cubic-bezier(.2, .8, .3, 1);
}

.qg-ayuda-tooltip.show .tooltip-inner {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .qg-ayuda,
    .qg-ayuda-tooltip.tooltip,
    .qg-ayuda-tooltip .tooltip-inner {
        transition: none;
    }

    .qg-ayuda-tooltip .tooltip-inner {
        transform: none;
    }
}

/* WP30: el desplegable de la sesión. Usa la superficie de los desplegables de la barra; lo único propio es que
   la salida es un formulario, y su botón tiene que parecer una opción más de la lista. */
.moc-session-menu .moc-session-menu-salida {
    margin: 0;
}

.moc-session-menu .moc-session-menu-salida button {
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.moc-session-active-link {
    cursor: pointer;
}

/* WP39: acceso o sesión en la barra móvil, a la izquierda del botón del menú (que la plantilla coloca con
   `order: 12`). En escritorio no se pinta: allí está el desplegable de la barra. */
.moc-barra-usuario {
    display: none;
}

@media (max-width: 991.98px) {
    .moc-barra-usuario {
        position: relative;
        order: 11;
        display: flex;
        align-items: center;
        margin-right: .75rem;
    }

    .moc-barra-usuario__boton {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.6rem;
        height: 2.6rem;
        padding: 0;
        border: .0625rem solid var(--qg-public-color-white-20);
        border-radius: var(--qg-public-radius-circle);
        color: var(--qg-public-text-strong);
        background: var(--qg-public-color-white-05);
        cursor: pointer;
        transition: border-color .2s ease, background-color .2s ease;
    }

    /* Con sesión, los colores de la pastilla de la barra de escritorio. */
    .moc-barra-usuario__boton--sesion {
        color: var(--qg-public-color-secondary-coral);
        background: var(--qg-public-color-surface-session);
    }

    .moc-barra-usuario__boton:hover,
    .moc-barra-usuario__boton:focus-visible,
    .moc-barra-usuario__boton[aria-expanded="true"] {
        border-color: var(--qg-public-border-strong);
        background-color: var(--qg-public-color-white-10);
    }

    .moc-barra-usuario__boton:focus-visible {
        outline: 2px solid var(--qg-public-color-gold-light);
        outline-offset: 2px;
    }

    .moc-barra-usuario__icono {
        width: 1.35rem;
        height: 1.35rem;
        stroke-width: 1.8;
    }

    .moc-barra-usuario__menu {
        position: absolute;
        top: calc(100% + .6rem);
        right: 0;
        z-index: 2;
        min-width: 15.5rem;
        padding: .35rem;
        border: .0625rem solid var(--qg-public-color-white-12);
        border-radius: var(--qg-public-radius-md);
        background-color: var(--qg-public-color-surface-dropdown);
        box-shadow: var(--qg-public-shadow-dropdown);
    }

    .moc-barra-usuario__menu[hidden] {
        display: none;
    }

    .moc-barra-usuario__nombre {
        margin: 0 0 .25rem;
        padding: .45rem .75rem .55rem;
        overflow: hidden;
        border-bottom: .0625rem solid var(--qg-public-border-subtle);
        color: var(--qg-public-text-muted);
        font-size: .85rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .moc-barra-usuario__menu .moc-session-menu-item {
        padding: .6rem .75rem;
        border-radius: var(--qg-public-radius-sm);
        color: var(--qg-public-text-base);
        font-size: .95rem;
        white-space: nowrap;
    }

    .moc-barra-usuario__menu .moc-session-menu-item:hover,
    .moc-barra-usuario__menu .moc-session-menu-item:focus-visible {
        color: var(--qg-public-text-strong);
        background-color: var(--qg-public-color-white-08);
    }

    /* El borroso de arriba al abrir el menú lateral: la barra superior lleva un fondo de cristal (backdrop-filter de
       la plantilla), se queda por encima del velo y la plantilla además la desplaza. Con el menú abierto se oculta; el
       menú tiene su propio botón de cerrar y el velo cubre la página entera por igual. */
    .mpl-navbar-mobile-open .moc-top-navbar {
        visibility: hidden;
        opacity: 0;
        transition: opacity .2s ease, visibility 0s linear .2s;
    }
}

/* Los avisos comunes, con los colores de la web pública.

   `common-alerts.css` es neutral y arma su paleta con los tokens del panel, cuyos valores de reserva son claros:
   en la web pública salía un cuadro blanco sobre la nebulosa. Aquí solo se le dan los suyos; ni una regla nueva,
   ni una sola propiedad duplicada. */
:root {
    --qg-admin-surface: var(--qg-public-surface-raised);
    --qg-admin-surface-muted: var(--qg-public-color-white-08);
    --qg-admin-text: var(--qg-public-text-base);
    --qg-admin-text-muted: var(--qg-public-text-muted);
    --qg-admin-warning: var(--qg-public-accent-gold);
    --qg-admin-border: var(--qg-public-border-subtle);
    --qg-admin-primary-strong: var(--qg-public-accent);
    --qg-admin-primary-contrast: var(--qg-public-color-white);
    --qg-admin-primary-shadow: var(--qg-public-color-black-50);
    --qg-admin-danger: var(--qg-public-color-danger);
    --qg-admin-success: var(--qg-public-color-success);
}

/* El título y el texto del aviso, con las tipografías del sistema. */
.common-alert__title {
    font-family: var(--qg-public-font-heading);
}

.common-alert__content {
    font-family: var(--qg-public-font-body);
}

/* "Cancelar" se leía en morado sobre un fondo casi del mismo tono. */
.common-alert__cancel {
    color: var(--qg-public-text-base) !important;
    border: .0625rem solid var(--qg-public-border-subtle) !important;
}

/* Cada opción del desplegable de la sesión, con su icono a la izquierda y todos alineados en la misma vertical. */
.moc-session-menu-item {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.moc-session-menu-item > i {
    flex: 0 0 1rem;
    font-size: .9rem;
    text-align: center;
}

/* ==========================================================================
   WP35: botones, casillas y enlaces de la web pública

   La plantilla los pinta con su rojo de marca (#d31c3e, 64 veces en su hoja) sobre una capa `::before` inclinada
   4 grados. En la barra ya se retiró (WP24); esto hace lo mismo con el resto de controles, que seguían llevando
   el rojo porque nuestras vistas visten sus clases.

   Igual que en WP24, se repiten los selectores de la plantilla para ganarles por orden, sin `!important`.
   ========================================================================== */

/* Fuera la capa inclinada: es la que lleva el color. */
.btn::before,
.btn-default::before,
.btn-secondary::before,
.btn:hover::before,
.btn:focus::before,
.btn-default:hover::before,
.btn-default:focus::before,
.btn:not(:disabled):not(.disabled):active::before {
    display: none;
}

/* El botón toma de los campos (`.qg-campo`) la familia de formas: misma altura, mismo radio y un anillo al
   enfocarlo. El relleno es el acento de acción, que es el rojo que la plantilla ya usaba por todas partes, pero
   declarado como token y aplicado a propósito. */
.btn {
    align-items: center;
    min-height: 2.875rem;
    border: .0625rem solid transparent;
    border-radius: .625rem;
    background-color: var(--qg-public-accent-action);
    background-image: none;
    color: var(--qg-public-color-white);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.btn:hover,
.btn:focus,
.btn:not(:disabled):not(.disabled):active {
    background-color: var(--qg-public-accent-action-hover);
    color: var(--qg-public-color-white);
}

.btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .1875rem var(--qg-public-color-carmin-45);
}

/* Variante callada: la que acompaña a una acción principal, o la que solo ofrece una alternativa. */
.btn-default,
.btn-secondary,
.btn-outline-light {
    border-color: var(--qg-public-color-white-20);
    background-color: var(--qg-public-color-white-12);
    color: var(--qg-public-color-white);
}

.btn-default:hover,
.btn-default:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-default:not(:disabled):not(.disabled):active {
    border-color: var(--qg-public-accent-action);
    background-color: var(--qg-public-color-white-20);
    color: var(--qg-public-color-white);
}

/* Casillas y radios: el rojo pasa al dorado, y el foco usa el mismo anillo que los campos. */
.form-check-input:checked {
    border-color: var(--qg-public-accent-action);
    background-color: var(--qg-public-accent-action);
}

.form-check-input:focus {
    border-color: var(--qg-public-accent-action);
    box-shadow: 0 0 0 .1875rem var(--qg-public-color-carmin-45);
}

.form-check-label > a,
.form-check-label > a:hover,
.mpl-link:hover {
    color: var(--qg-public-accent-action);
}

/* Botones que son solo un icono -las redes de Contacto, el aspa de los modales- no quieren el relleno macizo:
   sobre el dorado, el icono blanco casi no se lee, y además compiten con la acción principal de la página. Van
   a la variante callada, y el acento se reserva para cuando se apuntan. */
.btn.btn-slide,
.btn-close {
    border-color: var(--qg-public-color-white-20);
    background-color: var(--qg-public-color-white-12);
    color: var(--qg-public-color-white);
}

.btn.btn-slide:hover,
.btn.btn-slide:focus,
.btn-close:hover,
.btn-close:focus {
    border-color: var(--qg-public-accent-action);
    background-color: var(--qg-public-color-white-20);
    color: var(--qg-public-accent-action);
}

/* El icono de cada entrada del menú, alineado con su nombre y del mismo color que él. */
.moc-menu-icono {
    flex: 0 0 1rem;
    margin-right: .5rem;
    font-size: .85rem;
    text-align: center;
}