/* =============================================================================
   Logos Biblia · estilos de la aplicación (sobre Bootstrap 5.3)
   ============================================================================= */

:root,
[data-bs-theme="light"] {
    --lb-fondo: #f4f6fb;
    --lb-tarjeta: #ffffff;
    --lb-borde: #e6e9f2;
    --lb-texto: #111827;
    --lb-suave: #6b7280;
    --lb-azul: #2563eb;
    --lb-azul-claro: #eaf1ff;
    --lb-violeta: #7c3aed;
    --lb-lateral: #ffffff;
    --lb-sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .05);
    --lb-jesus: #b91c1c;
    --lb-seleccion: #dbe7ff;

    --bs-body-bg: var(--lb-fondo);
    --bs-body-color: var(--lb-texto);
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-border-color: var(--lb-borde);
    --bs-link-color: #2563eb;
    --bs-link-color-rgb: 37, 99, 235;
}

/* Modo oscuro "Carbón cálido": gris cálido casi negro, texto crema y acentos apagados
   (contraste moderado y sin tinte azul, más descansado para leer de noche). */
[data-bs-theme="dark"] {
    --lb-fondo: #1c1b19;
    --lb-tarjeta: #242320;
    --lb-borde: #34322d;
    --lb-texto: #e4ded3;
    --lb-suave: #a39e93;
    --lb-azul: #7fa7e0;
    --lb-azul-claro: #2c2f35;
    --lb-violeta: #b4a3d8;
    --lb-lateral: #201f1c;
    --lb-sombra: 0 1px 2px rgba(0, 0, 0, .25);
    --lb-jesus: #e0a39a;
    --lb-seleccion: #33394a;

    --bs-body-bg: var(--lb-fondo);
    --bs-body-color: var(--lb-texto);
    --bs-emphasis-color: #f3eee4;
    --bs-secondary-color: rgba(228, 222, 211, .7);
    --bs-secondary-bg: #2b2a26;
    --bs-tertiary-bg: #262521;
    --bs-primary: #7fa7e0;
    --bs-primary-rgb: 127, 167, 224;
    --bs-border-color: var(--lb-borde);
    --bs-link-color: #8fb3e6;
    --bs-link-color-rgb: 143, 179, 230;
    --bs-link-hover-color: #a9c5ee;
}

/* Tamaño y letra del texto bíblico (se cambian desde las preferencias) */
:root {
    --lb-tamano: 18px;
    --lb-interlineado: 1.7;
    --lb-fuente-lectura: 'Inter', system-ui, sans-serif;
}
.fuente-serif { --lb-fuente-lectura: 'Literata', Georgia, serif; }

body { font-size: .95rem; -webkit-font-smoothing: antialiased; }

