/*
=========================================================
 CYTE Revista Científica — BASE V16 · ETIQUETA DIRECTA DE MENÚ
 OJS 3.4

 OBJETIVO
 - Usar el banner oficial de CYTE como imagen principal del encabezado.
 - El banner debe cargarse en: Sitio web > Apariencia > Configuración > Logo.
 - Eliminar la Imagen de inicio para evitar que el banner aparezca dos veces.
 - Mantener el menú debajo del banner.
 - Conservar el estilo de portada, columna lateral y el recuadro
   “Recepción permanente de artículos científicos”.
 - Evitar que el borde vertical de la barra lateral se prolongue o
   se perciba deformado al modificar el zoom del navegador.
=========================================================
*/

:root {
    --cyte-azul-marino: #0B2E59;
    --cyte-azul-medio: #0F4C81;
    --cyte-azul-claro: #EAF3F8;
    --cyte-blanco: #FFFFFF;
    --cyte-gris-texto: #4B5563;
    --cyte-gris-borde: #E5E7EB;
    --cyte-gris-fondo: #F7F9FB;
}

/* =====================================================
   CORRECCIÓN RESPONSIVA DE LA LÍNEA DIVISORIA
   ===================================================== */

/* OJS puede dibujar la división desde el contenido principal,
   la barra lateral o sus pseudoelementos. Se neutralizan todos. */
.pkp_structure_main,
.pkp_structure_sidebar {
    border-left: 0 !important;
    border-right: 0 !important;
}

.pkp_structure_main::before,
.pkp_structure_main::after,
.pkp_structure_sidebar::before,
.pkp_structure_sidebar::after {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* =====================================================
   1. CABECERA GENERAL
   ===================================================== */

.pkp_structure_head {
    background: var(--cyte-azul-marino) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* Área donde OJS muestra el logo: aquí irá el banner */
.pkp_site_name_wrapper {
    background: var(--cyte-blanco) !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* El contenedor del nombre ocupa todo el ancho disponible */
.pkp_site_name {
    margin: 0 auto !important;
    padding: 0 !important;
    max-width: 100% !important;
    line-height: 0 !important;
}

/* Banner cargado en el campo Logo */
.pkp_site_name .is_img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    line-height: 0 !important;
}

.pkp_site_name .is_img img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: contain !important;
}

/* Si OJS muestra el título textual, lo ocultamos cuando hay imagen */
.pkp_site_name .is_text {
    display: none !important;
}

/* =====================================================
   2. NAVEGACIÓN PRINCIPAL
   ===================================================== */

.pkp_navigation_primary_wrapper {
    background: var(--cyte-azul-marino) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
}

.pkp_navigation_primary {
    margin: 0 !important;
}

.pkp_navigation_primary > li {
    margin-right: 6px !important;
}

.pkp_navigation_primary > li > a {
    color: var(--cyte-blanco) !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    padding: 12px 10px !important;
    border-bottom: 2px solid transparent !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: var(--cyte-blanco) !important;
    border-bottom-color: #7FC6E8 !important;
}

/* Submenús */
.pkp_navigation_primary ul {
    background: var(--cyte-blanco) !important;
    border: 1px solid #D9E2EA !important;
    box-shadow: 0 8px 22px rgba(11, 46, 89, 0.14) !important;
}

.pkp_navigation_primary ul a {
    color: var(--cyte-azul-marino) !important;
    padding: 10px 14px !important;
}

.pkp_navigation_primary ul a:hover,
.pkp_navigation_primary ul a:focus {
    background: var(--cyte-azul-claro) !important;
    color: var(--cyte-azul-marino) !important;
}

/* Usuario y buscador */
.pkp_navigation_user > li > a,
.pkp_search_desktop,
.pkp_search_desktop a {
    color: var(--cyte-blanco) !important;
}

/* =====================================================
   3. CUERPO GENERAL
   ===================================================== */

.pkp_structure_content {
    background: var(--cyte-blanco) !important;
}

.pkp_structure_main {
    padding-top: 18px !important;
    padding-bottom: 40px !important;
}

@media (min-width: 992px) {
    .pkp_structure_main {
        width: 68% !important;
    }

    .pkp_structure_sidebar {
        width: 32% !important;
    }
}

.pkp_structure_main p,
.pkp_structure_main li {
    line-height: 1.72 !important;
    color: #2F3742 !important;
}

/* =====================================================
   4. TÍTULOS Y DESCRIPCIÓN
   ===================================================== */

.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3 {
    color: var(--cyte-azul-marino) !important;
    line-height: 1.25 !important;
}

.pkp_structure_main h2 {
    font-size: 1.55rem !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}

.pkp_structure_main h3 {
    font-size: 1.18rem !important;
    margin-bottom: 12px !important;
}

.pkp_page_index .journal_description {
    padding-top: 0 !important;
    padding-bottom: 22px !important;
    margin-bottom: 0 !important;
}

/* =====================================================
   5. BLOQUE DE BIENVENIDA
   ===================================================== */

.pkp_page_index .additional_content {
    margin-top: 0 !important;
    padding: 24px 26px 28px !important;
    border-top: 1px solid var(--cyte-gris-borde) !important;
    background: var(--cyte-gris-fondo) !important;
}

.pkp_page_index .additional_content p:first-child {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    color: var(--cyte-azul-marino) !important;
    font-weight: 700 !important;
}

.pkp_page_index .additional_content p {
    margin-bottom: 14px !important;
}

/* Recuadro de recepción permanente */
.pkp_page_index .additional_content p:last-child {
    display: inline-block !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    padding: 10px 14px !important;
    background: var(--cyte-azul-claro) !important;
    border-left: 4px solid var(--cyte-azul-medio) !important;
    color: var(--cyte-azul-marino) !important;
    font-weight: 600 !important;
}

/* =====================================================
   6. COLUMNA LATERAL
   ===================================================== */

.pkp_structure_sidebar {
    padding-top: 18px !important;
    background: #FCFDFE !important;
}

.pkp_block {
    margin-bottom: 24px !important;
}

.pkp_block .title {
    color: var(--cyte-azul-marino) !important;
    font-size: 1.10rem !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--cyte-gris-borde) !important;
}

