/* Listado de partidas (Views/Partidas/Partidas). */

/* El fondo recorta con clip en lugar de hidden: hidden lo convierte en contenedor de scroll y anula el sticky del
   lateral. flow-root mantiene el mismo contexto de bloque (y los mismos márgenes) que daba hidden. */
.parallax-background.partidas-fondo {
    display: flow-root;
    overflow: clip;
}

/* Ancho contenido: el listado ya no se estira a toda la pantalla. */
.partidas-layout {
    max-width: min(1200px, calc(100% - 24px));
}

.partidas-filter-toggle {
    display: none;
}

.partidas-layout .mpl-content {
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
}

/* ---------- Tarjetas ---------- */

.partidas-layout .lock-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    filter: drop-shadow(0 4px 8px var(--qg-public-color-black-60));
    pointer-events: none;
}

#ListaCard .cardBackgrig {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    padding: clamp(22px, 2.2vw, 32px);
}

/* Toda la tarjeta lleva al detalle: el título se extiende sobre ella (stretched-link de Bootstrap). */
#ListaCard .cardBackgrig:has(.stretched-link:focus-visible) {
    outline: 2px solid var(--qg-public-color-gold-pure);
    outline-offset: 3px;
}

/* Aparición de las tarjetas: una sola vez, al entrar en pantalla por primera vez (WP05.1). */
#ListaCard .cardBackgrig.partida-card--pendiente {
    opacity: 0;
    transform: translateY(20px);
}

#ListaCard .cardBackgrig.partida-card--visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .5s ease-out, transform .5s ease-out;
}

#ListaCard .mpl-post-item:not(.mpl-post-vertical) + .mpl-post-item {
    margin-top: 28px;
}

#ListaCard .partida-card-summary {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding-right: 48px;
}

#ListaCard .partida-title-block {
    flex: 1 1 auto;
    min-width: 0;
}

#ListaCard .partida-card-title {
    display: inline-flex;
    align-items: flex-start;
    margin-bottom: 0;
    max-width: 100%;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
}

#ListaCard .partida-card-title svg {
    flex: 0 0 auto;
    margin-top: .2em;
    margin-right: 6px;
    vertical-align: middle;
    fill: var(--qg-public-color-gold-pure);
}

#ListaCard .partida-official-label {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 12px;
    border-radius: var(--qg-public-radius-pill);
    background: var(--qg-public-gradient-official);
    color: var(--qg-public-color-game-ink);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Burbuja común de fecha y estado (card-meta-bubble.css): a la derecha del título, con los datos apilados. */
#ListaCard .partida-card-meta {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    align-self: flex-start;
    gap: .375rem;
}

#ListaCard .partida-card-description {
    width: 100%;
    min-width: 0;
    margin-top: 20px;
}

#ListaCard .partida-card-description p {
    margin-bottom: 0;
}

/* ---------- Lateral de filtros ---------- */

/* Acompaña al scroll; si la ventana es baja, desplaza su propio contenido. */
.partidas-layout #sidebarPartidas {
    position: sticky;
    top: 110px;
    flex: 0 0 280px;
    max-width: 280px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.partidas-filtros form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.partidas-filtros__grupo {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.partidas-filtros__titulo {
    display: block;
    float: none;
    width: auto;
    margin: 0 0 .625rem;
    padding: 0;
    color: var(--qg-public-moc-text);
    font-family: var(--qg-public-font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
}

.partidas-filtros__opciones {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0;
}

/* Cada estado es un chip; la casilla real queda oculta pero sigue siendo accesible por teclado. */
.partidas-filtro {
    position: relative;
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    margin: 0;
    padding: .5625rem .75rem;
    border: .0625rem solid var(--qg-public-color-white-20);
    border-radius: var(--qg-public-radius-md);
    background: var(--qg-public-color-white-05);
    color: var(--qg-public-color-white-86);
    font-size: .9375rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.partidas-filtro:hover {
    border-color: var(--qg-public-color-secondary-coral);
    background: var(--qg-public-color-coral-13);
    color: var(--qg-public-moc-text);
}

.partidas-filtro__casilla {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.partidas-filtro__marca {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border: .125rem solid var(--qg-public-color-white-48);
    border-radius: var(--qg-public-radius-sm);
    color: transparent;
    font-size: .6875rem;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.partidas-filtro__texto {
    flex: 1 1 auto;
    min-width: 0;
}

.partidas-filtro__contador {
    flex: 0 0 auto;
    min-width: 1.75rem;
    padding: .125rem .5rem;
    border-radius: var(--qg-public-radius-pill);
    background: var(--qg-public-color-white-12);
    color: var(--qg-public-color-white-86);
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
}

/* Filtro activo: chip relleno en coral, con marca y brillo. */
.partidas-filtro:has(.partidas-filtro__casilla:checked) {
    border-color: var(--qg-public-color-secondary-coral);
    background: var(--qg-public-color-secondary-coral);
    box-shadow: 0 0 1rem var(--qg-public-color-coral-45);
    color: var(--qg-public-moc-text);
    font-weight: 700;
}

.partidas-filtro:has(.partidas-filtro__casilla:checked):hover {
    background: var(--qg-public-color-secondary-coral-hover);
}

.partidas-filtro:has(.partidas-filtro__casilla:checked) .partidas-filtro__marca {
    border-color: var(--qg-public-moc-text);
    background: var(--qg-public-color-white);
    color: var(--qg-public-color-secondary-coral);
}

.partidas-filtro:has(.partidas-filtro__casilla:checked) .partidas-filtro__contador {
    background: var(--qg-public-color-black-20);
    color: var(--qg-public-moc-text);
}

.partidas-filtro:has(.partidas-filtro__casilla:focus-visible) {
    outline: .125rem solid var(--qg-public-color-white);
    outline-offset: .125rem;
}

/* "Limpiar filtros" usa el botón de reinicio del buscador de noticias (content-search.css) a todo el ancho. */
.partidas-filtros__limpiar {
    width: 100%;
}

@media (max-width: 991.98px) {
    .partidas-layout {
        max-width: 100%;
        overflow: visible;
    }

    .partidas-filter-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        margin: 0 0 18px;
        border: 1px solid var(--qg-public-color-bronze-75);
        background: var(--qg-public-moc-surface-card);
        color: var(--qg-public-color-parchment) !important;
        text-decoration: none;
    }

    .partidas-filter-toggle:hover,
    .partidas-filter-toggle[aria-expanded="true"] {
        background: var(--qg-public-gradient-gold);
        color: var(--qg-public-color-ink-gold) !important;
    }

    .partidas-main-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: visible;
    }

    .partidas-layout .mpl-content {
        order: 2;
        flex: 0 0 100%;
        width: 100%;
    }

    .partidas-layout #sidebarPartidas {
        position: static;
        order: 1;
        display: none;
        flex: 0 0 100%;
        max-width: 100%;
        max-height: none;
        width: 100%;
        margin: 0 0 24px;
        padding: 20px;
        overflow: visible;
        box-sizing: border-box;
    }

    .partidas-layout #sidebarPartidas.filters-open {
        display: block;
    }
}

@media (max-width: 575.98px) {
    #ListaCard .cardBackgrig {
        padding: 20px;
    }

    #ListaCard .partida-card-summary {
        flex-direction: column;
        gap: 12px;
        padding-right: 34px;
    }

    #ListaCard .partida-card-meta {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    #ListaCard .cardBackgrig.partida-card--pendiente,
    #ListaCard .cardBackgrig.partida-card--visible {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .partidas-filtro,
    .partidas-filtro__marca {
        transition: none;
    }
}