@charset "UTF-8";
/**
 * =============================================================================
 * IIH - Novohispana
 * =============================================================================
 *
 * @description  Estilos personalizados para Novohispana
 * @author       Astra
 * @version      1.1.0
 * @date         2026-05-06
 * @license      Uso interno - Instituto de Investigaciones Históricas - UNAM
 *
 * =============================================================================
 * Secciones
 * =============================================================================
 *  1.  Variables globales (:root)
 *  2.  Reset / base tipográfica
 *  3.  Estructura del sitio (head, nav wrappers)
 *  4.  Navegación primaria (#navigationPrimary)
 *  5.  Menú de usuario (#navigationUser)
 *  6.  Barra de búsqueda
 *  7.  Tarjetas flip de revistas (.flip-card)
 *  8.  Tablas generales (.tabla-1)
 *  9.  Botón "volver arriba" (#btnTop)
 * 10.  Responsive (max-width: 768px)
 * 11.  Botón lateral envío
 * 12.  Barra lateral — Bloque "Premios del CMCH"
 * 13.  Barra lateral — Bloque "SCImago"
 * 14.  Barra lateral — adaptación para n tamaños de pantalla
 * 15.  Barra lateral — Bloques "Redes sociales" y "Visitas"
 * 16.  Límite global de ancho (pantallas ≥ 1400 px)
 * 17.  Barra lateral — centrado general de todos los bloques
 * 18.  Justificación global de textos de contenido
 * =============================================================================
 */

/* =============================================================================
   GOOGLE FONTS — ALEGREYA (con patines, títulos) + SOURCE SANS 3 (sin patines, cuerpo)
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,700;1,400&family=Source+Sans+3:ital,wght@0,400;0,600;1,400&display=swap');

/* =============================================================================
   1. VARIABLES GLOBALES
   ============================================================================= */

:root {

  /* --- Paleta de colores --- */
  --color-primary:        #00694f;
  --color-primary-dark:   #004d3a;
  --color-primary-darker: #003d2f;
  --color-primary-muted:  #005542;
  --color-accent:         #7e5735;
  --color-accent-hover:   #a0703f;
  --color-card-bg:        #051b4a;
  --color-white:          #ffffff;
  --color-text-dark:      #1a1a1a;
  --color-text-muted:     #555555;
  --color-border-light:   #e5e5e5;
  --color-border-table:   #b9b6b6;
  --color-bg-no-cover:    #d0d0d0;

  /* --- Tipografía --- */
  --font-primary: 'Alegreya', serif;            /* con patines → títulos */
  --font-body:    'Source Sans 3', sans-serif;  /* sin patines → cuerpo de texto */

  --font-size-base:   18px;
  --font-size-sm:     0.875rem;
  --font-size-xs:     0.8125rem;
  --line-height-base: 1.65;
  --line-height-text: 1.7;

  /* --- Espaciado y forma --- */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:  12px;
  --radius-pill: 999px;

  /* --- Sombras --- */
  --shadow-sm:  0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-md:  0 6px 18px rgba(0, 0, 0, 0.15);
  --shadow-lg:  0 10px 25px rgba(0, 0, 0, 0.12);

  /* --- Transiciones --- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-flip: 0.6s ease;

  /* --- Layout --- */
  --nav-item-padding:     10px 14px;
  --dropdown-min-width:   240px;
  --search-max-width:     600px;
  --sidebar-width:        25%;
  --content-width:        90%;
  --main-width:           70%;
}


/* =============================================================================
   2. RESET / BASE TIPOGRÁFICA
   ============================================================================= */

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* Base del sitio: fuente sin patines para legibilidad */
html,
body {
  font-family:  var(--font-body);
  font-size:    var(--font-size-base);
  line-height:  var(--line-height-base);
  color:        var(--color-text-dark);
}

