/*
 * CSS ORGANIZADO: pagina Home.
 * Origem: Content/css/home.css criado a partir dos estilos removidos de style.css.
 */

/* MENU LATERAL DA HOME */

.p_font_size {
    font-size: 15.5px
}

.list-unstyled-actions-home {
    padding-left: 0;
    margin-bottom: 20px;
}
.li_direita_menu {
    list-style-type: none;
    border-bottom: 2px solid #ccc;
    display: flex;
    align-items: center;
    padding-right: 0px;
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 10px
}

.icon_li_menu_direita {
    color: #eb8602;
    font-size: 35px;
    margin-right: 15px;
}


.p2_div_interior_2 {
    font-size: 12px;
    color: #7a7e83;
   
}

.span_bold_div_interior_1 a {
    font-weight: bold;
    font-size: 16.5px;
    color: black
}

.span_bold_div_interior_1 a:hover{ color: #eb8602; text-decoration: none; }


/* ABAS DA HOME */
.painel-conteudo {
    display: none;
}

.painel-conteudo.ativo {
    display: block;
}

.aba-botao.ativo {
    background-color: #eb8602;
    color: white;
}

.botoes-abas{
    border-bottom: 2px solid black
}

.aba-botao {
    color: white;
    padding: 15px;
    font-size: 15.5px;
    margin-right: 15px;
    max-width: 150px;
    font-weight: bold;
    background-color: #b8b6b7;
    border: none
}

/* == HOME PAGE SLIDER == */
#carousel-featured { margin-bottom: 0; }
.carousel-indicators { left: inherit; right: 20px; top: 20px; bottom: inherit; height: inherit; width: inherit; margin: 0; }
.carousel-indicators li, .carousel-indicators .active { height: 15px; width: 15px; border-width: 2px; margin: 1px; }
.carousel-indicators li { background-color: #222222\9; background-color: rgba( 0, 0, 0, 0.1 ); } 
.carousel-indicators .active { opacity: 0.7; }
.carousel-control.right, .carousel-control.left { background-image: none; background-repeat: inherit; top: 50%; width: 40px; height: 40px; margin-top: -20px; line-height: 40px;margin-left: 7px; }
.carousel-inner > .item { -webkit-transition: 0.9s ease-in-out left; -moz-transition: 0.9s ease-in-out left; -o-transition: 0.9s ease-in-out left; transition: 0.9s ease-in-out left;  }
.carousel-control { color: #47a1fe; }
.carousel-item{
	background-color: white;
    border-right: 0.625rem solid #F5F5F5;
    cursor: pointer;
    float: left;
    height: 11rem;
    width: 33%;}

    .carousel-item img {
    display: block;
    height: auto;
    margin: 0.25rem auto;
    max-height: 10.5rem;
    max-width: 8.45rem;
    width: auto;
    padding: 0px;
    padding-left: 0;
}
.k-carousel-caption { position: absolute; border-top: 12px solid #eb8602; }
.caption-content { padding: 30px; }
.caption-title { font-weight: 700; margin: 0 0 15px 0; padding: 0 0 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.pos-1-3-right, .pos-1-3-left { width: 33.3%; }
.pos-2-3-right, .pos-2-3-left  { width: 66.6%; }
.pos-1-3-left, .pos-2-3-left { left: 0; }
.pos-1-3-right, .pos-2-3-right { right: 0; }
.pos-1-3-left, .pos-2-3-left, .pos-1-3-right, .pos-2-3-right { bottom: 0; }
.pos-c-full { width: 100%; }
.pos-c-2-3 { width: 66.6%; margin: 0 17%; }
.pos-c-full, .pos-c-2-3 { bottom: 0; text-align: center; border-top: none; }
.scheme-dark { color: #FFF; background-color: rgba(35, 68, 137, 0.6); -moz-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); -webkit-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.scheme-light { color: #111; background-color: rgba(255, 255, 255, 0.5); -moz-text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); -webkit-text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); }
.scheme-dark .caption-title { color: #FFF; }
.scheme-light .caption-title { color: #363636; }
.no-bg { background: none; }
.no-bg .caption-title {
	border-bottom: none;
	padding: 0;
}
/* == END HOME PAGE SLIDER == */ 

/* Lista de artigos nas abas da home: estilos em content/css/components/previous-numbers-article-list.css (.home-tabs-articles + .abo-article-list) */

/* == SUMMARY PAGE INITIAL == */
.secao-artigo-home{ font-size:13px; color:#7a7e83 !important; font-weight: bolder;}
.titulo-artigo-home{ font-size:14px; color:#eb8602 !important;}
.conteudo-artigo-home{ font-size:13px; color:#000;}
.autor-artigo-home { font-size:13px; color:#7a7e83; }
.article-tools-home{ font-size: 12px !important; margin: 0 1px 0 0 !important;}
.article-tools-home img{ width:17px !important;}
.bt-sumario{ float:right; border: solid 1px #eb8602; font-size:14px; font-weight:bold;margin: 0; padding: 5px; line-height:1.1; background-color:#e6e8eb;width:400px}

/*== TWO COLUMNS INDEX ==*/
.container-duas-colunas {
    width: 100%;
    display: flex;
    gap: 50px;
}

.coluna {
    box-sizing: border-box;
}

#coluna-esquerda {
    width: 70%;
}

#coluna-direita {
    width: 30%;
    height: auto;
    padding: 0;
}

#div_container_home {
    max-width: 1185px;
    width: 100%;
}

.div_card_direita_home {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 30px;
}

.title_1_direita_home, .title_2_direita_home, .title_3_editorial_board{
    list-style-type: none;
    display: flex;
    align-items: center;
    padding-right: 0px;
    padding-left: 15px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: black;
    color: #eb8602;
    font-weight: bold;
    font-size: 18.5px;
   }

.title_2_direita_home {
    background-color: #eb8602;
    color: white;
}

.div_card_3_direita  {
    gap: 0;
}

.div_infos_metrics_direita {
    width: 300px;
    margin: 0 auto;
    text-align: center;
    border: 1px solid #ddd;
    padding: 15px 20px;
}


.div_journal_citation {
    font-weight: bold;
    font-size: 15.5px;
    text-align: left;
}

#div_sjr {
    font-size: 15.5px;
    text-align: left;
    display: flex;
    justify-content: space-between;
}

.journal_metric {
    padding-bottom: 10px;
}

/* LOGO CBO */

.logoCBO {
    margin: 0 auto;
    width: 170px
}

.coluna:last-child {
        border-right: none;
}

#p_orange_bold {
    font-weight: bold;
    color: #eb8602;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 5px;
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
}

.grid-item img {
    padding: 5px
}

/* RESPONSIVIDADE HOME PAGE */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Centraliza o contêiner de duas colunas */
    .container-duas-colunas {
        max-width: 980px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 20px;
    }
}

@media (min-width: 760px) and (max-width: 1360px) {
    .container-duas-colunas {
        max-width: 95%;
        margin-left: auto;
        margin-right: auto;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .coluna {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 768px) {
    .coluna {
        justify-content: center;
        margin: auto !important
    }

    .container-duas-colunas {
        display: block; /* Empilhamento de colunas */
        padding: 0 15px;
    }

    .coluna,
    #coluna-esquerda {
        width: 100%;
        padding: 0 15px; 
        box-sizing: border-box;
        max-width: 100%;
    }

    #coluna-direita {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
        margin: 20px auto 0 auto;
        max-width: 400px;
    }

    #coluna-esquerda {
        padding-left: 15px;
        padding-right: 15px;
    }

    .container-abas {
        margin-top: 20px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100%;
        box-sizing: border-box;
        margin-left: 15px;
        margin-right: 15px;
    }

    .botoes-abas {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 100%;
        overflow-x: auto;
    }

    .aba-botao {
        width: 33.33%;
        flex-grow: 1;
        flex-shrink: 1;
        min-width: 100px;
        margin: 0;
        padding: 10px 5px;
        font-size: 14px;
        border-radius: 0;
    }

    #coluna-direita p,
    #coluna-direita span,
    #coluna-direita h1 {
        text-align: center !important;
    }

    #coluna-direita {           
        margin-left: auto;
        margin-right: auto;          
    }

        #coluna-direita ul,
        #coluna-direita div {              
            text-align: center;
            display: block !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }

    #div_interior_infos_metrics_direita > div[style*="display: flex; justify-content: space-between;"] {
        justify-content: center !important;
        text-align: center !important;
        max-width: 300px;
    }

    #div_infos_metrics_direita {
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    div[style*="width: 300px; justify-content: center;"] {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    div > div[style*="width: 300px;"] { 
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #coluna-direita img[src*="newton_home.png"] {
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }

    #coluna-direita ul[style*="padding: 0px;"] {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 300px;
        text-align: center !important;
    }



    /* Itens do menu lateral (SUBMIT NOW / INSTRUCTIONS / INFORMATIONS)
       bem compactos: ícone menor + padding mínimo. Prefixo #coluna-direita
       para vencer a regra "#coluna-direita div { ... }" mais acima. */
    #coluna-direita .li_direita_menu {
        display: flex !important;
        justify-content: center !important;
        align-items: center;
        margin: 0 auto !important;
        max-width: 350px;
        padding: 4px 0 !important;
        text-align: left;
    }

    #coluna-direita .list-unstyled-actions-home {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        padding: 0 !important;
    }

    /* Ícone com tamanho reduzido também em 768px (antes só em 480px). */
    #coluna-direita .icon_li_menu_direita,
    #coluna-direita .li_direita_menu i {
        font-size: 26px !important;
        min-width: 36px;
        text-align: right;
        margin-right: 12px !important;
    }

    #coluna-direita .div_menu_direita {
        flex-grow: 1;
        text-align: left;
        margin-left: 0 !important;
        padding-left: 0 !important;
        line-height: 1.2;
    }

    #coluna-direita .span_bold_div_interior_1 {
        display: block;
        text-align: left !important;
    }

    #coluna-direita .span_bold_div_interior_1 a {
        font-size: 15px;
    }

    #coluna-direita .p2_div_interior_2 {
        font-size: 11.5px;
        margin: 0;
    }

    /* Indexes: 3 colunas no mobile.
       O prefixo #coluna-direita é necessário para vencer
       a regra "#coluna-direita div { display: block !important }"
       que estava forçando uma coluna só. */
    #coluna-direita .grid-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 6px !important;
        justify-content: center;
    }

    #coluna-direita .grid-item {
        padding: 6px;
        text-align: center;
    }
}


