@font-face {
	font-family: 'Segoe UI This';
	src: url('/web/css/fonts/SegoeUIThis-BoldItalic.woff2') format('woff2'),
		url('/web/css/fonts/SegoeUIThis-BoldItalic.woff') format('woff'),
		url('/web/css/fonts/SegoeUIThis-BoldItalic.ttf') format('truetype');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Segoe UI This';
	src: url('/web/css/fonts/SegoeUIThis-Italic.woff2') format('woff2'),
		url('/web/css/fonts/SegoeUIThis-Italic.woff') format('woff'),
		url('/web/css/fonts/SegoeUIThis-Italic.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Segoe UI This';
	src: url('/web/css/fonts/SegoeUIThis-Bold.woff2') format('woff2'),
		url('/web/css/fonts/SegoeUIThis-Bold.woff') format('woff'),
		url('/web/css/fonts/SegoeUIThis-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Segoe UI This';
	src: url('/web/css/fonts/SegoeUIThis.woff2') format('woff2'),
		url('/web/css/fonts/SegoeUIThis.woff') format('woff'),
		url('/web/css/fonts/SegoeUIThis.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Segoe UI';
	src: url('/web/css/fonts/SegoeUI-Semibold.woff2') format('woff2'),
		url('/web/css/fonts/SegoeUI-Semibold.woff') format('woff'),
		url('/web/css/fonts/SegoeUI-Semibold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

html {
	font-family: 'Segoe UI This';
	/* 	font-size: 2em; */
}
/* Variables y estilos base */
body {
	font-family: 'Segoe UI This' !important;
	font-weight: normal;
	font-style: normal;
	font-size: 1.2em;
	top: 5em;
	color: #000000;

	background-image: url('/platform/templates/assets/images/background.png');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	min-height: 100vh;
}

/* Capa semitransparente para mejorar legibilidad */
/* body::after {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.1);
	z-index: -1;
}
 */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Segoe UI This' !important;
	font-weight: normal;
	font-style: normal;
	color: #7F7F7F;
}

b, strong {
	font-family: 'Segoe UI This' !important;
	font-weight: bold;
	font-style: normal;
	color: #444444;
}

a {
	font-family: 'Segoe UI This' !important;
	font-weight: bold;
	font-style: normal;
}

/*******************************/
/*********** BUTTONS ***********/
/*******************************/
.btn {
	font-family: 'Segoe UI' !important;
	font-weight: 600;
	font-style: normal;
	font-size: 24px;
	text-transform: initial !important;
}

.btn-link {
	font-weight: bold !important;
	text-transform: initial !important;
	font-size: 18px;
	color: #80c352;
}

.btn-outline-success {
	border-radius: 15px !important;
	text-transform: initial !important;
	width: 100% !important;
	color: #80C352 !important;
	border-color: #80C352 !important;
}

/*******************************/
/*********** SHADOWS ***********/
/*******************************/
/* --- Sombras Base (Intensidad) --- */
.shadow-none    { box-shadow: none !important; }
.shadow-sm      { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }
.shadow         { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
.shadow-lg      { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }
.shadow-inner   { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05) !important; }

/* --- Sombras Direccionales Simples --- */
.shadow-top     { box-shadow: 0 -4px 6px -2px rgba(0, 0, 0, 0.1) !important; }
.shadow-bottom  { box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.1) !important; }
.shadow-left    { box-shadow: -4px 0 6px -2px rgba(0, 0, 0, 0.1) !important; }
.shadow-right   { box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.1) !important; }

/* --- Combinaciones de 2 Direcciones --- */
.shadow-top-bottom {
  box-shadow: 
	0 -4px 6px -2px rgba(0, 0, 0, 0.1),
	0 4px 6px -2px rgba(0, 0, 0, 0.1) !important;
}
.shadow-left-right {
  box-shadow: 
	-4px 0 6px -2px rgba(0, 0, 0, 0.1),
	4px 0 6px -2px rgba(0, 0, 0, 0.1) !important;
}
.shadow-top-left {
  box-shadow: 
	0 -4px 6px -2px rgba(0, 0, 0, 0.1),
	-4px 0 6px -2px rgba(0, 0, 0, 0.1) !important;
}
.shadow-top-right {
  box-shadow: 
	0 -4px 6px -2px rgba(0, 0, 0, 0.1),
	4px 0 6px -2px rgba(0, 0, 0, 0.1) !important;
}
.shadow-bottom-left {
  box-shadow: 
	0 4px 6px -2px rgba(0, 0, 0, 0.1),
	-4px 0 6px -2px rgba(0, 0, 0, 0.1) !important;
}
.shadow-bottom-right {
  box-shadow: 
	0 4px 6px -2px rgba(0, 0, 0, 0.1),
	4px 0 6px -2px rgba(0, 0, 0, 0.1) !important;
}

/* --- Combinaciones de 3 Direcciones --- */
.shadow-top-bottom-left {
  box-shadow: 
	0 -4px 6px -2px rgba(0, 0, 0, 0.1),
	0 4px 6px -2px rgba(0, 0, 0, 0.1),
	-4px 0 6px -2px rgba(0, 0, 0, 0.1) !important;
}
.shadow-top-bottom-right {
  box-shadow: 
	0 -4px 6px -2px rgba(0, 0, 0, 0.1),
	0 4px 6px -2px rgba(0, 0, 0, 0.1),
	4px 0 6px -2px rgba(0, 0, 0, 0.1) !important;
}
.shadow-top-left-right {
  box-shadow: 
	0 -4px 6px -2px rgba(0, 0, 0, 0.1),
	-4px 0 6px -2px rgba(0, 0, 0, 0.1),
	4px 0 6px -2px rgba(0, 0, 0, 0.1) !important;
}
.shadow-bottom-left-right {
  box-shadow: 
	0 4px 6px -2px rgba(0, 0, 0, 0.1),
	-4px 0 6px -2px rgba(0, 0, 0, 0.1),
	4px 0 6px -2px rgba(0, 0, 0, 0.1) !important;
}

/* --- Sombra en las 4 Direcciones (equivalente a .shadow) --- */
.shadow-all {
  box-shadow: 
	0 -4px 6px -2px rgba(0, 0, 0, 0.1),
	0 4px 6px -2px rgba(0, 0, 0, 0.1),
	-4px 0 6px -2px rgba(0, 0, 0, 0.1),
	4px 0 6px -2px rgba(0, 0, 0, 0.1) !important;
}

/* --- Variantes con Intensidad (lg/sm) --- */
.shadow-top-lg      { box-shadow: 0 -8px 12px -4px rgba(0, 0, 0, 0.15) !important; }
.shadow-bottom-sm   { box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.05) !important; }
/* (Agrega todas las combinaciones necesarias...) */

/******************************/
/*********** COLORS ***********/
/******************************/
.bg-cencade-lime {
	background-color: #E9F2DF;
}

/******************************/
/*********** BANNER ***********/
/******************************/

/* Animaciones */
@keyframes underline {
	from { width: 0; }
	to { width: 100%; }
}

/* Navbar principal */
.navbar {
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	padding: 0.5rem 1rem;
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 1030;
}

.navbar-brand {
	font-weight: 600;
	display: flex;
	align-items: center;  /* Centrado vertical */
	margin-right: auto;   /* Empuja todo lo demás a la derecha */
	height: 100%;         /* Toma toda la altura del navbar */
	padding: 0.5rem 2rem; /* Ajuste de padding vertical */
}

.navbar-brand img {
	height: 2rem;  /* Altura consistente */
	max-height: 100%;
	width: auto;   /* Mantiene proporciones */
}

/* Estilo base del enlace */
.nav-link {
	position: relative;
	margin: 0 10px;
	padding: 10px 0;
}

/* Subrayado SOLO para el elemento actual (clase .current) */
.nav-item.current .nav-link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #28a745;
	animation: underline 0.3s ease;
}

