@font-face {
    font-family: 'Roboto-Regular';
    src        : url('/fonts/Roboto-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto-Bold';
    src        : url('/fonts/Roboto-Bold.woff2') format('woff2');

}

@font-face {
    font-family: 'Roboto-light';
    src        : url('/fonts/Roboto-Light.woff2') format('woff2');

}

@font-face {
    font-family: 'Roboto-Condensed';
    src        : url('/fonts/RobotoCondensed.woff2') format('woff2');

}

/* ====== Paleta de colores ====== */
:root {
    --links      : #016ca2;
    --etiquetas  : #e0e6e9;
    --negro      : #000000;
    --blanco     : #FFFFFF;
    --footer-gray: #333333;
    --rojo-unav  : #ff0000;
    --transition : all 300ms;
    --nav-text   : #898989;
    --links-hover: #3489bf;
}
body {
    font-family: 'Roboto-Light';
}


h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: "Roboto-Condensed", "Arial Narrow Bold", sans-serif;
}

p{text-align: justify;}

a {
    color: var(--links);
    text-decoration: none;
}

         a:hover, a:focus {
    color: var(--links-hover);
    text-decoration: underline;
}

.btn-primary {
    color: #fff;
    background-color: var(--rojo-unav);
    border-color: var(--rojo-unav);
}

.footer {
    padding: 0 !important;

    .container {
        width : 100%;
        margin: 0;
    }

    .footer-redes {
        background     : var(--etiquetas);
        height         : 80px;
        padding        : 0 !important;
        display        : flex;
        justify-content: center;
        align-items    : center;
        flex-direction : row;
        gap            : 1rem;
    }

    .redes-icon {
        max-width   : 40px;
        border-left : 1px solid var(--footer-gray);
        height      : 25px;
        padding-left: 6px;
    }

    .redes-icon-last {
        max-width   : 40px;
        border-left : 1px solid var(--footer-gray);
        border-right: 1px solid var(--footer-gray);
        height      : 25px;
        padding     : 0px 6px;
    }

    .footer-info {
        background     : var(--footer-gray);
        padding        : 2em 10em;
        width          : 100%;
        display        : flex;
        justify-content: center;
        align-items    : center;
        flex-direction : row;
        flex-wrap      : wrap;
        color          : #FFFFFF;
    }

    .title-info {
        font-size  : 1.8rem;
        font-weight: bold;
    }

    .info-contact {
        display        : flex;
        justify-content: center;
        align-items    : center;
        flex-direction : column;
        gap            : 1rem;
    }

    .info-logo {
        .info-logo-img {
            max-width: 180px;
        }
    }

    .contact-btn {
        border    : 2px solid var(--blanco);
        width     : 100%;
        text-align: center;
        padding   : 5px;
        transition: var(--transition);

    }

    .contact-btn:hover {
        border    : 2px solid var(--negro);
        width     : 100%;
        background: var(--blanco);
        color     : var(--negro);
        transition: var(--transition);

        a {
            color: var(--negro);
        }

        .contact-btn-icon {
            filter    : invert(1);
            transition: var(--transition);
        }

    }

    .contact-btn-icon {
        max-width   : 20px;
        max-height  : 20px;
        margin-right: 5px;
        transition  : var(--transition);
    }



    .footer-license {
        background: var(--negro);
        padding   : 1em;
    }

    .license-links {
        display        : flex;
        justify-content: center;
        align-items    : center;
        flex-wrap      : wrap;
    }

    .links-text {
        color: var(--blanco);
    }

    .links-text-link {
        display        : flex;
        justify-content: flex-end;
        align-items    : center;
        gap            : 1rem;
        flex-wrap      : wrap;
    }

    .links-text-link a,
    a {
        color     : var(--blanco);
        transition: var(--transition);
    }

    .links-text-link a:hover,
    a:hover {
        color          : var(--links-hover);
        transition     : var(--transition);
        text-decoration: none;
    }

    .links-license {
        text-align: center;
        color     : var(--blanco);
    }

    .col-md-12 {
        padding: 0 !important;
    }


}

.footer-unav {
    width  : 100%;
    padding: 0 !important;
}


.description-title{
    text-align: center;
    border-bottom: 1px solid var(--negro);
    padding-bottom: 1rem;
    text-transform: uppercase;
}

.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
    color: var(--negro);
    text-decoration: none;
    background-color: var(--etiquetas);
    font-weight: bold;
    transition: var(--transition);
}

.dropdown-menu>li>a, .dropdown-menu>li>a {
    transition: var(--transition);
}

.pkp_block {
    margin-bottom: 8rem;
    background-color: #fff;
    border: none;
}

