/* ============================================================
   LEONHART — LIBRO FÍSICO MAESTRO
   Spreads 2, 3 y 4 heredan físicamente el libro de Introducción.
   
   NO modifica:
   - contenido
   - tarjetas
   - personaje
   - tablas
   - diagrama
   - buscadores
   ============================================================ */


/* ============================================================
   1. GEOMETRÍA DEL LIBRO
   Igual a Introducción / La Víspera
   ============================================================ */


/* SELECTOR — spread 2 */

.grimorio-stage >
.grimorio-spread[data-spread="2"].character-selector-spread {


    position:
        absolute !important;

    top:
        1.3% !important;

    right:
        1.7% !important;

    bottom:
        1.6% !important;

    left:
        1.7% !important;


    width:
        auto !important;

    height:
        auto !important;


    margin:
        0 !important;

    padding:
        0 !important;


    display:
        grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    gap:
        0 !important;


    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


/* PERSONAJE — spread 3 */

.grimorio-stage >
.grimorio-spread[data-spread="3"].character-sheet-spread {


    position:
        absolute !important;

    top:
        1.3% !important;

    right:
        1.7% !important;

    bottom:
        1.6% !important;

    left:
        1.7% !important;


    width:
        auto !important;

    height:
        auto !important;


    margin:
        0 !important;

    padding:
        0 !important;


    display:
        grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    gap:
        0 !important;


    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


/* INGENIERÍA — spread 4 */

.grimorio-stage >
.grimorio-spread[data-spread="4"].appendix-spread {


    position:
        absolute !important;

    top:
        1.3% !important;

    right:
        1.7% !important;

    bottom:
        1.6% !important;

    left:
        1.7% !important;


    width:
        auto !important;

    height:
        auto !important;


    margin:
        0 !important;

    padding:
        0 !important;


    display:
        grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    gap:
        0 !important;


    background:
        transparent !important;

    background-color:
        transparent !important;

    background-image:
        none !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


/* ============================================================
   2. LAS DOS HOJAS
   Cada spread vuelve a comportarse como Introducción
   ============================================================ */

.grimorio-stage >
.grimorio-spread[data-spread="2"].character-selector-spread >
.grimorio-page,

.grimorio-stage >
.grimorio-spread[data-spread="3"].character-sheet-spread >
.grimorio-page,

.grimorio-stage >
.grimorio-spread[data-spread="4"].appendix-spread >
.grimorio-page {


    position:
        relative !important;


    width:
        100% !important;

    max-width:
        none !important;


    height:
        100% !important;

    min-height:
        0 !important;


    flex:
        none !important;


    margin:
        0 !important;


    overflow:
        hidden !important;


    color:
        var(--ink) !important;


    background-color:
        var(--paper) !important;


    background-image:

        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"),

        radial-gradient(
            ellipse at center,
            rgba(239, 222, 190, 0.70) 0%,
            rgba(209, 184, 148, 0.94) 72%,
            rgba(175, 143, 99, 0.90) 100%
        )

        !important;
}


/* ============================================================
   3. HOJA IZQUIERDA
   Copia física de Introducción
   ============================================================ */

.grimorio-stage >
.grimorio-spread[data-spread="2"].character-selector-spread >
.grimorio-page.page-left,

.grimorio-stage >
.grimorio-spread[data-spread="3"].character-sheet-spread >
.grimorio-page.page-left,

.grimorio-stage >
.grimorio-spread[data-spread="4"].appendix-spread >
.grimorio-page.page-left {


    border-radius:
        7px 1px 2px 12px !important;


    border:
        1px solid
        rgba(72, 47, 24, 0.22) !important;


    border-right:
        1px solid
        rgba(0, 0, 0, 0.18) !important;


    box-shadow:

        inset -48px 0 58px -22px
        rgba(0, 0, 0, 0.52),

        inset 7px 0 16px
        rgba(255, 245, 218, 0.20),

        -5px 7px 0
        rgba(169, 136, 92, 0.58),

        -8px 12px 20px
        rgba(0, 0, 0, 0.44)

        !important;
}


/* ============================================================
   4. HOJA DERECHA
   Copia física de Introducción
   ============================================================ */

.grimorio-stage >
.grimorio-spread[data-spread="2"].character-selector-spread >
.grimorio-page.page-right,

.grimorio-stage >
.grimorio-spread[data-spread="3"].character-sheet-spread >
.grimorio-page.page-right,

.grimorio-stage >
.grimorio-spread[data-spread="4"].appendix-spread >
.grimorio-page.page-right {


    border-radius:
        1px 7px 12px 2px !important;


    border:
        1px solid
        rgba(72, 47, 24, 0.22) !important;


    border-left:
        1px solid
        rgba(255, 255, 255, 0.12) !important;


    box-shadow:

        inset 48px 0 58px -22px
        rgba(0, 0, 0, 0.52),

        inset -7px 0 16px
        rgba(255, 245, 218, 0.20),

        5px 7px 0
        rgba(169, 136, 92, 0.58),

        8px 12px 20px
        rgba(0, 0, 0, 0.44)

        !important;
}


/* ============================================================
   5. SELECTOR
   Sólo anulamos su antigua geometría 50/50.
   El contenido sigue intacto.
   ============================================================ */

.grimorio-stage >
.grimorio-spread[data-spread="2"].character-selector-spread >
.grimorio-page {


    flex-basis:
        auto !important;


    transform-origin:
        initial !important;
}


.grimorio-stage >
.grimorio-spread[data-spread="2"].character-selector-spread >
.page-left {

    left:
        auto !important;

    right:
        auto !important;
}


.grimorio-stage >
.grimorio-spread[data-spread="2"].character-selector-spread >
.page-right {

    left:
        auto !important;

    right:
        auto !important;
}


/* ============================================================
   6. PERSONAJE
   Mantener tarjeta/ficha transparente respecto al libro.
   No tocamos su diseño interno.
   ============================================================ */

.grimorio-stage >
.grimorio-spread[data-spread="3"].character-sheet-spread
.page-content {

    background-color:
        transparent !important;
}


/* ============================================================
   7. APÉNDICE A
   Quitar únicamente el pergamino rojo de las HOJAS.
   Diagramas y elementos internos se conservan.
   ============================================================ */

.grimorio-stage >
.grimorio-spread[data-spread="4"].appendix-spread
.appendix-a-document {

    background:
        transparent !important;

    background-color:
        transparent !important;
}


/* Texto general ahora sobre pergamino claro */

.grimorio-stage >
.grimorio-spread[data-spread="4"].appendix-spread
.page-content {

    color:
        var(--ink) !important;
}


.grimorio-stage >
.grimorio-spread[data-spread="4"].appendix-spread
h1,

.grimorio-stage >
.grimorio-spread[data-spread="4"].appendix-spread
h2,

.grimorio-stage >
.grimorio-spread[data-spread="4"].appendix-spread
h3 {

    color:
        #4a3323 !important;
}


/* ============================================================
   8. EL MARCO INTERIOR TAMBIÉN ES EL DEL GRIMORIO
   ============================================================ */

.grimorio-stage >
.grimorio-spread[data-spread="2"]
.page-content::after,

.grimorio-stage >
.grimorio-spread[data-spread="3"]
.page-content::after,

.grimorio-stage >
.grimorio-spread[data-spread="4"]
.page-content::after {

    border-color:
        rgba(44, 32, 20, 0.32) !important;
}



/* ============================================================
   CAPÍTULO I — LA VÍSPERA
   Ilustración viva
   ============================================================ */

.vispera-spread .vispera-visual-page {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7% 8% !important;
    box-sizing: border-box !important;
}


.vispera-video-frame {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 92%;
    overflow: hidden;

    border:
        1px solid rgba(62, 42, 24, .48);

    box-shadow:
        0 5px 12px rgba(39, 24, 12, .20),
        inset 0 0 18px rgba(53, 31, 16, .18);
}


.vispera-video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        sepia(.13)
        saturate(.90)
        contrast(.96)
        brightness(.96);

    opacity: .94;
}


/* Fusión del vídeo con el pergamino */
.vispera-video-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;

    box-shadow:
        inset 0 0 24px 12px rgba(76, 48, 24, .30);

    background:
        linear-gradient(
            to bottom,
            rgba(83, 53, 28, .08),
            transparent 18%,
            transparent 80%,
            rgba(76, 45, 22, .15)
        );
}


/* Leyenda inferior */
.vispera-visual-caption {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 5%;

    text-align: center;

    color: #ead9bd;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, .85);
}


.vispera-visual-caption span {
    display: block;

    font-family:
        "Cinzel",
        serif;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;
}


.vispera-visual-caption small {
    display: block;

    margin-top: 3px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 11px;
    font-style: italic;
}


/* ============================================================
   TEXTO — HOJA DERECHA
   ============================================================ */

.vispera-spread .vispera-story-page {
    display: flex !important;
    flex-direction: column !important;

    padding:
        10% 11% 8% 12% !important;

    box-sizing:
        border-box !important;

    color:
        #49331f !important;
}


.vispera-chapter-kicker {
    text-align: center;

    font-family:
        "Cinzel",
        serif;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 4px;

    color:
        rgba(72, 48, 27, .72);
}


.vispera-chapter-title {
    margin:
        6px 0 4px !important;

    text-align:
        center;

    font-family:
        "Cinzel",
        serif !important;

    font-size:
        clamp(23px, 2vw, 34px) !important;

    letter-spacing:
        5px !important;

    color:
        #3d2818 !important;
}


.vispera-chapter-ornament {
    margin:
        7px 0 20px;

    text-align:
        center;

    font-size:
        13px;

    opacity:
        .62;
}


.vispera-story-page p {
    margin:
        0 0 14px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(13px, 1vw, 16px);

    line-height:
        1.48;

    text-align:
        justify;
}


.vispera-story-page .vispera-lead::first-letter {
    float: left;

    margin:
        3px 7px 0 0;

    font-family:
        "Cinzel",
        serif;

    font-size:
        45px;

    line-height:
        .78;

    color:
        #55351e;
}


.vispera-final-line {
    margin-top:
        auto;

    padding-top:
        15px;

    border-top:
        1px solid rgba(72, 48, 27, .23);

    text-align:
        center;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        13px;

    font-style:
        italic;

    line-height:
        1.45;
}



/* ============================================================
   II / V — LA VÍSPERA
   FIX CAPA EDITORIAL SOBRE VIDEO / CONTEXTO 3D
   ============================================================ */

.grimorio-spread[data-spread="1"] .vispera-video-vignette {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    z-index: 1000 !important;

    transform: translateZ(20px) !important;
    -webkit-transform: translateZ(20px) !important;

    pointer-events: none !important;
}


.grimorio-spread[data-spread="1"] .vispera-editorial-overlay {
    position: absolute !important;
    inset: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;

    visibility: visible !important;
    opacity: 1 !important;

    z-index: 2147483647 !important;

    transform: translateZ(60px) !important;
    -webkit-transform: translateZ(60px) !important;

    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;

    color: #f3e6c7 !important;

    pointer-events: none !important;
}


.grimorio-spread[data-spread="1"] .vispera-editorial-overlay * {
    visibility: visible !important;
    opacity: 1 !important;
}


.grimorio-spread[data-spread="1"] .vispera-editorial-kicker,
.grimorio-spread[data-spread="1"] .vispera-editorial-title,
.grimorio-spread[data-spread="1"] .vispera-editorial-ornament,
.grimorio-spread[data-spread="1"] .vispera-editorial-subtitle,
.grimorio-spread[data-spread="1"] .vispera-editorial-caption {
    color: #f3e6c7 !important;
}



/* ============================================================
   II / V — LA VÍSPERA
   REFINAMIENTO EDITORIAL FINAL
   ============================================================ */

/* Recupera luminosidad del cielo sin perder legibilidad */
.grimorio-spread[data-spread="1"] .vispera-video-vignette {
    background:
        linear-gradient(
            to bottom,
            rgba(10, 7, 4, 0.30) 0%,
            rgba(10, 7, 4, 0.10) 18%,
            rgba(10, 7, 4, 0.01) 40%,
            rgba(10, 7, 4, 0.02) 67%,
            rgba(10, 7, 4, 0.42) 100%
        ),
        linear-gradient(
            to right,
            rgba(10, 7, 4, 0.16) 0%,
            transparent 28%,
            transparent 78%,
            rgba(10, 7, 4, 0.10) 100%
        ) !important;
}


/* Cartela inferior: de caja UI a inscripción editorial */
.grimorio-spread[data-spread="1"] .vispera-editorial-caption {
    max-width: 68% !important;

    padding:
        .55rem
        .35rem
        .45rem !important;

    border: 0 !important;
    border-top:
        1px solid
        rgba(240, 215, 165, .48) !important;

    border-bottom:
        1px solid
        rgba(240, 215, 165, .20) !important;

    border-radius: 0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(20, 12, 6, .38),
            rgba(20, 12, 6, .16) 72%,
            transparent
        ) !important;

    box-shadow: none !important;
    backdrop-filter: none !important;

    font-style: italic !important;

    text-shadow:
        0 1px 2px rgba(0,0,0,.95),
        0 2px 6px rgba(0,0,0,.82) !important;
}


