/*La fuente uaada solo esta disponible en dispositivos maxOS e ios*/
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif!important;
}

/*NAV*/
#headerNavigationContainer {
	position: fixed;
	width: 100%;
	z-index: 999999;
}
/*Fondo nav*/
.navbar, .header_view {
	background-image: unset!important;
}
.navbar-default, .header_view {
	background-color: #17499e;
	border-color: #17499e;
}
/*Logo*/
.navbar-brand {
	height: 100px;
}
.navbar-default {
	font-weight: 600;
}
/*Fondo de desplegable al pasar mouse*/
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
	background-color: #0778f4;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus, .header_view .navbar-nav>.open>a, .header_view .navbar-nav>.open>a:hover, .header_view .navbar-nav>.open>a:focus {
	background-color: unset;
}
.navbar-default .nav>li>a:hover, .navbar-default .nav>li>a:focus, .navbar-default .nav>li>a:active, .header_view .nav>li>a:hover, .header_view .nav>li>a:focus, .header_view .nav>li>a:active {
	background: unset;
}
/*Icono de menÃº*/
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus, .header_view .navbar-toggle:hover, .header_view .navbar-toggle:focus {
	background-color: #0778f4;
}


/*MAIN*/
main.pkp_structure_main .current_issue h2, 
main.pkp_structure_main .current_issue h2 small {
	text-transform: uppercase;
	font-weight: 700;
	color: #004b62;
	font-size: 32px;
}

/*Vista solo de inicio*/
.pkp_page_index main.pkp_structure_main {
	width: 100%;
	background-color: #f2f2f2;
	padding: 5rem;
}
.pkp_page_index .pkp_structure_content.container {
	width: 100%;
	padding-right: unset;
	padding-left: unset;
}

main.pkp_structure_main {
	margin-top: 15rem;
}
/*Sideber - Menu lateral derecho en vista inicio*/
.pkp_page_index #sidebar { 
	margin-top: 5rem;
	display: flex;
	justify-content: space-around;
	width: 100%;
}
/*Sideber general*/
#sidebar h2 { 
	font-size: 16px;
	font-weight: 600;
}
#sidebar .pkp_block .title { 
	background-color: unset;
	border: none;
}
#sidebar .pkp_block {
	border-color: transparent;
	border: 1px solid transparent;
	background-color: transparent;
}
#sidebar .pkp_block ul li {
	background-color: transparent;
	border: 1px solid transparent;
}


/*ARTICULOS EN CARD - Pagina inicio*/
:root {
  --card-gap: 1rem;
}
.issue-toc .sections .media-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--card-gap);
	align-items: stretch;
	margin: 0;
  padding: 0;
}
.article-summary.media {
	background: #FFFFFF;
	border-radius: 20px;
	padding: 20px;
	border: 1px solid #b4b5bb;
	transition: background 0.9s ease;
	flex: 0 1 calc(33.333% - (2 * var(--card-gap) / 3));
}
.article-summary.media:hover {
	background: #afc3e53e;
}
.article-summary.media .media-body .media-heading a {
	color: #004b62;
	font-weight: 700;
	text-decoration: none;
}
.media:first-child {
	margin-top: 2em;
}
.article-summary.media>.media-heading a:hover {
	color: #000032;
}
/* Keywords tabla de contenido Home */
.article-summary.media .keywords .keyword_links li {
  color: #ffffff;
  background: #17499e;
}
/*Botones galeradas*/
.btn-primary {
	background-color: #f9a326;
	color: #17499e;
	font-weight: 600;
	border-color: transparent;
}
.article-summary.media .media-body .btn-group a {
	margin: 0.5rem;
	border-radius: 10px!important;
}
.article-summary.media .media-body .btn-group a:hover {
	background-color: #17499e;
	color: #fff;
}

/*Boton ver todos los numeros*/
.current_issue .btn.btn-primary.read-more {
	margin-top: 3rem;
}

/*PAGINA DE CADA ARTICULO*/
.page.page_article .article-details h1 {
	color: #6a6a6a;
	font-weight: 700;
	border-bottom: unset;
}
/*Sideber - Menu lateral derecho en vista articulos*/
.pkp_page_article #sidebar { 
	margin-top: 40rem;
	border: 1px solid #d9d9d9;
	border-radius: 20px;
}
.pkp_page_article h2 { 
	font-size: 18px;
	color: #6a6a6a;
	text-transform: uppercase;
	font-weight: 700;
}
.pkp_page_article .article-main .authors .author { 
	font-size: 18px;
	color: #6a6a6a;
	text-transform: uppercase;
	font-weight: 700;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif!important;
}
/*Breadcrumb*/
.breadcrumb {
	background-color: #f2f2f2;
	border-radius: 20px;
	margin: 48px auto;
	border-radius: 24px;
}
.breadcrumb li a{
	text-decoration: none;
	font-weight: 600;
}
.breadcrumb>.active {
	color: #777;
}
.breadcrumb>li+li:before {
	padding: 0 5px;
	color: #f9a326;
	font-family: 'KlavikaBd', sans-serif;
	content: "///";
}