/* == TITLES STATISTICS HOME == */
.title-statitic-home {
    color: #7a7e83;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    line-height: 1.1;
}

.title-statitic-article-home {
    font-weight: 500;
}

.img-altmetric {
    float: left;
    padding-right: 10px;
}

.altmetric {
    padding: 10px 5px;
    line-height: 20px !important;
}


/* == RESPONSIVIDADE TABS HOME == */

@media (max-width: 1495px) and (min-width: 1200px) {
    .k-functional-navig {
        padding-top: 5px;
        width: 29%;
    }

        .k-functional-navig ul {
            padding: 5px 30px;
        }

    .issn {
        margin: -5px 0px !important;
        font-size: 14px;
    }

    .k-main-navig {
        right: 2%;
    }

    #drop-down-left > li {
        
        padding: 5px !important
    }

    #drop-down-left a {
        font-size: 14px;
    }
}
/* MD */

@media(min-width: 800px) and (max-width: 1023px){
    .botoes-abas {
        display: flex;
        flex-wrap: nowrap;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .botoes-abas .aba-botao {
        flex: 1 1 0;
        margin: 0 !important;
        padding: 15px 10px;
        border: none;
        cursor: pointer;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        color: #fff;
        background-color: #a9a9a9;
     }

.botoes-abas .aba-botao.ativo {
    background-color: #ff8c00;
}

@media (min-width: 768px) {         
    .botoes-abas {
        flex-direction: row !important;
        width: 100%;
    }
}
  
}

@media (min-width: 992px) and (max-width: 1345px) {
    .k-carousel-caption .caption-title {
        font-size: 18px;
    }

    .k-carousel-caption p {
        font-size: 13px;
    }

    .k-carousel-caption .caption-content {
        padding: 20px 30px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    /* == responsive metrics/access home == */
    #div_infos_metrics_direita {
        width: 100%;
        max-width: 350px;
        box-sizing: border-box;
        float: none;
        margin: 0 auto;
    }

    #div_acess_home {
        width: 100%;
        max-width: 350px;
        box-sizing: border-box;
        float: none;
        margin: 0 auto
    }

    /* == hide carousel caption in tablet and mobile == */
    .k-carousel-caption {
        display: none;
    }
}

