/* Sistema visual OpenAI / ChatGPT — Toráh Viviente */

:root {
    --font-sans: "Inter", "Segoe UI", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    --text-base: 16px;
    --text-sm: 14px;
    --text-md: 20px;
    --text-lg: 28px;
    --text-xl: 36px;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --leading-ui: 1.55;
    --tracking-ui: -0.01em;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
    /* Tema claro (ChatGPT) */
    --ui-bg: #ffffff;
    --ui-surface: #f7f7f8;
    --ui-surface-hover: #ececec;
    --ui-text: #0d0d0d;
    --ui-text-secondary: #6e6e80;
    --ui-border: #e5e5e5;
    --ui-accent: #10a37f;
    --ui-accent-muted: rgba(16, 163, 127, 0.12);
    /* Tema oscuro */
    --ui-bg-dark: #212121;
    --ui-surface-dark: #2f2f2f;
    --ui-surface-hover-dark: #3a3a3a;
    --bible-bone: #ede8dc;
    --bible-bone-muted: #b8b3a8;
    --bible-bone-dim: #9a958c;
    --ui-text-dark: var(--bible-bone);
    --ui-text-secondary-dark: var(--bible-bone-muted);
    --ui-border-dark: #424242;
}

html {
    font-size: var(--text-base) !important;
    line-height: var(--leading-ui);
    letter-spacing: var(--tracking-ui);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans) !important;
    font-size: var(--text-base) !important;
    font-weight: var(--weight-normal);
    line-height: var(--leading-ui) !important;
    letter-spacing: var(--tracking-ui);
    color: var(--ui-text);
    background: var(--ui-bg);
}

/* Tipografía base de la interfaz */
#bible-interface,
#bible-interface .bible-classic-header,
.app-bottom-bar,
.book-nav-dropdown,
.language-widget-panel {
    font-family: var(--font-sans) !important;
    font-size: var(--text-base) !important;
    line-height: var(--leading-ui) !important;
    letter-spacing: var(--tracking-ui);
}

/* Variables Biblia — tema oscuro (estilo ChatGPT dark) */
#bible-interface {
    --verse-font-size: 18px;
    --verse-line-height: 1.55;
    --cap-line-height-px: calc(var(--verse-font-size) * var(--verse-line-height));
    --capitular-block-h: calc(var(--cap-line-height-px) * 3);
    --capitular-font-size: calc(var(--capitular-block-h) * 0.9);
    --bible-bg: var(--ui-bg-dark);
    --bible-panel: var(--ui-surface-dark);
    --bible-panel-light: #383838;
    --bible-text: var(--ui-text-dark);
    --bible-text-muted: var(--ui-text-secondary-dark);
    --bible-border: var(--ui-border-dark);
    --bible-gold: var(--ui-text-dark);
    --bible-gold-hover: #f5f0e8;
    --bible-section-blue: var(--ui-text-secondary-dark);
    --bible-header-blue: var(--ui-text-dark);
    --bible-header-dark: var(--ui-bg-dark);
    --bible-folder-bg: var(--ui-surface-dark);
    --bible-folder-bg-hover: var(--ui-surface-hover-dark);
    --bible-folder-text: var(--ui-text-dark);
    --bible-folder-tab: #383838;
    --bible-header-height: 56px;
    --bible-sticky-offset: 56px;
    --app-bottom-bar-height: 60px;
}

/* Tema claro */
#bible-interface.bible-theme-light {
    --bible-bg: var(--ui-bg);
    --bible-panel: var(--ui-surface);
    --bible-panel-light: #f0f0f0;
    --bible-text: var(--ui-text);
    --bible-text-muted: var(--ui-text-secondary);
    --bible-gold: var(--ui-text);
    --bible-gold-hover: #000000;
    --bible-border: var(--ui-border);
    --bible-section-blue: var(--ui-text-secondary);
    --bible-header-blue: var(--ui-text);
    --bible-header-dark: var(--ui-bg);
    --bible-folder-bg: var(--ui-surface);
    --bible-folder-bg-hover: var(--ui-surface-hover);
    --bible-folder-text: var(--ui-text);
    --bible-folder-tab: #ececec;
    background: var(--ui-bg) !important;
    color: var(--ui-text) !important;
}

