/* =========================================================
   REVISTA CIENTÍFICA FCA - UNLZ - OJS 3.5
   Header con imagen de fondo
   Menú superior retráctil
   Título inferior marrón institucional
   ========================================================= */


/* =========================================================
   ENCABEZADO
   ========================================================= */

.pkp_structure_head {
  position: relative !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center 52% !important;
  min-height: 190px !important;
  overflow: visible !important;
}

.pkp_head_wrapper {
  position: relative !important;
  min-height: 190px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 1000 !important;
}


/* =========================================================
   NOMBRE DE LA REVISTA
   Abajo, después del logo
   Marrón tomado del dibujo inferior derecho
   RGB aprox. 96,65,30 = #60411E
   ========================================================= */

.pkp_site_name_wrapper {
  position: absolute !important;
  top: auto !important;
  bottom: 8px !important;

  /* Alinear al ancho REAL del encabezado, no al wrapper interno */
  left: 50% !important;
  right: auto !important;
  width: 100vw !important;
  height: 31px !important;
  transform: translateX(-50%) !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  z-index: 1500 !important;
  pointer-events: none !important;
}

.pkp_site_name {
  position: relative !important;
  display: flex !important;
  align-items: center !important;

  height: 31px !important;

  /*
   * El texto empieza unos píxeles después del contorno verde/blanco.
   * 22.35vw corresponde a la posición real del borde en la imagen fuente.
   */
  margin: 0 0 0 22.35vw !important;
  padding: 0 8px !important;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  z-index: 1600 !important;
  pointer-events: auto !important;
}

.pkp_site_name .is_text,
.pkp_site_name a {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45) !important;
  pointer-events: auto !important;
}

.pkp_site_name a:hover {
  color: #f4c84a !important;
  text-decoration: none !important;
}

.pkp_site_name img {
  pointer-events: none !important;
}


/* =========================================================
   MENÚ SUPERIOR RETRÁCTIL
   Queda casi oculto hacia arriba.
   Al pasar el puntero por la franja superior, baja suavemente.
   ========================================================= */

.pkp_site_nav_menu {
  position: absolute !important;

  /* Dejamos una pequeña franja visible como zona de activación */
  top: -34px !important;
  left: 0 !important;
  right: 0 !important;

  width: 100% !important;
  height: 42px !important;

  margin: 0 !important;
  padding: 0 !important;

  background: rgba(0, 82, 58, 0.88) !important;
  border: none !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.22) !important;

  z-index: 9000 !important;
  pointer-events: auto !important;

  transition:
    top 0.28s ease,
    background-color 0.28s ease,
    box-shadow 0.28s ease !important;
}

/* Al pasar el mouse, el menú baja */
.pkp_site_nav_menu:hover,
.pkp_site_nav_menu:focus-within {
  top: 0 !important;
  background: rgba(0, 82, 58, 0.94) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.28) !important;
}


/* =========================================================
   MENÚ IZQUIERDO
   Actual / Archivos / Acerca de / Buscar
   ========================================================= */

.pkp_navigation_primary_wrapper {
  position: absolute !important;
  top: 6px !important;
  left: 10px !important;
  right: auto !important;
  bottom: auto !important;

  width: auto !important;
  max-width: calc(100% - 260px) !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 0 0 4px !important;

  z-index: 9100 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  pointer-events: auto !important;
  transform: none !important;
}

.pkp_navigation_primary {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 9200 !important;
  pointer-events: auto !important;
  transform: none !important;
}

.pkp_navigation_primary li,
.pkp_navigation_primary a {
  position: relative !important;
  z-index: 9200 !important;
  pointer-events: auto !important;
}


/* =========================================================
   BUSCAR
   ========================================================= */

.pkp_navigation_search_wrapper {
  position: relative !important;
  top: 0 !important;
  margin: 0 !important;
  z-index: 9200 !important;
  pointer-events: auto !important;
  transform: none !important;
}

.pkp_navigation_search_wrapper a {
  position: relative !important;
  z-index: 9200 !important;
  pointer-events: auto !important;
}


/* =========================================================
   USUARIO DINÁMICO
   Arriba a la derecha
   ========================================================= */