@media (max-width: 767px) {
    /* == hide carousel caption in mobile == */
    .k-functional-navig,
    .k-carousel-caption {
        display: none;
    }
}

/* == HOME PAGE == */
.div_h_acess_home {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5;
}

.div_numbers_hacess {
    display: flex;
    justify-content: space-between;
}

.div_medicine {
    text-align: left;
}

.span_div_h_acess_home {
    font-weight: bold;
    font-size: 15.5px;
}

.span_div_numbers_hacess {
    font-size: 15.5px;
    font-weight: normal;
    padding-top: 5px;
}

#li_editorial_board {
    list-style-type: none;
}

#div_editorial_board {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#img_li_editorial_board {
    margin: auto;
    width: 100px;
}

.p_editor, .p_editor_name, .p_acess_editorial,.p_acess_editorial a{
    font-weight: normal ;
    font-size: 15.5px;
    margin-top: 5px;
    margin-bottom: 0px;
    text-align: center;
}

.p_editor {
    font-weight: bold;
}

.p_editor_name {
    font-style: italic;
    font-weight: normal;
}

.p_acess_editorial a{
    color: #eb8602;
    text-decoration: underline;
}

.p_acess_editorial a:hover{
    color: #f8bb6e;
    text-decoration: underline;
}


#div_acess_home {
    text-align: center;
}