/* ============================================================
   HOJA 04 — LA VÍSPERA
   RITMO DRAMÁTICO DEL CIERRE
   ============================================================ */

.grimorio-spread[data-spread="1"] .story-ending span {
    display: block !important;
    margin: .10rem 0 !important;
    font-weight: 600;
    letter-spacing: .015em;
}

.grimorio-spread[data-spread="1"] .story-ending span:first-of-type {
    margin-top: .32rem !important;
}

.grimorio-spread[data-spread="1"] .story-ending span:last-of-type {
    margin-bottom: .32rem !important;
}


/* ============================================================
   HOJA05_COMPENDIO_V1
   III / V - COMPENDIO DE HABITANTES
   ============================================================ */

.grimorio-spread[data-spread="2"] .character-selector-intro {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: hidden !important;
}

.grimorio-spread[data-spread="2"] .gcs-compendium {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    padding: 28px 34px 24px !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #49351f !important;
    font-family: Georgia, "Times New Roman", serif;
    z-index: 100 !important;
}

.grimorio-spread[data-spread="2"] .gcs-compendium-header {
    text-align: center;
}

.grimorio-spread[data-spread="2"] .gcs-compendium-kicker {
    font-family: "Cinzel", Georgia, serif;
    font-size: 8px;
    letter-spacing: 3px;
    color: rgba(72,50,28,.65);
}

.grimorio-spread[data-spread="2"] .gcs-compendium-ornament {
    margin: 7px 0;
    font-size: 9px;
    color: #795936;
}

.grimorio-spread[data-spread="2"] .gcs-compendium-title {
    display: flex !important;
    flex-direction: column;
    margin: 0;
    font-family: "Cinzel", Georgia, serif;
    font-size: 28px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 1px;
    color: #352416 !important;
}

.grimorio-spread[data-spread="2"] .gcs-compendium-subtitle {
    margin: 9px auto 0;
    max-width: 310px;
    font-size: 11px;
    line-height: 1.35;
    font-style: italic;
    text-align: center;
}

.grimorio-spread[data-spread="2"] .gcs-compendium-seal {
    width: 116px;
    height: 116px;
    margin: 16px auto 14px;
    flex-shrink: 0;
    display: grid !important;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(90,62,32,.55);
    box-shadow:
        0 0 0 5px rgba(100,70,38,.08),
        0 0 0 7px rgba(90,62,32,.18),
        inset 0 0 25px rgba(90,62,32,.12);
}

.grimorio-spread[data-spread="2"] .gcs-compendium-seal-ring {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(90,62,32,.40);
}

.grimorio-spread[data-spread="2"] .gcs-compendium-seal-ring span {
    font-family: "Cinzel", Georgia, serif;
    font-size: 43px;
    color: #684925;
}

.grimorio-spread[data-spread="2"] .gcs-compendium-copy {
    width: 94%;
    margin: 0 auto;
    font-size: 9.4px;
    line-height: 1.42;
    text-align: justify;
}

.grimorio-spread[data-spread="2"] .gcs-compendium-copy p {
    margin: 0 0 7px;
}

.grimorio-spread[data-spread="2"] .gcs-compendium-divider {
    display: flex !important;
    align-items: center;
    gap: 9px;
    width: 88%;
    margin: 6px auto 8px;
}

.grimorio-spread[data-spread="2"] .gcs-compendium-divider span {
    flex: 1;
    height: 1px;
    background: rgba(90,62,32,.30);
}

.grimorio-spread[data-spread="2"] .gcs-compendium-divider b {
    font-size: 8px;
    font-weight: normal;
}

.grimorio-spread[data-spread="2"] .gcs-compendium-pillars {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    margin-top: auto;
    border-top: 1px solid rgba(90,62,32,.20);
    border-bottom: 1px solid rgba(90,62,32,.20);
}

.grimorio-spread[data-spread="2"] .gcs-compendium-pillar {
    padding: 8px 6px 9px;
    text-align: center;
}

.grimorio-spread[data-spread="2"] .gcs-compendium-pillar + .gcs-compendium-pillar {
    border-left: 1px solid rgba(90,62,32,.20);
}

.grimorio-spread[data-spread="2"] .gcs-compendium-pillar-mark {
    font-size: 14px;
    color: #72502c;
}

.grimorio-spread[data-spread="2"] .gcs-compendium-pillar h3 {
    margin: 3px 0 4px;
    font-family: "Cinzel", Georgia, serif;
    font-size: 8px;
    letter-spacing: 1.3px;
}

.grimorio-spread[data-spread="2"] .gcs-compendium-pillar p {
    margin: 0;
    font-size: 7.5px;
    line-height: 1.3;
}

.grimorio-spread[data-spread="2"] .gcs-compendium-footer {
    margin-top: 10px;
    text-align: center;
}

.grimorio-spread[data-spread="2"] .gcs-compendium-footer blockquote {
    margin: 0;
    font-size: 8px;
    line-height: 1.35;
    font-style: italic;
}

.grimorio-spread[data-spread="2"] .gcs-compendium-footer > span {
    display: block;
    margin-top: 4px;
    font-size: 8px;
}


/* === HOJA05_COMPENDIO_V2_START === */

/* ============================================================
   III / V — HOJA 05
   COMPENDIO DE HABITANTES — DISEÑO EDITORIAL V2
   ============================================================ */