/* ------------------------------------------------------------------
   Títulos: fuente con patines (Alegreya)
   ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.page_title,
.pkp_block h2.title,
.issue_title,
.article_summary_title,
.title,
.subtitle,
.series_title,
.obj_issue_summary .title,
.obj_article_summary .title,
.list-content__title,
.recent-article-title,
.recent-articles-section-title h3,
.journal-summary-title h3,
.card-title {
  font-family: var(--font-primary) !important;
}

/* ------------------------------------------------------------------
   Cuerpo de texto: fuente sin patines (Source Sans 3)
   ------------------------------------------------------------------ */
p,
li,
td,
th,
span,
div,
blockquote,
label,
input,
textarea,
select,
.abstract,
.article_summary,
.galley_label,
.description,
.pkp_block .content,
.pkp_structure_sidebar .pkp_block .content {
  font-family: var(--font-body) !important;
}

p {
  font-family:   var(--font-body) !important;
  font-size:     1rem;
  line-height:   var(--line-height-text);
  margin-bottom: 1rem;
  text-align:    justify;
}

small {
  font-size: var(--font-size-sm);
}

/* Links globales */
a,
a:hover,
a:focus,
a:active {
  font-size:       var(--font-size-base) !important;
  font-weight:     400 !important;
  color:           var(--color-primary);
  text-decoration: none !important;
}

/* Botones OJS */
.cmp_button_wire,
.obj_galley_link,
.cmp_button_wire:hover,
.cmp_button_wire:focus,
.obj_galley_link:hover,
.obj_galley_link:focus {
  background: var(--color-primary);
  border:     1px solid var(--color-primary);
  color:      var(--color-white);
}


/* =============================================================================
   3. ESTRUCTURA DEL SITIO
   ============================================================================= */

.pkp_structure_head {
  background-color: var(--color-primary) !important;
  border-bottom:    1px solid var(--color-primary) !important;
}

.pkp_site_nav_menu {
 /* background: var(--color-primary) !important;*/
	background: transparent !important;
}

@media (min-width: 992px) {
  .pkp_site_name .is_img img {
    max-height: fit-content;
  }

  .pkp_site_name_wrapper {
    height: auto;
    margin: auto;
  }

  .pkp_navigation_user_wrapper {
    width:        100%;
    padding-left:  0;
    padding-right: 0;
  }
}

@media (min-width: 992px) {
  .pkp_structure_content {
    width:     var(--content-width) !important;
    max-width: 1400px;
  }

  .pkp_structure_sidebar {
    float:     right;
    width:     var(--sidebar-width);
    max-width: 310px;
  }
}

@media (min-width: 1200px) {
  .pkp_site_name_wrapper,
  .pkp_navigation_primary_wrapper,
  .pkp_navigation_user,
  .pkp_search_mobile,
  .pkp_structure_content,
  .pkp_structure_footer {
    width: 100%;
  }

  .has_site_logo .pkp_head_wrapper {
    width: 100%;
  }

  .pkp_structure_main {
    width:      65%;
    max-width:  1050px;
    box-sizing: border-box;
  }
}

.language-toggle.dropdown {
  display: none;
}


/* =============================================================================
   4. NAVEGACIÓN PRIMARIA (#navigationPrimary)
   ============================================================================= */

.pkp_navigation_primary_wrapper {
  display:        flex;
  flex-direction: column;
}

#navigationPrimary {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  align-items:     center;
  gap:             6px;
  width:           100%;
  margin:          10px auto;
  padding:         10px 14px;
  list-style:      none;
  background:      var(--color-primary-dark);
  border-radius:   var(--radius-xl);
  box-shadow:      var(--shadow-md);
}

#navigationPrimary > li {
  position: relative;
}

#navigationPrimary > li > a {
  display:         inline-block;
  padding:         var(--nav-item-padding);
  font-family:     var(--font-body) !important;
  font-size:       15px;
  font-weight:     500;
  color:           var(--color-white) !important;
  text-decoration: none !important;
  border-radius:   var(--radius-md);
  transition:      background var(--transition-fast);
}

#navigationPrimary > li > a:hover,
#navigationPrimary > li:hover > a {
  background: var(--color-primary) !important;
  color:      var(--color-white) !important;
}

