/*
    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("../../../images/Moc/fondosTex/Castle.png");
}

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

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

.grimorio-elemento__detalle {
    margin-top: auto;
    color: var(--qg-public-moc-text-muted);
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.grimorio-elemento--legendario .grimorio-elemento__detalle {
    color: var(--qg-public-moc-highlight);
}

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

    /* Las pestañas se desplazan en horizontal en lugar de ocupar varias filas. */
    .grimorio-pestanas {
        flex-wrap: nowrap;
        padding-bottom: .35rem;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .grimorio-filtros__fila--busqueda {
        flex-wrap: wrap;
    }

    .grimorio-filtros .grimorio-filtros__buscar.qg-content-search-input {
        flex-basis: 100%;
    }

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