/*
    Grimorio (Views/Grimorio/Grimorio): listado de los elementos del juego y su ventana. La ficha carga también esta
    hoja por el fondo y los botones comunes y añade grimorio-ficha.css.
    Toda la página lleva la piel de Master of Cladia, controles incluidos (decisión del usuario, 2026-09-27): portada
    de pergamino, panel de filtros y fichas en la ventana carbón con bronce de las dotes, pestañas y filtros de cuero
    y latón, y la pestaña activa en oro. Los colores de rareza (--qg-game-rarity) y las fuentes del juego salen de
    game-element.css.
*/

/* Igual que el listado de partidas: clip en lugar de hidden para no crear un contenedor de scroll. */
.parallax-background.grimorio-fondo {
    display: flow-root;
    padding-bottom: 4rem;
    overflow: clip;
}

/* Escena de Master of Cladia en lugar de las estrellas de Quasar, como en jugadores y en el perfil. */
.parallax-background.grimorio-fondo::before {
    background-image: url("../../../Recursos/Fondos/castillo.webp");
}

.grimorio-layout {
    max-width: min(1200px, calc(100% - 24px));
}

/* ------------------------------------------------------------------ Cabecera: tira de página de libro sobre el panel */

/* Compacta y pegada encima del panel de filtros, con su mismo ancho: título y entradilla en una línea. La tapa de
   cuero es el propio borde (arriba y a los lados); la página, envejecida y con los bordes tostados. Va por encima
   del panel para que la sombra de este no la oscurezca. */
.grimorio-portada {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: .2rem 1rem;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: .5rem 1.25rem;
    border: .35rem solid transparent;
    border-bottom: 0;
    border-radius: var(--qg-public-radius-sm) var(--qg-public-radius-sm) 0 0;
    color: var(--qg-public-color-game-ink);
    background: var(--qg-public-gradient-moc-book-page) padding-box, var(--qg-public-gradient-moc-leather) border-box;
    box-shadow: inset 0 0 1.5rem var(--qg-public-color-sienna-50), inset 0 0 .3rem var(--qg-public-color-brown-40);
    text-align: center;
}

.grimorio-portada__titulo {
    margin: 0;
    color: var(--qg-public-color-game-ink-brown);
    font-family: var(--qg-public-font-game-title);
    font-size: 2rem;
    line-height: 1.5;
}

.grimorio-portada__texto {
    margin: 0;
    padding-left: 1rem;
    border-left: .0625rem solid var(--qg-public-color-brown-40);
    color: var(--qg-public-color-game-ink);
    font-family: var(--qg-public-font-game-text);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.35;
}