#div2_acess_home {
    align-content: center;
    border: 1px solid #ddd;
    justify-content: center;
    vertical-align: auto !important;
    margin-left: auto;
    margin-right: auto;
    padding: 15px
}

#p1_div_acess_home {
    font-weight: bold;
    font-size: 15.5px;
    margin-bottom: 0px
}

.grid-item.merged {
    display: flex;
    flex-direction: column;
    text-align: left;
    align-items: flex-start !important;
}

.grid-container {
    display: grid;
    grid-template-rows: repeat(4, auto);
    grid-template-columns: repeat(3, 1fr);
    gap: 10px; 
    font-size: 12px;
    margin-top: 5px
}

.grid-item {
    text-align: center;
    font-weight: bold;
    padding: 5px;
    color: white;
}

#grid-item-img {
    background-color: transparent !important;
    text-align: center;
    font-weight: bold;
    padding: 5px;
    justify-content: flex-start
}

#grid-item-select {
    background-color: white !important;
    text-align: left;
    font-weight: bold;
    padding: 5px;
}

.grid-item a {
    color: white;
}

.merged {
    color: black;
    grid-column: 1 / 3;
    background-color: transparent;
    font-size: 13px;
    font-weight: normal;
    border-top: 2px solid #eb8602;
}

/* ============================================================
   AJUSTES MOBILE — HOME PAGE (acrescentado por última, para
   ter prioridade sobre as regras anteriores via ordem de cascata).
   Mantém o desktop intacto: tudo dentro de media queries.
   ============================================================ */