.grimorio-spread[data-spread="2"]
.page-left
.character-selector-intro {

    display: block !important;

    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* ============================================================
   CONTENEDOR
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-compendium {

    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    height: 100% !important;

    padding:
        27px
        39px
        22px !important;

    box-sizing: border-box !important;

    color: #49351f !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    opacity: 1 !important;
    visibility: visible !important;

    z-index: 50 !important;
}


/* ============================================================
   CABECERA
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-compendium-header {

    flex: 0 0 auto;

    text-align: center;
}


.grimorio-spread[data-spread="2"]
.gcs-compendium-kicker {

    margin: 0;

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size: 7.5px;

    font-weight: 400;

    letter-spacing: 3.4px;

    text-transform: uppercase;

    color: rgba(72, 50, 28, .58);
}


.grimorio-spread[data-spread="2"]
.gcs-compendium-ornament {

    margin:
        6px
        0
        7px;

    font-size: 8px;

    letter-spacing: 3px;

    color: rgba(102, 72, 38, .68);
}


.grimorio-spread[data-spread="2"]
.gcs-compendium-title {

    display: flex !important;
    flex-direction: column !important;

    gap: 0;

    margin: 0 !important;

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size: 29px !important;

    font-weight: 400 !important;

    line-height: .95 !important;

    letter-spacing: .7px;

    color: #352416 !important;

    text-shadow:
        0 1px 0 rgba(255,255,255,.32);
}


.grimorio-spread[data-spread="2"]
.gcs-compendium-title span:first-child {

    font-size: 1em;
}


.grimorio-spread[data-spread="2"]
.gcs-compendium-title span:last-child {

    margin-top: 2px;
}


.grimorio-spread[data-spread="2"]
.gcs-compendium-subtitle {

    max-width: 320px;

    margin:
        9px
        auto
        0 !important;

    font-size: 10px !important;

    line-height: 1.35;

    text-align: center;

    font-style: italic;
    font-weight: 600;

    color: rgba(67, 46, 25, .76);
}


/* ============================================================
   MEDALLÓN CENTRAL
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-compendium-seal {

    position: relative;

    flex: 0 0 auto;

    width: 128px !important;
    height: 128px !important;

    margin:
        15px
        auto
        17px !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 50%;

    border:
        1px solid
        rgba(80, 55, 29, .42) !important;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(255, 244, 211, .34) 0%,
            rgba(195, 158, 102, .12) 58%,
            rgba(112, 77, 38, .09) 100%
        ) !important;

    box-shadow:
        0 0 0 4px rgba(103, 72, 38, .06),
        0 0 0 7px rgba(79, 54, 28, .14),
        inset 0 0 0 1px rgba(255,255,255,.34),
        inset 0 0 27px rgba(73, 47, 22, .11) !important;
}


/* estrella superior */

.grimorio-spread[data-spread="2"]
.gcs-compendium-seal::before {

    content: "✦";

    position: absolute;

    top: 7px;
    left: 50%;

    transform: translateX(-50%);

    font-size: 8px;

    color: rgba(91, 62, 32, .68);
}


/* estrella inferior */

.grimorio-spread[data-spread="2"]
.gcs-compendium-seal::after {

    content: "✦";

    position: absolute;

    bottom: 7px;
    left: 50%;

    transform: translateX(-50%);

    font-size: 8px;

    color: rgba(91, 62, 32, .68);
}


.grimorio-spread[data-spread="2"]
.gcs-compendium-seal-ring {

    position: relative;

    width: 82px !important;
    height: 82px !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 50%;

    border:
        1px solid
        rgba(86, 59, 31, .38) !important;

    box-shadow:
        inset 0 0 13px rgba(88, 57, 26, .08);
}


.grimorio-spread[data-spread="2"]
.gcs-compendium-seal-ring::before {

    content: "";

    position: absolute;

    inset: 8px;

    border-radius: 50%;

    border:
        1px solid
        rgba(90, 61, 31, .18);
}


.grimorio-spread[data-spread="2"]
.gcs-compendium-seal-ring span {

    position: relative;

    z-index: 2;

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size: 42px !important;

    font-weight: 400;

    line-height: 1;

    color: #694923 !important;
}


/* ============================================================
   TEXTO INTRODUCTORIO
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-compendium-copy {

    width: 96% !important;

    margin:
        0
        auto !important;

    font-size: 9.2px !important;

    line-height: 1.43 !important;

    text-align: justify;

    color: #4c3822 !important;
}


.grimorio-spread[data-spread="2"]
.gcs-compendium-copy p {

    margin:
        0
        0
        8px !important;
}


/* ============================================================
   DIVISOR
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-compendium-divider {

    display: flex !important;

    align-items: center;

    gap: 11px;

    width: 91%;

    margin:
        3px
        auto
        12px !important;

    color: rgba(83, 57, 29, .68);
}


.grimorio-spread[data-spread="2"]
.gcs-compendium-divider span {

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(87, 59, 30, .42)
        );
}


.grimorio-spread[data-spread="2"]
.gcs-compendium-divider span:last-child {

    transform: scaleX(-1);
}


.grimorio-spread[data-spread="2"]
.gcs-compendium-divider b {

    font-size: 8px;

    font-weight: normal;
}


/* ============================================================
   LINAJE / OFICIO / MEMORIA
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-compendium-pillars {

    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    width: 100%;

    margin:
        0
        0
        0 !important;

    border-top:
        1px solid
        rgba(85, 58, 30, .19);

    border-bottom:
        1px solid
        rgba(85, 58, 30, .19);
}


.grimorio-spread[data-spread="2"]
.gcs-compendium-pillar {

    position: relative;

    padding:
        10px
        7px
        11px !important;

    box-sizing: border-box;

    text-align: center;
}


.grimorio-spread[data-spread="2"]
.gcs-compendium-pillar
+
.gcs-compendium-pillar {

    border-left:
        1px solid
        rgba(85, 58, 30, .17);
}


.grimorio-spread[data-spread="2"]
.gcs-compendium-pillar-mark {

    height: 19px;

    margin-bottom: 2px;

    font-size: 16px !important;

    line-height: 18px;

    color: rgba(92, 63, 33, .78);
}


.grimorio-spread[data-spread="2"]
.gcs-compendium-pillar h3 {

    position: relative;

    margin:
        3px
        0
        7px !important;

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size: 8.5px !important;

    font-weight: 500;

    letter-spacing: 1.45px;

    color: #46301a !important;
}


.grimorio-spread[data-spread="2"]
.gcs-compendium-pillar h3::after {

    content: "";

    display: block;

    width: 25px;
    height: 1px;

    margin:
        4px
        auto
        0;

    background:
        rgba(93, 63, 32, .30);
}


.grimorio-spread[data-spread="2"]
.gcs-compendium-pillar p {

    max-width: 112px;

    margin:
        0
        auto !important;

    font-size: 7.3px !important;

    line-height: 1.32;

    color:
        rgba(72, 50, 28, .78) !important;
}


/* ============================================================
   FRASE FINAL
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-compendium-footer {

    flex: 0 0 auto;

    margin-top:
        11px !important;

    text-align: center;
}


.grimorio-spread[data-spread="2"]
.gcs-compendium-footer > div {

    width: 68% !important;

    height: 1px;

    margin:
        0
        auto
        7px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(88, 59, 29, .37),
            transparent
        );
}


.grimorio-spread[data-spread="2"]
.gcs-compendium-footer blockquote {

    margin: 0 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 8px !important;

    line-height: 1.35;

    font-style: italic;

    color:
        rgba(64, 44, 24, .77) !important;
}


.grimorio-spread[data-spread="2"]
.gcs-compendium-footer > span {

    display: block;

    margin-top: 5px;

    font-size: 8px;

    color:
        rgba(87, 58, 29, .53);
}


/* ============================================================
   EVITAR REGLAS ANTIGUAS DEL SELECTOR
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-compendium
.selector-left-decoration,

.grimorio-spread[data-spread="2"]
.gcs-compendium
.selector-left-symbol,

.grimorio-spread[data-spread="2"]
.gcs-compendium
.selector-left-label {

    display: none !important;
}


/* === HOJA05_COMPENDIO_V2_END === */



/* ============================================================
   HOJA 05 — AJUSTE SUPERIOR
   Baja ligeramente REGISTRO DEL GRIMORIO
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-compendium-header {
    padding-top: 8px !important;
}


/* ============================================================
   HOJA 05 — CAPITULAR EDITORIAL
   Letra E en marco
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-compendium-copy
p:first-child::first-letter {

    float: left;

    margin:
        2px
        8px
        2px
        0;

    padding:
        3px
        7px
        2px;

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size: 28px;

    font-weight: 400;

    line-height: 1;

    color: #4b321b;

    border:
        1px solid
        rgba(78, 52, 27, .55);

    outline:
        1px solid
        rgba(78, 52, 27, .18);

    outline-offset: 2px;

    background:
        rgba(226, 199, 149, .12);

    text-shadow:
        0 1px 0
        rgba(255,255,255,.35);
}


/* ============================================================
   HOJA06_CATALOGO_V1
   III / V — ÍNDICE DE PERSONAJES
   DISEÑO EDITORIAL
   ============================================================ */


/* ---------- CONTENEDOR ---------- */

.grimorio-spread[data-spread="2"]
.character-selector-page {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;

    padding:
        24px
        28px
        22px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}

.grimorio-spread[data-spread="2"]
.grimorio-character-selector {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    height: 100% !important;

    box-sizing: border-box !important;
}


/* ============================================================
   CABECERA
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-header {
    flex: 0 0 auto !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
}


/* REGISTRO DEL GRIMORIO */

.grimorio-spread[data-spread="2"]
.gcs-selector-header
.character-selector-kicker {
    margin: 0 0 5px !important;

    font-family:
        "Cinzel",
        Georgia,
        serif !important;

    font-size: 7px !important;

    font-weight: 400 !important;

    letter-spacing: 3.2px !important;

    color:
        rgba(71,49,27,.55) !important;
}


/* TÍTULO */

.grimorio-spread[data-spread="2"]
.gcs-selector-header
.character-selector-title {
    margin: 0 !important;

    font-family:
        "Cinzel",
        Georgia,
        serif !important;

    font-size: 23px !important;

    font-weight: 400 !important;

    line-height: 1.05 !important;

    letter-spacing: .8px !important;

    color: #382719 !important;
}


/* ORNAMENTO */

.grimorio-spread[data-spread="2"]
.gcs-selector-header
.character-selector-ornament {
    margin:
        6px
        0
        5px !important;

    font-size: 8px !important;

    letter-spacing: 3px !important;

    color:
        rgba(98,68,36,.66) !important;
}


/* SUBTÍTULO */

.grimorio-spread[data-spread="2"]
.gcs-selector-header
.character-selector-copy {
    max-width: 360px !important;

    margin:
        0
        auto
        10px !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: 8px !important;

    line-height: 1.4 !important;

    font-style: italic !important;

    color:
        rgba(70,49,28,.72) !important;
}


/* ============================================================
   CONTROLES
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-controls {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap:
        7px
        8px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* BUSCADOR */

.grimorio-spread[data-spread="2"]
.gcs-selector-search {
    position: relative !important;

    grid-column:
        1 / -1 !important;

    width: 100% !important;
}


.grimorio-spread[data-spread="2"]
.gcs-selector-search input {
    width: 100% !important;
    height: 31px !important;

    padding:
        0
        12px
        0
        30px !important;

    box-sizing: border-box !important;

    border:
        1px solid
        rgba(91,63,34,.34) !important;

    border-radius: 2px !important;

    background:
        rgba(245,228,192,.16) !important;

    box-shadow:
        inset 0 0 12px
        rgba(79,52,25,.04) !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: 9px !important;

    color: #4d3821 !important;

    outline: none !important;
}


.grimorio-spread[data-spread="2"]
.gcs-selector-search::before {
    content: "⌕";

    position: absolute;

    left: 10px;
    top: 50%;

    transform:
        translateY(-50%);

    z-index: 2;

    font-size: 14px;

    color:
        rgba(74,51,28,.70);

    pointer-events: none;
}


/* FILTROS EN UNA SOLA FILA */

.grimorio-spread[data-spread="2"]
.gcs-selector-filter-row {
    display: contents !important;
}


.grimorio-spread[data-spread="2"]
.gcs-selector-controls select {
    width: 100% !important;
    height: 29px !important;

    padding:
        0
        9px !important;

    box-sizing: border-box !important;

    border:
        1px solid
        rgba(91,63,34,.30) !important;

    border-radius: 2px !important;

    background-color:
        rgba(244,225,186,.14) !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: 8px !important;

    color: #523b23 !important;

    outline: none !important;
}


.grimorio-spread[data-spread="2"]
#grimorio-order-filter {
    grid-column: auto !important;
}