#navigationPrimary .dropdown-toggle::after,
#navigationPrimary > li > a::before,
#navigationPrimary > li > a::after {
  display: none !important;
  content: none !important;
}

@media (min-width: 992px) {
  .pkp_navigation_primary li ul a:focus,
  .pkp_navigation_primary li ul a:hover,
  .pkp_nav_list ul a:hover,
  .pkp_nav_list ul a:focus,
  .pkp_navigation_primary > li > a:hover {
    border-color: transparent;
  }

  .pkp_navigation_primary > li:first-child a {
    margin-left: 0;
  }
}

#navigationPrimary li ul {
  position:      absolute;
  top:           100%;
  left:          0;
  min-width:     var(--dropdown-min-width);
  background:    var(--color-white);
  border:        1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-lg);
  overflow:      hidden;
  display:       none;
  z-index:       10001;
  margin:        0;
  padding:       0;
  list-style:    none;
}

#navigationPrimary li:hover > ul,
#navigationPrimary li:focus-within > ul {
  display: block;
}

#navigationPrimary li ul li a {
  display:         block;
  padding:         var(--nav-item-padding);
  font-family:     var(--font-body) !important;
  font-size:       14px;
  color:           var(--color-text-dark);
  text-decoration: none;
  border-radius:   0;
  transition:      background var(--transition-fast), color var(--transition-fast);
}

#navigationPrimary li ul li a:hover,
#navigationPrimary li ul li a:focus,
#navigationPrimary li ul li a:active {
  background: var(--color-primary);
  color:      var(--color-white);
  outline:    none;
  box-shadow: none;
}


/* =============================================================================
   5. MENÚ DE USUARIO (#navigationUser)
   ============================================================================= */

.pkp_navigation_user {
  display:     flex;
  align-items: center;
  width:       100%;
}

.pkp_navigation_user li {
  list-style: none;
}

.pkp_navigation_user li:first-child {
  margin-right: auto;
  margin-left:  50px;
}

.pkp_navigation_user li:not(:first-child) {
  margin-left: 15px;
}

.pkp_navigation_user a {
  text-decoration: none;
  color:           var(--color-white);
}

#navigationUser {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  list-style:    none;
  margin:        0;
  padding:       4px;
  background:    var(--color-primary-dark);
  border-radius: 0;
  box-shadow:    var(--shadow-sm);
}

#navigationUser > li {
  position: relative;
}

#navigationUser > li > a {
  display:         inline-flex;
  align-items:     center;
  padding:         6px 12px;
  font-family:     var(--font-body) !important;
  color:           var(--color-white) !important;
  text-decoration: none !important;
  border-radius:   var(--radius-lg);
  font-size:       var(--font-size-xs);
  font-weight:     500;
  transition:      background var(--transition-fast);
}

#navigationUser > li > a:hover {
  background: var(--color-primary);
}

#navigationUser > li > a:focus,
#navigationUser > li > a:active {
  background: var(--color-primary-darker);
  outline:    none;
}

#navigationUser .task_count {
  margin-left:   6px;
  background:    #ff3b30;
  color:         var(--color-white);
  font-size:     11px;
  padding:       2px 6px;
  border-radius: var(--radius-pill);
}

#navigationUser .dropdown-menu {
  position:      absolute;
  top:           100%;
  left:          10%;
  right:         0;
  min-width:     20px;
  background:    var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-lg);
  display:       none;
  z-index:       9999;
  padding:       0;
  margin:        0 !important;
}

#navigationUser .dropdown-menu::before {
  content:  "";
  position: absolute;
  top:      -10px;
  left:     0;
  right:    0;
  height:   10px;
}

#navigationUser li:hover > .dropdown-menu,
#navigationUser li:focus-within > .dropdown-menu {
  display: block;
}

#navigationUser .dropdown-menu,
#navigationUser .dropdown-menu ul,
#navigationUser .dropdown-menu li {
  padding-left:  0 !important;
  padding-right: 0 !important;
  margin-left:   0 !important;
  margin-right:  0 !important;
  list-style:    none !important;
}