.issue-toc{
    
    .page-header h2 small{
        color: var(--negro);
        font-weight: bold;
    }

    .media-list{
        .media-heading a{
            color: var(--links);
            font-family: 'Roboto-Light';
            font-weight: normal;
            transition: var(--transition);  
        }

        .media-heading a:hover, .media-heading a:focus{
            color: var(--links-hover);
            font-weight: normal;
            transition: var(--transition);
        }
    }

    .sections{
        .btn-group{
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
        border-radius: 0;
    }
    .btn-group>.btn{
        border-radius: 0;
    }
    }

    .ver-en-dspace {
        color: var(--blanco);
        padding: 10px 12px;
        text-align: center;
        background: var(--negro);
        width: 100%;
        display: block;
        font-size: 1.3rem
    }

    .galleys{
        .btn-group{
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 1rem;

        .btn{
            border-radius: 0;
            padding: 8px 22px;
        }
    }
    
}

}

.ver-en-dspace {
    color: var(--blanco);
    padding: 10px 12px;
    text-align: center;
    background: var(--negro);
    width: 100%;
    display: block;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.breadcrumb {

    background-color: transparent;

}

.breadcrumb > li + li:before {
    padding: 0 5px;
    color: #ccc;
    content: ">\00a0";
}

.pkp_block{

    -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0); 
    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.05);

    .title,
    h2.title{
        font-family: 'Roboto-Condensed';
        font-size: 1.8rem;
        font-weight: 500;
        color: var(--negro);
        background: none;
        border: none;
        border-bottom: 1px solid var(--etiquetas);
        padding: 0.5rem 0;
    }

    a{
        color: var(--negro);
        text-decoration: none;
        transition: var(--transition);
    }

    a:hover, a:focus{
        color: var(--links);
        text-decoration: underline;
        transition: var(--transition);
    }

    .content{
        padding: 0;
        border: none;

        li{
            border: none;
            padding: 1rem 0;
        }
    }

    &.block_make_submission a {
        color: var(--negro);
            background-color: var(--etiquetas);
            border-color: transparent;
            border-radius: 0px;
            font-family: 'Roboto-Bold';
            padding: 10px 3rem;
            font-size: 2.2rem;
    }

    &.block_make_submission{
        .content{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

        }
    }
    .indices{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;

        img{
            width: auto;
            height: 6rem;
        }
    }

}


.cmp_breadcrumbs{

    .breadcrumb-yah{
        color: var(--negro);
        font-family: 'Roboto-Bold';
        padding-right: 1rem;
    }
    .breadcrumb{
        padding: 1rem  0;
    }
    a{
        color: var(--negro);
        text-decoration: none;
        transition: var(--transition);
    }
    a:hover, a:focus{
        color: var(--links);
        text-decoration: underline;
        transition: var(--transition);
    }
}


.article-details .download .btn {
    margin: .5em 0;
    display: block;
    border-radius: 0;
}

  



.article-main,
.article-more-details,
.doi,
.page_issue_archive .issues,
.article-tabs
.tab-content{

    a{
        color: var(--links);
        text-decoration: none;
        transition: var(--transition);
    }
    a:hover, a:focus{
        color: var(--links-hover);
        text-decoration: underline;
        transition: var(--transition);
    }
}


.article-tabs {
    margin-top: 2rem;
}

.article-tabs .nav-tabs {
    border-bottom: 1px solid var(--etiquetas);
    margin-bottom: 1.5rem;
}

.article-tabs .nav-tabs > li > a {
    color: var(--negro);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 20px;
    font-family: 'Roboto-Bold';
    transition: var(--transition);
}

.article-tabs .nav-tabs > li > a:hover {
    background: none;
    border-color: var(--links);
    color: var(--links);
}

.article-tabs .nav-tabs > li.active > a,
.article-tabs .nav-tabs > li.active > a:hover,
.article-tabs .nav-tabs > li.active > a:focus {
    background: none;
    border: none;
    border-bottom: 2px solid var(--links);
    color: var(--links);
}

.article-tabs .tab-content {
    padding: 1rem 0;
}

.article-tabs .tab-pane {
    display: none;
}

.article-tabs .tab-pane.active {
    display: block;
}