/* Cabecera minimalista */
#bible-interface .bible-classic-header {
    background: var(--bible-bg) !important;
    border-bottom: 1px solid var(--bible-border);
    box-shadow: none;
}

#bible-interface.bible-theme-light .bible-classic-header {
    background: var(--ui-bg) !important;
    border-bottom: 1px solid var(--ui-border);
}

/* Barra de búsqueda / navegación */
.book-search-bar {
    gap: var(--space-2) !important;
    padding: var(--space-2) var(--space-4) !important;
    border-bottom: 1px solid var(--bible-border) !important;
}

.book-nav-title-btn {
    height: 40px !important;
    padding: 0 var(--space-3) !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--text-md) !important;
    font-weight: var(--weight-semibold) !important;
    letter-spacing: var(--tracking-ui);
    color: var(--bible-text) !important;
}

.book-nav-title-btn:active,
.book-nav-title-btn[aria-expanded="true"] {
    background: var(--bible-panel) !important;
}

#bible-interface.bible-theme-light .book-nav-title-btn {
    color: var(--ui-text) !important;
}

#bible-interface.bible-theme-light .book-nav-title-btn[aria-expanded="true"] {
    background: var(--ui-surface) !important;
}

.book-search-toggle,
.book-search-back {
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--radius-md) !important;
    color: var(--bible-text-muted) !important;
    font-size: var(--text-base) !important;
}

.book-search-toggle:active,
.book-search-back:active {
    background: var(--bible-panel) !important;
}

#bible-interface.bible-theme-light .book-search-toggle,
#bible-interface.bible-theme-light .book-search-back {
    color: var(--ui-text-secondary) !important;
}

.book-search-expand {
    padding: 0 var(--space-4) var(--space-3) !important;
}

.book-search-field {
    gap: var(--space-2) !important;
    padding: var(--space-2) var(--space-3) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--bible-border) !important;
    background: var(--bible-panel) !important;
}

#bookSearchInput {
    font-size: var(--text-base) !important;
    font-weight: var(--weight-normal) !important;
}

/* Contexto de navegación */
.nav-context-header {
    padding: var(--space-2) var(--space-4) !important;
}

.nav-context-header span {
    font-size: var(--text-sm) !important;
    font-weight: var(--weight-medium) !important;
    color: var(--bible-text-muted) !important;
    line-height: var(--leading-ui) !important;
}

#bible-interface.bible-theme-light .nav-context-header span {
    color: var(--ui-text-secondary) !important;
}

/* Botones de orden / recientes */
.canon-order-bar,
.recent-books-bar {
    gap: var(--space-2) !important;
    padding: var(--space-2) var(--space-4) !important;
}

.canon-order-btn,
.recent-book-btn {
    min-height: 40px !important;
    padding: var(--space-2) var(--space-3) !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--weight-medium) !important;
    background: var(--bible-panel) !important;
    color: var(--bible-text) !important;
    border: 1px solid var(--bible-border) !important;
    box-shadow: none !important;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.canon-order-btn.active,
.recent-book-btn.active,
.canon-order-btn:hover,
.recent-book-btn:hover {
    background: var(--bible-folder-bg-hover) !important;
    border-color: var(--bible-border) !important;
    box-shadow: none !important;
}

#bible-interface.bible-theme-light .canon-order-btn,
#bible-interface.bible-theme-light .recent-book-btn {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}

#bible-interface.bible-theme-light .canon-order-btn.active,
#bible-interface.bible-theme-light .recent-book-btn.active,
#bible-interface.bible-theme-light .canon-order-btn:hover,
#bible-interface.bible-theme-light .recent-book-btn:hover {
    background: var(--ui-surface-hover) !important;
    border-color: #d0d0d0 !important;
}

/* Etiquetas de sección */
.canon-section-label {
    font-size: var(--text-sm) !important;
    font-weight: var(--weight-semibold) !important;
    letter-spacing: 0.04em !important;
    padding: var(--space-4) var(--space-2) var(--space-1) !important;
    color: var(--bible-text-muted) !important;
    text-transform: uppercase;
}

