@media screen and (max-width: 320px) {
    footer {
        min-height: 600px;
        margin-top: 25px;
        background-color: #252528;
        color: #fff;
        padding-top: 35px;
        position: relative;
    }
    footer li {
        font-size: 16px;
    }
}

@media screen and (max-width: 640px) {
    .palabras #grupo {
        column-rule: #000 solid 1px;
        -moz-column-rule: #000 solid 1px;
        -moz-columns: 2;
        -webkit-column-rule: #000 solid 1px;
        -webkit-columns: 2;
        text-align: justify
    }
    .container_paralelogramo {
        margin-left: -15px
    }
    .interoriginal{
        display:grid;
        line-height: 1rem;
        margin-top: 0.5rem;
    }
}

@media screen and (max-width: 768px) {
    footer li {
        font-size: 14px
    }
    footer {
        min-height: 400px;
        margin-top: 25px;
        background-color: #252528;
        color: #fff;
        padding-top: 35px;
        position: relative
    }
}
@media screen and (max-width: 800px) {
    footer {
        min-height: 400px;
        margin-top: 25px;
        background-color: #252528;
        color: #fff;
        padding-top: 35px;
        position: relative
    }
}
@media only screen and (max-width: 957px) {
    .telegram-footer{ 
    margin: -1.9em 0 0 0em;
    }
}
@media only screen and (min-width: 958px) {
    .telegram-footer{ 
    margin: -1.5em 0 0 0em;
    }
}

@media screen and (max-width: 960px) {
    .palabras #grupo {
        column-rule: #000 solid 1px;
        -moz-column-rule: #000 solid 1px;
        -moz-columns: 3;
        -webkit-column-rule: #000 solid 1px;
        -webkit-columns: 3;
        text-align: justify
    }
    footer {
        min-height: 400px;
        margin-top: 25px;
        background-color: #252528;
        color: #fff;
        padding-top: 35px;
        position: relative
    }

}

@media screen and (max-width: 1024px) {
    footer {
        min-height: 400px;
        margin-top: 25px;
        background-color: #252528;
        color: #fff;
        padding-top: 35px;
        position: relative
    }
    .container_paralelogramo {
        margin-left: -15px
    }
}

@media (min-width: 200px) {
    .next-chapter,
    .prev-chapter {
        display: table-cell;
        font-size: 28px;
        padding-left: 7px;
        width: 40px
    }
}

@media screen and (min-width: 200px) and (max-width: 365px) {
    .controls {
        display: none
    }
    .gallery .item {
        margin-bottom: -55px
    }
}

@media screen and (min-width: 200px) and (max-width: 640px) {
    .contenido_item {
        margin-top: -20px
    }

    .imgpromesaSmall{
        margin: 0.4rem 0rem 1rem 1rem;
    }
}
@media screen and (min-width: 640px) {
    .imgpromesaSmall{
        margin: -2.5rem 0rem 1rem 1rem;
    }
}

.titulofooter{
    color: #fff;
    font-size: 1.7rem;
    font-weight: bold;
    text-align: center
}

.pagination .current {
    background: #f97000;
    border-radius: 2px
}
.pagination a:hover,
.pagination button:hover {
    background: #c1bdbd;
    border-radius: 2px
}
span.page {
    color: #000;
    padding: .1875rem .625rem;
    font-size: .875rem;
    margin-right: .0625rem
}
span.page:hover {
    background: #c1bdbd;
    border-radius: 2px
}
span.page a {
    color: #000
}
span.active,
span.active:hover {
    background: #f97000;
    padding: .1875rem .625rem;
    color: #fefefe;
    cursor: default;
    border-radius: 2px;
}

span.active a {
    color: #fefefe
}
.titulos-footer {
    color: #F46E07
}
.footer-menu-nuevo {
    color: #fff;
    font-size: .8rem
}
/*nuevo footer final */
.redes_sociales_sitemap a {
    color: #090
}
.redes_sociales_sitemap span {
    font-size: 3.5em
}
/*flecha fixed del subir */
.icon-chevron-left:before,
.icon-chevron-right:before {
    font-size: 1rem
}
.arrow-up {
    margin-left: 10px;
    font-size: 1.2rem
}
.ir-arriba {
    display: none;
    background: #4db2ec;
    font-size: 1rem;
    width: 40px;
    height: 40px;
    color: #fff;
    cursor: pointer;
    position: fixed;
    bottom: 0;
    right: 0;
    padding-top: 7px;
        border-top-left-radius: 10px;
}
/* fin flecha fixed del subir */
/* simbolo de + y - de sitemap */
.accordion-title:before,
.is-active>.accordion-title:before {
    color: #f97000;
    font-size: 1.2rem;
    font-weight: 600
}
/* fin simbolo de + y - de sitemap */
.compartir .callout {
    background-color: #555;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
    position: absolute;
    width: 150px;
    margin-top: 7px;
    z-index: 1
}
.compartir .callout li {
    background-color: #306fb4;
    margin-left: -16px;
    color: #FFF;
    width: 148px;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #FFF;
    list-style:none;
}
.compartir .callout li:hover, .compartir .callout li a:hover {
    background-color: #2694E8;
    color: #FFF;
}
.compartir .callout li span {
    font-size: 2em;
    vertical-align: middle
}
.compartir .callout li a {
    color: #FFF;
    font-size: .9rem
}
.compartir label {
    color: #c7c3c1;
    font-size: 1.1rem
}
.compartir label a {
    color: #c7c3c1
}
.compartir ul {
    margin-left: 0rem;
}
.button.greys-1 {
    background-color: #F4F4F4;
    border: 1px solid #c6c6c6;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    color: #1585cf;
    line-height: 1;
    cursor: pointer;
    transition: background-color .25s ease-out, color .25s ease-out
}
.button.white:hover {
    background-color: #e6e6e6
}
.button.white.active {
    background-color: #2199e8;
    border: 1px solid #2199e8;
    color: #FFF
}
.button.greys-1:hover {
    background-color: #e6e6e6
}
.button.greys-1.active {
    background-color: #2199e8;
    border: 1px solid #2199e8;
    color: #FFF
}
.button.greys-2:hover {
    border: 1px solid transparent;
    background-color: #f2f2f2;
    color: #757575
}

.button.submenu:hover {
    background-color: #FFF
}
.button.submenu.active {
    background-color: #005a9e; 
    color: #FFF
}

a.button.submenu.button-situacion.active, a.button.submenu:hover, a.button.button-situacion.white.small:hover, a.button.small.button-situacion.active:hover, a.button.small.button-situacion.active {
    background-color: #004080!important;
    color: #fefefe!important;
    border: 1px solid #616060 !important;

}


