/* =========================================================
   NT HEBREW PRINT ENGINE
   Unified Editorial CSS
========================================================= */


@font-face {
    font-family: 'Gentium Book Plus';
    /* Le quitamos la palabra 'Book' al nombre del archivo .ttf para que coincida con tu carpeta */
    src: url('../fonts/GentiumPlus-Regular.ttf') format('truetype'); 
    font-weight: 400;
}

@font-face {
    font-family: 'Gentium Book Plus';
    /* Le quitamos la palabra 'Book' al nombre del archivo .ttf */
    src: url('../fonts/GentiumPlus-Bold.ttf') format('truetype');
    font-weight: 700;
}

@font-face {

    font-family: 'Ezra SIL';

    src: url('../font/SILEOTSR.ttf')
         format('truetype');
}

@font-face {

    font-family: 'AcademyEngraved';

    src: url('../fonts/AcademyEngravedLetPlain.woff')
         format('woff');
}

/* =========================================================
   RESET
========================================================= */

* {

    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    
    /* EL OXÍGENO PARA LA BARRA DE NAVEGACIÓN */
    padding-top: 30px; 

    width: 100%;

    /* El color de la "mesa de trabajo" (fondo oscuro para resaltar la hoja blanca) */
    background: #1e1f21; 

    overflow-x: hidden;

    /* RECONEXIÓN TIPOGRÁFICA: TIMES NEW ROMAN */
    font-family: 'Times New Roman', Times, serif;
}

/* =========================================================
   MÓDULO DE COMANDO (TOP NAVIGATION BAR)
========================================================= */

.top-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #f8f9fa;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 9999;
    box-sizing: border-box;
    font-family: Georgia, 'Times New Roman', Times, serif;
    direction: ltr; /* Escudo contra el RTL del hebreo */
}

.top-nav-bar .nav-left, 
.top-nav-bar .nav-center, 
.top-nav-bar .nav-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.top-nav-bar .nav-center {
    font-size: 15pt;
    font-weight: bold;
    letter-spacing: 1px;
}

.top-nav-bar .edicion-text {
    color: #005b82; 
}

.top-nav-bar .book-name-text {
    color: #b2945d; 
    margin-left: 5px;
}

.top-nav-bar .nav-btn {
    text-decoration: none;
    padding: 10px 22px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 11pt;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.top-nav-bar .nav-btn.disabled {
    background-color: #e9ecef;
    color: #adb5bd;
    cursor: not-allowed;
    border: 1px solid #dee2e6;
}

.top-nav-bar .nav-btn.btn-blue {
    background-color: #005b82;
    color: white;
}

.top-nav-bar .nav-btn.btn-blue:hover {
    background-color: #004563;
}

.top-nav-bar .nav-btn.btn-print {
    background-color: #1a3c5a;
    color: white;
    font-family: Arial, sans-serif;
}

.top-nav-bar .nav-btn.btn-print:hover {
    background-color: #11283d;
}

.top-nav-bar .nav-btn.btn-red {
    background-color: #d10000; /* El rojo intenso del menú */
    color: white;
}

.top-nav-bar .nav-btn.btn-red:hover {
    background-color: #a30000; /* Un tono más oscuro al pasar el ratón */
}
/* =========================================================
   ESCUDO DE IMPRESIÓN (AQUÍ SÍ VA EL @MEDIA PRINT)
========================================================= */
@media print {
    .top-nav-bar, .no-print, #content-source {
        display: none !important;
    }
    
    body {
        padding-top: 0 !important;
        background-color: white !important;
    }
}

/* =========================================================
   PAGE SYSTEM
========================================================= */

#pages-container {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 30px;

    padding-top: 30px;

    padding-bottom: 60px;
}

.page {
    position: relative;
    height: 1056px !important;
    max-height: 1056px !important;
    padding: 44px 40px 40px 40px !important;
    width: 816px; 
    min-width: 816px;
    max-width: 816px;
    min-height: 1056px;
    background: white;
    overflow: hidden;
    isolation: isolate;
    margin: 0 auto;
    break-after: page;
    page-break-after: always;
    box-shadow:
    0 0 10px rgba(0,0,0,0.15);
}

@media print {
    .page {
        margin: 0;
        box-shadow: none;
    }
}
/* =========================================================
   PAGE CONTENT
========================================================= */
.page-content {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    padding-top: 26px !important;
}

