/* ============================================================================
   ESTILOS DEL LECTOR BÍBLICO — la identidad visual de la app, llevada a la web
   ============================================================================

   Todo el color vive en variables CSS (las líneas --sb-*). Cada "ambiente" de
   lectura (claro / sereno / nocturno) solo cambia esas variables; el resto de
   las reglas ni se enteran. Así es imposible que un tema quede a medias.

   Paleta de la marca (la misma de la app Flutter):
     crema  #FAF6EC  — el papel
     tinta  #2A2216  — el texto
     oro    #9A7B3F  — los números de versículo, acentos, lo sagrado discreto
   ========================================================================== */

.sb-biblia {
	/* --- Ambiente CLARO (el de fábrica) ---
	   Sigue la PALETA DE LA MARCA del tema, que es personalizable en
	   «Personalizar → Colores de la marca»: el papel toma el fondo (crema), el
	   texto la tinta y el acento el oro elegidos ahí. Los demás ambientes
	   (sereno/pergamino/gris/nocturno) son temas de lectura fijos, calibrados
	   para su propia legibilidad, y no cambian con el Personalizador. */
	--sb-bg: var(--sb-crema, #faf6ec);              /* fondo tipo papel crema */
	--sb-ink: var(--sb-tinta, #2a2216);             /* texto principal */
	--sb-ink-suave: var(--sb-tinta-suave, #75684f); /* texto secundario */
	/* --sb-oro NO se fija aquí a propósito: se hereda del tema (el oro de la
	   marca, personalizable). Los ambientes que necesitan otro oro lo redefinen. */
	--sb-card: #ffffff;      /* tarjetas y paneles */
	--sb-borde: #e6dcc3;     /* líneas finas */
	--sb-hover: #f1e9d4;     /* fondo al pasar el mouse */

	--sb-font-scale: 1;      /* lo ajusta el botón A− / A+ desde JavaScript */

	font-family: 'Inter', system-ui, sans-serif;
	background: var(--sb-bg);
	color: var(--sb-ink);
	border-radius: 14px;
	min-height: 70vh;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--sb-borde);
}

/* --- Ambiente SERENO: sepia cálido, para leer largo sin fatiga --- */
.sb-biblia[data-theme='sereno'] {
	--sb-bg: #f3ead6;
	--sb-card: #faf3e3;
	--sb-hover: #eadfc4;
	--sb-borde: #ddcfae;
}

/* --- Ambiente PERGAMINO: papel viejo, como las escrituras antiguas ---
   Fondo de pergamino envejecido con tinta marrón oscura. El contraste se
   mantiene alto (tinta #3a2c15 sobre #e7d8b6) para que se lea con comodidad. */
.sb-biblia[data-theme='pergamino'] {
	--sb-bg: #e7d8b6;
	--sb-ink: #3a2c15;
	--sb-ink-suave: #6a5632;
	--sb-oro: #8a6a2c;
	--sb-card: #f0e4c8;
	--sb-borde: #cbb684;
	--sb-hover: #ddcaa0;
}

/* --- Ambiente GRIS: neutro y sereno, para quien prefiere menos calidez --- */
.sb-biblia[data-theme='gris'] {
	--sb-bg: #eceae6;
	--sb-ink: #2b2b2e;
	--sb-ink-suave: #62626a;
	--sb-oro: #8a7b52;
	--sb-card: #f7f6f3;
	--sb-borde: #d9d7d1;
	--sb-hover: #e3e1db;
}

/* --- Ambiente NOCTURNO: crema sobre oscuro, oro intacto --- */
.sb-biblia[data-theme='nocturno'] {
	--sb-bg: #191512;
	--sb-ink: #ede4d3;
	--sb-ink-suave: #a2937b;
	--sb-oro: #c9a55e;
	--sb-card: #221d18;
	--sb-borde: #3a3229;
	--sb-hover: #2b251f;
}

/* --- Los botones de tema en el panel de apariencia, con su miniatura de
   color para reconocerlos de un vistazo. --- */
.sb-lang-nota { font-size: .86rem; color: var(--sb-ink-suave); margin: 0 0 12px; line-height: 1.45; }
.sb-aa-label-solo { display: block; margin-bottom: 8px; }
.sb-aa-temas { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-tema-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 13px 8px 9px;
	border: 1px solid var(--sb-borde);
	border-radius: 999px;
	background: var(--sb-card);
	color: var(--sb-ink);
	cursor: pointer;
	font-size: .92rem;
}
/* El puntito de muestra: un círculo con el color de fondo de cada tema. */
.sb-tema-chip::before {
	content: '';
	width: 16px; height: 16px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, .15);
	flex: none;
}
.sb-tema-claro::before     { background: #faf6ec; }
.sb-tema-sereno::before    { background: #f3ead6; }
.sb-tema-pergamino::before { background: #e7d8b6; }
.sb-tema-gris::before      { background: #eceae6; }
.sb-tema-nocturno::before  { background: #191512; }
.sb-tema-chip.activo {
	border-color: var(--sb-oro);
	box-shadow: 0 0 0 2px var(--sb-oro) inset;
	font-weight: 600;
}

/* ============================== BARRA SUPERIOR ============================ */

.sb-topbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	/* Barra superior en VINO (el color del logotipo): identidad de marca fija,
	   igual que la cabecera y el pie del sitio. Se mantiene en los cinco
	   ambientes de lectura, porque es "cromo" de la app, no la zona de lectura
	   (que sí cambia con el ambiente elegido, debajo). */
	background: var(--sb-vino, #5a1220);
	color: #fdf6ec;
	border-bottom: 1px solid var(--sb-vino-claro, #871b30);
}

.sb-place {
	font-family: 'Literata', Georgia, serif;
	font-size: 1.15rem;
	font-weight: 600;
	flex: 1;                  /* empuja lo demás a la derecha */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;  /* "Lamentaciones 3" cabe aunque sea largo */
}

.sb-topbar-right { display: flex; gap: 8px; }

/* Botón base: sobrio, bordes suaves, el oro solo al interactuar. */
.sb-btn {
	font: inherit;
	color: var(--sb-ink);
	background: transparent;
	border: 1px solid var(--sb-borde);
	border-radius: 10px;
	padding: 6px 12px;
	cursor: pointer;
}
.sb-btn:hover { background: var(--sb-hover); }
/* Botones que llevan un icono SVG en vez de texto (lupa, globo). */
.sb-btn-ico { display: inline-flex; align-items: center; justify-content: center; padding: 7px 10px; }
.sb-btn-ico svg { display: block; }
.sb-btn:disabled { opacity: 0.4; cursor: default; }

.sb-chip {
	color: var(--sb-oro);
	font-weight: 700;
	letter-spacing: 0.4px;
	border-color: var(--sb-oro);
}

/* --- Los botones y el título DENTRO de la barra vino: en claro, para que
   resalten sobre el fondo oscuro del vino en cualquier ambiente de lectura. --- */
.sb-topbar .sb-place { color: #fff; }
.sb-topbar .sb-btn {
	color: #f3e6d6;
	background: transparent;
	border-color: rgba(255, 255, 255, .30);
}
.sb-topbar .sb-btn:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.sb-topbar .sb-btn:disabled { opacity: .45; }
/* El chip de la versión (RVR, DHH…) en oro claro, que luce sobre el vino. */
.sb-topbar .sb-chip {
	color: var(--sb-oro-claro, #c9a55e);
	border-color: var(--sb-oro-claro, #c9a55e);
}

/* El botón ☰ del índice solo hace falta en pantallas chicas. */
.sb-btn-menu { display: none; }

/* ============================== CUERPO ==================================== */

.sb-body { display: flex; min-height: 60vh; }

/* --- Índice lateral de libros --- */
.sb-sidebar {
	width: 250px;
	flex-shrink: 0;
	border-inline-end: 1px solid var(--sb-borde);
	padding: 14px 10px 30px;
	overflow-y: auto;
	max-height: 80vh;
	position: sticky;
	top: 0;
}

.sb-side-title {
	font-size: 0.72rem;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--sb-oro);
	margin: 16px 10px 6px;
}

.sb-side-book {
	display: block;
	width: 100%;
	text-align: start;
	font: inherit;
	font-size: 0.92rem;
	color: var(--sb-ink);
	background: none;
	border: 0;
	border-radius: 8px;
	padding: 7px 10px;
	cursor: pointer;
}
.sb-side-book:hover { background: var(--sb-hover); }
.sb-side-book.activo { background: var(--sb-hover); color: var(--sb-oro); font-weight: 600; }
.sb-deutero { color: var(--sb-oro); margin-inline-start: 5px; }

/* --- Columna del capítulo --- */
.sb-main {
	flex: 1;
	max-width: 46rem;          /* renglones cómodos: ni cortos ni kilométricos */
	margin: 0 auto;
	padding: 26px clamp(16px, 4vw, 44px) 60px;
}

.sb-chapter-head { margin-bottom: 6px; }

.sb-book-name {
	font-size: 0.72rem;
	letter-spacing: 2px;
	color: var(--sb-ink-suave);
}

/* El número de capítulo grande en serif: la firma tipográfica de la app. */
.sb-chapter-num {
	font-family: 'Literata', Georgia, serif;
	font-size: 3rem;
	line-height: 1.1;
	color: var(--sb-oro);
	border-bottom: 1px solid var(--sb-borde);
	margin-bottom: 14px;
}

/* Rejilla para saltar a cualquier capítulo del libro. */
.sb-chapter-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 26px;
}
.sb-cell {
	font: inherit;
	font-size: 0.85rem;
	min-width: 38px;
	padding: 6px 0;
	text-align: center;
	color: var(--sb-ink);
	background: var(--sb-card);
	border: 1px solid var(--sb-borde);
	border-radius: 8px;
	cursor: pointer;
}
.sb-cell:hover { background: var(--sb-hover); }
.sb-cell.activo { background: var(--sb-oro); border-color: var(--sb-oro); color: #fff; }

/* --- La Escritura --- */
.sb-verses {
	font-family: 'Literata', Georgia, serif;
	/* El tamaño respeta el A− / A+ multiplicando la escala elegida. */
	font-size: calc(1.13rem * var(--sb-font-scale));
	line-height: 1.75;
}

.sb-verse { margin: 0 0 0.55em; cursor: pointer; border-radius: 8px; padding: 2px 6px; }
.sb-verse:hover { background: var(--sb-hover); }
.sb-verse.elegido { background: var(--sb-hover); }

/* El versículo al que llegaste desde una búsqueda parpadea en oro suave. */
.sb-verse.destacado { background: color-mix(in srgb, var(--sb-oro) 22%, transparent); }

.sb-vnum {
	color: var(--sb-oro);
	font-size: 0.62em;         /* pequeño y discreto, como en la app */
	font-weight: 600;
	font-family: 'Inter', sans-serif;
}

/* Acciones del versículo tocado (copiar / compartir). */
.sb-verse-actions { display: inline-flex; gap: 6px; margin-inline-start: 8px; }
.sb-mini { font-size: 0.72rem; padding: 3px 9px; background: var(--sb-card); }

/* Navegación anterior / siguiente. */
.sb-chapnav { display: flex; justify-content: space-between; gap: 10px; margin-top: 34px; }
.sb-nav { flex: 1; max-width: 48%; }

/* ============================== PANELES =================================== */

/* El fondo oscurecido que cubre todo; el clic fuera cierra el panel. */
.sb-panel-wrap {
	position: absolute;
	inset: 0;
	background: rgba(20, 15, 5, 0.45);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 40px 14px;
	z-index: 20;
}

.sb-panel {
	background: var(--sb-card);
	color: var(--sb-ink);
	border-radius: 16px;
	width: min(560px, 100%);
	max-height: 75vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
}

.sb-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid var(--sb-borde);
}
.sb-panel-head h3 { margin: 0; font-family: 'Literata', Georgia, serif; }

.sb-panel-body { padding: 12px 18px 22px; overflow-y: auto; }

.sb-panel-lang {
	color: var(--sb-oro);
	font-size: 0.75rem;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	margin: 16px 0 6px;
}

.sb-version-row {
	display: block;
	width: 100%;
	text-align: start;
	font: inherit;
	color: var(--sb-ink);
	background: none;
	border: 1px solid transparent;
	border-radius: 10px;
	padding: 9px 12px;
	cursor: pointer;
}
.sb-version-row:hover { background: var(--sb-hover); }
.sb-version-row.activo { border-color: var(--sb-oro); background: var(--sb-hover); }
.sb-version-name { display: block; font-weight: 600; }
.sb-version-meta { display: block; font-size: 0.78rem; color: var(--sb-ink-suave); }

/* Búsqueda */
.sb-search-input {
	width: 100%;
	font: inherit;
	padding: 10px 14px;
	border: 1px solid var(--sb-borde);
	border-radius: 10px;
	background: var(--sb-bg);
	color: var(--sb-ink);
	margin-bottom: 10px;
}
.sb-search-count { color: var(--sb-ink-suave); font-size: 0.85rem; }
.sb-hit {
	display: block;
	width: 100%;
	text-align: start;
	font: inherit;
	color: var(--sb-ink);
	background: none;
	border: 0;
	border-bottom: 1px solid var(--sb-borde);
	padding: 10px 4px;
	cursor: pointer;
}
.sb-hit:hover { background: var(--sb-hover); }
.sb-hit-ref { display: block; color: var(--sb-oro); font-size: 0.8rem; font-weight: 600; }

/* El versículo de origen, arriba del panel de pasajes relacionados. */
.sb-rel-origen {
	font-family: 'Literata', Georgia, serif;
	color: var(--sb-tinta, #2a2216);
	font-size: 1rem;
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--sb-borde);
}
/* En el panel de relacionados, la referencia va en grande (es el enlace). */
.sb-panel .sb-hit .sb-hit-ref { font-size: 1rem; }
.sb-hit-text { font-family: 'Literata', Georgia, serif; font-size: 0.95rem; }
.sb-hit-text mark { background: color-mix(in srgb, var(--sb-oro) 30%, transparent); color: inherit; }

/* Apariencia */
.sb-aa-row { display: flex; align-items: center; gap: 10px; margin: 14px 0; flex-wrap: wrap; }
.sb-aa-label { flex: 1; }
.sb-theme-btn.activo { border-color: var(--sb-oro); color: var(--sb-oro); font-weight: 600; }

/* ============================== VARIOS ==================================== */

.sb-loading, .sb-error { padding: 60px 20px; text-align: center; color: var(--sb-ink-suave); }
.sb-error .sb-btn { margin-top: 12px; }

.sb-toast {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--sb-ink);
	color: var(--sb-bg);
	padding: 9px 18px;
	border-radius: 999px;
	font-size: 0.85rem;
	z-index: 30;
	animation: sb-toast-in 0.2s ease-out;
}
@keyframes sb-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ============================== RESPONSIVE ================================= */
/* Por ANCHO de ventana, no por dispositivo: media pantalla de tablet también
   merece el diseño compacto. */
@media (max-width: 900px) {
	.sb-btn-menu { display: inline-block; }

	/* El índice pasa a ser un cajón que se desliza desde el borde. */
	.sb-sidebar {
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		background: var(--sb-card);
		z-index: 10;
		transform: translateX(-105%);
		transition: transform 0.22s ease-out;
		max-height: none;
		box-shadow: 8px 0 30px rgba(0, 0, 0, 0.15);
	}
	.sb-sidebar.abierto { transform: none; }
}