.iconoPequeño {
       width: 17px;
   }

   .partida-detalle-hero {
       margin-bottom: clamp(20px, 2vw, 30px) !important;
   }

   /* La imagen ocupaba media pantalla y es la misma para todas las partidas, asi que no contaba nada. Ahora es una
      miniatura junto al titulo, dentro del bloque de presentacion, y el resumen va aparte en su propio bloque. */
   .partida-detalle-hero > .col-lg-7 {
       display: flex;
       flex-direction: column;
   }

   .partida-detalle-header {
       justify-content: flex-start;
   }

   /* Los dos bloques se tocaban: el fondo va en la propia columna, asi que el canal de la rejilla queda por dentro
      y no se ve como separacion. Se reparte el ancho con flex (7 y 5, como las clases) y se abre un hueco real. */
   @media (min-width: 992px) {
       .partida-detalle-hero {
           column-gap: clamp(1rem, 2vw, 2rem);
       }

       .partida-detalle-hero > .col-lg-7 {
           flex: 7 1 0;
           max-width: none;
       }

       .partida-detalle-hero > .col-lg-5 {
           flex: 5 1 0;
           max-width: none;
       }
   }

   .partida-detalle-header > div:last-child {
       flex: 1 1 auto;
       min-width: 0;
   }

   .partida-detalle-miniatura {
       position: relative;
       flex: 0 0 auto;
       width: clamp(5rem, 9vw, 7.5rem);
   }

   .partida-detalle-miniatura .mpl-gallery-item {
       display: block;
       overflow: hidden;
       border: .0625rem solid var(--qg-public-color-bronze-30);
       border-radius: var(--qg-public-radius-sm);
   }

   .partida-detalle-miniatura img {
       display: block;
       width: 100%;
       aspect-ratio: 1 / 1;
       object-fit: cover;
   }

   /* Lupa de ampliar, a escala de la miniatura. */
   .partida-detalle-miniatura .icon {
       position: absolute;
       right: .375rem;
       bottom: .375rem;
       width: 1rem;
       height: 1rem;
       color: var(--qg-public-moc-text);
       filter: drop-shadow(0 .0625rem .125rem var(--qg-public-color-black-55));
   }

   /* La chapa de oficial estaba dentro de la imagen, en absoluto: junto al titulo va en linea. */
   .partida-detalle-header .badge-oficial {
       position: static;
       display: inline-block;
       margin: .5rem 0 0;
       padding: .25rem .75rem;
       border-radius: var(--qg-public-radius-pill);
       font-size: .8rem;
       opacity: 1;
   }

   .partida-detalle-panel {
       height: 100%;
       padding: clamp(24px, 2.4vw, 34px);
   }

   .partida-detalle-header {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       gap: 18px;
       padding-bottom: 18px;
       border-bottom: 1px solid var(--qg-public-color-white-16);
   }

   .partida-detalle-titulo {
       min-width: 0;
       margin-bottom: 0;
       line-height: 1.15;
       overflow-wrap: anywhere;
   }

   .partida-detalle-titulo img {
       flex: 0 0 auto;
       margin-left: 12px;
   }

   .partida-host {
       margin-top: 10px;
       color: var(--qg-public-color-white-72);
       font-size: 0.95rem;
   }

   .partida-descripcion {
       margin: 22px 0 26px;
       padding: 18px 20px;
       border-left: 3px solid var(--qg-public-color-amber-85);
       background: var(--qg-public-color-black-20);
       color: var(--qg-public-color-white-86);
       line-height: 1.65;
       white-space: pre-line;
   }

   .partida-descripcion--empty {
       color: var(--qg-public-color-white-62);
       font-style: italic;
   }

   .partida-resumen-titulo {
       margin-bottom: 16px;
   }

   .partida-summary-grid {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 12px;
       padding: 0;
       margin: 0;
   }

   .partida-summary-item {
       min-width: 0;
       padding: 14px 16px;
       border: 1px solid var(--qg-public-color-white-12);
       border-radius: var(--qg-public-radius-sm);
       background: var(--qg-public-moc-surface-sunken);
   }

   .partida-summary-item--wide {
       grid-column: 1 / -1;
   }

   .partida-summary-label {
       display: block;
       margin-bottom: 7px;
       color: var(--qg-public-color-white-58);
       font-size: 0.72rem;
       font-weight: 700;
       letter-spacing: 0;
       line-height: 1.2;
       text-transform: uppercase;
   }

   .partida-summary-value {
       display: inline-flex;
       align-items: center;
       max-width: 100%;
       color: var(--qg-public-moc-text);
       font-size: 1rem;
       font-weight: 700;
       line-height: 1.35;
       overflow-wrap: anywhere;
   }

   .partida-summary-badge {
       padding: 5px 10px;
       border-radius: var(--qg-public-radius-pill);
       background: var(--qg-public-color-amber-14);
       color: var(--qg-public-color-amber-light);
   }

   .partida-summary-badge.estado {
       background: var(--qg-public-color-bronze-20);
       color: var(--qg-public-color-stat-peach);
   }

   .ranking-turno-label {
       display: inline-flex;
       margin-bottom: 18px;
       padding: 6px 12px;
       border: 1px solid var(--qg-public-color-amber-32);
       border-radius: var(--qg-public-radius-sm);
       background: var(--qg-public-moc-surface-sunken);
       color: var(--qg-public-color-amber-light);
       font-size: 0.85rem;
       font-weight: 700;
   }

   @media (max-width: 700px) {
   
   .container.principal {
       padding-left: 10px;
       padding-right: 10px;
   }

   
   .col-lg-7, .col-lg-5 {
       width: 100% !important;
       margin-bottom: 20px;
   }

  
   .titulo {
       font-size: 1.5rem !important;
       flex-direction: column;
       align-items: flex-start !important;
   }

   .partida-detalle-panel {
       padding: 20px;
   }

   .partida-detalle-header {
       flex-direction: column;
   }

   .partida-summary-grid {
       grid-template-columns: 1fr;
   }

   .subtitulo {
       font-size: 1.1rem;
   }

  
   .custom-table {
       display: block;
       width: 100%;
       overflow-x: auto; 
       white-space: nowrap;
   }

   .custom-table th, .custom-table td {
       padding: 8px 5px !important;
       font-size: 0.85rem;
   }

   
   .nav-tabs .nav-link {
       padding: 8px 10px;
       font-size: 0.9rem;
   }

   
   .spell-container {
       grid-template-columns: 1fr; 
       padding: 10px;
       gap: 10px;
   }

   .spell-card {
       padding: 10px;
       min-height: 70px;
   }

   .spell-name {
       font-size: 0.9rem;
   }

   .spell-icon-frame img {
       width: 35px !important;
       height: 35px !important;
   }

   
   .search-wrapper {
       max-width: 100%;
   }

  
   .sangria {
       margin-left: 0 !important;
       text-align: justify;
   }

       .trasnsate-l-X-leve {
           padding-right: 30px;
       }

  
   ul.list-unstyled li a {
       display: flex;
       justify-content: space-between;
       flex-wrap: wrap;
       font-size: 0.9rem;
   }
       .badge {
           font-size:80%;
       }
}

                       @media (max-width: 700px) {
                           thead {
                               display: none;
                           }
                           .custom-table tbody,
                           .custom-table tbody tr,
                           .custom-table tbody tr td {
                               display: flex;
                               flex-direction: column;
                           }

                           .custom-table tbody {
                               gap: 15px;
                               width: 90%;
                               margin-left: 5%;
                               margin-right: 5%;
                           }

                               .custom-table tbody tr {
                                   border-radius: var(--qg-public-radius-lg);
                                   border: 1px solid var(--qg-public-color-bronze-30);
                                   
                               }

                                   .custom-table tbody tr td {
                                       flex-direction: row;
                                       justify-content: space-around;
                                       align-content: center;
                                   }
                               .custom-table tbody tr: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-stat-orangered-40);
       }

   #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-stat-orangered-15);
       border-top: 1px solid var(--qg-public-color-stat-salmon-30);

       display: flex;
       align-items: center;
       padding: 12px 18px;
       position: relative;
       overflow: hidden;
       min-height: 85px;
       box-shadow: 0 10px 30px var(--qg-public-color-black-50);
       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-color-stat-fire-50);
       box-shadow: 0 0 20px var(--qg-public-color-stat-fire-light-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-name {
       color: var(--qg-public-moc-text);
       text-transform: uppercase;
       font-weight: 700;
       font-size: 1rem;
       margin: 0;
       padding-right: 50px;
       letter-spacing: 1px;
       /* Resplandor suave para legibilidad sobre fondos oscuros */
       text-shadow: 0 0 10px var(--qg-public-color-stat-red-50);
   }

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

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

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

/* Antes en atributos style y onclick de la vista (WP05). */
.partida-detalle-competitiva {
    height: 32px;
}

/* Cabeceras ordenables del ranking: botones con aspecto de texto, usables con teclado. */
.custom-table .partida-ordenar {
    padding: 0;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    text-align: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.custom-table .partida-ordenar:focus-visible {
    outline: 2px solid var(--qg-public-color-amber-85);
    outline-offset: 2px;
}

.custom-table .col-nombre a {
    color: inherit;
    text-decoration: none;
}

.custom-table .col-nombre a:hover,
.custom-table .col-nombre a:focus-visible {
    text-decoration: underline;
}

.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-spell-icon-glow));
}

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

/* Boton para destapar el resto de alquimias: de entrada solo se ven las diez primeras. */
.alquimia-ver-todo {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

/* WP20: aviso de la pestaña de alquimia mientras la partida sigue en juego. */
.partida-alquimia-oculta {
    margin: 0;
    padding: var(--qg-public-space-lg) var(--qg-public-space-sm);
    color: var(--qg-public-moc-text-muted);
    text-align: center;
}

/* WP22: los detalles avanzados, en grupos de datos. Antes eran acordeones de la plantilla en los que cada dato
   era un enlace a ninguna parte, y el grupo "Detalles generales" no llegaba a verse nunca. */
.partida-datos {
    display: flex;
    flex-direction: column;
    gap: var(--qg-public-space-md);
}

.partida-datos-titulo {
    margin: 0 0 var(--qg-public-space-sm);
    color: var(--qg-public-color-parchment-gold);
    font-family: var(--qg-public-font-heading);
    font-size: 1.1rem;
}