/*
 * themes/pragma/css/header.css
 *
 * Copyright (c) 2023 Brayan Forero
 * Copyright (c) 2023 Metabiblioteca
 *
 */

   /* ============================================================
   BASE STYLES
   ============================================================ */

   html {
     overflow-x: hidden;
   }

   .main-wrap {
     width: 100%;
     margin: auto;
   }

   /* ============================================================
   HEADER LAYOUT
   ============================================================ */

   .main-header {
     display: flex;
     flex-direction: column;
     padding-top: 0;
     padding-bottom: 0;
     font-family: "Open Sans", sans-serif;
     font-weight: 300;
     font-size: 17px;
     background-color: var(--blanco);
   }

   header.container-fluid.main-header {
     background-color: var(--color01);
   }

   /* ============================================================
   LOGO STYLES
   ============================================================ */

   /* Logo general */
   img.logo_u {
     width: 55%;
   }

   /* --- Logo en el menú principal --- */
   .main-menu__logo img,
   .main-menu__title img {
     max-height: 100% !important;
   }

   /* --- Contenedores del logo y título --- */
   .main-menu__logo,
   .main-menu__title {
     padding-top: 0 !important;
   }

   .main-menu__title {
     display: flex;
     justify-content: left;
   }

   /* --- Animaciones y tamaños del logo --- */
   .logo_head {
     transition: width 0.4s ease;
   }

   .small-logo {
     width: 200px;
     height: auto;
   }

   .logo_head.large {
     width: 100%;
     height: auto;
   }

   /* --- Tamaños específicos de logos por revista --- */
   .Negonotas img.img-fluid.logo_head {
     width: 180px !important;
   }

   .\#ashtag img.img-fluid.logo_head {
     width: 200px !important;
   }

   .Opinión img.img-fluid.logo_head {
     width: 300px !important;
   }

   /* ============================================================
   NAVIGATION - PRIMARY MENU
   ============================================================ */

   .main-menu__nav {
     display: block;
     background: var(--blanco);
     z-index: 1050;
     position: absolute;
     top: 258px;
     left: 0;
     width: 100%;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }

   ul#navigationPrimary {
     display: ruby;
     width: 100%;
     text-align: center;
     margin: 5px;
     justify-content: center;
     list-style: none;
   }

   ul#navigationPrimary li a {
     margin: 9px;
     padding: 0 !important;
     border: 0 !important;
     text-align: center;
     font-size: 17px;
   }

   div#mainMenu {
     justify-content: center;
   }

   /* ============================================================
   NAVIGATION - USER MENU
   ============================================================ */

   .menu_user_nav {
     background-color: var(--color02);
     padding-top: 5px !important;
     display: flex;
     justify-content: flex-end;
   }

   .row.head_m {
     width: 100%;
   }

   .col-md-12.nav_s {
     width: auto;
     /* permite que el div se ajuste al contenido */
     margin: 0 auto;
     /* centra el div dentro de su contenedor */
     height: 35px;
     display: flex;
     justify-content: center;
     align-items: center;
   }

   ul#navigationUser {
     text-align: end;
     display: block;
     right: 0;
   }

   ul#navigationUser a {
     font-size: 17px;
     font-weight: 500;
     padding: 0 !important;
     border: 0 !important;
   }

   ul#navigationUser a.main-menu__nav-link {
     margin-left: 1px;
     margin-right: 3px;
   }

   /* ============================================================
   DROPDOWN MENUS
   ============================================================ */

   .dropdown-menu {
     --bs-dropdown-link-active-bg: var(--color02) !important;
     z-index: 99999;
   }

   ul.dropdown-menu.show {
     border-radius: 0px;
     border: 0;
   }

   .dropdown-menu .dropdown-item a.active,
   .dropdown-menu .dropdown-item a:active,
   .dropdown-menu .dropdown-item a:hover,
   .dropdown-menu .dropdown-item a:focus,
   ul#navigationPrimary li a:hover {
     background-color: transparent !important;
   }

   .dropdown-item a:hover {
     color: var(--color07) !important;
   }

   /* ============================================================
   HAMBURGER MENU (MOBILE)
   ============================================================ */

   /* --- Botón de hamburguesa --- */
   button.navbar-toggler.hamburger {
     background-color: var(--color01);
     margin-top: 10px !important;
     margin-bottom: 7px !important;
     border-radius: 8px !important;
     border: 1px solid var(--color02);
     padding: 10px !important;
     margin-left: 10px !important;
     text-align: left;
     z-index: 1100;
     position: relative;
   }

   .search-bar-container {
     padding-bottom: 20px;
   }

   /* --- Texto dentro del botón --- */
   span.hamburger__wrapper {
     color: #fff;
     font-size: 17px;
   }

   .navbar-collapse.main-menu__nav.collapse.show {
     border-bottom: 1px solid var(--color03);
   }

   /* ============================================================
   LANGUAGE MENU
   ============================================================ */

   /* --- Contenedor del menú de idiomas --- */
   .dropdown.lang_menu {
     font-size: 17px;
     font-weight: 500;
     float: inline-end;
     position: relative;
     padding-right: 2px;
     margin-left: 3px;
   }

   .dropdown.lang_menu ul.dropdown-menu.show a {
     font-size: 17px;
     font-weight: 500;
   }

   /* --- Ítems de idioma con banderas --- */
   li.leng_item {
     list-style: none;
     margin-top: 10px;
   }

   li.leng_item a {
     display: inline-flex;
   }

   li.leng_item a.en {
     content: url(/plugins/themes/pragma/resources/images/iconos/eng.png);
     width: 18px;
   }

   li.leng_item a.es {
     content: url(/plugins/themes/pragma/resources/images/iconos/esp.png);
     width: 18px;
   }

   /* --- Ocultar ícono de campana en el menú de idioma --- */
   a#dropdownMenuLink {
     font-size: 17px;
   }

   a#dropdownMenuLink i.fi.fi-rr-bell {
     display: none;
   }

   /* ============================================================
   SEARCH BAR
   ============================================================ */

   /* --- Formulario de búsqueda --- */
   form.search_bar {
     display: inline-flex;
     width: 100%;
   }

   #btn_search_voice {
     border: 0px solid #ffffff !important;
     background: transparent !important;
   }

   .form-control {
     margin-bottom: 0px !important;
   }

   /* --- Botón de búsqueda --- */
   form.search_bar button.btn.btn-light {
     font-size: 17px;
     color: var(--color01);
     border-radius: 0px;
     background-color: rgba(255, 255, 255, 0.7);
     width: 70px;
     border: 0px;
   }

   /* --- Campo de entrada de búsqueda --- */
   input.search-input-tag.form-control {
     border: 0px;
     border-radius: 0px !important;
     padding: 10px;
     background-color: rgba(255, 255, 255, 0.7);
   }

   .search_custom {
     /*background-color: rgba(255, 255, 255, 0.7);*/
     background-color: transparent;
     /*border: 3px solid var(--color05);*/
     border-radius: 0px;
   }

   div#search {
     padding: 0px;
   }

   span.search-bar.hvr-push {
     font-size: 22px !important;
   }

   /* ============================================================
   NAVIGATION CONTAINER
   ============================================================ */

   .container.nav_sup_contenedor {
     max-width: 100% !important;
     background-color: transparent;
   }

   .nav_s {
     display: flex;
     align-items: center;
   }

   .nav_s a {
     color: var(--color01) !important;
   }

   /*span.dropdown-toggle {
     color: var(--color05) !important;
   }*/

   /* ============================================================
   MISCELLANEOUS HEADER STYLES
   ============================================================ */

   /* --- Enlaces generales --- */
   a {
     color: var(--color01);
   }

   .row.menu_head_a i.fi.fi-sr-home {
     color: var(--color05);
   }

   .row.menu_head_a .col-2 {
     padding-top: 3px;
   }

   a.home_t {
     font-size: 17px;
     margin-left: 10px;
     color: var(--color01);
   }

   .row.menu_head_a a.home_t:hover,
   a.home_t i:hover {
     color: #fff !important;
   }

   header.offset-md-2.col-md-8.galley__header h1 {
     font-size: 16px;
     color: var(--color01);
   }

   /* --- Título de la revista en el encabezado --- */
   h6.journal-title a {
     position: relative;
     display: inline-block;
     text-decoration: none;
     color: var(--color01);
     font-weight: 800;
     line-height: 1.3;
     font-family: "Open Sans", sans-serif;
     font-size: 20px !important;
     font-style: italic;
   }

   h6.journal-title {
     height: 90px;
   }

   /* --- Título "Publicaciones" --- */
   span.publicaciones-title {
     font-family: "Open Sans", sans-serif;
     font-weight: 900;
     color: var(--color03);
     font-style: italic;
   }

   /* --- Contador de tareas (Dashboard) --- */
   span.task_count {
     /*background-color: var(--color05);*/
     border-radius: 400px;
     font-weight: 500;
     color: #fff;
     padding: 0px;
     position: relative;
     top: 0px;
     right: 2px;
   }

   /* ============================================================
   MEDIA QUERIES - MOBILE (max-width: 768px)
   ============================================================ */

   @media (max-width: 768px) {
     .navbar-toggler {
       display: block;
     }

     .main-menu__nav {
       display: none;
     }

     /* Mostrar menú de navegación cuando se expande en móvil */

     .main-menu__nav.collapse.show {
       display: block;
     }

     .logo_head {
       display: block !important;
       margin: auto !important;
     }

     /* Ajustes de espaciado para el menú de usuario en móvil */
     .menu_user_nav {
       margin-top: 0px !important;
       margin-bottom: 0px;
     }

     ul#navigationPrimary {
       display: block;
       width: 100%;
       text-align: center;
     }


     ul#navigationUser {
       position: initial !important;
     }
   }

   @media only screen and (max-width: 600px) {
     nav.navbar.navbar-expand-lg.main-menu ul#navigationPrimary li {
       margin-bottom: 12px;
       border-bottom: 1px solid #ebebeb;
     }

   }

   /* ============================================================
   MEDIA QUERIES - DESKTOP (min-width: 769px+)
   ============================================================ */

   @media (min-width: 769px) {

     /* Ocultar el botón de hamburguesa en escritorio */
     .navbar-toggler {
       display: none;
     }

     .main-menu__nav {
       display: block !important;
     }
   }

   @media (min-width: 992px) {
     .navbar-expand-lg {
       flex-wrap: wrap !important;
     }

     /* Estilos del menú de navegación para escritorio */
     .main-menu__nav {
       position: static;
       background: none;
       box-shadow: none;
       border-radius: 0;
       top: auto;
     }
   }

   /* ============================================================
   SPECIFIC PAGE & CONTEXT STYLES
   ============================================================ */

   /* --- Estilos para el Portal de Revistas y páginas de información --- */
   .PORTAL.DE.REVISTAS.UPTC img.img-fluid.logo_head,
   .Open.Journal.Systems img.img-fluid.logo_head,
   .page_procesos.op_index .container.nav_sup_contenedor .col-md-3,
   .page_intedgridad.op_index .container.nav_sup_contenedor .col-md-3,
   .page_Blog.op_index .container.nav_sup_contenedor .col-md-3 {
     width: 100%;
   }

   .PORTAL.DE.REVISTAS.UPTC h1.main-menu__title,
   .Open.Journal.Systems h1.main-menu__title,
   .page_procesos.op_index .container.nav_sup_contenedor h1.main-menu__title,
   .page_intedgridad.op_index .container.nav_sup_contenedor h1.main-menu__title,
   .page_Blog.op_index .container.nav_sup_contenedor h1.main-menu__title {
     position: initial !important;
     margin: 0px;
     display: block;
   }

   .PORTAL.DE.REVISTAS.UPTC .row.menu_head_a,
   .Open.Journal.Systems .row.menu_head_a,
   .page_procesos .op_index .container.nav_sup_contenedor .row.menu_head_a,
   .page_intedgridad .op_index .container.nav_sup_contenedor .row.menu_head_a,
   .page_Blog .op_index .container.nav_sup_contenedor .row.menu_head_a {
     position: absolute;
     width: 100%;
     background-color: transparent;
   }

   @media (max-width: 768px) {
     .PORTAL.DE.REVISTAS.UPTC .row.menu_head_a {
       position: relative !important;
       background-color: var(--color02) !important;
       width: 100% !important;
     }
   }

   .PORTAL.DE.REVISTAS.UPTC .nav_sup_contenedor .dropdown-toggle,
   .Open.Journal.Systems .nav_sup_contenedor .dropdown-toggle {
     color: var(--color01) !important;
   }

   /* --- Estilos para Publicaciones Seriadas IDEP --- */
   header.container-fluid.main-header.Publicaciones.Seriadas.IDEP img.img-fluid.logo_head {
     width: 350px;
   }

   /* ============================================================
   SPECIFIC PAGE STYLES - SEARCH
   ============================================================ */

   body.search div#mainMenu {
     margin-top: 55px;
   }

   body.search .row.menu_head_a {
     z-index: 9;
   }

   /* ============================================================
   USER AUTHENTICATION & DASHBOARD
   ============================================================ */

   /* --- Enlaces de Registro e Inicio de Sesión --- */
   li.nmi_type_user_register.main-menu__nav-item a.main-menu__nav-link {
     color: var(--color02) !important;
   }

   li.nmi_type_user_login.main-menu__nav-item a.main-menu__nav-link {
     color: var(--color02) !important;
   }

   ul#navigationUser li.nmi_type_user_register.main-menu__nav-item a {
     color: #000 !important;
   }

   ul#navigationUser li.nmi_type_user_login.main-menu__nav-item a {
     color: #000 !important;
   }

   /* --- Menú desplegable del Dashboard --- */
   li.nmi_type_user_dashboard.main-menu__nav-item.dropdown {
     padding: 1px;
   }

   /* --- Fondo Header --- */



   header.container-fluid.main-header {
     position: relative;
     /* Necesario para que el pseudoelemento se posicione respecto al header */
     z-index: 1;
     /* Asegura que el contenido quede por encima */
   }

   div#issueCarousel {
     background-image: url('/plugins/themes/pragma/resources/images/carrusel_a.jpg');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-color: var(--color02);
     background-blend-mode: multiply;
   }

   header.container-fluid.main-header::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url("/plugins/themes/pragma/resources/images/cenace_head.png");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     opacity: 0.4;
     /* Controla la transparencia si quieres que no tape el contenido */
     z-index: -1;
     /* Envía el fondo detrás del contenido */
   }

   .menu_head_b {
     background-color: var(--blanco);
   }

   .menu_head_b {
     border-bottom: 1px solid #d9d2d2;
     padding: 5px;
   }

   ul#navigationPrimary li {
     padding: 15px;
   }