/*
* ========================================
* ESTILOS PERSONALIZADOS PARA OJS
* ========================================
*/

/* ----------------------------------------
* CONFIGURACIÓN DE FUENTES GENERAL
* ---------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap');

/* Aplicar 'Mulish' como fuente base para TODO el cuerpo de la página, incluyendo cualquier elemento restante */
body, h1, h2, h3, h4, h5, h6, p, a, div, li, blockquote, cite, dd, strong, em {
    font-family: 'Mulish', sans-serif !important;
}

/* Regla para aplicar Mulish solo a los <span> que NO son íconos de Font Awesome */
span:not([class^="fa-"]) {
    font-family: 'Mulish', sans-serif !important;
}
}

/* ----------------------------------------
* ESTILOS PARA LA SECCIÓN DE REFERENCIAS
* ---------------------------------------- */

.article-details .references,
.article-main .references,
.obj_article_details .references,
#references,
.section.references,
.article-sidebar .references,
.article-content .references {
    font-size: 10pt !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
    line-height: 1.4;
}

.references h2,
.references h3,
.references .section-title {
    font-size: 12pt !important;
    margin-bottom: 15px;
}

.references p,
.references li,
.references .reference {
    font-size: 10pt !important;
    margin-bottom: 8px;
    text-align: justify;
}

/* ----------------------------------------
* ESTILOS VISUALES ADICIONALES
* ---------------------------------------- */

.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;
}

.cover_image {
    max-width: 100% !important;
    width: 100px !important;
    height: auto !important;
}

.pkp_issue_toc_issue_cover {
    max-width: 100% !important;
    width: auto !important;
}

.pkp_site_name,
.pkp_navigation_primary ul a,
.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-weight: 500 !important;
}

a.galley-link:hover,
a:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
    opacity: 1 !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;
}

.block_make_submission_link:hover {
    background-color: #717171 !important;
    color: #ffffff !important;
    border-color: #f0f0f0 !important;
}

#citationOutput, 
#citationOutput .csl-bib-body,
#citationOutput .csl-entry {
    font-size: 10pt !important;
}

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;
}

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 .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;
}

#articlesBySameAuthorPages strong {
    background-color: black;
    color: white;
    padding: 2px 5px;
}

.keywords_value li.keyword_item {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    font-size: 10pt !important;
}

a[href^="https://doi.org/"] {
    font-size: 10pt !important;
}
.description_text p {
  text-align: justify !important;
}
p {
  text-align: justify !important;
  font-size: 11pt !important;
}
#dropdownMenuButton.btn.btn-primary {
  font-size: 12pt !important;
}
/* Anula el hover del enlace */
a.orcid-image-url:hover {
  background: none !important;
}

/* Anula el hover de la imagen dentro del enlace */
a.orcid-image-url img:hover {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
}

.item.copyright p:first-child {
  display: inline !important;
  margin-right: 10px !important;
  white-space: nowrap !important;
  font-size: 10pt !important;
}

.item.copyright a[rel="license"] {
  display: inline-block !important;
  vertical-align: middle !important;
}

.item.copyright p:last-child {
  display: block !important;
  width: 100% !important;
  text-align: justify !important;
  font-size: 10pt !important;
  margin-top: 10px !important;
}

.container.journal_summary {
    margin: 100px;
}
.container.journal_summary h2 {
    display: none; /* Oculta el elemento <h2> */
}

.journal_summary p {
    font-size: 12pt !important;
}

/*
 * Forzar a los íconos genéricos (como el de descarga) a usar la fuente correcta
 */
.fa, .fas, .far {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important; /* Para íconos sólidos */
    color: inherit !important;
}

/*
 * Forzar a los íconos de marca (LinkedIn, Twitter, etc.) a usar la fuente correcta
 */
.fab {
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: normal !important; /* Los íconos de marca no usan peso 900 */
    color: inherit !important;
}

/*
 * Forzar a los íconos del plugin Shariff a usar su propia fuente (Material Icons)
 */
.shariff .material-icons {
    font-family: 'Material Icons' !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 24px !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    display: inline-block !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
    direction: ltr !important;
    -webkit-font-smoothing: antialiased !important;
}
/*
 * Forzar a los íconos de Zotero y Mendeley a usar la fuente correcta
 */
.citationstylelanguage .fa-download {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

.citationstylelanguage .fa-download:before {
    content: "\f019" !important;
}

/*
 * Corregir el ícono de correo electrónico del plugin Shariff
 */
.shariff-button.mail .material-icons {
    font-family: 'Material Icons' !important;
}

/*
 * Corregir los íconos de redes sociales del plugin Shariff (LinkedIn, Twitter, Facebook, WhatsApp)
 */
.shariff-button.linkedin .fab,
.shariff-button.twitter .fab,
.shariff-button.facebook .fab,
.shariff-button.whatsapp .fab {
    font-family: "Font Awesome 5 Brands" !important;
}
/*
/*
 * Forzar a todos los íconos de Font Awesome a usar la fuente correcta
 */
.fa, .fas, .far, .fab {
    font-family: "Font Awesome 5 Brands", "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

/*
 * Forzar a los íconos de Material Icons a usar la fuente correcta
 */
.material-icons {
    font-family: 'Material Icons' !important;
}

/*
 * Corregir cualquier conflicto de color o fondo
 */
.fa, .fas, .far, .fab, .material-icons {
    color: inherit !important;
    background-color: transparent !important;
}
/*
* Sobrescribir estilos de íconos en los enlaces
* (caso común en OJS)
*/

a .fa, a .fas, a .fab {
  font-family: "Font Awesome 5 Free", 'Material Icons' !important;
  font-weight: 900 !important;
  color: inherit !important;
}

/* Sobrescribir estilos en cualquier lugar donde haya un ícono */
.pkp_structure_main .fa, .pkp_structure_page .fa {
  font-family: "Font Awesome 5 Free", 'Material Icons' !important;
  font-weight: 900 !important;
  color: inherit !important;
}
/*
 * Forzar a todos los íconos de Font Awesome a usar la fuente correcta
 */
.fa, .fas, .far, .fab {
    font-family: "Font Awesome 5 Brands", "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

/*
 * Forzar a los íconos de Material Icons a usar la fuente correcta
 */
.material-icons {
    font-family: 'Material Icons' !important;
}

/*
 * Corregir cualquier conflicto de color o fondo
 */
.fa, .fas, .far, .fab, .material-icons {
    color: inherit !important;
    background-color: transparent !important;
}
/* Primero, ocultamos el texto original "compartir" con una regla robusta */
.shariff .share_text {
    display: none !important;
}

/*
 * Luego, usamos la pseudo-clase ::after para añadir el texto
 * a cada botón de red social. La clave es el selector `a::after`.
 * Esto apunta directamente al enlace dentro de cada botón.
 */
.shariff .linkedin a::after {
    content: "LinkedIn";
    padding-left: 5px;
}

.shariff .twitter a::after {
    content: "X";
    padding-left: 5px;
}

.shariff .facebook a::after {
    content: "Facebook";
    padding-left: 5px;
}

.shariff .whatsapp a::after {
    content: "WhatsApp";
    padding-left: 5px;
}

.shariff .mail a::after {
    content: "E-mail";
    padding-left: 5px;
}