#navigationUser .dropdown-menu li a {
  display:     block;
  width:       100%;
  padding:     10px 14px;
  font-family: var(--font-body) !important;
  color:       var(--color-text-dark);
  font-size:   var(--font-size-xs);
  box-sizing:  border-box;
}

#navigationUser .dropdown-menu li a:hover {
  background: var(--color-primary);
  color:      var(--color-white);
  margin:     0 !important;
}


/* =============================================================================
   6. BARRA DE BÚSQUEDA
   ============================================================================= */

.pkp_search_persona {
  display:         flex;
  justify-content: center;
  align-items:     center;
  width:           100%;
}

.pkp_navigation_search_wrapper {
  width:        100%;
  max-width:    1000px;
  display:      flex;
  justify-content: center;
  margin-top:   0;
  margin-left:  auto;
  margin-right: auto;
}

.pkp_navigation_search_wrapper form {
  display:    flex;
  width:      100%;
  max-width:  var(--search-max-width);
  margin:     10px auto;
  flex-wrap:  wrap;
  gap:        6px;
}

.search_input {
  flex:          1;
  min-width:     0;
  padding:       12px 16px;
  font-family:   var(--font-body);
  font-size:     var(--font-size-base);
  border:        3px solid var(--color-primary);
  border-right:  none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  outline:       none;
  transition:    all var(--transition-base);
}

.search_input:focus {
  border-color: #ccc;
  box-shadow:   0 0 0 2px rgba(0, 105, 79, 0.2);
}

.search_button {
  flex-shrink:   0;
  padding:       12px 20px;
  font-family:   var(--font-body);
  font-size:     var(--font-size-base);
  background:    var(--color-primary-dark);
  color:         var(--color-white);
  border:        2px solid var(--color-primary-dark);
  border-left:   none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    all 0.25s ease;
}

.search_button:hover {
  background: var(--color-primary-dark);
  color:      var(--color-white);
}

.search_button:focus {
  outline:    none;
  box-shadow: 0 0 0 3px rgba(0, 105, 79, 0.3);
}

.search_button:active {
  background: var(--color-primary-dark);
  color:      var(--color-white);
  transform:  scale(0.97);
}

.fa-search:before {
  font-family: FontAwesome;
  content: "\f002";
  margin-right: 6px;
  color: #fff;
}

.pkp_block {
  border-radius: 3px;
  border: 1px solid #dedede;
  margin: 0 0 1rem 0;
  padding: 0;
}

.pkp_block h2.title {
  background-color: #efefef;
  padding: .5rem 1rem;
  font-family: var(--font-primary) !important;
}


/* =============================================================================
   7. TARJETAS FLIP DE REVISTAS (.flip-card)
   ============================================================================= */

ul.issues_archive,
.page_issue_archive ul.issues_archive,
.page_issue_archive .issues_archive {
  display:        flex !important;
  flex-direction: row !important;
  flex-wrap:      wrap !important;
  border-top:     none !important;
  margin-left:    0 !important;
  margin-right:   0 !important;
  list-style:     none !important;
  padding:        0 !important;
  gap:            20px !important;
}

ul.issues_archive > li,
.page_issue_archive ul.issues_archive > li,
.page_issue_archive .issues_archive > li {
  flex:          0 0 30% !important;
  max-width:     30% !important;
  width:         30% !important;
  padding:       0 !important;
  border-bottom: none !important;
  box-sizing:    border-box !important;
  display:       block !important;
}

.flip-card {
  perspective: 1000px;
  width:       100%;
}

.flip-card-inner {
  position:        relative;
  width:           100%;
  padding-top:     140%;
  transform-style: preserve-3d;
  transition:      transform var(--transition-flip);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position:            absolute;
  top:                 0;
  left:                0;
  width:               100%;
  height:              100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius:       var(--radius-md);
  overflow:            hidden;
  box-shadow:          var(--shadow-sm);
}