/* ============================================================
   CONTADOR EDITORIAL
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-count {
    grid-column:
        1 / -1 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 10px;

    width: 100% !important;

    margin:
        4px
        0
        2px !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: 7.5px !important;

    font-style: italic !important;

    color:
        rgba(74,51,28,.62) !important;
}


.grimorio-spread[data-spread="2"]
.gcs-selector-count::before,

.grimorio-spread[data-spread="2"]
.gcs-selector-count::after {
    content: "";

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(89,60,31,.30)
        );
}


.grimorio-spread[data-spread="2"]
.gcs-selector-count::after {
    transform: scaleX(-1);
}


/* ============================================================
   GRID
   DOS REGISTROS EDITORIALES
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-grid {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    align-items: stretch !important;

    gap: 14px !important;

    width: 100% !important;

    margin:
        9px
        auto
        0 !important;

    padding: 0 !important;
}


/* ============================================================
   TARJETAS
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-card {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    min-width: 0 !important;

    height: 245px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    border:
        1px solid
        rgba(81,55,28,.40) !important;

    border-radius: 2px !important;

    background:
        linear-gradient(
            180deg,
            rgba(236,210,163,.25),
            rgba(247,231,198,.14)
        ) !important;

    box-shadow:
        0 2px 7px rgba(58,38,18,.09),
        inset 0 0 0 2px
        rgba(255,255,255,.11) !important;

    text-decoration: none !important;

    color: #49331d !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease !important;
}


.grimorio-spread[data-spread="2"]
.gcs-selector-card:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 5px 11px rgba(55,35,16,.14),
        inset 0 0 0 2px
        rgba(255,255,255,.14) !important;
}


/* ADORNO SUPERIOR */

.grimorio-spread[data-spread="2"]
.gcs-selector-card::before {
    content: "✦";

    position: absolute;

    top: 5px;
    left: 7px;

    z-index: 5;

    font-size: 6px;

    color:
        rgba(82,55,28,.50);
}


/* ============================================================
   RETRATO
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-portrait {
    flex: 0 0 auto !important;

    width: 100% !important;
    height: 112px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;

    border-bottom:
        1px solid
        rgba(83,56,28,.22) !important;

    background:
        radial-gradient(
            circle,
            rgba(210,178,119,.17),
            rgba(97,65,31,.04)
        ) !important;
}


.grimorio-spread[data-spread="2"]
.gcs-selector-portrait img {
    width: 96px !important;
    height: 96px !important;

    object-fit: cover !important;

    border-radius: 50% !important;

    border:
        1px solid
        rgba(76,51,27,.42) !important;

    box-shadow:
        0 0 0 3px
        rgba(104,71,34,.09),

        0 0 0 5px
        rgba(76,51,27,.15) !important;
}


/* ============================================================
   CONTENIDO
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-card-content {
    display: flex !important;

    flex: 1 !important;
    flex-direction: column !important;

    align-items: center !important;

    padding:
        8px
        10px
        8px !important;

    box-sizing: border-box !important;

    text-align: center !important;
}


/* RAZA */

.grimorio-spread[data-spread="2"]
.gcs-selector-race {
    position: relative;

    margin:
        0
        0
        4px !important;

    padding:
        0
        14px;

    font-family:
        "Cinzel",
        Georgia,
        serif !important;

    font-size: 7px !important;

    letter-spacing: 1.8px !important;

    color:
        rgba(83,57,30,.68) !important;
}


.grimorio-spread[data-spread="2"]
.gcs-selector-race::before,

.grimorio-spread[data-spread="2"]
.gcs-selector-race::after {
    content: "";

    position: absolute;

    top: 50%;

    width: 10px;
    height: 1px;

    background:
        rgba(82,55,28,.30);
}


.grimorio-spread[data-spread="2"]
.gcs-selector-race::before {
    left: 0;
}


.grimorio-spread[data-spread="2"]
.gcs-selector-race::after {
    right: 0;
}


/* NOMBRE */

.grimorio-spread[data-spread="2"]
.gcs-selector-name {
    margin:
        0
        0
        3px !important;

    font-family:
        "Cinzel",
        Georgia,
        serif !important;

    font-size: 15px !important;

    font-weight: 500 !important;

    line-height: 1.05 !important;

    color: #382719 !important;
}


/* SUBTÍTULO */

.grimorio-spread[data-spread="2"]
.gcs-selector-subtitle {
    min-height: 25px;

    margin: 0 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: 7.5px !important;

    line-height: 1.3 !important;

    font-style: italic !important;

    color:
        rgba(72,50,28,.75) !important;
}


/* ============================================================
   PIE DE TARJETA
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-card-footer {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;

    margin-top: auto !important;

    padding-top: 7px !important;

    border-top:
        1px solid
        rgba(80,54,28,.20) !important;

    font-family:
        "Cinzel",
        Georgia,
        serif !important;

    font-size: 6.8px !important;

    letter-spacing: .5px !important;

    color:
        rgba(69,47,25,.78) !important;
}


.grimorio-spread[data-spread="2"]
.gcs-selector-card-footer
span:last-child::before {
    content: "ABRIR REGISTRO";
    font-size: 0;
}


/* ============================================================
   PAGINACIÓN
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-pagination {
    flex: 0 0 auto !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 5px !important;

    margin-top:
        8px !important;
}


.grimorio-spread[data-spread="2"]
.gcs-selector-pagination button {
    min-width: 22px !important;
    height: 22px !important;

    border:
        1px solid
        rgba(83,56,29,.32) !important;

    border-radius: 50% !important;

    background:
        rgba(226,198,147,.12) !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: 8px !important;

    color: #543c22 !important;

    cursor: pointer;
}


/* ============================================================
   FIN HOJA06_CATALOGO_V1
   ============================================================ */


/* =========================================================
   HOJA 05 — AGRANDAR TEXTO
   ========================================================= */

.character-selector-spread .page-left .gcs-compendium-subtitle {
    font-size: 1.08rem;
    line-height: 1.45;
}

.character-selector-spread .page-left .gcs-compendium-copy p {
    font-size: 1rem;
    line-height: 1.6;
}

.character-selector-spread .page-left .gcs-compendium-copy {
    gap: 0.8rem;
}

.character-selector-spread .page-left .gcs-compendium-pillar h3 {
    font-size: 0.98rem;
    letter-spacing: 0.08em;
}

.character-selector-spread .page-left .gcs-compendium-pillar p {
    font-size: 0.86rem;
    line-height: 1.45;
}

.character-selector-spread .page-left .gcs-compendium-footer blockquote {
    font-size: 0.86rem;
    line-height: 1.45;
}

.character-selector-spread .page-left .gcs-compendium-dropcap {
    font-size: 2.3rem;
}


/* ============================================================
   HOJA 05 — CORRECCIÓN DE ESCALA TIPOGRÁFICA
   Revierte ampliación excesiva y conserva capitular
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-compendium-subtitle {
    font-size: 10px !important;
    line-height: 1.35 !important;
}

.grimorio-spread[data-spread="2"]
.gcs-compendium-copy {
    font-size: 9.2px !important;
    line-height: 1.43 !important;
}

.grimorio-spread[data-spread="2"]
.gcs-compendium-copy p {
    font-size: 9.2px !important;
    line-height: 1.43 !important;
    margin: 0 0 8px !important;
}

.grimorio-spread[data-spread="2"]
.gcs-compendium-pillar h3 {
    font-size: 8.5px !important;
    line-height: 1.2 !important;
}

.grimorio-spread[data-spread="2"]
.gcs-compendium-pillar p {
    font-size: 7.3px !important;
    line-height: 1.32 !important;
}

.grimorio-spread[data-spread="2"]
.gcs-compendium-footer blockquote {
    font-size: 8px !important;
    line-height: 1.35 !important;
}

/* Conservamos la E capitular */
.grimorio-spread[data-spread="2"]
.gcs-compendium-copy
p:first-child::first-letter {
    font-size: 28px !important;
    line-height: 1 !important;
}