#bible-interface.bible-theme-light .canon-section-label {
    color: var(--ui-text-secondary) !important;
}

/* Grid de libros — tarjetas limpias */
#bible-interface .book-list:not(.bible-page-hidden) {
    gap: var(--space-3) !important;
    padding: var(--space-4) var(--space-4) var(--space-5) !important;
}

.book-folder-btn {
    min-height: 56px !important;
    padding: var(--space-4) var(--space-3) !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--text-base) !important;
    font-weight: var(--weight-medium) !important;
    line-height: var(--leading-ui) !important;
    background: var(--bible-panel) !important;
    color: var(--bible-text) !important;
    border: 1px solid var(--bible-border) !important;
    box-shadow: var(--shadow-soft) !important;
}

.book-folder-btn:hover,
.book-folder-btn:focus {
    background: var(--bible-folder-bg-hover) !important;
    box-shadow: var(--shadow-card) !important;
}

.book-folder-btn.selected {
    background: var(--bible-folder-bg-hover) !important;
    border-color: var(--ui-accent) !important;
    color: var(--bible-text) !important;
    box-shadow: 0 0 0 1px var(--ui-accent-muted) !important;
}

#bible-interface.bible-theme-light .book-folder-btn {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}

#bible-interface.bible-theme-light .book-folder-btn:hover,
#bible-interface.bible-theme-light .book-folder-btn.selected {
    background: var(--ui-surface-hover) !important;
    border-color: var(--ui-accent) !important;
    color: var(--ui-text) !important;
}

/* Capítulos */
#bible-interface .chapter-grid:not(.bible-page-hidden) {
    gap: var(--space-3) !important;
    padding: var(--space-4) !important;
}

.chapter-box-btn,
#bible-interface .chapter-grid button {
    min-height: 52px !important;
    padding: var(--space-3) !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--text-base) !important;
    font-weight: var(--weight-medium) !important;
    background: var(--bible-panel) !important;
    color: var(--bible-text) !important;
    border: 1px solid var(--bible-border) !important;
    box-shadow: none !important;
}

.chapter-box-btn.selected,
.chapter-box-btn:hover,
#bible-interface .chapter-grid button:hover {
    background: var(--bible-folder-bg-hover) !important;
    border-color: var(--ui-accent) !important;
}

#bible-interface.bible-theme-light .chapter-box-btn,
#bible-interface.bible-theme-light .chapter-grid button {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}

#bible-interface.bible-theme-light .chapter-box-btn.selected,
#bible-interface.bible-theme-light .chapter-box-btn:hover,
#bible-interface.bible-theme-light .chapter-grid button:hover {
    background: var(--ui-surface-hover) !important;
    border-color: var(--ui-accent) !important;
}

/* Versículos índice */
.verse-index-grid {
    gap: var(--space-3) !important;
    padding: var(--space-4) var(--space-4) var(--space-5) !important;
}

.verse-index-btn {
    min-height: 48px !important;
    padding: var(--space-2) var(--space-1) !important;
    border-radius: var(--radius-sm) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--weight-medium) !important;
    background: var(--bible-panel) !important;
    color: var(--bible-text) !important;
    border: 1px solid var(--bible-border) !important;
    box-shadow: none !important;
}

.verse-index-btn:hover,
.verse-index-btn.active {
    background: var(--bible-folder-bg-hover) !important;
    border-color: var(--ui-accent) !important;
    color: var(--bible-text) !important;
}

#bible-interface.bible-theme-light .verse-index-btn {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}

#bible-interface.bible-theme-light .verse-index-btn:hover,
#bible-interface.bible-theme-light .verse-index-btn.active {
    background: var(--ui-surface-hover) !important;
    border-color: var(--ui-accent) !important;
}

/* Menú desplegable de libros */
.book-nav-dropdown {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}

.book-nav-filter {
    margin: var(--space-3) var(--space-4) !important;
    padding: var(--space-3) var(--space-4) !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--text-base) !important;
    width: calc(100% - var(--space-6)) !important;
}