ul.sb_dropdown {
    list-style: none;
    width: 80%;
    max-width: 450px;
    padding: 6px 5px;
    -moz-border-radius: 0 0 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-color: #000;
    position: absolute
}
ul.sb_dropdown li {
    font-size: 16px;
    line-height: 32px;
    height: 32px;
    float: left;
    width: 50%
}
ul.sb_dropdown2 {
    list-style: none;
    padding-left: 30px
}
.notas {
    color: #000;
    line-height: 15px;
    font-size: 1.2rem
}
.parrafos {
    color: #000;
    line-height: 20px;
    font-size: 1.2rem
}
.bt-dictionary-toc {
    margin: 1rem 0 1.4rem;
    padding: 1rem 1rem 1.05rem;
    border: 1px solid #d2e1ef;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfdff 0%, #eef5fb 100%);
    box-shadow: 0 10px 28px rgba(17, 59, 102, .08)
}
.bt-dictionary-toc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: bt-dictionary-index
}
.bt-dictionary-toc-item {
    position: relative;
    margin: 0 0 .55rem;
    counter-increment: bt-dictionary-index
}
.bt-dictionary-toc-item:last-child {
    margin-bottom: 0
}
.bt-dictionary-toc-item::before {
    content: counter(bt-dictionary-index) ".";
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    color: #12426d;
    font-family: gilb;
    font-size: .98rem;
    line-height: 1;
    pointer-events: none;
    transition: color .18s ease
}
.bt-dictionary-toc-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: .82rem 2.7rem .82rem 2.8rem;
    border-bottom: 1px solid #d4e1ec;
    background: #fff;
    color: #17456c;
    font-family: gil;
    font-size: 1rem;
    line-height: 1.25;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease
}
.bt-dictionary-toc-link::after {
    content: "\f105";
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: .95rem;
    color: #5588b6;
    transition: color .18s ease, transform .18s ease
}
.bt-dictionary-toc-text {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.bt-dictionary-toc-link:hover,
.bt-dictionary-toc-link:focus,
.bt-dictionary-toc-link.is-active {
    border-color: #8ebce4;
    background: #eaf4fd;
    color: #0d3b63;
    text-decoration: none;
    transform: translateY(-1px)
}
.bt-dictionary-toc-item:hover::before,
.bt-dictionary-toc-item:focus-within::before,
.bt-dictionary-toc-item.is-active::before {
    color: #0d3b63
}
.bt-dictionary-toc-link:hover::after,
.bt-dictionary-toc-link:focus::after,
.bt-dictionary-toc-link.is-active::after {
    color: #0d3b63;
    transform: translateY(-50%) translateX(2px)
}
.bt-dictionary-body {
    margin-top: .65rem
}
.bt-dictionary-entry {
    position: relative;
    margin: 0 0 1.45rem;
    padding: 1.35rem 1.25rem 1.15rem;
    border: 1px solid #d8e3ec;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff 0%, #f8fbfe 100%);
    box-shadow: 0 12px 34px rgba(14, 47, 82, .08);
    overflow: hidden;
    scroll-margin-top: 108px
}
.bt-dictionary-entry::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: linear-gradient(180deg, #1a76c3 0%, #52abef 100%)
}
.bt-dictionary-entry:last-child {
    margin-bottom: .2rem
}
.bt-dictionary-entry-title {
    margin: 0 0 .95rem;
    padding-right: .75rem;
    color: #12324d;
    font-family: gilb;
    font-size: 1.55rem;
    line-height: 1.2
}
.bt-dictionary-entry p,
.bt-dictionary-entry li {
    color: #1a2f42;
    line-height: 1.85
}
.bt-dictionary-entry a {
    overflow-wrap: anywhere
}
.bt-dictionary-entry blockquote {
    margin: 1.1rem 0 0;
    padding: 1rem 1rem 1rem 1.15rem;
    border-left: 4px solid #63a5df;
    border-radius: 12px;
    background: rgba(35, 115, 186, .06)
}
.bt-dictionary-entry:target {
    border-color: #67acec;
    box-shadow: 0 0 0 3px rgba(85, 162, 234, .18), 0 14px 32px rgba(14, 47, 82, .12)
}
body.dark-mode .bt-dictionary-toc {
    border-color: #2d4257;
    background: linear-gradient(180deg, #14202a 0%, #192734 100%);
    box-shadow: none
}
body.dark-mode .bt-dictionary-toc-item::before {
    color: #77b9f4
}
body.dark-mode .bt-dictionary-toc-link {
    border-bottom-color: #294254;
    background: transparent;
    color: #d7e7f8
}
body.dark-mode .bt-dictionary-toc-link:hover,
body.dark-mode .bt-dictionary-toc-link:focus,
body.dark-mode .bt-dictionary-toc-link.is-active {
    border-bottom-color: #4f84b4;
    background: rgba(88, 167, 244, .1);
    color: #fff;
    box-shadow: none
}
body.dark-mode .bt-dictionary-toc-link::after {
    color: #77b9f4
}
body.dark-mode .bt-dictionary-toc-item:hover::before,
body.dark-mode .bt-dictionary-toc-item:focus-within::before,
body.dark-mode .bt-dictionary-toc-item.is-active::before,
body.dark-mode .bt-dictionary-toc-link:hover::after,
body.dark-mode .bt-dictionary-toc-link:focus::after,
body.dark-mode .bt-dictionary-toc-link.is-active::after {
    color: #fff
}
body.dark-mode .bt-dictionary-entry {
    border-color: #2f4354;
    background: linear-gradient(180deg, #131d26 0%, #17232d 100%);
    box-shadow: none
}
body.dark-mode .bt-dictionary-entry-title {
    color: #eef5ff
}
body.dark-mode .bt-dictionary-entry p,
body.dark-mode .bt-dictionary-entry li {
    color: #d5e1ec
}
body.dark-mode .bt-dictionary-entry blockquote {
    border-left-color: #69b2ff;
    background: rgba(77, 162, 255, .12)
}
@media only screen and (max-width:640px) {
    .bt-dictionary-toc {
        padding: .9rem .85rem .95rem
    }
    .bt-dictionary-toc-item::before {
        left: .75rem
    }
    .bt-dictionary-toc-link {
        min-height: 44px;
        padding: .74rem 2.35rem .74rem 2.35rem
    }
    .bt-dictionary-toc-link::after {
        right: .85rem
    }
    .bt-dictionary-entry {
        padding: 1.1rem 1rem 1rem;
        border-radius: 16px;
        scroll-margin-top: 120px
    }
    .bt-dictionary-entry-title {
        font-size: 1.28rem
    }
}
@media print {
    .bt-dictionary-toc {
        display: none !important
    }
    .bt-dictionary-entry {
        box-shadow: none;
        background: #fff
    }
}

.red_social a span {
    font-size: 2.5rem;
    color: #FFF;
}
footer {
    background: #333;
    color: #fff;
    padding-top: 15px;
    position: relative;
    min-height: 200px
}
footer a {
    font-size: 16px;
    font-family: gil;
    color: #fff
}
.menu-footer ul {
    list-style: none;
    text-decoration: none;
    text-align: center
}
.menu-footer {
    text-align: center
}
.derechos {
    font-size: .7rem
}
.derechos img {
    margin-right: 10px
}
.derechos.derechos-version a {
    color: #004080;
    text-decoration: underline;
}
.franja-footer,
.franja-footer a {
    background-color: #282828;
    width: 100%;
    height: 160px;
    padding-top: 10px;
    text-align: center
}

.palabras #grupo {
    column-rule: #000 solid 1px;
    -moz-column-rule: #000 solid 1px;
    -moz-columns: 4;
    -webkit-column-rule: #000 solid 1px;
    -webkit-columns: 4;
    text-align: justify
}
.palabras #grupo2 {
    column-rule: #000 solid 1px;
    -moz-column-rule: #000 solid 1px;
    -moz-columns: 2;
    -webkit-column-rule: #000 solid 1px;
    -webkit-columns: 2;
    text-align: justify
}
.cap_right_busq {
    border-left: 1px solid #d6d2cb;
    width: 165px;
    height: 40px;
    padding-top: 10px;
    margin-right: -50px
}
.cap_left_busq {
    border-right: 1px solid #d6d2cb;
    width: 154px;
    height: 40px;
    padding-top: 10px;
    margin-left: -15px
}
.cap_right {
    border-left: 1px solid #d6d2cb;
    width: 42px;
    height: 40px;
    padding-top: 10px;
    margin-right: -15px
}
.cap_left {
    border-right: 1px solid #d6d2cb;
    width: 42px;
    height: 40px;
    padding-top: 10px;
    margin-left: -15px
}
.cap_tab_bar {
    background-color: #e8e6e4;
    border: 1px solid #d6d2cb;
    margin-top: -15px;
    color: #676767;
    letter-spacing: .05rem
}
.cap_top {
    padding-top: 10px;
    margin-left: 5%
}
.cap_right a,
.cap_right a:hover,
.cap_left a,
.cap_left a:hover,
.cap_tab_bar a,
.cap_tab_bar a:hover {
    color: #b4aba1
}
.alineacion_vert_curiosidades {
    margin-top: 46px
}
.tabs_curiosidades {
    background: #fefefe;
    border: 1px solid #e6e6e6;
    height: auto;
    margin-bottom: 5px
}
.img_personaje_biblico {
    width: 300px;
    height: auto;
    float: left;
    margin-right: 10px
}
.busq_todo {
    margin-bottom: 30px;
    margin-bottom: 150px
}
.busq_img_logo {
    margin-top: 10px;
    margin-bottom: 30px
}
.buscar_todo {
    margin-top: 10px;
    margin-bottom: 10px
}
#formContacto #mensajeContacto {
    height: 10rem
}

.versiculo_diario_mis_versiculos {
    padding-bottom: 10px;
    background-color: #EEEDED;
    box-shadow: 2px 2px 2px #777;
    -webkit-box-shadow: 2px 2px 2px #777;
    -moz-box-shadow: 2px 2px 2px #777;
    border-radius:8px;
    padding-bottom: 30px;
    align-items: center;
    text-align:center;
}
.cajaversodia,.cajaversodia a{
    background-color: #333333;
    color:#fff;
    text-align:center;
    font-weight: 700;
}
.caja_recursos {
    background-color: #f5f5f5;
    border-radius: 7px;
}
.caja_recursos textarea {
    cursor: default
}
.valign-middle {
    display: table
}
.valign-middle .columns {
    display: table-cell;
    vertical-align: middle
}
.valign-middle .columns,
.valign-middle[class*="column"] +[class*="column"]:last-child {
    float: none
}
#recursos_column_2 {
    padding-left: 0
}
#recursos_column_3 {
    margin-left: -30px
}
#recursos_column_4_img {
    margin-left: -45px
}
#seccion_4 {
    padding-left: 0;
    text-align: right
}
.otros_recursos {
    color: red;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 18px;
    margin-top: 10px
}
.comentarios_right {
    float: right;
    margin-left: 15px;
    border-left: 1px solid #d6d2cb;
    width: 42px;
    height: 40px;
    padding-top: 10px;
    margin-right: -15px
}
.comentarios_left {
    border-right: 1px solid #d6d2cb;
    width: 42px;
    height: 40px;
    padding-top: 10px;
    margin-left: -15px
}
.tab_bar_comentarios {
    background-color: #e8e6e4;
    border: 1px solid #d6d2cb;
    color: #676767;
    text-transform: uppercase;
    letter-spacing: .05rem
}
.comentarios_top {
    padding-top: 10px;
    margin-left: 5%
}
.comentarios_right a,
.comentarios_right a:hover,
.comentarios_left a,
.comentarios_left a:hover,
.tab_bar_comentarios a,
.tab_bar_comentarios a:hover {
    color: #b4aba1
}

/* Para motrar y ocultar textos recumen */
.completeresumen, 
input.showmore,
input.showmore~label.more.menosresumen,
input.showmore:checked~div.more.masresumen {
    display: none;
}

input.showmore:checked+.completeresumen {
  display: block;
}

div.more.masresumen{
    font-weight: inherit;
}
input.showmore:checked~label.more.menosresumen {
  display: inline;
}
/* FIN - Para motrar y ocultar textos recumen */

.pagination li {
    display: inline-block;
    font-size: 1rem;
}
.pagination {
    font-weight: bold;
}
.cerrarcurisosidad{
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    text-align: center;
    display: block;
    color: #181818 !important;
}
.cerrarcompartir{

    background-color: #555 !important;
    margin-bottom: 0.3rem;
    margin-top: -0.5rem !important;
    font-size: 1.1rem !important;
    font-weight: 600;
}
.cerrarcompartir span{
    float: right;
    font-size: 1.2rem !important;
    margin-right: 0.8rem !important;
    cursor: pointer;
}
#oculto{
    display: none;
    text-align: center;
    color: #fff;
    line-height: 1.9;
    font-size: 1.5em;
    font-weight: bold;
}
#oculto a{
    color: #fff;
}
.sticky{
    z-index: 1;
}
.st a:hover{
    color: #b4aba1
}