.flip-card-front img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.flip-card-no-cover {
  width:           100%;
  height:          100%;
  background:      var(--color-bg-no-cover);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         20px;
  text-align:      center;
  color:           var(--color-text-muted);
}

.flip-card-back {
  background:      #00694f;
  color:           #fff !important;
  transform:       rotateY(180deg);
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  align-items:     center;
  padding:         15px 12px;
  text-align:      center;
  box-sizing:      border-box;
  overflow:        hidden;
}

.flip-card-back * {
  color: #fff !important;
}

.flip-card-back h2 {
  font-family:  var(--font-primary) !important;
  font-size:    .95rem !important;
  margin:       0 0 8px !important;
  line-height:  1.3;
  flex-shrink:  0;
}

.flip-card-back h2 a {
  font-family:     var(--font-primary) !important;
  color:           #fff !important;
  text-decoration: none;
}

.flip-card-back .series {
  font-family:   var(--font-body);
  font-size:     .8rem;
  color:         #d7efe8 !important;
  margin-bottom: 8px;
  flex-shrink:   0;
}

.flip-card-back .description {
  font-family:     var(--font-body);
  font-size:       .72rem;
  color:           #d7efe8 !important;
  line-height:     1.45;
  overflow-y:      auto;
  flex:            1 1 auto;
  margin-bottom:   10px;
  text-align:      justify;
  padding:         0 4px;
  scrollbar-width: thin;
  scrollbar-color: #004d3a transparent;
}

.flip-card-btn {
  display:         inline-block;
  flex-shrink:     0;
  padding:         7px 16px;
  background:      #004d3a;
  color:           #fff !important;
  border-radius:   4px;
  text-decoration: none;
  font-family:     var(--font-body);
  font-size:       .8rem;
  transition:      background .2s;
}

.flip-card-btn:hover {
  background: #00694f;
}

@media (max-width: 900px) {
  .page_issue_archive .issues_archive > li {
    flex:      1 1 45% !important;
    max-width: 48% !important;
  }
}

@media (max-width: 576px) {
  .page_issue_archive .issues_archive > li {
    flex:      1 1 100% !important;
    max-width: 100% !important;
  }
}


/* =============================================================================
   8. TABLAS GENERALES (.tabla-1)
   ============================================================================= */

table.tabla-1,
table.tabla-1 td {
  text-align: center;
  border:     0.5px solid var(--color-border-table);
}

table.tabla-1 p {
  text-align: center;
}


/* =============================================================================
   9. BOTÓN "VOLVER ARRIBA" (#btnTop)
   ============================================================================= */

#btnTop {
  position:         fixed !important;
  bottom:           16px !important;
  right:            16px !important;
  z-index:          2147483647;
  transform:        translateZ(0);
  -webkit-transform: translateZ(0);
  will-change:      transform;
  width:            50px;
  height:           50px;
  background-color: var(--color-primary);
  color:            var(--color-white);
  border:           none;
  border-radius:    50%;
  cursor:           pointer;
  font-size:        26px;
  line-height:      50px;
  text-align:       center;
  padding:          0;
  display:          none;
  box-sizing:       border-box;
  max-width:        50px;
  margin:           0;
  transition:       background-color var(--transition-base);
}

#btnTop:hover,
#btnTop:active,
#btnTop:focus {
  background-color: var(--color-primary-muted);
  outline:          none;
  transform:        translateZ(0);
  -webkit-transform: translateZ(0);
}

.btn-top.show {
  opacity:        1;
  pointer-events: auto;
  transform:      translateY(0);
}


/* =============================================================================
   10. RESPONSIVE (max-width: 768px)
   ============================================================================= */

