/* La vista viste la piel de Master of Cladia: superficie de carbon, marco de bronce y tinta de pergamino.
   Los valores salen de tokens.css (capa Cladia) y lo comun, de moc-skin.css.

   Antes declaraba aqui su propia paleta -azules de interfaz y acentos neon- y, sobre todo, repintaba con
   `body { background }` el fondo de toda la pagina, que es lo que hacia que el perfil pareciera otra web. */
    body {
        font-family: var(--qg-public-font-body);
        color: var(--qg-public-moc-text);
    }

    .card {
        background: var(--qg-public-moc-surface-card);
        border-radius: var(--qg-public-radius-lg);
        padding: 20px;
        border: solid 1px var(--qg-public-color-bronze-30);
    }

    /* Columna Izquierda */
    .analytics-card {
        flex: 2;
    }

    .analytics-content {
        display: flex;
        gap: 30px;
        margin-top: 20px;
        justify-content: center;
        align-content: center;
    }


    .spell-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--qg-public-color-white-02);
        padding: 10px;
        margin-bottom: 8px;
        border-radius: var(--qg-public-radius-sm);
        min-width: 250px;
    }

    /* Columna Derecha */
    .nemesis-stats {
        display: flex;
        gap: 20px;
        margin: 15px 0;
        justify-content: space-between;
    }

    .red {
        color: var(--qg-public-moc-negative) !important;
        font-size: 1.5rem;
    }

    .green {
        color: var(--qg-public-moc-positive) !important;
        font-size: 1.5rem;
    }

    .lore {
        font-size: 0.85rem;
        font-style: italic;
        color: var(--qg-public-moc-text-muted) !important;
        line-height: 1.4;
        border-left: 2px solid var(--qg-public-moc-accent);
        padding-left: 10px;
    }

    .achievement {
        display: flex;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid var(--qg-public-color-white-05);
    }

        .achievement.locked {
            opacity: 0.4;
            filter: grayscale(1);
        }

    .btn-full {
        width: 100%;
        background: transparent;
        border: 1px solid var(--qg-public-color-white-10);
        color: var(--qg-public-moc-text-muted) !important;
        padding: 10px;
        margin-top: 15px;
        cursor: pointer;
        border-radius: var(--qg-public-radius-sm);
        transition: 0.3s;
    }

        .btn-full:hover {
            background: var(--qg-public-color-white-05);
            color: var(--qg-public-moc-text) !important;
        }

    .contentPerfil {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .dragon-card {
        display: flex;
        align-items: center;
        padding: 10px 14px;
        max-width: 350px;

        background: var(--qg-public-gradient-perfil-jugador-dragon-card);
        border: 1px solid var(--qg-public-color-leather);
        border-radius: var(--qg-public-radius-md);
        box-shadow: 0 0 12px var(--qg-public-color-leather-40);
        font-family: var(--qg-public-font-heading);
        color: var(--qg-public-color-parchment-light) !important;
    }

    /* Círculo de imagen */
    .dragon-avatar {
        width: 80px;
        height: 80px;
        border-radius: var(--qg-public-radius-circle);
        overflow: hidden;
        border: 2px solid var(--qg-public-color-brass);
        flex-shrink: 0;
    }

        .dragon-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    /* Separador decorativo */
    .dragon-separator {
        width: 2px;
        height: 67px;
        margin: 0 12px;
        background: var(--qg-public-gradient-perfil-jugador-dragon-separator);
        box-shadow: 0 0 6px var(--qg-public-color-brass-80);
    }

    /* Texto */
    .dragon-content h4 {
        margin: 0;
        font-size: 20px;
        letter-spacing: 0.5px;
    }

    .dragon-content span {
        font-size: 14px;
        color: var(--qg-public-color-parchment-gold);
    }

    .carrucel {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 2%;
    }

    .history-container {
        margin-top: 40px;
        max-width: 900px;
    }

    .section-title {
        font-size: 14px;
        color: var(--qg-public-moc-text-muted);
        letter-spacing: 2px;
        margin-bottom: 20px;
    }

    /* Tarjeta de Partida */
    .match-card {
        background: var(--qg-public-moc-surface-sunken);
        border: 1px solid var(--qg-public-color-bronze-30);
        border-radius: var(--qg-public-radius-sm);
        display: flex;
        align-items: center;
        padding: 15px 25px;
        margin-bottom: 12px;
        position: relative;
        overflow: hidden;
    }

    /* Barra lateral de estado */
    .match-status-bar {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
    }

    /* Colores según resultado */
    .match-card.Victoria .match-status-bar {
        background: var(--qg-public-moc-positive);
        box-shadow: 0 0 10px var(--qg-public-moc-positive);
    }

    .match-card.Victoria .match-result {
        color: var(--qg-public-moc-positive);
    }

    .match-card.Derrota .match-status-bar {
        background: var(--qg-public-moc-negative);
        box-shadow: 0 0 10px var(--qg-public-moc-negative);
    }

    .match-card.Derrota .match-result {
        color: var(--qg-public-moc-negative);
    }

    .match-card.Pendiente .match-status-bar {
        background: var(--qg-public-color-parchment-gold); /* Azul neón */
        box-shadow: 0 0 10px var(--qg-public-color-parchment-gold);
    }

    .match-card.Pendiente .match-result {
        color: var(--qg-public-color-parchment-gold);
    }
    /*seleccionado*/
    @keyframes glowPulse {
        0% {
            box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
        }

        50% {
            box-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
        }

        100% {
            box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
        }
    }

    .match-card.Victoria:hover {
        color: var(--qg-public-moc-positive);
        animation: glowPulse 1.2s infinite;
        transform: scale(1.02);
    }

    .match-card.Derrota:hover {
        color: var(--qg-public-moc-negative);
        animation: glowPulse 1.2s infinite;
        transform: scale(1.02);
    }

    .match-card.Pendiente:hover {
        color: var(--qg-public-color-parchment-gold);
        animation: glowPulse 1.2s infinite;
        transform: scale(1.02);
    }
    /* Distribución de la información */
    .match-role {
        font-weight: bold;
        font-size: 16px;
        color: var(--qg-public-moc-text);
        letter-spacing: 1px;
    }

    .match-details {
        font-size: 12px;
        color: var(--qg-public-moc-text-muted);
        margin-top: 4px;
    }

    .match-label {
        font-size: 10px;
        color: var(--qg-public-moc-text-muted);
        font-weight: bold;
    }

    .match-value {
        font-size: 13px;
        color: var(--qg-public-moc-text);
        margin-top: 2px;
    }

    .match-result {
        font-weight: bold;
        font-size: 14px;
        letter-spacing: 1px;
    }

    .match-kda {
        font-size: 12px;
        color: var(--qg-public-moc-text-muted);
        margin-top: 2px;
    }

    .kda-highlight {
        color: var(--qg-public-moc-highlight); /* Azul para resaltar los números del KDA */
    }

    .animacion:hover {
        scale: 1.01;
    }

    .search-box-container {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .search-wrapper {
        position: relative;
        width: 100%;
        max-width: 400px;
        background: var(--qg-public-color-blood-dark-50);
        backdrop-filter: blur(10px);
        border-radius: var(--qg-public-radius-md);
        border: 1px solid var(--qg-public-color-bronze-30);
        padding: 5px 15px;
        display: flex;
        align-items: center;
        transition: 0.3s;
    }

        .search-wrapper:focus-within {
            border-color: var(--qg-public-moc-negative);
            box-shadow: 0 0 15px var(--qg-public-color-gold-shadow);
        }

    #spellSearch {
        background: transparent;
        border: none;
        color: var(--qg-public-moc-text);
        padding: 10px;
        width: 100%;
        outline: none;
        font-family: var(--qg-public-font-body);
    }

    #clearSearch {
        background: var(--qg-public-color-white-10);
        border: none;
        color: var(--qg-public-moc-negative);
        border-radius: var(--qg-public-radius-circle);
        width: 25px;
        height: 25px;
        cursor: pointer;
        font-weight: bold;
        transition: 0.2s;
    }

        #clearSearch:hover {
            background: var(--qg-public-color-bronze-30);
            color: var(--qg-public-moc-text);
        }

    /* Clase para ocultar con suavidad */
    .spell-card.hidden {
        display: none !important;
    }
    /* Contenedor adaptado al layout de tu imagen */
    .spell-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 15px;
        padding: 20px;
        background: var(--qg-public-color-black-20); /* Sutil fondo para agrupar */
        border-radius: var(--qg-public-radius-xl);
    }

    .spell-card {
        /* Fondo similar a tus paneles de la derecha en la imagen */
        background: var(--qg-public-color-wine-dark-70);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        /* Bordes redondeados consistentes con tu UI */
        border-radius: var(--qg-public-radius-lg);
        border: 1px solid var(--qg-public-color-bronze-20);
        border-top: 1px solid var(--qg-public-color-bronze-30);
        display: flex;
        align-items: center;
        padding: 12px 18px;
        position: relative;
        overflow: hidden;
        min-height: 85px;
        box-shadow: var(--qg-public-shadow-1);
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

        .spell-card:hover {
            transform: scale(1.03);
            border-color: var(--qg-public-moc-accent);
            box-shadow: 0 0 20px var(--qg-public-color-bronze-20);
        }

    /* Envoltura del nombre con máscara */
    .spell-info-wrapper {
        flex: 1;
        min-width: 0;
        margin-right: 35px;
        overflow: hidden;
        -webkit-mask-image: var(--qg-public-gradient-partida-detalle-spell-info-wrapper);
        mask-image: var(--qg-public-gradient-partida-detalle-spell-info-wrapper);
    }

    .marquee-infinite {
        display: inline-flex;
        white-space: nowrap;
        animation: loop-scroll 12s linear infinite;
    }
    spell-list{
        width:50%;
    }

    .spell-name {
        color: var(--qg-public-moc-text);
        text-transform: uppercase;
        font-weight: 700;
        font-size: 0.8rem;
        margin: 0;
        letter-spacing: 1px;
        /* Resplandor suave para legibilidad sobre fondos oscuros */
        text-shadow: 0 0 10px var(--qg-public-color-black-50);
        text-align: center
    }

    .spell-category {
        font-size: 0.7rem;
        color: var(--qg-public-color-gold-pale);
        text-transform: uppercase;
        font-weight: bold;
        display: block;
        margin-top: 2px;
        text-align: center
    }

    /* Contador: Estilo Gema de Dragón */
    .spell-counter {
        position: absolute;
        right: 12px;
        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-bronze-30);
        border: 1px solid var(--qg-public-color-white-50);
    }

    .counter-value {
        transform: rotate(-45deg); /* Enderezar el número dentro del diamante */
        font-size: x-small;
    }

    @keyframes loop-scroll {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-50%);
        }
    }



    .centrar {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .chart-wrapper {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }


    .card-heard-log {
        display: flex;
        justify-content: space-between;
        padding-bottom: 0;
    }

    .achievement-list{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;

    }
    .ContenedorCamba {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /* El tamano lo pone Chart.js, que es responsive; aqui solo se dice que es un bloque. Escribirlo a
       mano con !important era lo que impedia que la grafica se adaptara a su hueco. */
    #graficoHechizos {
        display: block;
        box-sizing: border-box;
    }
    @media (max-width: 700px) {
    /* 3. Reorganizamos la Alquimia (Gráfico arriba, lista abajo) */
    .analytics-content {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .ContenedorCamba {
        width: 100% !important;
    }

    .spell-list {
        width: 100% !important;
    }

    /* 5. Logros: los ponemos en vertical para que se lean bien */
    .achievement-list {
        flex-direction: column;
        width: 100%;
    }

    .dragon-card {
        max-width: 100%;
        width: 100%;
    }

    /* 7. Ajustes de fuentes */
    .section-title {
        text-align: center;
    }

    h2, h3 {
        font-size: 1.2rem;
    }
}

/* Los titulos de tarjeta llevan la tinta y la fuente de la piel, como el filete de bronce que va debajo. */
.perfil-titulo-tarjeta {
    margin-bottom: 0;
    color: var(--qg-public-color-parchment-gold);
    font-family: var(--qg-public-font-heading);
}

.perfil-titulo-tarjeta--centrado {
    text-align: center;
}

.perfil-texto-claro {
    color: var(--qg-public-moc-text) !important;
}

.ContenedorCamba.ContenedorCamba--perfil {
    flex: 0 1 20rem;
    min-width: 0;
    max-width: 20rem;
}

.spell-icon-frame.spell-icon-frame--lista {
    flex-shrink: 0;
    margin-right: 12px;
}

.spell-icon-frame .spell-icon-crown {
    width: 45px;
    height: 45px;
    filter: drop-shadow(0 0 5px var(--qg-public-color-gold-shadow));
}

.spell-category.spell-category--perfil {
    display: block;
    opacity: .6;
    font-size: .7rem;
    margin-top: -5px;
}

.dragon-avatar .dragon-avatar-img--reducida {
    width: 60%;
    height: 60%;
    translate: 30% 30%;
}

/* El historial es ahora una lista de enlaces al detalle de cada partida (antes un div con onclick). */
a.match-card {
    color: inherit;
    text-decoration: none;
}

a.match-card:focus-visible {
    outline: 2px solid var(--qg-public-color-white-50);
    outline-offset: 2px;
}

/* Cuando el jugador no ha lanzado ninguna alquimia, la tarjeta se quedaba enorme y en blanco. */
/* Sin alquimias, la tarjeta tampoco se estira para igualar a la columna de al lado: se cine a su aviso. */
.perfil-analisis-card:has(.perfil-sin-alquimias) {
    align-self: start;
}

.perfil-sin-alquimias {
    margin: 0;
    padding: var(--qg-public-space-lg) var(--qg-public-space-sm);
    color: var(--qg-public-moc-text-muted);
    text-align: center;
}

/* ==========================================================================
   WP32: el cuerpo del perfil, en una sola rejilla

   Antes eran contenedores en flex anidados con anchos del 70 % escritos a mano, heredados de la maqueta: la
   alquimia dentro de una columna que a su vez estaba dentro de otra, y las rivalidades apiladas al lado en dos
   tarjetas de 314 px. La pagina pedia 2.614 px de desplazamiento para un perfil.
   ========================================================================== */

.perfil-rejilla {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--qg-public-space-md);
    align-items: start;
    width: 100%;
    padding: var(--qg-public-space-md) 0;
}

/* El historial cruza las dos columnas, debajo de todo. */
.perfil-historial-card {
    grid-column: 1 / -1;
}

.perfil-lateral {
    display: flex;
    flex-direction: column;
    gap: var(--qg-public-space-md);
}

/* --- Rivalidades: las dos, una al lado de la otra, en la misma tarjeta (WP34) --- */

.perfil-rivalidades {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--qg-public-space-sm);
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}