.pkp_navigation_user_wrapper {
  position: absolute !important;
  top: 6px !important;
  right: 18px !important;
  left: auto !important;
  bottom: auto !important;

  width: auto !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  z-index: 9500 !important;
  pointer-events: auto !important;
  transform: none !important;
}

.pkp_navigation_user {
  position: relative !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 9500 !important;
  pointer-events: auto !important;
  transform: none !important;
}

.pkp_navigation_user li,
.pkp_navigation_user a {
  position: relative !important;
  z-index: 9500 !important;
  pointer-events: auto !important;
}


/* =========================================================
   ESTILO DE LOS LINKS DEL MENÚ
   ========================================================= */

.pkp_site_nav_menu a,
.pkp_navigation_primary a,
.pkp_navigation_search_wrapper a,
.pkp_navigation_user a {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55) !important;
}

.pkp_site_nav_menu a:hover,
.pkp_navigation_primary a:hover,
.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_user a:hover {
  color: #00ffcc !important;
  text-decoration: underline !important;
}


/* =========================================================
   DROPDOWNS
   ========================================================= */

.pkp_navigation_primary .dropdown-menu,
.pkp_navigation_primary ul ul,
.pkp_navigation_user .dropdown-menu,
.pkp_navigation_user ul ul {
  background-color: #8fd19e !important;
  border: none !important;
  box-shadow: 0 6px 15px rgba(0,0,0,0.15) !important;
  border-radius: 6px;
  padding: 8px 0;
  z-index: 10000 !important;
  pointer-events: auto !important;
}

.pkp_navigation_primary .dropdown-menu a,
.pkp_navigation_primary ul ul a,
.pkp_navigation_user .dropdown-menu a,
.pkp_navigation_user ul ul a {
  color: #1b3a2b !important;
  text-shadow: none !important;
  font-weight: 500 !important;
  padding: 8px 18px !important;
}

.pkp_navigation_primary .dropdown-menu a:hover,
.pkp_navigation_primary ul ul a:hover,
.pkp_navigation_user .dropdown-menu a:hover,
.pkp_navigation_user ul ul a:hover {
  background-color: #6bbf7a !important;
  color: #ffffff !important;
  transition: 0.2s ease;
}


/* =========================================================
   FOOTER REDUCIDO
   ========================================================= */

.pkp_structure_footer {
  display: flex;
  background-color: #e0e0e0 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border-top: 1px solid #ccc;
  min-height: 60px !important;
  max-height: 110px !important;
  overflow: hidden;
}

.pkp_footer_content {
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  height: 100%;
  font-size: 0.85rem !important;
  line-height: 1.3em !important;
}

.pkp_license,
.pkp_brand_footer {
  margin: 2px 0 !important;
}

.pkp_license img {
  max-height: 40px !important;
  width: auto !important;
}

.pkp_brand_footer img {
  display: none;
  max-height: 50px !important;
  width: auto !important;
  opacity: 0.9;
}

.pkp_structure_content + .pkp_structure_footer {
  margin-top: 0 !important;
}


/* =========================================================
   OCULTAR NÚMERO ACTUAL EN ARCHIVOS
   ========================================================= */

.page_issue_archive .obj_issue_summary.current {
  display: none !important;
}

.page_issue_archive .issues_archive > div:first-child {
  display: none !important;
}


/* =========================================================
   MOBILE
   En pantallas chicas el menú NO se retrae
   ========================================================= */

@media (max-width: 992px) {

  .pkp_structure_head,
  .pkp_head_wrapper {
    min-height: auto !important;
  }

  .pkp_structure_head {
    background-size: cover !important;
    background-position: center center !important;
  }

  .pkp_site_name_wrapper {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 10px !important;
    text-align: center !important;
  }

  .pkp_site_name {
    border-radius: 14px !important;
  }

  .pkp_site_nav_menu {
    position: relative !important;
    top: 0 !important;
    height: auto !important;
    background: #8fd19e !important;
    box-shadow: none !important;
    transition: none !important;
  }

  .pkp_navigation_primary_wrapper {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: none !important;
    background-color: #8fd19e !important;
  }

  .pkp_navigation_primary {
    background-color: #8fd19e !important;
    padding: 10px 0 !important;
  }

  .pkp_navigation_primary a {
    color: #1b3a2b !important;
    text-shadow: none !important;
  }

  .pkp_navigation_primary ul ul {
    position: relative !important;
    width: 100% !important;
    box-shadow: none !important;
    border-radius: 0;
  }

  .pkp_navigation_primary li {
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }

  .pkp_navigation_user_wrapper {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    padding: 0 !important;
  }
}


