.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;
    }

    canvas#chartDetalle {
        /* Forzamos una altura mínima proporcional al número de barras */
        max-height: 600px !important;
        width: 65% !important;
        margin-right: 15px;
        border: 2px solid var(--qg-public-color-copper-76);
        margin-left: 10px;
        margin-bottom: 2%;
        border-radius: var(--qg-public-radius-lg);
        padding: 3%;
        background: var(--qg-public-moc-surface-card)
    }
    canvas#chartHechizos {
        height: 560px !important;
        max-height: none !important;
        min-height: 520px;
        width: 78% !important;
        max-width: 980px;
        margin-right: 15px;
        border: 2px solid var(--qg-public-color-copper-76);
        margin-left: 10px;
        margin-bottom: 2%;
        border-radius: var(--qg-public-radius-lg);
        padding: 3%;
        background: var(--qg-public-moc-surface-card);
        box-sizing: border-box;
    }

    .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;
    }

    canvas#chartDetalle,
    canvas#chartGeneral {
        width: 100% !important; /* El gráfico se expande */
        height: auto !important;
        max-height: 400px !important; /* Evita que sea eterno hacia abajo */
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 10px !important;
    }

    canvas#chartHechizos {
        width: 100% !important;
        height: 460px !important;
        min-height: 460px;
        max-height: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 10px !important;
    }

    /* 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. */