@media (max-width: 768px) {

  #navigationPrimary {
    flex-direction: column !important;
    align-items:    stretch !important;
    justify-content: center;
  }

  #navigationPrimary li {
    width: 100% !important;
  }

  #navigationPrimary li a {
    display: block;
    width:   100%;
  }

  #navigationPrimary li ul {
    position:      static;
    display:       block;
    width:         100%;
    background:    transparent;
    border:        none;
    box-shadow:    none;
  }

  #navigationPrimary li ul li a {
    color: var(--color-white);
  }

  #navigationPrimary li ul li a:hover,
  #navigationPrimary li ul li a:focus,
  #navigationPrimary li ul li a:active {
    color:      var(--color-white);
    background: var(--color-primary-dark);
  }

  #navigationUser {
    flex-direction: column !important;
    align-items:    stretch !important;
    width:          100%;
    gap:            0;
  }

  #navigationUser > li {
    width: 100% !important;
  }

  #navigationUser > li > a {
    width:           100%;
    justify-content: space-between;
    padding:         10px 12px;
    border-radius:   var(--radius-md);
    margin-left:     0 !important;
  }

  #navigationUser .dropdown-menu {
    position:      static;
    width:         100%;
    margin:        0;
    padding:       0;
    box-shadow:    none;
    border-radius: var(--radius-md);
  }

  #navigationUser .dropdown-menu li a {
    padding: 10px 12px;
  }

  .pkp_navigation_search_wrapper {
    margin-top: 0.5rem;
  }

  .pkp_navigation_search_wrapper form {
    display:        flex !important;
    flex-direction: row !important;
    flex-wrap:      nowrap !important;
    width:          100% !important;
  }

  .pkp_navigation_search_wrapper .search_input {
    flex:      1 1 auto !important;
    min-width: 0 !important;
    width:     auto !important;
  }

  .pkp_navigation_search_wrapper .search_button {
    flex:        0 0 auto !important;
    width:       auto !important;
    white-space: nowrap !important;
  }

  #btnTop {
    width:       42px !important;
    height:      42px !important;
    font-size:   22px !important;
    line-height: 42px !important;
    right:       8px !important;
    bottom:      8px !important;
  }
}

.pkp_site_name {
  display:     flex;
  align-items: center;
}

.extra-logos {
  display:     flex;
  align-items: center;
  width:       30%;
  margin-left: 10%;
}

.extra-logosa {
  width:        20%;
	padding-top: 13%;
	margin-right: 5%;
}

.extra-logosa2 {
	width: 60%;
	margin-right: 5%;
	padding-top:13%;
}

.pkp_structure_content {
  padding-top: 0;
  margin-top:  2.13rem;
}

.pkp_structure_main:before,
.pkp_structure_main:after {
  background: none;
}

.pkp_block.block_custom img {
  max-width: 100%;
  width:     auto;
  height:    auto;
  display:   block;
  margin:    0 auto;
}

.pkp_site_name .is_img img {
padding-right: 10%;
width:50%;
padding-top:4%;
}

/* Tarjetas recopilaciones temáticas */
.recopilaciones-tematicas {
  display:        flex;
  flex-direction: column;
  gap:            16px;
  width:          100%;
}

.ojs-card {
  display:     flex;
  flex-direction: row;
  width:       100%;
  border:      1px solid #e0e0e0;
  border-radius: 6px;
  padding:     16px;
  gap:         18px;
  align-items: center;
  box-sizing:  border-box;
}

.ojs-card img {
  width:            160px;
  min-width:        160px;
  max-width:        160px;
  height:           auto;
  max-height:       140px;
  object-fit:       contain;
  object-position:  center;
  border-radius:    4px;
  display:          block;
  flex-shrink:      0;
}

.ojs-card-body {
  flex:           1;
  display:        flex;
  flex-direction: column;
  justify-content: space-between;
  min-height:     110px;
  min-width:      0;
}

.ojs-card-meta {
  font-family:   var(--font-body);
  font-size:     12px;
  color:         #888;
  margin-bottom: 4px;
}

.ojs-card-title {
  font-family:   var(--font-primary);
  font-size:     16px;
  font-weight:   600;
  color:         #1a1a1a;
  line-height:   1.35;
  margin-bottom: 6px;
}