/********* FOOTER **********/ 
div footer{
	color: #fffbfa;
	background-color: #17499F;
	padding-top: 1rem;
	padding-left: 1rem;
	padding-right: 1rem;
}
div footer h4{
	color: #d18c2e;
}
.logo-footer a{
	margin: 0 .7rem;
}
.logo-footer a img {
	width: 80%;
	margin-top: 1.5rem;
}
.contenedor-bottom-footer{
	display: flex;
    flex-wrap: wrap;
}
.seccion1-footer, .seccion2-footer, .seccion3-footer, .seccion4-footer, .seccion5-footer, .seccion6-footer{
	flex: 1 0 0%;
	padding: 0 1rem;
}
.seccion3-footer div{
	display: block;
	margin-bottom: 1rem;
	border-bottom: 1px solid #d18c2e;
	padding-bottom: .5rem;
}
.seccion3-footer div a{
	text-decoration: none;
	color: unset;
}
.seccion3-footer div a:hover{
	color: #a3a09f;
}
.seccion6-footer {
	display: flex;
    flex-direction: row;
    justify-content: flex-end;
	align-items: center;
}
.seccion6-footer div{
	margin-right: 2rem;
}
.seccion6-footer div a{
	text-decoration: none;
	color: #fffbfa;
}
.seccion6-footer div a:hover{
	color: #a3a09f;
}
#seccion-bottom{
	border-top: #504a4a solid 1px;
	margin-top: 4rem;
}
/*iconos rrss en footer*/
.icon-rrss {
    display: flex;
    justify-content: center;
    padding: 1rem;
}
.icon-rrss a {
    margin: 0 0.5rem;
}
.icon-rrss a img {
    width: 80%;
}

	/*Footer que viene en theme por defecto*/
 /*El theme boostrap cambia el html del footer*/
 footer .container {
	padding-right: unset;
	padding-left: unset;
	margin-right: unset;
	margin-left: unset;
	width: 100%;
}
footer .row {
	margin-right: 0;
	margin-left: 0;
}
footer .col-md-2 {
	display: none;
}
footer .col-md-10 {
	width: 100%;
	padding: 0;
}
footer[role="contentinfo"] {
	padding: 0;
}
/******** FIN FOOTER **********/ 


@media (min-width: 992px) {
	/*ENLACES NAV*/
	#nav-menu {
		margin-top: 2.5rem;
	}
}

@media (max-width: 992px) {
	/*Sideber - Menu lateral derecho en vista articulos*/
.pkp_page_article #sidebar { 
	margin-top: 2rem;
	}
	.pkp_page_article .pkp_structure_main  {
		width: 100%;
	}
	.pkp_page_article .btn-primary {
    width: 200px;
    border-radius: 15px;
	}
}

@media (max-width: 768px) {
	/*CARDS ARTICULOS*/
	.article-summary.media {
		flex: 0 1 calc(50% - (2 * var(--card-gap) / 3));
	}
	/*BLOQUE LATERAL*/
	.pkp_page_index  #sidebar { 
		flex-direction: column;
	}
}

@media (max-width: 576px) {
	/*CARDS ARTICULOS*/
	.article-summary.media {
		flex: 0 1 calc(100% - (2 * var(--card-gap) / 3));
	}

		/* FOOTER */
	.logo-footer a img {
		width: 100%;
	}
	.seccion1-footer, .seccion2-footer, .seccion3-footer, .seccion4-footer, .seccion5-footer{
		flex: 1 0 100%;
	}
	.seccion5-footer{
		padding: unset;
	}
	.seccion6-footer{
		width: 100%;
		padding: unset;
	}
	.seccion6-footer div {
		margin: 0 auto;
	}
	.seccion1-footer, .seccion2-footer, .seccion3-footer, .seccion4-footer{
		margin-bottom: 3rem;
	}
	#seccion-bottom .contenedor-bottom-footer {
		flex-direction: column;
		align-items: center;
		padding-bottom: 1rem;
	}
	.contenedor-footer {
		text-align: center;
	}

	/* FIN FOOTER */

}


/*========== HERO SLIDER STYLES ==========*/
#hero-slider {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 500px;
    margin-top: 15rem; /* Para que no se superponga con el nav fijo */
    overflow: hidden;
}

/* Eliminar estilos por defecto del carousel */
#hero-slider .carousel-control {
    background: none !important;
    background-image: none !important;
    filter: none !important;
    box-shadow: none !important;
}

#hero-slider .carousel-control:hover,
#hero-slider .carousel-control:focus,
#hero-slider .carousel-control:active {
    background: none !important;
    background-image: none !important;
    filter: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ConfiguraciÃ³n personalizada del carousel */
.custom-carousel .carousel-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.custom-carousel .item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.custom-carousel .item.active {
    opacity: 1;
    position: relative;
}

/* Backgrounds para cada slide */
.slide-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.slide-background.slide-1 {
    background-image: linear-gradient(135deg, rgba(23, 73, 158, 0.8), rgba(249, 163, 38, 0.8)), 
                      url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=1920&h=800&fit=crop');
}

