/* ====================================================== */ /* Biblia Correcta — CSS unificado LTR/RTL */ /* Usa dir="ltr" o dir="rtl" en o en #ib-frontend */ /* ====================================================== */ /* ===== Botón de Favoritos (Marcador) ===== */ .ib-favorite-button { background: none; border: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; outline: none; overflow: visible; -webkit-tap-highlight-color: transparent; } /* Forzar transparencia absoluta para evitar fondos heredados */ button.ib-favorite-button, .ib-favorite-button { background-color: transparent !important; background-image: none !important; box-shadow: none !important; outline: none !important; appearance: none !important; } /* Si hubiera pseudo-elementos con color de fondo, los eliminamos */ button.ib-favorite-button::before, button.ib-favorite-button::after { background: none !important; content: none !important; } /* Por si algún inline-style aplica fondo verde */ button.ib-favorite-button[style] { background: transparent !important; } /* Iconos regular y solid dentro del botón de favoritos */ .ib-favorite-button .icon-regular svg, .ib-favorite-button .icon-solid svg { width: 32px; height: 32px; fill: #1D3557; stroke: #1D3557; transition: fill 0.3s, stroke 0.3s, transform 0.3s; transform-origin: center; } /* Hover: agranda un poco y oscurece el ícono */ .ib-favorite-button:hover .icon-regular svg, .ib-favorite-button:hover .icon-solid svg { transform: scale(1.1); fill: #102240; stroke: #102240; } /* Mostrar el SVG solid cuando el botón esté marcado */ .ib-favorite-button[data-added="true"] .icon-regular { display: none; } .ib-favorite-button[data-added="true"] .icon-solid { display: inline-block; } /* Cuando NO está marcado, mostrar el SVG regular y ocultar el solid */ .ib-favorite-button[data-added="false"] .icon-regular { display: inline-block; } .ib-favorite-button[data-added="false"] .icon-solid { display: none; } /* Quitar cualquier fondo en hover, focus y active */ .ib-favorite-button:hover, .ib-favorite-button:focus, .ib-favorite-button:active { background: none !important; outline: none !important; box-shadow: none !important; } /* Barra de acciones (compartir/guardar) */ #ib-actions-row{ display:inline-flex; gap:14px; align-items:center; margin-top:8px; } /* Asegura estilo icon-only para ambos botones */ #ib-actions-row .ib-favorite-button, #ib-actions-row .ib-share-icon-btn{ background: none !important; border: none !important; padding: 0 !important; box-shadow: none !important; display: inline-flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; } /* Icono "Compartir" con look de favorito */ .ib-share-icon-btn i{ font-size: 32px; line-height: 1; color: #1D3557; transition: transform .3s, color .3s; } .ib-share-icon-btn:hover i{ transform: scale(1.1); color: #102240; } /* Mini toast para "copiado" */ .ib-copy-toast{ position: fixed; inset-block-end: 18px; /* bottom */ inset-inline-start: 50%; /* left:50% (o right:50% en RTL) */ transform: translateX(-50%); background:#111;color:#fff;padding:8px 12px;border-radius:6px;font-size:14px;z-index:99999; box-shadow:0 2px 10px rgba(0,0,0,.25); } /* Modal aviso login */ .modal-login-aviso { position: fixed; z-index: 11000 !important; inset: 0; /* cubre toda la pantalla (top/right/bottom/left) */ background-color: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; } .modal-login-aviso-content { background: #fff; padding: 20px 30px; border-radius: 8px; max-width: 600px; max-height: 80vh; text-align: center; font-size: 1.1em; box-shadow: 0 4px 15px rgba(0,0,0,0.2); display: flex; flex-direction: column; justify-content: space-between; } .modal-login-aviso-text { overflow-y: auto; margin-bottom: 20px; flex-grow: 1; } #modal-login-close { padding: 8px 20px; border: none; background-color: #0073aa; color: white; font-weight: bold; border-radius: 4px; cursor: pointer; flex-shrink: 0; } #modal-login-close:hover { background-color: #005177; } /* —— Palabras de Jesús ——————————— */ .wj, .wj * { color: #b22222 !important; font-weight: 600; } .wj em, .wj i { color: inherit !important; font-style: italic; } /* Compatibilidad con clase anterior */ .rs { color: #b22222; font-style: normal; } .rs i, .rs em { font-style: italic; } /* Encabezados del texto */ #ib-texto h1, #ib-texto h2, #ib-texto h3 { line-height: 0.5 !important; margin-bottom: 1em !important; text-indent: 0 !important; text-align: start; /* coherente con LTR/RTL */ } /* ====================================================== */ /* Estilos para DESKTOP / TABLET (>=768px) */ /* ====================================================== */ @media (min-width: 768px) { #ib-frontend-container { margin-bottom: 20px; font-family: "Roboto", sans-serif; } /* Base: Ajuste de alineación */ .ib-field { display: flex !important; align-items: center; gap: 5px; margin-bottom: 5px; } /* Etiquetas con margen lógico */ .ib-field label { font-weight: bold !important; white-space: nowrap !important; margin-inline-end: 12px !important; /* antes: margin-right */ } /* Extra espacio para 2º y 3º campo */ .ib-field:nth-child(2) label, .ib-field:nth-child(3) label { margin-inline-start: 20px !important; /* antes: margin-left */ } .ib-field:first-child { flex-grow: 1; min-width: 220px; max-width: 300px; } .ib-field:nth-child(2) { flex: 0 0 282px; } /* Tamaño del input "Capítulo" */ .ib-field.small { max-width: 85px !important; } /* Inputs y selects */ .ib-field select, .ib-field input { width: 100% !important; height: 40px !important; font-size: 18px !important; padding: 8px !important; border: 2px solid #aaa !important; border-radius: 6px !important; transition: border-color 0.3s ease-in-out; appearance: none !important; } /* Tom Select */ .ts-wrapper { width: 100% !important; height: 40px !important; } .ts-wrapper .ts-control { height: 45px !important; font-size: 18px !important; display: flex; align-items: center; } .ts-dropdown-content .option { font-size: 17px !important; padding: 10px 12px !important; } /* Pasaje full width */ .ib-field.full-width { width: 100% !important; max-width: 100% !important; } .ts-control { font-size: 17px !important; } .ts-control input { display: none !important; } .ib-grid { max-width: 768px; margin: 0 auto; display: flex; flex-direction: column; gap: 5px; } .ib-row { display: flex; align-items: center; gap: 8px; } #ib-pasaje { width: 100% !important; } .ts-dropdown-spacer{ height: 0; transition: height .15s ease; display: block !important; /* <- que exista también en desktop */ } /* Campo capítulo */ #ib-capitulo { border: 1px solid #aaa !important; border-radius: 4px !important; max-width: 55px !important; width: 55px !important; padding: 8px !important; height: 45px !important; text-align: center; font-size: 18px !important; margin-top: 5px !important; transition: border-color 0.3s ease-in-out; } #ib-capitulo[readonly] { border-color: #ccc !important; cursor: pointer !important; outline: none !important; box-shadow: none !important; } /* Tabla de Capítulos */ #ib-capitulo-table { width: 100%; margin-top: 5px; display: flex; justify-content: center; cursor: pointer !important; } #ib-capitulo-table table.chapter-table { width: 100%; border-collapse: separate; border-spacing: 8px; } #ib-capitulo-table table.chapter-table td.chapter-cell { width: 35px; height: 35px; border: 1px solid #ccc; border-radius: 6px; background: #fdfdfd; text-align: center; vertical-align: middle; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; font-size: 14px; font-weight: 500; color: #333; } #ib-capitulo-table table.chapter-table td.chapter-cell:hover { background: #0073aa; color: #fff; } #ib-contenido { max-width: 768px; margin: 0 auto; } /* Tom Select (LIBRO) */ #ib-libro + .ts-wrapper { width: 100% !important; max-width: 274px !important; } #ib-libro + .ts-wrapper .ts-control { display: flex !important; align-items: center !important; justify-content: flex-start !important; padding-inline: 15px !important; line-height: 40px !important; overflow: hidden !important; white-space: nowrap !important; } #ib-libro + .ts-wrapper .ts-control input { display: inline-block !important; width: auto !important; height: 100% !important; min-width: 1px !important; max-width: 100% !important; flex-grow: 1 !important; opacity: 1 !important; border: none !important; outline: none !important; background: transparent !important; font-size: inherit !important; color: inherit !important; padding: 0 !important; text-align: start !important; /* clave */ white-space: nowrap !important; overflow: hidden !important; } /* Botones de navegación (Desktop / Tablet) */ .ib-navigation { display: flex !important; justify-content: space-between !important; align-items: center !important; margin: 10px 0 !important; padding: 5px 0 !important; } .ib-nav-btn { display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 5px 5px !important; font-size: 16px !important; font-weight: bold !important; color: #fff !important; background-color: #005f8d !important; border: none !important; border-radius: 8px !important; transition: background-color 0.3s ease, transform 0.2s ease !important; cursor: pointer !important; text-transform: uppercase !important; min-width: 150px !important; text-align: center !important; } .ib-nav-btn:hover { background-color: #0073aa !important; transform: translateY(-2px) !important; } .ib-nav-btn:active { transform: translateY(0) !important; } .ib-nav-text { font-size: 14px !important; font-weight: bold !important; text-transform: uppercase !important; opacity: 0.9 !important; } .ib-nav-abreviatura { font-size: 12px !important; font-weight: normal !important; opacity: 0.7 !important; margin-top: 4px !important; text-align: center !important; } /* Dropdown de Versículos (desktop) */ #ib-pasaje + .ts-wrapper .ts-dropdown { position: absolute !important; inset-block-start: 100% !important; /* top */ inset-inline-start: calc(-1 * (var(--label-w, 110px) + 8px) - 14px) !important; width: calc(100% + var(--label-w, 110px) + 10px + 24px) !important; margin-block-start: 35px !important; background: #f8fbff !important; border: 1px solid #cfe0ff !important; border-radius: 10px !important; box-shadow: none !important; padding: 0 12px !important; box-sizing: border-box !important; overflow: hidden !important; z-index: 10 !important; } #ib-pasaje + .ts-wrapper .ts-dropdown .ts-dropdown-content { max-height: none !important; overflow: visible !important; padding: 0 !important; } #ib-pasaje + .ts-wrapper .ts-dropdown .option { display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 15px 0 !important; padding: 12px !important; border-radius: 8px !important; background: #e8f0ff !important; border: 1px solid #d7e3ff !important; color: #0f2e6d !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; } #ib-pasaje + .ts-wrapper .ts-dropdown .option:hover { background: #dbe7ff !important; } } /* El grupo “Versículos” se alinea arriba para que el dropdown no lo “centre” */ .ib-field.full-width{ align-items: flex-start !important; } /* Alineación visual de la etiqueta con el control (no cambia tamaño del input) */ .ib-field.full-width label{ padding-top: 8px !important; } /* El spacer es un bloque que vive DESPUÉS del campo y sólo cambia su altura */ .ts-dropdown-spacer{ display: block !important; /* existe también en desktop */ height: 0; /* la altura real la pone el JS */ transition: height .15s ease; } /* 🔹 Separación interna en RTL para Testamento y Pasaje */ [dir="rtl"] #ib-testamento + .ts-wrapper .ts-control, [dir="rtl"] #ib-pasaje + .ts-wrapper .ts-control { padding-inline: 15px !important; /* espacio en ambos lados según dirección */ align-items: center !important; justify-content: flex-start !important; } /* (Opcional) Mantener coherencia visual del texto en RTL */ [dir="rtl"] #ib-testamento + .ts-wrapper .ts-control, [dir="rtl"] #ib-pasaje + .ts-wrapper .ts-control { direction: rtl; text-align: right; } .ib-nav-btn:hover { background-color: #0073aa !important; transform: translateY(-2px) !important; } .ib-nav-btn:active { transform: translateY(0) !important; } .ib-nav-text { font-size: 18px !important; font-weight: bold !important; text-transform: uppercase !important; opacity: 0.9 !important; } .ib-nav-abreviatura { font-size: 12px !important; font-weight: normal !important; opacity: 0.7 !important; margin-top: 4px !important; text-align: center !important; } /* ====================================================== */ /* Estilos para MÓVIL (<768px) */ /* ====================================================== */ @media (max-width: 767px) { #ib-frontend-container { margin-bottom: 20px; font-family: "Roboto", sans-serif; } /* Base: layout en columna */ .ib-grid { display: flex; flex-direction: column; width: 100%; } /* Evitar saltos cuando el pasaje es alto */ .ib-field { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 15px; flex-wrap: nowrap; } /* Tamaño por defecto para LTR (español, etc.) */ .ib-field label { flex: 0 0 auto; white-space: nowrap; font-weight: bold; font-size: 18px !important; /* antes 22px */ padding-top: 8px; } /* Override sólo para RTL (árabe, hebreo, etc.) */ [dir="rtl"] .ib-field label { font-size: 22px !important; } /* Controles base */ .ib-field select, .ib-field input, .ts-wrapper { flex: 1 1 auto; min-width: 0; width: 100% !important; max-width: 100% !important; height: 44px !important; font-size: 18px !important; padding: 10px !important; border: 1px solid #aaa !important; border-radius: 5px !important; transition: border-color 0.3s ease-in-out; appearance: none !important; background: #fff !important; box-sizing: border-box; } .ts-wrapper { border: none !important; padding: 0 !important; } .ts-wrapper .ts-control { height: 44px !important; font-size: 18px !important; display: flex; align-items: center; border: 1px solid #aaa !important; border-radius: 5px !important; background: #fff !important; padding: 5px 12px !important; box-sizing: border-box; } .ts-dropdown .ts-dropdown-content .option { font-size: 18px !important; padding: 10px 15px !important; } /* LIBRO */ #ib-libro + .ts-wrapper { flex: 1 1 auto !important; min-width: 0 !important; max-width: 100% !important; } #ib-libro + .ts-wrapper .ts-control { display: flex !important; align-items: center !important; justify-content: flex-start !important; padding-inline: 15px !important; line-height: 44px !important; overflow: hidden !important; white-space: nowrap !important; margin-bottom: 10px !important; } .ts-control input { display: none !important; opacity: 1 !important; } #ib-libro + .ts-wrapper .ts-control input { display: inline-block !important; color: #333 !important; width: auto !important; min-width: 1px !important; padding: 0 !important; text-align: start !important; } /* Capítulo */ #ib-capitulo { order: 2; text-align: center; margin-bottom: 0.5px !important; transition: border-color 0.3s ease-in-out; } #ib-capitulo[readonly] { border-color: #aaa !important; cursor: pointer !important; outline: none !important; box-shadow: none !important; } /* PASAJE */ .ib-field.full-width .ts-control { height: 70px !important; line-height: 1.6 !important; font-size: 18px !important; padding: 12px !important; border: 1px solid #aaa !important; border-radius: 5px !important; background: #fff !important; white-space: normal !important; overflow: hidden !important; text-overflow: ellipsis !important; margin-bottom: 10px !important; width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; } /* Wrapper como flex item (mejor ajuste) + contexto para dropdown */ #ib-pasaje + .ts-wrapper { display: flex !important; flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; box-sizing: border-box !important; margin-inline-start: 0 !important; position: relative !important; /* contexto de posicionamiento */ } #ib-pasaje + .ts-wrapper .ts-control { width: 100% !important; } /* Dropdown expandido hacia la etiqueta (funciona en LTR y RTL) */ #ib-pasaje + .ts-wrapper .ts-dropdown { position: absolute !important; inset-block-start: 100% !important; /* top */ inset-inline-start: calc(-1 * (var(--label-w, 110px) + 8px) - 14px) !important; /* inicio lógico */ width: calc(100% + var(--label-w, 110px) + 10px + 24px) !important; margin-block-start: 35px !important; /* margin-top lógico */ background: #f8fbff !important; border: 1px solid #cfe0ff !important; border-radius: 10px !important; padding: 0 12px !important; z-index: 10 !important; } #ib-pasaje + .ts-wrapper .ts-dropdown .ts-dropdown-content { max-height: none !important; overflow: visible !important; padding: 0 !important; } #ib-pasaje + .ts-wrapper .ts-dropdown .option { display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 15px 0 !important; padding: 12px !important; border-radius: 8px !important; background: #e8f0ff !important; border: 1x solid #d7e3ff !important; color: #0f2e6d !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; } #ib-pasaje + .ts-wrapper .ts-dropdown .option:hover { background: #dbe7ff !important; } /* Spacer visible solo en móvil */ .ts-dropdown-spacer { height: 0; transition: height 0.15s ease; display: block !important; } /* Navegación móvil */ .ib-navigation { display: flex !important; justify-content: space-between !important; align-items: center !important; margin: 10px 0 !important; padding: 5px 0 !important; } .ib-nav-btn { display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 4px 4px !important; font-size: 16px !important; font-weight: bold !important; color: #fff !important; background-color: #005f8d !important; border: none !important; border-radius: 8px !important; transition: background 0.3s ease, transform 0.2s ease !important; cursor: pointer !important; text-transform: uppercase !important; min-width: 120px !important; text-align: center !important; } .ib-nav-btn:hover { background-color: #0073aa !important; transform: translateY(-2px) !important; } .ib-nav-btn:active { transform: translateY(0) !important; } .ib-nav-text { font-size: 14px !important; font-weight: bold !important; text-transform: uppercase !important; opacity: 0.9 !important; } .ib-nav-abreviatura { font-size: 12px !important; font-weight: normal !important; opacity: 0.7 !important; margin-top: 4px !important; text-align: center !important; } #btn-anterior, #btn-anterior-bajo { order: 1; } #btn-siguiente, #btn-siguiente-bajo { order: 2; } .modal-login-aviso-content { margin: 0 15px; max-width: calc(100% - 30px); padding: 20px 15px; } /* Tabla de Capítulos */ #ib-capitulo-table { width: 100%; margin-top: 5px; display: flex; justify-content: center; cursor: pointer !important; } #ib-capitulo-table table.chapter-table { width: 100%; border-collapse: separate; border-spacing: 8px; } #ib-capitulo-table table.chapter-table td.chapter-cell { width: 35px; height: 35px; border: 1px solid #ccc; border-radius: 6px; background: #fdfdfd; text-align: center; vertical-align: middle; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; font-size: 14px; font-weight: 500; color: #333; } #ib-capitulo-table table.chapter-table td.chapter-cell:hover { background: #0073aa; color: #fff; } #ib-contenido { max-width: 100%; } .ib-citation:hover { text-decoration: underline; } } /* ───────────────────────────────────────────────────── */ /* TomSelect: centrado vertical y sin “brillos” al foco */ /* ───────────────────────────────────────────────────── */ .ts-wrapper .ts-control, .ts-wrapper .ts-control .item, .ts-wrapper .ts-control .placeholder { height: 44px !important; padding-top: 0 !important; padding-bottom: 0 !important; display: flex !important; align-items: center !important; line-height: normal !important; } .ts-wrapper .ts-control.ts-control-focus { padding-top: 0 !important; padding-bottom: 0 !important; box-shadow: none !important; } /* (Opcional) aumentar legibilidad en Desktop para idiomas RTL */ @media (min-width: 768px) { :dir(rtl) .ib-field label, [dir="rtl"] .ib-field label { font-size: 22px !important; } :dir(rtl) .ib-field select, :dir(rtl) .ib-field input, :dir(rtl) .ts-wrapper .ts-control, [dir="rtl"] .ib-field select, [dir="rtl"] .ib-field input, [dir="rtl"] .ts-wrapper .ts-control { font-size: 22px !important; } :dir(rtl) .ts-dropdown-content .option, [dir="rtl"] .ts-dropdown-content .option { font-size: 22px !important; } :dir(rtl) .ib-nav-text, [dir="rtl"] .ib-nav-text { font-size: 18px !important; } } /* ===== MÓVIL: Versículos con etiqueta a la izquierda ===== */ @media (max-width: 767px) { /* El campo de Versículos puede “romper” línea solo para el spacer */ .ib-field.full-width{ flex-wrap: wrap !important; align-items: flex-start !important; } /* Etiqueta fija a la izquierda (ancho constante) */ .ib-field.full-width label{ margin-inline-end: 2px !important; padding-top: 8px !important; /* alineación visual con el control */ white-space: nowrap !important; } /* TomSelect de #ib-pasaje ocupa todo el resto de la fila */ .ib-field.full-width #ib-pasaje + .ts-wrapper{ order: 1; flex: 1 1 calc(100% - 120px - 12px) !important; /* rellena el espacio libre */ min-width: 0 !important; /* evita recortes */ width: auto !important; } /* El spacer va DEBAJO (segunda línea) y no afecta el ancho del input */ .ib-field.full-width .ts-dropdown-spacer{ order: 2; flex: 0 0 100% !important; /* fuerza nueva línea */ width: 100% !important; height: 0; /* la altura la pone el JS */ display: block !important; transition: height .15s ease; } } /* === Alinear "Versículos" al borde derecho en escritorio === */ @media (min-width: 768px){ /* El grupo se vuelve grid: etiqueta + control a 1fr exacto */ .ib-field.full-width{ display: grid !important; grid-template-columns: max-content 1fr; /* etiqueta | campo */ column-gap: 10px !important; align-items: start !important; width: 100% !important; } /* Etiqueta a la izquierda (sin reservar ancho fijo) */ .ib-field.full-width label{ margin: 0 !important; padding-top: 8px !important; white-space: nowrap !important; } /* Wrapper de TomSelect: bloque, sin márgenes y pudiendo encoger */ #ib-pasaje + .ts-wrapper{ display: block !important; flex: 1 1 auto !important; min-width: 0 !important; /* evita que algo “empuje” y recorte 1–2 px */ width: 100% !important; max-width: 100% !important; margin: 0 !important; /* quita márgenes de tema/TomSelect */ box-sizing: border-box !important; } /* El control interno llena el 100% sin recortes */ #ib-pasaje + .ts-wrapper .ts-control{ width: 100% !important; max-width: 100% !important; } } /* ——— Texto del pasaje: dirección estable por bloque ——— */ #ib-texto { direction: inherit; } /* Encabezados: dirección estable; NO forzar alineación NI line-height */ #ib-texto h1, #ib-texto h2, #ib-texto h3{ direction: inherit !important; unicode-bidi: embed !important; text-align: start; /* sin !important → el autor puede centrar/izq/der */ /* NO line-height → respeta el editor */ } /* Párrafos, listas y citas:
no invierte; NO forzar alineación */ #ib-texto p, #ib-texto li, #ib-texto blockquote{ direction: inherit !important; unicode-bidi: embed !important; text-align: start; line-height: 1.7 !important; /* mejor lectura de Biblia/teología */ } /* Fragmentos inline no alteran el orden del bloque */ #ib-texto p *, #ib-texto li *, #ib-texto blockquote *{ unicode-bidi: isolate; } /* —— Respetar alineación explícita del autor —— */ #ib-texto .has-text-align-center, #ib-texto .aligncenter { text-align: center !important; } #ib-texto .has-text-align-right, #ib-texto .alignright { text-align: right !important; } #ib-texto .has-text-align-left, #ib-texto .alignleft { text-align: left !important; } /* —— Alineación por defecto según dirección —— */ [dir="rtl"] #ib-texto :where(h1,h2,h3,p,li,blockquote):not(.has-text-align-center,.has-text-align-right,.has-text-align-left,.aligncenter,.alignright,.alignleft,[style*="text-align"]){ text-align: right; } [dir="ltr"] #ib-texto :where(h1,h2,h3,p,li,blockquote):not(.has-text-align-center,.has-text-align-right,.has-text-align-left,.aligncenter,.alignright,.alignleft,[style*="text-align"]){ text-align: left; }