/* ============================================================
   HOJA 05 — CORRECCIÓN DE ESCALA TIPOGRÁFICA
   Revierte ampliación excesiva y conserva capitular
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-compendium-subtitle {
    font-size: 10px !important;
    line-height: 1.35 !important;
}

.grimorio-spread[data-spread="2"]
.gcs-compendium-copy {
    font-size: 9.2px !important;
    line-height: 1.43 !important;
}

.grimorio-spread[data-spread="2"]
.gcs-compendium-copy p {
    font-size: 9.2px !important;
    line-height: 1.43 !important;
    margin: 0 0 8px !important;
}

.grimorio-spread[data-spread="2"]
.gcs-compendium-pillar h3 {
    font-size: 8.5px !important;
    line-height: 1.2 !important;
}

.grimorio-spread[data-spread="2"]
.gcs-compendium-pillar p {
    font-size: 7.3px !important;
    line-height: 1.32 !important;
}

.grimorio-spread[data-spread="2"]
.gcs-compendium-footer blockquote {
    font-size: 8px !important;
    line-height: 1.35 !important;
}

/* Conservamos la E capitular */
.grimorio-spread[data-spread="2"]
.gcs-compendium-copy
p:first-child::first-letter {
    font-size: 28px !important;
    line-height: 1 !important;
}


/* ============================================================
   HOJA 05 — AGRANDAR PILARES Y FRASE FINAL
   LINAJE / OFICIO / MEMORIA + cita
   ============================================================ */

.grimorio-spread[data-spread="2"] .gcs-compendium-pillars {
    margin-top: 18px !important;
    gap: 0 !important;
}

.grimorio-spread[data-spread="2"] .gcs-compendium-pillar {
    padding: 14px 12px 12px !important;
}

.grimorio-spread[data-spread="2"] .gcs-compendium-pillar-mark {
    font-size: 16px !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
}

.grimorio-spread[data-spread="2"] .gcs-compendium-pillar h3 {
    font-size: 12px !important;
    letter-spacing: 1.4px !important;
    line-height: 1.2 !important;
    margin: 0 0 8px !important;
}

.grimorio-spread[data-spread="2"] .gcs-compendium-pillar p {
    font-size: 9px !important;
    line-height: 1.42 !important;
    margin: 0 !important;
}

.grimorio-spread[data-spread="2"] .gcs-compendium-footer {
    margin-top: 14px !important;
    padding-top: 8px !important;
}

.grimorio-spread[data-spread="2"] .gcs-compendium-footer blockquote {
    font-size: 10px !important;
    line-height: 1.45 !important;
    font-style: italic !important;
}

.grimorio-spread[data-spread="2"] .gcs-compendium-footer span {
    font-size: 13px !important;
    display: inline-block !important;
    margin-top: 4px !important;
}



/* ============================================================
   HOJA06_SIDEBAR_V1
   III / V — ÍNDICE INTERACTIVO DEL GRIMORIO
   ============================================================ */


/* Ocultamos completamente los elementos de formulario.
   Siguen existiendo en DOM para conservar la lógica. */

.grimorio-spread[data-spread="2"]
.gcs-original-controls-hidden {

    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    clip: rect(0 0 0 0) !important;

    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* ============================================================
   CONTENEDOR GENERAL HOJA 06
   ============================================================ */

.grimorio-spread[data-spread="2"]
.character-selector-page {

    padding:
        25px
        25px
        23px !important;
}


.grimorio-spread[data-spread="2"]
.grimorio-character-selector {

    display: flex !important;

    flex-direction: column !important;

    height: 100% !important;

    overflow: hidden !important;
}


/* ============================================================
   CABECERA
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-header {

    flex: 0 0 auto !important;

    padding-bottom:
        10px !important;

    border-bottom:
        1px solid
        rgba(82,55,28,.18);
}


/* ============================================================
   WORKSPACE
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-medieval-workspace {

    min-height: 0 !important;

    flex: 1 1 auto !important;

    display: grid !important;

    grid-template-columns:
        78px
        minmax(0, 1fr) !important;

    margin-top:
        10px !important;

    overflow: hidden !important;

    border:
        1px solid
        rgba(73,47,25,.25);

    box-shadow:
        inset 0 0 18px
        rgba(63,38,18,.04);
}


/* ============================================================
   FRANJA VINO
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-medieval-sidebar {

    position: relative;

    display: flex !important;

    flex-direction: column !important;

    align-items: stretch !important;

    width: 78px !important;

    min-height: 0 !important;

    padding:
        10px
        0
        9px !important;

    box-sizing: border-box !important;

    background:
        linear-gradient(
            180deg,
            #76231f 0%,
            #681b19 52%,
            #541513 100%
        ) !important;

    border-right:
        1px solid
        rgba(54,24,14,.70);

    box-shadow:
        inset -4px 0 10px
        rgba(29,9,7,.17),

        inset 1px 0 0
        rgba(255,218,157,.10);
}


/* línea dorada interna */

.grimorio-spread[data-spread="2"]
.gcs-medieval-sidebar::after {

    content: "";

    position: absolute;

    top: 8px;
    right: 5px;
    bottom: 8px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(218,177,103,.48),
            rgba(218,177,103,.48),
            transparent
        );
}


/* ============================================================
   EMBLEMA SIDEBAR
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-sidebar-emblem {

    flex: 0 0 auto;

    padding:
        5px
        6px
        12px;

    text-align: center;

    font-size: 16px;

    color:
        rgba(231,194,125,.82);
}


/* ============================================================
   BOTONES VERTICALES
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-sidebar-item {

    appearance: none !important;

    position: relative;

    flex: 0 0 auto;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    min-height:
        70px !important;

    padding:
        8px
        5px !important;

    border: 0 !important;

    border-top:
        1px solid
        rgba(237,200,128,.14) !important;

    border-radius: 0 !important;

    background:
        transparent !important;

    color:
        rgba(244,217,163,.80) !important;

    cursor: pointer !important;

    transition:
        background .18s ease,
        color .18s ease !important;
}


.grimorio-spread[data-spread="2"]
.gcs-sidebar-item:last-of-type {

    border-bottom:
        1px solid
        rgba(237,200,128,.14) !important;
}


.grimorio-spread[data-spread="2"]
.gcs-sidebar-item:hover,

.grimorio-spread[data-spread="2"]
.gcs-sidebar-item.active {

    background:
        linear-gradient(
            90deg,
            rgba(249,211,139,.08),
            rgba(249,211,139,.18)
        ) !important;

    color:
        #f0d6a0 !important;
}


/* pequeño indicador dorado */

.grimorio-spread[data-spread="2"]
.gcs-sidebar-item.active::before {

    content: "";

    position: absolute;

    left: 0;
    top: 15%;

    width: 3px;
    height: 70%;

    background:
        #c49a54;

    box-shadow:
        0 0 5px
        rgba(212,166,87,.35);
}


/* ============================================================
   ICONOS
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-sidebar-icon {

    display: block;

    margin-bottom:
        6px;

    font-family:
        Georgia,
        serif;

    font-size:
        18px;

    line-height: 1;
}


/* ============================================================
   LABELS
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-sidebar-label {

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size:
        7px;

    line-height: 1.1;

    letter-spacing:
        1.1px;
}


.grimorio-spread[data-spread="2"]
.gcs-sidebar-tail {

    margin-top: auto;

    padding-top:
        8px;

    text-align: center;

    font-size: 13px;

    color:
        rgba(229,190,118,.65);
}


/* ============================================================
   PANEL DERECHO
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-records-panel {

    min-width: 0 !important;
    min-height: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    padding:
        11px
        11px
        10px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    background:
        rgba(255,244,218,.06);
}


/* ============================================================
   CABECERA REGISTROS
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-records-heading {

    flex: 0 0 auto;

    text-align: center;

    margin-bottom:
        4px;

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size:
        10px;

    letter-spacing:
        2px;

    color: #52371f;
}


.grimorio-spread[data-spread="2"]
.gcs-records-ornament {

    margin-top:
        3px;

    font-size:
        7px;

    letter-spacing:
        1px;

    color:
        rgba(92,62,31,.48);
}


/* contador */

.grimorio-spread[data-spread="2"]
.gcs-records-count {

    flex: 0 0 auto !important;

    margin:
        1px
        0
        6px !important;

    text-align: center !important;

    font-size:
        7px !important;

    font-style: italic;

    color:
        rgba(76,52,29,.60) !important;
}


/* ============================================================
   SCROLL VERTICAL
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-records-scroll {

    min-height: 0 !important;

    flex: 1 1 auto !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding:
        2px
        7px
        4px
        2px !important;

    scrollbar-width:
        thin;

    scrollbar-color:
        #8b6738
        rgba(94,62,30,.08);
}


/* Chrome / Safari */

.grimorio-spread[data-spread="2"]
.gcs-records-scroll::-webkit-scrollbar {

    width: 7px;
}


.grimorio-spread[data-spread="2"]
.gcs-records-scroll::-webkit-scrollbar-track {

    background:
        rgba(91,59,28,.07);

    border-radius:
        10px;
}