/* El filete que separaba las dos filas pasa a ser vertical, entre las dos columnas. */
.perfil-rivalidad + .perfil-rivalidad {
    padding-left: var(--qg-public-space-sm);
    border-left: .0625rem solid var(--qg-public-color-bronze-30);
}

/* Cada rivalidad dispone de la mitad de la tarjeta, que en la columna estrecha de la rejilla son unos 180 px:
   el nombre del rival se recorta si no cabe y las dos cifras se apilan en vez de ir en linea. */
.perfil-rivalidad {
    min-width: 0;
}

.perfil-rivalidad-papel {
    display: flex;
    align-items: center;
    color: var(--qg-public-moc-text-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.perfil-rivalidad-nombre {
    display: block;
    overflow: hidden;
    margin-top: .2rem;
    color: var(--qg-public-color-parchment-gold);
    font-family: var(--qg-public-font-heading);
    font-size: 1.15rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.perfil-rivalidad-nombre:hover,
.perfil-rivalidad-nombre:focus-visible {
    color: var(--qg-public-moc-text);
    text-decoration: underline;
}

.perfil-rivalidad-cifras {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin: .25rem 0 0;
    color: var(--qg-public-moc-text-muted);
    font-size: .8rem;
}

/* Las dos cifras de la rivalidad se leian a 1,5 rem, mas grandes que el nombre del rival. */
.perfil-rivalidad-cifras .red,
.perfil-rivalidad-cifras .green {
    font-size: 1rem;
}

.perfil-rivalidad-vacia {
    margin: .2rem 0 0;
    color: var(--qg-public-moc-text-muted);
    font-style: italic;
}

.perfil-sin-logros {
    margin: 0;
    color: var(--qg-public-moc-text-muted);
    text-align: center;
}

/* --- Historial: una partida por linea --- */

.perfil-historial-card .match-card {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: var(--qg-public-space-sm);
    padding: .7rem 1rem .7rem 1.4rem;
    margin-bottom: .5rem;
}

.perfil-historial-card .match-role {
    overflow: hidden;
    font-size: .95rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.perfil-historial-card .match-details {
    margin-top: 0;
    white-space: nowrap;
}

.perfil-historial-card .match-time {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    white-space: nowrap;
}

.perfil-historial-card .match-value {
    margin-top: 0;
}

.perfil-historial-card .match-result {
    min-width: 5.5rem;
    text-align: right;
}

@media (max-width: 992px) {
    .perfil-rejilla {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .perfil-rejilla {
        gap: var(--qg-public-space-sm);
        padding: var(--qg-public-space-sm) 0;
    }

    /* El nombre de la partida se queda con su linea y debajo van la fecha, los turnos y el resultado. */
    .perfil-historial-card .match-card {
        grid-template-columns: auto auto 1fr;
        row-gap: .25rem;
    }

    .perfil-historial-card .match-role {
        grid-column: 1 / -1;
        white-space: normal;
    }

    .perfil-historial-card .match-result {
        min-width: 0;
    }
}

/* WP34: las dos rivalidades se apilan cuando no caben al lado.

   Lo decide el ancho de su propia tarjeta, no el de la ventana, porque no van juntos: la tarjeta mide 424 px en
   una ventana de 1366, pero solo 315 en una de 1024 -la rejilla sigue a dos columnas y la de al lado se lleva
   dos tercios-, y en cambio pasa a ocupar el ancho entero por debajo de 992, cuando la rejilla se rinde a una
   sola columna. Con un punto de corte de ventana habria que perseguir esos saltos; preguntando por el ancho del
   contenedor, salen solas.

   El umbral esta medido: el rotulo mas largo, "VICTIMA FAVORITA", ocupa 120 px, y con su boton de ayuda y la
   separacion cada rivalidad necesita 152 px para no partirse en dos lineas. Dos columnas, su hueco y el filete
   piden 336 px; 22rem deja un poco de holgura por encima. */
.perfil-rivalidades-card {
    container-type: inline-size;
}

@container (max-width: 22rem) {
    .perfil-rivalidades {
        grid-template-columns: 1fr;
    }

    .perfil-rivalidad + .perfil-rivalidad {
        padding-top: var(--qg-public-space-sm);
        padding-left: 0;
        border-top: .0625rem solid var(--qg-public-color-bronze-30);
        border-left: 0;
    }

    /* Con la tarjeta ancha, las cifras vuelven a caber en una linea. */
    .perfil-rivalidad-cifras {
        flex-direction: row;
        gap: var(--qg-public-space-sm);
    }
}

/* ==========================================================================
   Repaso del 2026-09-30, sobre WP32 y WP34
   ========================================================================== */

/* Las dos rivalidades, centradas en su columna. El nombre y las dos cifras comparten un bloque del mismo ancho,
   alineado por dentro a la izquierda: centrando cada linea por separado, "Juan", "5 Caidas" y "2 Eliminaciones"
   quedarian desalineadas entre si. */
.perfil-rivalidad {
    text-align: center;
}

.perfil-rivalidad-papel {
    justify-content: center;
}

.perfil-rivalidad-datos {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: left;
}

/* El titulo de Logros iba pegado a la izquierda, con el contador al otro extremo, mientras su filete de neon si
   estaba centrado, como los de las demas tarjetas. El contador se saca del reparto para que el titulo quede en
   el centro de la tarjeta. */
.card-heard-log {
    position: relative;
    justify-content: center;
}

.card-heard-log .progress-txt {
    position: absolute;
    top: 0;
    right: 0;
}

/* La lista de alquimias se quedaba con el ancho de sus tarjetas y dejaba el resto de la tarjeta vacio a los
   lados. Ahora ocupa el hueco que sobra. */
.perfil-analisis-card .analytics-content {
    align-items: center;
}

.perfil-analisis-card .spell-list {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 34rem;
}

/* El historial cruza las dos columnas de la rejilla, asi que sus filas se estiraban hasta dejar un vacio enorme
   entre el nombre de la partida y sus datos. Se les pone un ancho maximo y se centran.

   El centrado va con `align-self`, no con margenes automaticos: la tarjeta es un contenedor flexible en columna
   y un margen automatico en un elemento flexible anula su estirado, que es lo que dejaba las filas en 397 px. */
.perfil-historial-card .match-card {
    align-self: center;
    width: 100%;
    max-width: 65rem;
    /* La fecha, los turnos y el resultado se reparten anchos fijos, para que caigan en la misma vertical en
       todas las filas y se lean como las columnas de una tabla; el nombre se queda con lo que sobra. */
    grid-template-columns: minmax(0, 1fr) 6rem 5.5rem 6rem;
}