.book-nav-list {
    gap: var(--space-3) !important;
    padding: var(--space-2) var(--space-4) var(--space-5) !important;
}

.book-nav-book-btn {
    min-height: 48px !important;
    padding: var(--space-3) var(--space-2) !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--weight-medium) !important;
    background: var(--bible-panel) !important;
    color: var(--bible-text) !important;
    border: 1px solid var(--bible-border) !important;
}

.book-nav-book-btn.selected,
.book-nav-book-btn:hover {
    background: var(--bible-folder-bg-hover) !important;
    border-color: var(--ui-accent) !important;
}

#bible-interface.bible-theme-light .book-nav-dropdown {
    background: var(--ui-bg) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
}

#bible-interface.bible-theme-light .book-nav-book-btn {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}

#bible-interface.bible-theme-light .book-nav-book-btn.selected,
#bible-interface.bible-theme-light .book-nav-book-btn:hover {
    background: var(--ui-surface-hover) !important;
    border-color: var(--ui-accent) !important;
}

/* Toolbar de lectura */
.reading-toolbar {
    justify-content: center !important;
    gap: var(--space-2) !important;
    padding: var(--space-2) var(--space-4) !important;
}

.reading-tool-btn {
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 var(--space-3) !important;
    border-radius: var(--radius-md) !important;
    font-weight: var(--weight-medium) !important;
    background: var(--bible-panel) !important;
    color: var(--bible-text) !important;
    border: 1px solid var(--bible-border) !important;
}

.reading-tool-btn:active {
    background: var(--bible-folder-bg-hover) !important;
}

#bible-interface.bible-theme-light .reading-toolbar {
    background: var(--ui-bg) !important;
    border-bottom-color: var(--ui-border) !important;
}

#bible-interface.bible-theme-light .reading-tool-btn {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}

/* Modo lectura */
#bible-interface,
#bible-interface .verse-content.reading-mode,
#bible-interface .verse-content.reading-mode .verse-text-content {
    font-family: var(--font-sans) !important;
}

#bible-interface .verse-content.reading-mode .verse-drop-cap-layout .chapter-drop-cap {
    font-family: var(
        --font-capitular,
        "Cormorant Garamond",
        "Georgia",
        "Times New Roman",
        serif
    ) !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
    overflow: hidden !important;
}

#bible-interface .verse-content.reading-mode .verse-drop-cap-text,
#bible-interface .verse-content.reading-mode .verse-drop-cap-text .verse-text-content {
    line-height: var(--verse-line-height, 1.55) !important;
}

.verse-content.reading-mode {
    padding: 0 var(--space-4) var(--space-5) !important;
    line-height: var(--verse-line-height, 1.55) !important;
}

#bible-interface.bible-view-content .reading-toolbar.reading-toolbar-visible {
    padding: 0 8px 0 !important;
    margin: 0 !important;
    border-bottom: none !important;
    min-height: 0 !important;
}

/* Sin hueco entre toolbar de lectura y texto del capítulo */
#bible-interface.bible-view-content #resultados,
#bible-interface.bible-view-content .verse-container {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    min-height: 0 !important;
}

#bible-interface.bible-view-content .chapter-panel-box,
#bible-interface.bible-view-content .chapter-panel-box.chapter-reading-active {
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
}

#bible-interface.bible-view-content .verse-index-grid {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    width: 0 !important;
    left: -9999px !important;
}

#bible-interface.bible-view-content .verse-content.reading-mode {
    margin: 0 !important;
    padding: 0 16px 16px !important;
}

#bible-interface.bible-view-content .verse-content.reading-mode > *:first-child,
#bible-interface.bible-view-content .verse-content.reading-mode .verse-paragraph.verse-section-title:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#bible-interface.bible-view-content .bible-classic-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#bible-interface .verse-content.reading-mode,
#bible-interface .verse-content.reading-mode .verse-paragraph,
#bible-interface .verse-content.reading-mode .verse-text-content {
    line-height: var(--verse-line-height, 1.55) !important;
}