.grimorio-spread[data-spread="2"]
.gcs-records-scroll::-webkit-scrollbar-thumb {

    background:
        linear-gradient(
            180deg,
            #a47a40,
            #735029
        );

    border:
        1px solid
        rgba(74,47,23,.25);

    border-radius:
        10px;
}


/* ============================================================
   GRID VERTICAL
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-grid {

    display: flex !important;

    flex-direction: column !important;

    gap:
        9px !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;
}


/* ============================================================
   CARDS HORIZONTALES
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-card {

    flex: 0 0 auto !important;

    display: grid !important;

    grid-template-columns:
        82px
        minmax(0, 1fr) !important;

    width: 100% !important;

    height: 104px !important;

    min-height: 104px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    border:
        1px solid
        rgba(81,55,29,.34) !important;

    border-radius:
        2px !important;

    background:
        linear-gradient(
            90deg,
            rgba(218,184,125,.17),
            rgba(247,231,197,.08)
        ) !important;

    box-shadow:
        0 2px 5px
        rgba(57,35,16,.06),

        inset 0 0 0 1px
        rgba(255,255,255,.10) !important;

    text-decoration:
        none !important;

    color:
        #49331d !important;
}


/* ============================================================
   RETRATO CARD
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-portrait {

    width: 82px !important;
    height: 100% !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    border-right:
        1px solid
        rgba(84,56,28,.20) !important;

    border-bottom:
        0 !important;

    background:
        radial-gradient(
            circle,
            rgba(210,177,117,.18),
            rgba(107,69,31,.04)
        ) !important;
}


.grimorio-spread[data-spread="2"]
.gcs-selector-portrait img {

    width: 61px !important;
    height: 61px !important;

    object-fit: cover !important;

    border-radius:
        50% !important;

    border:
        1px solid
        rgba(71,47,24,.40) !important;

    box-shadow:
        0 0 0 3px
        rgba(100,67,33,.08),

        0 0 0 5px
        rgba(72,48,24,.12) !important;
}


/* ============================================================
   INFORMACIÓN CARD
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-card-content {

    min-width: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    align-items:
        flex-start !important;

    padding:
        10px
        12px
        8px !important;

    text-align:
        left !important;
}


.grimorio-spread[data-spread="2"]
.gcs-selector-race {

    margin:
        0
        0
        3px !important;

    padding: 0 !important;

    font-size:
        6.5px !important;

    letter-spacing:
        1.6px !important;
}


.grimorio-spread[data-spread="2"]
.gcs-selector-race::before,

.grimorio-spread[data-spread="2"]
.gcs-selector-race::after {

    display:
        none !important;
}


.grimorio-spread[data-spread="2"]
.gcs-selector-name {

    margin:
        0
        0
        3px !important;

    font-size:
        14px !important;

    line-height:
        1 !important;
}


.grimorio-spread[data-spread="2"]
.gcs-selector-subtitle {

    min-height:
        0 !important;

    margin: 0 !important;

    font-size:
        7.5px !important;

    line-height:
        1.25 !important;
}


/* ============================================================
   FOOTER CARD
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-card-footer {

    width:
        100% !important;

    margin-top:
        auto !important;

    padding-top:
        5px !important;

    font-size:
        6.5px !important;
}


/* ============================================================
   PAGINACIÓN
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-pagination {

    margin:
        8px
        0
        2px !important;
}


/* ============================================================
   FIN HOJA06_SIDEBAR_V1
   ============================================================ */


/* ============================================================
   HOJA 06 — SIDEBAR VINO A ALTURA COMPLETA
   La franja ocupa toda la hoja útil
   ============================================================ */

.grimorio-spread[data-spread="2"]
.character-selector-page {

    position: relative !important;

    padding: 0 !important;

    overflow: hidden !important;
}


/* El selector ocupa toda la hoja.
   Reservamos a la izquierda el ancho de la franja. */

.grimorio-spread[data-spread="2"]
.grimorio-character-selector {

    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    padding-left: 78px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}


/* ============================================================
   CABECERA — SOLO ZONA DERECHA
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-header {

    width: 100% !important;

    box-sizing: border-box !important;

    padding:
        27px
        27px
        10px !important;

    margin: 0 !important;
}


/* ============================================================
   WORKSPACE — YA NO RESERVA COLUMNA PARA SIDEBAR
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-medieval-workspace {

    position: static !important;

    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    border-left: 0 !important;

    overflow: visible !important;
}


/* ============================================================
   FRANJA VINO — ALTURA COMPLETA DE HOJA
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-medieval-sidebar {

    position: absolute !important;

    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    z-index: 50 !important;

    width: 78px !important;
    height: auto !important;
    min-height: 100% !important;

    padding:
        14px
        0
        12px !important;

    box-sizing: border-box !important;

    background:
        linear-gradient(
            180deg,
            #78231f 0%,
            #681b19 48%,
            #571411 100%
        ) !important;

    border-right:
        1px solid
        rgba(45,20,12,.75) !important;

    box-shadow:
        inset -5px 0 12px rgba(30,8,6,.18),
        inset 1px 0 0 rgba(255,215,145,.11) !important;
}


/* Línea dorada vertical */

.grimorio-spread[data-spread="2"]
.gcs-medieval-sidebar::after {

    content: "";

    position: absolute;

    top: 10px;
    bottom: 10px;
    right: 5px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(220,177,101,.55) 10%,
            rgba(220,177,101,.55) 90%,
            transparent
        ) !important;
}


/* ============================================================
   PANEL DE REGISTROS
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-records-panel {

    width: 100% !important;

    height: calc(100% - 0px) !important;

    padding:
        10px
        18px
        16px !important;

    box-sizing: border-box !important;

    border: 0 !important;
}


/* ============================================================
   EL SCROLL SIGUE SOLO EN LAS CARDS
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-records-scroll {

    min-height: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}


/* ============================================================
   FIN SIDEBAR FULL HEIGHT
   ============================================================ */


/* ============================================================
   HOJA 06 — DESPLAZAR SIDEBAR VINO A LA DERECHA
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-medieval-sidebar {
    left: 8px !important;
}

/* Compensamos el espacio para que las cards no se monten */
.grimorio-spread[data-spread="2"]
.grimorio-character-selector {
    padding-left: 86px !important;
}


/* ============================================================
   HOJA 06 — SIDEBAR UN POCO MÁS A LA DERECHA
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-medieval-sidebar {
    left: 12px !important;
}

.grimorio-spread[data-spread="2"]
.grimorio-character-selector {
    padding-left: 90px !important;
}


/* ============================================================
   HOJA 06 — SIDEBAR UN POCO MÁS A LA DERECHA
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-medieval-sidebar {
    left: 16px !important;
}

.grimorio-spread[data-spread="2"]
.grimorio-character-selector {
    padding-left: 94px !important;
}


/* ============================================================
   HOJA 06 — SIDEBAR DOBLE AJUSTE A LA DERECHA
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-medieval-sidebar {
    left: 24px !important;
}

.grimorio-spread[data-spread="2"]
.grimorio-character-selector {
    padding-left: 102px !important;
}


/* ============================================================
   HOJA 06 — SIDEBAR VINO AL LADO DERECHO
   ============================================================ */


/* Liberamos el lado izquierdo y reservamos espacio a la derecha */

.grimorio-spread[data-spread="2"]
.grimorio-character-selector {

    padding-left: 0 !important;

    padding-right: 102px !important;

    box-sizing: border-box !important;
}


/* ============================================================
   FRANJA VINO — DERECHA
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-medieval-sidebar {

    left: auto !important;

    right: 24px !important;

    top: 0 !important;
    bottom: 0 !important;

    width: 78px !important;

    height: auto !important;
    min-height: 100% !important;

    border-right: 0 !important;

    border-left:
        1px solid
        rgba(45,20,12,.75) !important;

    box-shadow:
        inset 5px 0 12px rgba(30,8,6,.18),
        inset -1px 0 0 rgba(255,215,145,.11) !important;
}


/* Línea dorada ahora queda del lado de las tarjetas */

.grimorio-spread[data-spread="2"]
.gcs-medieval-sidebar::after {

    left: 5px !important;

    right: auto !important;
}


/* Indicador del elemento seleccionado también cambia de lado */

.grimorio-spread[data-spread="2"]
.gcs-sidebar-item.active::before {

    left: auto !important;

    right: 0 !important;
}


/* ============================================================
   PANEL DE REGISTROS — IZQUIERDA
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-records-panel {

    width: 100% !important;

    padding:
        10px
        15px
        16px
        20px !important;
}


/* ============================================================
   FIN — SIDEBAR DERECHA
   ============================================================ */


/* ============================================================
   HOJA 06 — SIDEBAR AZUL AL LADO IZQUIERDO
   ============================================================ */


/* Liberar lado derecho y reservar espacio para la barra izquierda */

.grimorio-spread[data-spread="2"]
.grimorio-character-selector {

    padding-right: 0 !important;
    padding-left: 102px !important;

    box-sizing: border-box !important;
}


/* ============================================================
   FRANJA AZUL — IZQUIERDA
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-medieval-sidebar {

    left: 24px !important;
    right: auto !important;

    top: 0 !important;
    bottom: 0 !important;

    width: 78px !important;
    height: auto !important;
    min-height: 100% !important;

    background:
        linear-gradient(
            180deg,
            #1d4c7d 0%,
            #173e69 45%,
            #102f52 100%
        ) !important;

    border-left: 0 !important;

    border-right:
        1px solid
        rgba(12,31,51,.80) !important;

    box-shadow:
        inset -5px 0 12px rgba(5,18,34,.22),
        inset 1px 0 0 rgba(218,190,126,.14) !important;
}


/* Línea dorada interior junto a las cards */