/* solo para prueebas en el ajax del strong biblia */
#ocultodos{
    display: none;
    text-align: center;
    color: #fff;
    line-height: 1.9;
    font-size: 1.5em;
    font-weight: bold;
}
/* FIN solo para prueebas en el ajax del strong biblia */

/* Lista de libros */
.libroslista{
    max-width: 300px;
}
.libroslista .title {
    margin: 10px 0;
    font-size: 1em;
}
.libroslista h3 {
    margin-bottom: 0PX;
}
a.colorOne.bibleBook{
    background-color: #4a6da7;;
}
a.colorTwo.bibleBook {
    background-color: #275197;
}
a.colorThree.bibleBook{
    background-color: #1d3254;
}
a.bibleBook {
    padding: 15px;
    margin-bottom: 2px;
    color: #fff !important;
    display: flex;
    align-items: center;
}
.fullName{
    color: #fff !important;
    word-wrap: break-word;
}
.detalleversion {
    text-align: -webkit-center;
}
.textsituacion p{
    font-size: 1.10rem;
    color: #0a0a0a;
    line-height: 1.5!important;
}
/* FIN Lista de libros */
/* CSS busqueda google*/
.gs-snippet{font-size:1.2em}.gsc-control-cse .gs-spelling,.gsc-control-cse .gs-result .gs-title,.gsc-control-cse .gs-result .gs-title *{font-size:18px;color:#1a0dab}.gs-webResult.gs-result a.gs-title:link,.gs-webResult.gs-result a.gs-title:link b,.gs-imageResult a.gs-title:link,.gs-imageResult a.gs-title:link b{color:#1a0dab}

div.gsc-cursor-box.gs-bidi-start-align{
    text-align: center;
    font-weight: bold;
    font-size: 1rem;
}
div.gsc-cursor-page{
    margin-right: 0.7rem !important;
    color: #0a0a0a !important;
}
div.gsc-cursor-page.gsc-cursor-current-page{
    font-size: 1.2rem;
    background: #f97000 !important;
    border-radius: 2px !important;
    padding: 0.1875rem 0.625rem !important;
    color: #fefefe !important;
    cursor: default !important;
}
/* fin CSS busqueda google*/
.imgcuriosidades{
    float:right;
    border-radius:5px;
    padding-left:15px;
    cursor: pointer
}
.imgnombresDios{
    float:right;
    border-radius:6px;
    cursor: pointer
}
.imgpromesaSmall{
    border-radius: 0.25rem;
    width:100px;
    height:100px
}

.passage {
    border-left-width: 4px;
    --tw-border-opacity: 1;
    border-color: rgb(250 204 21 / var(--tw-border-opacity));
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1.25rem;
    font-style: italic;
}

cite {
    font-size: 1rem;
    color: #3b3b3b;
}
.greekheb {
    color: #552200;
    FONT-SIZE: 18px;
    font-family: Palatino Linotype, Palatino, Century Schoolbook L, Times New Roman, serif;
    font-weight: 700;
}

blockquote, blockquote p {
    color: #353535;
}
.bld {
    color: #552200;
    font-weight: 700;
}
.supe {
    FONT-SIZE: 11px;
    COLOR: #a44200;
    LINE-HEIGHT: 14px;
    vertical-align: text-top;
    FONT-FAMILY: Arial, Helvetica, Sans-serif;
}
.verse {
    padding-bottom: 13px;
    padding-top: 13px;
}
.cmt_word {
    COLOR: #b34700;
}
.accented {
    font-weight: 700;
}

.ttl {
    FONT-SIZE: 22px;
    text-align: center;
    font-weight: 700;
    COLOR: #0066aa;
    FONT-FAMILY: Arial, Helvetica, Sans-serif;
    TEXT-DECORATION: none;
    padding-bottom: 5px;
    padding-top: 5px;
}
.itemdos {
    background-color: #eeeeee;
    padding: 2px 1px 2px 2px;
    border-radius: 5px;
    border: 1px solid #ccc;
  }



th.cell{
    background: #121212;
    color: #fff;
    font-weight: 700;
    padding: 5px;
}


/* Se muestra en resultados de busqeudas */
        .descrip-previa-verso{
            padding: 1px 15px;
            margin: 44px auto;
            text-align: justify;
            background-color: #f9fdfb;
            border-radius: 8px;
            font-size: 15px;
            line-height: 1.58;
        }

        .descrip-previa-verso h2{
            font-weight: 400;
            color: #202124;
            font-family: Google Sans,arial,sans-serif;
            font-size: 22px;
            line-height: 28px;
        }

        .descrip-previa-verso h3{
            display: inline-block;
            font-weight: normal;
            margin: 0;
            padding: 0;
            font-size: 20px;
            line-height: 1.3;
            color: #1a0dab;
        }

        .descrip-previa-verso p, .descrip-previa p{
            color: #4d5156;
            line-height: 1.58;
        }

        .hrBusqueda {
            background-color: #dadce0;
            margin-top: 18px;
            position: absolute;
            border: 0;
            height: 1px;
            left: 0;
            width: 100%;
        }


        .divBusquedaDos {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            margin: 0 auto;
            font-size: 14px;
            font-weight: 400;
            max-width: 300px;
            height: 36px;
            border-radius: 18px;
            background-color: #f1f3f4;
        }
        .spanBusqueda {

            color: #202124;
            white-space: nowrap;
        }

        .spanBusquedaDos {
            fill: currentColor;
            height: 20px;
            line-height: 20px;
            width: 20px;
            color: #5e5e5e;
        }

        .divBusqueda {
            -webkit-tap-highlight-color: transparent;
            cursor: pointer;
            display: block;
            line-height: 18px;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 16px;
            padding-top: 0;
            margin-top: 24px;
            position: relative;
        }



        .divBusquedaOpciones {
            color: #1a0dab;
            font-size: 15px;
        }
/* FIN Se muestra en resultados de busqeudas */

#resul_obt{
    color: #70757a;
    line-height: 10px;
    size: 10px;
}
 /* Ocultar el botón de detener y el menú desplegable inicialmente */
 [id^="botonDetener"] {
    display: none;
}


 /* Fin Ocultar el botón de detener y el menú desplegable inicialmente */

 /* Apariencia general del botón */
.dark-mode-toggle {
    border: none;
    border-radius: 6px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, color 0.3s ease, font-size 0.3s ease;
    box-shadow: 0px 4px 6px rgb(30 65 144);
    background-color: #333; /* Fondo oscuro del botón */
}

.dark-mode-toggle #iconToggle {
    transition: color 0.3s ease;
    color:#f0f0f0 !important /* Color del icono del sol en modo claro */
}

/* Icono del sol en tamaño grande (dark-mode-large) en modo claro */
.dark-mode-large #iconToggle {
    color: #f0f0f0 !important /* Color negro para el sol en el botón grande */
}

/* Modo oscuro activado */
.dark-mode-toggle.active {
    background-color: #333; /* Fondo oscuro del botón */
}

/* Modo oscuro: Icono de la luna blanco para cualquier tamaño */
.dark-mode-toggle.active #iconToggle {
    color: #f0f0f0 !important; /* Color de la luna en modo oscuro */
}

/* Tamaño pequeño */
.dark-mode-small {
    padding: 6px 6px; /* Tamaño del botón pequeño */
    font-size: 17px; /* Tamaño del icono más pequeño */
    background: #232222;
}

/* Tamaño grande */
.dark-mode-large {
    padding: 7px 10px; /* Tamaño del botón grande */
    font-size: 20px; /* Tamaño del icono más grande */
}

/* Color específico del sol en modo claro y tamaño pequeño */
.dark-mode-small #iconToggle {
    color: #f9a825; /* Color amarillo para el sol en botón pequeño */
}

/* Icono de la luna blanco en modo oscuro, tamaño pequeño */
.dark-mode-toggle.active.dark-mode-small #iconToggle {
    color: #f0f0f0; /* Asegura que la luna sea blanca en botón pequeño */
}
#font-size-menu{
    position: absolute; top: 30px; left: 0; background: #fff; border: 1px solid #ccc; padding: 10px; z-index: 100; width: max-content;
}

.font-size-controls{
    position: relative; display: inline-block; font-size: 20px;
}
.font-size-option{
    display: block; 
    margin-bottom: 5px; 
    cursor: pointer; 
    font-weight: bold; 
    color: #333; 
    padding: 10px; 
    border-radius: 10px;
}

#font-size-menu .font-size-option span{
    color: unset !important;

}

.circle-counter {
    display: inline-block;
    background-color: #433e3e;
    color: white;
    border-radius: 50%;
    width: 30px; /* Ajusta el tamaño del círculo según sea necesario */
    height: 30px;
    line-height: 30px; /* Hace que el texto esté centrado verticalmente */
    font-size: 21px; /* Tamaño del texto */
}
.button-verso-blue{
    cursor: pointer;
    background: #175177;
    border-radius: 3px;
    margin: 1px;
}

/* Estilos específicos para el modal de capítulos y versículos en forma de cuadrícula */
.modal-capitulos .opciones-capitulos,
.modal-versiculos .opciones-versiculos {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas en la cuadrícula */
    gap: 10px; /* Espacio entre los elementos */
    max-height: 50vh; /* Altura máxima */
    overflow-y: auto;
    padding: 5px;
    height: auto;
}

.modal-capitulos .opcion,
.modal-versiculos .opcion {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid #ccc;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
}

.modal-capitulos .opcion:hover,
.modal-versiculos .opcion:hover {
    background-color: #f1f1f1;
}

/* Estilo específico para la primera celda con el nombre del libro */
.opcion-libro {
    font-weight: bold;
    text-align: center;
    background-color: #f9f9f9;
    grid-column: span 4; /* Ocupa todo el ancho de las columnas */
    height: fit-content;
}