/* =========================================================
   FRANJA MARRÓN ALINEADA CON LOS CONTORNOS REALES DE LA IMAGEN
   ========================================================= */

@media (min-width: 993px) {

  /*
   * La franja se dibuja SOBRE EL HEADER REAL.
   * Por eso coincide con la imagen de fondo y no depende
   * del ancho del wrapper interno de OJS.
   */
  .pkp_structure_head::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 8px !important;
    height: 31px !important;

    background: rgba(104, 70, 32, 0.96) !important;

    /*
     * IZQUIERDA:
     * sigue el contorno verde/blanco REAL del logo.
     * En la imagen fuente el borde va aprox. de 21.8% a 22.1%.
     *
     * DERECHA:
     * se conserva la terminación curva contra el círculo marrón.
     */
    -webkit-clip-path: polygon(
      21.80% 0%,
      21.86% 20%,
      21.94% 40%,
      22.02% 60%,
      22.07% 80%,
      22.08% 100%,

      96.35% 100%,
      96.10% 80%,
      95.95% 60%,
      95.90% 50%,
      95.95% 40%,
      96.10% 20%,
      96.35% 0%
    ) !important;

    clip-path: polygon(
      21.80% 0%,
      21.86% 20%,
      21.94% 40%,
      22.02% 60%,
      22.07% 80%,
      22.08% 100%,

      96.35% 100%,
      96.10% 80%,
      95.95% 60%,
      95.90% 50%,
      95.95% 40%,
      96.10% 20%,
      96.35% 0%
    ) !important;

    z-index: 900 !important;
    pointer-events: none !important;
  }

  /* No agregar formas sobre el logo */
  .pkp_site_name_wrapper::before,
  .pkp_site_name_wrapper::after {
    content: none !important;
    display: none !important;
  }

  .pkp_site_name .is_text,
  .pkp_site_name a {
    font-size: 15px !important;
    line-height: 31px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45) !important;
  }
}


/* =========================================================
   CORRECCIÓN DE CAPAS
   La franja marrón debe quedar DETRÁS del nombre de la revista.
   ========================================================= */

@media (min-width: 993px) {

  .pkp_structure_head {
    isolation: isolate !important;
  }

  /* Franja marrón: sobre la imagen, pero debajo del contenido del header */
  .pkp_structure_head::after {
    z-index: 900 !important;
  }

  /* Todo el contenido real del encabezado queda por encima de la franja */
  .pkp_head_wrapper {
    z-index: 1000 !important;
  }

  /* Nombre real de la revista */
  .pkp_site_name_wrapper,
  .pkp_site_name {
    position: relative !important;
    z-index: 1100 !important;
  }

  .pkp_site_name > a.is_text,
  .pkp_site_name a.is_text,
  .pkp_site_name .is_text {
    color: #FFD400 !important;
    -webkit-text-fill-color: #FFD400 !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.70) !important;
  }
}


/* =========================================================
   POSICIÓN DEL TÍTULO SOBRE LA FRANJA MARRÓN
   ========================================================= */

@media (min-width: 993px) {

  /* Recuperar la posición original del título sobre la franja */
  .pkp_site_name_wrapper {
    position: absolute !important;
    top: auto !important;
    bottom: 8px !important;
    left: 50% !important;
    right: auto !important;
    width: 100vw !important;
    height: 31px !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: 1600 !important;
    pointer-events: none !important;
  }

  .pkp_site_name {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    height: 31px !important;
    margin: 0 0 0 22.35vw !important;
    padding: 0 8px !important;
    background: transparent !important;
    z-index: 1700 !important;
    pointer-events: auto !important;
  }

  /* Amarillo, un poco más grande */
  .pkp_site_name > a.is_text,
  .pkp_site_name a.is_text,
  .pkp_site_name .is_text,
  .pkp_site_name a {
    color: #FFD400 !important;
    -webkit-text-fill-color: #FFD400 !important;
    font-size: 17px !important;
    line-height: 31px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.75) !important;
  }
}