.grimorio-spread[data-spread="2"]
.gcs-medieval-sidebar::after {

    left: auto !important;
    right: 5px !important;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(218,177,103,.62) 10%,
            rgba(218,177,103,.62) 90%,
            transparent
        ) !important;
}


/* ============================================================
   BOTONES
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-sidebar-item {

    color:
        rgba(239,214,162,.85) !important;

    border-top:
        1px solid
        rgba(225,195,137,.15) !important;
}


.grimorio-spread[data-spread="2"]
.gcs-sidebar-item:hover,

.grimorio-spread[data-spread="2"]
.gcs-sidebar-item.active {

    background:
        linear-gradient(
            90deg,
            rgba(225,190,121,.06),
            rgba(225,190,121,.17)
        ) !important;

    color:
        #f1d79f !important;
}


/* Indicador seleccionado ahora del lado izquierdo */

.grimorio-spread[data-spread="2"]
.gcs-sidebar-item.active::before {

    left: 0 !important;
    right: auto !important;

    background:
        #c8a05a !important;
}


/* Emblemas */

.grimorio-spread[data-spread="2"]
.gcs-sidebar-emblem,

.grimorio-spread[data-spread="2"]
.gcs-sidebar-tail {

    color:
        rgba(232,198,130,.82) !important;
}


/* ============================================================
   CARDS A LA DERECHA DE LA FRANJA
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-records-panel {

    width: 100% !important;

    padding:
        10px
        20px
        16px
        15px !important;
}


/* ============================================================
   FIN — SIDEBAR AZUL IZQUIERDA
   ============================================================ */


/* =========================================================
   FIX HOJA 06 — evitar que el título se salga / se encime
   ========================================================= */

.character-selector-page,
.grimorio-character-selector {
    position: relative;
    box-sizing: border-box;
}

/* deja espacio para la barra azul y para el folio derecho */
.character-selector-page .grimorio-character-selector {
    padding-left: 0;
    padding-right: 2.8rem;
}

/* título principal */
.character-selector-page .character-selector-title,
.character-selector-page .gcs-title,
.character-selector-page h2 {
    max-width: calc(100% - 5.5rem);
    margin: 0 auto 0.45rem auto;
    text-align: center;
    font-size: clamp(2.2rem, 2.7vw, 3.1rem);
    line-height: 0.95;
    letter-spacing: 0.03em;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    text-wrap: balance;
}

/* subtítulo debajo del título */
.character-selector-page .character-selector-copy,
.character-selector-page .gcs-copy,
.character-selector-page p {
    max-width: calc(100% - 5rem);
    margin-left: auto;
    margin-right: auto;
}

/* folio: III / V */
.character-selector-page .page-folio,
.character-selector-page .character-selector-folio,
.character-selector-page .gcs-folio {
    position: absolute;
    top: 0.6rem;
    right: 1.1rem;
    z-index: 10;
    white-space: nowrap;
    font-size: 1rem;
    line-height: 1;
}

/* por si el folio está dibujado en un elemento superior */
.character-selector-page [class*="folio"] {
    white-space: nowrap;
}

/* un poco más de aire arriba del encabezado */
.character-selector-page .grimorio-character-selector > *:first-child {
    margin-top: 0.3rem;
}


/* ============================================================
   HOJA 06 — AJUSTE DE COMODIDAD VISUAL
   Barra más fina + más aire para registros
   ============================================================ */

/* barra azul un poco más delgada */

.grimorio-spread[data-spread="2"]
.gcs-medieval-sidebar {
    width: 66px !important;
}


/* reservamos exactamente el espacio necesario */

.grimorio-spread[data-spread="2"]
.grimorio-character-selector {
    padding-left: 90px !important;
}


/* botones ligeramente más compactos */

.grimorio-spread[data-spread="2"]
.gcs-sidebar-item {
    min-height: 64px !important;
    padding: 7px 4px !important;
}


.grimorio-spread[data-spread="2"]
.gcs-sidebar-icon {
    font-size: 16px !important;
    margin-bottom: 5px !important;
}


.grimorio-spread[data-spread="2"]
.gcs-sidebar-label {
    font-size: 6.5px !important;
    letter-spacing: .9px !important;
}


/* más espacio para las cards */

.grimorio-spread[data-spread="2"]
.gcs-records-panel {
    padding:
        11px
        20px
        16px
        14px !important;
}


/* cards aprovechan mejor el ancho */

.grimorio-spread[data-spread="2"]
.gcs-selector-card {
    width: 100% !important;
}


/* un poco de respiración entre encabezado y registros */

.grimorio-spread[data-spread="2"]
.gcs-records-heading {
    margin-top: 4px !important;
    margin-bottom: 7px !important;
}


/* ============================================================
   HOJA 06 — AJUSTE FINO DE CABECERA
   Más aire entre título y III / V
   ============================================================ */

/* Cabecera con espacio real para el folio */

.grimorio-spread[data-spread="2"]
.gcs-selector-header {
    position: relative !important;

    padding:
        34px
        72px
        15px
        32px !important;

    box-sizing: border-box !important;
}


/* REGISTRO DEL GRIMORIO */

.grimorio-spread[data-spread="2"]
.gcs-selector-header
.character-selector-kicker {
    margin-bottom: 7px !important;

    font-size: 7px !important;

    letter-spacing: 3.4px !important;
}


/* TÍTULO */

.grimorio-spread[data-spread="2"]
.gcs-selector-header
.character-selector-title {
    width: auto !important;

    max-width: 500px !important;

    margin:
        0
        auto !important;

    font-size: 21px !important;

    line-height: 1.08 !important;

    letter-spacing: .7px !important;

    white-space: nowrap !important;

    text-align: center !important;
}


/* Ornamento */

.grimorio-spread[data-spread="2"]
.gcs-selector-header
.character-selector-ornament {
    margin:
        8px
        0
        6px !important;
}


/* Texto introductorio */

.grimorio-spread[data-spread="2"]
.gcs-selector-header
.character-selector-copy {
    max-width: 430px !important;

    margin:
        0
        auto !important;

    font-size: 8px !important;

    line-height: 1.45 !important;
}


/* Más aire antes de REGISTROS */

.grimorio-spread[data-spread="2"]
.gcs-medieval-workspace {
    margin-top: 3px !important;
}


/* REGISTROS ligeramente más abajo */

.grimorio-spread[data-spread="2"]
.gcs-records-heading {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}


/* ============================================================
   HOJA 06 — BAJAR "REGISTRO DEL GRIMORIO"
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-header
.character-selector-kicker {
    margin-top: 12px !important;
    margin-bottom: 7px !important;
}


/* ============================================================
   HOJA 06 — AGRANDAR TEXTO INTRODUCTORIO
   "Cada alma guarda una historia..."
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-header
.character-selector-copy {

    font-size: 10px !important;

    line-height: 1.5 !important;

    max-width: 470px !important;

    margin:
        4px
        auto
        0 !important;

    font-style: italic !important;

    color:
        rgba(67, 47, 28, .78) !important;
}


/* ============================================================
   HOJA 06 — BAJAR TÍTULO "ÍNDICE DE PERSONAJES"
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-header
.character-selector-title {

    margin-top: 10px !important;
}


/* ============================================================
   HOJA 06 — BAJAR MÁS "ÍNDICE DE PERSONAJES"
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-header
.character-selector-title {
    margin-top: 20px !important;
}


/* ============================================================
   HOJA 06 — QUITAR LÍNEAS HORIZONTALES
   Composición más limpia y continua
   ============================================================ */

/* Línea debajo de la cabecera */
.grimorio-spread[data-spread="2"]
.gcs-selector-header {
    border-bottom: none !important;
}

/* Línea superior / marco del área de registros */
.grimorio-spread[data-spread="2"]
.gcs-medieval-workspace {
    border-top: none !important;
    border-bottom: none !important;
}

/* Por si queda heredado el marco completo */
.grimorio-spread[data-spread="2"]
.gcs-records-panel {
    border-top: none !important;
    border-bottom: none !important;
}


/* ============================================================
   HOJA 06 — CARDS MÁS COMPACTAS
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-card {

    height: 88px !important;
    min-height: 88px !important;

    grid-template-columns:
        70px
        minmax(0, 1fr) !important;
}


/* retrato más compacto */

.grimorio-spread[data-spread="2"]
.gcs-selector-portrait {

    width: 70px !important;
}


.grimorio-spread[data-spread="2"]
.gcs-selector-portrait img {

    width: 52px !important;
    height: 52px !important;
}


/* contenido más apretado */

.grimorio-spread[data-spread="2"]
.gcs-selector-card-content {

    padding:
        7px
        10px
        6px !important;
}


/* nombre */

.grimorio-spread[data-spread="2"]
.gcs-selector-name {

    font-size: 12.5px !important;

    margin:
        0
        0
        2px !important;
}


/* raza */

.grimorio-spread[data-spread="2"]
.gcs-selector-race {

    font-size: 6px !important;

    margin:
        0
        0
        2px !important;
}


/* subtítulo */

.grimorio-spread[data-spread="2"]
.gcs-selector-subtitle {

    font-size: 6.8px !important;

    line-height: 1.2 !important;
}


/* footer */

.grimorio-spread[data-spread="2"]
.gcs-selector-card-footer {

    padding-top: 4px !important;

    font-size: 6px !important;
}


/* separación entre cards */

.grimorio-spread[data-spread="2"]
.gcs-selector-grid {

    gap: 7px !important;
}


