/* ==========================================================================
   1. CONFIGURACIÓN DE LA CABECERA Y ELEMENTOS VISUALES (GENERAL Y PC)
   ========================================================================== */

/* Cabecera con la imagen de fondo panorámica */
header.pkp_structure_head {
    background-image: url("https://journals.uted.us/ojs/public/journals/2/homepageImage_es.jpg") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: 350px !important; /* Mantiene la altura para lucir el banner */
    display: flex !important;
    flex-direction: column !important;
    position: relative !important; /* Base indispensable para posicionamiento interno */
}

/* Ocultar el logotipo principal de la cabecera por completo para limpiar el banner */
.pkp_site_name_wrapper, 
.pkp_head_wrapper .pkp_site_name {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Transparencia para los bloques residuales del centro de la cabecera */
.pkp_head_wrapper {
    background: transparent !important;
}

/* ==========================================================================
   REGLAS ESPECÍFICAS PARA PANTALLAS GRANDES (COMPUTADORAS)
   ========================================================================== */
@media (min-width: 992px) {
    /* Forzar la barra azul de navegación al extremo superior de la pantalla */
    .pkp_navigation_primary_wrapper {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: #002147 !important; /* Tu azul institucional de extremo a extremo */
    }

    /* Evitar que el texto del menú empiece pegado a los bordes de la pantalla */
    .pkp_navigation_primary {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Posicionar el usuario dentro de la barra azul (arriba a la derecha) */
    .pkp_navigation_user_wrapper {
        position: absolute !important;
        top: 0px !important;       
        right: 120px !important;    /* Separado del botón "Buscar" */
        z-index: 1001 !important;   
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Ajuste de color y legibilidad para el nombre de usuario */
    .pkp_navigation_user a, 
    .pkp_navigation_user .username,
    .pkp_navigation_user_wrapper .pkp_navigation_user > li > a {
        color: #ffffff !important; 
        font-size: 14px !important;
        text-shadow: none !important;
        font-weight: bold !important;
    }
}

/* ==========================================================================
   REGLAS ADAPTATIVAS PARA PANTALLAS CHICAS (CELULARES Y TABLETS)
   ========================================================================== */
@media (max-width: 991px) {
    /* Reducimos la altura del banner en celulares para que no ocupe toda la pantalla */
    header.pkp_structure_head {
        min-height: 180px !important;
    }

    /* El menú móvil se mantiene fluido debajo del banner de forma nativa */
    .pkp_navigation_primary_wrapper {
        position: relative !important;
        background-color: #002147 !important; /* Mantiene tu color azul de fondo */
        width: 100% !important;
        clear: both !important;
    }

    /* El menú de usuario se acomoda limpiamente en móviles sin encimarse */
    .pkp_navigation_user_wrapper {
        position: relative !important;
        float: none !important;
        display: block !important;
        background-color: #001533 !important; /* Un tono un poco más oscuro para diferenciarlo */
        padding: 5px 15px !important;
        text-align: right;
    }

    .pkp_navigation_user a, 
    .pkp_navigation_user .username {
        color: #ffffff !important;
        font-size: 13px !important;
    }
}

/* Cambiar el fondo de los submenús desplegables en general */
.pkp_navigation_user ul {
    background-color: #002147 !important;
    border: 1px solid #ffffff !important;
}


/* ==========================================================================
   2. CONFIGURACIÓN DEL CUERPO, CONTENIDO Y COMPONENTES
   ========================================================================== */

/* Justificación de los textos principales de los artículos */
.pkp_structure_main p {
    text-align: justify;
    overflow: hidden;
    padding: 0 25px; /* Evita que los párrafos toquen los bordes laterales */
}

/* Optimización visual del reproductor de audio en la página del artículo */
audio {
    width: 100%;
    max-width: 500px;
    display: block;
    margin: 10px 0;
}

/* Ocultar la tabla de contenidos (issue_toc) en páginas de índice específicas si aplica */
.page_index_journal .issue_toc {
    display: none !important;
}


/* ==========================================================================
   3. CONFIGURACIÓN DEL PIE DE PÁGINA (FOOTER)
   ========================================================================== */

/* Ocultar definitivamente la marca/logo nativo de OJS en el footer */
.pkp_brand_footer,
.pkp_structure_footer .pkp_brand_footer {
    display: none !important;
    visibility: hidden !important;
}