.ojs-card-desc {
  font-family:   var(--font-body);
  font-size:     13px;
  color:         #555;
  line-height:   1.6;
  margin-bottom: 10px;
  text-align:    justify;
}

.ojs-card-footer {
  display:     flex;
  align-items: center;
  gap:         12px;
}

.ojs-card-date {
  font-family: var(--font-body);
  font-size:   12px;
  color:       #888;
}

.read-btn {
  font-family:   var(--font-body);
  font-size:     12px;
  font-weight:   500;
  color:         #185FA5;
  background:    #E6F1FB;
  border:        none;
  border-radius: 3px;
  padding:       5px 14px;
  cursor:        pointer;
}

.read-btn:hover {
  background: #B5D4F4;
  color:      #042C53;
}


/* =============================================================================
   11. BARRA LATERAL — Bloque "Nuevo Envío"
   ============================================================================= */

#customblock-nuevoenvio h2.title {
  display: none !important;
  
}

#customblock-nuevoenvio h2.title::after {
  content:     "Envío de una contribución";
  font-family: var(--font-primary);
  font-size:   1rem;
}

#customblock-nuevoenvio .content {
  padding: .75rem 1rem;
}

.nuevo_envio {
  text-align: center;
}

.boton_envio,
.boton_envio:link,
.boton_envio:visited {
  display:         block;
  width:           100%;
  padding:         .6rem 1rem;
  background:      var(--color-primary);
  color:           var(--color-white) !important;
  text-align:      center;
  border-radius:   var(--radius-md);
  font-family:     var(--font-body) !important;
  font-size:       var(--font-size-sm) !important;
  font-weight:     600 !important;
  transition:      background var(--transition-base);
  box-sizing:      border-box;
  text-decoration: none !important;
}

.boton_envio:hover,
.boton_envio:focus,
.boton_envio:active {
  background: var(--color-primary-dark) !important;
  color:      var(--color-white) !important;
}


/* =============================================================================
   12. BARRA LATERAL — Bloque "Premios del CMCH"
   ============================================================================= */

#customblock-premioscmch h2.title {
  position:         static   !important;
  clip:             auto     !important;
  overflow:         visible  !important;
  width:            auto     !important;
  height:           auto     !important;
  margin:           0        !important;
  padding:          .5rem 1rem !important;
  background-color: #efefef;
  font-size:        0        !important;
}

#customblock-premioscmch h2.title::after {
  content:     "Premios del CMCH";
  font-family: var(--font-primary);
  font-size:   1rem;
}

#customblock-premioscmch .content p.title {
  display: none;
}

#customblock-premioscmch .content {
  padding:    .75rem 1rem;
  text-align: center;
}

#customblock-premioscmch .content img {
  display:   block;
  margin:    0 auto;
  max-width: 115px;
  width:     auto;
  height:    auto;
}


/* =============================================================================
   13. BARRA LATERAL — Bloque "SCImago"
   ============================================================================= */

#customblock-scimago-journal-country-rank h2.title {
  position:         static   !important;
  clip:             auto     !important;
  overflow:         visible  !important;
  width:            auto     !important;
  height:           auto     !important;
  margin:           0        !important;
  padding:          .5rem 1rem !important;
  background-color: #efefef;
  font-size:        0        !important;
}

#customblock-scimago-journal-country-rank h2.title::after {
  content:     "SCImago Journal & Country Rank";
  font-family: var(--font-primary);
  font-size:   1rem;
}

#customblock-scimago-journal-country-rank .content {
  padding:    .75rem 1rem;
  text-align: center;
}

#customblock-scimago-journal-country-rank .content img,
#customblock-scimago-journal-country-rank .content a img {
  display:   block;
  margin:    0 auto;
  max-width: 190px;
  width:     100%;
  height:    auto;
}


/* =============================================================================
   14. BARRA LATERAL — adaptación para n tamaños de pantalla
   ============================================================================= */

@media (max-width: 992px) {
  .pkp_structure_sidebar {
    float:      none;
    width:      100%;
    margin-top: 2rem;
  }

  .pkp_structure_main {
    width: 100%;
  }
}