@media (max-width: 768px) {

    /* Coluna direita: solta o cap de 400px para os cards usarem
       a largura do celular sem ficarem espremidos. */
    #coluna-direita {
        max-width: 100%;
    }

    /* Cartão de métricas: vira fluido em vez de 300px fixos. */
    .div_infos_metrics_direita {
        width: 100%;
        max-width: 320px;
        padding: 12px 16px;
        box-sizing: border-box;
    }

    /* Restaura o flex dos pares "label / valor" das métricas
       (estavam virando block por causa da regra mais ampla acima
       em #coluna-direita div). */
    #coluna-direita .div_h_acess_home,
    #coluna-direita .div_numbers_hacess,
    #coluna-direita #div_sjr {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 4px 12px;
        text-align: left !important;
    }

    /* Sem overflow horizontal por causa de imagens de indexador
       com largura fixa inline. */
    .grid-item img {
        max-width: 100%;
        height: auto;
    }

    /* Setas do carousel: alvo de toque maior (>= 44px). */
    .carousel-control.left,
    .carousel-control.right {
        width: 44px;
        height: 44px;
        line-height: 44px;
        margin-top: -22px;
    }

    /* Botão "ALL PAPERS HERE": padding inline de 5px é pequeno
       para toque; aumenta só no mobile. */
    #div_acess_home a[href="/commented-papers"] {
        display: inline-block;
        padding: 10px 14px !important;
        line-height: 1.2;
    }

    /* Botões de aba: cabem em uma linha sem provocar scroll lateral
       dentro de .botoes-abas em celulares apertados. */
    .aba-botao {
        min-width: 0;
        font-size: 13px;
        line-height: 1.2;
        padding: 10px 4px;
    }

    /* Parágrafo intro um pouco menor para leitura confortável. */
    .p_font_size {
        font-size: 15px;
        line-height: 1.5;
    }

    /* Mobile: oculta a imagem de destaque das abas (Latest / Most Accessed /
       Most read) e mantém só o texto. Anula também a coluna que sumiu para
       o texto ocupar 100% da largura. */
    .home-tabs-articles .home-tab-article-thumb-col,
    .home-tabs-articles .home-tab-article-thumb-link,
    .home-tabs-articles .home-tab-article-thumb-img {
        display: none !important;
    }

    .home-tabs-articles .home-tab-article-row {
        flex-direction: row;
        gap: 0;
    }

    .home-tabs-articles .home-tab-article-text-col {
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* Sem thumb, o badge do "Most Read / Most Accessed" não precisa
       empurrar a imagem para baixo. */
    .home-tabs-articles .home-tab-article-row--with-counter .home-tab-article-meta-row {
        padding-right: 110px;
    }
}

@media (max-width: 480px) {

    /* Títulos dos cards da coluna direita ficam grandes demais
       para a largura disponível em celulares pequenos. */
    .title_1_direita_home,
    .title_2_direita_home,
    .title_3_editorial_board {
        font-size: 15.5px;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Menu lateral: padding ainda menor em telas bem pequenas. */
    #coluna-direita .li_direita_menu {
        padding: 3px 0 !important;
        max-width: 100%;
    }

    #coluna-direita .icon_li_menu_direita,
    #coluna-direita .li_direita_menu i {
        font-size: 24px !important;
        margin-right: 10px !important;
        min-width: 32px;
    }

    #coluna-direita .span_bold_div_interior_1 a {
        font-size: 14px;
    }

    #coluna-direita .p2_div_interior_2 {
        font-size: 11px;
    }

    .div_interior_2 {
        text-align: left !important;
    }

    .div_menu_direita {
        margin: 10px 0 !important;
    }

    .logoCBO {
        margin-top: 30px;
    }

    /* Abas: três rótulos cabendo em uma linha mesmo em ~320px. */
    .aba-botao {
        font-size: 11.5px;
        padding: 8px 2px;
    }

    /* Foto do editor um pouco menor em telas estreitas. */
    #img_li_editorial_board {
        margin-top: 30px;
        width: 90px;
    }

    /* Indexes mantém 3 colunas, só com gap/padding ainda menor. */
    #coluna-direita .grid-container {
        gap: 4px !important;
    }

    #coluna-direita .grid-item {
        padding: 3px;
    }

    /* Setas do carousel um pouco menores no celular pequeno
       para não invadirem o conteúdo da imagem. */
    .carousel-control.left,
    .carousel-control.right {
        width: 36px;
        height: 36px;
        line-height: 36px;
        margin-top: -18px;
        font-size: 18px;
    }

    /* Indicadores do carousel descem para a base e ficam centrados;
       no topo direito eles brigam com o conteúdo no celular. */
    .carousel-indicators {
        top: auto;
        right: 0;
        left: 0;
        bottom: 8px;
        margin: 0 auto;
        text-align: center;
    }

    /* Texto intro mais compacto. */
    .p_font_size {
        font-size: 14px;
    }

    /* Badge "PDF Downloads / Views" nas abas Most Read / Most Accessed:
       reduz para não sobrepor o título em telas muito estreitas. */
    .home-tab-article-counter-badge {
        font-size: 10px;
        padding: 2px 6px !important;
    }
}