/*
  Cabecera exclusiva de Revista PUCE para OJS 3.5.
  Reemplaza la hoja de estilos personalizada de la revista.
*/

:root {
  --rp-black: #0c0c0c;
  --rp-black-soft: #171717;
  --rp-white: #fff;
  --rp-border: rgba(255, 255, 255, .32);
}

.rp-brand-header,
.rp-brand-header * {
  box-sizing: border-box;
}

.rp-brand-header {
  width: 100%;
  color: var(--rp-white);
  background: var(--rp-black);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.rp-brand-header__utility {
  min-height: 42px;
  border-bottom: 1px solid var(--rp-border);
  background: var(--rp-black-soft);
}

.rp-brand-header__utility-inner,
.rp-brand-header__inner {
  display: flex;
  width: 100%;
  padding-right: clamp(20px, 4vw, 72px);
  padding-left: clamp(20px, 4vw, 72px);
}

.rp-brand-header__utility-inner {
  min-height: 42px;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.rp-language {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  gap: 7px;
  padding-right: 14px;
  border-right: 1px solid rgba(255, 255, 255, .42);
  color: rgba(255, 255, 255, .96);
  font-size: 14px;
  font-weight: 650;
}

.rp-language::after {
  content: "▾";
  margin-right: 4px;
  margin-left: -22px;
  font-size: 11px;
  pointer-events: none;
}

.rp-language select {
  min-height: 32px;
  padding: 0 28px 0 4px;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.rp-language select option {
  color: #111;
  background: #fff;
}

.rp-tool-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.rp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rp-user-slot,
.rp-brand-header #navigationUser.rp-user-navigation {
  display: flex;
  align-items: center;
}

.rp-brand-header #navigationUser.rp-user-navigation {
  gap: 4px;
  width: auto !important;
  margin: 0;
  padding: 0;
  float: none !important;
  list-style: none;
}

.rp-brand-header #navigationUser.rp-user-navigation > li {
  float: none !important;
  margin: 0;
}

.rp-brand-header #navigationUser.rp-user-navigation > li > a {
  display: block;
  padding: 6px 8px;
  color: rgba(255, 255, 255, .96);
  font-size: 14px;
  font-weight: 650;
  line-height: 18px;
  text-decoration: none;
}

.rp-brand-header #navigationUser.rp-user-navigation > li > a:hover,
.rp-brand-header #navigationUser.rp-user-navigation > li > a:focus,
.rp-language:focus-within {
  color: #fff;
  text-decoration: underline;
}

.rp-brand-header__inner {
  position: relative;
  min-height: 176px;
  align-items: center;
  justify-content: flex-start;
}

.rp-brand-header__journal {
  display: block;
  line-height: 0;
}

.rp-brand-header__journal img {
  display: block;
  width: 172px;
  height: 172px;
  max-width: min(34vw, 172px);
  object-fit: contain;
}

.rp-brand-header__puce {
  position: absolute;
  left: 50%;
  display: block;
  line-height: 0;
  transform: translateX(-50%);
}

.rp-brand-header__puce img {
  display: block;
  width: clamp(170px, 17vw, 250px);
  height: auto;
}

.rp-brand-header__puce:hover,
.rp-brand-header__puce:focus {
  opacity: .82;
}

.rp-brand-header__metadata {
  position: absolute;
  right: clamp(20px, 4vw, 72px);
  bottom: 26px;
  margin: 0;
  color: #fff;
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 700;
  line-height: 1.42;
  text-align: right;
}

.rp-brand-header__metadata p {
  margin: 0;
}

.rp-brand-header__metadata span {
  font-weight: 400;
}

/* Menú nativo de OJS: se mantiene, con dimensiones más compactas. */
#headerNavigationContainer {
  background: var(--rp-black) !important;
}

#headerNavigationContainer .pkp_head_wrapper {
  width: 100%;
  max-width: none;
  padding: 0;
  background: var(--rp-black);
}

#headerNavigationContainer .pkp_site_name_wrapper {
  display: none;
}

#headerNavigationContainer .pkp_site_nav_menu {
  display: block;
  border-top: 1px solid var(--rp-border);
}

#headerNavigationContainer .pkp_navigation_primary_row,
#headerNavigationContainer .pkp_navigation_primary_wrapper {
  display: block;
  width: 100%;
}

#headerNavigationContainer .pkp_navigation_primary_wrapper {
  max-width: none;
  padding: 0 clamp(20px, 4vw, 72px);
}

#headerNavigationContainer #navigationPrimary {
  gap: 0;
  margin: 0;
}

#headerNavigationContainer #navigationPrimary > li > a,
#headerNavigationContainer .pkp_search {
  min-height: 44px;
  padding-top: 11px;
  padding-bottom: 11px;
  color: #fff;
  font-size: 15px;
  font-weight: 650;
}

#headerNavigationContainer #navigationPrimary > li > a:hover,
#headerNavigationContainer #navigationPrimary > li > a:focus,
#headerNavigationContainer #navigationPrimary > li > a[aria-expanded="true"],
#headerNavigationContainer .pkp_search:hover,
#headerNavigationContainer .pkp_search:focus {
  color: #fff;
  background: #2b2b2b;
}

#headerNavigationContainer .pkp_navigation_user_wrapper[hidden] {
  display: none !important;
}

@media (max-width: 767px) {
  .rp-brand-header__utility-inner {
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .rp-brand-header #navigationUser.rp-user-navigation > li > a {
    padding: 5px 6px;
    font-size: 12px;
  }

  .rp-brand-header__inner {
    min-height: 142px;
    justify-content: center;
  }

  .rp-brand-header__journal img {
    width: 138px;
    height: 138px;
    max-width: 70vw;
  }

  .rp-brand-header__puce,
  .rp-brand-header__metadata {
    display: none;
  }

  #headerNavigationContainer .pkp_navigation_primary_wrapper {
    padding: 0 20px;
  }
}