/* ========================================================= TOPICS — Share/Fav: sin fondo del tema + action buttons ========================================================= */ /* 1) Botones: sin fondo, sin borde, sin sombra */ #ib-topic-actions-row #btn-topic-share, #ib-topic-actions-row #btn-add-topic-favorite{ background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; outline: none !important; padding: 0 !important; -webkit-tap-highlight-color: transparent !important; appearance: none !important; } /* 2) Estados hover/focus/active (evita AZUL y borde del tema) */ #ib-topic-actions-row #btn-topic-share:hover, #ib-topic-actions-row #btn-topic-share:focus, #ib-topic-actions-row #btn-topic-share:active, #ib-topic-actions-row #btn-topic-share:focus-visible, #ib-topic-actions-row #btn-add-topic-favorite:hover, #ib-topic-actions-row #btn-add-topic-favorite:focus, #ib-topic-actions-row #btn-add-topic-favorite:active, #ib-topic-actions-row #btn-add-topic-favorite:focus-visible{ background: transparent !important; background-color: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important; } /* 3) Algunos temas dibujan borde con pseudo-elementos */ #ib-topic-actions-row #btn-topic-share::before, #ib-topic-actions-row #btn-topic-share::after, #ib-topic-actions-row #btn-add-topic-favorite::before, #ib-topic-actions-row #btn-add-topic-favorite::after{ content: none !important; background: none !important; box-shadow: none !important; } /* 4) Barra de acciones */ #ib-topic-actions-row{ display: inline-flex; align-items: center; gap: 14px; margin-top: 8px; } /* 5) Botón: icono + texto */ #ib-topic-actions-row .ib-action-btn{ display: inline-flex !important; align-items: center; gap: 10px; cursor: pointer; } /* 6) Texto */ #ib-topic-actions-row .ib-action-label{ font-size: 15px; font-weight: 600; line-height: 1; color: #1D3557; user-select: none; white-space: nowrap; } #ib-topic-actions-row .ib-action-btn:hover .ib-action-label{ color: #102240; } /* ========================================================= ✅ FIX: centrar el SVG del favorito (igual que en frontend.css) ========================================================= */ #ib-topic-actions-row .ib-favorite-button .icon-regular, #ib-topic-actions-row .ib-favorite-button .icon-solid{ display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; } /* ========================================================= Compartir: icono mismo tamaño y alineado ========================================================= */ #ib-topic-actions-row .ib-share-icon-btn i{ font-size: 32px; line-height: 1; color: #1D3557; transition: transform .3s, color .3s; } #ib-topic-actions-row .ib-share-icon-btn:hover i{ transform: scale(1.1); color: #102240; } /* ====================================================== */ /* Biblia Correcta — FRONTEND TOPICS (LTR/RTL) */ /* Replica el estilo de frontend.css para /temas/ */ /* Usa dir="ltr" o dir="rtl" en o en el wrapper */ /* ====================================================== */ /* ----------------------------- Variables / base ------------------------------ */ :root{ --ib-blue-900:#1D3557; --ib-blue-800:#102240; --ib-blue-700:#0f2e6d; --ib-blue-600:#005f8d; --ib-blue-500:#0073aa; --ib-card:#ffffff; --ib-border:#aaa; --ib-soft:#f8fbff; --ib-soft-border:#cfe0ff; --ib-soft-card:#e8f0ff; --ib-soft-card-border:#d7e3ff; } #ib-topics-container, #ib-topics-reader{ font-family: "Roboto", sans-serif; } /* Asegura que el texto respete la dirección */ #ib-topics-container, #ib-topics-reader, #ib-topic-text{ direction: inherit; } /* ------------------------------------------------------- BIBLIOTECA /temas/ -------------------------------------------------------- */ .ib-topics-library{ max-width: 1200px; margin: 0 auto; padding: 20px 10px; } .ib-topics-header{ max-width: 980px; margin: 0 auto 18px; padding: 0 10px; } .ib-topics-header h1{ margin: 0 0 10px; font-size: 30px; font-weight: 800; color: var(--ib-blue-900); text-align: start; } .ib-topics-header p{ margin: 0 0 25px; opacity: .85; line-height: 1.6; text-align: start; } .ib-topics-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .ib-topic-card{ display: block; text-decoration: none; border-radius: 16px; overflow: hidden; background: var(--ib-card); box-shadow: 0 10px 22px rgba(0,0,0,.08); transition: transform .15s ease, box-shadow .15s ease; } .ib-topic-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.12); } .ib-topic-card-media img{ width: 100%; height: 170px; object-fit: cover; display: block; } .ib-topic-card-placeholder{ width: 100%; height: 170px; background: linear-gradient(135deg, #e8eef6, #f6f8fb); } .ib-topic-card-body{ padding: 14px 14px 16px; } .ib-topic-card-serie{ font-size: 13px; font-weight: 700; opacity: .8; margin-bottom: 6px; color: var(--ib-blue-900); } .ib-topic-card-title{ font-size: 18px; font-weight: 800; margin-bottom: 8px; line-height: 1.25; color: var(--ib-blue-900); } .ib-topic-card-desc{ font-size: 14px; opacity: .85; line-height: 1.5; margin-bottom: 10px; color: #111; } .ib-topic-card-meta{ font-size: 13px; opacity: .7; color: #111; } /* Responsive biblioteca */ @media (max-width: 980px){ .ib-topics-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px){ .ib-topics-grid{ grid-template-columns: repeat(1, minmax(0, 1fr)); } } /* ------------------------------------------------------- LECTOR /temas/estudio/ Replica layout del lector de interpretación -------------------------------------------------------- */ #ib-topics-reader{ margin-bottom: 20px; } /* Igual que interpretación: grid centrado y compacto */ #ib-topics-reader .ib-grid{ max-width: 768px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px !important; padding: 0 10px; } #ib-topic-text{ max-width: 768px; margin: 0 auto; padding: 0 10px; } /* ------------------------------------------------------- Campos (Serie / Estudio) - estilo idéntico a .ib-field Sin pisar .ib-field de interpretación: usamos .ib-topic-field -------------------------------------------------------- */ .ib-topic-field{ display: flex; align-items: center; gap: 5px; margin-bottom: 5px; } .ib-topic-field label{ font-weight: bold; white-space: nowrap; margin-inline-end: 12px; padding-top: 0; text-align: start; } /* Inputs y selects */ .ib-topic-field select, .ib-topic-field input{ width: 100%; height: 40px; font-size: 18px; padding: 8px; border: 2px solid var(--ib-border); border-radius: 6px; transition: border-color 0.3s ease-in-out; appearance: none; background: #fff; box-sizing: border-box; } /* Tom Select wrapper */ #ib-topics-reader .ts-wrapper{ width: 100%; height: 40px; } #ib-topics-reader .ts-wrapper .ts-control{ height: 45px; font-size: 18px; display: flex; align-items: center; } /* opciones en general */ #ib-topics-reader .ts-dropdown-content .option{ font-size: 17px; padding: 10px 12px; } /* ✅ ESTUDIO: NO ocultar el input SI está vacío */ #ib-topics-reader #ib-topic-estudio + .ts-wrapper .ts-control input{ display: block !important; border: none !important; outline: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } /* Cuando NO hay item => placeholder visible */ #ib-topics-reader #ib-topic-estudio + .ts-wrapper .ts-control:not(.has-items) input{ width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; opacity: 1 !important; } /* Cuando SÍ hay item => input no molesta */ #ib-topics-reader #ib-topic-estudio + .ts-wrapper .ts-control.has-items input{ width: 1px !important; min-width: 1px !important; flex: 0 0 1px !important; opacity: 0 !important; pointer-events: none !important; } #ib-topics-reader #ib-topic-estudio + .ts-wrapper .ts-control input::placeholder{ opacity: .75; } /* ----------------------------- Campo full width (ESTUDIO) ------------------------------ */ .ib-topic-field.full-width{ width: 100%; max-width: 100%; align-items: flex-start; } .ib-topic-field.full-width label{ padding-top: 8px; } /* Spacer */ .ts-dropdown-spacer{ display: block !important; height: 0; transition: height .15s ease; } /* ------------------------------------------------------- Dropdown de ESTUDIO — MISMO look que #ib-pasaje -------------------------------------------------------- */ /* Desktop / Tablet */ @media (min-width: 768px){ .ib-topic-field.full-width{ display: grid !important; grid-template-columns: max-content 1fr; column-gap: 10px !important; align-items: start !important; width: 100% !important; } .ib-topic-field.full-width label{ margin: 0 !important; padding-top: 8px !important; white-space: nowrap !important; } #ib-topic-estudio + .ts-wrapper{ display: block !important; flex: 1 1 auto !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; position: relative !important; } #ib-topic-estudio + .ts-wrapper .ts-control{ width: 100% !important; max-width: 100% !important; } #ib-topic-estudio + .ts-wrapper .ts-dropdown{ position: absolute !important; inset-block-start: 100% !important; 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: 20px !important; background: var(--ib-soft) !important; border: 1px solid var(--ib-soft-border) !important; border-radius: 5px !important; box-shadow: none !important; padding: 0 12px !important; box-sizing: border-box !important; overflow: hidden !important; z-index: 10 !important; } #ib-topic-estudio + .ts-wrapper .ts-dropdown{ overflow: hidden !important; } #ib-topic-estudio + .ts-wrapper .ts-dropdown .ts-dropdown-content{ max-height: none !important; overflow: visible !important; padding: 0 !important; } #ib-topic-estudio + .ts-wrapper .ts-dropdown{ overflow: visible !important; } #ib-topic-estudio + .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: 5px !important; background: var(--ib-soft-card) !important; border: 1px solid var(--ib-soft-card-border) !important; color: var(--ib-blue-700) !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; } #ib-topic-estudio + .ts-wrapper .ts-dropdown .option:hover{ background: #dbe7ff !important; } } /* Mobile */ @media (max-width: 767px){ #ib-topics-reader{ margin-bottom: 20px; } #ib-topics-reader .ib-grid{ display: flex; flex-direction: column; gap: 10px !important; width: 100%; } .ib-topic-field{ display: flex; align-items: flex-start; gap: 10px !important; margin-bottom: 15px; flex-wrap: nowrap; } .ib-topic-field label{ flex: 0 0 auto; white-space: nowrap; font-weight: bold; font-size: 18px; padding-top: 8px; } [dir="rtl"] .ib-topic-field label{ font-size: 22px !important; } .ib-topic-field select, .ib-topic-field input, #ib-topics-reader .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 var(--ib-border) !important; border-radius: 5px !important; transition: border-color 0.3s ease-in-out; appearance: none !important; background: #fff !important; box-sizing: border-box; } #ib-topics-reader .ts-wrapper{ border: none !important; padding: 0 !important; } #ib-topics-reader .ts-wrapper .ts-control{ height: 44px !important; font-size: 18px !important; display: flex; align-items: center; border: 1px solid var(--ib-border) !important; border-radius: 5px !important; background: #fff !important; padding: 5px 12px !important; box-sizing: border-box; } .ib-topic-field.full-width .ts-control{ height: 44px !important; font-size: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 0 12px !important; border: 1px solid var(--ib-border) !important; border-radius: 5px !important; background: #fff !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin-bottom: 10px !important; width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; } .ib-topic-field.full-width{ flex-wrap: wrap !important; align-items: flex-start !important; } .ib-topic-field.full-width label{ margin-inline-end: 2px !important; padding-top: 8px !important; white-space: nowrap !important; } .ib-topic-field.full-width #ib-topic-estudio + .ts-wrapper{ order: 1; flex: 1 1 calc(100% - 120px - 12px) !important; min-width: 0 !important; width: auto !important; position: relative !important; box-sizing: border-box !important; margin-inline-start: 0 !important; } .ib-topic-field.full-width .ts-dropdown-spacer{ order: 2; flex: 0 0 100% !important; width: 100% !important; height: 0; display: block !important; transition: height .15s ease; } #ib-topic-estudio + .ts-wrapper .ts-dropdown{ position: absolute !important; inset-block-start: 100% !important; 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: 20px !important; background: var(--ib-soft) !important; border: 1px solid var(--ib-soft-border) !important; border-radius: 5px !important; padding: 0 12px !important; z-index: 10 !important; } #ib-topic-estudio + .ts-wrapper .ts-dropdown{ overflow: hidden !important; } #ib-topic-estudio + .ts-wrapper .ts-dropdown .ts-dropdown-content{ max-height: none !important; overflow: visible !important; padding: 0 !important; } #ib-topic-estudio + .ts-wrapper .ts-dropdown{ overflow: visible !important; } #ib-topic-estudio + .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: 5px !important; background: var(--ib-soft-card) !important; border: 1px solid var(--ib-soft-card-border) !important; color: var(--ib-blue-700) !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; } #ib-topic-estudio + .ts-wrapper .ts-dropdown .option:hover{ background: #dbe7ff !important; } /* RTL: coherencia de padding y dirección (solo en móvil dentro del media) */ [dir="rtl"] #ib-topic-serie + .ts-wrapper .ts-control, [dir="rtl"] #ib-topic-estudio + .ts-wrapper .ts-control{ padding-inline: 15px !important; align-items: center !important; justify-content: flex-start !important; direction: rtl; text-align: right; } /* ✅ Aplica el mismo layout móvil a ib-topic-field e ib-field */ #ib-topics-reader :is(.ib-topic-field, .ib-field){ gap: 14px !important; margin-bottom: 15px !important; } #ib-topics-reader :is(.ib-topic-field, .ib-field) label{ margin-inline-end: 6px !important; } /* ✅ Evitar scroll interno del contenedor padre (Elementor / wrapper) */ #ib-topics-reader, #ib-topics-reader .elementor-widget-container, #ib-topics-reader .elementor-column, #ib-topics-reader .elementor-column-wrap, #ib-topics-reader .elementor-container, #ib-topics-reader .elementor-section, #ib-topics-reader .ib-grid{ overflow-y: visible !important; overflow-x: visible !important; max-height: none !important; height: auto !important; } } /* ✅ cierre correcto del @media móvil */ /* ------------------------------------------------------- RTL extras (igual criterio que frontend.css) -------------------------------------------------------- */ /* padding interno en controles TomSelect (serie/estudio) */ [dir="rtl"] #ib-topic-serie + .ts-wrapper .ts-control, [dir="rtl"] #ib-topic-estudio + .ts-wrapper .ts-control{ padding-inline: 15px !important; align-items: center !important; justify-content: flex-start !important; direction: rtl; text-align: right; } /* Aumentar legibilidad RTL en desktop */ @media (min-width: 768px){ :dir(rtl) .ib-topic-field label, [dir="rtl"] .ib-topic-field label{ font-size: 22px !important; } :dir(rtl) .ib-topic-field select, :dir(rtl) .ib-topic-field input, :dir(rtl) #ib-topics-reader .ts-wrapper .ts-control, [dir="rtl"] .ib-topic-field select, [dir="rtl"] .ib-topic-field input, [dir="rtl"] #ib-topics-reader .ts-wrapper .ts-control{ font-size: 22px !important; } :dir(rtl) #ib-topics-reader .ts-dropdown-content .option, [dir="rtl"] #ib-topics-reader .ts-dropdown-content .option{ font-size: 22px !important; } :dir(rtl) .ib-nav-text, [dir="rtl"] .ib-nav-text{ font-size: 18px !important; } } /* Aumentar legibilidad RTL en móvil */ @media (max-width: 767px){ :dir(rtl) .ib-topic-field label, [dir="rtl"] .ib-topic-field label{ font-size: 22px !important; } :dir(rtl) .ib-topic-field select, :dir(rtl) .ib-topic-field input, :dir(rtl) #ib-topics-reader .ts-wrapper .ts-control, [dir="rtl"] .ib-topic-field select, [dir="rtl"] .ib-topic-field input, [dir="rtl"] #ib-topics-reader .ts-wrapper .ts-control{ font-size: 22px !important; } :dir(rtl) #ib-topics-reader .ts-dropdown-content .option, [dir="rtl"] #ib-topics-reader .ts-dropdown-content .option{ font-size: 22px !important; } :dir(rtl) .ib-nav-text, [dir="rtl"] .ib-nav-text{ font-size: 18px !important; } } /* ------------------------------------------------------- Navegación (mismo look que interpretación) -------------------------------------------------------- */ .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; /* ✅ abreviatura debajo */ align-items: center !important; justify-content: center !important; padding: 8px 12px !important; /* ✅ compacto */ gap: 2px !important; /* ✅ separación vertical pequeña */ font-size: 16px !important; font-weight: bold !important; color: #fff !important; background-color: var(--ib-blue-600) !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: 0 !important; /* ✅ sin ancho mínimo */ width: auto !important; /* ✅ se adapta al contenido */ white-space: nowrap !important; text-align: center !important; } .ib-nav-btn:hover{ background-color: var(--ib-blue-500) !important; transform: translateY(-2px) !important; } .ib-nav-btn:active{ transform: translateY(0) !important; } .ib-nav-text{ font-size: 18px !important; font-weight: bold !important; line-height: 1.1 !important; } .ib-nav-abreviatura{ font-size: 12px !important; font-weight: normal !important; opacity: 0.8 !important; margin-top: 0 !important; /* ✅ ya usamos gap */ line-height: 1.1 !important; } /* ------------------------------------------------------- TomSelect: centrado vertical y sin “brillos” -------------------------------------------------------- */ #ib-topics-reader .ts-wrapper .ts-control, #ib-topics-reader .ts-wrapper .ts-control .item, #ib-topics-reader .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; } #ib-topics-reader .ts-wrapper .ts-control.ts-control-focus{ padding-top: 0 !important; padding-bottom: 0 !important; box-shadow: none !important; } /* ------------------------------------------------------- Contenido del estudio (lector) -------------------------------------------------------- */ #ib-topic-text{ direction: inherit; } #ib-topic-text h1, #ib-topic-text h2, #ib-topic-text h3{ direction: inherit !important; unicode-bidi: embed !important; text-align: start; } #ib-topic-text p, #ib-topic-text li, #ib-topic-text blockquote{ direction: inherit !important; unicode-bidi: embed !important; text-align: start; line-height: 1.7 !important; } #ib-topic-text p *, #ib-topic-text li *, #ib-topic-text blockquote *{ unicode-bidi: isolate; } /* Respetar alineación explícita del autor */ #ib-topic-text .has-text-align-center, #ib-topic-text .aligncenter{ text-align: center !important; } #ib-topic-text .has-text-align-right, #ib-topic-text .alignright{ text-align: right !important; } #ib-topic-text .has-text-align-left, #ib-topic-text .alignleft{ text-align: left !important; } /* Alineación por defecto según dirección */ [dir="rtl"] #ib-topic-text :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-topic-text :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; } /* ------------------------------------------------------- Blindaje móvil contra desbordamiento -------------------------------------------------------- */ @media (max-width: 767px){ #ib-topics-container, #ib-topics-reader, #ib-topic-text{ max-width: 100% !important; overflow-x: hidden !important; } #ib-topic-text{ overflow-wrap: break-word; word-break: break-word; } #ib-topic-text table{ width: 100% !important; table-layout: fixed; } #ib-topic-text td, #ib-topic-text th{ overflow-wrap: break-word; word-break: break-word; } #ib-topic-text img{ max-width: 100% !important; height: auto !important; display: block; } #ib-topics-reader .elementor-widget-container, #ib-topics-reader .elementor-column, #ib-topics-reader .elementor-column-wrap, #ib-topics-reader .elementor-container{ max-width: 100% !important; overflow-x: visible !important; } } /* ====================================================== ✅ TOPICS: Serie con MISMO estilo expandido que Estudio ====================================================== */ /* Desktop / Tablet */ @media (min-width: 768px){ #ib-topics-reader .ib-row{ display: flex !important; flex-direction: column !important; gap: 10px !important; align-items: stretch !important; } #ib-topics-reader #ib-topic-serie{ width: 100% !important; } #ib-topics-reader #ib-topic-serie, #ib-topics-reader #ib-topic-serie + .ts-wrapper{ max-width: 100% !important; } #ib-topics-reader #ib-topic-serie{ /* no visible; TomSelect lo reemplaza */ } #ib-topics-reader :is(.ib-topic-field, .ib-field):has(#ib-topic-serie){ display: grid !important; grid-template-columns: max-content 1fr !important; column-gap: 10px !important; align-items: start !important; width: 100% !important; } #ib-topics-reader :is(.ib-topic-field, .ib-field):has(#ib-topic-serie) label{ margin: 0 !important; padding-top: 8px !important; white-space: nowrap !important; } #ib-topic-serie + .ts-wrapper{ width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; position: relative !important; } #ib-topic-serie + .ts-wrapper .ts-control{ width: 100% !important; max-width: 100% !important; height: 45px !important; font-size: 18px !important; display: flex !important; align-items: center !important; padding-inline: 15px !important; overflow: hidden !important; white-space: nowrap !important; } #ib-topic-serie + .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; white-space: nowrap !important; overflow: hidden !important; } } /* Móvil */ @media (max-width: 767px){ #ib-topics-reader :is(.ib-topic-field, .ib-field):has(#ib-topic-serie){ display: flex !important; align-items: flex-start !important; gap: 10px !important; flex-wrap: nowrap !important; width: 100% !important; } #ib-topic-serie + .ts-wrapper{ flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; } #ib-topic-serie + .ts-wrapper .ts-control{ height: 44px !important; font-size: 18px !important; display: flex !important; align-items: center !important; border: 1px solid var(--ib-border) !important; border-radius: 5px !important; background: #fff !important; padding: 0 12px !important; box-sizing: border-box !important; width: 100% !important; } #ib-topic-serie + .ts-wrapper .ts-control .item{ display: flex !important; align-items: center !important; height: 44px !important; line-height: 44px !important; margin: 0 !important; padding: 0 !important; } #ib-topic-serie + .ts-wrapper .ts-control input{ display: inline-block !important; width: auto !important; min-width: 1px !important; flex-grow: 1 !important; border: none !important; outline: none !important; background: transparent !important; height: 44px !important; line-height: 44px !important; padding: 0 !important; margin: 0 !important; text-align: start !important; } [dir="rtl"] #ib-topic-serie + .ts-wrapper .ts-control{ direction: rtl !important; text-align: right !important; justify-content: flex-start !important; padding-inline: 15px !important; } #ib-topics-reader :is(.ib-topic-field, .ib-field){ gap: 14px !important; margin-bottom: 10px !important; } #ib-topics-reader :is(.ib-topic-field, .ib-field) label{ margin-inline-end: 6px !important; } #ib-topics-reader, #ib-topics-reader .elementor-widget-container, #ib-topics-reader .elementor-column, #ib-topics-reader .elementor-column-wrap, #ib-topics-reader .elementor-container, #ib-topics-reader .elementor-section, #ib-topics-reader .ib-grid{ overflow-y: visible !important; overflow-x: visible !important; max-height: none !important; height: auto !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: 6px 6px !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; } /* ✅ cierre correcto del @media (max-width: 767px) SERIE */ } /* 📱 Ajuste espacio Versículos / Navegación / Contenido (MÓVIL) */ @media (max-width: 767px) { /* 1️⃣ Versículos sin casi margen abajo */ .ib-topic-field.full-width { margin-bottom: 0 !important; } /* Quitar margen extra del control de TomSelect */ .ib-topic-field.full-width + .ts-wrapper .ts-control { margin-bottom: 0 !important; } /* 2️⃣ Navegación: poco espacio arriba, algo abajo */ #ib-topics-reader .ib-navigation { margin-top: 20px !important; /* pegado a Estudios sin cortarse */ margin-bottom: 30px !important;/* deja aire hacia el contenido */ padding-top: 0 !important; padding-bottom: 0 !important; } /* 3️⃣ Contenido: asegura espacio respecto a la navegación */ #ib-topic-content { margin-top: 0 !important; /* por si tuviera margen propio raro */ } } @media (max-width: 767px){ /* ✅ Reduce el espacio entre la fila de Tema y la de Estudio */ #ib-topics-reader .ib-topic-field{ margin-bottom: 6px !important; /* prueba 6px (o 4px si lo quieres más pegado) */ } /* ✅ Si quieres que SOLO se aplique entre Tema -> Estudio: reduce aún más el margen del campo de Tema (primera fila) */ #ib-topics-reader .ib-topic-field:has(#ib-topic-serie){ margin-bottom: 4px !important; } /* ✅ Quita margen extra del control de Estudio (TomSelect) */ #ib-topics-reader .ib-topic-field.full-width .ts-control{ margin-bottom: 0 !important; } /* ✅ (Recomendado) Asegura que el wrapper del Estudio no meta margen */ #ib-topics-reader .ib-topic-field.full-width #ib-topic-estudio + .ts-wrapper{ margin-top: 0 !important; } } /* ========================================================= TOPICS — Mobile: forzar "Guardar estudio" / "Compartir estudio" en 2 líneas, texto a la derecha del icono ========================================================= */ @media (max-width: 767px){ /* Botón: icono + texto más juntos */ #ib-topic-actions-row .ib-action-btn{ gap: 12px; align-items: center; } /* Texto: permitir salto y forzarlo por ancho */ #ib-topic-actions-row .ib-action-label{ white-space: normal; /* permitir wrap */ line-height: 1.05; max-width: 80px; /* fuerza salto natural */ text-align: start; /* NO centrado (RTL-friendly) */ } /* Favorito: reducir caja horizontal del SVG */ #ib-topic-actions-row .ib-favorite-button .icon-regular, #ib-topic-actions-row .ib-favorite-button .icon-solid{ width: 26px; /* antes 32px */ height: 32px; } /* Compartir: misma caja compacta */ #ib-topic-actions-row .ib-share-icon-btn i{ width: 26px; height: 32px; display: inline-flex; align-items: center; justify-content: center; } }