/* ============================================================
   LEONHART — FICHA DE PERSONAJE
   Dos cartas dentro del Grimorio
   ============================================================ */

.character-sheet-spread .page-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

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

    padding: 25px !important;
    box-sizing: border-box !important;

    overflow: hidden !important;

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


/* ============================================================
   CARTA BASE
   ============================================================ */

.grimorio-character-card {

    position: relative;

    height: 88%;

    aspect-ratio: 46 / 68;

    max-width: 88%;

    padding: 10px;

    box-sizing: border-box;

    border-radius: 12px;

    color: #281b10;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(238,220,187,.80) 0%,
            rgba(214,186,143,.72) 65%,
            rgba(153,108,61,.25) 100%
        );

    border:
        1px solid
        rgba(56,36,18,.72);

    box-shadow:
        0 5px 14px rgba(45,25,10,.14),
        inset 0 0 28px rgba(79,48,22,.11);

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

    mix-blend-mode: multiply;
}


/* DOBLE MARCO */

.grimorio-character-card::before {

    content: "";

    position: absolute;

    inset: 6px;

    border:
        1px solid
        rgba(54,35,19,.48);

    border-radius: 8px;

    pointer-events: none;
}


.gcs-inner {

    position: relative;

    z-index: 2;

    width: 100%;
    height: 100%;

    padding: 15px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;
}


/* ============================================================
   ENCABEZADOS GENERALES
   ============================================================ */

.gcs-kicker {

    font-family:
        'Cinzel',
        serif;

    font-size:
        .45rem;

    letter-spacing:
        .19em;

    text-align:
        center;

    color:
        rgba(56,36,18,.55);
}


.gcs-ornament {

    margin:
        5px
        auto;

    text-align: center;

    font-family:
        Georgia,
        serif;

    font-size:
        .60rem;

    letter-spacing:
        .18em;

    color:
        rgba(67,43,22,.50);
}


/* ============================================================
   IZQUIERDA — FRONTAL
   ============================================================ */

.gcs-front-header {

    flex:
        0 0 auto;

    text-align:
        center;
}


.gcs-front-header h2 {

    margin:
        3px
        0
        0 !important;

    padding: 0 !important;

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

    font-size:
        1.45rem !important;

    line-height:
        1 !important;

    font-weight:
        500 !important;

    letter-spacing:
        .08em !important;

    color:
        #21170e !important;
}