/* ====== Dispositivos móviles (Punto de quiebre OJS) (hasta772px) ====== */
@media (max-width: 991px) {

    .footer {
        .links-text-link {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
        }
        .info-dir{
            text-align: center;
        }
    }

    .article-tabs .nav-tabs > li {
        width: 100%;
        text-align: center;
    }
    
    .article-tabs .nav-tabs > li > a {
        margin-right: 0;
    }

    .navbar .container-fluid {
        padding   : 0;
        background: var(--etiquetas);
    }
    .journal-description{
        text-align: center;
    }

    .navbar-default .nav>li>a, .header_view .nav>li>a {
        color: var(--nav-text);
        font-family: 'Roboto-Light';
        font-weight: normal;
        transition: var(--transition);
    }
    .navbar-default .nav>li>a:hover, .header_view .nav>li>a:hover {
        color: var(--negro);
        font-family: 'Roboto-Light';
        font-weight: normal;
        text-decoration: underline;
        transition: var(--transition);
        background: none;
    }

    .navbar-toggle {
        position: absolute;
        float: right;
        padding: 11px 10px;
        margin-right: 0;
        margin-top: 12px;
        top: calc(9vw - -9.25vw);
        left: 10px;
        margin-bottom: 13px;
        background-color: var(--nav-text);
        background-image: none;
        border: 1px solid var(--negro);
        border-radius: 4px;
    }

    .container>.navbar-header,
    .container-fluid>.navbar-header,
    .container>.navbar-collapse,
    .container-fluid>.navbar-collapse {
        margin-right: 0;
        margin-left : 0;
        position    : relative;
    }

    .navbar-brand {
        padding: 0;
        height : auto;
    }

    .navbar-brand-logo img {
        max-height: 100%;
        width     : 100vw;
        height    : auto;
    }

    .buscador {
        display         : flex;
        justify-content : center;
        align-items     : center;
        width           : 100%;
        margin-top      : 1rem;
        margin-bottom   : 1rem;
        padding-left    : 4rem;
        background-color: var(--etiquetas);

        .buscador-form {
            display        : flex;
            justify-content: center;
            align-items    : center;
            width          : 80%;
            position       : relative;
        }

        .buscador-input {
            width  : 100%;
            padding: 5px 45px 5px 5px;
            font-family: 'Roboto-Light';
            font-weight: normal;
        }

        .buscador-boton {
            position  : absolute;
            right     : 0;
            background: none;
            border    : none;
        }

        .icon-lupa {
            max-width : 30px;
            height    : auto;
            margin-top: 3px;
        }
    }
    
    
}

.article-references{
    max-height: 50vh;
    overflow-y: scroll;
    padding-right: 2rem;
}

/* ====== Escritorio (Punto de quiebre OJS)(Desde 992px) ====== */
@media (min-width: 992px) {


    .navbar .container-fluid {
        padding: 0;
        font-family: 'Roboto-Light';
        color      : var(--nav-text);

    }

    nav .open>a,
    .nav .open>a:hover,
    .nav .open>a:focus {
        background-color: none;
    }

    .navbar-default .nav>li>a:hover,
    .navbar-default .nav>li>a:focus,
    .navbar-default .nav>li>a:active,
    .header_view .nav>li>a:hover,
    .header_view .nav>li>a:focus,
    .header_view .nav>li>a:active {
        color          : #000;
        background     : none;
        text-decoration: underline;
        transition     : var(--transition);
    }

    .navbar-default .nav>li>a,
    .header_view .nav>li>a {
        color      : var(--nav-text);
        background : none;
        font-weight: normal;
        transition: var(--transition);
    }

    .navbar>.container-fluid .navbar-brand {
        margin-left: 0px;
    }

    .navbar-brand-logo img {
        max-height: 100%;
        width     : 100%;
    }

    .navbar-header {
        float: none;
        width: 100%;
    }

    .navbar-brand {
        float      : none;
        height     : auto;
        padding    : 0;
        font-size  : 19px;
        line-height: 21px;
    }

    .navbar-default .navbar-collapse,
    .navbar-default {
        background-color: var(--etiquetas);
    }

    #nav-menu,
    .navbar-collapse.collapse {
        display        : flex !important;
        justify-content: center;
        align-items    : center;

    }

    .buscador {
        display        : flex;
        justify-content: center;
        align-items    : center;
        width          : 100%;
        margin-top     : 3rem;

        .buscador-form {
            display        : flex;
            justify-content: center;
            align-items    : center;
            width          : 80%;
            position       : relative;
        }

        .buscador-input {
            width      : 100%;
            font-family: 'Roboto-Light';
            font-weight: normal;
            padding    : 20px 45px 20px 5px;
        }

        .buscador-boton {
            position  : absolute;
            right     : 0;
            background: none;
            border    : none;
        }

        .icon-lupa {
            max-width : 30px;
            height    : auto;
            margin-top: 3px;
        }
    }

    .pkp_structure_content.container{
        width: 90%;
    }

}


/* ====== Escritorio (Punto de quiebre OJS)(Desde 1690px) ====== */
@media (min-width: 1690px) {}

/* Estilos para el sistema de pestañas */