/* =========================================================
   EXTREMO DERECHO - BORDE EXTERNO DEL CONTORNO
   La franja termina en el borde EXTERNO de la línea verde/oscura,
   sin entrar en el círculo marrón.
   ========================================================= */

@media (min-width: 993px) {
  .pkp_structure_head::after {
    -webkit-clip-path: polygon(
      /* lado izquierdo: sin cambios */
      21.80% 0%,
      21.86% 20%,
      21.94% 40%,
      22.02% 60%,
      22.07% 80%,
      22.08% 100%,

      /* borde externo del círculo derecho */
      95.82% 100%,
      95.72% 82%,
      95.64% 64%,
      95.60% 50%,
      95.64% 36%,
      95.72% 18%,
      95.82% 0%
    ) !important;

    clip-path: polygon(
      /* lado izquierdo: sin cambios */
      21.80% 0%,
      21.86% 20%,
      21.94% 40%,
      22.02% 60%,
      22.07% 80%,
      22.08% 100%,

      /* borde externo del círculo derecho */
      95.82% 100%,
      95.72% 82%,
      95.64% 64%,
      95.60% 50%,
      95.64% 36%,
      95.72% 18%,
      95.82% 0%
    ) !important;
  }
}


/* =========================================================
   MOBILE / CELULARES
   Mantiene el diseño de escritorio:
   - imagen completa del encabezado
   - franja marrón inferior
   - título amarillo sobre la franja
   - no modifica el contenido de la revista
   ========================================================= */

@media (max-width: 992px) {

  /* Darle altura real al encabezado en celular.
     La versión anterior usaba min-height:auto y por eso se aplastaba. */
  .pkp_structure_head {
    position: relative !important;
    min-height: 118px !important;
    height: 118px !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center 52% !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  .pkp_head_wrapper {
    position: relative !important;
    min-height: 118px !important;
    height: 118px !important;
    background: transparent !important;
    z-index: 1000 !important;
  }

  /* Franja marrón inferior, igual concepto que escritorio */
  .pkp_structure_head::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 6px !important;
    height: 42px !important;
    background: rgba(104, 70, 32, 0.96) !important;

    /* Mismos puntos de contacto del diseño de escritorio */
    -webkit-clip-path: polygon(
      21.80% 0%,
      21.86% 20%,
      21.94% 40%,
      22.02% 60%,
      22.07% 80%,
      22.08% 100%,

      95.82% 100%,
      95.72% 82%,
      95.64% 64%,
      95.60% 50%,
      95.64% 36%,
      95.72% 18%,
      95.82% 0%
    ) !important;

    clip-path: polygon(
      21.80% 0%,
      21.86% 20%,
      21.94% 40%,
      22.02% 60%,
      22.07% 80%,
      22.08% 100%,

      95.82% 100%,
      95.72% 82%,
      95.64% 64%,
      95.60% 50%,
      95.64% 36%,
      95.72% 18%,
      95.82% 0%
    ) !important;

    z-index: 900 !important;
    pointer-events: none !important;
  }

  /* Título sobre la franja */
  .pkp_site_name_wrapper {
    position: absolute !important;
    top: auto !important;
    bottom: 6px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 42px !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    background: transparent !important;
    z-index: 1600 !important;
    pointer-events: none !important;
  }

  .pkp_site_name {
    position: absolute !important;
    left: 22.8% !important;
    right: 4.8% !important;
    top: 0 !important;
    bottom: 0 !important;

    display: flex !important;
    align-items: center !important;

    width: auto !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 2px 5px !important;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    z-index: 1700 !important;
    pointer-events: auto !important;
    overflow: hidden !important;
  }

  /* En celular permitimos 2 líneas para que el nombre no quede cortado */
  .pkp_site_name > a.is_text,
  .pkp_site_name a.is_text,
  .pkp_site_name .is_text,
  .pkp_site_name a {
    display: block !important;
    width: 100% !important;
    color: #FFD400 !important;
    -webkit-text-fill-color: #FFD400 !important;
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 700 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-align: left !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.75) !important;
    text-decoration: none !important;
  }

  /*
   * MENÚ MOBILE
   * Se conserva el comportamiento móvil de OJS.
   * Sólo evitamos que el bloque del menú cambie la altura del header.
   */
  .pkp_site_nav_menu {
    z-index: 9000 !important;
  }
}