/* Efecto hover para TODOS los items del menú */
.nav-item .nav-link:hover::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #28a745;
	animation: underline 0.3s ease;
}

/* Opcional: Estilo diferente para el item actual (más transparente) */
.nav-item.current .nav-link::after {
	opacity: 0.5;
}

/* Estilos para el dropdown de usuario (sin efectos hover) */
.user-dropdown-portrait .nav-link::after,
.user-dropdown-portrait .nav-link:hover::after,
#userDropdownMovil:hover::after,
#userDropdownMovil:focus::after,
.notifications-dropdown .nav-link::after {
	display: none !important;
}

.user-dropdown .nav-link::after,
.user-dropdown .nav-link:hover::after,
#userDropdown:hover::after,
#userDropdown:focus::after,
.notifications-dropdown .nav-link::after {
	display: none !important;
}

.user-dropdown .nav-link:hover,
.user-dropdown-wrapper .nav-link:hover,
.user-dropdown-wrapper .nav-link:focus,
li.user-dropdown > a.nav-link#userDropdown:hover,
li.user-dropdown > a.nav-link#userDropdown:focus,
.no-hover-effect:hover {
	background-color: transparent !important;
	text-decoration: none !important;
}

.user-dropdown-portrait .nav-link:hover,
.user-dropdown-portrait-wrapper .nav-link:hover,
.user-dropdown-portrait-wrapper .nav-link:focus,
li.user-dropdown-portrait > a.nav-link#userDropdownMovil:hover,
li.user-dropdown-portrait > a.nav-link#userDropdownMovil:focus,
.no-hover-effect:hover {
	background-color: transparent !important;
	text-decoration: none !important;
}