#bible-interface.bible-theme-light .verse-content.reading-mode .verse-text-content {
    color: var(--ui-text) !important;
}

.chapter-panel-header {
    padding: var(--space-4) !important;
    gap: var(--space-2) var(--space-3) !important;
}

.chapter-panel-title {
    font-size: var(--text-md) !important;
    font-weight: var(--weight-semibold) !important;
    color: var(--bible-text) !important;
}

.chapter-panel-subtitle {
    font-size: var(--text-sm) !important;
    font-weight: var(--weight-normal) !important;
    color: var(--bible-text-muted) !important;
}

/* Barra inferior */
.app-bottom-bar {
    gap: var(--space-2) !important;
    padding: var(--space-2) var(--space-4) !important;
    height: var(--app-bottom-bar-height) !important;
    border-top: 1px solid var(--bible-border) !important;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.04) !important;
}

.app-bottom-bar.bottom-bar-light {
    background: var(--ui-bg) !important;
    border-top-color: var(--ui-border) !important;
}

.app-bottom-bar.bottom-bar-dark {
    background: var(--ui-bg-dark) !important;
    border-top-color: var(--ui-border-dark) !important;
    box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.2) !important;
}

.bottom-translator-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--bible-border) !important;
    background: var(--bible-panel) !important;
}

.app-bottom-bar.bottom-bar-light .bottom-translator-btn {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

.app-bottom-bar.bottom-bar-dark .bottom-translator-btn {
    background: var(--ui-surface-dark) !important;
    border-color: var(--ui-border-dark) !important;
}

.paypal-logo-badge {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow: var(--shadow-soft) !important;
}

/* Panel traductor */
.bottom-bar-left .language-widget-panel {
    border-radius: var(--radius-lg) !important;
    border-color: var(--ui-border) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
}

.language-widget-panel input {
    padding: var(--space-3) var(--space-4) !important;
    font-size: var(--text-base) !important;
    background: var(--ui-surface) !important;
    border-bottom-color: var(--ui-border) !important;
}

.language-option-row {
    padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4) !important;
}

.language-option-row .lang-option-name {
    font-size: var(--text-sm) !important;
    color: var(--ui-text) !important;
}

.language-option-row.active,
.language-option-row.active .lang-option-name {
    color: var(--ui-accent, #0038b8) !important;
}

.language-option-btn {
    padding: var(--space-3) var(--space-4) !important;
    font-size: var(--text-sm) !important;
    color: var(--ui-text) !important;
}

.language-option-btn:hover,
.language-option-btn.active,
.language-option-row.active {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    font-weight: var(--weight-medium) !important;
}

/* Escritorio: márgenes amplios */
@media (min-width: 1024px) {
    #bible-interface .book-list:not(.bible-page-hidden) {
        padding: var(--space-5) var(--space-7) var(--space-6) !important;
    }

    #bible-interface .chapter-grid:not(.bible-page-hidden) {
        padding: var(--space-5) var(--space-7) !important;
    }

    .verse-content.reading-mode {
        padding: 0 var(--space-7) var(--space-6) !important;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    .chapter-panel-box {
        margin: var(--space-4) var(--space-7) !important;
        padding: var(--space-5) !important;
        border: 1px solid var(--ui-border) !important;
        border-radius: var(--radius-lg) !important;
        box-shadow: var(--shadow-card) !important;
    }
}

/* Móvil: márgenes laterales 16–20px */
@media (max-width: 768px) {
    #bible-interface {
        --bible-header-height: 52px;
        --bible-sticky-offset: 52px;
        --app-bottom-bar-height: 56px;
    }

    .book-search-bar {
        padding: var(--space-2) var(--space-4) !important;
    }

    #bible-interface .book-list:not(.bible-page-hidden),
    #bible-interface .chapter-grid:not(.bible-page-hidden),
    .verse-index-grid {
        padding-left: var(--space-4) !important;
        padding-right: var(--space-4) !important;
    }

    .verse-content.reading-mode {
        padding-left: var(--space-4) !important;
        padding-right: var(--space-4) !important;
    }

    .book-nav-title-btn {
        font-size: 18px !important;
    }
}