/* Celulares angostos */
@media (max-width: 480px) {

  .pkp_structure_head,
  .pkp_head_wrapper {
    min-height: 108px !important;
    height: 108px !important;
  }

  .pkp_structure_head::after {
    bottom: 5px !important;
    height: 40px !important;
  }

  .pkp_site_name_wrapper {
    bottom: 5px !important;
    height: 40px !important;
  }

  .pkp_site_name {
    left: 22.5% !important;
    right: 4.8% !important;
    height: 40px !important;
    padding: 2px 4px !important;
  }

  .pkp_site_name > a.is_text,
  .pkp_site_name a.is_text,
  .pkp_site_name .is_text,
  .pkp_site_name a {
    font-size: 10px !important;
    line-height: 13px !important;
  }
}


/* =========================================================
   CORRECCIÓN MOBILE
   1) Franja marrón igual a escritorio
   2) Menú hamburguesa funcional
   ========================================================= */

@media (max-width: 992px) {

  /* --- FRANJA: misma altura/posición que escritorio --- */
  .pkp_structure_head::after {
    bottom: 8px !important;
    height: 31px !important;
    background: rgba(104, 70, 32, 0.96) !important;

    -webkit-clip-path: polygon(
      21.80% 0%,
      21.86% 20%,
      21.94% 40%,
      22.02% 60%,
      22.07% 80%,
      22.08% 100%,

      95.82% 100%,
      95.72% 82%,
      95.64% 64%,
      95.60% 50%,
      95.64% 36%,
      95.72% 18%,
      95.82% 0%
    ) !important;

    clip-path: polygon(
      21.80% 0%,
      21.86% 20%,
      21.94% 40%,
      22.02% 60%,
      22.07% 80%,
      22.08% 100%,

      95.82% 100%,
      95.72% 82%,
      95.64% 64%,
      95.60% 50%,
      95.64% 36%,
      95.72% 18%,
      95.82% 0%
    ) !important;
  }

  .pkp_site_name_wrapper {
    bottom: 8px !important;
    height: 31px !important;
  }

  .pkp_site_name {
    left: 22.35% !important;
    right: 4.5% !important;
    height: 31px !important;
    padding: 0 5px !important;
    overflow: hidden !important;
  }

  .pkp_site_name > a.is_text,
  .pkp_site_name a.is_text,
  .pkp_site_name .is_text,
  .pkp_site_name a {
    font-size: 11px !important;
    line-height: 31px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }


  /* =====================================================
     MENÚ HAMBURGUESA OJS
     ===================================================== */

  /* El botón de las tres líneas debe quedar visible y clickeable */
  .pkp_site_nav_toggle {
    display: block !important;
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 8px !important;
    z-index: 12000 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }

  .pkp_site_nav_toggle span,
  .pkp_site_nav_toggle:before,
  .pkp_site_nav_toggle:after {
    pointer-events: none !important;
  }

  /*
   * En mobile el menú NO debe quedar con la lógica retráctil
   * de escritorio (top:-34px / position:absolute permanente).
   */
  .pkp_site_nav_menu {
    position: absolute !important;
    top: 52px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(0, 82, 58, 0.97) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.30) !important;
    z-index: 11000 !important;

    /* cerrado por defecto */
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

    transition: opacity .2s ease !important;
  }

  /*
   * OJS abre el menú agregando una clase de estado.
   * Cubrimos las variantes habituales del tema Default.
   */
  .pkp_site_nav_menu.pkp_site_nav_menu--isOpen,
  .pkp_site_nav_menu.is_open,
  .pkp_site_nav_menu.is-open,
  .pkp_site_nav_menu.open,
  .pkp_site_nav_menu[aria-expanded="true"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /*
   * En algunas versiones la clase de apertura se agrega
   * al contenedor padre o al body.
   */
  .pkp_head_wrapper.pkp_site_nav_menu--isOpen .pkp_site_nav_menu,
  .pkp_structure_head.pkp_site_nav_menu--isOpen .pkp_site_nav_menu,
  body.pkp_site_nav_menu--isOpen .pkp_site_nav_menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Listas del menú en columna */
  .pkp_navigation_primary_wrapper,
  .pkp_navigation_user_wrapper {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .pkp_navigation_primary,
  .pkp_navigation_user {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    background: transparent !important;
  }

  .pkp_navigation_primary > li,
  .pkp_navigation_user > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.14) !important;
  }

  .pkp_navigation_primary > li > a,
  .pkp_navigation_user > li > a {
    display: block !important;
    width: 100% !important;
    padding: 11px 16px !important;
    color: #ffffff !important;
    text-shadow: none !important;
    box-sizing: border-box !important;
  }

  /* Submenús dentro del desplegable */
  .pkp_navigation_primary ul,
  .pkp_navigation_user ul {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
}