.pkp_block ul {
    margin: 0 !important;
    padding-left: 0 !important;
}

.pkp_block li {
    margin-bottom: 7px !important;
}

.pkp_block a,
.pkp_structure_content a {
    color: var(--cyte-azul-medio) !important;
    text-decoration: none !important;
}

.pkp_block a:hover,
.pkp_block a:focus,
.pkp_structure_content a:hover,
.pkp_structure_content a:focus {
    color: var(--cyte-azul-marino) !important;
    text-decoration: underline !important;
}

/* =====================================================
   7. IMPORTANTE: SIN IMAGEN DE INICIO
   Si accidentalmente queda una Imagen de inicio cargada,
   la ocultamos para evitar duplicar el banner.
   ===================================================== */

.pkp_page_index .homepage_image {
    display: none !important;
}

/* =====================================================
   8. RESPONSIVE
   ===================================================== */

@media (max-width: 768px) {
    .pkp_site_name_wrapper {
        padding: 0 !important;
    }

    .pkp_site_name .is_img img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }

    .pkp_structure_main,
    .pkp_structure_sidebar {
        width: 100% !important;
    }

    .pkp_structure_main {
        padding-top: 16px !important;
        padding-bottom: 28px !important;
    }

    .pkp_structure_sidebar {
        padding-top: 16px !important;
    }

    .pkp_structure_main h2 {
        font-size: 1.35rem !important;
    }

    .pkp_page_index .additional_content {
        padding: 20px 18px 22px !important;
    }
}

/* =====================================================
   9. BANNER Y MENÚ HORIZONTAL EN TABLET
   ===================================================== */

