/* Estilos para el texto de la descripción del número */
p, li, blockquote, cite, dd {
    font-family: 'Helvetica', sans-serif;
    line-height: 1.5;
    margin-bottom: 1.25rem;
    text-align: justify;
    font-size: 12pt;
}

/* ========================================
   ESTILOS PERSONALIZADOS PARA OJS
   ======================================== */

/* ----------------------------------------
   ESTILOS PARA LA SECCIÓN DE REFERENCIAS
   ---------------------------------------- */

/* Selecciona específicamente la sección de referencias en la vista de artículo */
.article-details .references,
.article-main .references,
.obj_article_details .references,
#references,
.section.references {
    font-size: 10pt !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
    line-height: 1.4;
}

/* Alternativa para diferentes versiones de OJS */
.article-sidebar .references,
.article-content .references {
    font-size: 10pt !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
    line-height: 1.4;
}

/* Estilos para el título de Referencias */
.references h2,
.references h3,
.references .section-title {
    font-size: 12pt !important;
    margin-bottom: 15px;
}

/* Estilos para cada referencia individual */
.references p,
.references li,
.references .reference {
    font-size: 10pt !important;
    margin-bottom: 8px;
    text-align: justify;
}

/* ----------------------------------------
   ESTILOS ADICIONALES PARA MEJOR PRESENTACIÓN
   ---------------------------------------- */

/* Estilos para el texto de la descripción del número */
.pkp_issue_toc_description {
    font-size: 11pt !important;
    text-align: justify !important;
    line-height: 1.5 !important;
    margin-top: 15px !important;
    margin-bottom: 20px !important;
}
a.galley-link:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
    opacity: 1 !important;
}
/* Ajusta el tamaño de la imagen de portada */
.cover_image {
    max-width: 100% !important; /* Permite que la imagen ocupe el ancho disponible */
    width: 300px !important;    /* O el tamaño que desees, por ejemplo 400px, 500px, etc. */
    height: auto !important;    /* Mantiene la proporción de la imagen */
}

/* Si la imagen está dentro de un contenedor que la limita, también hay que expandirlo */
.pkp_issue_toc_issue_cover {
    max-width: 100% !important;
    width: auto !important;
}

/* --- CONFIGURACIÓN DE FUENTES (ROBOTO PARA TODO) --- */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

h1, h2, h3, h4, h5, h6, 
body, p, a, div, span {
    font-family: 'Roboto', sans-serif !important;
}

.pkp_site_name,
.pkp_navigation_primary ul a,
.pkp_site_name,
.pkp_article_title,
.pkp_issue_title,
.pkp_block h2,
.page_title,
h1.pkp_page_title,
h1.text-left-issue-header,
h1.page_title.text-left-issue-header {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 500 !important; /* Puedes ajustar el peso para darles jerarquía */
}

/* Para los íconos */
[class*="fa-"], [class*="pkp_icon"], [class*="search"] {
    font-family: FontAwesome, 'Font Awesome 5 Free', 'Font Awesome 5 Pro', 'Font Awesome 6 Pro', 'Font Awesome 6 Free', sans-serif !important;
}
.block_make_submission_link {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-size: 12pt !important;
    border: 1px solid #000000 !important;
    transition: all 0.3s ease-in-out !important; /* Añade una transición suave */
}

.block_make_submission_link:hover {
    background-color: #717171 !important; /* Fondo gris claro al pasar el cursor */
    color: #ffffff !important;           /* Letras negras al pasar el cursor */
    border-color: #f0f0f0 !important;     /* Borde del mismo color para un aspecto limpio */
}
.flex_container.description_cover {
    margin-top: 2em !important;
}
#citationOutput, 
#citationOutput .csl-bib-body,
#citationOutput .csl-entry {
    font-family: 'Roboto', sans-serif !important;
    font-size: 10pt !important;
}
/* --- 1. AJUSTES DE ANCHO GENERAL --- */
body .pkp_head_wrapper,
body .pkp_navigation_primary_wrapper {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}

body .pkp_structure_page,
body .pkp_structure_main {
    max-width: 100% !important;
    margin: 0 auto !important;
}

/* --- 2. CONFIGURACIÓN DE FUENTES (ROBOTO PARA TODO) --- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body h1, body h2, body h3, body h4, body h5, body h6, 
body p, body a, body div, body span {
    font-family: 'Roboto', sans-serif !important;
}

/* Restablece la fuente de los íconos */
body [class*="fa-"], body [class*="pkp_icon"], body [class*="search"] {
    font-family: FontAwesome, 'Font Awesome 5 Free', 'Font Awesome 5 Pro', 'Font Awesome 6 Pro', 'Font Awesome 6 Free', sans-serif !important;
}

/* --- 3. ESTILOS VISUALES GENERALES --- */
body .pkp_structure_main {
    border-right: 1px solid #e0e0e0 !important;
    padding-right: 2em !important;
}

body .cover_image {
    max-width: 100% !important;
    width: 400px !important;
    height: auto !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

body a.galley-link:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
    opacity: 1 !important;
}

body .block_make_submission_link a {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-size: 12pt !important;
    border: 1px solid #000000 !important;
    transition: all 0.3s ease-in-out !important;
}

body .block_make_submission_link a:hover {
    background-color: #f0f0f0 !important;
    color: #000000 !important;
    border-color: #f0f0f0 !important;
}