.dropdown-btn {
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    .dropdown-btn {
        margin-top: 4px;
    }
}

.dropdown-container {
    position: relative;
}

.modal-content {
  width: 90vw;
    }
.opciones {
  max-height: 50vh;
  height: auto;
    }

@media (min-width: 640px) {
  .modal-content {
        width: 400px;
    }
    .opciones {
      max-height: 60vh;
    }
}


.modal-content {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 10;
    display: none;
}

/* Para Medium */
@media (min-width: 640px) {
    #dropdownLibros.modal-content.modal-libros,#dropdownCapitulos.modal-content.modal-capitulos,#dropdownVersiculos.modal-content.modal-versiculos,#dropdownVersionesConcordancia.modal-content, #dropdownIdioma.modal-content-concordancia, #dropdownVersiones.modal-content.inicio,#dropdownIdioma.modal-content.inicio{
    left: -210px;
    }
}
/* Para small */
@media (max-width: 639px) {
    #dropdownIdioma.modal-content.inicio{
    left: -250px;
    }
}

.modal-content input[type="text"] {
    width: 100%;
    margin-bottom: 10px;
}

.opciones {
    overflow-y: auto;
}

.opcion {
    padding: 8px;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
}

.modal-content .opcion:hover {
    --tw-bg-opacity: 1;
    background-color: #E7F2FD
}



[id^="btnLibros"],
[id^="btnVersiones"],
[id^="btnCapitulos"],
[id^="btnVersiculos"],
[id^="btnVersion"],
[id^="btnIdioma"],
[id^="btnComentario"] {
    background-color: white; /* Fondo blanco */
    color: black; /* Color del texto */
    border: 1px solid #ccc; 
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    text-align: left; /* Alinea el texto a la izquierda */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Espacio entre el texto y la flecha */
    position: relative;
}

[id^="btnIdioma"] {
    border: inherit; 
    max-width: 300px;
}

.select_interlineal::after,
[id^="btnLibros"]::after,
[id^="btnVersiones"]::after,
[id^="btnCapitulos"]::after,
[id^="btnVersiculos"]::after,
[id^="btnComentario"]::after,
[id^="btnIdioma"]::after,
[id^="btnVersion"]::after {
    content: ''; /* Pseudo elemento vacío para la flecha */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,20" style="fill: rgb%28240,171,52%29"></polygon></svg>');
    background-size: 15px 12px; /* Tamaño de la flecha */
    background-repeat: no-repeat;
    width: 15px;
    height: 12px;
    position: absolute;
    right: 5px; /* Ubicación de la flecha a la derecha del botón */
    top: 50%;
    transform: translateY(-50%); /* Centra verticalmente la flecha */
}
.button-sub-cat a.button.submenu {
    border: 1px solid #ffffff;
}
@media only screen and (max-width: 768px) {
    .buttonbuscar {
        vertical-align: text-top;
    }
}



.tooltip {
    max-width: 620px!important;
    white-space: pre-wrap;
    line-height: 19px
}
.itali {
    color: #b2581c;
    font-style: italic
}
.gr,
.intergreek,
.greek {
    font-family: Cardo, GentiumAlt, Galilee Unicode Gk, Galatia SIL, Palatino Linotype, Arial, Helvetica, Sans-serif
}
.heb,
.interheb,
.hebrew {
    font-family: Ezra SIL, SBL Hebrew, Cardo, Cambria, Palatino Linotype, Arial, Helvetica, Sans-serif;
    direction: rtl!important;
}
.heb2,
.gr2 {
    font-size: 19px
}
.heb1,
.gr1 {
    font-size: 19px;
    color: #861818
}
.hebrew {
    font-size: 23px;
    color: #001320;
    line-height: 33px
}
.greek {
    font-size: 21px;
    color: #001320;
    line-height: 32px;
    text-align: justify
}
.refstrong .list {
    font-weight: 700;
    font-size: 17px
}
.strong {
    font-weight: 700
}
.strongs {
    font-size: 15px;
    color: #008ae6;
    line-height: 25px
}
.punct {
    color: #9b3e00;
    font-weight: 700
}
.interl {
    font-size: 1.8em
}
.abrev {
    cursor: help;
    color: #2199e8;
    padding-top: .2em;
    line-height: 2.5
}
.interheb {
    float: right;
    font-size: 1.5em;
    cursor: help
}
.intergreek {
    font-size: 1.3em;
    cursor: help
}
.tdi>tbody>tr>td {
    padding: 5px;
    background-color: #fcfaf3;
    border: 1px solid #e7e1e1
}
.tdi {
    width: auto!important
}
.tdheb {
    float: right;
    margin: 2px;
    text-align: right
}
.tdgr {
    float: left;
    margin: 2px
}
a>.inline {
    color: #4582ec;
    text-decoration: none
}
.tdi .text {
    color: #af5113;
    font-weight: 700
}
.ltr{
direction: ltr !important;;
}
.rtl{
    direction: rtl !important;
}
table.stack tbody td.strong {
    vertical-align: top
}

.unit {
    display: inline-block;
    margin: .25em
}
span.texen {
    display: block;
    color: #101050
}
span.snum {
    position: relative;
    bottom: -.2em;
    display: block;
    font-size: 75%;
    line-height: 1.135em
}
.snum {
    color: green
}
.cuadrostrong span.heb,
.cuadrostrong span.gr {
    font-size: 20px
}
h1 .heb,
h1 .gr {
    font-size: 26px!important;
    color: #4f0b0b
}
.refstrong {
    color: #35373b;
    line-height: 22px;
    padding-bottom: 1em;
    white-space: pre-line
}
.refstrong a {
    color: #0b6cac;
    font-weight: 600
}
.cuadrostrong {
    text-align: left
}
.refstrong p {
    padding-bottom: 9px;
    border-top: 1px solid #8080804a
}
.tdfinstrong {
    color: rgba(0, 0, 0, 0);
    line-height: 0
}


.copiar-button{
    font-size: 0.9em;
    float: right;
    color: #004080;
    font-weight: bold;
    cursor: pointer;
}

.mensaje-copiado{
    display: table;
    max-width: calc(100% - 1.25rem);
    margin: .85rem auto 1rem;
    padding: .5rem .95rem;
    background: linear-gradient(180deg, rgba(24, 42, 56, .96), rgba(17, 31, 43, .96));
    color: #edf7ff;
    text-align: center;
    font-size: .82rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: .01em;
    border: 1px solid rgba(118, 197, 245, .28);
    border-radius: 999px;
    box-shadow: 0 12px 26px rgba(0,0,0,.16);
    backdrop-filter: blur(6px);
    animation: bt-copy-toast-in .18s ease;
}

