:root {
        --color-pergamino: var(--qg-public-color-parchment-mid); /* El tono crema de tu imagen */
        --color-banda: var(--qg-public-color-black-05); /* El sombreado suave de las filas impares */
        --color-texto: var(--qg-public-color-leather-mid);
    }

    .contenedor-ranking {
        width: 50%;
        max-width: 900px;
        margin: 50px auto;
        /* Aplicamos el filtro que mencionamos antes para que la sombra siga al recorte */

        background-color: var(--qg-public-color-black-60);
        border-radius: var(--qg-public-radius-lg);
        opacity: 0.85;
    }

    .pergamino-base {
        background-color: transparent;
        padding: 20px 0;
        min-height: 400px;
        /* El recorte sutil para que no sea un rectángulo perfecto */
    }

    .cabecera {
        display: flex;
        justify-content: space-between;
        padding: 10px 37px;
        font-weight: bold;
        color: var(--qg-public-color-brown-light);
        font-size: 0.9rem;
        text-transform: capitalize;
    }

    .col-rango {
        width: 80px;
    }

    .fila {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 40px;
        color: var(--color-texto);
        font-weight: 600;
    }

        /* Este es el truco para las filas alternas (amayado/sombreado) */
        .fila:nth-child(odd) {
            background-color: var(--color-banda);
        }

    .rango-icono {
        width: 35px;
        height: 35px;
        background: var(--qg-public-color-bronze); /* Color bronce del icono */
        border: 2px solid var(--qg-public-color-brown);
        color: var(--qg-public-moc-text);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: var(--qg-public-radius-xs); /* Un poco hexagonal en la imagen original */
        margin-right: 40px;
        transform: rotate(45deg); /* Para darle forma de diamante */
    }

        /* Corregimos el número para que no esté rotado */
        .rango-icono::before {
            content: attr(data-rank); /* Si usas JS o simplemente pon el número dentro */
            transform: rotate(-45deg);
        }

    .nombre {
        font-size: 1.1rem;
    }
    /* Contador: Estilo Gema de Dragón */
    .spell-counter {

        background: var(--qg-public-gradient-partida-detalle-spell-counter);
        color: var(--qg-public-moc-text);
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--qg-public-radius-sm); /* Cuadrado redondeado para variar */
        font-weight: 900;
        transform: rotate(45deg); /* Diamante */
        box-shadow: 0 0 15px var(--qg-public-color-stat-red-40);
        border: 1px solid var(--qg-public-color-white-50);
    }

    .counter-value {
        transform: rotate(-45deg); /* Enderezar el número dentro del diamante */
    }
    .TopGlobal{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
    }
    .secionPrincipal{
        display: flex;
        justify-content: center;
        align-items:center
    }
    /* Cabecera Clasificatoria */
    .clasificatoria-header {
        text-align: center;
        padding: 20px 0 10px 0;
    }

        .clasificatoria-header h1 {
            font-family: var(--qg-public-font-heading);
            color: var(--qg-public-color-parchment); /* Color crema para resaltar sobre el fondo oscuro */
            text-transform: uppercase;
            letter-spacing: 3px;
            line-height: 1.15;
            margin: 0;
            padding: 0 12px;
            text-shadow: 2px 2px 4px var(--qg-public-color-black-80);
            overflow-wrap: normal;
            word-break: normal;
            hyphens: none;
        }

    .divisor-alquimico {
        height: 2px;
        background: var(--qg-public-gradient-jugadores-divisor-alquimico);
        margin: 10px auto;
        width: 80%;
    }

    /* Buscador Alquimista */
    .buscador-container {
        padding: 10px 40px;
        margin-bottom: 10px;
    }

    .input-alquimista {
        width: 100%;
        background: var(--qg-public-moc-surface-card);
        border: 1px solid var(--qg-public-color-brown);
        padding: 10px 15px;
        color: var(--qg-public-color-parchment);
        border-radius: var(--qg-public-radius-xs);
        font-family: inherit;
        transition: all 0.3s ease;
    }

        .input-alquimista:focus {
            outline: none;
            border-color: var(--qg-public-color-bronze);
            box-shadow: 0 0 10px var(--qg-public-color-bronze-30);
            background: var(--qg-public-color-black-60);
        }
        .input-alquimista::placeholder {
            color: var(--qg-public-color-brass-light); /* dorado suave, queda muy bien */
            opacity: 1; /* importante para que no se vea apagado */
        }
    /* Paginado */
    .paginado-alquimista {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        gap: 20px;
        border-top: 1px solid var(--qg-public-color-brown-30);
    }

    .pag-btn {
        text-decoration: none;
        color: var(--qg-public-moc-text);
        font-weight: bold;
        padding: 5px 15px;
       
        border-radius: var(--qg-public-radius-xs);
        transition: 0.3s;
      
    }

        .pag-btn:hover {
            background: var(--qg-public-color-brown);
            color: var(--qg-public-moc-text);
        }

    .pag-info {
        color: var(--qg-public-color-brown-light);
        font-size: 0.9rem;
        font-style: italic;
    }
    .parallax-background::before {
        background-image: url("../../../images/Moc/fondosTex/Castle.png")
    }
    .input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }

    .input-alquimista {
        padding-right: 60px; /* Espacio para la lupa y la X */
        /* Tus estilos de borde y fondo aquí */
    }

    .btn-limpiar {
        position: absolute;
        right: 35px; /* Ajusta según el tamaño de tu lupa */
        text-decoration: none;
        color: var(--qg-public-color-gold-dark); /* Color dorado para que combine con el resto */
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
        transition: color 0.2s;
    }

        .btn-limpiar:hover {
            color: var(--qg-public-color-stat-red); /* Rojo sutil al pasar el ratón */
        }

    .boton-lupa {
        position: absolute;
        right: 10px;
        padding: 4px;
        border: 0;
        background: none;
        color: var(--qg-public-color-brass-light);
        cursor: pointer;
        transition: color 0.2s;
    }

        .boton-lupa:hover,
        .boton-lupa:focus-visible {
            color: var(--qg-public-color-bronze);
        }

        .boton-lupa:focus-visible {
            outline: 2px solid var(--qg-public-color-bronze);
            outline-offset: 2px;
        }

    .orden-ranking {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 0 40px 16px;
        color: var(--qg-public-color-parchment);
    }

    .orden-ranking-label {
        color: var(--qg-public-color-brass-light);
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .orden-ranking-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 112px;
        padding: 8px 16px;
        color: var(--qg-public-color-parchment);
        border: 1px solid var(--qg-public-color-bronze-75);
        border-radius: var(--qg-public-radius-sm);
        background: var(--qg-public-color-brown-35);
        font-weight: 800;
        text-decoration: none;
        transition: all 0.25s ease;
    }

    /* El resaltado sale de la opción marcada, no de la clase que pinta el servidor: al ordenar sin recargar, el
       formulario no se sustituye y la clase se quedaría en la opción anterior. */
    .orden-ranking-btn:hover,
    .orden-ranking-btn:has(input:checked) {
        color: var(--qg-public-color-ink-gold);
        background: var(--qg-public-gradient-gold);
        box-shadow: 0 0 15px var(--qg-public-color-gold-shadow);
        text-decoration: none;
    }

    /* El orden son ahora opciones de un formulario, para aplicarse sin recargar: el botón es la etiqueta y el radio
       queda oculto pero accesible, de modo que el teclado sigue funcionando. */
    .orden-ranking-btn {
        position: relative;
        cursor: pointer;
        margin-bottom: 0;
    }

    .orden-ranking-btn input {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        overflow: hidden;
        opacity: 0;
        clip: rect(0 0 0 0);
    }

    .orden-ranking-btn:focus-within {
        outline: 2px solid var(--qg-public-color-gold-light);
        outline-offset: 2px;
    }

                .tabla-alquimistas {
                    width: 90%;
                    margin-left: 5%;
                    margin-right: 5%;
                    border-collapse: separate;
                    /* Sin hueco entre columnas, para que el resaltado de la fila sea continuo; el aire se deja entre
                       filas. */
                    border-spacing: 0 .5rem;
                    /* Con el reparto automático, al pasar de «ELO» a «Puntuación K» el rótulo más largo encogía las
                       demás columnas. Con anchos fijos solo cambia el contenido de la columna del valor. */
                    table-layout: fixed;
                }

                /* La columna del valor reserva el ancho del rótulo más largo; el nombre se queda con el resto. */
                .tabla-alquimistas .col-rango {
                    width: 80px;
                }

                .tabla-alquimistas .col-foto {
                    width: 120px;
                }

                .tabla-alquimistas .col-elo {
                    width: 190px;
                }
                .Avatar{
                    width: 50px;
                }
                .fila-jugador{
                    margin-bottom: 10px;
                    cursor: pointer;
                }
                .fila-jugador-enlace,
                .fila-jugador-enlace:hover {
                    color: inherit;
                    text-decoration: none;
                }
                .fila-jugador-enlace:focus-visible {
                    outline: 2px solid var(--qg-public-color-bronze);
                    outline-offset: 2px;
                }
                .tabla-alquimistas th, .tabla-alquimistas td {
                    padding: 12px;
                    text-align: center;
                    vertical-align: middle;
                }
                /* WP05.2: hover suave (antes saltaba a scale 1.1 sin transición). La animación de entrada de los
                   resultados declara en la fila su propia transición, así que aquí van todas juntas. */
                .tabla-alquimistas tbody tr,
                .tabla-alquimistas tbody tr.qg-content-search-result-item {
                    transition: opacity .42s ease-out, transform .42s ease-out, scale .3s ease, background-color .3s ease;
                }

                /* El resaltado se pinta en las celdas, no en la fila: con el espaciado entre columnas, el fondo de la
                   fila se veía cortado a trozos. Los extremos van redondeados para que la fila no parezca un ladrillo. */
                .tabla-alquimistas tbody tr.fila-jugador td {
                    background-color: transparent;
                    transition: background-color .3s ease;
                }

                .tabla-alquimistas tbody tr.fila-jugador td:first-child {
                    border-top-left-radius: .7rem;
                    border-bottom-left-radius: .7rem;
                }

                .tabla-alquimistas tbody tr.fila-jugador td:last-child {
                    border-top-right-radius: .7rem;
                    border-bottom-right-radius: .7rem;
                }

                .tabla-alquimistas tbody tr.fila-jugador:hover td,
                .tabla-alquimistas tbody tr.fila-jugador:focus-within td {
                    background-color: var(--qg-public-color-bronze-20);
                }

                .tabla-alquimistas tbody tr.fila-jugador:hover,
                .tabla-alquimistas tbody tr.fila-jugador:focus-within {
                    scale: 1.015;
                }
                @media (prefers-reduced-motion: reduce) {
                    .tabla-alquimistas tbody tr {
                        transition: none;
                    }
                    .tabla-alquimistas tbody tr.fila-jugador:hover,
                    .tabla-alquimistas tbody tr.fila-jugador:focus-within {
                        scale: none;
                    }
                }
                /* --- PRIMER LUGAR (ORO) --- */
                .spell-counter.rango-1 {
                    /* Basado en tu estructura de plata, pero con tonos metálicos dorados */
                    background: var(--qg-public-gradient-jugadores-spell-counter-rango-1);
                    color: var(--qg-public-moc-surface-sunken); /* Mantengo tu color de texto oscuro del plata */
                    box-shadow: 0 0 15px var(--qg-public-color-goldenrod-50);
                    border: 1px solid var(--qg-public-color-gold-pale); /* Un borde dorado pálido, no blanco puro */
                }

                /* --- SEGUNDO LUGAR (PLATA) --- */
                .spell-counter.rango-2 {
                    background: var(--qg-public-gradient-jugadores-spell-counter-rango-2);
                    color: var(--qg-public-moc-surface-sunken);
                    box-shadow: 0 0 15px var(--qg-public-color-silver-50);
                    border: 1px solid var(--qg-public-color-white);
                }

                /* --- TERCER LUGAR (BRONCE) --- */
                .spell-counter.rango-3 {
                    background: var(--qg-public-gradient-jugadores-spell-counter-rango-3);
                    color: var(--qg-public-moc-text);
                    box-shadow: 0 0 15px var(--qg-public-color-sienna-50);
                    border: 1px solid var(--qg-public-color-bronze-pale);
                }

                @media screen and (max-width: 700px) {
                    /* Ajustamos el contenedor principal para que ocupe más ancho */
                    .contenedor-ranking {
                        width: 95% !important;
                        margin: 20px auto;
                    }

                    .clasificatoria-header {
                        padding: 18px 8px 8px;
                    }

                    .clasificatoria-header h1 {
                        font-size: 1.65rem;
                        letter-spacing: 1px;
                        max-width: 100%;
                    }

                    /* Transformamos la tabla para que no necesite scroll horizontal */
                    .tabla-alquimistas {
                        width: 100%;
                        margin: 0;
                    }

                        /* Ocultamos el thead (cabecera) original para reconstruirlo visualmente */
                        .tabla-alquimistas thead {
                            display: none;
                        }

                        .tabla-alquimistas tr {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            border-bottom: 1px solid var(--qg-public-color-bronze-20);
                            padding: 15px 5px;
                            margin-bottom: 5px;
                        }

                        .tabla-alquimistas td {
                            display: block;
                            padding: 5px !important;
                            height: auto;
                        }

                    /* Prioridad visual: Rango y Foto arriba */
                    .col-rango {
                        width: 20% !important;
                        order: 1;
                    }

                    .col-foto {
                        width: 30% !important;
                        order: 2;
                        display: flex;
                        justify-content: center;
                    }

                    /* Nombre ocupa el resto de la fila superior */
                    .col-nombre {
                        width: 50% !important;
                        order: 3;
                        text-align: left !important;
                        font-size: 1rem;
                    }

                    /* El ELO lo movemos a una posición destacada o debajo */
                    .col-elo {
                        width: 100% !important;
                        order: 4;
                        text-align: right !important;
                        font-size: 0.9rem;
                        color: var(--qg-public-color-bronze);
                    }

                        /* Añadimos un prefijo para identificar el ELO en móvil */
                        .col-elo::before {
                            content: attr(data-label) ": ";
                            font-size: 0.7rem;
                            text-transform: uppercase;
                            opacity: 0.7;
                            margin-right: 5px;
                        }

                    /* Ajuste del buscador para que no se vea apretado */
                    .buscador-container {
                        padding: 10px 15px;
                    }

                    .input-alquimista {
                        font-size: 0.9rem;
                    }

                    /* Ajuste de los botones de paginado */
                    .paginado-alquimista {
                        flex-direction: column;
                        gap: 10px;
                        padding: 15px;
                    }

                    .pag-info {
                        order: -1; /* Ponemos la info arriba de los botones */
                    }

                    /* Evitamos que el hover escale demasiado en móvil para no tapar otros elementos */
                    .tabla-alquimistas tbody tr.fila-jugador:hover,
                    .tabla-alquimistas tbody tr.fila-jugador:focus-within {
                        scale: 1.01;
                    }
                    .tabla-alquimistas tbody tr td:nth-child(2){
                        display:none
                    }

                    .paginado-alquimista {
                        flex-direction: row; /* Mantenemos fila pero con ajustes */
                        flex-wrap: wrap; /* Si no caben, que bajen */
                        justify-content: center;
                        gap: 15px;
                        padding: 25px 10px;
                    }

                    /* Hacemos que la info de página ocupe todo el ancho para centrarla arriba */
                    .pag-info {
                        width: 100%;
                        text-align: center;
                        order: -1; /* Esto la mueve arriba de los botones */
                        margin-bottom: 5px;
                        font-size: 1rem;
                    }

                    /* Convertimos los botones en botones "táctiles" reales */
                    .pag-btn {
                        flex: 1; /* Hacen que crezcan equitativamente */
                        max-width: 120px;
                        text-align: center;
                        padding: 12px 0; /* Más altos para el dedo */
                        background: var(--qg-public-color-brown-40);
                        border: 1px solid var(--qg-public-color-bronze);
                        border-radius: var(--qg-public-radius-sm);
                        font-size: 1rem;
                    }

                        /* Estilo para los botones desactivados */
                        .pag-btn.disabled {
                            opacity: 0.4;
                            background: var(--qg-public-color-black-20);
                        border-color: var(--qg-public-color-gray-mid);
                    }
                }

                @media screen and (max-width: 380px) {
                    .clasificatoria-header h1 {
                        font-size: 1.35rem;
                        letter-spacing: 0.5px;
                    }
                }