/* css/bible.css
* Bible reader layout: sidebar (books/chapters) + reader (center) + study panel (right slide-in).
*/
:root {
--bible-gold: #c9a84c;
--bible-dark: #1a1a2e;
--bible-darker: #16213e;
--bible-panel-bg: #ffffff;
--bible-soft: #f4f6fa;
--bible-border: #e5e7eb;
--bible-text: #1f2937;
--bible-text-muted: #6b7280;
--bible-accent-soft: #fff8e1;
--bible-bookmark: #fff3a3;
/* Color del versículo destacado en la cabecera fija del modal: dorado
oscurecido, legible sobre el fondo crema y distinto del texto normal. */
--bible-verse-hl: #7c5e10;
/* Reader surfaces (overridable by dark theme) */
--bible-reader-bg: #ffffff; /* fondo de la caja de versículos / tarjetas blancas */
--bible-page-bg: var(--bible-soft);
/* Factor de escala global del texto del lector (1 = tamaño base). */
--bible-fs: 1;
}
body.bible-body {
background: var(--bible-page-bg);
color: var(--bible-text);
}
/* ─── Tema oscuro (solo página Biblia) ─────────────────────
Sobreescribe las variables; todo el lector hereda los nuevos colores. */
body.bible-body.bible-theme-dark {
--bible-panel-bg: #1b1f2a;
--bible-soft: #242937;
--bible-border: #353c4d;
--bible-text: #e7e9ee;
--bible-text-muted: #9aa2b1;
--bible-accent-soft: #2c2f1f;
--bible-bookmark: #4a4424;
--bible-reader-bg: #1b1f2a;
--bible-page-bg: #14161d;
/* En oscuro el versículo destacado va en dorado claro. */
--bible-verse-hl: #f0d786;
}
/* En oscuro, los títulos/refs que usaban el azul-noche como COLOR de texto
(sobre superficies ahora oscuras) pasan a dorado/claro para mantener contraste. */
body.bible-theme-dark .bp-sec-title,
body.bible-theme-dark .bp-modal-word,
body.bible-theme-dark .bible-result .ref,
body.bible-theme-dark .bp-xref .xref-ref,
body.bible-theme-dark .bp-card .word,
body.bible-theme-dark details.bp-commentary > summary .author,
body.bible-theme-dark details.bp-dictionary > summary .author,
body.bible-theme-dark details.bp-devotional > summary .author,
body.bible-theme-dark details.bp-encyclopedia > summary .author {
color: var(--bible-gold);
}
/* En modo oscuro, las tarjetas de léxico (Strong/Abbott) también van OSCURAS
para no deslumbrar. Damos fondo oscuro y texto claro, y sobreescribimos los
colores de texto que estaban fijados a tonos oscuros (legibles solo en crema). */
body.bible-theme-dark .bp-strongs {
background: var(--bible-soft);
border-color: var(--bible-gold);
}
body.bible-theme-dark .bp-as-card {
background: var(--bible-soft);
border-color: var(--bible-border);
}
/* Texto general claro dentro de las tarjetas. */
body.bible-theme-dark .bp-strongs-short,
body.bible-theme-dark .bp-as-def,
body.bible-theme-dark .bp-as-gloss,
body.bible-theme-dark .bp-as-greek { color: var(--bible-text); }
body.bible-theme-dark .bp-strongs-long,
body.bible-theme-dark .bp-strongs-longbody,
body.bible-theme-dark .bp-strongs-deriv,
body.bible-theme-dark .bp-strongs-morph,
body.bible-theme-dark .bp-as-translit,
body.bible-theme-dark .bp-as-morph { color: var(--bible-text-muted); }
/* Negritas/cursivas dentro de las definiciones (estaban en gris/negro fijos). */
body.bible-theme-dark .bp-as-def b { color: var(--bible-text); }
body.bible-theme-dark .bp-as-def i { color: var(--bible-text-muted); }
/* Separador punteado de la derivación, visible sobre fondo oscuro. */
body.bible-theme-dark .bp-strongs-deriv { border-top-color: var(--bible-border); }
/* Pestañas del panel: texto claro cuando NO están activas (el activo va sobre dorado). */
body.bible-theme-dark .bp-tab { color: var(--bible-text); }
body.bible-theme-dark .bp-tab.is-active { color: #1a1a2e; }
/* Concordancia: la traducción KA/EN bajo el original usaba gris oscuro fijo,
ilegible en oscuro. La aclaramos y ajustamos su separador punteado. */
body.bible-theme-dark .bible-result-translation {
color: var(--bible-text-muted);
border-top-color: var(--bible-border);
}
/* ─── Layout shell ─────────────────────────────────── */
/* Altura efectiva ocupada por la navbar global. Se toggle a 0 cuando la navbar
se oculta al hacer scroll (clase body.bible-nav-hidden). El sidebar, panel y
cabecera del lector usan esta variable para reposicionarse sin saltos. */
body.bible-body { --nav-h: 64px; }
body.bible-body.bible-nav-hidden { --nav-h: 0px; }
/* Borde inferior REAL de la navbar flotante (top:2px + height:52px = 54px). El
header del lector se pega aquí para que NO quede hueco al hacer scroll. Cuando
la navbar se oculta (scroll abajo en móvil), se pega al tope (0). */
body.bible-body { --nav-bottom: 54px; }
body.bible-body.bible-nav-hidden { --nav-bottom: 0px; }
.bible-shell {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: 0;
min-height: calc(100vh - var(--nav-h));
margin-top: var(--nav-h);
transition: margin-top .2s ease;
}
.bible-shell.with-panel {
grid-template-columns: 280px minmax(0, 1fr) 460px;
}
@media (min-width: 1500px) {
.bible-shell.with-panel { grid-template-columns: 280px minmax(0, 1fr) 520px; }
}
/* ─── Sidebar (books) ──────────────────────────────── */
/* El aside scrollea normalmente; la búsqueda va PEGADA al fondo con sticky. */
.bible-sidebar {
position: sticky;
top: var(--nav-h);
align-self: start;
height: calc(100vh - var(--nav-h));
transition: top .2s ease, height .2s ease;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
background: var(--bible-reader-bg);
border-right: 1px solid var(--bible-border);
padding: 16px 12px 0;
}
.bible-sidebar-scroll { display: contents; }
.bible-sidebar-scroll > h3:first-child { margin-top: 4px; }
/* Búsqueda pegada al fondo del sidebar mientras se hace scroll por los libros. */
.bible-sidebar > .bible-toolbar {
position: sticky;
bottom: 0;
margin: 12px -12px 0;
padding: 12px;
border-top: 1px solid var(--bible-border);
/* Fondo SÓLIDO para tapar los libros que pasan por detrás. */
background: var(--bible-darker, #16162c);
z-index: 3;
}
.bible-sidebar h3 {
color: var(--bible-gold);
font-size: calc(13px * var(--bible-fs));
font-weight: 800;
letter-spacing: .8px;
text-transform: uppercase;
margin: 18px 8px 8px;
padding-bottom: 6px;
border-bottom: 2px solid var(--bible-border);
}
.bible-sidebar h3:first-child { margin-top: 4px; }
.bible-book-list { list-style: none; padding: 0; margin: 0; }
.bible-book-list li > button {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
background: transparent;
border: none;
text-align: left;
padding: 8px 10px;
border-radius: 6px;
cursor: pointer;
color: var(--bible-text);
font-size: calc(16px * var(--bible-fs));
transition: background .12s;
}
.bible-book-list li > button:hover { background: var(--bible-soft); }
.bible-book-list li > button.active {
background: var(--bible-dark);
color: var(--bible-gold);
font-weight: 700;
}
.bible-book-chapters {
margin: 6px 0 4px;
padding: 6px 8px;
background: var(--bible-soft);
border-radius: 8px;
display: none;
}
.bible-book-chapters.open { display: flex; flex-wrap: wrap; gap: 5px; }
.bible-book-chapters button {
flex: 0 0 auto;
min-width: 34px; height: 32px;
border: 1px solid var(--bible-border);
background: var(--bible-reader-bg);
border-radius: 6px;
font-size: calc(12px * var(--bible-fs));
cursor: pointer;
color: var(--bible-text);
padding: 0 4px;
}
.bible-book-chapters button:hover { background: var(--bible-accent-soft); }
.bible-book-chapters button.active {
background: var(--bible-gold);
color: var(--bible-dark);
border-color: var(--bible-gold);
font-weight: 800;
}
/* Botón «შესავალი» (introducción del libro) al frente del grid de capítulos. */
.bible-book-chapters button.intro-btn {
min-width: auto;
padding: 0 10px;
font-weight: 700;
color: var(--bible-dark);
background: var(--bible-accent-soft);
border-color: var(--bible-gold);
}
.bible-book-chapters button.intro-btn:hover { background: var(--bible-gold); }
body.bible-theme-dark .bible-book-chapters button.intro-btn {
color: var(--bible-gold);
background: var(--bible-soft);
}
/* ─── Reader ────────────────────────────────────────── */
.bible-reader {
padding: 32px 28px 0;
/* El lector ocupa su columna del grid (que ya descuenta la barra lateral y,
si está abierto, el panel de estudio). Tope de 1200px: por encima de ~90-100
caracteres por línea el ojo pierde el renglón al volver. Sube desde los
860px originales porque en diglot conviven 2-3 líneas por versículo. */
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
/* Leyendo un capítulo (.is-reading): layout en DOS bloques — el header del lector
queda fijo arriba y el texto bíblico tiene su PROPIO scroll debajo, así no se
tapan nunca. Aplica en escritorio y en móvil. (En la home con la grilla de
libros se mantiene el scroll de página normal.) Usamos 100dvh para que la barra
de direcciones del móvil no rompa el alto. */
.bible-reader.is-reading {
height: calc(100vh - var(--nav-h));
height: calc(100dvh - var(--nav-h));
display: flex;
flex-direction: column;
min-height: 0;
transition: height .2s ease;
}
.bible-reader-empty {
text-align: center;
padding: 28px 14px 80px;
color: var(--bible-text-muted);
font-size: 16px;
}
/* ─── Portada con tarjetas-lomo de los libros ──────────────── */
.bible-home {
max-width: 980px;
margin: 0 auto;
text-align: left;
}
.bible-home-head { text-align: center; margin-bottom: 28px; }
.bible-home-head h2 {
color: var(--bible-gold);
font-size: 32px;
margin: 0 0 6px;
letter-spacing: .5px;
}
.bible-home-sub { margin: 0; font-size: 14px; color: var(--bible-text-muted); }
.bible-testament {
background: var(--bible-reader-bg);
border: 1px solid var(--bible-border);
border-radius: 14px;
padding: 18px 18px 22px;
margin-bottom: 22px;
box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.bible-testament-title {
color: var(--bible-gold);
font-size: 18px;
text-transform: uppercase;
letter-spacing: .08em;
margin: 0 0 14px;
padding-bottom: 8px;
border-bottom: 2px solid var(--bible-gold);
}
.bible-testament-title small {
color: var(--bible-text-muted);
font-size: 12px;
font-weight: 400;
letter-spacing: .04em;
text-transform: none;
}
.bible-genre { margin-bottom: 18px; }
.bible-genre:last-child { margin-bottom: 0; }
.bible-genre-title {
font-size: 12px;
font-weight: 700;
color: var(--bible-text-muted);
text-transform: uppercase;
letter-spacing: .12em;
margin: 0 0 8px;
}
/* Rejilla de tarjetas-libro: icono a la izquierda, nombre + meta a la derecha.
auto-fill se adapta de móvil (1 columna) a desktop (3-4 columnas). */
.bible-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 10px;
}
/* Los libros grandes (>= 40 capítulos) ocupan 2 columnas para destacar. */
.bible-cards .bible-card.is-big { grid-column: span 2; }
.bible-card {
--card-text: #fff;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--genre-color, #8a96b8);
color: var(--card-text);
border: none;
border-radius: 12px;
text-align: left;
cursor: pointer;
min-height: 64px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.15),
0 1px 3px rgba(0,0,0,.12);
position: relative;
overflow: hidden;
transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.bible-card:hover {
transform: translateY(-2px);
filter: brightness(1.08);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.2),
0 5px 14px rgba(0,0,0,.18);
}
/* Brillo decorativo sutil en la esquina superior izquierda. */
.bible-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 50%;
background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
pointer-events: none;
}
/* Caja del icono — círculo translúcido con el emoji/favicon centrado. */
.bible-card-icon {
flex: 0 0 auto;
width: 44px; height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.18);
border-radius: 12px;
backdrop-filter: blur(2px);
}
.bible-card-icon .emoji {
font-size: 24px;
line-height: 1;
/* Color emoji nativo: lo dejamos como viene, sin filter. */
filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
.bible-card-icon img {
width: 30px; height: 30px;
object-fit: contain;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
/* Cuerpo de texto (HORIZONTAL — el nombre va en línea, no rotado). */
.bible-card-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0; /* permite que el nombre largo se trunque sin desbordar */
}
.bible-card-name {
font-weight: 700;
font-size: 15px;
letter-spacing: .01em;
line-height: 1.15;
text-shadow: 0 1px 2px rgba(0,0,0,.18);
/* Permitir hasta 2 líneas (en vez de cortar con "..." en una sola), para
que el nombre completo del libro quepa sin cambiar el ancho del botón.
Solo si fuera larguísimo se recortaría en la 2ª línea. */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow-wrap: anywhere;
}
.bible-card.is-big .bible-card-name { font-size: 17px; }
.bible-card-meta {
font-size: 11px;
font-weight: 600;
opacity: .85;
letter-spacing: .03em;
}
/* Paleta por género — colores informativos y armoniosos. */
.bible-genre[data-genre="torah"] .bible-card { --genre-color: #7c6e3b; } /* dorado oliva */
.bible-genre[data-genre="history"] .bible-card { --genre-color: #5b6a8a; } /* azul pizarra */
.bible-genre[data-genre="wisdom"] .bible-card { --genre-color: #8a5a3b; } /* caoba */
.bible-genre[data-genre="majorprop"] .bible-card { --genre-color: #6b3f6e; } /* púrpura */
.bible-genre[data-genre="minorprop"] .bible-card { --genre-color: #9a7a4a; } /* arena tostada */
.bible-genre[data-genre="gospel"] .bible-card { --genre-color: #a23a3a; } /* rojo siena */
.bible-genre[data-genre="acts"] .bible-card { --genre-color: #c2873a; } /* ámbar */
.bible-genre[data-genre="pauline"] .bible-card { --genre-color: #3a6a5a; } /* verde abeto */
.bible-genre[data-genre="general"] .bible-card { --genre-color: #4a5a72; } /* azul polvo */
.bible-genre[data-genre="apoc"] .bible-card { --genre-color: #5a2a4a; } /* burdeos */
/* Tema oscuro: las tarjetas mantienen sus colores propios; aclaramos sólo el panel. */
body.bible-theme-dark .bible-testament { box-shadow: 0 2px 10px rgba(0,0,0,.25); }
/* Móvil: tarjetas algo más compactas. */
@media (max-width: 720px) {
.bible-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.bible-card { padding: 10px 12px; min-height: 56px; gap: 10px; }
.bible-card-icon { width: 38px; height: 38px; }
.bible-card-icon .emoji { font-size: 20px; }
.bible-card-icon img { width: 26px; height: 26px; }
.bible-card-name { font-size: 14px; }
.bible-card.is-big .bible-card-name { font-size: 15px; }
.bible-home-head h2 { font-size: 24px; }
.bible-testament { padding: 14px 12px 18px; }
}
/* Pantallas muy estrechas: una columna; cancelar el span de los "big". */
@media (max-width: 420px) {
.bible-cards { grid-template-columns: 1fr; }
.bible-cards .bible-card.is-big { grid-column: auto; }
}
/* Reader header — bloque FIJO arriba del lector. No scrollea: el texto bíblico
tiene su propio scroll debajo (.bible-verses), así nunca se tapan. */
.bible-reader-head {
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 10px;
background: linear-gradient(135deg, var(--bible-dark) 0%, var(--bible-darker) 100%);
color: white;
border-radius: 14px;
padding: 16px 22px;
margin-bottom: 14px;
border-bottom: 3px solid var(--bible-gold);
z-index: 50;
box-shadow: 0 6px 18px rgba(0,0,0,.18);
transition: padding .15s ease;
}
/* Línea 1: ‹ TÍTULO › en una sola línea. */
.bible-reader-head .brh-title-row {
display: flex;
align-items: center;
gap: 10px;
}
.bible-reader-head .brh-title-wrap {
flex: 1 1 auto;
min-width: 0;
text-align: center;
}
/* Línea 2: controles en línea, alineados a la derecha. */
.bible-reader-head .brh-tools-row {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 8px;
}
/* Búsqueda a la izquierda (crece), idiomas a la derecha (ancho natural). */
.bible-reader-head .brh-tools-row .bible-searchbar { flex: 1 1 auto; min-width: 0; }
.bible-reader-head .brh-tools-row .blt-dd { flex: 0 0 auto; }
/* Estado compacto: cuando la cabecera ya está pegada, reducimos padding y h1
y colapsamos la fila de herramientas a una altura más discreta. */
.bible-reader-head.is-stuck {
padding: 8px 14px;
gap: 6px;
}
.bible-reader-head.is-stuck h1 { font-size: 18px; }
.bible-reader-head.is-stuck .sub { display: none; }
.bible-reader-head.is-stuck .brh-tools-row { gap: 4px; }
.bible-reader-head h1 {
margin: 0;
color: var(--bible-gold);
font-size: 24px;
font-weight: 800;
/* Fila compacta: [nombre del libro] [capítulo ▾] */
display: inline-flex;
align-items: baseline;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
}
/* Botón del nombre del libro (abre el selector de libros). */
.brh-book-btn {
background: none;
border: none;
color: var(--bible-gold);
font: inherit;
cursor: pointer;
padding: 2px 4px;
border-radius: 6px;
max-width: 60vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.brh-book-btn:hover { background: rgba(255,255,255,.08); }
/* El nombre alterna completo (escritorio) / abreviado (móvil). Por defecto,
escritorio: completo visible, abreviado oculto. */
.brh-book-btn .brh-abbr { display: none; }
.brh-book-btn .brh-full { display: inline; }
/* Capítulo desplegable. */
.brh-chap-dd { position: relative; display: inline-flex; }
.brh-chap-btn {
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.18);
color: var(--bible-gold);
font: inherit;
cursor: pointer;
padding: 2px 10px;
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 5px;
}
.brh-chap-btn:hover { background: rgba(255,255,255,.18); }
.brh-chap-caret { font-size: .6em; opacity: .8; }
/* Libro de un solo capítulo: sin desplegable. */
.brh-chap-dd.single .brh-chap-caret { display: none; }
.brh-chap-dd.single .brh-chap-btn { pointer-events: none; background: none; border-color: transparent; }
/* Menú: rejilla de números en celdas cuadradas fijas (bien alineadas y legibles),
con scroll si hay muchos capítulos. */
.brh-chap-menu {
position: absolute;
top: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
z-index: 200;
background: var(--bible-darker, #16162c);
border: 1px solid rgba(255,255,255,.18);
border-radius: 12px;
box-shadow: 0 12px 34px rgba(0,0,0,.5);
padding: 10px;
display: grid;
grid-template-columns: repeat(5, 44px);
gap: 6px;
max-height: 56vh;
overflow-y: auto;
overscroll-behavior: contain;
}
.brh-chap-menu button {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.16);
color: #f2f2f7;
font-size: 15px;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
padding: 0;
border-radius: 9px;
cursor: pointer;
transition: background .12s, border-color .12s, transform .06s;
}
.brh-chap-menu button:hover {
background: rgba(255,255,255,.20);
border-color: rgba(255,255,255,.35);
}
.brh-chap-menu button:active { transform: scale(.94); }
.brh-chap-menu button:focus-visible {
outline: 2px solid var(--bible-gold);
outline-offset: 1px;
}
.brh-chap-menu button.active {
background: var(--bible-gold);
color: #1a1a2e;
border-color: var(--bible-gold);
box-shadow: 0 0 0 2px rgba(212,175,55,.35);
}
.bible-reader-head .sub { color: rgba(255,255,255,.7); font-size: 13px; margin-top: 4px; }
.bible-reader-head .nav-buttons { display: flex; gap: 8px; }
.bible-reader-head button.chnav {
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.2);
color: var(--bible-gold);
padding: 8px 14px;
border-radius: 8px;
cursor: pointer;
font-weight: 700;
}
.bible-reader-head button.chnav:hover { background: rgba(255,255,255,.15); }
.bible-reader-head button.chnav:disabled { opacity: .35; cursor: default; }
/* Botones de navegación: flecha + texto ("წინა თავი" / "შემდეგი თავი"). */
.bible-reader-head button.chnav-arrow {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
line-height: 1;
flex: 0 0 auto;
font-size: 14px;
white-space: nowrap;
}
.bible-reader-head button.chnav-arrow .chnav-ico {
font-size: 18px;
line-height: 1;
}
.bible-reader-head button.chnav-arrow .chnav-txt {
font-size: 13px;
font-weight: 700;
}
/* En estado compacto (cabecera pegada) y en móvil dejamos solo la flecha para
ahorrar alto/ancho — el texto se oculta. */
.bible-reader-head.is-stuck button.chnav-arrow .chnav-txt {
display: none !important;
}
/* Navegación de capítulo al pie (sobre fondo claro de versículos). */
.bible-chapter-footer-nav {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--bible-border);
}
.bible-chapter-footer-nav button.chnav {
flex: 1;
background: var(--bible-dark);
border: 1px solid var(--bible-dark);
color: var(--bible-gold);
padding: 12px 18px;
border-radius: 10px;
cursor: pointer;
font-weight: 700;
font-size: 15px;
}
.bible-chapter-footer-nav button.chnav:hover:not(:disabled) { background: #1a2744; }
.bible-chapter-footer-nav button.chnav:disabled { opacity: .3; cursor: default; }
/* Controles de vista: tamaño de texto (A−/A+) + tema claro/oscuro */
.bible-view-tools {
display: inline-flex;
gap: 6px;
align-items: center;
}
.bible-view-tools .bvt-btn {
min-width: 38px;
padding: 6px 10px;
font-size: 14px;
line-height: 1;
flex: 0 0 auto;
}
#btnThemeToggle { font-size: 16px; }
/* (El antiguo selector de capítulos siempre-visible .brh-chapters se reemplazó
por el desplegable .brh-chap-dd en el título.) */
/* Selector de idiomas como desplegable (botón resumen + menú con checkboxes). */
.blt-dd { position: relative; display: inline-flex; }
.blt-dd-btn {
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.2);
color: var(--bible-gold);
cursor: pointer;
padding: 5px 10px;
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 700;
}
.blt-dd-btn:hover { background: rgba(255,255,255,.18); }
.blt-dd-caret { font-size: .7em; opacity: .8; }
/* El menú: popup con los checkboxes de idioma en columna. */
.blt-dd-menu.blt-dd-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 200;
flex-direction: column;
align-items: stretch;
overflow: visible;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,.5);
padding: 6px;
gap: 2px;
margin: 0;
min-width: 150px;
/* Fondo SÓLIDO (no transparente) para que las opciones se lean bien. */
background: var(--bible-darker, #16162c) !important;
border: 1px solid rgba(255,255,255,.18) !important;
}
/* Dentro del menú, las opciones son filas (no segmentos horizontales). */
.blt-dd-menu .blt-chk {
justify-content: flex-start;
border-right: none !important;
border-radius: 7px;
padding: 9px 12px;
}
/* La opción "original" se separa con una línea del resto de idiomas. */
.blt-dd-menu .blt-orig-opt {
border-top: 1px solid rgba(255,255,255,.12);
margin-top: 2px;
padding-top: 9px;
}
/* Toggle de traducción de la Biblia (KA/EN/RU + switch original en línea) */
.bible-lang-toggle {
display: inline-flex;
align-items: stretch;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.2);
border-radius: 8px;
overflow: hidden;
margin-right: 4px;
}
.bible-lang-toggle .blt-btn {
background: transparent;
border: none;
color: rgba(255,255,255,.7);
padding: 6px 10px;
cursor: pointer;
font-weight: 700;
font-size: 13px;
min-width: 34px;
border-right: 1px solid rgba(255,255,255,.12);
transition: background .12s, color .12s;
}
.bible-lang-toggle .blt-btn:last-child { border-right: none; }
.bible-lang-toggle .blt-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.bible-lang-toggle .blt-btn.active {
background: var(--bible-gold);
color: #1a1a2e;
}
/* Checkbox de idioma (multi-select). Cada uno enciende/apaga su idioma; se pueden
tener varios activos a la vez (ej. ქარ + РУС). El checkbox real va oculto;
pintamos el segmento entero como botón conmutable. */
.bible-lang-toggle .blt-chk {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 10px;
min-width: 34px;
color: rgba(255,255,255,.7);
cursor: pointer;
font-weight: 700;
font-size: 13px;
border-right: 1px solid rgba(255,255,255,.12);
user-select: none;
transition: background .12s, color .12s;
}
.bible-lang-toggle .blt-chk:last-of-type { border-right: none; }
.bible-lang-toggle .blt-chk input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
margin: 0;
pointer-events: none;
}
.bible-lang-toggle .blt-chk:hover { background: rgba(255,255,255,.12); color: #fff; }
.bible-lang-toggle .blt-chk:has(input:checked) {
background: var(--bible-gold);
color: #1a1a2e;
}
.bible-lang-toggle .blt-chk input[type="checkbox"]:focus-visible + .blt-chk-text {
outline: 2px solid #fff;
outline-offset: 2px;
border-radius: 3px;
}
/* Switch "+ original" — segmento en línea dentro del toggle, a la derecha de РУС.
Enciende/apaga el paralelo con el texto original (hebreo AT / griego NT). */
.blt-orig {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 0 10px;
font-size: 12px;
font-weight: 700;
color: rgba(255,255,255,.7);
cursor: pointer;
border-left: 1px solid rgba(255,255,255,.2);
user-select: none;
transition: background .15s, color .15s;
}
/* Ocultamos el checkbox real; el "riel" lo dibujamos nosotros */
.blt-orig input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
margin: 0;
pointer-events: none;
}
/* Riel del switch */
.blt-orig .blt-orig-switch {
position: relative;
flex: 0 0 auto;
width: 30px;
height: 16px;
border-radius: 999px;
background: rgba(255,255,255,.18);
border: 1px solid rgba(255,255,255,.25);
transition: background .15s, border-color .15s;
}
/* Perilla del switch */
.blt-orig .blt-orig-switch::after {
content: "";
position: absolute;
top: 1px;
left: 1px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.4);
transition: transform .18s ease;
}
.blt-orig:hover {
background: rgba(255,255,255,.1);
color: #fff;
}
/* Estado ENCENDIDO */
.blt-orig:has(input:checked) {
background: rgba(201,168,76,.18);
color: var(--bible-gold);
}
.blt-orig:has(input:checked) .blt-orig-switch {
background: var(--bible-gold);
border-color: var(--bible-gold);
}
.blt-orig:has(input:checked) .blt-orig-switch::after {
transform: translateX(14px);
}
/* Accesibilidad: foco por teclado */
.blt-orig input[type="checkbox"]:focus-visible + .blt-orig-switch {
outline: 2px solid var(--bible-gold);
outline-offset: 2px;
}
/* Tri: cada versículo apila las tres traducciones (ქარ + ENG + РУС). */
.bible-verse.tri { flex-direction: column; align-items: stretch; }
.bible-verse.tri .vtext-tri {
display: block;
color: var(--bible-text);
line-height: 1.6;
}
/* Separador entre idiomas dentro del mismo versículo (no antes del primero). */
.bible-verse.tri .vtext-tri + .vtext-tri {
margin-top: 5px;
padding-top: 5px;
border-top: 1px dashed var(--bible-border);
}
/* Etiqueta de idioma al inicio de cada línea. */
.bible-verse.tri .vtext-tri .tri-tag {
display: inline-block;
min-width: 30px;
margin-right: 7px;
padding: 0 5px;
border-radius: 4px;
font-size: calc(10px * var(--bible-fs));
font-weight: 700;
line-height: 1.6;
vertical-align: 1px;
background: rgba(125,125,140,.18);
color: var(--bible-text-muted);
user-select: none;
}
.bible-verse.tri .vtext-tri.is-ka .tri-tag { background: rgba(21,128,61,.18); color: #2f9e57; }
.bible-verse.tri .vtext-tri.is-en .tri-tag { background: rgba(29,78,216,.18); color: #5b8bf0; }
.bible-verse.tri .vtext-tri.is-ru .tri-tag { background: rgba(185,28,28,.18); color: #e06464; }
.bible-verse.tri .vtext-tri.is-he .tri-tag,
.bible-verse.tri .vtext-tri.is-el .tri-tag { background: rgba(180,130,20,.18); color: #c79a3a; }
.bible-verse.tri .vtext-tri.is-en { font-family: ui-serif, Georgia, serif; }
/* Cuarta línea opcional en 'tri': el original (hebreo/griego). */
.bible-verse.tri .vtext-tri.is-he {
font-family: "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
font-size: 1.15em;
direction: rtl;
text-align: right;
}
.bible-verse.tri .vtext-tri.is-he .tri-tag { float: right; margin-right: 0; margin-left: 7px; }
.bible-verse.tri .vtext-tri.is-el {
font-family: "SBL Greek", "Cardo", "Gentium Plus", "Times New Roman", serif;
font-size: 1.05em;
}
/* Diglot: cada bloque-verso contiene KA arriba + EN abajo */
.bible-verse.diglot { flex-direction: column; align-items: stretch; }
.bible-verse.diglot .vtext-secondary {
display: block;
margin-top: 4px;
padding-top: 4px;
border-top: 1px dashed var(--bible-border);
color: var(--bible-text-muted);
font-size: 0.92em;
font-style: italic;
}
.bible-verse.diglot .vtext-secondary.is-en { font-family: ui-serif, Georgia, serif; }
.bible-verse.diglot .vtext-secondary.is-he {
font-family: "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
font-size: 1.15em;
font-style: normal;
text-align: right;
}
.bible-verse.diglot .vtext-secondary.is-el {
font-family: "SBL Greek", "Cardo", "Gentium Plus", "Times New Roman", serif;
font-size: 1.05em;
font-style: normal;
}
/* Monolingüe en idioma original */
.bible-verse .vtext.is-he {
font-family: "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
font-size: 1.2em;
text-align: right;
direction: rtl;
}
.bible-verse .vtext.is-el {
font-family: "SBL Greek", "Cardo", "Gentium Plus", "Times New Roman", serif;
font-size: 1.08em;
}
/* Tarjeta Strong's encima de la concordancia (clic en palabra HE/EL) */
/* ── Ventana emergente: cabecera con la palabra pinchada ── */
.bp-modal-head {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 12px;
padding: 0 0 12px;
margin-bottom: 14px;
border-bottom: 2px solid var(--bible-gold, #c9a84c);
}
.bp-modal-word {
font-size: 30px;
font-weight: 800;
color: var(--bible-dark, #1a1a2e);
line-height: 1.1;
}
.bp-modal-word.is-he { font-family: "SBL Hebrew","Ezra SIL","Times New Roman",serif; font-size: 34px; }
.bp-modal-word.is-el { font-family: "SBL Greek","Cardo","Gentium Plus","Times New Roman",serif; font-size: 32px; }
.bp-modal-translit { font-style: italic; color: #6b7280; font-size: 16px; }
.bp-modal-sid {
margin-left: auto;
align-self: center;
background: var(--bible-gold, #c9a84c);
color: #1a1a2e;
font-size: 12px; font-weight: 700;
padding: 3px 10px; border-radius: 12px;
}
/* ── Secciones del modal (Léxico / Concordancia) ── */
.bp-sec { margin-bottom: 18px; }
.bp-sec:last-child { margin-bottom: 0; }
.bp-sec-title {
display: flex; align-items: center; gap: 8px;
margin: 0 0 10px;
font-size: 17px; font-weight: 700;
color: var(--bible-dark, #1a1a2e);
text-transform: uppercase; letter-spacing: .04em;
}
.bp-sec-count {
background: #e5e7eb; color: #374151;
font-size: 12px; font-weight: 700;
padding: 1px 9px; border-radius: 10px;
}
/* ── Pestañas del panel de resultados (Todo / Strong / ლექსიკონი / სიმფონია) ──
Permiten cambiar de recurso sin volver a pinchar la palabra. */
.bp-tabs {
display: flex; flex-wrap: wrap; gap: 6px;
margin: 0 0 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--bible-border, #e5e7eb);
}
.bp-tab {
background: transparent;
color: var(--bible-dark, #1a1a2e);
border: 1px solid var(--bible-gold, #c9a84c);
border-radius: 999px;
padding: 5px 14px;
font-size: 13px; font-weight: 700;
line-height: 1.2;
font-family: ui-sans-serif, system-ui, sans-serif;
cursor: pointer;
transition: background .12s ease, color .12s ease;
}
.bp-tab:hover { background: rgba(201,168,76,.15); }
.bp-tab.is-active {
background: var(--bible-gold, #c9a84c);
color: #1a1a2e;
border-color: var(--bible-gold, #c9a84c);
}
/* Etiqueta del léxico concreto (Strong / Abbott-Smith) */
.bp-lex-tag {
display: flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 800;
letter-spacing: .06em; text-transform: uppercase;
color: var(--bible-gold, #b8902f);
margin-bottom: 6px;
}
.bp-strongs {
background: linear-gradient(180deg, #fffdf5 0%, #fbf6e7 100%);
border: 1px solid var(--bible-gold, #c9a84c);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
/* Tarjeta Abbott-Smith con el mismo lenguaje visual que Strong */
.bp-as-card {
background: #f8fafc;
border: 1px solid #d8dee9;
border-radius: 10px;
padding: 12px 14px;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.bp-as-def-wrap > summary {
list-style: none; cursor: pointer;
font-size: 12px; font-weight: 700;
color: var(--bible-gold, #b8902f);
margin-bottom: 6px;
}
.bp-as-def-wrap > summary::-webkit-details-marker { display: none; }
/* Indicador del idioma de la entrada Strong's */
.bp-strongs-tl {
background: #15803d;
color: #fff;
font-size: 10px;
font-weight: 700;
padding: 2px 6px;
border-radius: 3px;
letter-spacing: .3px;
}
.bp-strongs-tl-pending {
background: #6b7280;
cursor: help;
}
.bp-strongs-short {
font-size: calc(14px * var(--bible-fs));
line-height: 1.5;
color: var(--bible-text);
margin-bottom: 4px;
}
.bp-strongs-long {
margin-top: 6px;
font-size: calc(13px * var(--bible-fs));
color: var(--bible-text-muted);
}
.bp-strongs-long > summary {
cursor: pointer;
color: var(--bible-gold, #c9a84c);
font-weight: 700;
list-style: none;
}
.bp-strongs-long > summary::-webkit-details-marker { display: none; }
.bp-strongs-long[open] > summary { margin-bottom: 6px; }
.bp-strongs-long > div { line-height: 1.5; }
/* Def. larga mostrada directamente (pestaña ლექსიკონი), sin el desplegable მეტი. */
.bp-strongs-longbody {
font-size: calc(13px * var(--bible-fs));
line-height: 1.5;
color: var(--bible-text-muted);
}
.bp-strongs-deriv {
margin-top: 6px;
padding-top: 6px;
border-top: 1px dashed #d1d5db;
color: #6b7280;
font-style: italic;
}
.bp-strongs-morph {
margin-top: 8px;
font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
font-size: 11px;
color: #9ca3af;
}
.bp-as-tl {
background: #15803d;
color: #fff;
font-size: 10px;
font-weight: 700;
padding: 1px 5px;
border-radius: 3px;
letter-spacing: .3px;
}
.bp-as-tl-pending {
background: #6b7280;
cursor: help;
}
.bp-as-gloss {
color: #1f2937;
font-weight: 600;
font-size: 15px;
margin-bottom: 8px;
}
.bp-as-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: baseline;
margin-bottom: 6px;
font-size: 13px;
}
.bp-as-greek {
font-weight: 600;
color: #111827;
}
.bp-as-translit {
color: #6b7280;
font-style: italic;
}
.bp-as-morph {
font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
font-size: 11px;
color: #9ca3af;
}
.bp-as-def {
line-height: 1.55;
font-size: calc(13.5px * var(--bible-fs));
color: var(--bible-text);
}
.bp-as-def b { color: #111827; }
.bp-as-def i { color: #4b5563; }
/* Tooltip flotante con la transliteración de palabras hebreas/griegas */
.bible-translit-tip {
position: fixed;
z-index: 9999;
background: #1a1a2e;
color: #f8e9b0;
border: 1px solid var(--bible-gold, #c9a84c);
border-radius: 6px;
padding: 7px 13px;
font-size: 15px;
line-height: 1.4;
font-family: ui-sans-serif, system-ui, sans-serif;
font-style: italic;
pointer-events: none;
opacity: 0;
transform: translateY(2px);
transition: opacity .12s ease, transform .12s ease;
box-shadow: 0 4px 14px rgba(0,0,0,.35);
white-space: normal;
max-width: min(420px, calc(100vw - 20px));
overflow-wrap: break-word;
}
.bible-translit-tip.show {
opacity: 1;
transform: translateY(0);
}
/* Etiqueta de referencia dentro del tooltip de comentarios (გამ.19:8): resalta
en dorado de acento, recta y en negrita, para distinguirla del texto bíblico
(que va en itálica clara). Funciona tanto en hover (desktop) como en táctil. */
.bible-translit-tip .bp-tip-ref {
color: var(--bible-gold, #c9a84c);
font-style: normal;
font-weight: 700;
white-space: nowrap;
}
/* En táctil (modo preview), el tooltip debe poder recibir taps en su botón "▸". */
.bible-translit-tip.is-touch {
pointer-events: auto;
display: inline-flex;
align-items: center;
gap: 10px;
}
.bible-translit-tip .btt-more {
background: var(--bible-gold, #c9a84c);
color: #1a1a2e;
border: none;
border-radius: 4px;
width: 26px; height: 26px;
font-size: 16px;
line-height: 1;
font-weight: 900;
cursor: pointer;
padding: 0;
flex: 0 0 auto;
}
.bible-translit-tip .btt-more:hover { filter: brightness(1.1); }
/* ── Mini-menú "¿qué busco?" al pinchar una palabra original ──
Popup flotante anclado a la palabra, mismo look que el tooltip (oscuro+dorado).
Botones: Todo / Strong / Diccionario / Simfonía → abren sólo esa sección. */
.bible-word-menu {
position: fixed;
z-index: 10000;
display: flex;
flex-wrap: wrap;
gap: 6px;
background: #1a1a2e;
border: 1px solid var(--bible-gold, #c9a84c);
border-radius: 8px;
padding: 7px;
box-shadow: 0 6px 18px rgba(0,0,0,.4);
max-width: min(320px, calc(100vw - 20px));
animation: bwm-in .12s ease;
}
@keyframes bwm-in {
from { opacity: 0; transform: translateY(3px); }
to { opacity: 1; transform: translateY(0); }
}
.bible-word-menu .bwm-btn {
background: transparent;
color: #f8e9b0;
border: 1px solid var(--bible-gold, #c9a84c);
border-radius: 5px;
padding: 6px 12px;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
font-family: ui-sans-serif, system-ui, sans-serif;
cursor: pointer;
transition: background .12s ease, color .12s ease;
}
.bible-word-menu .bwm-btn:hover,
.bible-word-menu .bwm-btn:active {
background: var(--bible-gold, #c9a84c);
color: #1a1a2e;
}
/* Subraya con guión bajo punteado las palabras que tienen translit, para que
el usuario sepa que son interactivas. */
.bible-verse .vtext.is-he .w-clickable[data-translit],
.bible-verse .vtext.is-el .w-clickable[data-translit],
.bible-verse .vtext-secondary.is-he .w-clickable[data-translit],
.bible-verse .vtext-secondary.is-el .w-clickable[data-translit],
.bible-verse .vtext-tri.is-he .w-clickable[data-translit],
.bible-verse .vtext-tri.is-el .w-clickable[data-translit] {
border-bottom: 1px dotted rgba(201,168,76,.45);
cursor: help;
}
/* ─── Interlineal de transliteración bajo cada palabra original ────
Por defecto VISIBLE (la mayoría de visitas serán táctil/móvil).
En desktop con hover real se oculta — el tooltip flotante basta.
La palabra original pasa a contenedor vertical: arriba el original,
debajo la transliteración en color secundario, tamaño pequeño. */
.bible-verse .vtext .w-orig,
.bible-verse .vtext-secondary .w-orig,
.bible-verse .vtext-tri .w-orig {
display: inline-flex;
flex-direction: column;
align-items: center;
line-height: 1.05;
margin: 0 2px;
vertical-align: top;
}
.bible-verse .vtext .w-orig .w-tr,
.bible-verse .vtext-secondary .w-orig .w-tr,
.bible-verse .vtext-tri .w-orig .w-tr {
display: block;
font-size: 11px;
font-style: italic;
font-weight: 500;
font-family: ui-sans-serif, system-ui, sans-serif;
color: var(--bible-text-muted, #6b7280);
line-height: 1.1;
margin-top: 1px;
letter-spacing: 0;
/* La translit NO debe heredar el RTL del hebreo: siempre LTR. */
direction: ltr;
unicode-bidi: isolate;
}
/* El subrayado punteado entre original y translit queda raro en este layout;
lo movemos al texto original solamente. */
.bible-verse .vtext.is-he .w-orig[data-translit],
.bible-verse .vtext.is-el .w-orig[data-translit],
.bible-verse .vtext-secondary.is-he .w-orig[data-translit],
.bible-verse .vtext-secondary.is-el .w-orig[data-translit],
.bible-verse .vtext-tri.is-he .w-orig[data-translit],
.bible-verse .vtext-tri.is-el .w-orig[data-translit] {
border-bottom: none;
}
.bible-verse .vtext .w-orig .w-orig-text,
.bible-verse .vtext-secondary .w-orig .w-orig-text,
.bible-verse .vtext-tri .w-orig .w-orig-text {
border-bottom: 1px dotted rgba(201,168,76,.45);
}
/* En desktop con hover real ocultamos el interlineal — el tooltip flotante basta. */
@media (hover: hover) and (pointer: fine) {
.bible-verse .vtext .w-orig,
.bible-verse .vtext-secondary .w-orig,
.bible-verse .vtext-tri .w-orig {
display: inline;
}
.bible-verse .vtext .w-orig .w-tr,
.bible-verse .vtext-secondary .w-orig .w-tr,
.bible-verse .vtext-tri .w-orig .w-tr {
display: none;
}
}
.bible-verses {
background: var(--bible-reader-bg);
border: 1px solid var(--bible-border);
border-radius: 12px;
padding: 28px 32px;
}
/* Leyendo: el texto es un panel con su PROPIO scroll que ocupa el alto restante
bajo el header fijo, sin taparse nunca con él. (Escritorio y móvil.)
El pane de resultados de búsqueda recibe el MISMO tratamiento: así se puede
buscar sin quitar is-reading (que reposiciona el input y rompe el IME). */
.bible-reader.is-reading .bible-verses,
.bible-reader.is-reading #bibleSearchPane {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
margin-bottom: 16px;
/* Colchón al saltar a un versículo dentro del propio panel. */
scroll-padding-top: 16px;
}
.bible-verse {
position: relative;
/* Espacio vertical entre versículos al 50% del anterior y expresado en em,
de modo que escala junto al tamaño de texto (font-size depende de --bible-fs).
Antes: padding 6px + margin 2px (px fijos). Ahora la mitad, en em. */
padding: 0.17em 34px 0.17em 12px;
border-radius: 6px;
margin: 0.055em -8px;
/* Interlineado SIN unidad: escala automáticamente con el tamaño del texto
(A−/A+ vía --bible-fs). Reducido de 1.85 para acercar las líneas. */
line-height: 1.5;
font-size: calc(18px * var(--bible-fs));
transition: background .12s;
/* Colchón al saltar a un versículo dentro del panel de scroll. */
scroll-margin-top: 16px;
}
.bible-verse:hover { background: var(--bible-accent-soft); }
.bible-verse.active { background: var(--bible-accent-soft); box-shadow: inset 3px 0 0 var(--bible-gold); }
.bible-verse.bookmarked { background: var(--bible-bookmark); }
.bible-verse.bookmarked.active { background: #ffe97a; box-shadow: inset 3px 0 0 var(--bible-gold); }
.bible-verse .vnum {
font-size: 11px;
font-weight: 800;
color: var(--bible-gold);
vertical-align: super;
margin-right: 6px;
user-select: none;
}
.bible-verse .vtext { color: var(--bible-text); }
/* Acciones del versículo (📖 librito + 📋 copiar + 🔗 compartir).
El librito se queda EXACTAMENTE donde estaba (top:3px right:4px). Copiar y
compartir se despliegan HACIA ABAJO, en columna, al pasar el ratón — así
no tapan el texto de la primera línea del versículo.
El contenedor es absoluto, anclado a la derecha y apilado en columna: el
librito queda arriba pegado al borde y los demás crecen hacia abajo. */
.bible-verse .vacts {
position: absolute;
top: 3px; right: 4px;
display: flex;
flex-direction: column; /* librito arriba; copiar/compartir bajo él */
/* Fijamos LTR: si el versículo incluye el original (hebreo, dir=rtl), .vacts
heredaría RTL y el apilado se mantiene igual haya o no idioma original. */
direction: ltr;
align-items: center;
gap: 2px;
z-index: 2;
border-radius: 8px;
transition: background .12s, box-shadow .12s;
}
/* Al revelarse (hover sobre el versículo), la columna de iconos crece hacia
abajo. Le damos un fondo tipo píldora para que copiar/compartir se lean
limpios por encima del texto que pudiera quedar detrás. */
.bible-verse:hover .vacts {
background: var(--bible-accent-soft);
border: 1px solid var(--bible-gold);
box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.bible-verse .vmenu-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
border: none;
background: transparent;
border-radius: 6px;
font-size: 18px;
line-height: 1;
cursor: pointer;
opacity: .6;
transition: opacity .12s, transform .12s, background .12s;
}
/* Copiar y compartir: por DEFECTO visibles (necesario en táctil, incl. móviles
con lápiz como el S25 Ultra que reportan hover:hover y no entran en @media
hover:none). Sólo en dispositivos con RATÓN FINO real se ocultan hasta el
hover (ver bloque @media hover:hover + pointer:fine más abajo). */
.bible-verse .vmenu-copy,
.bible-verse .vmenu-share { font-size: 15px; opacity: .85; }
.bible-verse.tools-open .vmenu-btn { opacity: 1; }
.bible-verse .vmenu-btn:hover { background: var(--bible-accent-soft, #fbf6e7); transform: scale(1.12); opacity: 1; }
.bible-verse.tools-open { background: var(--bible-accent-soft); box-shadow: inset 3px 0 0 var(--bible-gold); }
/* El botón hamburguesa siempre visible (también en escritorio, ya que es la única
entrada a las acciones del versículo). Un poco más grande y con caja sutil. */
.bible-verse .vmenu-ham {
opacity: 1;
width: 32px; height: 32px;
font-size: 20px;
color: var(--bible-dark);
background: rgba(0,0,0,.05);
border: 1px solid var(--bible-border);
}
.bible-verse .vmenu-ham:hover {
background: var(--bible-accent-soft, #fbf6e7);
border-color: var(--bible-gold);
}
/* Modo oscuro: color claro y buen contraste (antes casi no se veía). */
body.bible-theme-dark .bible-verse .vmenu-ham {
color: #f2f2f7;
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.25);
}
body.bible-theme-dark .bible-verse .vmenu-ham:hover {
background: rgba(255,255,255,.22);
border-color: var(--bible-gold);
}
/* Menú desplegable del versículo (☰): comentarios / compartir / copiar CON TEXTO.
position:fixed para que se ancle al viewport (el panel de lectura tiene scroll
propio, no el de la ventana). */
.bible-verse-menu {
position: fixed;
z-index: 3020; /* por encima del texto y de la cabecera del lector */
min-width: 200px;
background: var(--bible-reader-bg, #fff);
border: 1px solid var(--bible-border);
border-radius: 12px;
box-shadow: 0 12px 34px rgba(0,0,0,.28);
padding: 6px;
}
.bible-verse-menu button {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 11px 12px;
border: 0;
background: none;
color: var(--bible-text);
font-size: 15px;
text-align: left;
border-radius: 8px;
cursor: pointer;
}
.bible-verse-menu button:hover { background: var(--bible-accent-soft, rgba(0,0,0,.06)); }
.bible-verse-menu .bvm-ico { font-size: 17px; width: 22px; text-align: center; flex: 0 0 auto; }
/* Sólo con ratón fino (escritorio): librito siempre visible, copiar/compartir
ocultos hasta pasar el ratón por el versículo. En táctil/lápiz NO aplica. */
@media (hover: hover) and (pointer: fine) {
.bible-verse .vmenu-copy,
.bible-verse .vmenu-share { opacity: 0; }
.bible-verse:hover .vmenu-btn,
.bible-verse.tools-open .vmenu-btn { opacity: 1; }
.bible-verse:hover .vmenu-copy,
.bible-verse:hover .vmenu-share { opacity: .85; }
}
/* Layout TÁCTIL: usamos (pointer: coarse) en vez de (hover: none) porque los
móviles con lápiz (p.ej. Samsung S25 Ultra con S-Pen) reportan hover:hover y
se quedaban fuera; su puntero PRIMARIO sigue siendo el dedo = coarse. Aquí los
iconos van SIEMPRE visibles, anclados al borde derecho de la última línea. */
@media (pointer: coarse) {
/* En táctil los iconos van SIEMPRE visibles, anclados al BORDE DERECHO del
versículo con position:absolute (igual que en escritorio). Antes se usaba
float:right, pero en versículos de UNA línea el botón (más alto que la
fila) desbordaba hacia la fila siguiente y los botones se apilaban en
escalera hacia la izquierda. El padding-right reserva el hueco del botón
en em para que escale con A−/A+. */
.bible-verse { padding-right: 2.6em; }
.bible-verse .vacts {
position: absolute;
top: 0.05em;
right: 4px;
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
z-index: 2;
white-space: nowrap; /* los iconos no se parten entre líneas */
}
.bible-verse .vmenu-btn,
.bible-verse .vmenu-copy,
.bible-verse .vmenu-share {
width: 1.6em; height: 1.6em; /* caja compacta, ligada al tamaño del texto */
font-size: 0.95em; /* icono ≈ tamaño del texto; escala con A−/A+ */
opacity: 1;
background: transparent;
flex: 0 0 auto;
}
/* El hamburguesa conserva su caja y contraste también en táctil. */
.bible-verse .vmenu-ham {
width: 1.9em; height: 1.9em;
font-size: 1.15em;
}
}
/* Ventana emergente de herramientas del versículo (velo + caja centrada). */
.vtools-modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,.45);
z-index: 3010; /* por encima de la navbar global (z-index 1000) */
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.vtools-modal .bible-verse-tools {
margin: 0;
/* Ancho: aprovecha la pantalla (92%) con un tope generoso para no estirar
demasiado la línea de lectura de los comentarios. */
width: min(920px, 92vw);
max-height: 90vh;
overflow-y: auto;
background: var(--bible-reader-bg);
border-radius: 14px;
box-shadow: 0 20px 60px rgba(0,0,0,.35);
padding: 0 14px 14px;
}
/* Cabecera en 3 columnas: navegación CENTRADA, controles de vista a la derecha
y cerrar al final. La columna izquierda vacía equilibra el centro real. */
.vtools-modal-head {
position: sticky;
top: 0;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 12px 0 10px;
margin-bottom: 8px;
background: var(--bible-reader-bg);
border-bottom: 2px solid var(--bible-gold);
z-index: 1;
}
.vtools-modal-head > .vtools-nav { grid-column: 2; justify-self: center; }
/* Controles de vista + cerrar comparten la columna derecha en una sola fila. */
.vtools-modal-head > .vtools-right {
grid-column: 3;
justify-self: end;
display: flex;
align-items: center;
gap: 6px;
}
.vtools-ref { font-weight: 800; color: var(--bible-gold); font-size: 16px; }
/* Navegación entre versículos (‹ ref ›) dentro de la cabecera del modal. */
.vtools-nav { display: flex; align-items: center; gap: 8px; }
.vtools-nav .vnav-btn {
width: 28px; height: 28px;
border: 1px solid var(--bible-border);
background: var(--bible-reader-bg);
border-radius: 8px;
cursor: pointer;
font-size: 17px;
line-height: 1;
font-weight: 700;
color: var(--bible-gold);
display: flex; align-items: center; justify-content: center;
padding: 0;
}
.vtools-nav .vnav-btn:hover:not(:disabled) { background: var(--bible-accent-soft); }
.vtools-nav .vnav-btn:disabled { opacity: .3; cursor: default; color: var(--bible-text-muted, #6b7280); }
/* Texto del versículo, FIJO bajo la cabecera: se lee junto con el comentario.
Va pegado (sticky) al scroll del modal, justo debajo de .vtools-modal-head. */
.vtools-verse {
position: sticky;
/* El JS mide la cabecera real y fija --vtools-head-h; 54px es el respaldo. */
top: var(--vtools-head-h, 54px);
z-index: 1;
background: var(--bible-accent-soft);
border-left: 3px solid var(--bible-gold);
border-radius: 0 8px 8px 0;
padding: 9px 12px;
margin: 0 0 10px;
/* Un punto más grande y en color propio: el versículo es la referencia
constante mientras se lee el comentario, así que debe destacar sobre él. */
font-size: calc(16px * var(--bible-fs, 1));
line-height: 1.65;
color: var(--bible-verse-hl, #7c5e10);
font-weight: 500;
max-height: 30vh;
overflow-y: auto;
}
.vtools-verse .vtv-num {
font-weight: 800;
color: var(--bible-gold);
margin-right: 4px;
}
/* Dentro del modal el versículo es solo lectura: sin cursor de palabra clicable. */
.vtools-verse .w-clickable { cursor: default; }
/* Cada idioma (diglot) en su propia línea, como en el lector. */
.vtools-verse .vtext, .vtools-verse .vtext-tri { display: block; }
.vtools-verse .vtext-tri + .vtext-tri { margin-top: 3px; }
.vtools-verse .tri-tag {
font-size: 10px;
font-weight: 700;
color: var(--bible-text-muted, #6b7280);
margin-right: 5px;
text-transform: uppercase;
}
body.bible-theme-dark .vtools-verse { background: var(--bible-soft); }
/* Controles de vista del modal: tamaño de texto (A− / A+) y tema (🌙 / ☀).
Empujados a la derecha, justo antes del botón de cerrar. */
.vtools-view-tools {
display: flex;
gap: 4px;
}
.vtools-view-tools .vvt-btn {
min-width: 30px; height: 30px;
padding: 0 6px;
border: 1px solid var(--bible-border);
background: var(--bible-reader-bg);
border-radius: 8px;
cursor: pointer;
font-size: 13px;
font-weight: 700;
color: var(--bible-text-muted, #6b7280);
display: flex; align-items: center; justify-content: center;
}
.vtools-view-tools .vvt-btn:hover { background: var(--bible-accent-soft); }
.vtools-close {
width: 32px; height: 32px;
border: 1px solid var(--bible-border);
background: var(--bible-reader-bg);
border-radius: 8px;
cursor: pointer;
font-size: 18px;
color: var(--bible-text-muted, #6b7280);
display: flex; align-items: center; justify-content: center;
}
.vtools-close:hover { background: var(--bible-accent-soft); }
/* Caja de herramientas del versículo (contenido) */
.bible-verse-tools {
margin: 4px -8px 10px;
padding: 8px 10px 10px;
background: var(--bible-soft);
border: 1px solid var(--bible-border);
border-radius: 8px;
}
.bible-verse-tools .vtools-quick {
display: flex;
justify-content: flex-end;
gap: 4px;
margin-bottom: 6px;
}
.bible-verse-tools .vtools-quick button {
width: 28px; height: 28px;
border: 1px solid var(--bible-border);
background: var(--bible-reader-bg);
border-radius: 6px;
cursor: pointer;
font-size: 13px;
color: var(--bible-text-muted, #6b7280);
}
.bible-verse-tools .vtools-quick button:hover { background: var(--bible-accent-soft); }
.bible-verse-tools .vtools-quick .vq-bm.bm-on { color: var(--bible-gold); border-color: var(--bible-gold); }
.bible-verse-tools .vtools-tabs {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 8px;
border-bottom: 1px solid var(--bible-border);
padding-bottom: 8px;
}
.bible-verse-tools .vtools-tabs button {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border: 1px solid var(--bible-border);
background: var(--bible-reader-bg);
border-radius: 6px;
font-size: 13px;
cursor: pointer;
color: var(--bible-text);
}
.bible-verse-tools .vtools-tabs button.active {
background: var(--bible-dark);
color: var(--bible-gold);
border-color: var(--bible-dark);
font-weight: 700;
}
.bible-verse-tools .vtools-tabs .badge {
font-size: 10px;
font-weight: 700;
background: var(--bible-gold);
color: var(--bible-dark);
border-radius: 9px;
padding: 0 5px;
line-height: 15px;
}
.bible-verse-tools .vtools-section { display: none; }
.bible-verse-tools .vtools-section.active { display: block; }
/* Top toolbar (search + tools) */
.bible-toolbar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
}
.bible-toolbar input[type="search"] {
flex: 1;
min-width: 0;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid var(--bible-border);
font-size: 14px;
background: var(--bible-reader-bg);
color: var(--bible-text);
}
.bible-toolbar input[type="search"]:focus {
outline: none;
border-color: var(--bible-gold);
box-shadow: 0 0 0 3px rgba(201,168,76,.15);
}
.bible-toolbar .toolbar-btn {
flex: 0 0 auto;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 10px;
border: 1px solid var(--bible-border);
background: var(--bible-reader-bg);
cursor: pointer;
font-size: 20px;
line-height: 1;
color: var(--bible-text-muted, #9ca3af);
}
.bible-toolbar .toolbar-btn:hover { background: var(--bible-soft); color: var(--bible-text); }
/* Barra de búsqueda: vive DENTRO de la fila de herramientas de la cabecera (a la
izquierda; los idiomas van a la derecha). Sin caja/sticky propios: es solo el
contenedor flex del input + botón limpiar. */
.bible-searchbar {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
}
/* Búsqueda de la pantalla inicial: centrada y con ancho cómodo bajo el título. */
.bible-searchbar-home {
max-width: 560px;
margin: 14px auto 4px;
}
/* ─── Study panel (right) ──────────────────────────── */
.bible-panel {
position: sticky;
top: var(--nav-h);
align-self: start;
height: calc(100vh - var(--nav-h));
transition: top .2s ease, height .2s ease;
background: var(--bible-panel-bg);
border-left: 1px solid var(--bible-border);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Ventana emergente (modal centrado) — al pinchar una palabra. */
.bible-panel.as-modal {
position: fixed;
top: 50%;
left: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
width: min(560px, calc(100vw - 32px));
height: auto;
max-height: min(80vh, 760px);
border: 1px solid var(--bible-border);
border-radius: 14px;
box-shadow: 0 20px 60px rgba(0,0,0,.35);
z-index: 3010; /* por encima de la navbar global (z-index 1000) */
overflow: hidden;
}
.bible-panel-head {
background: linear-gradient(135deg, var(--bible-dark) 0%, var(--bible-darker) 100%);
color: white;
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid var(--bible-gold);
}
.bible-panel-head .ref { color: var(--bible-gold); font-weight: 800; }
.bible-panel-head .actions { display: flex; gap: 6px; }
.bible-panel-head button {
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.2);
color: white;
width: 32px; height: 32px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
display: flex; align-items: center; justify-content: center;
}
.bible-panel-head button:hover { background: rgba(255,255,255,.18); }
.bible-panel-head button.bm-on { background: var(--bible-gold); color: var(--bible-dark); border-color: var(--bible-gold); }
.bible-panel-text {
padding: 14px 18px;
background: var(--bible-accent-soft);
border-bottom: 1px solid var(--bible-border);
font-size: calc(14px * var(--bible-fs, 1));
line-height: 1.6;
color: var(--bible-text);
max-height: 140px;
overflow-y: auto;
}
.bible-panel-tabs {
display: flex;
gap: 2px;
background: var(--bible-soft);
border-bottom: 1px solid var(--bible-border);
padding: 0 6px;
overflow-x: auto;
white-space: nowrap;
}
.bible-panel-tabs button {
background: transparent;
border: none;
padding: 12px 10px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
color: var(--bible-text-muted);
border-bottom: 2px solid transparent;
flex-shrink: 0;
}
.bible-panel-tabs button.active {
color: var(--bible-dark);
border-bottom-color: var(--bible-gold);
}
.bible-panel-tabs .badge {
display: inline-block;
background: var(--bible-gold);
color: var(--bible-dark);
font-size: 10px;
font-weight: 800;
padding: 1px 6px;
border-radius: 9px;
margin-left: 4px;
}
.bible-panel-body {
flex: 1;
overflow-y: auto;
padding: 16px 18px 24px;
font-size: calc(14px * var(--bible-fs, 1));
line-height: 1.6;
}
.bible-panel-section { display: none; }
.bible-panel-section.active { display: block; }
.bp-card {
background: var(--bible-soft);
border: 1px solid var(--bible-border);
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 10px;
}
.bp-card .source {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--bible-text-muted);
margin-bottom: 6px;
font-weight: 700;
}
.bp-card .body { font-size: calc(14px * var(--bible-fs, 1)); line-height: 1.55; }
/* Acordeón de comentarios: cada fuente plegable independiente */
details.bp-commentary, details.bp-dictionary, details.bp-devotional, details.bp-encyclopedia { padding: 0; overflow: hidden; }
details.bp-commentary > summary, details.bp-dictionary > summary, details.bp-devotional > summary, details.bp-encyclopedia > summary {
list-style: none;
cursor: pointer;
padding: 10px 14px;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
user-select: none;
}
details.bp-commentary > summary::-webkit-details-marker, details.bp-dictionary > summary::-webkit-details-marker, details.bp-devotional > summary::-webkit-details-marker, details.bp-encyclopedia > summary::-webkit-details-marker { display: none; }
details.bp-commentary > summary:hover, details.bp-dictionary > summary:hover, details.bp-devotional > summary:hover, details.bp-encyclopedia > summary:hover { background: rgba(0,0,0,.03); }
details.bp-commentary > summary .caret, details.bp-dictionary > summary .caret, details.bp-devotional > summary .caret, details.bp-encyclopedia > summary .caret {
display: inline-block;
transition: transform .18s ease;
color: var(--bible-text-muted);
font-size: 12px;
}
details.bp-commentary[open] > summary .caret, details.bp-dictionary[open] > summary .caret, details.bp-devotional[open] > summary .caret, details.bp-encyclopedia[open] > summary .caret { transform: rotate(90deg); }
details.bp-commentary > summary .author, details.bp-dictionary > summary .author, details.bp-devotional > summary .author, details.bp-encyclopedia > summary .author {
color: var(--bible-dark);
text-transform: none;
letter-spacing: 0;
font-size: 13px;
font-weight: 700;
}
details.bp-commentary > summary .src, details.bp-dictionary > summary .src, details.bp-devotional > summary .src, details.bp-encyclopedia > summary .src {
color: var(--bible-text-muted);
text-transform: none;
letter-spacing: 0;
font-size: 11px;
font-weight: 400;
font-style: italic;
margin-left: 4px;
}
/* Chip de idioma del comentario (sólo visible cuando coexisten KA y EN). */
details.bp-commentary > summary .lang-chip {
flex-shrink: 0;
border-radius: 999px;
padding: 1px 7px;
font-size: 10px;
font-weight: 800;
letter-spacing: .3px;
text-transform: none;
line-height: 1.5;
}
details.bp-commentary > summary .lang-chip.lang-ka {
background: var(--bible-gold);
color: var(--bible-dark);
}
details.bp-commentary > summary .lang-chip.lang-en {
background: var(--bible-soft);
color: var(--bible-text-muted);
border: 1px solid var(--bible-border);
}
/* Acento sutil en el borde izquierdo según idioma para reforzar la distinción. */
details.bp-commentary.lang-en { opacity: .92; }
/* ── შეჯამება (síntesis IA): tarjeta destacada, siempre la primera ── */
details.bp-commentary.bp-sj {
border-left: 3px solid var(--bible-gold);
background: var(--bible-accent-soft);
opacity: 1;
}
details.bp-commentary.bp-sj > summary .author {
color: var(--bible-gold);
font-size: 14px;
}
details.bp-commentary.bp-sj > summary .sj-chip {
flex-shrink: 0;
border-radius: 999px;
padding: 1px 7px;
font-size: 9px;
font-weight: 800;
letter-spacing: .5px;
line-height: 1.6;
background: var(--bible-dark);
color: var(--bible-gold);
border: 1px solid var(--bible-gold);
cursor: help;
}
body.bible-theme-dark details.bp-commentary.bp-sj {
background: var(--bible-soft);
border-left-color: var(--bible-gold);
}
details.bp-commentary > summary .scope, details.bp-dictionary > summary .scope, details.bp-devotional > summary .scope, details.bp-encyclopedia > summary .scope {
margin-left: auto;
background: var(--bible-accent-soft);
color: var(--bible-dark);
border: 1px solid var(--bible-border);
border-radius: 999px;
padding: 2px 9px;
font-size: 11px;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
white-space: nowrap;
flex-shrink: 0;
}
/* i18n inline dentro del chip: por defecto se muestra EN, KA oculto;
se invierte cuando html[lang="ka"] (regla global). Forzamos inline
para que no rompa el flex del summary. */
.bp-i18n { display: inline; }
.bp-i18n[data-lang-ka] { display: none; }
html[lang="ka"] .bp-i18n[data-lang-en] { display: none !important; }
html[lang="ka"] .bp-i18n[data-lang-ka] { display: inline !important; }
details.bp-commentary > .body, details.bp-dictionary > .body, details.bp-devotional > .body, details.bp-encyclopedia > .body {
padding: 0 14px 12px 30px;
border-top: 1px solid var(--bible-border);
padding-top: 10px;
}
/* Referencia bíblica inline dentro del cuerpo del comentario (რომ.8:19). */
.bp-card .body a.bp-ref {
color: var(--bible-gold);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
border-bottom: 1px dotted var(--bible-gold);
cursor: pointer;
}
.bp-card .body a.bp-ref:hover { filter: brightness(1.08); border-bottom-style: solid; }
.bp-card .body a.bp-ref.has-tip { cursor: help; }
/* Variante del botón "abrir pasaje" dentro del tooltip táctil. */
.bible-translit-tip a.btt-more {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.bp-card .word {
font-weight: 800;
color: var(--bible-dark);
margin-bottom: 4px;
font-size: 15px;
}
.bp-card .word .pos {
font-size: 11px;
color: var(--bible-text-muted);
margin-left: 6px;
font-weight: 400;
font-style: italic;
}
.bp-empty {
color: var(--bible-text-muted);
font-style: italic;
text-align: center;
padding: 22px 10px;
font-size: 13px;
}
.bp-xref {
display: block;
position: relative;
padding: 8px 32px 8px 10px;
background: var(--bible-reader-bg);
border: 1px solid var(--bible-border);
border-radius: 6px;
margin-bottom: 6px;
color: var(--bible-text);
font-size: calc(13px * var(--bible-fs));
cursor: pointer;
}
.bp-xref:hover { background: var(--bible-accent-soft); border-color: var(--bible-gold); }
.bp-xref .xref-head {
display: flex;
align-items: baseline;
gap: 6px;
white-space: nowrap;
overflow: hidden;
}
.bp-xref .xref-ref { font-weight: 800; color: var(--bible-dark); flex: 0 0 auto; }
.bp-xref .xref-text {
color: var(--bible-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bp-xref.expanded .xref-head { white-space: normal; }
.bp-xref.expanded .xref-text { white-space: normal; overflow: visible; }
.bp-xref .xref-note { display: block; font-size: 12px; color: var(--bible-text-muted); margin-top: 2px; }
.bp-xref .xref-open {
position: absolute;
top: 6px; right: 6px;
width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
border-radius: 5px;
color: var(--bible-gold);
text-decoration: none;
font-weight: 800;
font-size: 14px;
}
.bp-xref .xref-open:hover { background: var(--bible-gold); color: var(--bible-dark); }
textarea.bible-note-input {
width: 100%;
min-height: 120px;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid var(--bible-border);
font-family: inherit;
font-size: calc(14px * var(--bible-fs));
resize: vertical;
box-sizing: border-box;
background: var(--bible-reader-bg);
color: var(--bible-text);
}
textarea.bible-note-input:focus { outline: none; border-color: var(--bible-gold); }
.bible-note-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.bible-note-actions button {
padding: 7px 14px;
border-radius: 6px;
border: none;
background: var(--bible-dark);
color: var(--bible-gold);
font-weight: 700;
cursor: pointer;
}
.bible-note-actions button:hover { background: var(--bible-darker); }
/* Concordance / search results */
.bible-results { display: flex; flex-direction: column; gap: 8px; }
.bible-result {
display: block;
background: var(--bible-reader-bg);
border: 1px solid var(--bible-border);
border-radius: 8px;
padding: 10px 12px;
text-decoration: none;
color: var(--bible-text);
}
.bible-result { cursor: pointer; }
.bible-result:hover { border-color: var(--bible-gold); background: var(--bible-accent-soft); }
/* Menú de acciones de un resultado (abrir / copiar / compartir). Popover flotante. */
.bible-result-menu {
position: absolute;
z-index: 4000;
min-width: 190px;
background: var(--bible-reader-bg, #fff);
border: 1px solid var(--bible-border);
border-radius: 12px;
box-shadow: 0 12px 34px rgba(0,0,0,.28);
padding: 6px;
overflow: hidden;
}
.bible-result-menu .brm-head {
font-weight: 800;
font-size: 12px;
color: var(--bible-text-muted, #9ca3af);
padding: 6px 10px 8px;
border-bottom: 1px solid var(--bible-border);
margin-bottom: 4px;
}
.bible-result-menu button {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 10px;
border: 0;
background: none;
color: var(--bible-text);
font-size: 14px;
text-align: left;
border-radius: 8px;
cursor: pointer;
}
.bible-result-menu button:hover { background: var(--bible-accent-soft, rgba(0,0,0,.06)); }
.bible-result-menu .brm-ico { font-size: 16px; width: 20px; text-align: center; }
.bible-result .ref { font-weight: 800; color: var(--bible-dark); display: block; margin-bottom: 4px; font-size: 13px; }
.bible-result .text { font-size: calc(14px * var(--bible-fs)); line-height: 1.5; display: block; }
.bible-result mark { background: var(--bible-gold); color: var(--bible-dark); padding: 0 2px; border-radius: 3px; }
/* Texto original (HE/EL) en resultados de concordancia/búsqueda */
.bible-result .text.is-he {
font-family: "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
font-size: 1.15em;
text-align: right;
direction: rtl;
}
.bible-result .text.is-el {
font-family: "SBL Greek", "Cardo", "Gentium Plus", "Times New Roman", serif;
font-size: 1.05em;
}
/* Traducción KA/EN debajo del original, atenuada para distinguir */
.bible-result-translation {
display: block;
margin-top: 6px;
padding-top: 6px;
border-top: 1px dashed #e5e7eb;
font-size: 13px;
line-height: 1.45;
color: #4b5563;
font-style: italic;
}
.bible-results-info {
background: var(--bible-soft);
border-radius: 8px;
padding: 8px 12px;
font-size: 13px;
color: var(--bible-text-muted);
margin-bottom: 10px;
text-align: center;
}
/* Word in verse (concordance click target) */
.bible-verse .vtext .w-clickable { cursor: pointer; border-radius: 3px; padding: 0 1px; }
.bible-verse .vtext .w-clickable:hover { background: rgba(201,168,76,.25); }
.bible-verse .vtext .w-dict {
border-bottom: 1px dotted var(--bible-gold);
}
/* Mobile */
@media (max-width: 1100px) {
.bible-shell, .bible-shell.with-panel { grid-template-columns: 1fr; }
.bible-sidebar {
position: fixed;
top: var(--nav-h); left: 0; bottom: 0;
/* Altura EXPLÍCITA (no 'auto' vía top+bottom): así el flex column tiene
una altura resuelta que repartir y el área de libros puede acotarse y
scrollear en vez de desbordar. dvh sigue la barra dinámica del móvil. */
height: calc(100vh - var(--nav-h));
height: calc(100dvh - var(--nav-h));
max-height: calc(100dvh - var(--nav-h));
width: 280px;
/* Por encima del overlay (z-index 3000) para recibir toques y scroll. */
z-index: 3100;
transform: translateX(-100%);
transition: transform .2s ease;
box-shadow: 4px 0 16px rgba(0,0,0,.1);
/* El drawer maneja su propio scroll vertical; no propagar al fondo. */
touch-action: pan-y;
pointer-events: auto;
/* Flex column: la lista de libros scrollea; la búsqueda queda fija abajo.
En móvil el propio aside NO scrollea (lo hace .bible-sidebar-scroll),
así la barra de búsqueda no se solapa ni empuja los libros fuera. */
display: flex;
flex-direction: column;
overflow: hidden;
padding-bottom: 0;
}
/* En desktop es display:contents; en móvil recupera caja propia y scrollea. */
.bible-sidebar-scroll {
display: block;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.bible-sidebar.open { transform: translateX(0); }
/* En móvil el velo va por DEBAJO del drawer (z-index) y, cuando el drawer de
libros está abierto, sólo cubre el área a la DERECHA del drawer — así es
físicamente imposible que intercepte los toques/scroll sobre la lista. */
.bible-overlay { z-index: 3050; }
.bible-overlay.show.for-sidebar { left: 280px; }
.bible-panel {
position: fixed;
top: var(--nav-h); right: 0; bottom: 0;
width: min(420px, 100%);
z-index: 3100;
transform: translateX(100%);
transition: transform .2s ease, top .2s ease, height .2s ease;
box-shadow: -4px 0 16px rgba(0,0,0,.18);
height: calc(100vh - var(--nav-h));
}
.bible-panel.open { transform: translateX(0); }
/* En móvil el modal sigue centrado (no panel lateral). */
.bible-panel.as-modal {
position: fixed;
top: 50%; left: 50%; right: auto; bottom: auto;
transform: translate(-50%, -50%);
width: calc(100vw - 16px);
max-height: 86vh;
height: auto;
}
/* Menos padding lateral en móvil → más ancho útil para el contenido. */
.bible-panel.as-modal .bible-panel-body { padding: 12px 12px 20px; }
.vtools-modal { padding: 8px; }
.vtools-modal .vtools-modal-head { flex-wrap: wrap; gap: 6px 4px; }
.vtools-modal .bible-verse-tools { padding: 0 10px 12px; }
/* En pantalla pequeña el versículo fijo no debe comerse el modal. */
.vtools-verse { max-height: 24vh; padding: 8px 10px; }
.bp-strongs, .bp-as-card { padding: 10px 11px; }
/* Móvil: minimizar el padding lateral para ganar ancho de lectura.
Antes había doble margen (reader 18px + verses 16px ≈ 34px/lado). */
.bible-reader { padding: 14px 6px 60px; }
/* En modo lectura el contenedor es de alto fijo con scroll interno: sin
padding-bottom (el panel de versículos ya scrollea). */
.bible-reader.is-reading { padding: 14px 6px 0; }
.bible-verses { padding: 16px 10px; }
.bible-verse { font-size: calc(17px * var(--bible-fs)); }
/* En modo lectura el header es el bloque fijo superior del flex (no sticky). */
.bible-reader-head {
padding: 6px 10px 8px;
gap: 4px;
border-radius: 10px;
margin-bottom: 12px;
}
/* Compacta: la sub-línea (abrev. + nº mukh) se oculta en móvil — el título basta. */
.bible-reader-head .sub { display: none; }
/* La cabecera y sus controles deben caber sin scroll horizontal. */
.bible-reader-head h1 { font-size: 17px; }
/* Móvil: nombre del libro abreviado (p.ej. "1 კორ"). El capítulo va en el ▾. */
.brh-book-btn .brh-full { display: none; }
.brh-book-btn .brh-abbr { display: inline; }
.brh-book-btn { max-width: 45vw; }
.bible-reader-head .brh-title-row { gap: 6px; }
/* Menú de capítulos: 5 columnas, celdas algo menores para pantalla estrecha. */
.brh-chap-menu { grid-template-columns: repeat(5, 40px); justify-content: center; }
.brh-chap-menu button { width: 40px; height: 40px; font-size: 14px; }
.bible-reader-head .brh-tools-row {
gap: 4px;
}
/* Botones de la cabecera del lector más pequeños en móvil. */
.bible-reader-head button.chnav {
padding: 4px 8px;
font-size: 12px;
}
.bible-reader-head button.chnav-arrow {
padding: 2px 8px;
min-width: 30px;
font-size: 16px;
}
/* En móvil solo la flecha (sin texto) para que la fila del título quepa.
!important para ganar a la regla global html[lang="ka"] span[data-lang-ka]. */
.bible-reader-head button.chnav-arrow .chnav-txt {
display: none !important;
}
.bible-reader-head .blt-btn {
padding: 4px 8px;
font-size: 12px;
}
/* La navbar global se vuelve auto-ocultable: la pasamos a transform en lugar
de fixed-position, así no salta de golpe. */
body.bible-body .navbar {
transition: transform .25s ease;
will-change: transform;
}
body.bible-body.bible-nav-hidden .navbar {
transform: translateY(calc(-100% - 4px));
}
}
.bible-overlay {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,.45);
z-index: 3000; /* por encima de la navbar global (z-index 1000) */
}
.bible-overlay.show { display: block; }
/* Link "Select a book / აირჩიე წიგნი" del estado vacío — abre el sidebar. */
.bible-pick-book-link {
color: var(--bible-gold);
text-decoration: none;
border-bottom: 1px dashed currentColor;
cursor: pointer;
padding: 4px 8px;
display: inline-block;
}
.bible-pick-book-link:hover { border-bottom-style: solid; }
/* Los spans interiores no deben interceptar el click — que pase siempre al . */
.bible-pick-book-link span { pointer-events: none; }
/* Parpadeo del primer libro al pinchar "Select a book" en desktop. */
@keyframes bibleFlash {
0%, 100% { background: transparent; }
50% { background: rgba(201, 168, 76, 0.35); }
}
.bible-book-list li button.bible-flash {
animation: bibleFlash .4s ease 3;
}
/* En mobile, el título del libro actúa como disparador del selector de libros. */
@media (max-width: 1100px) {
.bible-reader-head h1 {
cursor: pointer;
}
.bible-reader-head h1::after {
content: ' ▾';
font-size: 0.7em;
opacity: 0.7;
}
}
/* ── Pestaña გრამატიკა: morfología decodificada (bible_morph.js) ─────────── */
/* La forma superficial pinchada (la flexión concreta), grande y en su escritura. */
.bp-gram-surface {
font-size: 24px;
line-height: 1.3;
margin-bottom: 10px;
color: var(--bible-dark, #1a1a2e);
}
.bp-gram-seg { margin-bottom: 12px; }
/* Etiqueta de rol del segmento hebreo (prefijo / raíz / sufijo). */
.bp-gram-role {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: #9ca3af;
margin-bottom: 4px;
}
.bp-gram-lang { margin-bottom: 10px; }
.bp-gram-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.bp-gram-chip {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
border: 1px solid var(--bible-border, #e5e7eb);
background: #f9fafb;
border-radius: 6px;
padding: 4px 9px;
font-size: 13px;
line-height: 1.3;
color: var(--bible-dark, #1a1a2e);
font-family: inherit;
text-align: left;
cursor: default;
}
/* Categoría pequeña dentro del chip ("დრო", "ბრუნვა"…). */
.bp-gram-chip .bp-gram-cat {
font-size: 10px;
color: #9ca3af;
}
/* Chip de la categoría gramatical principal (POS): destacado en dorado. */
.bp-gram-chip-pos {
background: var(--bible-gold, #c9a84c);
border-color: var(--bible-gold, #c9a84c);
color: #1a1a2e;
font-weight: 700;
justify-content: center;
}
/* Chips con explicación didáctica: borde punteado + pulsables. */
button.bp-gram-chip.has-tip {
border-style: dashed;
cursor: pointer;
}
button.bp-gram-chip.has-tip:hover { border-color: var(--bible-gold, #c9a84c); }
.bp-gram-chip-lang { background: #eef2ff; }
/* Caja donde se muestra el tip del chip pulsado. */
.bp-gram-tipbox {
margin-top: 10px;
padding: 8px 12px;
font-size: 13px;
line-height: 1.5;
background: #f9fafb;
border-left: 3px solid var(--bible-gold, #c9a84c);
border-radius: 4px;
color: var(--bible-dark, #1a1a2e);
}
/* Código morfológico crudo (OSHB/MorphGNT), pequeño, para referencia. */
.bp-gram-raw {
margin-top: 10px;
font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
font-size: 11px;
color: #9ca3af;
}
/* Tema oscuro. */
body.bible-theme-dark .bp-gram-surface { color: var(--bible-text); }
body.bible-theme-dark .bp-gram-chip {
background: transparent;
color: var(--bible-text);
border-color: var(--bible-border);
}
body.bible-theme-dark .bp-gram-chip-pos {
background: var(--bible-gold, #c9a84c);
color: #1a1a2e;
}
body.bible-theme-dark .bp-gram-chip-lang { background: rgba(255,255,255,.06); }
body.bible-theme-dark .bp-gram-tipbox {
background: rgba(255,255,255,.05);
color: var(--bible-text);
}
/* ── Vista სიტყვა-სიტყვით: estudio profundo del versículo (interlineal) ──── */
.bp-deep {
display: flex;
flex-direction: column;
gap: 6px;
}
/* Fila = una palabra del original: palabra | translit+Strong | glosa+gramática. */
.bp-deep-row {
display: grid;
grid-template-columns: minmax(90px, auto) minmax(80px, auto) 1fr;
gap: 2px 14px;
align-items: start;
width: 100%;
text-align: left;
background: transparent;
border: 1px solid var(--bible-border, #e5e7eb);
border-radius: 8px;
padding: 8px 12px;
cursor: pointer;
font-family: inherit;
color: inherit;
}
.bp-deep-row:hover,
.bp-deep-row:active {
border-color: var(--bible-gold, #c9a84c);
background: #fdf9ee;
}
.bp-deep-orig {
font-size: 20px;
line-height: 1.35;
color: var(--bible-dark, #1a1a2e);
}
.bp-deep-mid {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 12px;
color: #6b7280;
padding-top: 4px;
}
.bp-deep-sid {
font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
font-size: 10px;
color: #9ca3af;
}
.bp-deep-main {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
padding-top: 3px;
}
.bp-deep-gloss { font-size: 14px; line-height: 1.4; }
/* Resumen morfológico (decodificado): pequeño y apagado bajo la glosa. */
.bp-deep-morph {
font-size: 11px;
line-height: 1.4;
color: #9ca3af;
}
/* Móvil estrecho: glosa+gramática pasan a línea completa bajo la palabra. */
@media (max-width: 480px) {
.bp-deep-row { grid-template-columns: minmax(90px, auto) 1fr; }
.bp-deep-main { grid-column: 1 / -1; padding-top: 0; }
}
/* Tema oscuro. */
body.bible-theme-dark .bp-deep-orig { color: var(--bible-text); }
body.bible-theme-dark .bp-deep-row:hover,
body.bible-theme-dark .bp-deep-row:active {
background: rgba(255,255,255,.05);
}
/* Glosa contextual de la ocurrencia (Fase 4) en la vista სიტყვა-სიტყვით. */
.bp-deep-ctx {
font-size: 14px;
font-weight: 700;
line-height: 1.4;
color: var(--bible-dark, #1a1a2e);
}
body.bible-theme-dark .bp-deep-ctx { color: var(--bible-text); }
/* Glosa de lema relegada a secundaria cuando hay contextual. */
.bp-deep-gloss-sec {
font-size: 12px;
color: #6b7280;
}
/* Bloque FIJO de la vista სიტყვა-სიტყვით: cabecera (‹ ref ›) + versículo.
position:sticky respecto al scroll de .bible-panel-body → al bajar por la
lista de palabras el versículo queda siempre visible arriba. Fondo opaco
(el del panel) para que las filas no se transparenten al pasar por debajo;
el hueco hasta la lista va como padding (opaco), no como margin. */
.bp-deep-sticky {
position: sticky;
top: 0;
z-index: 5;
background: var(--bible-panel-bg);
padding-bottom: 10px;
}
.bp-deep-sticky .bp-deep-versetext { margin-bottom: 0; }
/* Cabecera de la vista სიტყვა-სიტყვით: flechas ‹ › + referencia centrada. */
.bp-deep-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.bp-deep-nav {
flex: 0 0 auto;
min-width: 38px;
padding: 4px 12px;
font-size: 20px;
line-height: 1.2;
font-weight: 700;
background: transparent;
color: var(--bible-dark, #1a1a2e);
border: 1px solid var(--bible-border, #e5e7eb);
border-radius: 8px;
cursor: pointer;
}
.bp-deep-nav:hover:not(:disabled) {
border-color: var(--bible-gold, #c9a84c);
background: #fdf9ee;
}
.bp-deep-nav:disabled { opacity: .35; cursor: default; }
body.bible-theme-dark .bp-deep-nav { color: var(--bible-text); }
body.bible-theme-dark .bp-deep-nav:hover:not(:disabled) { background: rgba(255,255,255,.06); }
/* Versículo completo sobre el desglose palabra a palabra. */
.bp-deep-versetext {
margin: 0 0 14px;
padding: 10px 14px;
font-size: 15px;
line-height: 1.65;
background: #f9fafb;
border-left: 3px solid var(--bible-gold, #c9a84c);
border-radius: 4px;
color: var(--bible-dark, #1a1a2e);
}
body.bible-theme-dark .bp-deep-versetext {
background: rgba(255,255,255,.05);
color: var(--bible-text);
}