.btn-primary {
    --bs-btn-bg: #2563eb; --bs-btn-border-color: #2563eb;
    --bs-btn-hover-bg: #1d4ed8; --bs-btn-hover-border-color: #1d4ed8;
    --bs-btn-active-bg: #1e40af; --bs-btn-active-border-color: #1e40af;
    --bs-btn-disabled-bg: #93b4f5; --bs-btn-disabled-border-color: #93b4f5;
}
.btn { border-radius: 10px; font-weight: 500; }
.form-control, .form-select { border-radius: 10px; border-color: var(--lb-borde); }
.form-control:focus, .form-select:focus { border-color: #93b4f5; box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15); }
.modal-content { border-radius: 16px; border: 1px solid var(--lb-borde); }
.dropdown-menu { border-radius: 12px; border-color: var(--lb-borde); box-shadow: var(--lb-sombra); }
.text-suave { color: var(--lb-suave) !important; }

/* ---------------------------------------------------------------------------
   Estructura: barra lateral + contenido
   --------------------------------------------------------------------------- */

.app { display: flex; min-height: 100vh; }

.lateral {
    width: 268px; flex-shrink: 0;
    background: var(--lb-lateral);
    border-right: 1px solid var(--lb-borde);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
    overflow-y: auto;
}
.lateral .marca { display: flex; align-items: center; gap: 10px; padding: 18px 20px 14px; text-decoration: none; }
.marca img { width: 46px; height: 46px; }
.marca-texto { line-height: .95; font-weight: 800; font-size: 1.45rem; letter-spacing: -.5px; color: #0f172a; }
.marca-texto span { display: block; background: linear-gradient(90deg, #1d9bf0, #4f46e5 60%, #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-bs-theme="dark"] .marca-texto { color: #f3eee4; }

.menu { list-style: none; margin: 0; padding: 6px 12px; }
.menu-titulo { font-size: .72rem; font-weight: 600; letter-spacing: .08em; color: var(--lb-suave); padding: 18px 12px 6px; text-transform: uppercase; }
.menu a {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; margin-bottom: 2px;
    border-radius: 10px; color: var(--lb-texto); text-decoration: none; font-weight: 500; font-size: .93rem;
    position: relative; white-space: nowrap;
}
.menu a i { font-size: 1.15rem; width: 22px; text-align: center; color: var(--lb-suave); }
.menu a:hover { background: var(--lb-azul-claro); }
.menu a.activo { background: var(--lb-azul-claro); color: var(--lb-azul); }
.menu a.activo i { color: var(--lb-azul); }
.menu a.activo::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--lb-azul); }
.menu a .pronto { margin-left: auto; font-size: .68rem; font-weight: 600; color: var(--lb-suave); background: var(--bs-tertiary-bg); border-radius: 6px; padding: 1px 6px; }
.menu a.deshabilitado { color: var(--lb-suave); }

.promo-lateral {
    margin: 18px 16px 18px; padding: 18px; border-radius: 16px;
    background: linear-gradient(160deg, #e0ecff 0%, #efe7ff 100%);
    color: #1e1b4b;
}
[data-bs-theme="dark"] .promo-lateral { background: linear-gradient(160deg, #2a2d33 0%, #2f2a35 100%); color: #e4ded3; }
[data-bs-theme="dark"] .promo-lateral .dispositivos { color: #9fb6d8; }
.promo-lateral h6 { font-weight: 800; font-size: 1.05rem; line-height: 1.15; margin-bottom: 6px; }
.promo-lateral p { font-size: .8rem; margin-bottom: 12px; opacity: .85; }
.promo-lateral .dispositivos { font-size: 1.8rem; color: #4f46e5; display: flex; gap: 8px; margin-bottom: 12px; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Barra superior */
.superior {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 28px;
    position: sticky; top: 0; z-index: 1020;
    background: color-mix(in srgb, var(--lb-fondo) 88%, transparent);
    backdrop-filter: blur(8px);
}
.buscador { position: relative; flex: 1; max-width: 680px; }
.buscador i.bi-search { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--lb-suave); }
.buscador input { height: 46px; padding-left: 44px; padding-right: 60px; border-radius: 12px; background: var(--lb-tarjeta); box-shadow: var(--lb-sombra); }
.buscador kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: var(--bs-tertiary-bg); color: var(--lb-suave); border: 1px solid var(--lb-borde); font-size: .72rem; }
.boton-redondo {
    width: 44px; height: 44px; border-radius: 12px; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--lb-tarjeta); color: var(--lb-texto); box-shadow: var(--lb-sombra); font-size: 1.1rem; font-weight: 600;
}
@media (hover: hover) { .boton-redondo:hover { background: var(--lb-azul-claro); color: var(--lb-azul); } }
.usuario-boton { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--lb-texto); font-weight: 600; padding: 4px 8px; border-radius: 12px; }
.usuario-boton:hover { background: var(--lb-azul-claro); }
.avatar {
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1d9bf0, #4f46e5 55%, #7c3aed); color: #fff; font-weight: 700;
}

.vista { padding: 8px 28px 32px; flex: 1; }

/* Encabezado de página */
.encabezado { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.encabezado-icono {
    width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--lb-azul-claro); color: var(--lb-azul); font-size: 1.7rem;
}
.encabezado h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.5px; margin: 0; }
.encabezado p { margin: 2px 0 0; color: var(--lb-suave); }
.encabezado .acciones { margin-left: auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* Interruptor Lectura | Estudio paralelo */
.interruptor { display: inline-flex; background: var(--lb-azul-claro); border-radius: 12px; padding: 4px; }
.interruptor a {
    padding: 9px 22px; border-radius: 9px; text-decoration: none; font-weight: 600; color: var(--lb-azul);
    display: inline-flex; align-items: center; gap: 8px;
}
.interruptor a.activo { background: var(--lb-azul); color: #fff; box-shadow: 0 4px 12px rgba(37, 99, 235, .35); }

.grupo-vistas { display: inline-flex; background: var(--lb-tarjeta); border-radius: 12px; box-shadow: var(--lb-sombra); padding: 4px; }
.grupo-vistas button { border: 0; background: none; width: 42px; height: 38px; border-radius: 9px; color: var(--lb-suave); font-size: 1.15rem; }
.grupo-vistas button.activo { background: var(--lb-azul-claro); color: var(--lb-azul); }

/* Tarjetas */
.tarjeta { background: var(--lb-tarjeta); border-radius: 16px; box-shadow: var(--lb-sombra); border: 1px solid var(--lb-borde); }
.tarjeta-cuerpo { padding: 18px 20px; }
.tarjeta-titulo { font-weight: 700; font-size: 1rem; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.tarjeta-titulo a { margin-left: auto; font-size: .8rem; font-weight: 600; text-decoration: none; }

/* ---------------------------------------------------------------------------
   Texto bíblico
   --------------------------------------------------------------------------- */

.texto-biblico { font-family: var(--lb-fuente-lectura); font-size: var(--lb-tamano); line-height: var(--lb-interlineado); }
.capitulo-titulo { font-size: 2rem; font-weight: 800; letter-spacing: -.8px; margin: 0; font-family: 'Inter', sans-serif; }
.capitulo-sub { color: var(--lb-suave); font-weight: 600; margin-bottom: 14px; font-family: 'Inter', sans-serif; }

.versiculo {
    display: flex; gap: 12px; padding: 6px 10px; margin: 0 -10px 4px;
    border-radius: 12px; cursor: pointer; transition: background .15s;
}
.versiculo:hover { background: color-mix(in srgb, var(--lb-azul-claro) 55%, transparent); }
.versiculo .num {
    flex-shrink: 0; width: 26px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: .78em;
    color: var(--lb-azul); padding-top: .32em;
}
.sin-numeros .versiculo .num { display: none; }
.versiculo .txt { flex: 1; white-space: pre-line; }
.versiculo .jesus { color: var(--lb-jesus); }
.sin-rojo .versiculo .jesus { color: inherit; }
.versiculo.seleccionado { background: var(--lb-seleccion); box-shadow: inset 3px 0 0 var(--lb-azul); }
.versiculo.parpadeo { animation: parpadeo 1.6s ease-out; }
@keyframes parpadeo { 0%, 40% { background: #fde68a; } 100% { background: transparent; } }
.versiculo .icono-nota { color: var(--lb-violeta); font-size: .8em; margin-left: 6px; }

.destacado-amarillo { background: rgba(253, 224, 71, .38); }
.destacado-verde    { background: rgba(134, 239, 172, .40); }
.destacado-azul     { background: rgba(147, 197, 253, .40); }
.destacado-rosa     { background: rgba(249, 168, 212, .40); }
.destacado-violeta  { background: rgba(196, 181, 253, .45); }
[data-bs-theme="dark"] .destacado-amarillo { background: rgba(214, 189, 102, .20); }
[data-bs-theme="dark"] .destacado-verde    { background: rgba(132, 184, 140, .20); }
[data-bs-theme="dark"] .destacado-azul     { background: rgba(127, 167, 224, .20); }
[data-bs-theme="dark"] .destacado-rosa     { background: rgba(214, 150, 176, .20); }
[data-bs-theme="dark"] .destacado-violeta  { background: rgba(170, 150, 214, .22); }

.color-punto { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--lb-borde); cursor: pointer; display: inline-block; }
.color-amarillo { background: #fde047; } .color-verde { background: #86efac; } .color-azul { background: #93c5fd; }
.color-rosa { background: #f9a8d4; } .color-violeta { background: #c4b5fd; }

/* Barra de acciones de la selección */
.barra-seleccion {
    position: sticky; bottom: 12px; z-index: 5;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--lb-tarjeta); border: 1px solid var(--lb-borde); border-radius: 14px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .15); padding: 10px 14px; margin-top: 12px;
}
.barra-seleccion .etiqueta { font-weight: 700; margin-right: 6px; }
.barra-seleccion .separador { width: 1px; height: 24px; background: var(--lb-borde); }

/* Selectores de libro y capítulo */
.selectores { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.selectores .form-select { width: auto; font-size: .88rem; padding-top: .45rem; padding-bottom: .45rem; }
.selectores .libro { min-width: 140px; }
.boton-icono { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--lb-borde); background: var(--lb-tarjeta); color: var(--lb-texto); display: inline-flex; align-items: center; justify-content: center; }
@media (hover: hover) { .boton-icono:hover { background: var(--lb-azul-claro); color: var(--lb-azul); } }
.boton-icono:disabled { opacity: .4; }
.boton-plano { border: 0; background: none; color: var(--lb-suave); width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
/* El efecto de pasar el mouse, solo con mouse: en pantallas táctiles queda pegado después de tocar. */
@media (hover: hover) { .boton-plano:hover { background: var(--lb-azul-claro); color: var(--lb-azul); } }
.boton-plano:active, .boton-icono:active, .boton-redondo:active { background: var(--lb-azul-claro); color: var(--lb-azul); }
.boton-plano.activo { color: var(--lb-azul); }

/* ---------------------------------------------------------------------------
   Lector (Leer Biblia)
   --------------------------------------------------------------------------- */

.lectura { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.lector { padding: 18px 26px 24px; }
.lector .cabecera { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--lb-borde); margin-bottom: 20px; }
.lector .contenido { max-width: 760px; margin: 0 auto; }
.navegacion-capitulo { display: flex; justify-content: space-between; margin-top: 24px; }
.panel-lateral { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 16px; }

/* ---------------------------------------------------------------------------
   Estudio paralelo
   --------------------------------------------------------------------------- */

.paralelo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.columnas { display: grid; gap: 16px; grid-template-columns: repeat(var(--n, 3), minmax(230px, 1fr)); overflow-x: auto; padding-bottom: 6px; }
.columna { display: flex; flex-direction: column; height: calc(100vh - 210px); min-height: 520px; overflow: hidden; }
.columna .cab { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; }
.numero-columna { width: 34px; height: 34px; border-radius: 10px; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.columna .cab .ref { font-weight: 700; line-height: 1.15; }
.columna .cab small { color: var(--lb-suave); font-size: .75rem; }
.columna .cab .herr { margin-left: auto; display: flex; }
.columna .selectores { padding: 0 10px 10px 14px; border-bottom: 1px solid var(--lb-borde); flex-wrap: nowrap; gap: 5px; }
.columna .selectores .form-select { font-size: .8rem; padding: .35rem 1.3rem .35rem .5rem; background-position: right .35rem center; background-size: 12px 10px; }
.columna .selectores .libro { min-width: 88px; flex: 1; }
.columna .selectores .chico { width: 50px; flex-shrink: 0; }
.columna .selectores .boton-plano { width: 26px; flex-shrink: 0; }
.columna .cuerpo { flex: 1; overflow-y: auto; padding: 16px 18px; position: relative; }
.columna .capitulo-titulo { font-size: 1.6rem; }
.columna .texto-biblico { font-size: calc(var(--lb-tamano) - 2px); }
.columna .pie { display: flex; justify-content: space-around; border-top: 1px solid var(--lb-borde); padding: 8px 6px; }
.versiculo.foco { background: var(--color-suave); box-shadow: inset 3px 0 0 var(--color); }
/* Versículos marcados seguidos: un solo bloque */
.versiculo.foco:has(+ .versiculo.foco) { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.versiculo.foco + .versiculo.foco { border-top-left-radius: 0; border-top-right-radius: 0; }
.columna-vacia { border: 2px dashed var(--lb-borde); border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--lb-suave); min-height: 300px; }

.lista-refs { list-style: none; margin: 0; padding: 0; }
.lista-refs li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--lb-borde); }
.lista-refs li:last-child { border-bottom: 0; }
.lista-refs .icono { color: var(--lb-azul); }
.lista-refs .agregar { margin-left: auto; }
.lista-refs a { color: var(--lb-texto); text-decoration: none; font-weight: 500; }

.item-nota { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--lb-borde); }
.item-nota:last-child { border-bottom: 0; }
.item-nota .marcador { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.item-nota .ref { font-weight: 700; font-size: .88rem; }
.item-nota .txt { font-size: .82rem; color: var(--lb-suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-nota .fecha { font-size: .75rem; color: var(--lb-suave); }

.promo-derecha {
    border-radius: 16px; padding: 22px; color: #fff; min-height: 150px;
    background:
        radial-gradient(circle at 78% 38%, rgba(255, 214, 140, .95) 0, rgba(255, 170, 90, .55) 12%, transparent 30%),
        linear-gradient(180deg, #1e3a8a 0%, #6d28d9 45%, #f97316 100%);
    position: relative; overflow: hidden;
}
.promo-derecha::after {
    content: ''; position: absolute; left: -10%; right: -10%; bottom: -30px; height: 90px;
    background: #1e1b4b; border-radius: 50% 50% 0 0 / 100% 100% 0 0; opacity: .85;
}
.promo-derecha h6 { font-weight: 800; font-size: 1.15rem; position: relative; z-index: 1; }
.promo-derecha p { font-size: .82rem; position: relative; z-index: 1; margin: 0; opacity: .9; }

/* ---------------------------------------------------------------------------
   Inicio
   --------------------------------------------------------------------------- */

.versiculo-dia {
    border-radius: 18px; padding: 26px 28px; color: #fff; position: relative; overflow: hidden; min-height: 220px;
    background:
        radial-gradient(circle at 80% 30%, rgba(255, 220, 150, .9) 0, rgba(255, 170, 90, .35) 14%, transparent 34%),
        linear-gradient(160deg, #1e3a8a 0%, #4338ca 40%, #7c3aed 75%, #f59e0b 130%);
}
.versiculo-dia .etiqueta { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; opacity: .85; }
.versiculo-dia blockquote { font-family: 'Literata', Georgia, serif; font-size: 1.45rem; line-height: 1.45; margin: 14px 0; }
.acceso {
    display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; text-decoration: none; color: var(--lb-texto);
    background: var(--lb-tarjeta); border: 1px solid var(--lb-borde); box-shadow: var(--lb-sombra); height: 100%;
}
.acceso:hover { border-color: #93b4f5; color: var(--lb-texto); }
.acceso .icono { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.acceso strong { display: block; }
.acceso small { color: var(--lb-suave); }

.tono-azul { background: #eaf1ff; color: #2563eb; }
.tono-violeta { background: #f1eaff; color: #7c3aed; }
.tono-rosa { background: #ffe8ef; color: #e11d48; }
.tono-verde { background: #e3f8ee; color: #059669; }
.tono-ambar { background: #fff4dc; color: #d97706; }
[data-bs-theme="dark"] .tono-azul { background: #2c3139; color: #9fb6d8; }
[data-bs-theme="dark"] .tono-violeta { background: #322e3a; color: #bcaed8; }
[data-bs-theme="dark"] .tono-rosa { background: #3a2c2e; color: #dca8ae; }
[data-bs-theme="dark"] .tono-verde { background: #2b3530; color: #9cc7aa; }
[data-bs-theme="dark"] .tono-ambar { background: #3a3326; color: #dcbd7c; }

/* ---------------------------------------------------------------------------
   Búsqueda, listas y otros
   --------------------------------------------------------------------------- */

.resultado { padding: 14px 0; border-bottom: 1px solid var(--lb-borde); cursor: pointer; }
.resultado:hover .ref { text-decoration: underline; }
.resultado .ref { font-weight: 700; color: var(--lb-azul); }
.resultado mark { background: #fde68a; padding: 0 2px; border-radius: 3px; }
[data-bs-theme="dark"] .resultado mark { background: #5c4a22; color: #f3eee4; }

.vacio { text-align: center; color: var(--lb-suave); padding: 40px 20px; }
.vacio i { font-size: 2.6rem; display: block; margin-bottom: 10px; opacity: .6; }

.cargando { display: flex; justify-content: center; padding: 40px; }

.aviso-flotante { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2000; }

/* ---------------------------------------------------------------------------
   Pantallas medianas y celulares
   --------------------------------------------------------------------------- */

.solo-movil { display: none !important; }

@media (max-width: 1399.98px) {
    .lectura { grid-template-columns: minmax(0, 1fr) 300px; }
    .paralelo { grid-template-columns: minmax(0, 1fr); }
    .paralelo .panel-lateral { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

@media (max-width: 1199.98px) {
    .lectura { grid-template-columns: minmax(0, 1fr); }
    .lectura .panel-lateral { position: static; }
}

@media (max-width: 991.98px) {
    .lateral { position: fixed; left: 0; top: 0; z-index: 1045; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 40px rgba(0, 0, 0, .2); }
    .lateral.abierta { transform: none; }
    .velo { position: fixed; inset: 0; background: rgba(15, 23, 42, .4); z-index: 1040; display: none; }
    .velo.visible { display: block; }
    .solo-movil { display: inline-flex !important; }
    .superior { padding: 12px 14px; }
    .vista { padding: 6px 14px 24px; }
    .usuario-boton .nombre, .buscador kbd { display: none; }
    .columna { height: 70vh; }
    .lector { padding: 14px 16px 20px; }
}

@media (max-width: 575.98px) {
    .encabezado h1 { font-size: 1.3rem; }
    .encabezado-icono { width: 46px; height: 46px; font-size: 1.4rem; }
    .interruptor a { padding: 8px 12px; }
    .boton-redondo.opcional { display: none; }
    .columnas { grid-template-columns: repeat(var(--n, 3), 86vw); }
}

.min-w-0 { min-width: 0; }

/* =============================================================================
   Teléfonos y tablets: aprovechar la pantalla
   - Vertical (< 992 px de ancho) y horizontal (poca altura, < 500 px).
   - --alto-superior: alto de la barra superior fija (0 cuando se desplaza con la página).
   ============================================================================= */

@media (max-width: 991.98px), (max-height: 500px) {
    :root { --alto-superior: 56px; }
    .superior { padding: 8px 12px; gap: 8px; }
    .buscador input { height: 40px; }
    .boton-redondo { width: 40px; height: 40px; border-radius: 10px; font-size: 1rem; }
    .avatar { width: 36px; height: 36px; }
    .vista { padding: 4px 12px 16px; }

    /* Encabezado de una sola línea, sin ícono ni descripción */
    .encabezado { gap: 10px; margin-bottom: 10px; flex-wrap: nowrap; }
    .encabezado-icono, .encabezado p { display: none; }
    .encabezado h1 { font-size: 1.2rem; white-space: nowrap; }
    .encabezado .acciones { flex-wrap: nowrap; gap: 6px; }
    .interruptor { padding: 3px; border-radius: 10px; }
    .interruptor a { padding: 6px 12px; font-size: .85rem; border-radius: 8px; }
    .grupo-vistas { padding: 3px; }
    .grupo-vistas button { width: 34px; height: 32px; font-size: 1rem; }

    /* Estudio paralelo: columnas del alto de la pantalla */
    .paralelo { gap: 12px; }
    .columnas { gap: 10px; }
    .columna { height: calc(100dvh - var(--alto-superior) - 70px); min-height: 240px; }
    .columna .cab { padding: 8px 8px 6px 10px; gap: 8px; }
    .columna .cab small { display: none; }
    .columna .cab .ref { font-size: .9rem; }
    .numero-columna { width: 26px; height: 26px; border-radius: 8px; font-size: .8rem; }
    .columna .boton-plano { width: 32px; height: 32px; }
    .columna .selectores { padding: 0 8px 8px 10px; }
    .columna .cuerpo { padding: 8px 10px 12px; }
    .columna .capitulo-titulo { font-size: 1.25rem; }
    .columna .capitulo-sub { margin-bottom: 6px; }
    .columna .texto-biblico { font-size: calc(var(--lb-tamano) - 3px); }
    .columna .versiculo { gap: 6px; margin: 0 -4px 2px; padding: 4px; }
    .columna .versiculo .num { width: 20px; }
    .columna .pie { padding: 2px; }
}

/* Teléfono horizontal: la barra superior se va con la página para dejar toda la altura al texto */
@media (max-height: 500px) {
    :root { --alto-superior: 0px; }
    .superior { position: static; }
    .lateral { position: fixed; left: 0; top: 0; z-index: 1045; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 40px rgba(0, 0, 0, .2); }
    .lateral.abierta { transform: none; }
    .velo.visible { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .4); z-index: 1040; }
    .solo-movil { display: inline-flex !important; }
    .columna { height: calc(100dvh - 16px); }
}

/* Lectura en teléfonos: el texto ocupa todo el ancho y la barra de libro/capítulo queda fija arriba */
@media (max-width: 767.98px), (max-height: 500px) {
    .lectura { gap: 12px; }
    .lector { padding: 0; margin: 0 -12px; border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
    .lector .cabecera {
        position: sticky; top: var(--alto-superior); z-index: 6;
        background: var(--lb-tarjeta); margin: 0; padding: 8px 12px;
        flex-wrap: nowrap; border-bottom: 1px solid var(--lb-borde);
    }
    .lector .cabecera .selectores { flex-wrap: nowrap; flex: 1; min-width: 0; }
    .lector .cabecera .libro { min-width: 0; flex: 0 1 170px; }
    .lector .cabecera .form-select { padding-top: .35rem; padding-bottom: .35rem; }
    .lector .cabecera .boton-icono { width: 36px; height: 36px; }
    .lector .cabecera #version { display: none; }
    .lector .contenido { max-width: none; padding: 14px 16px 18px; }
    .capitulo-titulo { font-size: 1.55rem; }
    .versiculo { gap: 8px; margin: 0 -6px 2px; padding: 4px 6px; }
    .versiculo .num { width: 22px; }
    .barra-seleccion { margin-left: -4px; margin-right: -4px; padding: 8px 10px; gap: 6px; }
    .barra-seleccion .etiqueta { width: 100%; }
    .color-punto { width: 28px; height: 28px; }
}

/* Teléfono vertical: una columna a la vez, deslizando entre columnas */
@media (max-width: 575.98px) and (min-height: 501px) {
    .encabezado.con-interruptor h1 { display: none; }
    .encabezado.con-interruptor .acciones { margin-left: 0; width: 100%; justify-content: space-between; }
    .columnas { grid-template-columns: repeat(var(--n, 3), calc(100% - 28px)); scroll-snap-type: x mandatory; }
    .columna { scroll-snap-align: start; }
    .columna { height: calc(100dvh - var(--alto-superior) - 64px); }
}

/* Tablet vertical y teléfono horizontal: hasta 3 columnas a la vista */
@media (min-width: 576px) and (max-width: 991.98px), (min-width: 576px) and (max-height: 500px) {
    .columnas { grid-template-columns: repeat(var(--n, 3), minmax(190px, 1fr)); }
    .columna .cab .min-w-0 { display: none; }
    .columna .cab .herr { margin-left: auto; }
    .columna .selectores .libro { min-width: 0; }
    .columna .selectores .chico { width: 46px; }
}

/* ---- Modo oscuro: ajustes de componentes ---- */
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-color: #1c1b19; --bs-btn-bg: #7fa7e0; --bs-btn-border-color: #7fa7e0;
    --bs-btn-hover-color: #1c1b19; --bs-btn-hover-bg: #95b7e7; --bs-btn-hover-border-color: #95b7e7;
    --bs-btn-active-color: #1c1b19; --bs-btn-active-bg: #a9c5ee; --bs-btn-active-border-color: #a9c5ee;
    --bs-btn-disabled-color: #1c1b19; --bs-btn-disabled-bg: #4f5f78; --bs-btn-disabled-border-color: #4f5f78;
}
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #8fb3e6; --bs-btn-border-color: #4f5f78;
    --bs-btn-hover-color: #1c1b19; --bs-btn-hover-bg: #7fa7e0; --bs-btn-hover-border-color: #7fa7e0;
    --bs-btn-active-color: #1c1b19; --bs-btn-active-bg: #7fa7e0; --bs-btn-active-border-color: #7fa7e0;
}
[data-bs-theme="dark"] .interruptor a.activo { color: #1c1b19; box-shadow: none; }
[data-bs-theme="dark"] .badge.text-bg-light { background: #2f2d29 !important; color: #e4ded3 !important; border-color: var(--lb-borde) !important; }
[data-bs-theme="dark"] .avatar { background: #3a4a63; color: #e4ded3; }
[data-bs-theme="dark"] .versiculo-dia,
[data-bs-theme="dark"] .promo-derecha { filter: saturate(.55) brightness(.78); }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select { background-color: #201f1c; }
[data-bs-theme="dark"] .form-control::placeholder { color: #7d786e; }
[data-bs-theme="dark"] .versiculo.parpadeo { animation-name: parpadeo-oscuro; }
@keyframes parpadeo-oscuro { 0%, 40% { background: #4d4226; } 100% { background: transparent; } }[data-bs-theme="dark"] .numero-columna { filter: saturate(.6) brightness(.9); }
[data-bs-theme="dark"] .versiculo.foco { background: color-mix(in srgb, var(--color) 16%, transparent); }

/* =============================================================================
   Versículos seguidos en un solo marco y notas de estudio dentro del texto
   ============================================================================= */

/* Seleccionados, marcados en una columna o destacados del mismo color: un bloque continuo */
.versiculo.seleccionado:has(+ .versiculo.seleccionado),
.versiculo.foco:has(+ .versiculo.foco),
.destacado-amarillo:has(+ .destacado-amarillo), .destacado-verde:has(+ .destacado-verde),
.destacado-azul:has(+ .destacado-azul), .destacado-rosa:has(+ .destacado-rosa),
.destacado-violeta:has(+ .destacado-violeta) {
    margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.versiculo.seleccionado + .versiculo.seleccionado,
.versiculo.foco + .versiculo.foco,
.destacado-amarillo + .destacado-amarillo, .destacado-verde + .destacado-verde,
.destacado-azul + .destacado-azul, .destacado-rosa + .destacado-rosa,
.destacado-violeta + .destacado-violeta {
    border-top-left-radius: 0; border-top-right-radius: 0;
}
/* La selección tiene prioridad sobre el color del destacado */
.versiculo.seleccionado { background: var(--lb-seleccion) !important; }

/* Pasaje con nota de estudio: marco que agrupa los versículos y la nota */
.grupo-nota {
    border: 1px solid color-mix(in srgb, var(--lb-violeta) 35%, transparent);
    background: color-mix(in srgb, var(--lb-violeta) 5%, transparent);
    border-left: 4px solid var(--lb-violeta);
    border-radius: 14px;
    padding: 6px 12px 10px;
    margin: 6px -12px 12px;
}
.grupo-nota .versiculo { margin-left: -6px; margin-right: -6px; }
.nota-estudio {
    font-family: 'Inter', system-ui, sans-serif; font-size: .92rem; line-height: 1.55;
    margin-top: 8px; padding-top: 8px;
    border-top: 1px dashed color-mix(in srgb, var(--lb-violeta) 40%, transparent);
}
.nota-estudio + .nota-estudio { margin-top: 6px; }
.nota-estudio .titulo {
    display: flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 700; color: var(--lb-violeta); text-transform: uppercase; letter-spacing: .03em;
}
.nota-estudio .titulo .fecha { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--lb-suave); }
.nota-estudio .titulo .boton-plano { width: 30px; height: 30px; font-size: .95rem; }
.nota-estudio .texto { white-space: pre-line; color: var(--lb-texto); }
.columna .grupo-nota { margin-left: -6px; margin-right: -6px; padding: 4px 8px 8px; }
.columna .nota-estudio { font-size: .85rem; }

/* =============================================================================
   Personajes: lista por etapas + ficha
   ============================================================================= */
.personajes { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 20px; align-items: start; }
.personajes-lista { position: sticky; top: 90px; display: flex; flex-direction: column; max-height: calc(100vh - 110px); }
.lista-personajes { overflow-y: auto; padding: 0 8px 10px; min-height: 0; }
.buscador-local { position: relative; }
.buscador-local i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--lb-suave); }
.buscador-local input { padding-left: 36px; border-radius: 10px; }
.etapa-titulo {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--lb-suave);
    padding: 12px 8px 4px; position: sticky; top: 0; background: var(--lb-tarjeta); z-index: 1;
}
.item-personaje {
    display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px;
    color: var(--lb-texto); text-decoration: none;
}
.item-personaje:hover { background: var(--bs-tertiary-bg); color: var(--lb-texto); }
.item-personaje.activo { background: var(--lb-azul-claro); }
.item-personaje .nombre, .chip-personaje .nombre { display: block; font-weight: 600; font-size: .92rem; line-height: 1.2; }
.item-personaje .rol, .chip-personaje .rol { display: block; font-size: .78rem; color: var(--lb-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.avatar-personaje {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Literata', Georgia, serif; font-weight: 700; font-size: 1.05rem;
}
.avatar-personaje.chico { width: 30px; height: 30px; font-size: .9rem; }
.avatar-personaje.grande { width: 72px; height: 72px; font-size: 2rem; }
.etapa-1 { background: #ecfdf3; color: #047857; }
.etapa-2 { background: #fff4dc; color: #b45309; }
.etapa-3 { background: #ffede5; color: #c2410c; }
.etapa-4 { background: #fdf2f8; color: #be185d; }
.etapa-5 { background: #f1eaff; color: #6d28d9; }
.etapa-6 { background: #eaf1ff; color: #1d4ed8; }
.etapa-7 { background: #e6f6f8; color: #0e7490; }
.etapa-8 { background: #fef3c7; color: #a16207; }
.etapa-9 { background: #eef2f7; color: #334155; }
[data-bs-theme="dark"] .etapa-1 { background: #2b3530; color: #9cc7aa; }
[data-bs-theme="dark"] .etapa-2 { background: #3a3326; color: #dcbd7c; }
[data-bs-theme="dark"] .etapa-3 { background: #3a2e28; color: #dfa98d; }
[data-bs-theme="dark"] .etapa-4 { background: #3a2c33; color: #d9a6be; }
[data-bs-theme="dark"] .etapa-5 { background: #322e3a; color: #bcaed8; }
[data-bs-theme="dark"] .etapa-6 { background: #2c3139; color: #9fb6d8; }
[data-bs-theme="dark"] .etapa-7 { background: #293436; color: #93c4c9; }
[data-bs-theme="dark"] .etapa-8 { background: #373224; color: #d8c486; }
[data-bs-theme="dark"] .etapa-9 { background: #302f2c; color: #c3bdb1; }

.etiqueta-dia { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--lb-violeta); margin-bottom: 10px; }
.ficha-cabecera { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.ficha-cabecera h2 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.5px; margin: 0; }
.ficha-cabecera .otros { color: var(--lb-suave); font-size: .9rem; }
.etiqueta-suave { background: var(--bs-tertiary-bg); color: var(--lb-texto); border: 1px solid var(--lb-borde); font-weight: 600; }
.significado { color: var(--lb-suave); margin-bottom: 14px; }
.significado strong { color: var(--lb-texto); font-weight: 600; }
.versiculo-clave {
    border-left: 4px solid var(--lb-violeta); background: var(--bs-tertiary-bg); border-radius: 0 12px 12px 0;
    padding: 14px 18px; margin: 0 0 18px;
}
.versiculo-clave p { font-size: calc(var(--lb-tamano) - 1px); font-style: italic; }
.versiculo-clave a { font-weight: 700; font-size: .85rem; text-decoration: none; }
.personajes-detalle .resumen { font-size: 1rem; line-height: 1.7; margin-bottom: 22px; }

.pasajes-personaje { list-style: none; margin: 0; padding: 0; }
.pasajes-personaje li { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--lb-borde); }
.pasajes-personaje li:last-child { border-bottom: 0; }
.pasajes-personaje .pasaje { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; padding: 9px 4px; text-decoration: none; color: var(--lb-texto); }
.pasajes-personaje .pasaje:hover .titulo { color: var(--lb-azul); }
.pasajes-personaje .titulo { font-weight: 500; }
.pasajes-personaje .ref { margin-left: auto; color: var(--lb-suave); font-size: .82rem; white-space: nowrap; }

.relaciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.chip-personaje {
    display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid var(--lb-borde); border-radius: 12px;
    color: var(--lb-texto); text-decoration: none; min-width: 0;
}
.chip-personaje > span:last-child { min-width: 0; }
.chip-personaje:hover { border-color: var(--lb-azul); color: var(--lb-texto); }

/* Personajes del capítulo, en el panel del lector */
.personajes-capitulo .item-personaje { padding: 6px 4px; }

.solo-lista-movil { display: none; }

@media (max-width: 1199.98px) {
    .personajes { grid-template-columns: 290px minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
    /* Teléfono y tablet: primero la lista; al abrir un personaje, la ficha ocupa su lugar. */
    .personajes { grid-template-columns: minmax(0, 1fr); }
    .personajes-lista { position: static; max-height: none; }
    .lista-personajes { overflow: visible; }
    .personajes:not(.con-detalle) .personajes-detalle,
    .personajes.con-detalle .personajes-lista { display: none; }
    .solo-lista-movil { display: inline-block; }
    .etapa-titulo { top: var(--alto-superior, 0); }
}
@media (max-width: 575.98px) {
    .ficha-cabecera { gap: 14px; }
    .ficha-cabecera h2 { font-size: 1.35rem; }
    .avatar-personaje.grande { width: 56px; height: 56px; font-size: 1.6rem; }
    .relaciones { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.filtro-etapa { flex: 1 1 150px; width: auto; min-width: 150px; }
.panel-lateral .nav-underline { flex-wrap: nowrap; gap: .7rem; overflow-x: auto; scrollbar-width: none; }
.panel-lateral .nav-underline .nav-link { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .panel-lateral .nav-underline { gap: .45rem; font-size: .76rem; }
}

/* =============================================================================
   Mapas bíblicos (SVG propio)
   ============================================================================= */
:root, [data-bs-theme="light"] {
    --mapa-mar: #d7e6f2; --mapa-tierra: #f7f2e8; --mapa-costa: #c8b99c; --mapa-rio: #86add3;
    --mapa-texto: #33312c; --mapa-region: #9c8766; --mapa-agua: #4d7aa6; --mapa-punto: #8a4b24;
    --ruta-azul: #2563eb; --ruta-verde: #059669; --ruta-ambar: #d97706; --ruta-rosa: #e11d48; --ruta-violeta: #7c3aed;
}
[data-bs-theme="dark"] {
    --mapa-mar: #19202a; --mapa-tierra: #2a2824; --mapa-costa: #4a453b; --mapa-rio: #3f6182;
    --mapa-texto: #e4ded3; --mapa-region: #9a8f7a; --mapa-agua: #7fa0c6; --mapa-punto: #e2b58c;
    --ruta-azul: #7fa7e0; --ruta-verde: #7cc4a0; --ruta-ambar: #e2b25e; --ruta-rosa: #e59aa6; --ruta-violeta: #b9a4e4;
}
.mapas { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.mapa-tarjeta { overflow: hidden; }
.mapa-barra { display: flex; gap: 10px; padding: 12px; border-bottom: 1px solid var(--lb-borde); }
.mapa-barra #selMapa { max-width: 290px; }
.buscar-lugar { flex: 1; min-width: 0; }
.resultados-lugar {
    position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; background: var(--lb-tarjeta);
    border: 1px solid var(--lb-borde); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); padding: 4px; max-height: 320px; overflow-y: auto;
}
.resultados-lugar button {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none;
    padding: 7px 10px; border-radius: 8px; color: var(--lb-texto);
}
.resultados-lugar button:hover { background: var(--bs-tertiary-bg); }
.mapa-contenedor { position: relative; height: max(440px, calc(100vh - 290px)); background: var(--mapa-mar); }
.mapa-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; user-select: none; }
.mapa-svg:active { cursor: grabbing; }
.mapa-svg .mar { fill: var(--mapa-mar); }
.mapa-svg .tierra { fill: var(--mapa-tierra); stroke: var(--mapa-costa); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.mapa-svg .lago { fill: var(--mapa-mar); stroke: var(--mapa-costa); stroke-width: .8; vector-effect: non-scaling-stroke; }
.mapa-svg .rios path { fill: none; stroke: var(--mapa-rio); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.mapa-svg .ruta { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; opacity: .85; }
.mapa-svg .c-azul { --c: var(--ruta-azul); }
.mapa-svg .c-verde { --c: var(--ruta-verde); }
.mapa-svg .c-ambar { --c: var(--ruta-ambar); }
.mapa-svg .c-rosa { --c: var(--ruta-rosa); }
.mapa-svg .c-violeta { --c: var(--ruta-violeta); }
.mapa-svg .ruta { stroke: var(--c); }
.mapa-svg .flecha { fill: var(--c); }
.mapa-svg .lugar { cursor: pointer; }
.mapa-svg .punto { fill: var(--mapa-punto); stroke: var(--mapa-tierra); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.mapa-svg .punto.sitio { fill: var(--mapa-tierra); stroke: var(--mapa-punto); stroke-width: 2; }
.mapa-svg .punto.monte { fill: #8b7355; }
.mapa-svg .punto.sel { fill: var(--lb-azul); }
.mapa-svg .halo { fill: var(--lb-azul); opacity: .22; }
.mapa-svg .toque { fill: transparent; }
.mapa-svg text {
    cursor: pointer; fill: var(--mapa-texto); stroke: var(--mapa-tierra); paint-order: stroke; stroke-linejoin: round;
    font-family: 'Inter', system-ui, sans-serif; font-weight: 500;
}
.mapa-svg text.fuerte { font-weight: 700; }
.mapa-svg text.sel { fill: var(--lb-azul); font-weight: 800; }
.mapa-svg text.nombre-region { fill: var(--mapa-region); text-transform: uppercase; letter-spacing: .18em; font-weight: 600; stroke-opacity: .6; }
.mapa-svg text.nombre-agua { fill: var(--mapa-agua); font-style: italic; stroke: var(--mapa-mar); stroke-opacity: .7; }
.mapa-svg text.nombre-region.sel, .mapa-svg text.nombre-agua.sel { fill: var(--lb-azul); }
.mapa-controles { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.mapa-controles .boton-icono { background: var(--lb-tarjeta); box-shadow: var(--lb-sombra); }
.mapa-escala { position: absolute; left: 12px; bottom: 10px; font-size: .72rem; font-weight: 600; color: var(--mapa-texto); z-index: 2; pointer-events: none; }
.mapa-escala div { height: 6px; border: 2px solid var(--mapa-texto); border-top: 0; margin-top: 2px; }
.mapa-fuente { font-size: .72rem; color: var(--lb-suave); padding: 6px 12px; border-top: 1px solid var(--lb-borde); }

.leyenda-rutas { list-style: none; margin: 0; padding: 0; }
.leyenda-rutas li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--lb-borde); font-size: .9rem; }
.leyenda-rutas li:last-child { border-bottom: 0; }
.leyenda-rutas label { cursor: pointer; }
.muestra-ruta { flex-shrink: 0; width: 22px; height: 4px; border-radius: 2px; }
.muestra-ruta.c-azul { background: var(--ruta-azul); }
.muestra-ruta.c-verde { background: var(--ruta-verde); }
.muestra-ruta.c-ambar { background: var(--ruta-ambar); }
.muestra-ruta.c-rosa { background: var(--ruta-rosa); }
.muestra-ruta.c-violeta { background: var(--ruta-violeta); }
.lista-lugares { display: flex; flex-wrap: wrap; gap: 4px; max-height: 250px; overflow-y: auto; }
.lista-lugares a {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--lb-borde); border-radius: 20px;
    font-size: .8rem; color: var(--lb-texto); text-decoration: none;
}
.lista-lugares a:hover { border-color: var(--lb-azul); }
.lista-lugares a.activo { background: var(--lb-azul-claro); border-color: var(--lb-azul); }
.tipo-ciudad, .tipo-sitio { color: var(--mapa-punto); }
.tipo-monte { color: #8b7355; }
.tipo-agua { color: var(--mapa-agua); }
.tipo-region { color: var(--mapa-region); }
.icono-lugar {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--bs-tertiary-bg); font-size: 1.2rem;
}
.lugar-nombre { font-size: 1.3rem; font-weight: 800; letter-spacing: -.3px; margin: 0; }
.lugar-resumen { line-height: 1.65; margin: 10px 0 16px; }
.aviso-aprox { font-size: .8rem; color: var(--lb-suave); background: var(--bs-tertiary-bg); border-radius: 8px; padding: 5px 10px; display: inline-block; }
.panel-mapa .relaciones { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

@media (max-width: 1399.98px) {
    .mapas { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 1199.98px) {
    .mapas { grid-template-columns: minmax(0, 1fr); }
    .panel-mapa { position: static; }
    .mapa-contenedor { height: max(380px, 62vh); }
}
@media (max-width: 575.98px) {
    .mapa-barra { flex-wrap: wrap; padding: 10px; gap: 8px; }
    .mapa-barra #selMapa { max-width: none; flex: 1 1 100%; }
    .mapa-contenedor { height: 58vh; min-height: 320px; }
}
@media (max-height: 500px) {
    .mapa-contenedor { height: calc(100dvh - 120px); min-height: 220px; }
}
.avatar-personaje.icono-mapa { background: var(--bs-tertiary-bg); color: var(--mapa-punto); font-size: .85rem; }

/* =============================================================================
   Diccionario bíblico (usa la misma disposición que Personajes)
   ============================================================================= */
.lista-personajes { position: relative; }
.alfabeto { display: flex; flex-wrap: wrap; gap: 2px; }
.alfabeto button {
    border: 0; background: none; width: 24px; height: 24px; border-radius: 6px; padding: 0;
    font-size: .75rem; font-weight: 700; color: var(--lb-azul);
}
.alfabeto button:hover:not(:disabled) { background: var(--lb-azul-claro); }
.alfabeto button:disabled { color: var(--lb-borde); }
.termino-titulo { font-size: 1.8rem; font-weight: 800; letter-spacing: -.5px; margin: 0; }
.origen-termino {
    display: flex; gap: 10px; align-items: flex-start; background: var(--bs-tertiary-bg); border-radius: 12px;
    padding: 10px 14px; margin: 12px 0 16px; font-size: .92rem; color: var(--lb-suave);
}
.origen-termino i { color: var(--lb-violeta); margin-top: 2px; }
.definicion { font-size: 1.02rem; line-height: 1.75; }
.definicion p { margin-bottom: .9rem; }
.definicion ul { padding-left: 1.2rem; margin-bottom: .9rem; }
.definicion li { margin-bottom: .35rem; }
.chip-termino {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--lb-borde); border-radius: 20px;
    font-size: .88rem; color: var(--lb-texto); text-decoration: none;
}
.chip-termino i { color: var(--lb-violeta); }
.chip-termino:hover { border-color: var(--lb-azul); color: var(--lb-texto); }
.sugerencias-busqueda { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sugerencias-busqueda .titulo { font-size: .8rem; font-weight: 700; color: var(--lb-suave); text-transform: uppercase; letter-spacing: .5px; }
.avatar-personaje.icono-termino { background: var(--bs-tertiary-bg); color: var(--lb-violeta); font-size: .85rem; }

/* =============================================================================
   Interlineal y Strong / Vine
   ============================================================================= */
.fuente-original, .interlineal-palabras .orig, .orig-grande, .lema, .lexico-lema { font-family: 'Literata', 'Noto Serif Hebrew', Georgia, serif; }
.interlineal-versiculo { padding: 12px 0 16px; border-bottom: 1px solid var(--lb-borde); }
.interlineal-versiculo:last-child { border-bottom: 0; }
.interlineal-ref { margin-bottom: 10px; line-height: 1.5; }
.interlineal-ref a { font-weight: 700; text-decoration: none; margin-right: 8px; }
.interlineal-ref .texto-biblico { font-size: .95rem; color: var(--lb-suave); }
.interlineal-palabras { display: flex; flex-wrap: wrap; gap: 6px; }
.palabra-original {
    display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 64px; max-width: 150px; padding: 7px 9px 6px;
    border: 1px solid var(--lb-borde); border-radius: 10px; background: var(--lb-tarjeta); color: var(--lb-texto); text-align: center;
}
.palabra-original:hover { border-color: var(--lb-azul); }
.palabra-original.activa { border-color: var(--lb-azul); background: var(--lb-azul-claro); }
.palabra-original .orig { font-size: 1.25rem; line-height: 1.5; }
.interlineal-palabras.hebreo .orig { font-family: 'Noto Serif Hebrew', serif; font-size: 1.45rem; }
.palabra-original .translit { font-size: .75rem; font-style: italic; color: var(--lb-suave); }
.palabra-original .glosa { font-size: .74rem; line-height: 1.25; max-width: 130px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.palabra-original .glosa[lang="en"] { color: var(--lb-suave); }
.palabra-original .num { font-size: .68rem; font-weight: 700; color: var(--lb-azul); }
.interlineal-detalle {
    position: sticky; bottom: -16px; margin: 12px -16px -16px; padding: 16px; background: var(--lb-tarjeta);
    border-top: 2px solid var(--lb-azul); box-shadow: 0 -8px 20px rgba(0, 0, 0, .08); max-height: 55vh; overflow-y: auto;
}
.orig-grande { font-size: 2.2rem; line-height: 1.2; }
.fuente-lexico { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--lb-violeta); margin-bottom: 4px; }
.definicion-lexico { line-height: 1.65; }
.definicion-lexico p { margin-bottom: .6rem; }
.definicion-lexico.recortada { max-height: 11rem; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.enlace-strong { font-weight: 600; text-decoration: none; white-space: nowrap; }
.lexico-cabecera { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.lexico-lema { font-size: 2.6rem; line-height: 1.2; }
.lexico-numero { font-size: .85rem; font-weight: 800; color: #fff; background: var(--lb-azul); border-radius: 8px; padding: 2px 10px; }
.bloque-fuente { border: 1px solid var(--lb-borde); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.bloque-fuente .derechos { font-size: .72rem; color: var(--lb-suave); margin-top: 6px; }
.concordancia-item { padding: 10px 0; border-bottom: 1px solid var(--lb-borde); }
.concordancia-item:last-child { border-bottom: 0; }
.concordancia-item .original { font-family: 'Literata', 'Noto Serif Hebrew', serif; color: var(--lb-violeta); margin-left: 8px; }
.estado-fuentes li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--lb-borde); font-size: .88rem; }
.estado-fuentes li:last-child { border-bottom: 0; }
@media (max-width: 767.98px) {
    .interlineal-detalle { position: static; margin: 12px 0 0; box-shadow: none; max-height: none; border-radius: 12px; border: 1px solid var(--lb-borde); border-top: 2px solid var(--lb-azul); }
    .palabra-original { min-width: 56px; }
    .lexico-lema { font-size: 2rem; }
}
.rvr-strong { line-height: 1.9; }
.palabra-rvr {
    border: 0; background: none; padding: 0 1px; color: inherit; font: inherit; border-radius: 4px;
    border-bottom: 1px dotted var(--lb-suave); cursor: pointer;
}
.palabra-rvr:hover { background: var(--lb-azul-claro); }
.palabra-rvr.coincide, .palabra-original.coincide { background: var(--lb-seleccion); border-color: var(--lb-azul); }
.palabra-rvr.activa { background: var(--lb-azul); color: #fff; border-bottom-color: transparent; }

/* =============================================================================
   Temas
   ============================================================================= */
.icono-tema {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem;
}
.icono-tema.cat-1 { background: #fff4dc; color: #b45309; }
.icono-tema.cat-2 { background: #ffe9e9; color: #b91c1c; }
.icono-tema.cat-3 { background: #eaf1ff; color: #1d4ed8; }
.icono-tema.cat-4 { background: #e6f6f8; color: #0e7490; }
.icono-tema.cat-5 { background: #fdf2f8; color: #be185d; }
.icono-tema.cat-6 { background: #ecfdf3; color: #047857; }
.icono-tema.cat-7 { background: #f1eaff; color: #6d28d9; }
[data-bs-theme="dark"] .icono-tema.cat-1 { background: #3a3326; color: #dcbd7c; }
[data-bs-theme="dark"] .icono-tema.cat-2 { background: #3a2a2a; color: #e0a39a; }
[data-bs-theme="dark"] .icono-tema.cat-3 { background: #2c3139; color: #9fb6d8; }
[data-bs-theme="dark"] .icono-tema.cat-4 { background: #293436; color: #93c4c9; }
[data-bs-theme="dark"] .icono-tema.cat-5 { background: #3a2c33; color: #d9a6be; }
[data-bs-theme="dark"] .icono-tema.cat-6 { background: #2b3530; color: #9cc7aa; }
[data-bs-theme="dark"] .icono-tema.cat-7 { background: #322e3a; color: #bcaed8; }

.categoria-temas { margin-bottom: 22px; }
.categoria-temas h3 { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; font-weight: 700; margin-bottom: 10px; }
.categoria-temas .icono-tema { width: 28px; height: 28px; font-size: .85rem; }
.intro-tema { font-size: 1.05rem; line-height: 1.7; margin: 10px 0 18px; }
.grupo-tema { margin-top: 20px; }
.grupo-tema h3 {
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--lb-violeta);
    margin: 0 0 4px; padding-bottom: 6px; border-bottom: 1px solid var(--lb-borde);
}
.pasaje-tema { padding: 10px 0; border-bottom: 1px solid var(--lb-borde); }
.pasaje-tema:last-child { border-bottom: 0; }
.pasaje-tema .ref { font-weight: 700; color: var(--lb-azul); text-decoration: none; font-size: .9rem; }
.pasaje-tema .ref:hover { text-decoration: underline; }
.pasaje-tema p { margin: 4px 0 0; font-size: calc(var(--lb-tamano) - 1px); line-height: var(--lb-interlineado, 1.7); }
.cargando-texto { min-height: 1.4em; border-radius: 6px; background: linear-gradient(90deg, var(--bs-tertiary-bg), var(--lb-borde), var(--bs-tertiary-bg)); background-size: 200% 100%; animation: brillo 1.2s infinite linear; }
@keyframes brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .cargando-texto { animation: none; } }

/* =============================================================================
   Concordancia
   ============================================================================= */
.formas-concordancia { margin-top: 14px; }
.formas-concordancia .titulo { font-size: .8rem; font-weight: 700; color: var(--lb-suave); text-transform: uppercase; letter-spacing: .5px; }
.chip-forma {
    border: 1px solid var(--lb-borde); background: var(--lb-tarjeta); color: var(--lb-texto); border-radius: 999px;
    padding: 4px 12px; font-size: .88rem; line-height: 1.4;
}
.chip-forma span { color: var(--lb-suave); font-size: .78rem; margin-left: 2px; }
.chip-forma:hover { border-color: var(--lb-azul); }
.chip-forma.activa { background: var(--lb-azul); border-color: var(--lb-azul); color: #fff; }
.chip-forma.activa span { color: rgba(255, 255, 255, .8); }
[data-bs-theme="dark"] .chip-forma.activa { color: #1c1b19; }
[data-bs-theme="dark"] .chip-forma.activa span { color: rgba(28, 27, 25, .75); }

.distribucion .barras { display: flex; align-items: flex-end; gap: 1px; height: 64px; border-bottom: 1px solid var(--lb-borde); }
.distribucion .barra { flex: 1 1 0; min-width: 0; height: 100%; padding: 0; border: 0; background: none; display: flex; align-items: flex-end; cursor: pointer; }
.distribucion .barra:disabled { cursor: default; }
.distribucion .barra span { display: block; width: 100%; border-radius: 2px 2px 0 0; }
.distribucion .barra.at span, .punto.at { background: #d4a24c; }
.distribucion .barra.nt span, .punto.nt { background: var(--lb-azul); }
[data-bs-theme="dark"] .distribucion .barra.at span, [data-bs-theme="dark"] .punto.at { background: #c9a468; }
.distribucion .barra:hover:not(:disabled) span { opacity: .7; }
.distribucion .barra.activa span, [data-bs-theme="dark"] .distribucion .barra.activa span { background: var(--lb-violeta); }
.distribucion .leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .8rem; margin-top: 6px; }
.punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }

.originales-concordancia { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--lb-borde); }
.originales-concordancia .titulo { font-size: .85rem; font-weight: 700; margin-bottom: 8px; }
.chip-original {
    display: flex; align-items: center; gap: 10px; padding: 6px 12px; border: 1px solid var(--lb-borde); border-radius: 12px;
    color: var(--lb-texto); text-decoration: none; font-size: .84rem; max-width: 100%;
}
.chip-original:hover { border-color: var(--lb-azul); color: var(--lb-texto); }
.chip-original .lema { font-family: 'Noto Serif Hebrew', 'Literata', Georgia, serif; font-size: 1.25rem; line-height: 1.2; }
.chip-original .veces { color: var(--lb-suave); }
.chip-original .glosa { display: block; color: var(--lb-suave); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem; }

.lista-concordancia { border-top: 1px solid var(--lb-borde); }
.fila-concordancia { padding: 8px 4px; border-bottom: 1px solid var(--lb-borde); cursor: pointer; }
.fila-concordancia:hover { background: var(--bs-tertiary-bg); }
.fila-concordancia .ref { font-weight: 700; color: var(--lb-azul); text-decoration: none; font-size: .85rem; white-space: nowrap; }
.fila-concordancia mark { background: #fde68a; color: inherit; padding: 0 2px; border-radius: 3px; font-weight: 600; }
[data-bs-theme="dark"] .fila-concordancia mark { background: #5c4a22; color: #f3eee4; }
.lista-concordancia.modo-versiculo .texto-biblico { font-size: calc(var(--lb-tamano) - 2px); margin-top: 2px; }
/* Contexto: la palabra al centro, con lo anterior alineado a la derecha y lo siguiente a la izquierda. */
.lista-concordancia.modo-contexto .fila-concordancia {
    display: grid; grid-template-columns: 10.5rem minmax(0, 1fr) auto minmax(0, 1fr); align-items: baseline; column-gap: 6px;
    font-family: 'Literata', Georgia, serif; font-size: .95rem;
}
.lista-concordancia.modo-contexto .izq, .lista-concordancia.modo-contexto .der { white-space: nowrap; overflow: hidden; }
.lista-concordancia.modo-contexto .izq { text-align: right; direction: rtl; text-overflow: ellipsis; }
.lista-concordancia.modo-contexto .izq > span { direction: ltr; unicode-bidi: isolate; }
.lista-concordancia.modo-contexto .der { text-overflow: ellipsis; }
.lista-concordancia.modo-contexto .ref { font-family: var(--bs-body-font-family); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767.98px) {
    .lista-concordancia.modo-contexto .fila-concordancia { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); font-size: .88rem; }
    .lista-concordancia.modo-contexto .ref { grid-column: 1 / -1; }
}

/* =============================================================================
   Planes de lectura
   ============================================================================= */
.subtitulo-seccion { font-size: 1.05rem; font-weight: 700; margin: 0 0 12px; }
.grilla-planes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.icono-plan {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--lb-azul-claro); color: var(--lb-azul); font-size: 1.2rem;
}
.icono-plan.grande { width: 56px; height: 56px; font-size: 1.6rem; border-radius: 16px; }
.icono-plan.chico { width: 32px; height: 32px; font-size: .95rem; border-radius: 10px; }
.nombre-plan { font-weight: 700; color: var(--lb-texto); text-decoration: none; line-height: 1.25; }
.nombre-plan:hover { color: var(--lb-azul); }
.lectura-hoy { background: var(--bs-tertiary-bg); border-radius: 12px; padding: 10px 14px; }
.estado-plan { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.estado-plan.aldia { color: #047857; }
.estado-plan.atrasado { color: #b45309; }
.estado-plan.listo { color: var(--lb-violeta); }
[data-bs-theme="dark"] .estado-plan.aldia { color: #9cc7aa; }
[data-bs-theme="dark"] .estado-plan.atrasado { color: #dcbd7c; }

.dias-plan { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); column-gap: 24px; }
.dia-plan { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--lb-borde); border-radius: 8px; }
.dia-plan .form-check-input { margin: 0; flex-shrink: 0; cursor: pointer; }
.dia-plan .numero { font-size: .78rem; font-weight: 700; color: var(--lb-suave); width: 3.8rem; flex-shrink: 0; cursor: pointer; }
.dia-plan .lectura-dia { flex: 1; min-width: 0; color: var(--lb-texto); text-decoration: none; font-size: .92rem; }
.dia-plan .lectura-dia:hover { color: var(--lb-azul); }
.dia-plan .fecha { font-size: .75rem; color: var(--lb-suave); white-space: nowrap; }
.dia-plan.hecho .lectura-dia { color: var(--lb-suave); text-decoration: line-through; text-decoration-color: var(--lb-borde); }
.dia-plan.actual { background: var(--lb-azul-claro); border-bottom-color: transparent; }
.dia-plan.actual .numero, .dia-plan.actual .fecha { color: var(--lb-azul); }

/* Aviso del plan dentro del lector */
.aviso-plan {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; padding: 12px 16px;
    border: 1px solid var(--lb-borde); border-left: 4px solid var(--lb-azul); border-radius: 12px; background: var(--bs-tertiary-bg);
    font-family: var(--bs-body-font-family);
}
.aviso-plan .icono { font-size: 1.4rem; color: var(--lb-azul); }

/* Inicio */
.lectura-inicio { padding: 10px 0; border-bottom: 1px solid var(--lb-borde); margin-bottom: 12px; }
.lectura-inicio a { color: var(--lb-texto); text-decoration: none; }
.lectura-inicio a:hover { color: var(--lb-azul); }
.resumen-devocional {
    color: var(--lb-suave); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* =============================================================================
   Devocionales
   ============================================================================= */
.devocionales { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.devocionales-lista { position: sticky; top: 90px; display: flex; flex-direction: column; max-height: calc(100vh - 110px); }
.devocional .tarjeta-cuerpo { max-width: 760px; }
.devocional-titulo { font-size: 2rem; font-weight: 800; letter-spacing: -.5px; margin: 0 0 6px; }
.lectura-devocional { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.reflexion { font-family: 'Literata', Georgia, serif; font-size: calc(var(--lb-tamano) - 1px); line-height: 1.75; margin-top: 18px; }
.reflexion p { margin-bottom: 1rem; }
.caja-devocional { border-radius: 14px; padding: 14px 18px; margin-top: 14px; }
.caja-devocional .titulo { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }
.caja-devocional p { margin: 0; line-height: 1.6; }
.caja-devocional.pregunta { background: var(--lb-azul-claro); }
.caja-devocional.pregunta .titulo { color: var(--lb-azul); }
.caja-devocional.oracion { background: #f5f0ff; }
.caja-devocional.oracion .titulo { color: var(--lb-violeta); }
.caja-devocional.oracion p { font-style: italic; }
[data-bs-theme="dark"] .caja-devocional.oracion { background: #2e2b36; }
.navegacion-devocional { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--lb-borde); }
.navegacion-devocional a { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: .9rem; min-width: 0; max-width: 48%; }
.navegacion-devocional a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.numero-devocional {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700; background: var(--bs-tertiary-bg); color: var(--lb-suave); border: 1px solid var(--lb-borde);
}
.numero-devocional.leido { background: #ecfdf3; color: #047857; border-color: #b7e4c7; }
[data-bs-theme="dark"] .numero-devocional.leido { background: #2b3530; color: #9cc7aa; border-color: #3d5245; }

@media (max-width: 991.98px) {
    .devocionales { grid-template-columns: minmax(0, 1fr); }
    .devocionales-lista { position: static; max-height: none; }
    .devocionales-lista .lista-personajes { overflow: visible; }
    .devocional-titulo { font-size: 1.5rem; }
}

/* =============================================================================
   Administración
   ============================================================================= */
.pestanas-admin { gap: 4px; flex-wrap: nowrap; overflow-x: auto; }
.pestanas-admin .nav-link { white-space: nowrap; color: var(--lb-texto); border-radius: 10px; }
.pestanas-admin .nav-link.active { background: var(--lb-azul); color: #fff; }
[data-bs-theme="dark"] .pestanas-admin .nav-link.active { color: #1c1b19; }
.admin.solo-editor { grid-template-columns: minmax(0, 1fr); }
.admin.solo-editor .personajes-lista { display: none; }
.form-admin .form-control, .form-admin .form-select { border-radius: 10px; }
.texto-codigo { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .86rem; line-height: 1.55; }
.revision-citas { margin: -8px 0 14px; min-height: 0; }
.caja-generar { border: 1px dashed var(--lb-borde); border-radius: 12px; padding: 12px 14px; background: var(--bs-tertiary-bg); }
.opciones-ver {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: 280px; overflow-y: auto;
    background: var(--lb-tarjeta); border: 1px solid var(--lb-borde); border-radius: 12px; box-shadow: var(--lb-sombra); padding: 4px;
}
.opciones-ver button {
    display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; text-align: left;
    padding: 7px 10px; border-radius: 8px; color: var(--lb-texto); font-size: .9rem;
}
.opciones-ver button:hover { background: var(--bs-tertiary-bg); }
.opciones-ver button i { color: var(--lb-violeta); }
.opciones-ver button small { margin-left: auto; color: var(--lb-suave); }
.btn-close-sm { width: .55em; height: .55em; padding: .15em; background-size: .55em; }
/* =============================================================================
   Estudios
   ============================================================================= */
.item-estudio { display: block; padding: 9px 10px; border-radius: 10px; color: var(--lb-texto); text-decoration: none; border-bottom: 1px solid var(--lb-borde); }
.item-estudio:hover { background: var(--bs-tertiary-bg); color: var(--lb-texto); }
.item-estudio.activo { background: var(--lb-azul-claro); border-bottom-color: transparent; }
.item-estudio .nombre { display: block; font-weight: 600; font-size: .93rem; line-height: 1.25; }
.item-estudio .resumen { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem; color: var(--lb-suave); margin-top: 2px; }
.item-estudio .meta { display: block; font-size: .72rem; color: var(--lb-suave); margin-top: 3px; }
.etiqueta-estudio { color: var(--lb-violeta); font-weight: 600; }

.barra-estudio { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.estado-guardado { font-size: .78rem; color: var(--lb-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boton-icono.activo { color: var(--lb-azul); background: var(--lb-azul-claro); }
.titulo-estudio, .etiquetas-estudio { display: block; width: 100%; border: 0; outline: 0; background: transparent; color: var(--lb-texto); padding: 0; }
.titulo-estudio { font-size: 1.9rem; font-weight: 800; letter-spacing: -.5px; line-height: 1.2; }
.etiquetas-estudio { font-size: .85rem; color: var(--lb-violeta); margin: 4px 0 10px; }
.titulo-estudio::placeholder, .etiquetas-estudio::placeholder { color: var(--lb-suave); opacity: .7; }
.barra-formato {
    position: sticky; top: var(--alto-superior, 76px); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
    padding: 6px; margin: 0 -6px 12px; background: var(--lb-tarjeta); border: 1px solid var(--lb-borde); border-radius: 12px;
}
.barra-formato button {
    display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; color: var(--lb-texto);
    min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px; font-size: 1.02rem;
}
.barra-formato button:hover { background: var(--bs-tertiary-bg); }
.barra-formato button.insertar { color: var(--lb-azul); font-size: .9rem; font-weight: 600; }
.barra-formato .separador { width: 1px; height: 22px; background: var(--lb-borde); margin: 0 4px; }

.contenido-estudio { min-height: 320px; outline: 0; font-size: calc(var(--lb-tamano) - 1px); line-height: 1.75; font-family: 'Literata', Georgia, serif; }
.contenido-estudio:empty::before { content: 'Escribe aquí…'; color: var(--lb-suave); }
.contenido-estudio h2 { font-family: var(--bs-body-font-family); font-size: 1.35rem; font-weight: 800; margin: 1.4rem 0 .5rem; }
.contenido-estudio h3 { font-family: var(--bs-body-font-family); font-size: 1.1rem; font-weight: 700; margin: 1.1rem 0 .4rem; }
.contenido-estudio p { margin: 0 0 .8rem; }
.contenido-estudio blockquote { border-left: 4px solid var(--lb-violeta); background: var(--bs-tertiary-bg); border-radius: 0 12px 12px 0; padding: 10px 16px; margin: 0 0 1rem; }
.contenido-estudio blockquote p:last-child { margin: 0; }
.contenido-estudio a.cita-auto { text-decoration: underline dotted; text-underline-offset: 3px; font-weight: 600; }
.texto-cita { display: block; margin: 4px 0 8px; padding: 8px 12px; border-radius: 10px; background: var(--lb-azul-claro); font-style: italic; }
.texto-cita small { font-style: normal; color: var(--lb-suave); }

/* Bloques insertados */
.contenido-estudio figure.bloque {
    position: relative; margin: 0 0 1rem; padding: 12px 16px; border: 1px solid var(--lb-borde); border-radius: 14px;
    background: var(--lb-tarjeta); font-family: var(--bs-body-font-family); font-size: .95rem; line-height: 1.55; user-select: none; overflow: hidden;
}
.contenido-estudio[contenteditable="true"] figure.bloque { cursor: default; }
.contenido-estudio[contenteditable="true"] figure.bloque:hover { border-color: var(--lb-azul); }
.bloque-cab { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 4px; }
.bloque-cab i { color: var(--lb-violeta); }
.bloque-cab a { text-decoration: none; }
.bloque-cab .version { margin-left: auto; font-size: .72rem; font-weight: 600; color: var(--lb-suave); }
.bloque-texto { margin: 0; color: var(--lb-suave); font-size: .88rem; }
.bloque-cita { border-left: 4px solid var(--lb-azul) !important; }
.bloque-cita .texto-biblico { margin: 0; font-size: calc(var(--lb-tamano) - 2px); font-family: 'Literata', Georgia, serif; line-height: 1.7; }
.bloque-mapa, .bloque-lugar { padding: 0 !important; }
.bloque-mapa .bloque-cab, .bloque-lugar .bloque-cab, .bloque-mapa .bloque-texto, .bloque-lugar .bloque-texto { padding: 0 16px; }
.bloque-mapa .bloque-cab, .bloque-lugar .bloque-cab { margin-top: 10px; }
.bloque-mapa .bloque-texto, .bloque-lugar .bloque-texto { padding-bottom: 12px; }
.mini-mapa { position: static; display: block; width: 100%; height: auto; aspect-ratio: 2.4 / 1; cursor: default; touch-action: auto; border-bottom: 1px solid var(--lb-borde); }
.lema-bloque { font-family: 'Noto Serif Hebrew', 'Literata', Georgia, serif; font-size: 1.8rem; line-height: 1; }
.cargando-bloque { height: 48px; border-radius: 8px; background: linear-gradient(90deg, var(--bs-tertiary-bg), var(--lb-borde), var(--bs-tertiary-bg)); background-size: 200% 100%; animation: brillo 1.2s infinite linear; }
.quitar-bloque {
    position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--lb-borde);
    background: var(--lb-tarjeta); color: var(--lb-suave); display: none; align-items: center; justify-content: center; font-size: .8rem;
}
figure.bloque:hover .quitar-bloque, figure.bloque:focus-within .quitar-bloque { display: inline-flex; }
.quitar-bloque:hover { color: #dc2626; border-color: #dc2626; }
@media (hover: none) { .contenido-estudio[contenteditable="true"] .quitar-bloque { display: inline-flex; } }

/* Diálogos: insertar y agregar a un estudio */
.pestanas-insertar { gap: 4px; flex-wrap: nowrap; overflow-x: auto; }
.pestanas-insertar .nav-link { white-space: nowrap; font-size: .88rem; padding: 6px 10px; color: var(--lb-texto); }
.pestanas-insertar .nav-link.active { background: var(--lb-azul); color: #fff; }
.opcion-insertar, .opcion-estudio {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; color: var(--lb-texto);
    padding: 9px 10px; border-radius: 10px;
}
.opcion-insertar:hover, .opcion-estudio:hover { background: var(--bs-tertiary-bg); }
.opcion-insertar > i, .opcion-estudio > i { color: var(--lb-violeta); font-size: 1.05rem; }
.opcion-insertar .nombre, .opcion-estudio .nombre { display: block; font-weight: 600; }
.opcion-insertar .rol, .opcion-estudio .rol { display: block; font-size: .8rem; color: var(--lb-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vista-previa { padding: 10px 14px; border-radius: 10px; background: var(--bs-tertiary-bg); }

/* Página pública de un estudio compartido */
.pagina-compartida { background: var(--lb-fondo); }
.cabecera-compartida { display: flex; align-items: center; gap: 14px; padding: 12px 20px; background: var(--lb-tarjeta); border-bottom: 1px solid var(--lb-borde); }
.cabecera-compartida .marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.cabecera-compartida .marca img { width: 34px; height: 34px; }
.etiqueta-compartida { font-size: .8rem; font-weight: 600; color: var(--lb-suave); }
.contenedor-compartido { max-width: 860px; margin: 24px auto; padding: 0 16px; }
.titulo-compartido { font-size: 2rem; font-weight: 800; letter-spacing: -.5px; margin-bottom: 4px; }
.pie-compartido { font-size: .8rem; color: var(--lb-suave); text-align: center; margin: 18px 0 40px; }
@media (max-width: 575.98px) {
    .titulo-compartido, .titulo-estudio { font-size: 1.45rem; }
    .contenedor-compartido { margin-top: 12px; padding: 0 10px; }
    .etiqueta-compartida { display: none; }
}

/* Impresión (o guardar como PDF): solo el estudio */
@media print {
    body { background: #fff !important; }
    .lateral, .superior, .encabezado, .personajes-lista, .barra-estudio, .barra-formato, .etiquetas-estudio, .quitar-bloque,
    .cabecera-compartida, .aviso-flotante, .solo-lista-movil { display: none !important; }
    .principal, .vista, .contenedor-compartido { margin: 0 !important; padding: 0 !important; max-width: none !important; }
    .personajes { display: block !important; }
    .tarjeta { box-shadow: none !important; border: 0 !important; }
    .personajes-detalle { display: block !important; }
    .contenido-estudio figure.bloque { break-inside: avoid; }
    .contenido-estudio a { color: inherit; text-decoration: none; }
}
/* =============================================================================
   Referencias cruzadas
   ============================================================================= */
.lista-referencias { list-style: none; margin: 0; padding: 0; }
.referencia { padding: 9px 0; border-bottom: 1px solid var(--lb-borde); }
.referencia:last-child { border-bottom: 0; }
.referencia .ref { font-weight: 700; font-size: .88rem; text-decoration: none; white-space: nowrap; }
.referencia .ref:hover { text-decoration: underline; }
.referencia .desde { font-size: .7rem; color: var(--lb-suave); white-space: nowrap; }
.referencia .relevancia { flex: 0 0 38px; height: 4px; border-radius: 2px; background: var(--lb-borde); overflow: hidden; }
.referencia .relevancia span { display: block; height: 100%; background: var(--lb-violeta); opacity: .7; }
.referencia .acciones { margin-left: auto; display: flex; gap: 2px; }
.referencia .acciones .boton-plano { width: 28px; height: 28px; font-size: .85rem; }
.referencia .texto-biblico { margin: 3px 0 0; font-size: calc(var(--lb-tamano) - 4px); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.referencia .texto-biblico:hover { -webkit-line-clamp: unset; }
.fuente-referencias { font-size: .7rem; color: var(--lb-suave); margin-top: 8px; }
.panel-lateral .nav-underline { flex-wrap: wrap; row-gap: 2px; }

/* Recordatorio por correo de un plan */
.caja-recordatorio { margin-top: 16px; padding: 12px 14px; border: 1px dashed var(--lb-borde); border-radius: 12px; }
.caja-recordatorio.activa { border-style: solid; border-color: var(--lb-azul); background: var(--lb-azul-claro); }
.caja-recordatorio .form-check-input { cursor: pointer; }
/* ---------------------------------------------------------------------------
   App instalable: barra "Sin conexión"
   --------------------------------------------------------------------------- */
.barra-sin-conexion {
    display: flex; align-items: center; gap: 8px;
    margin: 0 28px 8px; padding: 8px 14px; border-radius: 10px;
    background: #fff7e6; color: #8a5300; border: 1px solid #f6dfb0;
    font-size: .85rem; line-height: 1.35;
}
.barra-sin-conexion i { font-size: 1.05rem; flex-shrink: 0; }
[data-bs-theme="dark"] .barra-sin-conexion { background: #33291a; color: #e8c78e; border-color: #4a3a22; }
@media (max-width: 991.98px) { .barra-sin-conexion { margin: 0 14px 6px; } }