/* ==========================================================
   Cartografías de la Educación Superior – UNAHUR
   CSS personalizado para OJS 3.5  |  v9 – Header móvil completamente reconstruido
   ========================================================== */

/* -- Google Fonts: Roboto ---------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* -- Variables de marca ------------------------------------ */
:root {
    --navy-dark:   #0c3555;
    --navy-mid:    #0d4371;
    --blue-nav:    #1f8eff;
    --green:       #25b943;
    --red:         #ea0b3f;
    --gray-light:  #e6e6e6;
    --white:       #ffffff;
    --text:        #1a1a2e;
}

/* -- Tipografía base --------------------------------------- */
body, p, li, td, th, label, input, textarea, select {
    font-family: 'Roboto', Arial, sans-serif !important;
    font-size: 16px;
    line-height: 1.65;
    color: var(--text);
}

/* ==========================================================
   HEADER (ESCRITORIO)
   ========================================================== */
#headerNavigationContainer, .pkp_structure_head {
    border-bottom: 3px solid var(--blue-nav) !important;
    padding: 0 !important;
}

.pkp_site_name_wrapper {
    text-align: center !important;
    padding: 16px 0 12px !important;
    background: transparent !important;
}

header.pkp_structure_head {
    background-image: url("/public/journals/1/homepageImage_es.png") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
}

.pkp_site_name img, .pkp_site_name a img, .pkp_site_name_logo {
    max-height: 100px !important;
    width: auto !important;
    display: inline-block !important;
}

.pkp_site_name a.is_text {
    display: none !important;
}

.pkp_site_name a.is_text span, .pkp_site_name a {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    color: var(--navy-dark) !important;
    text-decoration: none !important;
}

/* ==========================================================
   BARRA DE NAVEGACIÓN PRIMARIA
   ========================================================== */
#navigationPrimary {
    background-color: var(--blue-nav) !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pkp_navigation_primary_row {
    background-color: var(--blue-nav) !important;
}

.pkp_navigation_primary_row .pkp_site_name_wrapper,
.pkp_navigation_primary_row .pkp_site_name {
    background-color: var(--white) !important;
}

#navigationPrimary ul, #navigationPrimary ul li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    background-color: var(--blue-nav) !important;
}

#navigationPrimary ul li a, #navigationPrimary > li > a {
    color: var(--white) !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 13px 22px !important;
    text-decoration: none !important;
    display: inline-block !important;
}

#navigationPrimary ul li a {
    background-color: var(--blue-nav) !important;
    color: var(--white) !important;
}

/* Submenú desplegable (Acerca de, etc.) */
#navigationPrimary ul ul {
    background-color: var(--navy-mid) !important;
    position: absolute !important;
    z-index: 9999 !important;
    min-width: 200px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

#navigationPrimary ul li > ul {
    display: block !important;
}

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

#navigationPrimary ul ul li a {
    color: var(--white) !important;
    background-color: var(--blue-nav) !important;
    display: block !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    text-decoration: none !important;
}

/* ==========================================================
   NAVEGACIÓN DE USUARIO (ESCRITORIO)
   ========================================================== */
#navigationUser ul, #navigationUser ul li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    background-color: #1f8eff;
}

#navigationUser ul li a {
    color: var(--white) !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 7px 14px !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.pkp_navigation_user_wrapper {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    padding-left: .714rem;
    padding-right: .714rem;
    text-align: right;
    padding-top: 0;
    margin-top: 0;
    border-top: none;
    z-index: 1000;
}

.pkp_navigation_user.pkp_navigation_user {
    padding-right: 0 !important;
    margin-right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    gap: 30px;
    display: flex;
    flex-direction: row-reverse;
}

#navigationUser a[href*="register"], #navigationUser a[href*="registrar"],
#navigationUser a[href*="login"],    #navigationUser a[href*="entrar"] {
    width: 110px !important;
    height: 38px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

/* Botón Entrar */
#navigationUser a[href*="login"], #navigationUser a[href*="entrar"] {
    background: var(--red) !important;
    color: white !important;
    border-radius: 10px !important;
    margin-right: 12px !important;
}

/* Botón Registrarse */
#navigationUser a[href*="register"], #navigationUser a[href*="registrar"] {
    background: var(--green) !important;
    color: white !important;
    border-radius: 10px !important;
    margin-right: 0 !important;
}

#navigationUser a {
    opacity: .85 !important;
}

