.filtros {
        width: 50%;
        margin: 2%;
        background: var(--qg-public-moc-surface-card);
        padding: 1%;
        border-radius: var(--qg-public-radius-lg);
        max-width: 30% !important;
    }
    .graficoDetalles{
        display: flex;
        flex-direction: row;
        justify-content:center;
        align-content: center;
    }
    .filtrosEstadisticas{
        width:30%;

    }
    /* Contenedor con scroll si hay muchos datos */
    #vistaDetalle {
        overflow-x: auto;
        min-height: 500px;
    }

    /*
        Marco de las gráficas de comparación y alquimia. Antes iba en el propio lienzo, con ancho y alto !important que
        pisaban los que pone Chart.js: el navegador estiraba el dibujo para encajarlo (la comparación salía al 60 % de
        ancho y al 89 % de alto, la alquimia al 75 % y al 88 %) y las anclas de los iconos de la alquimia no caían sobre
        ellos. Ahora el marco es un contenedor con su tamaño y el lienzo lo rellena, medido por Chart.js.
    */
    .estadisticas-lienzo {
        position: relative;
        min-width: 0;
        margin: 0 15px 2% 10px;
        padding: 3%;
        border: 2px solid var(--qg-public-color-copper-76);
        border-radius: var(--qg-public-radius-lg);
        background: var(--qg-public-moc-surface-card);
        box-sizing: border-box;
    }

    .estadisticas-lienzo--detalle {
        width: 65%;
        height: 600px;
    }

    .estadisticas-lienzo--alquimia {
        width: 78%;
        max-width: 980px;
        height: 560px;
    }

    .graficoAlquimia {
        align-items: stretch;
        gap: 18px;
    }

    .graficoAlquimia .filtros {
        flex: 0 0 240px;
        width: 24%;
        max-width: 260px !important;
        margin: 0 0 2% 0;
    }

    .btn-group {
        margin-bottom: 20px;
    }

    .btn {
        cursor: pointer;
    }

    .mt-4 {
        margin-top: 20px;
    }
    /* Desplegables Select2 (jugadores y turnos). Son controles dentro de una vista del juego: llevan la superficie
       y el filete de la piel, y la lista desplegada deja de ser la blanca por defecto de la libreria. */
    .select2-container {
        width: 100% !important;
        font-family: var(--qg-public-font-body);
        font-size: 14px;
    }

    /* Cuadro cerrado. Los selectores llevan .select2-container--default porque asi los escribe la libreria:
       con una sola clase no se le gana por especificidad. */
    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--multiple {
        background-color: var(--qg-public-moc-surface-sunken);
        border: 1px solid var(--qg-public-color-bronze-30);
        border-radius: var(--qg-public-radius-sm);
        padding: 6px 12px;
        color: var(--qg-public-moc-text);
        transition: border-color .2s ease;
    }

    .select2-selection__rendered,
    .select2-selection__placeholder {
        color: var(--qg-public-moc-text-muted) !important;
    }

    .select2-container--default.select2-container--open .select2-selection--single,
    .select2-container--default.select2-container--open .select2-selection--multiple,
    .select2-container--default.select2-container--focus .select2-selection--multiple {
        border-color: var(--qg-public-moc-accent);
        box-shadow: 0 0 0 .1875rem var(--qg-public-color-bronze-20);
    }

    /* Etiquetas de lo ya elegido */
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: var(--qg-public-moc-accent);
        border: 1px solid var(--qg-public-color-bronze-dark);
        border-radius: var(--qg-public-radius-xs);
        padding: 2px 8px;
        margin: 2px;
        font-size: 12px;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
        color: var(--qg-public-color-game-ink);
    }

    .select2-selection__choice__remove {
        color: var(--qg-public-color-game-ink);
        margin-left: 5px;
        cursor: pointer;
    }

        .select2-selection__choice__remove:hover {
            color: var(--qg-public-moc-negative);
        }

    /* Lista desplegada. La libreria la cuelga del body, asi que no puede ir dentro de la vista. */
    .select2-dropdown {
        background-color: var(--qg-public-moc-surface-card);
        border: 1px solid var(--qg-public-color-bronze-30);
        border-radius: var(--qg-public-radius-sm);
    }

    .select2-search--dropdown .select2-search__field {
        padding: 6px 12px;
        border: 1px solid var(--qg-public-color-bronze-30);
        border-radius: var(--qg-public-radius-xs);
        background-color: var(--qg-public-moc-surface-sunken);
        color: var(--qg-public-moc-text);
        font-size: 14px;
    }

    .select2-results__option {
        padding: 8px 12px;
        font-size: 14px;
        color: var(--qg-public-moc-text);
        cursor: pointer;
    }

    .select2-container--default .select2-results__option--highlighted[aria-selected],
    .select2-container--default .select2-results__option--selected {
        background-color: var(--qg-public-moc-accent) !important;
        color: var(--qg-public-color-game-ink) !important;
    }

    /* Mensaje de "No hay resultados" */
    .select2-results__message {
        padding: 8px 12px;
        font-size: 14px;
        color: var(--qg-public-moc-text-muted);
        font-style: italic;
    }

    /* Ajustes para Móviles */
@media (max-width: 768px) {
    .filtros {
        width: 100% !important; /* Ocupa todo el ancho en móvil */
        max-width: 100% !important;
        margin: 10px 0 !important;
    }

    .graficoDetalles {
        flex-direction: column !important; /* Apilar filtros sobre el gráfico */
    }

    .graficoAlquimia .filtros {
        flex: 0 1 auto;
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 !important;
    }

    /* Las gráficas ocupan todo el ancho; Chart.js ajusta el lienzo al marco. */
    .estadisticas-lienzo {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        padding: 10px;
    }

    .estadisticas-lienzo--detalle {
        height: 400px;
    }

    .estadisticas-lienzo--alquimia {
        max-width: none;
        height: 460px;
    }

    /* Ajuste de botones para que no se amontonen */
    .btn-group {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .btn-group .btn {
        margin-bottom: 5px;
        border-radius: var(--qg-public-radius-xs) !important;
    }

    /* Reducir el tamaño de las fuentes en ejes de Chart.js mediante CSS no es posible,
       pero podemos ajustar el padding del contenedor */
    section {
        margin: 1% !important;
    }
}

/* Antes en atributos style del parcial. */
.estadisticas-partida {
    margin: 2%;
}

.estadisticas-leyenda--matadragones {
    color: var(--qg-public-color-chart-matadragones);
}

.estadisticas-leyenda--amenaza {
    color: var(--qg-public-color-chart-amenaza);
}

.estadisticas-leyenda--economia {
    color: var(--qg-public-color-chart-economia);
}

/* Aqui se teñia la capa ::before sesgada de la plantilla para quitarle el azul al boton de vista activa. Desde
   WP35 esa capa ya no se pinta en ninguna parte de la web publica, asi que estas reglas se quedaron sin nada
   que hacer: los botones de esta barra los viste ya la primitiva comun. */