@media (min-width: 768px) and (max-width: 991px) {
    /* Banner completo, proporcional y sin recortes */
    .pkp_site_name_wrapper,
    .pkp_site_name,
    .pkp_site_name .is_img {
        display: block !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .pkp_site_name .is_img img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        object-fit: contain !important;
    }

    /* Menú principal siempre visible debajo del banner */
    .pkp_site_nav_toggle {
        display: none !important;
    }

    .pkp_site_nav_menu,
    .pkp_navigation_primary_row,
    .pkp_navigation_primary_wrapper {
        display: block !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .pkp_site_nav_menu,
    .pkp_navigation_primary_wrapper {
        background: var(--cyte-azul-marino) !important;
    }

    .pkp_navigation_primary_wrapper {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .pkp_navigation_primary {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: max-content !important;
        min-width: 100% !important;
        margin: 0 !important;
        padding: 0 8px !important;
        white-space: nowrap !important;
    }

    .pkp_navigation_primary > li {
        display: block !important;
        float: none !important;
        flex: 0 0 auto !important;
        margin: 0 2px !important;
    }

    .pkp_navigation_primary > li > a {
        display: block !important;
        padding: 11px 9px !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
    }
}

/* =====================================================
   10. BANNER Y MENÚ DESPLEGABLE EN CELULAR
   ===================================================== */

@media (max-width: 767px) {
    /* Orden del encabezado: banner, botón y panel desplegable */
    .pkp_head_wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* El contenedor real de OJS ordena primero el banner y luego el botón */
    .pkp_site_name_wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* El banner permanece completo y proporcional */
    .pkp_site_name,
    .pkp_site_name .is_img {
        display: block !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .pkp_site_name .is_img img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        object-fit: contain !important;
    }

    .pkp_site_name_wrapper,
    .pkp_site_name {
        order: 1 !important;
    }

    /* Se conserva el botón desplegable nativo de OJS */
    .pkp_site_nav_toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        position: static !important;
        order: 2 !important;
        align-self: stretch !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        height: 52px !important;
        margin: 0 !important;
        padding: 0 18px !important;
        border: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
        border-radius: 0 !important;
        background-color: var(--cyte-azul-marino) !important;
        color: var(--cyte-blanco) !important;
        text-align: left !important;
        text-indent: 0 !important;
        overflow: visible !important;
        cursor: pointer !important;
        z-index: 10001 !important;
    }

    /* OJS oculta visualmente el texto original; lo convertimos en etiqueta visible */
    .pkp_site_nav_toggle > span {
        display: none !important;
        align-items: center !important;
        gap: 10px !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        clip: auto !important;
        clip-path: none !important;
        overflow: visible !important;
        white-space: nowrap !important;
        font-size: 0 !important;
        line-height: 1 !important;
        color: var(--cyte-blanco) !important;
        background: transparent !important;
        transform: none !important;
    }

    .pkp_site_nav_toggle > span::before {
        content: "☰" !important;
        display: inline-block !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        border: 0 !important;
        font-family: Arial, sans-serif !important;
        font-size: 26px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        color: var(--cyte-blanco) !important;
        background: transparent !important;
        transform: none !important;
    }

    .pkp_site_nav_toggle > span::after {
        content: "MENÚ" !important;
        display: inline-block !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        border: 0 !important;
        font-family: Arial, sans-serif !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em !important;
        line-height: 1 !important;
        color: var(--cyte-blanco) !important;
        background: transparent !important;
        transform: none !important;
    }

    .pkp_site_nav_toggle--transform > span::before,
    .pkp_site_nav_toggle[aria-expanded="true"] > span::before {
        content: "✕" !important;
        font-size: 23px !important;
    }

    .pkp_site_nav_toggle--transform > span::after,
    .pkp_site_nav_toggle[aria-expanded="true"] > span::after {
        content: "CERRAR MENÚ" !important;
    }

    /* Etiqueta aplicada directamente al botón para evitar el ocultamiento de OJS */
    .pkp_site_name_wrapper > .pkp_site_nav_toggle::before {
        content: "☰" !important;
        display: inline-block !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 11px 0 0 !important;
        padding: 0 !important;
        border: 0 !important;
        font-family: Arial, sans-serif !important;
        font-size: 27px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        color: var(--cyte-blanco) !important;
        background: transparent !important;
        transform: none !important;
    }

    .pkp_site_name_wrapper > .pkp_site_nav_toggle::after {
        content: "MENÚ" !important;
        display: inline-block !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        font-family: Arial, sans-serif !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em !important;
        line-height: 1 !important;
        color: var(--cyte-blanco) !important;
        background: transparent !important;
        transform: none !important;
    }

    .pkp_site_name_wrapper > .pkp_site_nav_toggle--transform::before,
    .pkp_site_name_wrapper > .pkp_site_nav_toggle[aria-expanded="true"]::before {
        content: "✕" !important;
        font-size: 23px !important;
    }

    .pkp_site_name_wrapper > .pkp_site_nav_toggle--transform::after,
    .pkp_site_name_wrapper > .pkp_site_nav_toggle[aria-expanded="true"]::after {
        content: "CERRAR MENÚ" !important;
    }

    /* El panel abierto queda debajo del botón y desplaza el contenido */
    .pkp_site_nav_menu {
        position: static !important;
        order: 3 !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        background: var(--cyte-azul-marino) !important;
        z-index: 10000 !important;
    }

    .pkp_site_nav_menu a,
    .pkp_site_nav_menu button {
        color: var(--cyte-blanco) !important;
    }

    .pkp_navigation_primary > li,
    .pkp_navigation_primary > li > a {
        width: 100% !important;
        margin: 0 !important;
        white-space: normal !important;
    }

    .pkp_navigation_primary > li > a {
        display: block !important;
        padding: 10px 12px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
    }
}

/* =====================================================
   FIN BASE V16 · ETIQUETA DIRECTA DE MENÚ
   ===================================================== */