/* ==========================================================
   LAYOUT PRINCIPAL (ESCRITORIO)
   ========================================================== */
html, body {
    background: url("https://agentar.info/wp-content/uploads/2026/05/fondositio-scaled.png") center top / cover fixed no-repeat !important;
}

.pkp_structure_page {
    background: transparent !important;
}

@media (min-width: 992px) {
    .pkp_head_wrapper {
        padding-top: 10.286rem;
    }
    .pkp_structure_content {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        max-width: 1140px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 16px !important;
        box-sizing: border-box !important;
        gap: 16px !important;
    }
    .pkp_structure_main {
        float: none !important;
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        background: var(--white) !important;
        border-radius: 6px !important;
        padding: 20px 24px !important;
        box-sizing: border-box !important;
        box-shadow: 0 1px 6px rgba(12, 53, 85, 0.08) !important;
        border: none !important;
        margin: 0 !important;
    }
    .pkp_structure_sidebar {
        float: none !important;
        clear: none !important;
        position: static !important;
        width: 240px !important;
        max-width: 240px !important;
        flex: 0 0 240px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

.pkp_structure_main h2, .pkp_structure_main h3 {
    color: var(--navy-mid) !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    border-bottom: 2px solid var(--blue-nav) !important;
    padding-bottom: 8px !important;
    margin-bottom: 18px !important;
}

.pkp_structure_main > h2, .about_journal > h2 {
    margin-top: 0 !important;
}

.pkp_structure_main a {
    color: var(--blue-nav) !important;
    text-decoration: underline !important;
}

/* ==========================================================
   SIDEBAR – BLOQUES INTERNOS
   ========================================================== */
.pkp_structure_sidebar .pkp_block {
    background: var(--white) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
    box-shadow: 0 1px 6px rgba(12, 53, 85, 0.08) !important;
    padding: 0 !important;
}

.pkp_structure_sidebar .pkp_block .title,
.pkp_structure_sidebar .pkp_block h2,
.pkp_structure_sidebar .pkp_block header {
    background: var(--red) !important;
    color: var(--white) !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    display: block !important;
}

.pkp_structure_sidebar .pkp_block h3 {
    background: transparent !important;
    color: var(--navy-dark) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 8px 14px 5px 20px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--gray-light) !important;
}

.pkp_structure_sidebar .pkp_block ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.pkp_structure_sidebar .pkp_block ul li {
    border-bottom: none !important;
    margin: 0 !important;
    width: 100% !important;
    display: block !important;
}

.pkp_structure_sidebar .pkp_block ul li a {
    color: var(--blue-nav) !important;
    background: #f0f6ff !important;
    font-size: 15px !important;
    text-decoration: none !important;
    display: block !important;
    padding: 7px 14px 7px 24px !important;
    line-height: 1.35 !important;
    box-sizing: border-box !important;
}

.pkp_structure_sidebar .pkp_block ul li.has_submenu {
    padding-left: 0 !important;
}

/* Botón "Enviar un artículo" */
.pkp_block_make_submission a,
.pkp_structure_sidebar a[href*="submission"],
.pkp_structure_sidebar a[href*="submit"] {
    display: block !important;
    background: #1da336 !important;
    color: var(--white) !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 11px 14px !important;
    border-radius: 4px !important;
    text-align: left !important;
    text-decoration: none !important;
    margin: 8px !important;
}

.pkp_block_make_submission a::after {
    content: ' →';
}

/* ==========================================================
   FORMULARIOS
   ========================================================== */
input[type="text"], input[type="email"], input[type="password"], textarea, select {
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    border: 1.5px solid var(--blue-nav) !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(31, 142, 255, .15) !important;
}

.pkp_button_primary, input[type="submit"], button[type="submit"] {
    background: #1da336 !important;
    color: var(--white) !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 10px 24px !important;
    cursor: pointer !important;
    font-size: 15px !important;
}

/* ==========================================================
   FOOTER INSTITUCIONAL UNAHUR
   ========================================================== */
.pkp_structure_footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #0d4371 !important;
    padding: 10px 20px !important;
    margin-top: 40px !important;
}

.pkp_structure_footer_wrapper {
    background: #0d4371;
}