@keyframes bt-copy-toast-in{
  from{
    opacity: 0;
    transform: translateY(-2px) scale(.985);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.mapas h2 {
    margin-top: 1.7em !important;
    
    
}
.mapas hr {
    margin-bottom: 0.5em !important;
    margin-top: -0.5em !important;
    
}
.has-tip{
    border-bottom: unset !important;
}
.siguenos{
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #43505d;
    font-size: 1.25rem;
}

#share-callout.share-comentario {
    position: relative;
    max-width: 300px;
    margin: 0 auto;
    float: none;
    left: 0;
    right: 0;
}
.copiartodo{
    background-color: #005a9e; 

}


/* Aviso apócrifos — base */
.callout.apocrypha-callout{
  position: relative;
  margin:.6rem 0 .8rem;
  padding:.7rem .9rem;
  font-size:.95rem; line-height:1.5;
  background:#fff8e6;
  border:1px solid #f8e0b3;
  border-left:4px solid #f0b74a;
  border-radius:6px;
  color:#5a4b2b;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.apocrypha-icon{ margin-right:.5rem; font-style:normal; opacity:.9; }
.apocrypha-text{ display:inline; }
.callout.apocrypha-callout .apocrypha-link{
  color:#4a3a15; text-decoration:underline; font-weight:600;
}
.callout.apocrypha-callout .apocrypha-link:hover{ text-decoration:none; }

/* Botón cerrar */
.apocrypha-close{
  position:absolute; top:.0rem; right:-0.30rem;
  border:0; background:transparent; cursor:pointer;
  font-size:1.50rem; line-height:1;
  color:#5a4b2b; opacity:.55; padding:.15rem .35rem;
}
.apocrypha-close:hover{ opacity:1; }

/* Limita el ancho en desktop; en móvil queda al 100% */
  .video-limit{
    max-width: 720px;
    margin: 1rem auto;
  }



/* modal centrico para versiones */
  .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem;}
  .modal-window{background:#fff;max-width:680px;width:100%;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.25);overflow:hidden}
  .modal-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid #eee}
  .modal-title{margin:0;font-size:1.1rem}
  .modal-close{background:transparent;border:0;font-size:1.5rem;line-height:1;cursor:pointer}
  .modal-body{padding:1rem}
  .modal-search{width:100%;padding:.6rem .75rem;border:1px solid #ddd;border-radius:6px;margin-bottom:.75rem}
  .modal-list{max-height:380px;overflow:auto;border:1px solid #eee;border-radius:6px}
  .modal-item{display:flex;justify-content:space-between;align-items:center;padding:.6rem .75rem;border-bottom:1px solid #f2f2f2;cursor:pointer}
  .modal-item:last-child{border-bottom:0}
  .modal-item:hover{background:#f8f9fb}
  .modal-item small{opacity:.8}
  .modal-footer{padding:.75rem 1rem;border-top:1px solid #eee;text-align:right}
  .select_interlineal--as-button{display:inline-block;padding:.45rem .6rem;border:1px solid #ccc;border-radius:6px;background:#fff;cursor:pointer;min-width:100px;text-align:left}
  @media (prefers-color-scheme: dark){
    .modal-window{background:#1e1f24;color:#e4e5e7}
    .modal-header,.modal-footer{border-color:#2a2b31}
    .modal-search{background:#121318;border-color:#2a2b31}
    .modal-list{border-color:#2a2b31}
    .modal-item{border-color:#2a2b31}
    .modal-item:hover{background:#2a2b31}
    .select_interlineal--as-button{background:#121318;color:#e4e5e7;border-color:#2a2b31}
     }
/* FIn modal centrico para versiones */

.bt-interlinear-card-group{
  position:relative;
  display:flow-root;
  margin:0 0 1rem;
}

.bt-interlinear-card-group > .bt-interlinear-version-card{
  margin-bottom:0;
}

.bt-interlinear-version-card{
  position:relative;
  overflow:visible;
  padding-top:2.65rem;
}

.bt-interlinear-card-actions{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
}

.bt-interlinear-card-actions-close-only{
  justify-content:flex-end;
}

.bt-interlinear-move-handle,
.bt-interlinear-card-close{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.95rem;
  height:1.95rem;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(8,18,29,.22);
  color:#f5f8fb;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.bt-interlinear-move-handle{
  cursor:grab;
  font-size:.98rem;
  border-radius:0 0 .78rem 0;
  touch-action:none;
}

.bt-interlinear-move-handle:active{
  cursor:grabbing;
}

.bt-interlinear-card-close{
  text-decoration:none;
  font-size:1.55rem;
  line-height:1;
  border-radius:0 0 0 .78rem;
}

.bt-interlinear-move-handle:hover,
.bt-interlinear-move-handle:focus,
.bt-interlinear-card-close:hover,
.bt-interlinear-card-close:focus{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.32);
  color:#fff;
  transform:translateY(-1px);
  outline:none;
}

.bt-interlinear-version-card.is-dragging{
  opacity:.78;
  transform:scale(.995);
  box-shadow:0 16px 32px rgba(0,0,0,.18);
}

.bt-interlinear-version-card.is-drop-before{
  box-shadow:inset 0 4px 0 #f6b84a, 0 10px 26px rgba(0,0,0,.12);
}

.bt-interlinear-version-card.is-drop-after{
  box-shadow:inset 0 -4px 0 #f6b84a, 0 10px 26px rgba(0,0,0,.12);
}

.bt-interlinear-dragging .bt-interlinear-move-handle{
  cursor:grabbing;
}

.bt-interlinear-pointer-sorting,
.bt-interlinear-pointer-sorting *{
  user-select:none;
}

html.bt-interlinear-pointer-sorting,
body.bt-interlinear-pointer-sorting{
  overscroll-behavior:none;
  touch-action:none;
}

.bt-interlinear-drag-placeholder{
  width:100%;
  margin:0 0 1rem;
  border:1px dashed rgba(246,184,74,.65);
  border-radius:1rem;
  background:rgba(246,184,74,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}

.bt-interlinear-drag-proxy{
  position:fixed;
  top:0;
  left:0;
  z-index:10040;
  margin:0;
  pointer-events:none;
  opacity:.98;
  transform:scale(1.02);
  box-shadow:0 24px 50px rgba(0,0,0,.32);
}

.bt-interlinear-drag-proxy .bt-interlinear-version-card{
  box-shadow:0 24px 50px rgba(0,0,0,.24);
}

.bt-interlinear-card-group.is-drag-source{
  opacity:.001;
}

.bt-interlinear-move-menu{
  position:fixed;
  top:12px;
  left:12px;
  z-index:10020;
  min-width:168px;
  padding:.55rem;
  border-radius:1rem;
  border:1px solid rgba(255,255,255,.1);
  background:#1f252d;
  color:#f6f8fb;
  box-shadow:0 20px 42px rgba(0,0,0,.28);
}

.bt-interlinear-move-menu[hidden]{
  display:none !important;
}

.bt-interlinear-move-menu-title{
  padding:0 .2rem .35rem;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.02em;
  opacity:.8;
}

.bt-interlinear-move-option{
  width:100%;
  display:flex;
  align-items:center;
  gap:.65rem;
  margin:0;
  padding:.72rem .78rem;
  border:0;
  border-radius:.8rem;
  background:transparent;
  color:inherit;
  font-size:.98rem;
  font-weight:600;
  text-align:left;
  cursor:pointer;
}

.bt-interlinear-move-option:hover,
.bt-interlinear-move-option:focus{
  background:rgba(255,255,255,.08);
  outline:none;
}

.bt-interlinear-move-option:disabled{
  opacity:.42;
  cursor:not-allowed;
}

@media (max-width: 640px){
  .bt-interlinear-card-group{
    margin:0 0 .9rem;
  }

  .bt-interlinear-version-card{
    padding-top:2.5rem;
  }

  .bt-interlinear-card-actions{
    top:0;
    left:0;
    right:0;
  }

  .bt-interlinear-move-handle,
  .bt-interlinear-card-close{
    width:1.8rem;
    height:1.8rem;
  }

  .bt-interlinear-card-close{
    font-size:1.45rem;
  }

  .bt-interlinear-move-menu{
    min-width:156px;
    padding:.5rem;
  }

  .bt-interlinear-drag-placeholder{
    margin:0 0 .9rem;
  }
}

.bt-parallel-column-group{
  position:relative;
  overflow:visible;
  padding-top:2.65rem;
  margin-bottom:1rem;
}

.bt-parallel-column-group + .bt-parallel-column-group::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-1px;
  width:2px;
  background:#d6d2cb;
  pointer-events:none;
  z-index:3;
}

.bt-parallel-column-group > .row{
  overflow:visible;
}

.bt-parallel-column-group .dropdown-btn{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.bt-parallel-column-group .bt-interlinear-card-actions{
  left:2px;
  right:2px;
}

.bt-parallel-column-group + .bt-parallel-column-group > .row{
  border-left:0 !important;
}

.bt-parallel-column-group.is-drag-source{
  opacity:.001;
}

.bt-parallel-column-placeholder{
  min-height:120px;
  margin:0 0 1rem;
  border:1px dashed rgba(246,184,74,.65);
  border-radius:1rem;
  background:rgba(246,184,74,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}

.bt-parallel-drag-proxy{
  position:fixed;
  top:0;
  left:0;
  z-index:10040;
  margin:0;
  pointer-events:none;
  opacity:.98;
  transform:scale(1.02);
  box-shadow:0 24px 50px rgba(0,0,0,.32);
}

.bt-parallel-drag-proxy > .row{
  box-shadow:0 24px 50px rgba(0,0,0,.24);
}

@media (max-width: 640px){
  .bt-parallel-column-group{
    padding-top:2.5rem;
    margin-bottom:.9rem;
  }

  .bt-parallel-column-group .bt-interlinear-card-actions{
    left:1px;
    right:1px;
  }

  .bt-parallel-column-placeholder{
    margin:0 0 .9rem;
  }
}

.bt-multichapter-column-group{
  position:relative;
  overflow:visible;
  padding-top:2.65rem;
  margin-bottom:1rem;
}

.bt-multichapter-column-group + .bt-multichapter-column-group::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-1px;
  width:2px;
  background:#d6d2cb;
  pointer-events:none;
  z-index:3;
}

.bt-multichapter-column-group > .row{
  overflow:visible;
}

.bt-multichapter-column-group .dropdown-btn{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.bt-multichapter-column-group .bt-interlinear-card-actions{
  left:2px;
  right:2px;
}

.bt-multichapter-column-group + .bt-multichapter-column-group > .row{
  border-left:0 !important;
}

.bt-multichapter-column-group.is-drag-source{
  opacity:.001;
}

.bt-multichapter-column-placeholder{
  min-height:120px;
  margin:0 0 1rem;
  border:1px dashed rgba(246,184,74,.65);
  border-radius:1rem;
  background:rgba(246,184,74,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}

.bt-multichapter-drag-proxy{
  position:fixed;
  top:0;
  left:0;
  z-index:10040;
  margin:0;
  pointer-events:none;
  opacity:.98;
  transform:scale(1.02);
  box-shadow:0 24px 50px rgba(0,0,0,.32);
}

.bt-multichapter-drag-proxy > .row{
  box-shadow:0 24px 50px rgba(0,0,0,.24);
}

@media (max-width: 640px){
  .bt-multichapter-column-group{
    padding-top:2.5rem;
    margin-bottom:.9rem;
  }

  .bt-multichapter-column-group .bt-interlinear-card-actions{
    left:1px;
    right:1px;
  }

  .bt-multichapter-column-placeholder{
    margin:0 0 .9rem;
  }
}

.bt-comments-column-group{
  position:relative;
  overflow:visible;
  padding-top:2.65rem;
  margin-bottom:1rem;
}

.bt-comments-column-group + .bt-comments-column-group::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-1px;
  width:2px;
  background:#d6d2cb;
  pointer-events:none;
  z-index:3;
}

.bt-comments-column-group > .row{
  overflow:visible;
}

.bt-comments-column-group .dropdown-btn{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.bt-comments-column-group .bt-interlinear-card-actions{
  left:2px;
  right:2px;
}

.bt-comments-column-group + .bt-comments-column-group > .row{
  border-left:0 !important;
}

.bt-comments-column-group.is-drag-source{
  opacity:.001;
}

.bt-comments-column-placeholder{
  min-height:120px;
  margin:0 0 1rem;
  border:1px dashed rgba(246,184,74,.65);
  border-radius:1rem;
  background:rgba(246,184,74,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}

.bt-comments-drag-proxy{
  position:fixed;
  top:0;
  left:0;
  z-index:10040;
  margin:0;
  pointer-events:none;
  opacity:.98;
  transform:scale(1.02);
  box-shadow:0 24px 50px rgba(0,0,0,.32);
}

.bt-comments-drag-proxy > .row{
  box-shadow:0 24px 50px rgba(0,0,0,.24);
}

@media (max-width: 640px){
  .bt-comments-column-group{
    padding-top:2.5rem;
    margin-bottom:.9rem;
  }

  .bt-comments-column-group .bt-interlinear-card-actions{
    left:1px;
    right:1px;
  }

  .bt-comments-column-placeholder{
    margin:0 0 .9rem;
  }
}



.grupo-libros{
  display:flex;
  align-items:center;
  gap:.75rem;              /* espacio entre el radio y el botón */
  flex-wrap:wrap;          /* si no cabe, salta de línea limpio */
}

.radio-libros{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin:0;                /* que no empuje hacia abajo */
  cursor:pointer;
  color:#fff;              /* mismo color del resto */
  font-weight:600;
}


#selectLibro{
  margin:0;                /* alinea con el radio */
}



/* modal centrico para para todos */
.language-switch-button {
    text-align: left;
    padding: 6px;
    border-bottom: 3px solid #ccc;
    cursor: pointer;
    line-height: 19px; 
}
.language-switch-button:hover {
    background-color: #f0f0f0;
}


.language-switch-button .small-label { font-size: 12px; color: #777; }
.language-switch-button .language-name { font-size: 17px; font-weight: bold; margin: 5px 0; }
.language-switch-button .change-link   { font-size: 14px; text-decoration: underline;color: rgb(61 123 197); float: right;}



.modal-content{
  max-height: calc(100vh - 24px);
  overflow: auto;
  box-sizing: border-box;
  z-index: 1000; /* por si algún overlay se superpone */
}
@media (max-width: 640px){
  /* en móviles, centrado y ancho seguro */
  .modal-content{
    width: min(94vw, 420px);
  }
}
/* FIn modal centrico para para todos */


/* Mega menú centrado, con min y max */
.mega-menu-panel{
  display:none;
  position:fixed;
  top:56px;
  left:50%;
  transform:translateX(-50%);
  width:clamp(640px, 70vw, 1200px);
  max-height:70vh;
  overflow:auto;
  background:#fff;
  box-shadow:0 10px 25px rgba(0,0,0,.12);
  border-top:2px solid #E7ECF2;
  border-radius:10px;
  z-index:60;
  padding:18px 16px;
}
.mega-menu-panel.is-open{ display:block; }

/* Mega menú: en desktop alineado a la derecha */
@media (min-width: 1024px){
  .mega-menu-panel{
    left: auto !important;
    right: 16px;                 /* separación del borde derecho */
    transform: none !important;   /* quita el centrado */
    width: min(1200px, calc(100vw - 32px)); /* evita que se salga de pantalla */
  }
}


/* Skeleton */
.menu-skel{
  padding:24px;
  text-align:center;
  opacity:.9;
  font-weight:600;
  color:#000;
}
.menu-skel .loader{
  display:inline-block; width:40px; height:40px;
  border:2px solid #dcdcdc; border-top-color:#777;
  border-radius:50%; animation:spin .6s linear infinite;
  vertical-align:-3px; margin-right:8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Layout columnas del menú */
.mega-row{ max-width:none; margin:0; }
.mega-list{ list-style:none; margin:0; padding:0 12px; }
.mega-list li{ margin:6px 0; }
.mega-list a{ font-weight:600; display:block; line-height:1.3; }

/* Cabecera del panel con título */
.mega-header{ padding:4px 12px 10px; }
.mega-title{
  margin:0; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; font-size:1rem; color:#1f2933!important;
}
.mega-title::after{
  content:""; display:block; width:100%; height:2px; background:#1f2933; margin-top:6px;
}

/* Grid de noticias */
.news-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:16px; padding:8px 12px 14px;
}
@media (max-width:1200px){ .news-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:960px) { .news-grid{ grid-template-columns:repeat(2,1fr); } }

.news-card .thumb{
  display:block; position:relative; width:100%;
  padding-top:56.25%; overflow:hidden; border-radius:6px; background:#f5f7fa;
}
.news-card .thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.news-title{ font-size:.98rem; margin:8px 0 2px; line-height:1.25; }
.news-title a{ font-weight:700; display:inline-block; }
.news-meta{ font-size:.85rem; color:#6b7280; }
.news-footer{
  display:flex; justify-content:flex-end;
  padding:8px 12px 14px; border-top:1px solid #edf2f7; margin-top:6px;
}
.news-more{
  display:inline-block; padding:8px 14px; border:1px solid #111;
  border-radius:20px; font-weight:700; line-height:1;
}
.news-more:hover{ background:#111; color:#fff; text-decoration:none; }

/* Hover para items del menú superior */
.top-bar .menu.dropdown > li.is-dropdown-submenu-parent > a{
  position: relative;
  border-radius: 6px;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

/* Estado hover / focus teclado */
.top-bar .menu.dropdown > li.is-dropdown-submenu-parent:hover > a,
.top-bar .menu.dropdown > li.is-dropdown-submenu-parent:focus-within > a{
  background: rgba(240,171,52,.12); /* #f0ab34 con transparencia */
  color: #0b2c4a;
  box-shadow: inset 0 -2px 0 #f0ab34; /* subrayado “firme” */
}



/* Flechita en hover / focus */
.dropdown.menu > li.is-dropdown-submenu-parent:hover > a::after,
.dropdown.menu > li.is-dropdown-submenu-parent:focus-within > a::after{
  border-color: #f0ab34 transparent transparent;
  transform: translateY(1px);
}

/* Respeta usuarios con “reducir movimiento” */
@media (prefers-reduced-motion: reduce){
  .top-bar .menu.dropdown > li.is-dropdown-submenu-parent > a,
  .dropdown.menu > li.is-dropdown-submenu-parent > a::after{
    transition: none;
  }
}












/* Grupo/título dentro del menú vertical móvil */
#mobileMenu .mm-group { 
  margin: 8px 0 4px; 
  padding-top: 6px; 
  border-top: 1px solid rgba(255,255,255,.15);
}
#mobileMenu .mm-group-title{
  display:block; font-weight:800; text-transform:uppercase;
  font-size:.93rem; letter-spacing:.04em; opacity:.9;
}

/* Skeleton de carga */
#mobileMenu .mm-skel{
  display:flex; align-items:center; gap:10px; padding:12px 6px;
}
#mobileMenu .mm-spinner{
  width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:mmspin .7s linear infinite;
}
@keyframes mmspin{ to{ transform:rotate(360deg) } }

/* Mensaje vacío */
#mobileMenu .mm-empty{ opacity:.85; padding:10px 6px; }


/* Título de sección en el menú móvil (sin sangría) */
#mobileMenu .mm-group-title{
  display:flex; align-items:center;
  gap:.5em;                       /* espacio entre icono y texto */
  padding:6px 8px 4px;            /* sin empujar hacia la derecha */
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  opacity:.95;
  border-top:1px solid rgba(255,255,255,.15);  /* separador sutil */
}

/* Icono genérico de “grupo” antes del texto */
#mobileMenu .mm-group-title::before{
  content: "\f5fd";               /* fa-layer-group */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;               /* 'fas' */
  width: 1.25em;                  /* igualar ancho típico del icono de los items */
  margin-right: .18em;
  text-align: center;
  opacity:.9;
}


/* Tooltips de referencias (los que marcamos con data-bt-ref) */
.tooltip[data-bt-ref] { 
  pointer-events: auto !important; /* permite hacer click dentro del tooltip */
}

.tooltip[data-bt-ref] a.bt-ref-link{
  display: inline-block;          /* mejor área táctil en móvil */
  color: #fefefe;
}

.tooltip[data-bt-ref] a.bt-ref-link:focus{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}




 /* ===== Auth header (limpio) ===== */

/* Botón “Iniciar sesión” */
.bt-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:34px; padding:0 .9rem; border-radius:18px;
  border:1px solid #0f4c75; background:#fff; color:#0f4c75;
  font-weight:700; cursor:pointer; transition:background .15s,color .15s,border-color .15s;
}
.bt-btn:hover{ background:#0f4c75; color:#fff; }

/* Chip usuario */
.bt-user{ display:inline-flex; align-items:center; gap:.45rem; }
.bt-avatar{
  width:30px; height:30px; border-radius:50%; background:#0f4c75; color:#fff;
  display:inline-grid; place-items:center; font-weight:700; font-size:1rem;
}
.bt-user-name{
  display:inline-flex; align-items:center; line-height:1; font-weight:700; max-width:140px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff;
}
.bt-caret{ font-size:1.9rem; line-height:1; opacity:.85; color:#fff; margin-left:-10px; margin-right:-10px; }

.bt-auth-li{ cursor:pointer; }
html.bt-auth-ready .bt-auth-wrap{ visibility:visible; }
.bt-auth-wrap{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; user-select:none; height:40px;
}

/* Layout del UL */
.top-bar-right{ display:flex; align-items:center; justify-content:flex-end; }
#mainMenu{ display:flex; align-items:center; flex-wrap:nowrap; gap:.45rem; }
#mainMenu > li{ flex:0 0 auto; white-space:nowrap; margin-right:-5px; }
/* neutraliza inline-style del botón de modo oscuro */
#mainMenu > li[style*="margin-right: 70px"]{ margin-right:0 !important; width:auto !important; }

/* Dropdown (usuario) */
.bt-user-menu{ position:relative; }
.bt-user-dd{
  position:absolute; right:0; top:120%; min-width:180px; background:#fff;
  border:1px solid #e6e8eb; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.12);
  display:none; z-index:2000; margin-top:20px;
}
.bt-user-dd a{ display:flex; align-items:center; gap:.55rem; padding:.6rem .9rem; color:#333; font-weight:600; text-decoration:none; }
.bt-user-dd a:hover{ background:#f5f7fb; }
.bt-user-menu[aria-expanded="true"] .bt-user-dd{ display:block; }

/* Invitado (icono genérico + dropdown) */
.bt-guest{ position:relative; display:inline-flex; align-items:center; }
.bt-guest-trigger{
  display:inline-grid; place-items:center; width:34px; height:34px; border:0; background:transparent; color:#fff; cursor:pointer;
}
.bt-guest-trigger .fa-user-circle{ font-size:1.55rem; line-height:1; }
.bt-guest-dd{
  position:absolute; right:0; top:120%; min-width:180px; background:#fff;
  border:1px solid #e6e8eb; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.12);
  display:none; z-index:2000;
}
.bt-guest-dd a{ display:block; padding:.6rem .9rem; font-weight:600; text-decoration:none; }
.bt-guest-dd a:hover{ background:#f5f7fb; color:#333!important; }
.bt-guest[aria-expanded="true"] .bt-guest-dd{ display:block; }

/* Modal login */
.bt-modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:none; align-items:center; justify-content:center; z-index:99999;
}
.bt-modal{
  position:relative; background:#fff; border-radius:12px;
  box-shadow:0 15px 35px rgba(0,0,0,.25); width:360px; max-width:92%; padding:22px;
}
.bt-modal-close{
  position:absolute; top:8px; right:10px; background:transparent;
  border:0; font-size:35px; line-height:1; cursor:pointer;
}
.bt-field{ display:block; margin:.6rem 0; }
.bt-field input{
  width:100%; height:40px; border:1px solid #d8dee4; border-radius:8px; padding:0 .8rem;
}
.bt-btn-primary{
  display:inline-block; width:100%; height:42px; border:0; border-radius:8px;
  font-weight:700; cursor:pointer; background:#0f4c75; color:#fff;
}
.bt-btn-primary:hover{ filter:brightness(1.05); }
.bt-error{
  color:#c62828; font-size:.9rem; margin-top:.4rem; text-align:center; min-height:1.2em;
}

/* Popover móvil (avatar) */
.bt-pop-dd{
  position:fixed; right:10px; top:55px; min-width:200px; background:#fff;
  border:1px solid #e6e8eb; border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.18);
  z-index:200000; display:none; /* alto para quedar sobre todo */
}
.bt-pop-dd a, .bt-pop-dd button{
  display:block; width:100%; text-align:left; border:0; background:#fff;
  padding:.7rem .9rem; font-weight:600; color:#333; cursor:pointer; text-decoration:none;
}
.bt-pop-dd a:hover, .bt-pop-dd button:hover{ background:#f5f7fb; }

/* Utilidades */
.title-bar .dark-mode-small{ display:none !important; } /* ocultar botón modo oscuro en header móvil */
.top-bar input{ max-width:inherit !important; }
.menu-home{ font-size:larger; margin-right:-10px; }

/* ===== Responsive ===== */
@media (max-width:639px){
  .bt-user-name, .bt-caret{ display:none; }
  .bt-avatar{ width:30px; height:30px; font-size:.85rem; }

  /* Alinear idioma + avatar y tamaño de botones */
  .title-bar-right{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    text-align:initial !important;
  }
  .title-bar-right .container_button_header_search{ position:relative; }
  .title-bar-right .container_button_header_search > a,
  .title-bar-right .container_button_header_search > button{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px;
  }

  /* Modal sobre todo en móvil */
  #bt-login-backdrop{
    display:none; position:fixed; inset:0; z-index:300000 !important;
    align-items:flex-start; justify-content:center;
    padding:max(12px, env(safe-area-inset-top)) 12px 12px; box-sizing:border-box;
  }
  #bt-login-backdrop .bt-modal{
    width:100%; max-width:480px; margin:0 auto; border-radius:12px;
    max-height:calc(100vh - 24px - env(safe-area-inset-top)); overflow:auto;
  }
}

/* Ocultar nombre + flecha en tablet/móvil */
@media (max-width:1023px){
  .title-bar-right{
    display:flex !important; align-items:center !important; justify-content:center !important;
    flex-wrap:nowrap !important; gap:12px !important; text-align:initial !important;
  }
  .title-bar-right .container_button_header_search{
    display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex:0 0 auto;
  }
  #idiomas-reveal-1{ position:relative; z-index:100; }
  #bt-avatar-mobile{ position:relative; z-index:110; }
}

/* Header movil refinado (menu+logo izquierda, dark mode + idioma derecha) */
.bt-mobile-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 10px 0 0;
}
.bt-mobile-topbar .title-bar-left,
.bt-mobile-topbar .title-bar-right{
  margin-top:0 !important;
  margin-bottom:0 !important;
}
.bt-mobile-topbar-left{
  display:flex; align-items:center; gap:5px; min-width:0; flex:1 1 auto;
}
.bt-mobile-topbar-right{
  display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:8px; flex:0 0 auto;
}
.bt-mobile-topbar-right .container_button_header_search,
.bt-mobile-menu-btn,
.bt-mobile-dark-wrap,
.bt-mobile-lang-wrap{
  margin-top:0 !important; margin-bottom:0 !important;
  width:35px !important; height:35px !important;
  display:flex; align-items:center; justify-content:center;
}
.bt-mobile-menu-btn{
  margin-left:-6px !important;
}
.bt-mobile-menu-btn .menu-icon{
  margin:0 !important;
  line-height:1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.bt-mobile-topbar-right .container_button_header_search > a,
.bt-mobile-topbar-right .container_button_header_search > button{
  width:30px !important; height:30px !important;
  display:inline-flex !important; align-items:center; justify-content:center;
}
.bt-mobile-logo-link{
  display:flex; align-items:center; min-width:0;
}
.bt-mobile-logo{
  display:block; width:auto; height:24px; max-width:132px;
}
.title-bar .bt-mobile-dark-toggle{
  display:inline-flex !important; align-items:center; justify-content:center;
  width:21px !important; height:21px !important;
  border-radius:6px; padding:0 !important;
  background:#232222; border:1px solid rgba(255,255,255,.18);
}
.bt-mobile-dark-toggle #iconToggle{
  color:#f0f0f0 !important; font-size:14px !important;
}
@media (max-width:420px){
  .bt-mobile-logo{ height:22px; max-width:120px; }
}

.bt-user-dd a:hover{
  color:#000000!important;
}
 /* FIN ===== Auth header (limpio) ===== */


 .bt-verse.bt-current { 
 /* Cambiado de 'solid' (sólido) a 'dotted' (punteado) */
    outline: 2px dotted rgb(4 4 4 / 50%);
    
    /* El desplazamiento sigue igual para dar espacio */
    outline-offset: 2px;
}


.bt-verse.bt-picked  { box-shadow: inset 0 -3px 0 rgba(255,255,255,.35); }
#bt-bulk { position:fixed; left:50%; transform:translateX(-50%); bottom:64px; 
  background:#1e1f23; border:1px solid #333; border-radius:12px; padding:8px 10px; 
  display:none; z-index:9999; }
#bt-bulk .bt-circle{width:28px;height:28px;border-radius:50%;display:inline-block;border:2px solid #0003;cursor:pointer;margin:0 6px}



/* 1) Apaga el icono antiguo al final del versículo */
.bt-verse.bt-is-mark::after{
  content: none !important;
}

/* 2) Base para posicionar el icono bajo el número */
.bt-verse > sup{
  position: relative;            /* ancla para el ::before */
  display: inline-block;         /* que tenga caja propia */
  min-width: 1.1em;              /* da un poco de caja al número */
  text-align: center;
}

/* 3) El número en primer plano */
.bt-verse > sup > a{
  position: relative;
  z-index: 1;
}

/* 4) Nuevo icono como “fondo” del número cuando está marcado */
.bt-verse.bt-is-mark > sup::before{
  content: "\f02e";
  font-family: "Font Awesome 7 Free","Font Awesome 5 Free";
  font-weight: 900;              /* solid */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5em;            /* ajusta el tamaño del “fondo” */
  line-height: 1;
  color: #f0ab34;
  opacity: .55;                  /* más tenue para que el número se lea bien */
  text-shadow: #000 1px 1px 2px; /* ligero contraste como el actual */
  pointer-events: none;          /* no interfiere con el clic del número */
  z-index: 0;    
  margin-left: -2px;
}


.bt-note-badge{
    color: gray;
}

/* Iconos de nota numerados (se dibujan en el verso, no en el panel) */
.bt-note-badge{
position:relative; background:transparent; border:0; margin-left:6px; cursor:pointer;
opacity:.9; font-size:14px; line-height:1;

}
.bt-note-badge .bt-note-num{
position:absolute; top:-6px; left:-6px; font-size:10px; font-weight:700;
background:#696969; color:#1a1b1f; border-radius:999px; padding:0 4px; line-height:1.2; border:1px solid #333;
color: #e0e0e0 !important;
}

.bt-verse.bt-is-mark > sup {
   margin-right: 5px;
}


/* ========= AVATAR PLUS (corona en esquina - DESKTOP) ========= */
.bt-avatar-wrap{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.bt-avatar-plus-badge{
    position:absolute;
    right:-3px;
    bottom:-3px;
    width:16px;
    height:16px;
    display:none;               /* oculta por defecto */
    align-items:center;
    justify-content:center;
    pointer-events:none;
}

.bt-avatar-plus-badge i{
    color:#facc15;
    font-size:0.7rem;
    line-height:1;
}

/* Mostrar corona cuando el HTML tiene la clase bt-plus (cookie bt_plus=1) */
html.bt-plus .bt-avatar-plus-badge{
    display:flex;
}

/* ========= CORONA EN MÓVIL (bt-avatar-mobile) ========= */
/* El botón lo crea auth.js y le pone dentro un span.bt-avatar con la inicial */
html.bt-plus #bt-avatar-mobile .bt-avatar{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

/* Dibujamos la corona con un pseudo-elemento usando Font Awesome */
html.bt-plus #bt-avatar-mobile .bt-avatar::after{
    content:"\f521"; /* código de la corona en Font Awesome */
    font-family:"Font Awesome 5 Free";
    font-weight:900;
    position:absolute;
    right:-2px;
    bottom:-1px;
    font-size:0.7rem;
    color:#facc15;
    border-radius:999px;
    padding:1px;
    line-height:1;
}

/* ===== Auth dropdown desktop: evita que quede “detrás” o recortado ===== */
.top-bar, .top-bar-right, #mainMenu { overflow: visible !important; }

.bt-auth-li { position: relative; }
.bt-guest-dd, .bt-user-dd {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  min-width: 210px;
  z-index: 999999;
}

/* Desktop: texto "Iniciar Sesión" al lado del avatar (solo invitado) */
.bt-guest-actions{
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

.bt-guest-text{
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  font-weight:700;
  font-size:14px;
  line-height:1;
  color:#fff;
}

.bt-guest-text:hover{
  text-decoration:underline;
}

.bt-guest-text:focus{
  outline:none;
  text-decoration:underline;
}

/* ===== Botones OAuth ===== */
.bt-oauth{
  margin-top: .75rem;
  display:grid;
  gap:.55rem;
}

.bt-divider{
  display:flex; align-items:center; gap:.5rem;
  margin:.5rem 0 .75rem;
  font-size:.85rem;
}
.bt-divider::before,
.bt-divider::after{
  content:""; flex:1; height:1px; background:#e5e7eb;
}
.bt-divider span{ padding:0 .25rem; }

.bt-btn-google,
.bt-btn-apple{
  width:100%;
  height:40px;
  display:flex; align-items:center; justify-content:center;
  gap:.6rem;
  border:1px solid #d1d5db;
  border-radius:6px;
  font-weight:700;
  cursor:pointer;
}
.bt-btn-google{
  background:#fff;
  color:#111827;
}
.bt-btn-google:hover{ background:#f9fafb; }
.bt-btn-apple{
  background:#050505;
  border-color:#050505;
  color:#fff;
}
.bt-btn-apple:hover{
  background:#1f2937;
  border-color:#1f2937;
}
.bt-btn-google:disabled,
.bt-btn-apple:disabled{
  opacity:.7;
  cursor:not-allowed;
}

.bt-oauth-ico{
  width:18px; height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%3E%3Cpath%20fill='%23FFC107'%20d='M43.6%2020.5H42V20H24v8h11.3C33.6%2032.6%2029.2%2036%2024%2036c-6.6%200-12-5.4-12-12s5.4-12%2012-12c3.1%200%205.9%201.2%208%203.1l5.7-5.7C34.1%206.1%2029.3%204%2024%204%2012.9%204%204%2012.9%204%2024s8.9%2020%2020%2020%2020-8.9%2020-20c0-1.3-.1-2.7-.4-3.5z'/%3E%3Cpath%20fill='%23FF3D00'%20d='M6.3%2014.7l6.6%204.8C14.7%2016%2019%2012%2024%2012c3.1%200%205.9%201.2%208%203.1l5.7-5.7C34.1%206.1%2029.3%204%2024%204%2016.3%204%209.6%208.3%206.3%2014.7z'/%3E%3Cpath%20fill='%234CAF50'%20d='M24%2044c5.1%200%209.9-2%2013.5-5.2l-6.2-5.2C29.3%2035.1%2026.8%2036%2024%2036c-5.2%200-9.6-3.3-11.2-8l-6.6%205.1C9.5%2039.7%2016.2%2044%2024%2044z'/%3E%3Cpath%20fill='%231976D2'%20d='M43.6%2020.5H42V20H24v8h11.3c-1%202.7-3%204.9-5.6%206.4l0%200%206.2%205.2C35.5%2039.9%2044%2034%2044%2024c0-1.3-.1-2.7-.4-3.5z'/%3E%3C/svg%3E");
}
.bt-oauth-ico svg{
  width:18px;
  height:18px;
  display:block;
}
.bt-oauth-ico-apple{
  background-image:none;
  width:22px;
  height:22px;
}
.bt-oauth-ico-apple svg{
  width:22px;
  height:22px;
}

/* ===== Fin Botones OAuth ===== */

.compartirversodia span{
    padding: 0 15px;
}

/* ===== Mostrar / ocultar contraseña ===== */

.bt-pass-wrap{
  position: relative;
  display: block;
}

.bt-pass-wrap input{
  padding-right: 44px; /* espacio para el icono */
}

.bt-pass-toggle{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  padding: 6px;
  cursor: pointer;
  line-height: 1;
  opacity: .9;
}

.bt-pass-toggle:focus{
  outline: none;
}

.bt-pass-toggle i{
  font-size: 16px;
}
/* ===== Fin Mostrar / ocultar contraseña ===== */

/* ===== Android app install banner ===== */
.bt-app-install-banner {
  position: relative;
  display: none;
  align-items: center;
  gap: 10px;
  margin: 8px 10px 0;
  padding: 10px 34px 10px 12px;
  border-radius: 14px;
  background: linear-gradient(145deg, #1f2733 0%, #141c28 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.bt-app-install-banner.bt-visible {
  display: flex;
}

.bt-app-install-banner img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex: 0 0 auto;
}

.bt-app-install-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.bt-app-install-title {
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
}

.bt-app-install-subtitle {
  margin: 2px 0 -9px;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bt-app-install-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 2px 7px;
  line-height: 1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.bt-app-install-rating-value {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}

.bt-app-install-rating-star {
  font-size: 13px;
  color: #f7c948;
  text-shadow: 0 0 6px rgba(247, 201, 72, 0.45);
  transform-origin: 50% 50%;
  animation: btInstallStarGlow 2.2s ease-in-out infinite;
}

@keyframes btInstallStarGlow {
  0% {
    transform: scale(1);
    opacity: 0.88;
    text-shadow: 0 0 4px rgba(247, 201, 72, 0.30);
  }
  50% {
    transform: scale(1.07);
    opacity: 1;
    text-shadow: 0 0 10px rgba(247, 201, 72, 0.62);
  }
  100% {
    transform: scale(1);
    opacity: 0.88;
    text-shadow: 0 0 4px rgba(247, 201, 72, 0.30);
  }
}

.bt-app-install-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 6px;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: #2aa2ff;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.bt-app-install-action-icon {
  font-size: 11px;
  line-height: 1;
}

.bt-app-install-close {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .bt-app-install-rating-star {
    animation: none !important;
  }
}

@media screen and (min-width: 641px) and (max-width: 1023px) {
  .bt-app-install-banner {
    width: calc(100% - 28px);
    max-width: 760px;
    margin: 8px auto 0;
  }
}

@media screen and (max-width: 640px) {
  .bt-app-install-banner {
    margin: 6px 4px 0;
    padding: 9px 30px 9px 10px;
    border-radius: 12px;
    gap: 8px;
  }

  .bt-app-install-rating {
    gap: 2px;
    padding: 1px 6px;
  }

  .bt-app-install-rating-value {
    font-size: 10px;
  }

  .bt-app-install-rating-star {
    font-size: 12px;
  }

  .bt-app-install-action {
    margin-top: 4px;
    padding: 7px 10px;
    font-size: 11px;
  }
}
/* ===== End Android app install banner ===== */

/* ===== Ads width behavior (mobile full width / desktop limited) ===== */
@media screen and (max-width: 640px) {
  .row.bt-ad-group,
  .row.columns.bt-ad-group {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .row.bt-ad-group .publicidad-topmenu,
  .row.columns.bt-ad-group .publicidad-top-menu,
  .row.columns.bt-ad-group .publicidad-topmenu {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .row.bt-ad-group .adsbygoogle,
  .row.columns.bt-ad-group .adsbygoogle,
  .row.bt-ad-group .bt-ad-placeholder,
  .row.columns.bt-ad-group .bt-ad-placeholder {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media screen and (min-width: 641px) {
  .row.bt-ad-group,
  .row.columns.bt-ad-group {
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* ===== End ads width behavior ===== */

/* ===== Verse crossrefs trigger ===== */
.bt-crossrefs-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: auto;
  min-height: 48px;
  padding: 0.45rem 1.1rem;
  border: 1px solid rgba(7, 41, 69, 0.18);
  border-radius: 999px;
  background: linear-gradient(180deg, #3ea0eb 0%, #2486d4 100%);
  box-shadow: 0 10px 22px rgba(16, 61, 101, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: #fff;
  line-height: 1.1;
  vertical-align: middle;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.bt-crossrefs-trigger:hover,
.bt-crossrefs-trigger:focus {
  background: linear-gradient(180deg, #4ba8ef 0%, #2b90de 100%);
  box-shadow: 0 14px 28px rgba(16, 61, 101, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: #fff;
  transform: translateY(-1px);
}

.bt-crossrefs-trigger:focus {
  outline: 0;
}

.bt-crossrefs-trigger__count.circle-counter {
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
  line-height: 2.15rem;
  margin: 0;
  background: rgba(18, 29, 45, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font-size: 1.15rem;
  font-weight: 700;
}

.bt-crossrefs-trigger__label {
  display: inline-block;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.bt-crossrefs-trigger__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.95rem;
  line-height: 1;
}

.bt-crossrefs-trigger__icon i {
  line-height: 1;
}

@media screen and (max-width: 640px) {
  .bt-crossrefs-trigger {
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.4rem 0.9rem;
  }

  .bt-crossrefs-trigger__label {
    font-size: 1rem;
  }

  .bt-crossrefs-trigger__count.circle-counter {
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    font-size: 1.05rem;
  }

  .bt-crossrefs-trigger__icon {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.9rem;
  }
}
/* ===== End verse crossrefs trigger ===== */