/* El panel continúa la cabecera: sin esquinas ni remate arriba. */
.grimorio-portada + .grimorio-filtros {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.grimorio-portada + .grimorio-filtros::before {
    display: none;
}

/* ------------------------------------------------------------------ Panel de filtros: ventana carbón y bronce */

.grimorio-filtros {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 0 2rem;
    padding: 1.25rem 1.35rem;
    border: .0625rem solid var(--qg-public-color-game-frame-55);
    border-radius: var(--qg-public-radius-xs);
    outline: .0625rem solid var(--qg-public-color-game-frame-25);
    outline-offset: -.45rem;
    background: var(--qg-public-gradient-game-window);
    box-shadow: var(--qg-public-shadow-game-card);
    font-family: var(--qg-public-font-game-text);
}

.grimorio-filtros::before,
.grimorio-filtros::after {
    position: absolute;
    left: 50%;
    width: .7rem;
    height: .7rem;
    border: .0625rem solid var(--qg-public-color-game-frame-55);
    background: var(--qg-public-color-game-window-dark);
    content: "";
    transform: translateX(-50%) rotate(45deg);
}

.grimorio-filtros::before {
    top: -.38rem;
}

.grimorio-filtros::after {
    bottom: -.38rem;
}

.grimorio-filtros__fila {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.grimorio-filtros__fila[hidden] {
    display: none;
}

/* Fila 1: buscador de pergamino y «Limpiar filtros» a la derecha. */
.grimorio-filtros__fila--busqueda {
    flex-wrap: nowrap;
    gap: .75rem;
}

/* El campo, en la misma página envejecida de la portada: el pergamino claro deslumbraba. */
.grimorio-filtros .grimorio-filtros__buscar.qg-content-search-input {
    flex: 1 1 auto;
    width: auto;
    border-color: var(--qg-public-color-brown);
    color: var(--qg-public-color-game-ink);
    background: var(--qg-public-color-parchment-gold);
    box-shadow: inset 0 .125rem .5rem var(--qg-public-color-brown-40);
    font-family: var(--qg-public-font-game-text);
    font-weight: 700;
}

.grimorio-filtros .grimorio-filtros__buscar.qg-content-search-input::placeholder {
    color: var(--qg-public-color-brown);
}

.grimorio-filtros .grimorio-filtros__buscar.qg-content-search-input:hover,
.grimorio-filtros .grimorio-filtros__buscar.qg-content-search-input:focus {
    border-color: var(--qg-public-color-brass);
    background: var(--qg-public-color-parchment-mid);
    box-shadow: inset 0 .125rem .5rem var(--qg-public-color-brown-40), 0 0 0 .1875rem var(--qg-public-color-bronze-30);
}

.grimorio-filtros .grimorio-filtros__buscar.qg-content-search-input::-webkit-search-cancel-button {
    background-color: var(--qg-public-color-brown);
}

.grimorio-filtros .grimorio-filtros__limpiar.qg-content-search-reset,
.grimorio-boton {
    display: inline-flex;
    flex: 0 0 auto;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    min-height: 2.875rem;
    padding: 0 1rem;
    border: .0625rem solid var(--qg-public-color-brass-80);
    border-radius: var(--qg-public-radius-sm);
    color: var(--qg-public-color-brass-light);
    background: var(--qg-public-color-black-30);
    font-family: var(--qg-public-font-game-text);
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.grimorio-filtros .grimorio-filtros__limpiar.qg-content-search-reset:hover,
.grimorio-filtros .grimorio-filtros__limpiar.qg-content-search-reset:focus-visible,
.grimorio-boton:hover,
.grimorio-boton:focus-visible {
    border-color: var(--qg-public-color-gold-light);
    color: var(--qg-public-color-gold-bright);
    background: var(--qg-public-color-bronze-20);
}

/* Botón principal: oro, como la pestaña activa. */
.grimorio-boton--principal {
    border-color: var(--qg-public-color-gold-dark);
    color: var(--qg-public-color-ink-gold);
    background: var(--qg-public-gradient-gold);
    box-shadow: var(--qg-public-shadow-gold);
}

.grimorio-boton--principal:hover,
.grimorio-boton--principal:focus-visible {
    border-color: var(--qg-public-color-gold-light);
    color: var(--qg-public-color-ink-gold);
    background: var(--qg-public-gradient-gold-light);
    box-shadow: var(--qg-public-shadow-gold-hover);
}

.grimorio-boton:focus-visible,
.grimorio-filtros .grimorio-filtros__limpiar.qg-content-search-reset:focus-visible {
    outline: .125rem solid var(--qg-public-color-game-frame);
    outline-offset: .125rem;
}

/* Fila 2: pestañas por tipo, de cuero; la activa, en oro. */
.grimorio-pestana,
.grimorio-filtro {
    position: relative;
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    margin: 0;
    border: .0625rem solid var(--qg-public-color-bronze-75);
    border-radius: var(--qg-public-radius-sm);
    color: var(--qg-public-moc-text);
    background: var(--qg-public-gradient-moc-leather);
    box-shadow: inset 0 .0625rem 0 var(--qg-public-color-white-10), 0 .125rem .35rem var(--qg-public-color-black-38);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.grimorio-pestana {
    padding: .5rem .55rem .5rem .95rem;
    font-size: 1rem;
}

.grimorio-pestana:hover,
.grimorio-filtro:hover {
    border-color: var(--qg-public-color-brass);
    color: var(--qg-public-color-parchment-light);
    box-shadow: inset 0 .0625rem 0 var(--qg-public-color-white-10), 0 0 .75rem var(--qg-public-color-bronze-30);
}

/* La casilla real queda oculta pero accesible: la pestaña es su etiqueta. */
.grimorio-pestana__radio,
.grimorio-filtro__casilla {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.grimorio-pestana__total,
.grimorio-filtro__total {
    min-width: 1.75rem;
    padding: .125rem .45rem;
    border-radius: var(--qg-public-radius-pill);
    color: var(--qg-public-moc-text);
    background: var(--qg-public-color-black-30);
    font-size: .75rem;
    text-align: center;
}

.grimorio-pestana:has(.grimorio-pestana__radio:checked) {
    border-color: var(--qg-public-color-gold-dark);
    color: var(--qg-public-color-ink-gold);
    background: var(--qg-public-gradient-gold);
    box-shadow: var(--qg-public-shadow-gold);
}

.grimorio-pestana:has(.grimorio-pestana__radio:checked) .grimorio-pestana__total {
    color: var(--qg-public-color-ink-gold);
    background: var(--qg-public-color-white-35);
}

.grimorio-pestana:has(.grimorio-pestana__radio:focus-visible),
.grimorio-filtro:has(.grimorio-filtro__casilla:focus-visible) {
    outline: .125rem solid var(--qg-public-color-game-frame);
    outline-offset: .125rem;
}

/* Fila 3: filtros del tipo activo (rareza o nivel); marcados, en pergamino. */
.grimorio-filtros__grupo {
    gap: .4rem;
}

/* Flotada, la leyenda deja de ser la del fieldset y se coloca en fila con los filtros. */
.grimorio-filtros__titulo {
    float: left;
    width: auto;
    margin: 0 .5rem 0 0;
    padding: 0;
    color: var(--qg-public-color-brass-light);
    font-family: var(--qg-public-font-game-title);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.2;
}

.grimorio-filtro {
    gap: .4rem;
    padding: .3rem .4rem .3rem .65rem;
    font-size: .875rem;
}

.grimorio-filtro:has(.grimorio-filtro__casilla:checked) {
    border-color: var(--qg-public-color-brass);
    color: var(--qg-public-color-game-ink);
    background: var(--qg-public-color-parchment-mid);
    box-shadow: inset 0 0 .4rem var(--qg-public-color-brown-35), 0 0 .75rem var(--qg-public-color-bronze-30);
}

.grimorio-filtro:has(.grimorio-filtro__casilla:checked) .grimorio-filtro__total {
    color: var(--qg-public-color-game-ink);
    background: var(--qg-public-color-brown-30);
}

/* Muestra del color de la rareza, el mismo del marco de las dotes. */
.grimorio-filtro__muestra {
    width: .75rem;
    height: .75rem;
    border-radius: var(--qg-public-radius-xs);
    background: var(--qg-game-rarity);
    box-shadow: 0 0 0 .0625rem var(--qg-public-color-black-55);
}

/* ------------------------------------------------------------------ Panel de filtros en móvil (JC13) */

/* En escritorio, el panel no existe a efectos de maquetación: sus filas siguen siendo filas del formulario. */
.grimorio-panel {
    display: contents;
}

.grimorio-panel__cabecera,
.grimorio-panel__seccion,
.grimorio-panel__pie,
.grimorio-panel-abrir,
.grimorio-panel-velo {
    display: none;
}

/* «Ver resultados» lleva aquí: que el principio de la lista no quede bajo la barra superior. */
.grimorio-resultados {
    scroll-margin-top: 7rem;
}

/* ------------------------------------------------------------------ Rejilla de elementos */

.grimorio-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.grimorio-rejilla__item {
    min-width: 0;
    margin: 0;
}

.grimorio-elemento {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    align-items: center;
    height: 100%;
    padding: 1rem .75rem .9rem;
    border: .0625rem solid var(--qg-public-color-game-frame-25);
    border-radius: var(--qg-public-radius-sm);
    color: var(--qg-public-moc-text);
    background: var(--qg-public-gradient-game-window);
    box-shadow: var(--qg-public-shadow-1);
    font-family: var(--qg-public-font-game-text);
    text-align: center;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.grimorio-elemento:hover,
.grimorio-elemento:focus-visible {
    border-color: var(--qg-public-color-game-frame-55);
    color: var(--qg-public-color-white);
    box-shadow: var(--qg-public-shadow-2);
    transform: translateY(-.125rem);
}

.grimorio-elemento:focus-visible {
    outline: .125rem solid var(--qg-public-color-game-frame);
    outline-offset: .125rem;
}

/* Icono con el marco metálico de su rareza, como en la tarjeta. */
.grimorio-elemento__icono {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 5.25rem;
    height: 5.25rem;
    padding: .3rem;
    border-radius: var(--qg-public-radius-sm);
    background: var(--qg-public-gradient-game-metal), var(--qg-game-rarity);
    box-shadow: 0 0 0 .0625rem var(--qg-public-color-black-70), 0 .25rem .6rem var(--qg-public-color-black-46);
}

.grimorio-elemento__icono img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: var(--qg-public-radius-xs);
    background: var(--qg-public-gradient-game-tile);
    object-fit: cover;
}

/* Conjuros: el glifo sobre la página del libro, dorado si es legendario. */
.grimorio-elemento--conjuro .grimorio-elemento__icono {
    padding: .7rem;
    border: .0625rem solid var(--qg-public-color-game-ink-25);
    border-radius: var(--qg-public-radius-circle);
    background: var(--qg-public-gradient-game-page);
    box-shadow: inset 0 0 .9rem var(--qg-public-color-game-page-edge), var(--qg-public-shadow-1);
}

.grimorio-elemento--conjuro .grimorio-elemento__icono img {
    background: none;
    object-fit: contain;
}

.grimorio-elemento--legendario .grimorio-elemento__icono img {
    filter: invert(38%) sepia(98%) saturate(620%) hue-rotate(20deg) brightness(92%);
}

.grimorio-elemento__nombre {
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* JC09: el nivel del conjuro, en la esquina del icono.

   Antes ocupaba una linea entera bajo el nombre, en todas las fichas de la pestaña de conjuros, y empujaba la
   rejilla hacia abajo sin aportar gran cosa. Ahora es una insignia pequeña sobre el propio icono. */
.grimorio-elemento__nivel {
    position: absolute;
    top: -.3rem;
    right: -.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .25rem;
    border: .0625rem solid var(--qg-public-color-black-70);
    border-radius: var(--qg-public-radius-circle);
    background: var(--qg-public-moc-surface-sunken);
    color: var(--qg-public-moc-text);
    font-family: var(--qg-public-font-body);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 .125rem .35rem var(--qg-public-color-black-46);
}

/* El legendario no lleva numero: lleva estrella, y en dorado, que es como ya sale su glifo. */
.grimorio-elemento--legendario .grimorio-elemento__nivel {
    border-color: var(--qg-public-color-gold-shadow);
    color: var(--qg-public-moc-highlight);
}

/* JC11. Coste en la configuración del alquimista: la misma insignia que el nivel, en oro; en verde y con «+» las que
   devuelven puntos. Las bloqueadas llevan candado y el icono apagado. */
.grimorio-elemento__coste {
    gap: .2rem;
    border-color: var(--qg-public-color-gold-shadow);
    color: var(--qg-public-moc-highlight);
}

.grimorio-elemento__coste--devuelve {
    border-color: var(--qg-public-moc-positive);
    color: var(--qg-public-moc-positive);
}

.grimorio-elemento__coste .fa-lock {
    font-size: .6rem;
}

.grimorio-elemento--bloqueada .grimorio-elemento__icono img {
    filter: grayscale(1) brightness(.75);
}

/* Avatares: retrato redondo, como en el juego. */
.grimorio-elemento--avatar .grimorio-elemento__icono,
.grimorio-elemento--avatar .grimorio-elemento__icono img {
    border-radius: var(--qg-public-radius-circle);
}

/* Explicación del presupuesto, encima de la rejilla de dotes del alquimista y de avatares. */
.grimorio-nota {
    display: flex;
    gap: .6rem;
    align-items: baseline;
    margin: 0 0 1.25rem;
    padding: .7rem 1rem;
    border: .0625rem solid var(--qg-public-color-game-frame-25);
    border-radius: var(--qg-public-radius-sm);
    color: var(--qg-public-moc-text);
    background: var(--qg-public-moc-surface-sunken);
    font-family: var(--qg-public-font-game-text);
    font-size: .95rem;
    line-height: 1.45;
}

.grimorio-nota .fa-flask {
    color: var(--qg-public-color-brass-light);
}

/* Avatar base (JC11): encima de la rejilla de avatares, con las dotes de las que parten todos. No es una opción más,
   así que no lleva insignia de coste ni va en la rejilla. */
.grimorio-base {
    display: flex;
    gap: 1rem 1.5rem;
    align-items: center;
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border: .0625rem solid var(--qg-public-color-game-frame-55);
    border-radius: var(--qg-public-radius-sm);
    color: var(--qg-public-moc-text);
    background: var(--qg-public-gradient-game-window);
    box-shadow: var(--qg-public-shadow-1);
    font-family: var(--qg-public-font-game-text);
}

.grimorio-base__avatar {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: .5rem;
    align-items: center;
    width: 6.5rem;
    color: var(--qg-public-moc-text);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
}

.grimorio-base__avatar img {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--qg-public-radius-circle);
    box-shadow: 0 0 0 .1875rem var(--qg-public-color-brass), 0 .25rem .6rem var(--qg-public-color-black-46);
    object-fit: cover;
}

.grimorio-base__avatar:hover,
.grimorio-base__avatar:focus-visible {
    color: var(--qg-public-color-game-frame);
}

.grimorio-base__cuerpo {
    flex: 1 1 auto;
    min-width: 0;
}

.grimorio-base__titulo {
    margin: 0;
    color: var(--qg-public-moc-highlight);
    font-family: var(--qg-public-font-game-title);
    font-size: 1.05rem;
    line-height: 1.3;
}

.grimorio-base__texto {
    margin: .2rem 0 .75rem;
    color: var(--qg-public-moc-text-muted);
    font-size: .9rem;
    line-height: 1.45;
}

.grimorio-base__dotes {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.grimorio-base__dote {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    padding: .25rem .7rem .25rem .3rem;
    border: .0625rem solid var(--qg-public-color-game-frame-25);
    border-radius: var(--qg-public-radius-xs);
    color: var(--qg-public-color-white-86);
    background: var(--qg-public-color-game-window-dark);
    font-size: .9rem;
    line-height: 1.3;
    text-decoration: none;
}

.grimorio-base__dote img {
    display: block;
    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--qg-public-radius-xs);
    object-fit: cover;
}

.grimorio-base__dote:hover,
.grimorio-base__dote:focus-visible {
    border-color: var(--qg-public-color-game-frame);
    color: var(--qg-public-color-white);
}

.grimorio-base__avatar:focus-visible,
.grimorio-base__dote:focus-visible {
    outline: .125rem solid var(--qg-public-color-game-frame);
    outline-offset: .125rem;
}

@media (max-width: 575.98px) {
    /* En móvil, el retrato y el nombre en una fila y las dotes debajo. */
    .grimorio-base {
        flex-direction: column;
        align-items: stretch;
    }

    .grimorio-base__avatar {
        flex-direction: row;
        gap: .75rem;
        width: auto;
        text-align: left;
    }

    .grimorio-base__avatar img {
        width: 3.5rem;
        height: 3.5rem;
    }
}

/* ------------------------------------------------------------------ Avisos */

.grimorio-vacio,
.grimorio-aviso {
    margin: 0;
    padding: 2.5rem 1rem;
    border: .0625rem dashed var(--qg-public-color-game-frame-25);
    border-radius: var(--qg-public-radius-sm);
    color: var(--qg-public-moc-text-muted);
    background: var(--qg-public-moc-surface-sunken);
    font-family: var(--qg-public-font-game-text);
    font-size: 1.0625rem;
    text-align: center;
}

/* ------------------------------------------------------------------ Ventana del elemento (<dialog>) */

/* Con la ventana abierta, la página de detrás no se desplaza. */
html.grimorio-modal-abierto {
    overflow: hidden;
}

.grimorio-modal {
    width: min(46rem, calc(100vw - 2rem));
    max-width: none;
    max-height: calc(100vh - 2rem);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 0;
    color: var(--qg-public-moc-text);
    background: transparent;
    overscroll-behavior: contain;
}

.grimorio-modal::backdrop {
    background: var(--qg-public-color-black-70);
    backdrop-filter: blur(.125rem);
}

.grimorio-modal__marco {
    position: relative;
    padding: .5rem 0;
}

.grimorio-modal .qg-game-card {
    max-width: none;
    margin: 0;
}

.grimorio-modal__cerrar {
    position: absolute;
    top: 1rem;
    right: .5rem;
    z-index: 1;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: .0625rem solid var(--qg-public-color-game-frame-55);
    border-radius: var(--qg-public-radius-circle);
    color: var(--qg-public-color-white-86);
    background: var(--qg-public-color-game-window-dark);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.grimorio-modal__cerrar:hover,
.grimorio-modal__cerrar:focus-visible {
    border-color: var(--qg-public-color-game-frame);
    color: var(--qg-public-color-white);
}

.grimorio-modal__cerrar:focus-visible {
    outline: .125rem solid var(--qg-public-color-game-frame);
    outline-offset: .125rem;
}

.grimorio-modal--conjuro .grimorio-modal__cerrar {
    border-color: var(--qg-public-color-game-ink-25);
    color: var(--qg-public-color-game-ink);
    background: var(--qg-public-color-game-page-dark);
}

.grimorio-modal__cargando {
    margin: 0;
    padding: 3rem 1rem;
    border: .0625rem solid var(--qg-public-color-game-frame-25);
    border-radius: var(--qg-public-radius-sm);
    color: var(--qg-public-moc-text-muted);
    background: var(--qg-public-gradient-game-window);
    font-family: var(--qg-public-font-game-text);
    text-align: center;
}

.grimorio-modal__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    margin-top: 1rem;
}

.grimorio-boton.is-copiado {
    border-color: var(--qg-public-moc-positive);
    color: var(--qg-public-moc-positive);
}

/* Campo temporal para copiar el enlace sin portapapeles asíncrono: fuera de la vista. */
.grimorio-modal__copia {
    position: fixed;
    top: 0;
    left: -100vw;
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .grimorio-modal[open] {
        animation: grimorio-modal-entrada 160ms ease-out;
    }
}

@keyframes grimorio-modal-entrada {
    from {
        opacity: 0;
        transform: translateY(.5rem) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 575.98px) {
    /* En móvil, título y entradilla uno debajo del otro. */
    .grimorio-portada {
        padding: .5rem 1rem .6rem;
    }

    .grimorio-portada__texto {
        padding-left: 0;
        border-left: 0;
        font-size: .85rem;
    }

    .grimorio-filtros {
        padding: 1rem;
    }

    .grimorio-rejilla {
        grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
        gap: .75rem;
    }

    .grimorio-elemento__icono {
        width: 4.5rem;
        height: 4.5rem;
    }

    .grimorio-modal {
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
    }
}

/* JC13: por debajo de 768 px, tipos y filtros salen de la página y van a un panel fijo que entra desde la derecha,
   en listas verticales. Se abre con el botón «Filtros» del borde derecho (grimorio.js). La sección del Grimorio crea su
   propio contexto de apilamiento (z-index 1, de la plantilla), así que, mientras el panel está abierto, se eleva por
   encima de la barra superior (999): si no, el panel y el velo quedarían debajo de ella. */
@media (max-width: 767.98px) {
    html.grimorio-panel-abierto {
        overflow: hidden;
    }

    html.grimorio-panel-abierto .parallax-background.grimorio-fondo {
        z-index: 1000;
    }

    /* Buscador y «Limpiar» en una fila; «Limpiar», solo con su icono (el texto queda para lectores de pantalla). */
    .grimorio-filtros__fila--busqueda {
        flex-wrap: nowrap;
    }

    .grimorio-filtros .grimorio-filtros__limpiar.qg-content-search-reset {
        width: 2.875rem;
        padding: 0;
    }

    .grimorio-filtros__limpiar-texto {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .grimorio-panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: .75rem;
        width: min(86vw, 21rem);
        padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        border-left: .0625rem solid var(--qg-public-color-game-frame-55);
        background: var(--qg-public-gradient-game-window);
        box-shadow: var(--qg-public-shadow-game-card);
        visibility: hidden;
        transform: translateX(100%);
        /* Al cerrar, se oculta cuando termina de salir; al abrir (abajo), se muestra en el acto. Si la visibilidad
           también se animara al abrir, el panel seguiría contando como oculto justo cuando se le pasa el foco. */
        transition: transform .25s ease, visibility 0s linear .25s;
    }

    html.grimorio-panel-abierto .grimorio-panel {
        visibility: visible;
        transform: none;
        transition: transform .25s ease, visibility 0s;
    }

    .grimorio-panel__cabecera {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding-bottom: .65rem;
        border-bottom: .0625rem solid var(--qg-public-color-game-frame-25);
    }

    .grimorio-panel__titulo {
        margin: 0;
        color: var(--qg-public-color-brass-light);
        font-family: var(--qg-public-font-game-title);
        font-size: 1.35rem;
        line-height: 1.2;
    }

    .grimorio-panel__cerrar {
        flex: 0 0 auto;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        border: .0625rem solid var(--qg-public-color-game-frame-55);
        border-radius: var(--qg-public-radius-circle);
        color: var(--qg-public-color-white-86);
        background: var(--qg-public-color-game-window-dark);
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
    }

    .grimorio-panel__cerrar:hover,
    .grimorio-panel__cerrar:focus-visible {
        border-color: var(--qg-public-color-game-frame);
        color: var(--qg-public-color-white);
    }

    .grimorio-panel__cerrar:focus-visible {
        outline: .125rem solid var(--qg-public-color-game-frame);
        outline-offset: .125rem;
    }

    .grimorio-panel__seccion {
        display: block;
        float: none;
        margin: 0;
    }

    /* Tipos y filtros, en listas verticales de filas fáciles de tocar, con el recuento a la derecha. */
    .grimorio-panel .grimorio-pestanas,
    .grimorio-panel .grimorio-filtros__grupo {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: .4rem;
        overflow: visible;
    }

    .grimorio-panel .grimorio-filtros__grupo .grimorio-filtros__titulo {
        float: none;
        margin: .35rem 0 .1rem;
    }

    .grimorio-panel .grimorio-pestana,
    .grimorio-panel .grimorio-filtro {
        display: flex;
        width: 100%;
        min-height: 2.75rem;
        padding: .45rem .55rem .45rem .85rem;
        font-size: .95rem;
        white-space: normal;
    }

    .grimorio-panel .grimorio-pestana__total,
    .grimorio-panel .grimorio-filtro__total {
        margin-left: auto;
    }

    .grimorio-panel__pie {
        display: block;
        position: sticky;
        bottom: calc(-1rem - env(safe-area-inset-bottom));
        margin: auto -1rem calc(-1rem - env(safe-area-inset-bottom));
        padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom));
        border-top: .0625rem solid var(--qg-public-color-game-frame-25);
        background: var(--qg-public-color-game-window-dark);
    }

    .grimorio-panel__ver {
        width: 100%;
    }

    /* Botón fijo en el borde derecho, con los filtros marcados. */
    .grimorio-panel-abrir {
        position: fixed;
        right: 0;
        bottom: 5.5rem;
        z-index: 1;
        display: inline-flex;
        gap: .5rem;
        align-items: center;
        min-height: 2.875rem;
        padding: 0 .9rem 0 1rem;
        border: .0625rem solid var(--qg-public-color-gold-dark);
        border-right: 0;
        border-radius: var(--qg-public-radius-sm) 0 0 var(--qg-public-radius-sm);
        color: var(--qg-public-color-ink-gold);
        background: var(--qg-public-gradient-gold);
        box-shadow: var(--qg-public-shadow-game-card);
        font-family: var(--qg-public-font-game-text);
        font-size: .95rem;
        font-weight: 700;
        cursor: pointer;
    }

    .grimorio-panel-abrir:focus-visible {
        outline: .125rem solid var(--qg-public-color-game-frame);
        outline-offset: .125rem;
    }

    .grimorio-panel-abrir__marcados {
        min-width: 1.5rem;
        padding: .1rem .4rem;
        border-radius: var(--qg-public-radius-pill);
        color: var(--qg-public-color-gold-bright);
        background: var(--qg-public-color-game-window-dark);
        font-size: .75rem;
        text-align: center;
    }

    .grimorio-panel-abrir__marcados[hidden] {
        display: none;
    }

    .grimorio-panel-velo {
        position: fixed;
        inset: 0;
        z-index: 1;
        display: block;
        background: var(--qg-public-color-black-70);
    }

    .grimorio-panel-velo[hidden] {
        display: none;
    }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    .grimorio-panel {
        transition: none;
    }
}