.user-dropdown .nav-link:hover img.user-avatar,
li.user-dropdown > a.nav-link#userDropdown:hover img.user-avatar {
	transform: none !important;
	filter: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
}

.user-dropdown-portrait .nav-link:hover img.user-avatar,
li.user-dropdown-portrait > a.nav-link#userDropdownMovil:hover img.user-avatar {
	transform: none !important;
	filter: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
}

/* Search container */
.search-container {
	position: relative;
	margin-right: 15px;
}

.search-input {
	width: 0;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	border: none;
	border-radius: 20px;
	padding: 5px 15px;
	background-color: #f8f9fa;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.search-input.active {
	width: 200px;
	opacity: 1;
	visibility: visible;
	padding: 5px 15px;
	right: -1em;
	border: 1px solid #7f7f7f;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.search-icon {
	position: absolute;
	right: 0px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	z-index: 10;
}

/* Avatar y notificaciones */
.user-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
}

.notification-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	font-size: 10px;
	background: #dc3545;
	color: white;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Resultados de búsqueda */
.search-result-item {
	display: flex;
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #eee;
}

.search-result-img {
	width: 80px;
	height: 60px;
	object-fit: cover;
	margin-right: 15px;
	border-radius: 4px;
}

.search-result-content {
	flex: 1;
}

/* Dropdowns comunes */
.notifications-dropdown,
.user-dropdown {
	position: static; /* Importante para el comportamiento responsive */
}

.notifications-dropdown .dropdown-item,
.user-dropdown .dropdown-item {
	font-size: 1.1rem !important;
}

.notifications-dropdown .dropdown-menu,
.user-dropdown .dropdown-menu,
.user-dropdown-menu {
	position: absolute;
	right: 15px;
	left: auto;
	top: 100%;
	z-index: 1050;
	margin-top: 0;
	box-shadow: 0 10px 15px 0 rgba(0,0,0,0.2);
	background: white;
	border: 1px solid #D5D4D4 !important;
	border-radius: 0.55rem !important;
}

.user-dropdown-menu {
	min-width: 220px;
	display: none;
	margin-top: 8px;
}

.user-dropdown-menu.show {
	display: block;
}