.pkp_footer_content {
    flex: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pkp_footer_content p {
    margin: 2px 0 !important;
    line-height: 1.25 !important;
    font-size: 13px !important;
    color: rgba(255,255,255,.85) !important;
}

.pkp_brand_footer {
    padding: 0 !important;
    margin: 0 0 0 30px !important;
    flex-shrink: 0 !important;
}

.pkp_brand_footer img {
    display: none !important;
}

.pkp_brand_footer a {
    display: block !important;
    width: 280px !important;
    height: 80px !important;
    background: url("https://unahur.edu.ar/wp-content/uploads/2024/09/logo-hurlingham.png") center center / contain no-repeat !important;
    float: none !important;
}

/* ==========================================================
   MÓVILES  (≤ 767 px)  –  HEADER COMPLETAMENTE RECONSTRUIDO v9
   ==========================================================

   PROBLEMA: El texto se corta porque OJS 3.5 tiene múltiples
   capas de padding, alturas fijas y posicionamiento absoluto
   en el header que interfieren con nuestro CSS.

   SOLUCIÓN: Reconstruir COMPLETAMENTE el header en móvil,
   eliminando TODAS las restricciones de altura y posicionamiento.
   ========================================================== */

@media (max-width: 767px) {

    /* =====================================================
       0. RESET GLOBAL DEL HEADER EN MÓVIL
       ===================================================== */

    /* Eliminar TODAS las alturas, paddings y posicionamientos
       del header y sus contenedores */
    header.pkp_structure_head,
    .pkp_structure_head,
    #headerNavigationContainer,
    .pkp_head_wrapper,
    .pkp_site_name_wrapper,
    .pkp_site_name,
    .pkp_site_name > a,
    .pkp_site_name > div,
    .pkp_site_name_wrapper > div,
    .pkp_site_name_wrapper > a,
    .pkp_site_name .is_img,
    .pkp_site_name .is_text,
    .pkp_site_name a.is_text,
    .pkp_site_name a.is_img {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        float: none !important;
        overflow: visible !important;
        line-height: 1.4 !important;
    }

    /* =====================================================
       1. HEADER CONTAINER: Fondo blanco, sin imagen
       ===================================================== */

    header.pkp_structure_head,
    .pkp_structure_head,
    #headerNavigationContainer {
        background-image: none !important;
        background-color: var(--white) !important;
        border-bottom: none !important;
    }

    /* =====================================================
       2. HEAD WRAPPER: Sin padding, sin altura fija
       ===================================================== */

    .pkp_head_wrapper {
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        min-height: auto !important;
    }

    /* =====================================================
       3. SITE NAME WRAPPER: Contenedor del texto, sin imagen
       ===================================================== */

    .pkp_site_name_wrapper {
        display: block !important;
        width: 100% !important;
        background-image: none !important;
        background-color: var(--navy-dark) !important;
        padding: 30px 20px 25px !important;
        margin: 0 !important;
        text-align: center !important;
        height: auto !important;
        min-height: auto !important;
    }

    /* Ocultar CUALQUIER imagen dentro del site name wrapper */
    .pkp_site_name_wrapper img,
    .pkp_site_name_wrapper a img,
    .pkp_site_name img,
    .pkp_site_name a img,
    .pkp_site_name .is_img,
    .pkp_site_name .is_img img,
    .pkp_site_name_logo,
    .pkp_site_name .pkp_site_name_logo {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
    }

    /* =====================================================
       4. SITE NAME: Texto grande, visible, sin cortes
       ===================================================== */

    .pkp_site_name {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    .pkp_site_name a,
    .pkp_site_name a.is_text,
    .pkp_site_name .is_text,
    .pkp_site_name > a,
    .pkp_site_name > div,
    .pkp_site_name_wrapper .pkp_site_name a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        font-family: 'Roboto', sans-serif !important;
        font-weight: 700 !important;
        font-size: 1.5rem !important;
        color: var(--white) !important;
        text-decoration: none !important;
        line-height: 1.4 !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    .pkp_site_name a.is_text span,
    .pkp_site_name .is_text span,
    .pkp_site_name a span,
    .pkp_site_name span {
        display: block !important;
        color: var(--white) !important;
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        min-height: auto !important;
    }

    /* Línea decorativa azul debajo del texto */
    .pkp_site_name_wrapper::after {
        content: "" !important;
        display: block !important;
        width: 60px !important;
        height: 3px !important;
        background-color: var(--blue-nav) !important;
        margin: 15px auto 0 !important;
    }

    /* =====================================================
       5. BARRA DE NAVEGACIÓN PRIMARIA
       ===================================================== */

    .pkp_navigation_primary_row {
        background-color: var(--navy-dark) !important;
        border-top: 3px solid var(--blue-nav) !important;
        border-bottom: 2px solid var(--blue-nav) !important;
        position: relative !important;
        z-index: 200 !important;
        width: 100% !important;
        min-height: 48px !important;
        height: auto !important;
    }

    #navigationPrimary {
        background-color: var(--navy-dark) !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* =====================================================
       6. BOTÓN HAMBURGUESA
       ===================================================== */

    .pkp_site_nav_menu,
    .pkp_nav_toggle_wrapper {
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        z-index: 1001 !important;
    }

    .pkp_nav_toggle,
    button.pkp_nav_toggle,
    .pkp_navigation_primary_row button.pkp_nav_toggle,
    #navigationPrimary > button,
    button[aria-label*="menu"],
    button[aria-label*="Menú"],
    button[aria-label*="Navigation"] {
        background: var(--navy-dark) !important;
        border: 2px solid var(--white) !important;
        border-radius: 4px !important;
        color: var(--white) !important;
        font-size: 22px !important;
        padding: 8px 12px !important;
        display: block !important;
        cursor: pointer !important;
        line-height: 1 !important;
        position: relative !important;
        z-index: 1002 !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
    }

    .pkp_nav_toggle span,
    .pkp_nav_toggle .fa,
    .pkp_nav_toggle .fas,
    .pkp_nav_toggle i,
    .pkp_nav_toggle::before,
    .pkp_nav_toggle::after {
        color: var(--white) !important;
        background-color: var(--white) !important;
    }

    .pkp_nav_toggle svg,
    .pkp_nav_toggle svg path,
    .pkp_nav_toggle svg line {
        fill: var(--white) !important;
        stroke: var(--white) !important;
    }

    .pkp_nav_toggle img {
        filter: invert(1) brightness(2) !important;
    }

    /* =====================================================
       7. MENÚ DESPLEGADO
       ===================================================== */

    #navigationPrimary ul {
        background-color: var(--navy-mid) !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    #navigationPrimary ul li {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        border-bottom: 1px solid rgba(255,255,255,0.15) !important;
        background-color: var(--navy-mid) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #navigationPrimary ul li a {
        background-color: var(--navy-mid) !important;
        color: var(--white) !important;
        display: block !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    #navigationPrimary ul ul {
        position: static !important;
        box-shadow: none !important;
        background-color: var(--navy-dark) !important;
    }

    #navigationPrimary ul ul li {
        background-color: var(--navy-dark) !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    }

    #navigationPrimary ul ul li a {
        background-color: var(--navy-dark) !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        padding: 10px 16px 10px 30px !important;
    }

    /* =====================================================
       8. NAVEGACIÓN DE USUARIO
       ===================================================== */

    .pkp_navigation_user_wrapper {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        display: flex !important;
        justify-content: center !important;
        padding: 10px 0 !important;
        background-color: var(--navy-dark) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid rgba(255,255,255,0.12) !important;
        height: auto !important;
        min-height: auto !important;
    }

    .pkp_navigation_user.pkp_navigation_user {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #navigationUser ul,
    #navigationUser ul li {
        display: inline-flex !important;
        background-color: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #navigationUser a[href*="register"], 
    #navigationUser a[href*="registrar"],
    #navigationUser a[href*="login"],    
    #navigationUser a[href*="entrar"] {
        width: 105px !important;
        height: 36px !important;
        font-size: 13px !important;
        margin: 0 !important;
        border-radius: 8px !important;
    }

    /* =====================================================
       9. CONTENIDO PRINCIPAL
       ===================================================== */

    .pkp_structure_content {
        display: flex !important;
        flex-direction: column !important;
        padding: 12px 10px !important;
        gap: 12px !important;
        max-width: 100% !important;
    }

    .pkp_structure_main {
        padding: 16px 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: var(--white) !important;
        border-radius: 6px !important;
    }

    .pkp_structure_sidebar {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        box-sizing: border-box !important;
    }

    /* =====================================================
       10. FOOTER
       ===================================================== */

    .pkp_structure_footer {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
        padding: 15px !important;
    }

    .pkp_brand_footer {
        margin: 0 !important;
    }

    .pkp_brand_footer a {
        width: 220px !important;
        height: 60px !important;
        margin: 0 auto !important;
    }

    .pkp_footer_content p {
        font-size: 12px !important;
        text-align: center !important;
    }
}