.slide-background.slide-2 {
    background-image: linear-gradient(135deg, rgba(23, 73, 158, 0.8), rgba(249, 163, 38, 0.8)), 
                      url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=1920&h=800&fit=crop');
}

.slide-background.slide-3 {
    background-image: linear-gradient(135deg, rgba(23, 73, 158, 0.8), rgba(249, 163, 38, 0.8)), 
                      url('https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=1920&h=800&fit=crop');
}

/* Contenido del carousel */
.carousel-inner {
    height: 100%;
}

.carousel-inner .item {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Caption styling */
.carousel-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 3rem 2rem;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 800px;
    width: 90%;
    z-index: 10;
}

.slide-content h2 {
    color: #ffffff;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.slide-content p {
    color: #ffffff;
    font-size: 1.3rem;
    margin-bottom: 2rem;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* BotÃ³n del slide */
.btn-slide-primary {
    background-color: #f9a326;
    color: #17499e;
    font-weight: 600;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(249, 163, 38, 0.3);
}

.btn-slide-primary:hover {
    background-color: #17499e;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(23, 73, 158, 0.4);
    text-decoration: none;
}

/* Indicadores */
.carousel-indicators {
    bottom: 30px;
    z-index: 15;
}

.carousel-indicators li {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: 2px solid #f9a326;
    margin: 0 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-indicators .active {
    background-color: #f9a326;
    transform: scale(1.2);
}

/* Controles de navegaciÃ³n */
.carousel-control {
    background: none !important;
    background-image: none !important;
    filter: none !important;
    width: 60px;
    height: 60px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    border: none;
    outline: none;
    box-shadow: none !important;
}

.carousel-control:hover,
.carousel-control:focus,
.carousel-control:active {
    background: none !important;
    background-image: none !important;
    filter: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.carousel-control.left {
    left: 30px;
}

.carousel-control.right {
    right: 30px;
}

.carousel-control .glyphicon {
    font-size: 24px;
    color: #ffffff;
    background: rgba(23, 73, 158, 0.8);
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    transition: all 0.3s ease;
    text-shadow: none;
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-control:hover .glyphicon {
    background: #f9a326;
    color: #17499e;
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(249, 163, 38, 0.4);
}

/* Ajuste del main content */
.pkp_page_index main.pkp_structure_main {
    margin-top: 0; /* Reset porque el slider ya tiene el margin-top */
}

/* Responsive Design */
@media (max-width: 768px) {
    #hero-slider {
        height: 50vh;
        min-height: 400px;
        margin-top: 12rem;
    }
    
    .slide-content h2 {
        font-size: 2.2rem;
    }
    
    .slide-content p {
        font-size: 1.1rem;
    }
    
    .carousel-caption {
        padding: 2rem 1rem;
        width: 95%;
    }
    
    .carousel-control {
        width: 45px;
        height: 45px;
    }
    
    .carousel-control.left {
        left: 15px;
    }
    
    .carousel-control.right {
        right: 15px;
    }
    
    .carousel-control .glyphicon {
        width: 45px;
        height: 45px;
        line-height: 45px;
        font-size: 18px;
    }
}

@media (max-width: 576px) {
    #hero-slider {
        height: 45vh;
        min-height: 350px;
        margin-top: 20rem;
    }
    
    .slide-content h2 {
        font-size: 1.8rem;
    }
    
    .slide-content p {
        font-size: 1rem;
    }
    
    .carousel-caption {
        padding: 1.5rem 1rem;
    }
    
    .btn-slide-primary {
        padding: 10px 20px;
        font-size: 1rem;
    }
}
/*========== FIN HERO SLIDER STYLES ==========*/

/*========== Estilos Top Bar ==========*/

.top-bar-custom {
	position: fixed; 
	top: 0; 
	width: 100%; 
	z-index: 1000000;
	height: 40px;
  background-color: #f5f5f5;
  padding: 8px 12px;
  text-align: left;
  font-size: 10px;
  border-bottom: 1px solid #ccc;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#headerNavigationContainer {
  margin-top: 40px; /* mismo valor que el height de la barra */
}

.top-bar-custom .top-label {
  margin-right: 8px;
  font-weight: 600;
  color: #17499e;
}

.top-bar-custom .top-btn {
  display: inline-block;
  margin-right: 8px;
  padding: 4px 10px;
  background-color: #f9a326;
  color: #17499e;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.top-bar-custom .top-btn:hover {
  background-color: #17499e;
  color: #fff;
}

.top-bar-custom a  {
    text-decoration: none;
}
.top-bar-custom a img {
    filter: invert(100%);
}

/* Responsive: ocultar en mÃ³viles si se desea */
@media (max-width: 576px) {
  .top-bar-custom {
    font-size: 9px;
    padding: 6px 8px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
  }

  .top-bar-custom .top-label {
    margin-right: 6px;
    font-size: 12px;
    font-weight: 600;
  }

  .top-bar-custom .top-btn {
    padding: 3px 8px;
    margin-right: 6px;
    font-size: 12px;
    border-radius: 6px;
    flex-shrink: 0;
  }
}


/*========== FIN Estilos Top Bar ==========*/