/* =============================================================================
   15. BARRA LATERAL — Bloques "Redes sociales" y "Visitas"
   ============================================================================= */

#customblock-redes .content {
  padding:    .75rem 1rem;
  text-align: center;
}

#customblock-redes .redsoc_img {
  width:   32px !important;
  height:  32px !important;
  display: inline-block;
  margin:  0 4px;
}

#customblock-visitas .content {
  padding:    .75rem 1rem;
  text-align: center;
}

#customblock-visitas .content img {
  display:   block;
  margin:    0 auto;
  max-width: 100%;
  height:    auto;
}


/* =============================================================================
   16. LÍMITE GLOBAL DE ANCHO — pantallas muy anchas (≥ 1400 px)
   ============================================================================= */

@media (min-width: 1400px) {

  .pkp_structure_content {
    max-width: 1400px !important;
  }

  .pkp_structure_main {
    max-width: 1050px;
  }

  .pkp_structure_sidebar {
    max-width: 310px;
  }
}


/* =============================================================================
   17. BARRA LATERAL — centrado general de todos los bloques
   ============================================================================= */

.pkp_structure_sidebar .pkp_block .content {
  text-align: center;
}

.pkp_structure_sidebar .pkp_block .content p,
.pkp_structure_sidebar .pkp_block .content li,
.pkp_structure_sidebar .pkp_block .content a {
  text-align: center;
}

.pkp_structure_sidebar .pkp_block h2.title {
  text-align:  center;
  font-family: var(--font-primary) !important;
}
.pkp_structure_head{
  position: relative ;

}
.pkp_structure_head::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("https://sandbox.astra.red/IIH/novohispana2026/public/site/images/administrador/img-fondo-escritorio.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 40% 100%;
    opacity: 0.3;
    pointer-events: none;
}
.pkp_structure_head> * {
    position: relative;
    z-index: 1;
}

/* =============================================================================
			   						MÓVILES
   ============================================================================= */
/* Menú móvil a la derecha */
@media (max-width: 1023px) {
    .pkp_site_nav_toggle {
        right: 0 !important;
        left: auto !important;
    }
	    .has_site_logo .pkp_head_wrapper
    {
        padding-right: 0;
    }
    .pkp_structure_head
    {
        height: 100px;
    }
	.pkp_site_nav_toggle
    {
        width: 100px;
        height: 100px;
    }
	 .pkp_site_name
    {
        left: 0;
        right: 100px;
        height: 100px;
    }
	.pkp_site_name .is_img img
    {
        width: 100%;
        max-height: 100px;
    }
    .extra-logos 
	{
  		width: 100%;
        max-height: 100px;
	}

	.extra-logosa 
	{
        max-height: 100px;
	}

	.extra-logosa2 
	{
        max-height: 100px;
    }
	.pkp_structure_head::before
    {
        background-size: 100% 100%;
        background-image: url("https://sandbox.astra.red/IIH/novohispana2026/public/site/images/administrador/img-fondo-movil.png");
    }
	
    .pkp_site_nav_toggle>span
    {
        border-bottom:3px solid #fff;
    }
    .pkp_site_nav_toggle>span:before, .pkp_site_nav_toggle>span:after
    {
        background: #fff;;
    }
}

/* =============================================================================
   18. JUSTIFICACIÓN GLOBAL DE TEXTOS DE CONTENIDO
   =============================================================================
   Aplica alineación justificada a los bloques de texto corrido del sitio
   (resúmenes, descripciones, párrafos de contenido). No se aplica a menús,
   botones, encabezados ni bloques que ya usan centrado intencional (barra
   lateral, tarjetas), para no romper esos diseños.
   ============================================================================= */

.abstract,
.article_summary,
.galley_label,
.pkp_block .content p,
.obj_article_summary .article_summary,
.page .description,
main p,
.pkp_structure_main p,
.pkp_structure_main li,
.item .description {
  text-align: justify;
}