.gcs-front-header p {

    margin:
        4px
        0
        0;

    font-family:
        'Cinzel',
        serif;

    font-size:
        .50rem;

    font-weight:
        600;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


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

.gcs-portrait {

    position: relative;

    flex:
        1 1 auto;

    min-height: 0;

    margin:
        8px
        0
        5px;

    display: flex;

    justify-content: center;

    align-items: flex-end;

    overflow: hidden;

    border-top:
        1px solid
        rgba(57,37,19,.22);

    border-bottom:
        1px solid
        rgba(57,37,19,.22);
}


.gcs-portrait::before {

    content: "";

    position: absolute;

    width: 80%;
    aspect-ratio: 1;

    border:
        1px solid
        rgba(58,38,20,.18);

    border-radius: 50%;

    top:
        8%;

    left:
        10%;
}


.gcs-portrait img {

    position: relative;

    z-index: 3;

    display: block;

    max-width: 96%;

    max-height: 100%;

    object-fit: contain;

    object-position:
        center bottom;

    filter:
        sepia(.35)
        contrast(1.05)
        brightness(.90);

    mix-blend-mode:
        multiply;
}


.gcs-portrait-fallback {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    font-family:
        'Cinzel',
        serif;

    font-size:
        .55rem;

    letter-spacing:
        .16em;

    color:
        rgba(52,34,18,.28);
}


/* ============================================================
   LEMA
   ============================================================ */

.gcs-motto {

    flex:
        0 0 auto;

    margin:
        2px
        auto
        7px;

    width:
        90%;

    text-align:
        center;

    font-size:
        .64rem;

    line-height:
        1.1;

    font-style:
        italic;

    font-weight:
        600;

    color:
        rgba(45,30,17,.80);
}


/* ============================================================
   IDENTIDAD + STATS
   ============================================================ */

.gcs-stats {

    flex:
        0 0 auto;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        12px;

    padding-top:
        7px;

    border-top:
        1px solid
        rgba(56,36,19,.25);
}


.gcs-stat-column {

    min-width: 0;
}


.gcs-stat-row {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        6px;

    min-height:
        17px;

    border-bottom:
        1px dotted
        rgba(56,36,19,.17);

    font-size:
        .51rem;

    line-height:
        1.15;
}


.gcs-stat-label {

    font-family:
        'Cinzel',
        serif;

    font-size:
        .43rem;

    font-weight:
        600;

    letter-spacing:
        .04em;

    text-transform:
        uppercase;
}


.gcs-stat-value {

    text-align:
        right;

    white-space:
        nowrap;
}


/* VIDA/MANÁ INTERACTIVOS */

.gcs-click-stat {

    cursor:
        pointer;

    user-select:
        none;
}


.gcs-click-stat:hover {

    background:
        rgba(67,43,22,.045);
}


/* EXP */

.gcs-exp {

    margin-top:
        4px;
}


.gcs-exp-line {

    display:
        flex;

    justify-content:
        space-between;

    font-size:
        .45rem;
}


.gcs-exp-bar {

    height:
        4px;

    margin-top:
        3px;

    border:
        1px solid
        rgba(48,31,17,.65);

    overflow:
        hidden;
}


.gcs-exp-fill {

    width:
        62.5%;

    height:
        100%;

    background:
        rgba(43,28,17,.80);
}


/* ============================================================
   SELLO PEQUEÑO
   ============================================================ */

.gcs-seal {

    position:
        absolute;

    width:
        36px;

    height:
        36px;

    top:
        8px;

    left:
        50%;

    transform:
        translateX(-50%);

    object-fit:
        contain;

    opacity:
        .58;

    filter:
        sepia(.35)
        contrast(1.05);

    mix-blend-mode:
        multiply;
}


/* ============================================================
   DERECHA — HISTORIA
   ============================================================ */

.gcs-back .gcs-inner {

    padding:
        17px
        17px
        14px;
}


.gcs-back-header {

    flex:
        0 0 auto;

    text-align:
        center;
}


.gcs-back-header h3 {

    margin:
        3px
        0
        0;

    font-family:
        'Cinzel',
        serif;

    font-size:
        .86rem;

    letter-spacing:
        .14em;

    font-weight:
        600;
}


/* HISTORIA */

.gcs-history {

    margin-top:
        8px;

    font-size:
        .54rem;

    line-height:
        1.34;

    text-align:
        justify;

    color:
        #302115;
}


.gcs-dropcap {

    float:
        left;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    width:
        32px;

    height:
        36px;

    margin:
        2px
        7px
        0
        0;

    border:
        3px double
        rgba(45,30,16,.67);

    font-family:
        'Cinzel',
        serif;

    font-size:
        1.65rem;

    line-height:
        1;
}


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

.gcs-divider {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin:
        8px
        0;

    color:
        rgba(55,36,19,.42);

    font-size:
        .45rem;
}


.gcs-divider::before,
.gcs-divider::after {

    content: "";

    flex:
        1;

    height:
        1px;

    background:
        rgba(55,36,19,.22);
}


/* ============================================================
   BLOQUES DERECHA
   ============================================================ */

.gcs-two-column {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        12px;
}


.gcs-info-column {

    min-width: 0;
}


.gcs-info-column + .gcs-info-column {

    border-left:
        1px solid
        rgba(53,34,18,.18);

    padding-left:
        12px;
}


.gcs-section-title {

    margin-bottom:
        5px;

    text-align:
        center;

    font-family:
        'Cinzel',
        serif;

    font-size:
        .47rem;

    font-weight:
        600;

    letter-spacing:
        .12em;
}


.gcs-list-row {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        6px;

    margin-bottom:
        3px;

    font-size:
        .48rem;

    line-height:
        1.2;
}


.gcs-list-name {

    font-weight:
        600;
}


.gcs-list-value {

    white-space:
        nowrap;
}


/* ============================================================
   EQUIPO / RELACIONES
   ============================================================ */

.gcs-simple-row {

    display:
        flex;

    gap:
        5px;

    margin-bottom:
        4px;

    font-size:
        .48rem;

    line-height:
        1.18;

    cursor:
        pointer;

    user-select:
        none;
}


.gcs-simple-row::before {

    content:
        "◆";

    font-size:
        .35rem;

    padding-top:
        1px;

    opacity:
        .60;
}


.gcs-simple-row.used {

    opacity:
        .40;

    text-decoration:
        line-through;
}


/* ============================================================
   CITA FINAL
   ============================================================ */

.gcs-back-quote {

    margin-top:
        auto;

    padding-top:
        7px;

    border-top:
        1px solid
        rgba(53,34,18,.20);

    text-align:
        center;

    font-size:
        .55rem;

    line-height:
        1.2;

    font-style:
        italic;

    font-weight:
        600;
}


/* ============================================================
   CONTADOR LOCAL
   ============================================================ */

.gcs-local-counter {

    position:
        absolute;

    top:
        26px;

    right:
        35px;

    z-index:
        100;

    font-family:
        'Cinzel',
        serif;

    font-size:
        .55rem;

    letter-spacing:
        .16em;

    color:
        rgba(50,33,18,.55);
}


/* Ocultamos el contador general solamente en esta ficha */

body:has(.character-sheet-spread.active)
.grimorio-page-counter {

    opacity:
        0 !important;
}


/* ============================================================
   PANTALLAS BAJAS
   ============================================================ */

@media (max-height: 820px) {

    .grimorio-character-card {

        height:
            84%;
    }

}


/* ============================================================
   FIX VISIBILIDAD — FICHA DE PERSONAJE
   El grimorio oculta por defecto hijos de .page-content
   ============================================================ */

.grimorio-spread.character-sheet-spread {
    visibility: visible !important;
    opacity: 1 !important;
}


/* Las dos hojas */
.grimorio-spread.character-sheet-spread
.grimorio-page {

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


/* Contenido de las hojas */
.grimorio-spread.character-sheet-spread
.page-content {

    display: flex !important;

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

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


/* ESTE ES EL IMPORTANTE:
   mostrar las tarjetas aunque reglas viejas usen display:none
*/

.grimorio-spread.character-sheet-spread
.page-content
> .grimorio-character-card {

    display: block !important;

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

    position: relative !important;

    z-index: 100 !important;
}


/* Mostrar absolutamente todo dentro de la tarjeta */

.grimorio-spread.character-sheet-spread
.grimorio-character-card * {

    visibility: visible !important;
    opacity: 1;
}


/* Pero conservar opacidad especial del sello */

.grimorio-spread.character-sheet-spread
.gcs-seal {

    opacity: .58 !important;
}


/* Si el spread está activo, garantizar que esté delante */

.grimorio-spread.character-sheet-spread.active {

    display: flex !important;

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

    z-index: 100 !important;
}


/* ============================================================
   FIX FINAL DE VISIBILIDAD
   La ficha de Leonhart SOLO puede verse cuando su spread
   tiene la clase .active
   ============================================================ */

/* Leonhart apagado cuando NO es la página activa */
.grimorio-stage
> .grimorio-spread.character-sheet-spread:not(.active) {

    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
}


/* Leonhart visible únicamente cuando ES la página activa */
.grimorio-stage
> .grimorio-spread.character-sheet-spread.active {

    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 20 !important;
}


/* Sus hojas solo se fuerzan visibles cuando el spread está activo */
.grimorio-stage
> .grimorio-spread.character-sheet-spread.active
.grimorio-page {

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


/* Su contenido solo se muestra cuando el spread está activo */
.grimorio-stage
> .grimorio-spread.character-sheet-spread.active
.page-content {

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


/* Las tarjetas solo existen visualmente cuando Leonhart está activo */
.grimorio-stage
> .grimorio-spread.character-sheet-spread.active
.grimorio-character-card {

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


/* ============================================================
   AJUSTE DE EXTENSIÓN — FICHA LEONHART
   Solo modifica el spread de personaje
   ============================================================ */

.grimorio-stage
> .grimorio-spread.character-sheet-spread.active {

    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    max-width: none !important;

    height: 100% !important;

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

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

    box-sizing: border-box !important;
}


/* Cada hoja ocupa exactamente la mitad */

.grimorio-stage
> .grimorio-spread.character-sheet-spread.active
> .grimorio-page {

    flex: 0 0 50% !important;

    width: 50% !important;
    max-width: 50% !important;

    height: 100% !important;

    box-sizing: border-box !important;
}


/* Área útil dentro de cada hoja */

.grimorio-stage
> .grimorio-spread.character-sheet-spread.active
> .grimorio-page
> .page-content {

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

    padding: 24px 30px !important;

    box-sizing: border-box !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}


/* Las tarjetas aprovechan mejor la hoja */

.grimorio-stage
> .grimorio-spread.character-sheet-spread.active
.grimorio-character-card {

    width: 88% !important;
    max-width: 430px !important;

    height: 91% !important;
    max-height: 720px !important;

    margin: 0 auto !important;

    box-sizing: border-box !important;
}


/* División central perfectamente alineada */

.grimorio-stage
> .grimorio-spread.character-sheet-spread.active
.page-left {

    margin-right: 0 !important;
}

.grimorio-stage
> .grimorio-spread.character-sheet-spread.active
.page-right {

    margin-left: 0 !important;
}


/* ============================================================
   RETRATO DE LEONHART — TINTA SOBRE PERGAMINO
   ============================================================ */

.character-sheet-spread.active .gcs-portrait {
    overflow: hidden !important;
    border-radius: 50% !important;
}

.character-sheet-spread.active .gcs-character-image {
    display: block !important;

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

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;
    object-position: center 28% !important;

    border-radius: 50% !important;

    filter:
        sepia(.45)
        saturate(.70)
        contrast(1.12)
        brightness(.98) !important;

    mix-blend-mode: multiply !important;

    opacity: .92 !important;
}


/* ============================================================
   AJUSTE DEL RETRATO DE LEONHART
   ============================================================ */

.character-sheet-spread .gcs-portrait {
    width: 78% !important;
    max-width: 420px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto 18px auto !important;
    border-radius: 50% !important;
    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.character-sheet-spread .gcs-character-image {
    width: 88% !important;
    height: 88% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    border-radius: 50% !important;
    opacity: 0.92 !important;
}

/* ============================================================
   LEONHART — REFINAMIENTO TIPOGRÁFICO DE LA HOJA DERECHA
   Historia + capitular + tablas
   ============================================================ */


/* ------------------------------------------------------------
   TÍTULO HISTORIA
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-back-header h3 {

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

    font-size: 24px !important;
    font-weight: 600 !important;

    letter-spacing: 4px !important;

    color: #49351f !important;

    margin: 3px 0 6px !important;

    text-shadow:
        0 1px 0 rgba(255,255,255,.25) !important;
}


/* Texto pequeño: REGISTRO DEL GRIMORIO */

.character-sheet-spread.active
.gcs-back-header .gcs-kicker {

    font-size: 10px !important;

    letter-spacing: 3px !important;

    color: rgba(73,53,31,.58) !important;
}


/* Ornamento debajo del título */

.character-sheet-spread.active
.gcs-back-header .gcs-ornament {

    font-size: 12px !important;

    letter-spacing: 5px !important;

    color: rgba(73,53,31,.55) !important;

    margin-top: 5px !important;
}


/* ------------------------------------------------------------
   TEXTO DE HISTORIA
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-history {

    width: 92% !important;

    margin:
        10px auto
        12px !important;

    font-family:
        "Cormorant Garamond",
        "Crimson Text",
        Georgia,
        serif !important;

    font-size: 16px !important;

    line-height: 1.58 !important;

    letter-spacing: .15px !important;

    text-align: justify !important;

    color: #43311e !important;
}


/* ------------------------------------------------------------
   LETRA CAPITULAR "L"
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-dropcap {

    float: left !important;

    display: flex !important;

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

    width: 54px !important;
    height: 62px !important;

    margin:
        2px 10px
        2px 0 !important;

    padding: 0 !important;

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

    font-size: 47px !important;
    line-height: 1 !important;

    font-weight: 500 !important;

    color: #3e2b18 !important;

    border:
        2px solid
        rgba(78,55,31,.70) !important;

    outline:
        1px solid
        rgba(78,55,31,.30) !important;

    outline-offset: -6px !important;

    background:
        radial-gradient(
            circle at center,
            rgba(117,83,43,.07),
            rgba(117,83,43,.015)
        ) !important;

    box-shadow:
        inset 0 0 10px rgba(76,50,24,.10),
        1px 2px 2px rgba(76,50,24,.08) !important;

    text-shadow:
        1px 1px 0 rgba(255,245,220,.45) !important;
}


/* Pequeño ornamento alrededor de la capitular */

.character-sheet-spread.active
.gcs-history::after {

    content: "❧  ·  ❦  ·  ☙";

    display: block;

    clear: both;

    width: 100%;

    margin:
        13px auto
        4px;

    text-align: center;

    font-size: 10px;

    letter-spacing: 7px;

    color: rgba(84,61,35,.42);
}


/* ------------------------------------------------------------
   DIVISORES
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-divider {

    font-size: 14px !important;

    margin: 11px 0 !important;

    color: rgba(76,53,29,.55) !important;
}


/* ------------------------------------------------------------
   TÍTULOS:
   ATRIBUTOS / RESISTENCIAS / EQUIPAMIENTO / RELACIONES
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-section-title {

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

    font-size: 13px !important;

    font-weight: 600 !important;

    letter-spacing: 1.7px !important;

    color: #4a351e !important;

    margin-bottom: 8px !important;
}


/* ------------------------------------------------------------
   FILAS DE ATRIBUTOS Y RESISTENCIAS
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-list-row {

    font-size: 12.5px !important;

    line-height: 1.42 !important;

    padding: 1.5px 0 !important;

    color: #493621 !important;
}


/* ------------------------------------------------------------
   EQUIPAMIENTO Y RELACIONES
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-simple-row {

    font-size: 12.5px !important;

    line-height: 1.48 !important;

    padding: 2px 0 !important;

    color: #493621 !important;
}


/* ------------------------------------------------------------
   CITA FINAL
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-back-quote {

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

    font-size: 14px !important;

    font-style: italic !important;

    font-weight: 600 !important;

    letter-spacing: .25px !important;

    color: #4c3822 !important;

    text-align: center !important;
}


/* ============================================================
   LEONHART — HOJA DERECHA REFINADA
   Historia + capitular + secciones equilibradas
   ============================================================ */


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

.character-sheet-spread.active
.gcs-back {

    overflow: hidden !important;
}


.character-sheet-spread.active
.gcs-back
.gcs-inner {

    height: 100% !important;

    padding:
        22px 28px
        18px !important;

    box-sizing: border-box !important;

    display: grid !important;

    grid-template-rows:
        auto
        auto
        auto
        minmax(0, 1fr)
        auto
        minmax(0, .78fr)
        auto !important;

    align-content: stretch !important;
}


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

.character-sheet-spread.active
.gcs-back-header {

    text-align: center !important;

    margin:
        0 0
        7px !important;
}


.character-sheet-spread.active
.gcs-back-header
.gcs-kicker {

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

    font-size: 9px !important;

    letter-spacing: 3.3px !important;

    text-transform: uppercase !important;

    color: rgba(69, 49, 28, .55) !important;
}


/* ------------------------------------------------------------
   HISTORIA — título ceremonial
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-back-header h3 {

    display: flex !important;

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

    gap: 13px !important;

    margin:
        4px 0
        3px !important;

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

    font-size: 23px !important;

    font-weight: 600 !important;

    letter-spacing: 4px !important;

    color: #49341e !important;

    white-space: nowrap !important;
}


/* Líneas ornamentales alrededor de HISTORIA */

.character-sheet-spread.active
.gcs-back-header h3::before,

.character-sheet-spread.active
.gcs-back-header h3::after {

    content: "" !important;

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

    display: block !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(82, 59, 32, .58)
        ) !important;
}


.character-sheet-spread.active
.gcs-back-header h3::after {

    background:
        linear-gradient(
            90deg,
            rgba(82, 59, 32, .58),
            transparent
        ) !important;
}


/* Ornamento inferior */

.character-sheet-spread.active
.gcs-back-header
.gcs-ornament {

    margin-top: 3px !important;

    font-size: 9px !important;

    letter-spacing: 6px !important;

    color: rgba(78, 55, 31, .48) !important;
}


/* ============================================================
   HISTORIA
   ============================================================ */

.character-sheet-spread.active
.gcs-history {

    width: 92% !important;

    margin:
        7px auto
        4px !important;

    font-family:
        "Cormorant Garamond",
        "Crimson Text",
        Georgia,
        serif !important;

    font-size: 14.5px !important;

    line-height: 1.47 !important;

    letter-spacing: .12px !important;

    text-align: justify !important;

    color: #43311e !important;
}


/* ------------------------------------------------------------
   CAPITULAR MEDIEVAL
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-dropcap {

    float: left !important;

    display: flex !important;

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

    width: 50px !important;
    height: 56px !important;

    margin:
        1px 10px
        1px 0 !important;

    padding: 0 !important;

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

    font-size: 44px !important;

    font-weight: 500 !important;

    line-height: 1 !important;

    color: #3f2c19 !important;

    border:
        1.5px solid
        rgba(69, 47, 25, .72) !important;

    outline:
        1px solid
        rgba(69, 47, 25, .30) !important;

    outline-offset:
        -5px !important;

    background:
        radial-gradient(
            circle,
            rgba(104, 73, 38, .08),
            rgba(104, 73, 38, .015)
        ) !important;

    box-shadow:
        inset 0 0 8px rgba(65, 43, 22, .09),
        1px 2px 2px rgba(65, 43, 22, .07)
        !important;

    text-shadow:
        1px 1px
        rgba(255, 245, 220, .40)
        !important;
}


/* Ornamento después de la historia */

.character-sheet-spread.active
.gcs-history::after {

    content: "❧   ·   ❦   ·   ☙" !important;

    clear: both !important;

    display: block !important;

    width: 100% !important;

    margin:
        7px auto
        0 !important;

    text-align: center !important;

    font-size: 8px !important;

    letter-spacing: 4px !important;

    color:
        rgba(80, 57, 32, .38) !important;
}


/* ============================================================
   DIVISORES
   ============================================================ */

.character-sheet-spread.active
.gcs-divider {

    display: flex !important;

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

    margin:
        5px 0
        6px !important;

    font-size: 10px !important;

    color:
        rgba(72, 51, 28, .53) !important;
}


/* ============================================================
   DOS COLUMNAS
   ============================================================ */

.character-sheet-spread.active
.gcs-two-column {

    width: 94% !important;

    margin:
        0 auto !important;

    display: grid !important;

    grid-template-columns:
        1fr
        1fr !important;

    gap: 17px !important;

    min-height: 0 !important;
}


/* Columna derecha con línea divisoria */

.character-sheet-spread.active
.gcs-info-column
+
.gcs-info-column {

    border-left:
        1px solid
        rgba(73, 52, 29, .25) !important;

    padding-left:
        17px !important;
}


/* ============================================================
   TÍTULOS DE SECCIÓN
   ============================================================ */

.character-sheet-spread.active
.gcs-section-title {

    display: flex !important;

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

    gap: 7px !important;

    margin:
        0 0
        6px !important;

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

    font-size: 12px !important;

    font-weight: 600 !important;

    letter-spacing: 1.6px !important;

    color: #49341e !important;
}


/* Pequeñas líneas ornamentales */

.character-sheet-spread.active
.gcs-section-title::before,

.character-sheet-spread.active
.gcs-section-title::after {

    content: "" !important;

    flex: 1 !important;

    max-width: 30px !important;

    height: 1px !important;

    background:
        rgba(76, 54, 30, .30) !important;
}


/* ============================================================
   ATRIBUTOS Y RESISTENCIAS
   ============================================================ */

.character-sheet-spread.active
.gcs-list-row {

    min-height: 17px !important;

    padding:
        1px 0 !important;

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

    font-size: 11.8px !important;

    line-height: 1.25 !important;

    color: #47331f !important;
}


/* Valor alineado */

.character-sheet-spread.active
.gcs-list-row span:last-child {

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

    font-weight: 600 !important;
}


/* ============================================================
   EQUIPAMIENTO Y RELACIONES
   ============================================================ */

.character-sheet-spread.active
.gcs-simple-row {

    min-height: 17px !important;

    padding:
        1px 0 !important;

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

    font-size: 11.8px !important;

    line-height: 1.28 !important;

    color: #47331f !important;
}


/* Pequeño símbolo antes de cada elemento */

.character-sheet-spread.active
.gcs-simple-row::before {

    content: "•" !important;

    display: inline-block !important;

    margin-right: 7px !important;

    color:
        rgba(70, 48, 25, .63) !important;
}


/* ============================================================
   CITA FINAL
   ============================================================ */

.character-sheet-spread.active
.gcs-back-quote {

    align-self: end !important;

    width: 88% !important;

    margin:
        7px auto
        0 !important;

    padding-top:
        7px !important;

    border-top:
        1px solid
        rgba(72, 50, 26, .24) !important;

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

    font-size: 12.5px !important;

    font-style: italic !important;

    font-weight: 600 !important;

    letter-spacing: .15px !important;

    text-align: center !important;

    color: #4b3721 !important;
}


/* ============================================================
   AJUSTE FINO — EVITAR QUE SE ENCIMEN LOS TEXTOS
   ============================================================ */

/* Toda la hoja derecha */
.character-sheet-spread.active .gcs-back .gcs-inner{
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    height: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Historia un poco más compacta */
.character-sheet-spread.active .gcs-history{
    width: 90% !important;
    margin: 6px auto 2px !important;
    font-size: 13.4px !important;
    line-height: 1.32 !important;
}

/* Título HISTORIA más limpio */
.character-sheet-spread.active .gcs-back-header h3{
    font-size: 20px !important;
    letter-spacing: 3px !important;
    margin: 2px 0 !important;
}

/* Separadores con menos espacio */
.character-sheet-spread.active .gcs-divider{
    margin: 2px 0 4px !important;
    font-size: 8px !important;
}

/* Bloques de dos columnas */
.character-sheet-spread.active .gcs-two-column{
    width: 94% !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    align-items: start !important;
}

/* Línea divisoria entre columnas */
.character-sheet-spread.active .gcs-info-column + .gcs-info-column{
    border-left: 1px solid rgba(73, 52, 29, .20) !important;
    padding-left: 14px !important;
}

/* Títulos de bloque más pequeños */
.character-sheet-spread.active .gcs-section-title{
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
    margin: 0 0 4px !important;
}

/* Atributos / resistencias más compactos */
.character-sheet-spread.active .gcs-list-row{
    min-height: 14px !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1.16 !important;
}

/* Equipamiento / relaciones más compactos */
.character-sheet-spread.active .gcs-simple-row{
    min-height: 14px !important;
    padding: 0 !important;
    font-size: 10.8px !important;
    line-height: 1.16 !important;
}

/* Puntito de lista discreto */
.character-sheet-spread.active .gcs-simple-row::before{
    margin-right: 5px !important;
}

/* Cita final pegada al fondo, sin invadir lo demás */
.character-sheet-spread.active .gcs-back-quote{
    margin-top: auto !important;
    width: 88% !important;
    padding-top: 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    border-top: 1px solid rgba(72, 50, 26, .22) !important;
}

/* Si hay demasiado espacio en los bloques inferiores, lo recortamos un poco */
.character-sheet-spread.active .gcs-back .gcs-two-column:last-of-type{
    margin-top: -2px !important;
}


/* ============================================================
   MICROAJUSTE EXTRA — SOLO SI AÚN SE JUNTAN
   ============================================================ */

.character-sheet-spread.active .gcs-history{
    font-size: 12.8px !important;
    line-height: 1.28 !important;
}

.character-sheet-spread.active .gcs-list-row{
    font-size: 10.6px !important;
}

.character-sheet-spread.active .gcs-simple-row{
    font-size: 10.2px !important;
}

.character-sheet-spread.active .gcs-back-quote{
    font-size: 10.6px !important;
}


/* ============================================================
   AJUSTE FINO DEL RETRATO — EVITAR RECORTE DEL MEDALLÓN
   ============================================================ */

.character-sheet-spread.active .gcs-portrait{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.character-sheet-spread.active .gcs-character-image{
    width: 92% !important;
    height: 92% !important;
    max-width: 92% !important;
    max-height: 92% !important;

    object-fit: contain !important;
    object-position: center center !important;

    transform: translateY(-4px) !important;
    display: block !important;
}

/* ============================================================
   MICROAJUSTE EXTRA DEL RETRATO
   ============================================================ */

.character-sheet-spread.active .gcs-character-image{
    width: 88% !important;
    height: 88% !important;
    max-width: 88% !important;
    max-height: 88% !important;
}

/* ============================================================
   LEONHART — TRES AJUSTES FINALES
   1. Retrato completo
   2. Tablas derechas
   3. Tipografía izquierda
   ============================================================ */


/* ============================================================
   1. RETRATO — MOSTRAR TODO EL MEDALLÓN
   ============================================================ */

/*
   La ilustración ya tiene su propio marco circular y adornos.
   Por eso NO debemos recortarla con border-radius + overflow.
*/

.character-sheet-spread.active
.gcs-portrait {

    overflow: visible !important;

    border-radius: 0 !important;

    background: transparent !important;

    display: flex !important;

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


.character-sheet-spread.active
.gcs-character-image {

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

    max-width: 89% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    border-radius: 0 !important;

    transform: none !important;

    display: block !important;
}


/* ============================================================
   2. TABLAS — HOJA DERECHA
   ============================================================ */


/* Más separación horizontal entre ambas columnas */

.character-sheet-spread.active
.gcs-two-column {

    width: 92% !important;

    column-gap: 24px !important;

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


/* Separador central más discreto */

.character-sheet-spread.active
.gcs-info-column
+
.gcs-info-column {

    padding-left: 20px !important;

    border-left:
        1px solid
        rgba(71, 49, 26, .22) !important;
}


/* Filas perfectamente alineadas */

.character-sheet-spread.active
.gcs-list-row {

    display: grid !important;

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

    align-items: center !important;

    column-gap: 12px !important;

    min-height: 18px !important;

    padding:
        1px 0 !important;

    font-size: 12px !important;

    line-height: 1.28 !important;
}


/* Valores pegados correctamente a la derecha */

.character-sheet-spread.active
.gcs-list-row
span:last-child {

    min-width: 28px !important;

    text-align: right !important;
}


/* Aire antes de EQUIPAMIENTO / RELACIONES */

.character-sheet-spread.active
.gcs-two-column:first-of-type {

    margin-bottom: 10px !important;
}


/* Segundo bloque */

.character-sheet-spread.active
.gcs-two-column:last-of-type {

    margin-top: 5px !important;

    margin-bottom: 10px !important;
}


/* Equipamiento y relaciones */

.character-sheet-spread.active
.gcs-simple-row {

    min-height: 18px !important;

    padding:
        1px 0 !important;

    font-size: 11.7px !important;

    line-height: 1.3 !important;
}


/* Cita final con su propio espacio */

.character-sheet-spread.active
.gcs-back-quote {

    width: 84% !important;

    margin:
        auto auto
        4px !important;

    padding-top: 7px !important;

    font-size: 11.5px !important;

    line-height: 1.3 !important;
}


/* ============================================================
   3. DATOS DE LA HOJA IZQUIERDA
   ============================================================ */


/* Filas principales */

.character-sheet-spread.active
.gcs-front
.gcs-stat-row {

    min-height: 20px !important;

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

    font-size: 13px !important;

    line-height: 1.3 !important;
}


/* Etiquetas:
   RAZA / CLASE / ORIGEN / ALINEACIÓN
   VIDA / MANÁ / NIVEL
*/

.character-sheet-spread.active
.gcs-front
.gcs-stat-label {

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

    font-size: 10.5px !important;

    font-weight: 600 !important;

    letter-spacing: .45px !important;

    color: #47331e !important;
}


/* Valores */

.character-sheet-spread.active
.gcs-front
.gcs-stat-value {

    font-size: 12.5px !important;

    font-weight: 500 !important;

    color: #493621 !important;
}


/* Las dos columnas inferiores */

.character-sheet-spread.active
.gcs-front
.gcs-stats {

    gap: 24px !important;
}


/* EXP */

.character-sheet-spread.active
.gcs-front
.gcs-exp {

    margin-top: 3px !important;

    font-size: 11.5px !important;
}


.character-sheet-spread.active
.gcs-front
.gcs-exp-line {

    font-size: 11.5px !important;

    margin-bottom: 4px !important;
}


/* Barra EXP ligeramente más visible */

.character-sheet-spread.active
.gcs-front
.gcs-exp-bar {

    height: 6px !important;

    border-color:
        rgba(64, 44, 24, .55) !important;
}


/* ============================================================
   LEONHART — PULIDO FINAL DE LA HOJA IZQUIERDA
   ============================================================ */


/* ------------------------------------------------------------
   1. INTEGRAR EL RETRATO AL PERGAMINO
   Elimina visualmente el rectángulo del PNG
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-portrait {

    background: transparent !important;

    overflow: visible !important;
}


.character-sheet-spread.active
.gcs-character-image {

    display: block !important;

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

    object-fit: contain !important;

    background: transparent !important;

    mix-blend-mode: multiply !important;

    filter:
        sepia(.18)
        saturate(.82)
        contrast(1.04)
        brightness(1.015)
        !important;

    /* desvanece suavemente los bordes cuadrados */
    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            #000 0%,
            #000 67%,
            rgba(0,0,0,.94) 75%,
            rgba(0,0,0,.45) 87%,
            transparent 100%
        );

    mask-image:
        radial-gradient(
            ellipse at center,
            #000 0%,
            #000 67%,
            rgba(0,0,0,.94) 75%,
            rgba(0,0,0,.45) 87%,
            transparent 100%
        );
}


/* ------------------------------------------------------------
   2. FRASE DE LEONHART
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-motto {

    margin:
        7px auto
        9px !important;

    font-size: 12.5px !important;

    line-height: 1.3 !important;

    letter-spacing: .15px !important;

    color: #4b3721 !important;
}


/* ------------------------------------------------------------
   3. TABLA INFERIOR MÁS LEGIBLE
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-front
.gcs-stats {

    width: 94% !important;

    margin:
        0 auto !important;

    gap: 28px !important;
}


/* Cada fila */

.character-sheet-spread.active
.gcs-front
.gcs-stat-row {

    min-height: 21px !important;

    font-size: 13.5px !important;

    line-height: 1.32 !important;
}


/* RAZA / CLASE / ORIGEN / ETC. */

.character-sheet-spread.active
.gcs-front
.gcs-stat-label {

    font-size: 11px !important;

    letter-spacing: .5px !important;

    font-weight: 600 !important;
}


/* Valores: Humano, Caballero, 600/600... */

.character-sheet-spread.active
.gcs-front
.gcs-stat-value {

    font-size: 13px !important;

    font-weight: 500 !important;
}


/* ------------------------------------------------------------
   EXP
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-front
.gcs-exp-line {

    font-size: 12px !important;

    margin-bottom: 4px !important;
}


.character-sheet-spread.active
.gcs-front
.gcs-exp-bar {

    height: 6px !important;
}


/* ------------------------------------------------------------
   UN POCO MÁS DE AIRE ENTRE RETRATO Y DATOS
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-front
.gcs-portrait {

    margin-bottom: 8px !important;
}


/* ============================================================
   LEONHART — ACOMODO FINAL DE TEXTOS
   HOJA DERECHA
   ============================================================ */


/* ------------------------------------------------------------
   CONTENEDOR GENERAL
   Nada absoluto: todos los bloques fluyen de arriba hacia abajo
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-back
.gcs-inner {

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

    height: 100% !important;

    padding:
        22px 28px
        18px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    gap: 0 !important;
}


/* Todos los bloques internos vuelven al flujo normal */

.character-sheet-spread.active
.gcs-back-header,

.character-sheet-spread.active
.gcs-history,

.character-sheet-spread.active
.gcs-divider,

.character-sheet-spread.active
.gcs-two-column,

.character-sheet-spread.active
.gcs-back-quote {

    position: static !important;

    transform: none !important;
}


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

.character-sheet-spread.active
.gcs-back-header {

    flex: 0 0 auto !important;

    margin:
        0 0
        5px !important;
}


.character-sheet-spread.active
.gcs-back-header h3 {

    margin:
        2px 0
        2px !important;

    font-size: 21px !important;

    line-height: 1.15 !important;
}


/* ============================================================
   HISTORIA
   ============================================================ */

.character-sheet-spread.active
.gcs-history {

    flex: 0 0 auto !important;

    width: 91% !important;

    margin:
        5px auto
        2px !important;

    font-size: 13.2px !important;

    line-height: 1.34 !important;

    text-align: justify !important;
}


/* Capitular */

.character-sheet-spread.active
.gcs-dropcap {

    width: 48px !important;
    height: 54px !important;

    font-size: 42px !important;

    margin:
        1px 9px
        1px 0 !important;
}


/* Ornamento posterior a Historia */

.character-sheet-spread.active
.gcs-history::after {

    margin:
        5px auto
        1px !important;

    font-size: 7px !important;

    letter-spacing: 4px !important;
}


/* ============================================================
   DIVISORES
   ============================================================ */

.character-sheet-spread.active
.gcs-divider {

    flex: 0 0 auto !important;

    margin:
        3px 0
        4px !important;

    min-height: 8px !important;
}


/* ============================================================
   BLOQUES DE DOS COLUMNAS
   ============================================================ */

.character-sheet-spread.active
.gcs-two-column {

    flex: 0 0 auto !important;

    width: 92% !important;

    display: grid !important;

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

    column-gap: 20px !important;

    align-items: start !important;

    margin:
        0 auto
        5px !important;
}


/* El segundo bloque NO puede subir encima del primero */

.character-sheet-spread.active
.gcs-two-column:last-of-type {

    margin:
        1px auto
        5px !important;
}


/* Línea central */

.character-sheet-spread.active
.gcs-info-column
+
.gcs-info-column {

    border-left:
        1px solid
        rgba(72, 50, 27, .22) !important;

    padding-left:
        16px !important;
}


/* ============================================================
   TÍTULOS DE SECCIÓN
   ============================================================ */

.character-sheet-spread.active
.gcs-section-title {

    margin:
        0 0
        4px !important;

    font-size: 11px !important;

    line-height: 1.2 !important;

    letter-spacing: 1.3px !important;
}


/* ============================================================
   ATRIBUTOS / RESISTENCIAS
   ============================================================ */

.character-sheet-spread.active
.gcs-list-row {

    display: grid !important;

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

    column-gap: 10px !important;

    align-items: baseline !important;

    min-height: 15px !important;

    padding: 0 !important;

    margin: 0 !important;

    font-size: 10.8px !important;

    line-height: 1.22 !important;
}


.character-sheet-spread.active
.gcs-list-row span:last-child {

    min-width: 25px !important;

    text-align: right !important;
}


/* ============================================================
   EQUIPAMIENTO / RELACIONES
   ============================================================ */

.character-sheet-spread.active
.gcs-simple-row {

    min-height: 15px !important;

    padding: 0 !important;

    margin:
        0 0
        2px !important;

    font-size: 10.7px !important;

    line-height: 1.22 !important;
}


.character-sheet-spread.active
.gcs-simple-row::before {

    margin-right: 5px !important;
}


/* ============================================================
   CITA FINAL
   Queda siempre abajo, pero sin invadir listas
   ============================================================ */

.character-sheet-spread.active
.gcs-back-quote {

    flex: 0 0 auto !important;

    width: 86% !important;

    margin:
        auto auto
        2px !important;

    padding-top:
        6px !important;

    border-top:
        1px solid
        rgba(71, 49, 26, .22) !important;

    font-size: 10.8px !important;

    line-height: 1.25 !important;

    text-align: center !important;
}


/* ============================================================
   COLORES POR RAZA
   ============================================================ */

.character-sheet-spread.active .race-separator[data-race="Humano"] .race-badge,
.character-sheet-spread.active .race-separator[data-race="HUMANO"] .race-badge {
    color: #4b5f78;
    border-color: rgba(75, 95, 120, 0.38);
}

.character-sheet-spread.active .race-separator[data-race="Elfo"] .race-badge,
.character-sheet-spread.active .race-separator[data-race="ELFO"] .race-badge {
    color: #496b50;
    border-color: rgba(73, 107, 80, 0.38);
}

.character-sheet-spread.active .race-separator[data-race="Orco"] .race-badge,
.character-sheet-spread.active .race-separator[data-race="ORCO"] .race-badge {
    color: #7a4b3d;
    border-color: rgba(122, 75, 61, 0.40);
}

.character-sheet-spread.active .race-separator[data-race="Enano"] .race-badge,
.character-sheet-spread.active .race-separator[data-race="ENANO"] .race-badge {
    color: #7b623d;
    border-color: rgba(123, 98, 61, 0.40);
}

.character-sheet-spread.active .race-separator[data-race="No Muerto"] .race-badge,
.character-sheet-spread.active .race-separator[data-race="NO MUERTO"] .race-badge {
    color: #66547a;
    border-color: rgba(102, 84, 122, 0.40);
}


/* ============================================================
   LEONHART — SEPARADOR HERÁLDICO DE RAZA
   HUMANO = AZUL ACERO
   ============================================================ */

.character-sheet-spread.active .gcs-race-separator {

    --race-color: #526b82;
    --race-dark: #34495d;
    --race-light: #879caf;

    width: 94%;

    margin:
        5px auto
        8px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;
}


/* Líneas laterales */

.character-sheet-spread.active
.gcs-race-separator::before,

.character-sheet-spread.active
.gcs-race-separator::after {

    content: "";

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(52,73,93,.42),
            var(--race-color)
        );
}


.character-sheet-spread.active
.gcs-race-separator::after {

    background:
        linear-gradient(
            90deg,
            var(--race-color),
            rgba(52,73,93,.42),
            transparent
        );
}


/* Placa central */

.character-sheet-spread.active
.gcs-race-badge {

    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 105px;

    padding:
        4px 14px
        5px;

    border:
        1px solid
        rgba(52,73,93,.58);

    border-radius: 3px;

    background:
        linear-gradient(
            180deg,
            rgba(82,107,130,.16),
            rgba(52,73,93,.07)
        );

    color: var(--race-dark);

    font-family:
        "Cinzel",
        serif;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2.2px;

    text-transform: uppercase;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.12),
        0 1px 2px rgba(55,38,20,.08);
}


/* Diamantes decorativos */

.character-sheet-spread.active
.gcs-race-badge::before {

    content: "◆";

    margin-right: 8px;

    font-size: 6px;

    color: var(--race-color);
}


.character-sheet-spread.active
.gcs-race-badge::after {

    content: "◆";

    margin-left: 8px;

    font-size: 6px;

    color: var(--race-color);
}


/* Pequeño brillo al pasar el mouse */

.character-sheet-spread.active
.gcs-race-separator:hover
.gcs-race-badge {

    color: #2e4559;

    border-color: rgba(82,107,130,.78);

    box-shadow:
        inset 0 0 12px rgba(82,107,130,.10),
        0 0 9px rgba(82,107,130,.15);
}


/* ============================================================
   LEONHART — SEPARADOR HERÁLDICO DE RAZA
   HUMANO = AZUL ACERO
   ============================================================ */

.character-sheet-spread.active
.gcs-race-separator {

    --race-main: #526b82;
    --race-dark: #34495d;
    --race-light: #8da1b4;

    width: 94%;

    margin:
        2px auto
        5px;

    display: flex;

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

    gap: 8px;

    box-sizing: border-box;
}


/* ============================================================
   LÍNEAS LATERALES
   ============================================================ */

.character-sheet-spread.active
.gcs-race-line {

    flex: 1;

    height: 1px;

    position: relative;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(52,73,93,.20) 25%,
            rgba(82,107,130,.70) 100%
        );
}


/* La línea derecha se invierte */

.character-sheet-spread.active
.gcs-race-line:last-child {

    background:
        linear-gradient(
            90deg,
            rgba(82,107,130,.70) 0%,
            rgba(52,73,93,.20) 75%,
            transparent 100%
        );
}


/* Pequeños diamantes junto a la placa */

.character-sheet-spread.active
.gcs-race-line:first-child::after,

.character-sheet-spread.active
.gcs-race-line:last-child::before {

    content: "◆";

    position: absolute;

    top: 50%;

    transform: translateY(-52%);

    font-size: 5px;

    color: var(--race-main);
}


.character-sheet-spread.active
.gcs-race-line:first-child::after {

    right: -2px;
}


.character-sheet-spread.active
.gcs-race-line:last-child::before {

    left: -2px;
}


/* ============================================================
   PLACA CENTRAL
   ============================================================ */

.character-sheet-spread.active
.gcs-race-badge {

    position: relative;

    min-width: 112px;

    height: 22px;

    padding:
        0 15px;

    display: inline-flex;

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

    box-sizing: border-box;

    border:
        1px solid
        rgba(52,73,93,.62);

    border-radius: 3px;

    background:
        linear-gradient(
            180deg,
            rgba(141,161,180,.24) 0%,
            rgba(82,107,130,.16) 48%,
            rgba(52,73,93,.10) 100%
        );

    color: var(--race-dark);

    font-family:
        "Cinzel",
        serif;

    font-size: 9px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: 2.1px;

    text-transform: uppercase;

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

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.10),
        inset 0 0 8px rgba(82,107,130,.08),
        0 1px 2px rgba(55,38,20,.08);
}


/* Ornamentos dentro de la placa */

.character-sheet-spread.active
.gcs-race-badge::before {

    content: "✦";

    margin-right: 8px;

    font-size: 6px;

    color: var(--race-main);
}


.character-sheet-spread.active
.gcs-race-badge::after {

    content: "✦";

    margin-left: 8px;

    font-size: 6px;

    color: var(--race-main);
}


/* ============================================================
   HUMANO — AZUL ACERO
   ============================================================ */

.character-sheet-spread.active
.gcs-race-separator[data-race="humano"] {

    --race-main: #526b82;
    --race-dark: #34495d;
    --race-light: #8da1b4;
}


/* ============================================================
   PEQUEÑO EFECTO MÁGICO AL PASAR EL CURSOR
   ============================================================ */

.character-sheet-spread.active
.gcs-race-separator:hover
.gcs-race-badge {

    border-color:
        rgba(82,107,130,.82);

    background:
        linear-gradient(
            180deg,
            rgba(141,161,180,.34),
            rgba(82,107,130,.21),
            rgba(52,73,93,.12)
        );

    box-shadow:
        inset 0 0 10px rgba(141,161,180,.14),
        0 0 7px rgba(82,107,130,.15);
}


/* ============================================================
   QUE NO EMPUJE DEMASIADO LA TABLA INFERIOR
   ============================================================ */

.character-sheet-spread.active
.gcs-race-separator
+
* {

    margin-top: 0 !important;
}


/* ============================================================
   LEONHART — SEPARADOR HERÁLDICO DE RAZA
   HUMANO / AZUL ACERO
   ============================================================ */

.character-sheet-spread.active
.gcs-race-separator {

    --race-main: #607d98;
    --race-dark: #3f596f;
    --race-light: #94aabc;

    width: 94%;

    height: 23px;

    margin:
        3px auto
        6px;

    display: flex;

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

    gap: 8px;

    box-sizing: border-box;
}


/* ------------------------------------------------------------
   LÍNEAS LATERALES
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-race-line {

    position: relative;

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(63,89,111,.22) 25%,
            rgba(96,125,152,.78) 100%
        );
}


.character-sheet-spread.active
.gcs-race-line:last-child {

    background:
        linear-gradient(
            90deg,
            rgba(96,125,152,.78) 0%,
            rgba(63,89,111,.22) 75%,
            transparent 100%
        );
}


/* Diamantes junto a la placa */

.character-sheet-spread.active
.gcs-race-line:first-child::after,

.character-sheet-spread.active
.gcs-race-line:last-child::before {

    content: "◆";

    position: absolute;

    top: 50%;

    transform:
        translateY(-52%);

    font-size: 5px;

    color:
        var(--race-main);
}


.character-sheet-spread.active
.gcs-race-line:first-child::after {

    right: -2px;
}


.character-sheet-spread.active
.gcs-race-line:last-child::before {

    left: -2px;
}


/* ------------------------------------------------------------
   PLACA CENTRAL
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-race-badge {

    min-width: 108px;

    height: 21px;

    padding:
        0 13px;

    display: inline-flex;

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

    box-sizing: border-box;

    border:
        1px solid
        rgba(63,89,111,.62);

    border-radius: 3px;

    background:
        linear-gradient(
            180deg,
            rgba(148,170,188,.28) 0%,
            rgba(96,125,152,.18) 52%,
            rgba(63,89,111,.10) 100%
        );

    color:
        var(--race-dark);

    font-family:
        "Cinzel",
        serif;

    font-size: 9px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: 2px;

    text-transform: uppercase;

    text-shadow:
        0 1px 0
        rgba(255,245,220,.38);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.12),
        inset 0 0 8px rgba(96,125,152,.08),
        0 1px 2px rgba(55,38,20,.07);
}


/* Estrellas interiores */

.character-sheet-spread.active
.gcs-race-badge::before {

    content: "✦";

    margin-right: 7px;

    font-size: 6px;

    color:
        var(--race-main);
}


.character-sheet-spread.active
.gcs-race-badge::after {

    content: "✦";

    margin-left: 7px;

    font-size: 6px;

    color:
        var(--race-main);
}


/* ------------------------------------------------------------
   HUMANO = AZUL ACERO
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-race-separator[data-race="humano"] {

    --race-main: #607d98;
    --race-dark: #3f596f;
    --race-light: #94aabc;
}


/* ------------------------------------------------------------
   BRILLO MUY SUAVE AL PASAR EL CURSOR
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-race-separator:hover
.gcs-race-badge {

    border-color:
        rgba(96,125,152,.82);

    box-shadow:
        inset 0 0 10px rgba(148,170,188,.15),
        0 0 8px rgba(96,125,152,.14);
}


/* ============================================================
   LEONHART — SEPARADOR DE RAZA
   VERSIÓN HERÁLDICA / HUMANO AZUL ACERO
   ============================================================ */


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

.character-sheet-spread.active
.gcs-race-separator {

    --race-main: #607b94;
    --race-dark: #3b5369;
    --race-light: #9aabba;
    --race-ink: #34495b;

    width: 94% !important;

    height: 26px !important;

    margin:
        3px auto
        7px !important;

    gap: 7px !important;

    overflow: visible !important;
}


/* ------------------------------------------------------------
   LÍNEAS HERÁLDICAS
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-race-line {

    position: relative !important;

    height: 1px !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(59,83,105,.18) 18%,
            rgba(96,123,148,.75) 100%
        ) !important;
}


.character-sheet-spread.active
.gcs-race-line:last-child {

    background:
        linear-gradient(
            90deg,
            rgba(96,123,148,.75) 0%,
            rgba(59,83,105,.18) 82%,
            transparent 100%
        ) !important;
}


/* Pequeño remate junto al escudo central */

.character-sheet-spread.active
.gcs-race-line:first-child::after,

.character-sheet-spread.active
.gcs-race-line:last-child::before {

    content: "◆" !important;

    position: absolute !important;

    top: 50% !important;

    transform:
        translateY(-52%) !important;

    font-size: 5px !important;

    color:
        var(--race-main) !important;
}


.character-sheet-spread.active
.gcs-race-line:first-child::after {

    right: -2px !important;
}


.character-sheet-spread.active
.gcs-race-line:last-child::before {

    left: -2px !important;
}


/* ------------------------------------------------------------
   PLACA HERÁLDICA
   Ya NO parece botón moderno
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-race-badge {

    position: relative !important;

    min-width: 126px !important;

    height: 25px !important;

    padding:
        0 20px !important;

    border: none !important;

    border-radius: 0 !important;

    clip-path:
        polygon(
            9% 0%,
            91% 0%,
            100% 50%,
            91% 100%,
            9% 100%,
            0% 50%
        ) !important;

    background:
        linear-gradient(
            180deg,
            rgba(154,171,186,.38) 0%,
            rgba(96,123,148,.26) 46%,
            rgba(59,83,105,.18) 100%
        ) !important;

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

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

    font-size: 9px !important;

    font-weight: 700 !important;

    line-height: 1 !important;

    letter-spacing: 2.3px !important;

    text-transform: uppercase !important;

    text-shadow:
        0 1px 0
        rgba(255,245,220,.35) !important;

    box-shadow:
        inset 0 0 0 1px rgba(52,73,91,.58),
        inset 0 0 0 3px rgba(255,245,220,.11),
        inset 0 0 10px rgba(51,72,91,.10),
        0 1px 2px rgba(55,38,20,.08)
        !important;
}


/* ------------------------------------------------------------
   ORNAMENTOS DEL NOMBRE
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-race-badge::before {

    content: "✦" !important;

    margin-right: 9px !important;

    font-size: 6px !important;

    color:
        var(--race-main) !important;
}


.character-sheet-spread.active
.gcs-race-badge::after {

    content: "✦" !important;

    margin-left: 9px !important;

    font-size: 6px !important;

    color:
        var(--race-main) !important;
}


/* ------------------------------------------------------------
   HUMANO — AZUL ACERO
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-race-separator[data-race="humano"] {

    --race-main: #607b94;
    --race-dark: #3b5369;
    --race-light: #9aabba;
    --race-ink: #34495b;
}


/* ------------------------------------------------------------
   HOVER: BRILLO DE METAL MUY DISCRETO
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-race-separator:hover
.gcs-race-badge {

    background:
        linear-gradient(
            180deg,
            rgba(166,184,198,.46),
            rgba(103,132,157,.30),
            rgba(59,83,105,.19)
        ) !important;

    color:
        #2f4659 !important;

    box-shadow:
        inset 0 0 0 1px rgba(59,83,105,.72),
        inset 0 0 0 3px rgba(255,245,220,.13),
        inset 0 0 12px rgba(96,123,148,.15),
        0 0 7px rgba(96,123,148,.13)
        !important;
}


/* ============================================================
   MICROAJUSTE FINAL — SEPARADOR HUMANO
   ============================================================ */

.character-sheet-spread.active
.gcs-race-badge {

    min-width: 140px !important;

    border:
        1px solid
        rgba(47, 69, 88, .78) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.10),
        inset 0 0 0 3px rgba(255,245,220,.09),
        inset 0 0 10px rgba(51,72,91,.11),
        0 1px 2px rgba(55,38,20,.08)
        !important;
}


/* Acercamos las líneas a la placa */

.character-sheet-spread.active
.gcs-race-separator {

    gap: 3px !important;
}


/* Remates más unidos a la placa */

.character-sheet-spread.active
.gcs-race-line:first-child::after {

    right: -1px !important;
}

.character-sheet-spread.active
.gcs-race-line:last-child::before {

    left: -1px !important;
}


/* Azul acero ligeramente más sobrio */

.character-sheet-spread.active
.gcs-race-separator[data-race="humano"] {

    --race-main: #58738d;
    --race-dark: #31495f;
    --race-light: #8fa4b7;
    --race-ink: #2f4659;
}



/* ============================================================
   GRIMORIO — AUTOAJUSTE DE LISTAS VARIABLES
   Equipamiento / Relaciones
   ============================================================ */


/* ------------------------------------------------------------
   5+ elementos
   Compactación ligera
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-back
.gcs-info-column:has(.gcs-simple-row:nth-of-type(6))
.gcs-simple-row {

    font-size: 10px !important;

    line-height: 1.08 !important;

    padding:
        0.7px 0 !important;

    margin: 0 !important;
}


/* ------------------------------------------------------------
   6+ elementos
   Modo compacto
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-back
.gcs-info-column:has(.gcs-simple-row:nth-of-type(7))
.gcs-simple-row {

    font-size: 9.3px !important;

    line-height: 1.05 !important;

    padding:
        0.45px 0 !important;
}


/* ------------------------------------------------------------
   9+ elementos
   Modo muy compacto
   Ejemplo: Syltheron
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-back
.gcs-info-column:has(.gcs-simple-row:nth-of-type(10))
.gcs-simple-row {

    font-size: 8.6px !important;

    line-height: 1.02 !important;

    padding:
        0.25px 0 !important;

    letter-spacing:
        -0.05px !important;
}


/* ------------------------------------------------------------
   Cuando hay una lista grande reducimos ligeramente
   el encabezado de la sección
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-back
.gcs-info-column:has(.gcs-simple-row:nth-of-type(7))
.gcs-section-title {

    margin-bottom:
        2px !important;

    padding-bottom:
        1px !important;
}


/* ------------------------------------------------------------
   9+ elementos:
   recuperamos todavía más espacio vertical
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-back
.gcs-two-column:has(
    .gcs-simple-row:nth-of-type(10)
) {

    margin-top:
        1px !important;

    margin-bottom:
        1px !important;
}


/* ------------------------------------------------------------
   Evitar que nombres largos generen espacios artificiales
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-back
.gcs-simple-row {

    white-space: normal !important;

    overflow-wrap: normal !important;

    word-break: normal !important;
}


/* ------------------------------------------------------------
   Frase final:
   debe permanecer pegada al fondo cuando exista espacio
   ------------------------------------------------------------ */

.character-sheet-spread.active
.gcs-back
.gcs-back-quote {

    margin-top:
        auto !important;

    padding-top:
        3px !important;
}


/* ============================================================
   LISTAS MUY LARGAS — AJUSTE FINAL
   9+ elementos de equipamiento
   ============================================================ */

.character-sheet-spread.active
.gcs-back
.gcs-info-column:has(.gcs-simple-row:nth-of-type(10))
.gcs-simple-row {

    font-size: 7.9px !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* Reducimos exclusivamente el espacio del título */

.character-sheet-spread.active
.gcs-back
.gcs-info-column:has(.gcs-simple-row:nth-of-type(10))
.gcs-section-title {

    font-size: 10.7px !important;
    line-height: 1 !important;
    margin-bottom: 1px !important;
    padding-bottom: 1px !important;
}


/* Recuperar espacio debajo del bloque */

.character-sheet-spread.active
.gcs-back
.gcs-two-column:has(.gcs-simple-row:nth-of-type(10)) {

    gap: 10px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ============================================================
   RAZA — CENTAURO
   Verde oliva + oro viejo / naturaleza
   ============================================================ */

.character-sheet-spread.active
.gcs-race-separator[data-race="centauro"] {

    --race-main: #78845a;
    --race-dark: #4f5b3b;
    --race-light: #b1aa72;
    --race-ink: #4b5134;
}


/* Un matiz ligeramente dorado para la placa */

.character-sheet-spread.active
.gcs-race-separator[data-race="centauro"]
.gcs-race-badge {

    background:
        linear-gradient(
            180deg,
            rgba(185,174,112,.38) 0%,
            rgba(120,132,90,.27) 48%,
            rgba(79,91,59,.17) 100%
        ) !important;

    border-color:
        rgba(79,91,59,.76) !important;

    color:
        #475035 !important;
}


/* Líneas laterales en tono natural */

.character-sheet-spread.active
.gcs-race-separator[data-race="centauro"]
.gcs-race-line {

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(120,132,90,.22) 20%,
            rgba(120,132,90,.82) 100%
        ) !important;
}

.character-sheet-spread.active
.gcs-race-separator[data-race="centauro"]
.gcs-race-line:last-child {

    background:
        linear-gradient(
            90deg,
            rgba(120,132,90,.82) 0%,
            rgba(120,132,90,.22) 80%,
            transparent 100%
        ) !important;
}


/* ============================================================
   GRIMORIO — DISTRIBUCIÓN FINAL 5 EQUIPOS / 5 RELACIONES
   ============================================================ */


/* Recuperamos ritmo vertical natural en la hoja derecha */

.character-sheet-spread.active
.gcs-back .gcs-inner {

    padding-bottom: 22px !important;
}


/* ATRIBUTOS / RESISTENCIAS */

.character-sheet-spread.active
.gcs-back .gcs-two-column {

    margin-top: 2px !important;
    margin-bottom: 2px !important;
}


/* Divisor entre atributos y equipo */

.character-sheet-spread.active
.gcs-back .gcs-divider {

    margin-top: 3px !important;
    margin-bottom: 3px !important;
}


/* EQUIPAMIENTO / RELACIONES:
   máximo 5 elementos = volvemos a tamaño elegante */

.character-sheet-spread.active
.gcs-back .gcs-simple-row {

    font-size: 10.7px !important;
    line-height: 1.18 !important;
    padding: 1px 0 !important;
    margin: 0 !important;
}


/* Títulos del bloque inferior */

.character-sheet-spread.active
.gcs-back .gcs-section-title {

    margin-top: 0 !important;
    margin-bottom: 4px !important;
}


/* Evitamos que el bloque inferior se estire innecesariamente */

.character-sheet-spread.active
.gcs-back .gcs-two-column:last-of-type {

    flex: 0 0 auto !important;
    margin-top: 1px !important;
    margin-bottom: 4px !important;
}


/* La frase final queda dentro de la hoja,
   no pegada al borde */

.character-sheet-spread.active
.gcs-back .gcs-back-quote {

    margin-top: 5px !important;
    margin-bottom: 2px !important;

    padding-top: 5px !important;

    position: static !important;

    font-size: 9.5px !important;
    line-height: 1.15 !important;

    flex-shrink: 0 !important;
}


/* ============================================================
   HISTORIAS LARGAS — AUTOAJUSTE
   Leonhart conserva tamaño normal.
   Syltheron y textos extensos se compactan.
   ============================================================ */

.character-sheet-spread.active
.gcs-history.gcs-history-long {

    font-size: 11.4px !important;
    line-height: 1.22 !important;
    text-align: justify !important;
}


/* Drop cap proporcional al texto más pequeño */

.character-sheet-spread.active
.gcs-history.gcs-history-long
.gcs-dropcap {

    width: 43px !important;
    height: 47px !important;

    font-size: 37px !important;
    line-height: 43px !important;

    margin-right: 7px !important;
    margin-bottom: 2px !important;
}