/* Celulares angostos: conservar la misma franja de 31px */
@media (max-width: 480px) {
  .pkp_structure_head::after {
    bottom: 8px !important;
    height: 31px !important;
  }

  .pkp_site_name_wrapper,
  .pkp_site_name {
    height: 31px !important;
  }

  .pkp_site_name > a.is_text,
  .pkp_site_name a.is_text,
  .pkp_site_name .is_text,
  .pkp_site_name a {
    font-size: 10px !important;
    line-height: 31px !important;
    white-space: nowrap !important;
  }
}


/* =========================================================
   MOBILE - MENÚ COMPLETO
   Al abrir las tres líneas deben verse TODAS las opciones:
   menú principal + menú de usuario.
   ========================================================= */

@media (max-width: 992px) {

  /* El desplegable puede ocupar la pantalla y hacer scroll */
  .pkp_site_nav_menu {
    position: absolute !important;
    top: 52px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    background: rgba(0, 82, 58, 0.98) !important;
    z-index: 12000 !important;
  }

  /* Mostrar SIEMPRE ambos bloques cuando el menú está abierto */
  .pkp_site_nav_menu.pkp_site_nav_menu--isOpen .pkp_navigation_primary_wrapper,
  .pkp_site_nav_menu.pkp_site_nav_menu--isOpen .pkp_navigation_user_wrapper,
  .pkp_site_nav_menu.is_open .pkp_navigation_primary_wrapper,
  .pkp_site_nav_menu.is_open .pkp_navigation_user_wrapper,
  .pkp_site_nav_menu.is-open .pkp_navigation_primary_wrapper,
  .pkp_site_nav_menu.is-open .pkp_navigation_user_wrapper,
  .pkp_site_nav_menu.open .pkp_navigation_primary_wrapper,
  .pkp_site_nav_menu.open .pkp_navigation_user_wrapper,
  body.pkp_site_nav_menu--isOpen .pkp_navigation_primary_wrapper,
  body.pkp_site_nav_menu--isOpen .pkp_navigation_user_wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Menú principal completo */
  .pkp_navigation_primary_wrapper,
  .pkp_navigation_primary,
  .pkp_navigation_primary ul {
    max-height: none !important;
    overflow: visible !important;
  }

  .pkp_navigation_primary {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .pkp_navigation_primary > li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }

  .pkp_navigation_primary > li > a {
    display: block !important;
    width: 100% !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
  }

  /* Submenús: mostrar todas sus opciones dentro del mismo desplegable */
  .pkp_navigation_primary li ul,
  .pkp_navigation_primary .dropdown-menu {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 0 0 14px !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .pkp_navigation_primary li ul li,
  .pkp_navigation_primary .dropdown-menu li {
    display: block !important;
    width: 100% !important;
  }

  .pkp_navigation_primary li ul a,
  .pkp_navigation_primary .dropdown-menu a {
    display: block !important;
    width: 100% !important;
    padding: 10px 16px !important;
    box-sizing: border-box !important;
  }

  /* Menú de usuario completo: usuario, perfil, cerrar sesión, etc. */
  .pkp_navigation_user_wrapper {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid rgba(255,255,255,0.22) !important;
  }

  .pkp_navigation_user,
  .pkp_navigation_user ul {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .pkp_navigation_user > li,
  .pkp_navigation_user li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .pkp_navigation_user a {
    display: block !important;
    width: 100% !important;
    padding: 11px 16px !important;
    box-sizing: border-box !important;
    color: #ffffff !important;
    text-shadow: none !important;
  }

  /* Evitar que alguna regla anterior corte contenido */
  .pkp_head_wrapper,
  .pkp_structure_head {
    overflow: visible !important;
  }
}


/* =========================================================
   MOBILE - COLOR Y ANCHO DEL MENÚ
   - mismo verde claro del menú común
   - el fondo termina donde terminan las opciones
   ========================================================= */

@media (max-width: 992px) {

  /* Contenedor desplegable: ancho según contenido, no 100% */
  .pkp_site_nav_menu {
    left: 0 !important;
    right: auto !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 88vw !important;
    background: #8fd19e !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25) !important;
  }

  /* Los dos bloques toman únicamente el ancho necesario */
  .pkp_navigation_primary_wrapper,
  .pkp_navigation_user_wrapper {
    width: auto !important;
    min-width: 0 !important;
    max-width: 88vw !important;
    background: transparent !important;
  }

  .pkp_navigation_primary,
  .pkp_navigation_user {
    width: auto !important;
    min-width: max-content !important;
    max-width: 88vw !important;
    background: transparent !important;
  }

  .pkp_navigation_primary > li,
  .pkp_navigation_user > li {
    width: auto !important;
    min-width: max-content !important;
    max-width: 88vw !important;
    background: transparent !important;
  }

  /* Links del menú: mismo esquema de color del menú común */
  .pkp_navigation_primary > li > a,
  .pkp_navigation_user > li > a,
  .pkp_navigation_primary li ul a,
  .pkp_navigation_primary .dropdown-menu a,
  .pkp_navigation_user a {
    width: auto !important;
    min-width: max-content !important;
    max-width: 88vw !important;
    color: #1b3a2b !important;
    background: transparent !important;
    text-shadow: none !important;
    white-space: nowrap !important;
  }

  .pkp_navigation_primary > li > a:hover,
  .pkp_navigation_user > li > a:hover,
  .pkp_navigation_primary li ul a:hover,
  .pkp_navigation_primary .dropdown-menu a:hover {
    background: #6bbf7a !important;
    color: #ffffff !important;
  }

  /* Submenús también sin ocupar todo el ancho de pantalla */
  .pkp_navigation_primary li ul,
  .pkp_navigation_primary .dropdown-menu,
  .pkp_navigation_user ul {
    width: max-content !important;
    min-width: 100% !important;
    max-width: 88vw !important;
    background: #8fd19e !important;
  }
}


/* =========================================================
   MOBILE - MENÚ SIEMPRE POR DELANTE DEL CONTENIDO
   ========================================================= */

@media (max-width: 992px) {

  .pkp_structure_head {
    position: relative !important;
    z-index: 50000 !important;
    overflow: visible !important;
    isolation: auto !important;
  }

  .pkp_head_wrapper {
    position: relative !important;
    z-index: 50010 !important;
    overflow: visible !important;
  }

  .pkp_site_nav_menu {
    position: absolute !important;
    z-index: 60000 !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
  }

  .pkp_navigation_primary_wrapper,
  .pkp_navigation_user_wrapper,
  .pkp_navigation_primary,
  .pkp_navigation_user,
  .pkp_navigation_primary ul,
  .pkp_navigation_user ul,
  .pkp_navigation_primary .dropdown-menu {
    position: relative !important;
    z-index: 60010 !important;
  }

  .pkp_structure_content,
  .pkp_structure_main,
  .page_index_journal,
  .page_issue,
  .obj_issue_toc,
  .obj_issue_summary,
  .obj_article_summary,
  .obj_issue_full,
  main {
    position: relative !important;
    z-index: 1 !important;
  }

  .pkp_structure_content img,
  .pkp_structure_main img,
  .obj_issue_full img,
  .obj_issue_summary img,
  .obj_article_summary img {
    position: relative !important;
    z-index: 1 !important;
  }

  .pkp_site_nav_toggle {
    z-index: 60020 !important;
  }
}