/* Dropdown específico de notificaciones */
.dropdown-notifications {
	min-width: 300px;
	padding: 0;
	top: 2em !important;
}

.dropdown-notifications .dropdown-header {
	padding: 10px 15px;
	background-color: #f8f9fa;
	border-bottom: 1px solid #e9ecef;
}

.dropdown-notifications .dropdown-item {
	padding: 10px 15px;
	border-bottom: 1px solid #e9ecef;
}

.dropdown-notifications .dropdown-item:last-child {
	border-bottom: none;
}

/* Dropdown específico de usuario */
.dropdown-user {
	min-width: 220px;
	padding: 0;
	top: 2em !important;
}

.dropdown-user .dropdown-item {
	padding: 8px 20px;
}

.dropdown-user .dropdown-divider {
	border-top: 1.5px solid #888482;
	margin: 0.2rem 1rem 0.2rem 1rem;
}

/* Media queries */
@media (max-width: 991.98px) {
	.desktop-only {
		display: none !important;
	}
	
	.notifications-dropdown .dropdown-menu,
	.user-dropdown .dropdown-menu {
		right: 10px;
		left: auto;
		width: auto;
	}
	
	.notifications-dropdown .dropdown-menu {
		min-width: 280px;
	}
	
	.user-dropdown .dropdown-menu {
		min-width: 200px;
	}
}

@media (min-width: 992px) {
	.mobile-only {
		display: none !important;
	}
}

@media (max-width: 575.98px) {
	.notifications-dropdown .dropdown-menu,
	.user-dropdown .dropdown-menu {
		position: fixed;
		left: 10px;
		right: 10px;
		width: calc(100% - 20px);
		max-height: 70vh;
		overflow-y: auto;
	}
}

/* Estilos específicos para portrait */
@media (orientation: portrait) and (max-width: 768px) {
	body {
		top: 4em;
	}
	.navbar-brand {
		font-weight: 600;
		display: flex;
		align-items: center;  /* Centrado vertical */
		margin-right: auto;   /* Empuja todo lo demás a la derecha */
		height: 100%;         /* Toma toda la altura del navbar */
		padding: 0.5rem 0;    /* Ajuste de padding vertical */
	}

	.navbar-brand img {
		height: 2rem;  /* Altura consistente */
		max-height: 100%;
		width: auto;   /* Mantiene proporciones */
	}

	.user-dropdown-portrait {
		display: block !important;
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
	}

	#userDropdownMovil {
		font-size: 1.5em;
		color: rgba(0, 0, 0, 0.5);
	}

	.dropdown-user {
		position: fixed;
		right: 20px;
		top: 60px;
		z-index: 1050;
	}
}

@media (orientation: landscape), (min-width: 769px) {
	.user-dropdown-portrait {
		display: none !important;
	}
}

/* Centrar el modal verticalmente solo cuando está activo */
.modal.fade.show {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* Asegurar que el modal no se muestre antes del click */
.modal:not(.show) {
	display: none !important;
}

/* Estilo para el modal-dialog centrado */
.modal-dialog {
	margin: 0 auto;
	max-width: 800px; /* Ajusta según necesites */
	width: auto;
}

/* Modal body scrollable */
.modal-body-scrollable {
	max-height: 60vh; /* Altura ajustable */
	overflow-y: auto;
	padding: 15px;
}

/*******************************/
/************ CARDS ************/
/*******************************/
.card {
	border-color: transparent !important;
}

.card-rounded {
	border-radius: 15px !important; /* Ajusta el valor según necesites */
}

.card-rounded .btn {
	border-radius: 15px !important;
	text-transform: initial !important;
	width: 100% !important;
}

.card-rounded .link {
	border-radius: 15px !important;
	text-transform: initial !important;
	width: 100% !important;
}

@media (max-width: 767px) and (orientation: portrait) {
	.card-rounded {
		padding: 0.1rem !important;
	}
}

/*****************************/
/****** USER PROFILEBOX ******/
/*****************************/
#UserProfileBox {
	background-color: transparent !important;
}