/* =========================================================
   HEADER (ESTILO BÍBLICO CLÁSICO - 3 COLUMNAS)
========================================================= */
.page-header {
    position: absolute !important;
    
    /* 1. SEPARACIÓN DEL TECHO: Subimos de 16px a 30px para darle mucho oxígeno arriba */
    top: 30px !important;  
    
    left: 50px !important;  
    right: 30px !important; 
    
    /* 2. CAJA MÁS ALTA: Subimos de 28px a 30px */
    height: 30px !important; 
    
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: flex-end !important;
    direction: ltr !important;
    
    padding-bottom: 6px !important; 
    border-bottom: 1px solid #d9d9d9 !important;
    font-size: 9.5pt !important; 
    letter-spacing: 0.4px !important;
    color: #1b1f21 !important;
    line-height: 1 !important;
    font-variant: small-caps !important;
    z-index: 20 !important;
}

.head-center { 
    text-align: center !important; 
    font-weight: bold !important; 
    /* El número de página crece un poquito más para destacar */
    font-size: 10.5pt !important; 
    padding: 0 15px !important; 
}

/* =========================================================
   COLUMNAS DEL HEADER
========================================================= */
.head-left { 
    text-align: left !important; 
    justify-self: start !important;
    font-weight: 600 !important;
    font-family: 'Times New Roman', Times, serif; /* O la que prefieras forzar aquí */
    font-size: 10pt; /* Ajusta el tamaño si lo ves muy pequeño o grande */
    color: #111212; /* Un gris sutil para que no compita con el título principal */
    /* text-transform: uppercase; (si quieres forzar mayúsculas) */
}

.head-right { 
    text-align: right !important; 
    justify-self: end !important;
    font-weight: 600 !important;
    font-family: 'Times New Roman', Times, serif; /* O la que prefieras forzar aquí */
    font-size: 10pt; /* Ajusta el tamaño si lo ves muy pequeño o grande */
    color: #111212; /* Un gris sutil para que no compita con el título principal */
    /* text-transform: uppercase; (si quieres forzar mayúsculas) */
}

/* =========================================================
   PROTECCIÓN LTR PARA LOS VERSÍCULOS DEL HEADER
========================================================= */
.head-verses {
    direction: ltr !important;
    unicode-bidi: bidi-override !important;
}

/* =========================================================
   FOOTER (DESACTIVADO VISUALMENTE)
========================================================= */
.page-footer {
    display: none !important; /* Lo ocultamos, liberando el espacio inferior */
}

/* =========================================================
   NUEVO TÍTULO DE LIBRO (Reemplaza al .chapter-opener)
========================================================= */
.book-title-block {
    text-align: center;
    margin-top: 5px;
    margin-bottom: 15px;
    clear: both;
}