/* ============================================================
   HOJA 06 — CARDS TAMAÑO INTERMEDIO
   Recupera presencia sin hacerlas gigantes
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-card {
    height: 102px !important;
    min-height: 102px !important;

    grid-template-columns:
        82px
        minmax(0, 1fr) !important;
}

.grimorio-spread[data-spread="2"]
.gcs-selector-portrait {
    width: 82px !important;
    height: 100% !important;
}

.grimorio-spread[data-spread="2"]
.gcs-selector-portrait img {
    width: 60px !important;
    height: 60px !important;
}

.grimorio-spread[data-spread="2"]
.gcs-selector-card-content {
    padding:
        9px
        12px
        7px !important;
}

.grimorio-spread[data-spread="2"]
.gcs-selector-race {
    font-size: 6.5px !important;
    margin-bottom: 3px !important;
}

.grimorio-spread[data-spread="2"]
.gcs-selector-name {
    font-size: 14px !important;
    margin-bottom: 3px !important;
}

.grimorio-spread[data-spread="2"]
.gcs-selector-subtitle {
    font-size: 7.5px !important;
    line-height: 1.25 !important;
}

.grimorio-spread[data-spread="2"]
.gcs-selector-card-footer {
    padding-top: 5px !important;
    font-size: 6.5px !important;
}

.grimorio-spread[data-spread="2"]
.gcs-selector-grid {
    gap: 9px !important;
}


/* ============================================================
   HOJA 06 — CARDS MÁS CORTAS Y EQUILIBRADAS
   Reduce principalmente el ANCHO
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-grid {
    align-items: center !important;
}

/* CARD */

.grimorio-spread[data-spread="2"]
.gcs-selector-card {
    width: 84% !important;
    max-width: 500px !important;

    height: 94px !important;
    min-height: 94px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    grid-template-columns:
        74px
        minmax(0, 1fr) !important;
}


/* RETRATO */

.grimorio-spread[data-spread="2"]
.gcs-selector-portrait {
    width: 74px !important;
}

.grimorio-spread[data-spread="2"]
.gcs-selector-portrait img {
    width: 56px !important;
    height: 56px !important;
}


/* INFORMACIÓN */

.grimorio-spread[data-spread="2"]
.gcs-selector-card-content {
    padding:
        8px
        11px
        7px !important;
}

.grimorio-spread[data-spread="2"]
.gcs-selector-name {
    font-size: 13.5px !important;
}

.grimorio-spread[data-spread="2"]
.gcs-selector-subtitle {
    font-size: 7.2px !important;
    line-height: 1.25 !important;
}

.grimorio-spread[data-spread="2"]
.gcs-selector-card-footer {
    font-size: 6.3px !important;
    padding-top: 4px !important;
}


/* ============================================================
   HOJA 06 — CARDS UN POCO MÁS A LA IZQUIERDA
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-selector-card {
    margin-left: 3% !important;
    margin-right: auto !important;
}


/* ============================================================
   HOJA 06 — MOVER "REGISTROS" UN POCO A LA IZQUIERDA
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-records-heading {

    transform: translateX(-18px) !important;
}


/* contador debajo de REGISTROS también acompaña */

.grimorio-spread[data-spread="2"]
.gcs-records-count {

    transform: translateX(-18px) !important;
}


/* ============================================================
   HOJA 06 — SUBIR REGISTROS + CONTADOR + CARDS
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-records-panel {
    position: relative !important;
    top: -16px !important;
}


/* ============================================================
   HOJA 06 — FIX POPOVER SIDEBAR
   Evita que RAZA / CLASE / ORDEN aparezcan al pie
   ============================================================ */

.grimorio-spread[data-spread="2"]
.grimorio-character-selector {
    position: relative !important;
}

.grimorio-spread[data-spread="2"]
.gcs-sidebar-popover {

    position: absolute !important;

    z-index: 99999 !important;

    display: block !important;

    width: 150px !important;

    padding: 10px !important;

    box-sizing: border-box !important;

    border: 1px solid rgba(54, 37, 20, .45) !important;

    border-radius: 2px !important;

    background:
        linear-gradient(
            180deg,
            rgba(239, 221, 184, .99),
            rgba(220, 194, 148, .99)
        ) !important;

    box-shadow:
        5px 6px 16px rgba(38, 23, 10, .24) !important;

    color: #49331e !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;
}


/* hidden DEBE ganar cuando el menú está cerrado */

.grimorio-spread[data-spread="2"]
.gcs-sidebar-popover[hidden] {
    display: none !important;
}


/* título RAZA / CLASE / ORDEN */

.grimorio-spread[data-spread="2"]
.gcs-popover-title {

    display: block !important;

    margin: 0 !important;

    text-align: center !important;

    font-family:
        "Cinzel",
        Georgia,
        serif !important;

    font-size: 10px !important;

    letter-spacing: 1.5px !important;

    color: #44301c !important;
}


/* ornamento */

.grimorio-spread[data-spread="2"]
.gcs-popover-ornament {

    display: block !important;

    margin: 4px 0 7px !important;

    text-align: center !important;

    font-size: 7px !important;

    color: rgba(80, 54, 29, .55) !important;
}


/* botones */

.grimorio-spread[data-spread="2"]
.gcs-popover-option {

    appearance: none !important;
    -webkit-appearance: none !important;

    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 7px 8px !important;

    border: 0 !important;

    border-top:
        1px solid
        rgba(81, 55, 29, .15) !important;

    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: 8px !important;

    line-height: 1.25 !important;

    text-align: left !important;

    color: #50371f !important;

    cursor: pointer !important;
}


.grimorio-spread[data-spread="2"]
.gcs-popover-option:hover {

    background:
        rgba(26, 69, 111, .10) !important;
}


.grimorio-spread[data-spread="2"]
.gcs-popover-option.selected {

    background:
        rgba(26, 69, 111, .15) !important;

    color: #173f69 !important;

    font-weight: 600 !important;
}


/* ============================================================
   FIN FIX POPOVER
   ============================================================ */



/* ============================================================
   HOJA 06 — FIRMA D&A SOFTWARE R
   ============================================================ */

.grimorio-spread[data-spread="2"]
.grimorio-character-selector {

    position: relative !important;
}


/* Firma del estudio */

.grimorio-spread[data-spread="2"]
.gcs-studio-signature {

    position: absolute !important;

    right: 24px !important;
    bottom: 18px !important;

    width: 145px !important;

    z-index: 20 !important;

    opacity: .72 !important;

    pointer-events: none !important;
}


/* Logo original */

.grimorio-spread[data-spread="2"]
.gcs-studio-signature img {

    display: block !important;

    width: 100% !important;
    height: auto !important;

    object-fit: contain !important;

    filter:
        sepia(.35)
        saturate(.75)
        brightness(.78)
        contrast(1.05) !important;
}


/* ============================================================
   FIN FIRMA D&A SOFTWARE R
   ============================================================ */


/* ============================================================
   HOJA 06 — FIRMA D&A SOFTWARE R PEQUEÑA + ORBITRON
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700&display=swap');

.grimorio-spread[data-spread="2"]
.gcs-studio-signature {

    position: absolute !important;
    right: 18px !important;
    bottom: 14px !important;

    z-index: 20 !important;
    pointer-events: none !important;
    opacity: .68 !important;
}

.grimorio-spread[data-spread="2"]
.gcs-studio-signature .gcs-studio-text {

    display: inline-block !important;

    font-family: 'Orbitron', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;

    color: rgba(70, 120, 170, 0.78) !important;
    text-transform: none !important;
    white-space: nowrap !important;
}


/* ============================================================
   HOJA 06 — D&A SOFTWARE R
   LOGO ORIGINAL PEQUEÑO Y VISIBLE
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-studio-signature {

    position: absolute !important;

    right: 20px !important;
    bottom: 16px !important;

    width: 105px !important;

    z-index: 40 !important;

    opacity: .92 !important;

    pointer-events: none !important;
}


.grimorio-spread[data-spread="2"]
.gcs-studio-signature img {

    display: block !important;

    width: 100% !important;
    height: auto !important;

    object-fit: contain !important;

    filter: none !important;
}


/* anulamos el texto anterior */

.grimorio-spread[data-spread="2"]
.gcs-studio-text {
    display: none !important;
}


/* ============================================================
   HOJA 06 — D&A SOFTWARE R
   FIRMA COMPACTA
   ============================================================ */

.grimorio-spread[data-spread="2"]
.gcs-studio-signature {

    position: absolute !important;

    right: 22px !important;
    bottom: 16px !important;

    width: auto !important;

    opacity: .82 !important;

    z-index: 40 !important;

    pointer-events: none !important;
}


.grimorio-spread[data-spread="2"]
.gcs-studio-brand {

    display: flex !important;

    align-items: center !important;

    gap: 6px !important;

    width: auto !important;
}


/* símbolo */

.grimorio-spread[data-spread="2"]
.gcs-studio-mark {

    display: block !important;

    width: 28px !important;
    height: 28px !important;

    object-fit: contain !important;

    margin: 0 !important;

    filter: none !important;
}


/* nombre */

.grimorio-spread[data-spread="2"]
.gcs-studio-name {

    display: block !important;

    font-family:
        "Orbitron",
        sans-serif !important;

    font-size: 8px !important;

    font-weight: 600 !important;

    letter-spacing: .4px !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    color: #397fa1 !important;
}


/* anulamos reglas anteriores */

.grimorio-spread[data-spread="2"]
.gcs-studio-signature > img {

    display: none !important;
}


/* ============================================================
   TEMP — OCULTAR FIRMA D&A
   ============================================================ */
.grimorio-spread[data-spread="2"] .gcs-studio-signature,
.grimorio-spread[data-spread="2"] .gcs-studio-brand,
.grimorio-spread[data-spread="2"] .gcs-studio-mark,
.grimorio-spread[data-spread="2"] .gcs-studio-name {
    display: none !important;
}