#UserProfileBox h1 {
	color: #013e7f !important;
	font-weight: 500;
}

/******************************/
/******** USER DESKTOP ********/
/******************************/
#lastCourseVisited span {
	padding: 10px 10px 0px 0px;
    display: inline-block;
    line-height: 1.5;
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    color: #80C352 !important;
}

@media (max-width: 767px) and (orientation: portrait) {
	#lastCourseVisited .right .card-rounded {
		margin-top: 20px;
	}
}

div.full-width {
	padding: 10px;
	background-color: #e9f1df;
	box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.1); /* Sombra solo en la parte inferior */
}


/************ NEWS ************/
.news-carousel {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}

.news-carousel .carousel-indicators {
	top: 10px;
	bottom: auto;
	margin: 0;
	width: 100%;
}

.news-carousel .carousel-indicators li {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.5);
}

.news-carousel .carousel-indicators .active {
	background-color: #fff;
}

.news-carousel .carousel-inner {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.news-carousel .carousel-item img {
	width: 100%;
	height: 400px;
	object-fit: cover;
}

.news-info-box {
	position: absolute;
	top: 50px;
	right: 50px;
	background: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 20px;
	max-width: 350px;
	border-radius: 5px;
	z-index: 10;
}

.news-info-box h3 {
	font-size: 1.5rem;
	margin-bottom: 10px;
	color: #fff;
}

.news-info-box p {
	font-size: 0.9rem;
	margin-bottom: 15px;
}

.news-info-box a {
	color: #ffc107;
	text-decoration: none;
	font-weight: bold;
}

.news-info-box a:hover {
	text-decoration: underline;
}

@media (max-width: 768px) {
	.news-carousel .carousel-item img {
		height: 300px;
	}
	
	.news-info-box {
		top: 20px;
		right: 20px;
		max-width: 250px;
		padding: 15px;
	}
	
	.news-info-box h3 {
		font-size: 1.2rem;
	}
}

@media (max-width: 576px) {
	.news-carousel .carousel-item img {
		height: 250px;
	}
	
	.news-info-box {
		position: relative;
		top: auto;
		right: auto;
		max-width: 100%;
		margin: -30px 15px 0;
		background: rgba(0, 0, 0, 0.8);
	}
}

/* Courses Carrousell */
.carousel-container {
	padding: 0 30px;
}
.card-carousel .card {
	margin: 0 10px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.card-carousel .card .card-footer {
	font-family: 'Segoe UI This' !important;
	font-weight: normal;
	font-style: normal;
	color: #7F7F7F;
}

.card-img-top {
	height: 180px;
	object-fit: cover;
}

/* Posicionamiento de las flechas */
.slick-prev {
	left: -25px;
}
.slick-next {
	right: -25px;
}

/* Color principal para las flechas */
.slick-prev:before, 
.slick-next:before {
	color: #013e7f !important;
	opacity: 0.9; /* Ligera transparencia para elegancia */
}

/* Color hover recomendado */
.slick-prev:hover:before, 
.slick-next:hover:before {
	color: #002b5a !important; /* 15% más oscuro */
	opacity: 1; /* Full opacidad al interactuar */
}

/* Alternativa con efecto de brillo */
.slick-prev:hover:before, 
.slick-next:hover:before {
	color: #0154a8 !important; /* Versión 20% más clara */
	text-shadow: 0 0 3px rgba(1, 62, 127, 0.3); /* Sutil efecto de glow */
}


/* FOOTER DESKTOP */
#footerDesktop ul {
	list-style-type: none; /* Elimina los bullets */
	padding-left: 0; /* Elimina el padding izquierdo por defecto */
}

#footerDesktop a {
	color: black; /* Color negro para los links */
	font-style: normal;
	font-weight: normal;
	text-decoration: none; /* Elimina el subrayado por defecto */
}

#footerDesktop a:hover {
	text-decoration: underline; /* Añade subrayado al hacer hover */
}