.book-subtitle {
    font-size: 9pt;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.book-main-title {
    font-size: 22pt;
    font-weight: bold;
    color: #003854;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* =========================================================
   CONTENT SOURCE Y GHOST PAGE (EL BOZAL DE TANK)
========================================================= */
#content-source, 
#matrix-ghost-page {
    /* Fixed rompe la gravedad: el navegador dejará de estirar el scroll */
    position: fixed !important; 
    visibility: hidden !important;
    top: -100% !important;
    left: -100% !important;
    width: 706px;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
    z-index: -9999;
}

/* =========================================================
   VERSE CONTINUATION (EL FLUJO DE SION)
========================================================= */

.verse-row[data-continuation="true"] {
    margin-top: 7px !important; 
    
    /* Le damos 36px de barrera EXCLUSIVA para que la flecha no toque el texto */
    padding-right: 25px !important; 
}

.verse-continuation-marker {
    position: absolute !important;
    top: 0 !important;
    
    /* Lo acomodamos a 10px de la pared para que respire */
    right: 5px !important; 
    
    font-size: 11pt !important;
    color: #4c4b4b !important;
    font-weight: bold !important;
}

/* =========================================================
   WORDS CONTAINER (CAJA INTELIGENTE DE FLUJO PANTALLA)
========================================================= */

.words-container {
    flex-wrap: wrap; /* ¡CRÍTICO! Permite que las palabras no se desborden */
    justify-content: flex-start; /* En RTL, el inicio es la derecha */
    align-content: flex-start;
    direction: rtl;
    text-align: right;
    width: 100%;
    line-height: 1.05;
    overflow: visible;
    box-sizing: border-box;
}

/* =========================================================
   WORD BLOCK
========================================================= */

.word-block {
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    vertical-align: top;
    direction: rtl;
    text-align: center;
    min-width: 56px;
    max-width: 180px;
    margin-left: 2px;
    margin-right: 2px;
    margin-bottom: 5px;
    padding-top: 4px;
    padding-right: 4px;
    padding-bottom: 4px;
    padding-left: 4px;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    background: #fcfcfc;
    overflow: visible;
    line-height: 1;
    box-sizing: border-box;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

.word-block span {
    display: block;
    width: 100%;
}

/* =========================================================
   HEBREW
========================================================= */

.he {
    font-family: 'Ezra SIL', serif;
    font-size: 17pt;
    line-height: 1.02;
    direction: rtl;
    unicode-bidi: isolate;
    margin-bottom: 3px;
    letter-spacing: 0.2px;

    /* EL ESCUDO DE CONTENCIÓN (Sion Nikkud Fix) */
    padding-top: 4px;    /* Protege la Lamed y los acentos superiores */
    padding-bottom: 2px; /* Protege las vocales inferiores */
}

/* =========================================================
   TRANSLITERATION
========================================================= */
.tr {

    font-size: 8.3pt;
    font-style: italic;
    color: #3e3e3e;
    line-height: 1.08;
    margin-top: 1px;
    margin-bottom: 1px;
}

/* =========================================================
   ENGLISH
========================================================= */

.en {
    font-size: 7.5pt;
    color: #111;
    line-height: 1.08;
}
/* =========================================================
   SPANISH
========================================================= */

.es {
    font-size: 7.5pt;
    color: #111;
    line-height: 1.08;
    font-variant: small-caps;
}

/* =========================================================
   CHAPTER OPENER
========================================================= */

.chapter-opener {
    text-align: center;
    font-size: 28pt;
    line-height: 1;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #936700;
}

/* =========================================================
   SECTION TITLE
========================================================= */

.section-title {
    text-align: center;
    font-size: 10pt;
    margin-top: 5px;
    margin-bottom: 7px;
    color: #0e4e74;
    letter-spacing: 1px;
}

/* =========================================================
   SACRED NAMES (HIGHLIGHT)
========================================================= */
.yah-gold {
    color: #816126 !important; /* Únicamente el color dorado/oro */
    font-weight: 600;          /* El toque exacto de grosor (Semi-bold) */
}

/* =========================================================
   SCREEN PREVIEW MODE (VISTA EN PANTALLA BLINDADA)
========================================================= */

@media screen {
    body {
        /* Un fondo oscuro clásico estilo visor de PDF para resaltar la página */
        background-color: #525659 !important; 
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 40px 0;
    }

    #pages-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px; /* Separación clara entre páginas */
        width: 100%;
    }

    .page {
        width: 816px !important; 
        height: 1054px !important;
        min-width: 816px !important;
        max-width: 816px !important;
        min-height: 1054px !important;
        max-height: 1054px !important;
        
        /* LA GEOMETRÍA DORADA (Top, Right, Bottom, Left) */
        padding: 44px 30px 40px 50px !important; 
        
        box-sizing: border-box !important;
        background: white !important;
        margin: 0 !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .page-content {
        width: 736px !important;
        max-width: 736px !important;
        min-width: 736px !important;
        margin: 0 auto !important;
        position: relative !important;
    }
}

/* =========================================================
   EL NOCAUT AL NAVEGADOR (DICTATORIAL OVERRIDE)
========================================================= */

@page {
    /* Tamaño exacto sin márgenes nativos del navegador */
    size: 8.5in 11in; 
    margin: 0 !important; 
}

@media print {
    /* 1. EL MILAGRO DE LA UCI: Liberar el body para que respire y pagine */
    html, body {
        width: auto !important; 
        height: auto !important; /* CRÍTICO: Deja que el contenido fluya */
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: white !important;
        overflow: visible !important; /* ¡Revive el scroll y el paginado completo! */
        box-sizing: border-box !important;
        
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    #pages-container {
        display: block !important; 
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;

        gap: 0 !important; 

        overflow: hidden !important; /* MATA CUALQUIER SOMBRA QUE GENERE HOJAS EXTRA */
    }

/* 3. La hoja física estricta (Clon de la pantalla) */
    .page {
        width: 816px !important; 
        height: 1054px !important;
        max-height: 1054px !important;
        min-height: 1054px !important;
        
        /* LA GEOMETRÍA DORADA APLICADA AL PRINT (¡Piso liberado a 40px!) */
        margin: 0 auto !important; 
        padding: 44px 40px 40px 40px !important;
        
        box-sizing: border-box !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        box-shadow: none !important;
        border: none !important;
        outline: none !important;
        overflow: hidden !important; 
        position: relative !important;
    }
        
    /* =====================================================
       EL NUEVO PARADIGMA: SALTO "ANTES", NO "DESPUÉS"
    ===================================================== */
    .page + .page {
        page-break-before: always !important;
        break-before: page !important;
    }

    /* 4. La jaula de los versos (ancho de 736px garantizado) */
/* 4. La jaula de los versos (ancho de 736px garantizado) */
    .page-content {
        width: 736px !important;
        max-width: 736px !important;
        min-width: 736px !important;
        margin: 0 auto !important; 
        
        /* ¡LE DEVOLVEMOS EL OXÍGENO AL TECHO EN LA IMPRESIÓN! */
        padding-top: 46px !important; 
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        
        position: relative !important;
        border: none !important; 
        direction: rtl !important;
    }

    /* 5. A trabajar, ocultar interfaz y fuente */
    #content-source, .no-print {
        display: none !important;
    }
}

/* =====================================================
    EL EMP DE SION (ANULAR EL SUB-PÍXEL FANTASMA)
===================================================== */
.page.zion-last-page {
    /* Un margen negativo masivo en la parte inferior. 
        Visualmente no afecta en nada (el papel es blanco), 
        pero matemáticamente colapsa el límite del documento, 
        tragándose cualquier desborde invisible de la Matrix. */
    margin-bottom: -50px !important; 
    
    page-break-after: avoid !important;
    break-after: avoid !important;
}

/* ===================================================
    RESCATE DE NÚMEROS Y ALINEACIÓN DE PALABRAS
=================================================== */

.verse-row {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    
    /* 1. LA NUEVA BARRERA TOTAL: 23px 
       (8px pared + 14px número + 1px espacio libre) */
    padding-right: 23px !important; 
    padding-left: 0 !important;
    
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

.verse-number {
    position: absolute !important;
    
    /* 2. EL NUEVO OXÍGENO DERECHO: 8px */
    right: 8px !important; 
    top: 4px !important;
    
    /* 3. ANCHO DEL NÚMERO: 14px */
    width: 14px !important; 
    
    text-align: right !important;
    display: block !important;
    visibility: visible !important;
    color: #000 !important; 
    font-size: 8.5pt !important;
    font-weight: bold !important;
    z-index: 100 !important;
}

.words-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    direction: rtl !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.word-block {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

/* =========================================================
   EDITORIAL CONTINUATION FLOW (CONSOLIDADO Y LIMPIO)
========================================================= */

.continuation-break {
    width: 100%;
    height: 0;
    clear: both;
    flex-basis: 100%;
}

.continuation-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    direction: rtl;
    unicode-bidi: isolate;
}

.verse-continuation {
    display: inline-flex;
    justify-content: flex-start;
    direction: rtl;
    unicode-bidi: isolate; /* isolate previene reflows raros mezclando LTR/RTL */
    clear: both;
}

/* =========================================================
   TÍTULOS DE CAPÍTULO INTERNOS (GEORGIA UPGRADE)
========================================================= */
.inline-chapter-title {
    text-align: right !important;
    font-size: 18pt !important; /* Georgia se ve un poco más pequeña, subimos a 22pt */
    font-family: Georgia, 'Times New Roman', Times, serif !important;
    color: #515151 !important;
    margin-top: 10px !important;
    margin-bottom: 7px !important;
    padding-right: 15px !important; 
    letter-spacing: 0.5px !important;
    clear: both !important;
    break-after: avoid !important;
    page-break-after: avoid !important;
}

/* =========================================================
   TÍTULO PRINCIPAL DEL LIBRO (PORTADA INTERNA)
========================================================= */
.main-book-title-container {
    text-align: center;
    margin-top: 40px;     /* Oxígeno en la parte superior de la pág 1 */
    margin-bottom: 50px;  /* Oxígeno antes de que empiece la Genealogía / Versos */
    font-family: Georgia, 'Times New Roman', Times, serif !important;
    width: 100%;
    display: block;
}

.main-book-subtitle {
    font-size: 13pt;
    letter-spacing: 2px;
    color: #444;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.main-book-title {
    font-size: 38pt;
    font-weight: 700;
    letter-spacing: 4px;
    color: #000;
    text-transform: uppercase;
}
/* =========================================================
   SCREEN PREVIEW SCALE
========================================================= */

body.screen-scaled #pages-container {
    transform-origin: top center;
    transform: scale(var(--preview-scale));
}

/* =========================================================
   PRINT LOCKDOWN (CONGELA EL DOM MIENTRAS SE IMPRIME)
========================================================= */

body.print-locked .page,
body.print-locked .verse-row,
body.print-locked .word-block {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}