@import url('./components.css');

/* Barra SAVAL */

.barra-saval {
	background-color: var(--clr-bg-lightblue);
	padding: 0.25rem 0;
}

.barra-saval ul {
	display: flex;
	justify-content: end;
	align-items: center;
	font-size: 0.75rem;
	color: var(--clr-text-primary)
}

.barra-saval ul li {
	border-right: 1px solid var(--clr-primary-hover);
	padding: 0.125rem 0.75rem;
	line-height: 1em;
	display: block;
}

.barra-saval ul li:last-child {
	border-right: none;
}

.barra-saval ul li a {
	color: inherit;
}

@media screen and (max-width: 768px) {
	.barra-saval ul {
		justify-content: center;
	}

	.barra-saval ul li {
		font-size: 0.66rem
	}
}

@media screen and (max-width: 575px) {
	.barra-saval {
		display: none;
	}
}

/* Header ======================================================== */
header {
	background-color: #fff;
	box-shadow: 0 0 .75rem rgba(0, 0, 0, .1)
}

header .header-logo img {
	max-height: 6rem;
	display: block;
}

header .header-input-group {
	display: flex;
}

header .header-input-group input {
	width: 100%;
	padding: .5rem 1.25rem;
	border: 1px solid var(--clr-primary);
	border-top-left-radius: 0.375rem;
	border-bottom-left-radius: 0.375rem;
	color: var(--clr-text);
	line-height: 1;
}

header .header-input-group input::placeholder {
	color: var(--clr-primary);
	opacity: .5;
}

header .header-input-group button {
	background-color: var(--clr-primary);
	line-height: 1;
	display: flex;
	align-items: center;
	padding: 0 .666rem 0 .5rem;
	border-bottom-right-radius: 0.375rem;
	border-top-right-radius: 0.375rem;
	outline: none;
	border: none;
}

header .header-input-group button:hover {
	background-color: var(--clr-primary-hover);
}

header .header-input-group input:focus-visible {
	outline: 2px solid #BFDCEF;
}

header .header-input-group input:focus-visible+button {
	outline: 2px solid #BFDCEF;
}

header .header-input-group button span {
	font-size: 1.5rem;
	color: #fff;
	max-width: 1.5rem;
}

header .header-ayuda {
	color: var(--clr-primary);
	font-size: var(--font-menu);
	text-decoration: none;
}

header .header-ayuda .symbols {
	margin-right: .125rem;
	line-height: .8em;
	font-size: 1.437rem;
	font-variation-settings: 'wght' 350, 'opsz' 20, 'GRAD' -25;
	max-width: var(--font-menu);
}

header .header-mobile__icon img {
	height: 2.5rem;
	object-fit: contain;
}

.ingresar {
	padding: 0 1.25rem;
	display: flex;
	align-items: center;
	height: 2.5rem;
	gap: .25rem;
}

.ingresar img {
	height: 1.5rem;
}

header .header-user {
	display: flex;
	gap: .5rem;
	align-items: center;
}

header .header-user .header-user__p {
	color: var(--clr-primary);
	user-select: none;
	margin: 0;
	padding: 0;
	line-height: 1em;
}

header .header-user .header-user__img {
	height: 3rem;
	width: 3rem;
	position: relative;
}

header .header-user .header-user__img img {
	border: 2px solid var(--clr-primary);
	border-radius: 100vmax;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

header .header-user .header-user__img::after {
	font-family: 'Material Symbols Rounded';
	font-size: 1rem;
	color: var(--clr-primary);
	content: "\e313";
	position: absolute;
	width: 1.1rem;
	height: 1.1rem;
	border: 2px solid var(--clr-primary);
	border-radius: 100vmax;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	right: -.175rem;
	bottom: -.175rem;
	z-index: 2;
}

header .header-user-menu,
header .header-pais-menu,
header .header-mobile__search-menu {
	border-radius: .5rem;
	border: 0;
	background-color: #fff;
	padding: 0;
	overflow: hidden;
	min-width: 15rem;
}

.header-mobile__search-menu.dropdown-menu {
	position: fixed !important;
	top: 100px !important;
	left: 1rem !important;
	right: 1rem !important;
	width: auto !important;
	margin: 0 !important;
	transform: none !important;
	max-width: none !important;
	border-radius: 0.25rem !important;
	z-index: 50;
}

.ui-autocomplete {
	background-color: #fff;
	padding: 0.5rem 0;
	z-index: 1000;
	border-radius: 0.5rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.ui-menu-item {
	color: var(--clr-text);
	cursor: pointer;
	padding: 0;
}

.ui-widget.ui-widget-content {
	border: none;
	font-family: 'Overpass', sans-serif;

}


.ui-menu-item,
.ui-menu-item .ui-menu-item-wrapper {
	border: none !important;
	color: var(--clr-text);
	font-family: 'Overpass', sans-serif;

}

.ui-menu .ui-menu-item-wrapper {
	background-color: transparent;
	color: var(--clr-text);
	padding: 0.5rem 1rem;
}

.ui-menu-item:hover,
.ui-menu-item:active {
	background-color: var(--clr-bg-lightblue);
	color: inherit;
	border: none;
}



.ui-menu .ui-menu-item .ui-menu-item-wrapper.ui-state-active {
	background-color: var(--clr-bg-lightblue-hover);
}

.header-mobile__search-menu {
	top: 0.5rem;
}

header .header-user-menu__item a {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.5rem;
	font-size: var(--font-menu);
	font-weight: 700;
	color: var(--clr-primary);
	vertical-align: middle;
	text-decoration: none;
}

header .header-user-menu__item a:hover {
	background-color: var(--clr-bg-lightblue-active);
}

header .header-user-menu__item a span {
	font-size: 1.75rem;
	max-width: 1.75rem;
	font-weight: 400;
	font-variation-settings: 'wght' 400, 'opsz' 24;
}

header .dropdown-ingreso .dropdown-menu {
	padding: 1.5rem;
	border-radius: .5rem;
	border: 0;
	--bs-dropdown-min-width: 18rem;
}

header .dropdown-pais .dropdown-pais-button {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	text-decoration: none;
}

header .dropdown-pais .dropdown-pais-button small {
	font-size: 0.75rem;
	color: var(--clr-primary);
	line-height: 1;
	margin-top: 2px;
}

header .dropdown-pais .dropdown-pais-button img {
	display: block;
	border: 1px solid var(--clr-border);
	border-radius: 0.25rem;
	display: block;
	overflow: hidden;
	width: 1.75rem;
}

header .header-pais-menu {
	padding: 1rem 0;
}

header .header-pais-menu__pais a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 1rem;
	font-size: var(--font-medium-small);
	font-weight: 700;
	color: var(--clr-primary);
	vertical-align: middle;
	text-decoration: none;
	user-select: none;
}

header .header-pais-menu__pais a:hover {
	background-color: var(--clr-bg-lightblue);
}

header .header-pais-menu__pais:first-child {
	border: none;
	padding-top: 0;
}

header .header-pais-menu__pais img {
	border: 1px solid #b3d5ee;
	border-radius: 0.25rem;
	display: block;
	overflow: hidden;
	width: 2rem;
	display: block;
}

header .header-pais-menu__timezones {
	margin-bottom: 0.5rem;
}

header .header-pais-menu__timezones:last-child {
	margin-bottom: 0;
}

header .header-pais-menu__timezones li a {
	padding: 0.25rem 1.5rem;
	display: flex;
	text-decoration: none;
}

header .header-pais-menu__timezones li a span.header-pais-menu__timezones-gmt {
	flex: 1 0 0;
	color: var(--clr-text-primary);
}

header .header-pais-menu__timezones li a span.header-pais-menu__timezones-nombre {
	flex: 2 0 0;
	font-weight: 500;
}

header .header-pais-menu__timezones li a.active {
	background-color: var(--clr-bg-lightblue);
}


header .header-pais-menu__timezones li a:hover {
	background-color: var(--clr-bg-lightblue-active);
}



/* Footer =============================================================== */
footer {
	background-color: var(--clr-primary);
	color: #fff;
	margin-top: auto;
}

footer .footer-links a {
	color: inherit;
	color: #fff;
	font-size: var(--font-medium-small);
}

footer .footer-links a:hover {
	text-decoration: underline;
	color: #fff;
}

footer .footer-rrss img {
	height: 24px;
	width: 24px;
}

footer .footer-rrss a {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	font-size : 1rem;
	color: var(--clr-primary);
	background-color: #ffffff;
	border-radius: 0.25rem;
	padding: 0.5rem;
	text-decoration: none;
	transition: ease 200ms background-color;

}

footer .footer-rrss a:hover {
	background-color: #e7f0f7;
	transition: ease 200ms background-color;
}

/* Invitación Newsletter ================================================ */

.newsletter-field {
	box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
	display: flex;
}

.newsletter-input {
	width: 100%;
	padding: 1rem 1rem;
	border: 0;
	outline: 0;
	border-radius: 0;
	line-height: 1em;
}

.newsletter-input::placeholder {
	letter-spacing: 2.5px;
	font-size: 1rem;
	color: var(--clr-text-placeholder-alt);
	line-height: 1em;
}

.newsletter-btn {
	text-transform: uppercase;
	padding: 1rem 4.5rem;
	background-color: var(--clr-primary);
	font-size: 1rem;
	color: #fff;
	border: none;
	font-weight: 700;
}

@media screen and (max-width: 540px) {
	.newsletter-field {
		display: block;
	}

	.newsletter-btn {
		width: 100%;
		display: block;
	}
}

/* Instituciones ============================================= */
.swiper-instituciones__institucion {
	display: flex;
	justify-content: center;
}

.swiper-instituciones__institucion a {
	border-radius: .5rem;
	display: inline-block;
	position: relative;
	max-height: 86px;
	max-width: 86px;
}

.swiper-instituciones__institucion a img {
	height: 100%;
	width: auto;
	object-fit: contain;
	margin: 0 auto;
}

.swiper-instituciones__hover {
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	background-color: rgba(0, 0, 0, .36);
	color: #fff;
	font-size: 2.5rem;
	font-weight: 600;
	opacity: 0;
	border-radius: .5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	height: calc(100% + 1rem);
	width: calc(100% + 1rem);
	transition: ease 150ms opacity;
}

.swiper-instituciones__institucion a:hover .swiper-instituciones__hover {
	opacity: 1;
	transition: ease 150ms opacity;
}

.dropdown-instituciones button {
	background-color: var(--clr-text);
}

.dropdown-instituciones .dropdown-menu {
	max-width: 100%;
	border: 1px solid var(--clr-border);
	padding: 0;
}

.dropdown-instituciones .dropdown-menu li {
	padding: 0;
}

.dropdown-instituciones .dropdown-menu li a.dropdown-item {
	padding: 1rem 1.5rem;
	white-space: wrap;
	display: flex;
	gap: .5rem;
	align-items: center;
	color: var(--clr-primary);
	border-bottom: 1px solid var(--clr-border);
}

.dropdown-instituciones .dropdown-menu li a.dropdown-item:last-of-type {
	border: none;
}

.dropdown-instituciones__img {
	width: 1.5rem;
	max-height: 1.5rem;
}

.dropdown-instituciones .dropdown-menu li img {
	height: 100%;
	margin: 0 auto;
	object-fit: contain;
}

/* Banners home ========================================================= */

.swiper-banners .swiper-banners__pagination {
	top: 1rem;
	bottom: auto;
}

.swiper-pagination-bullet-active {
	border: 1px solid #fff;
	background: #fff;
}

/* Cursos home ========================================================== */

#cursos-home.mostrar-expand {
	max-height: none;
}

.mostrar-overlay {
	position: absolute;
	z-index: 2;
	left: 0;
	bottom: 0;
	right: 0;
	height: 15rem;
	background: rgb(255, 255, 255);
	background: linear-gradient(0deg, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

#home-mostrar {
	margin-top: 5.5em;
}



/* Logros home ========================================================== */

.logro {
	color: #fff;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.logro img {
	height: 5rem;
	margin-bottom: 1rem;
}

.logro h3 {
	color: inherit;
	margin-bottom: .175rem;
	font-weight: 900;
	font-size: 2.25rem;
	line-height: 1em;
}

.logro h3,
.logro p {
	text-align: center;
}

.logro p {
	font-size: 1.25rem;
	margin-bottom: 0;
	line-height: 1.25em;
	color: #fff;
}

/* Testimonios home ===================================================== */

.swiper-testimonios .swiper-testimonios__prev {
	left: 2rem;
}

.swiper-testimonios .swiper-testimonios__next {
	right: 2rem;
}


.slide-testimonio {
	background-color: #e1e1e1;
	border-radius: 2rem;
	margin-top: 4rem;
	padding: 0 1rem 1.5rem;
}

.slide-testimonio__img {
	border: 3px solid var(--clr-primary);
	border-radius: 100vmax;
	object-fit: cover;
	aspect-ratio: 1;
	height: 8rem;
	width: 8rem;
	margin-top: -4rem;
	margin-bottom: 1rem;
}

p.slide-testimonio__p {
	color: var(--clr-primary);
	hyphens: auto;
	padding: 0 calc(3rem + 27px);
	margin: 0 auto 1.5rem;
	max-width: 76ch;
	font-size: 1.15rem;
}

.slide-testimonio__info {
	margin-bottom: .5rem;
}

.slide-testimonio__info h4 {
	margin-bottom: .125rem;
	font-size: 1.5rem;
	font-weight: 900;
}

.slide-testimonio__info p {
	color: var(--clr-primary);
	font-size: 1.2rem;
	margin-bottom: 0;
}

.slide-testimonio__rating {
	display: flex;
	gap: .25rem;
	justify-content: center;
}

.slide-testimonio__rating span img {
	height: 1.25rem;
}

/* Cursos - Index =========================================================== */


.curso-sidebar-chart-info {
	display: flex;
	gap: .5rem;
	align-items: center;
	font-weight: 500;
	font-size: var(--font-menu);
}

.curso-sidebar-chart-info__content {
	width: 75%;
}

.curso-sidebar-chart-info .curso-sidebar-chart-info__dot {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 100vmax;
}

.curso-sidebar-chart-info__teal {
	color: var(--clr-teal);
}

.curso-sidebar-chart-info__orange {
	color: var(--clr-orange);
}

/* Curso usuario no registrado =================================== */

.ficha ul {
	list-style: disc;
	padding-left: 1rem;
	margin-bottom: 1rem;
}

.curso-ficha__seccion {
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--clr-border);
	padding-bottom: 1.5rem;
}

.curso-ficha__seccion h4 {
	position: relative;
}

.curso-ficha__seccion>*:not(h4) {
	padding-left: .75rem;
}

.curso-ficha__seccion ul {
	list-style: disc;
	padding-left: 2rem;
}

.curso-ficha__seccion p:has(> strong):not(:has(*:not(strong))) {
	margin-bottom: .5rem;
}



/* 
.curso-ficha__seccion h4::after {
    content: '';
    position: absolute;
    height: 1px;
    width: 1rem;
    background-color: var(--clr-border);
    top: 50%;
    transform: translateY(-50%);
    left: 0;

} */

.curso-ficha__seccion p:last-child {
	margin: 0;
}

/* Curso usuario registrado ======================================= */
/* Fechas importantes */
section.curso-inicio {
	margin-bottom: 2rem;
}

section.curso-inicio h3 {
	font-size: var(--font-medium);
}


.curso-inicio__item {
	display: flex;
	color: var(--clr-primary);
	line-height: 1em;
	display: flex;
	gap: 1.25rem;
	margin-bottom: 1rem;
	font-weight: 600;
}

.curso-inicio__fechas {
	margin-top: 1rem;
}

.curso-inicio__fecha {
	font-weight: 400;
	font-family: 'Roboto', sans-serif;
}

.curso-inicio__fecha .symbols {
	font-weight: 600;
	color: var(--clr-primary);
	vertical-align: top;
	line-height: .85em;
	margin-right: .5rem;
}

/* Mensajes */
.accordion-mensajes .accordion-item {
	margin-bottom: 1rem;
	border: none;
	box-shadow: none;
	border-bottom: 1px solid var(--clr-border);
	border-radius: .25rem;
}

.accordion-mensajes__titulo {
	font-weight: 400;
	font-size: .9rem;
	margin-top: 1px;
}

.accordion-mensajes__titulo .symbols {
	font-weight: 600;
	margin-right: .25rem;
	font-size: 1rem;
}

.accordion-mensajes .accordion-header button {
	background-color: var(--clr-bg-lightblue);
}

.accordion-mensajes .accordion-button:not(.collapsed) {
	box-shadow: none;
}

.accordion-mensajes>.accordion-item>.accordion-header .accordion-button,
.accordion-mensajes>.accordion-item>.accordion-header .accordion-button.collapsed {
	border-radius: .25rem;
	display: flex;
	gap: 1rem;
	color: var(--clr-primary);
	font-weight: 600;
	align-items: center;
}

.accordion-mensajes .accordion-body {
	font-size: 1rem;
	color: var(--clr-text);
	padding: 1rem;
}


.accordion-mensajes>.accordion-item:last-child {
	border-bottom: 1px solid var(--clr-border);
}

/* Actualizaciones */
.curso-inicio__actualizaciones {
	overflow: hidden;
	position: relative;
}

.curso-inicio__actualizaciones.mostrar-expand {
	max-height: none;
}

.curso-inicio__actualizacion {
	border-bottom: 1px solid var(--clr-border);
	padding-bottom: .75rem;
	margin-bottom: 1.5rem;
}

.curso-inicio__actualizacion-titulo {
	border-left: .5rem solid var(--clr-primary);
	padding-left: 1rem;
	border-radius: .25rem;
	margin-bottom: .5rem;
}

.curso-inicio__actualizacion-fecha {
	color: var(--clr-primary);
	font-weight: 400;
}

.curso-inicio__actualizacion-h4 {
	color: var(--clr-primary);
	line-height: 1.25em;
	font-weight: 500;
	margin: 0;
}

.curso-inicio__actualizacion-p {
	color: var(--clr-text);
	margin: 0;
}

/* Miscelaneo */

.teal {
	background-color: var(--clr-teal);
}

.orange {
	background-color: var(--clr-orange);
}

/* Notificaciones ================================================== */
.notif span {
	position: relative;
}

.notif span::after {
	content: '';
	width: .5rem;
	height: .5rem;
	border-radius: 100vmax;
	z-index: 3;
	left: .1rem;
	top: .1rem;
	background-color: var(--clr-red);
	position: absolute;
}

/* Cursos - Actividades ===================================================== */
.accordion-actividades {
	background-color: var(--clr-box-bg);
	padding: 1rem 1rem 0;
	margin: 0 .75rem;
	border-bottom-left-radius: .5rem;
	border-bottom-right-radius: .5rem;
}

.actividades-item {
	margin-left: 3rem;
	position: relative;
	padding: 1rem 0;
}

.actividades-item.hidden {
	opacity: 0;
	pointer-events: none;
	transition: opacity 50ms ease;
}

.actividades-item.visible {
	opacity: 1;
	pointer-events: auto;
	transition: opacity 200ms ease;

}

.actividades-item h4 {
	font-size: var(--font-medium-small);
	color: var(--clr-primary);
	font-weight: 600;
	margin-bottom: .25rem;
}

.actividades-item__expositor {
	font-weight: 400;
	font-size: var(--font-small);
	color: var(--text-primary);
	margin: 0;
}

.actividades-item__fecha,
.actividades-item__tipo {
	font-size: var(--font-small);
	color: var(--text-primary);
	line-height: 1em;
	margin-bottom: .25rem;
}

.actividades-item::before {
	content: '';
	position: absolute;
	width: 4px;
	height: calc(var(--line-height, 100%) - .75rem);
	bottom: 50%;
	left: calc(-3rem + 0.75rem - 2px);
	background-color: var(--clr-primary);
	z-index: 1;
}

.actividades-item::after {
	font-family: 'Material Symbols Rounded';
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1em;
	color: var(--clr-primary);
	content: '';
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 100vmax;
	border: 3px solid var(--clr-primary);
	background-color: #fff;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 50%;
	transform: translateY(-50%);
	left: -3rem;
	z-index: 3;
}

.actividades-item__encuesta::after,
.actividades-item__check::after,
.actividades-item__eval::after {
	background-color: var(--clr-primary);
	color: #fff;
	font-family: 'Material Symbols Rounded';
}

.actividades-item__check::after {
	content: '\e5ca';

}

.actividades-item__eval::after {
	content: '\e838';
	font-variation-settings: 'FILL' 1;
}

.actividades-item__encuesta::after {
	content: '\e7f2';
	font-weight: 400;
}

.actividades-item__disabled.actividades-item .actividades-item__datos {
	opacity: .5;
	filter: grayscale(.75);
}

.actividades-item__disabled.actividades-item::after {
	border-color: var(--clr-disabled);
	background-color: var(--clr-disabled);
}

.actividades-item__disabled.actividades-item::before {
	background-color: var(--clr-disabled);
}

.actividades-item:first-child {
	margin-top: -1rem;
}

.actividades-item:first-child::before {
	background-color: #fff;
	height: calc(50% - 1rem);
	bottom: 50%;
	z-index: 2;
}

.accordion-actividades .actividades-item__disabled.actividades-item::after {
	border-color: var(--clr-disabled-2);
	background-color: var(--clr-disabled-2);
}

.accordion-actividades .actividades-item__disabled.actividades-item::before {
	background-color: var(--clr-disabled-2);
}

.accordion-actividades .actividades-item:first-child::before {
	background-color: var(--clr-box-bg);
}

/* Clase */

.clase-contenido ul {
	list-style: disc;
	padding-left: 1rem;
	margin-bottom: 1rem;
}

.clase-descargas li a {
	display: block;
	padding: 0.5rem;
	border-bottom: 1px solid var(--clr-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: 200ms ease background-color;
}

.clase-descargas li a:hover {
	background-color: var(--clr-border);
	transition: 200ms ease background-color;
}

.clase-descargas li:last-child a {
	border-bottom: none;
}

.clase-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
}

.clase-nav .dropdown {
	flex: 1;
	min-width: 0;
}

.clase-nav .clase-nav__toggler {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 1rem;
	border: 1px solid var(--clr-border);
	border-radius: .25rem;
	background-color: var(--clr-bg-lightblue);
	transition: 200ms ease background-color;
	text-decoration: none;
	gap: 0.5rem;
	width: 100%;
	min-width: 0;
}

.clase-nav .clase-nav__toggler:hover {
	background-color: var(--clr-border);
	transition: 200ms ease background-color;
}

.clase-nav .dropdown-item.active,
.clase-nav .dropdown-item:active {
	color: var(--clr-primary);
	text-decoration: none;
	background-color: var(--clr-bg-lightblue-active);
}

.clase-nav .button {
	white-space: nowrap;
	overflow: hidden;
}

.clase-nav__toggler-text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	flex: 1;
	min-width: 0;
}

.clase-nav .clase-nav__toggler span.symbols {
	max-width: 1.5rem;
	font-size: 1.5rem;
	display: inline-block;
}

.clase-nav .clase-nav__anterior,
.clase-nav__siguiente {
	display: inline-block;
}

.clase-nav__dropdown {
	border-radius: 0.25rem;
	border: none;
	max-height: 400px;
	overflow-y: scroll;
	width: 100%;
}


.clase-nav__link {
	cursor: pointer;
	padding: 0.75rem 2.75rem 0.75rem 0.75rem;
	text-decoration: none !important;
	border-bottom: 1px solid var(--clr-bg-lightblue);
	position: relative;
}

.clase-nav__titulo {
	font-size: 1rem;
	margin-bottom: 0;
	font-weight: 400;
	text-wrap: wrap;
}

.clase-nav__bloque-titulo {
	font-size: var(--font-medium-small);
	color: var(--clr-primary);
	border-top: 1px solid var(--clr-border);
	border-bottom: 1px solid var(--clr-border);
	padding: 0.75rem 0.75rem;
	background-color: var(--clr-bg-lightblue);
	text-wrap: wrap;
	margin: 0;
}

.clase-nav__tipo {
	font-size: var(--font-small);
	color: var(--clr-text-light);
}

.clase-nav__link::after {
	font-family: 'Material Symbols Rounded';
	font-size: 1rem;
	font-weight: 400;
	line-height: 1em;
	color: var(--clr-primary);
	content: '';
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 100vmax;
	border: 2px solid var(--clr-primary);
	background-color: #fff;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0.75rem;
	z-index: 3;
}

.clase-nav__encuesta::after,
.clase-nav__check::after,
.clase-nav__eval::after {
	background-color: var(--clr-primary);
	color: #fff;
}

.clase-nav__check::after {
	content: '\e5ca';
}

.clase-nav__eval::after {
	content: '\e838';
	font-variation-settings: 'FILL' 1;
}

.clase-nav__encuesta::after {
	content: '\e7f2';
	font-weight: 400;
}

.encuesta-seccion {
	margin-bottom: 1.5rem;
}

.encuesta h4 {
	/* color: var(--clr-text);
    font-size: 1rem; */
	padding: 0.5rem;
	margin-bottom: 1rem;
	border-radius: 0.25rem;
	background-color: var(--clr-bg-lightblue);
}

.evaluacion-resumen {
	border-radius: 0.5rem;
	border: 1px solid var(--clr-border-light);
	margin-bottom: 1rem;
	padding: 1rem;
}

.encuesta-titulo {
	margin-bottom: 0.25rem;

}

.encuesta-pregunta {
	margin-bottom: 1rem;
}

/* Evaluaciones */

.evaluacion-titulo {
	/* color: var(--clr-text);
    font-weight: 400; */
}

.evaluacion-pregunta {
	margin-bottom: 2rem;
	padding-bottom: 1rem;
}

.evaluacion-pregunta__radio {
	border-radius: 0.25rem;
	margin-bottom: 0.5rem;
	padding: 0;
	position: relative;
}

.evaluacion-pregunta__radio.form-check .form-check-input {
	opacity: 0;
	display: none;
}



.evaluacion-pregunta__radio.form-check .form-check-label {
	cursor: pointer;
	padding: 0.5rem 0.5rem 0.5rem 3rem;
	border-radius: 0.25rem;
	/* background-color: var(--clr-box-bg); */
	transition: 200ms ease background-color, 200ms ease border;
	border: 2px solid var(--clr-bg-lightblue);
}

.evaluacion-pregunta__radio.form-check .form-check-label:hover {
	background-color: var(--clr-bg-lightblue-hover);
	transition: 200ms ease background-color,
		200ms ease border;
}

.evaluacion-pregunta__radio.form-check .form-check-input:checked+.form-check-label {
	/* color: #fff;
    background-color: var(--clr-primary);
    border: 2px solid var(--clr-primary); */
	font-weight: 450;
	border: 2px solid var(--clr-primary);
	transition: 200ms ease background-color, 200ms ease border;

}

.evaluacion-pregunta__radio .form-check-label::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	bottom: 0;
	background-color: var(--clr-bg-lightblue-hover);
	font-weight: 600;
	color: var(--clr-text);
	width: 2.5rem;
	border-top-left-radius: 0.25rem;
	border-bottom-left-radius: 0.25rem;
	text-align: center;
	color: var(--clr-primary);
	transition: 200ms ease background-color;

}

.evaluacion-pregunta__radio.form-check .form-check-input:checked+.form-check-label::after {
	background-color: var(--clr-primary);
	color: #fff;
	transition: 200ms ease background-color;
}

.evaluacion-pregunta__a .form-check-label::after {
	content: 'A';
}

.evaluacion-pregunta__b .form-check-label::after {
	content: 'B';
}

.evaluacion-pregunta__c .form-check-label::after {
	content: 'C';
}

.evaluacion-pregunta__d .form-check-label::after {
	content: 'D';
}

.evaluacion-pregunta__e .form-check-label::after {
	content: 'E';
}

.evaluacion-pregunta__f .form-check-label::after {
	content: 'F';
}

.evaluacion-pregunta__g .form-check-label::after {
	content: 'G';
}

.listado-preguntas ul {
	display: flex;
	gap: 0.25rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
	width: 100%;
	margin-top: 0.5rem;
}

.listado-preguntas ul li {
	flex-basis: calc(20% - 10px);
}

.listado-preguntas ul li a {
	display: block;
	width: 100%;
	text-align: center;
	background-color: var(--clr-bg-lightblue);
	padding: 0.25rem;
	border-radius: 0.25rem;
	border: 2px solid var(--clr-primary);
	text-decoration: none;
	transition: 200ms ease background-color;
}

.listado-preguntas ul li a:hover {
	background-color: var(--clr-bg-lightblue-active);
	transition: 200ms ease background-color;

}

.listado-preguntas ul li a.contestada {
	background-color: var(--clr-primary);
	border: 2px solid var(--clr-primary);
	color: #fff;
}

.evaluacion-nota__final {
	background-color: var(--clr-bg-lightblue);
	display: inline-block;
	border-radius: 0.25rem;
	overflow: hidden;
}

.evaluacion-nota__final small {
	display: block;
	text-transform: uppercase;
	color: #fff;
	padding: 0.5rem;
	margin: 0;
	line-height: 1;
	background-color: var(--clr-primary);
}

.evaluacion-nota__final p {
	font-size: 3rem;
	line-height: 1;
	font-weight: 600;
	color: var(--clr-primary);
	padding: 0.75rem 0.5rem 0.25rem;
	border-radius: 0.25rem;
	margin: 0;
	text-align: center;
}

.panel-tiempo {
	font-size: 2rem;
}

.panel-tiempo .symbols {
	margin-bottom: 5px;
	display: inline-block;
	line-height: 1;
}

/* Navegación usuarios ======================================= */

.nav-usuarios {
	margin-top: -8rem;
	position: relative;
}

.nav-usuarios__porcentaje {
	position: absolute;
	bottom: 1rem;
	background-color: var(--clr-success);
	border-radius: 100%;
	border-radius: 100vmax;
	padding: .25rem 1rem;
	left: 50%;
	transform: translateX(-50%);
	min-width: max-content;
}

.nav-usuarios__porcentaje small {
	display: block;
	color: #fff;
	line-height: 1em;
}

.nav-usuarios__avatar {
	padding: 1.25rem;
	margin: 0 auto;
	max-width: 256px;
	position: relative;
}

.nav-usuarios__avatar-img {
	position: relative;
	border-radius: 100vmax;
	aspect-ratio: 1;
	background: conic-gradient(var(--clr-success) 60%, #e3ecd6 60%);
	padding: 3px;
}

.nav-usuarios__avatar-img img {
	background-color: rgba(255, 255, 255, .75);
	border-radius: 100vmax;
	object-fit: cover;
	height: 100%;
	width: 100%;
}

.nav-usuarios__nombre {
	color: #fff;
	left: calc(100% + 1.5rem);
	top: 5rem;
	max-width: 620px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

/* Cuenta ==================================== */
.cuenta-img {
	max-width: 200px;
	border-radius: 100vmax;
	border: 3px solid var(--clr-primary);
	aspect-ratio: 1;
}

.cuenta-img img {
	border-radius: 100vmax;
	background-color: #f2f2f2;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* Mensajes */
.table-mensajes .table-mensajes__no-leido>td {
	background-color: var(--clr-bg-lightblue);
}

.table-mensajes.table-hover>tbody>tr:hover>* {
	background-color: var(--clr-bg-lightblue-hover)
}

/* Reservas de clase */

.reserva-fecha {
	text-align: center;
}

.reserva-fecha .reserva-fecha-icon {
	font-size: 2.5rem;
	font-weight: 300;
	margin-bottom: 0.5rem;
	color: var(--clr-text);
}

.reserva-fecha p {
	font-size: 1.125rem;
}

.reserva-fecha .btn-check {
	position: absolute;
	clip: rect(0, 0, 0, 0);
	pointer-events: none;
}

.reserva-fecha .form-check {
	background-color: #fff;
	border: 2px solid var(--clr-primary);
	border-radius: 0.5rem;
	font-size: 1rem;
	color: var(--clr-primary);
	padding: 0.5rem 1rem;
	display: block;
	width: 100%;
}

.reserva-fecha .form-check:hover {
	background-color: var(--clr-bg-lightblue-active);
}



/* Inscripciones ==================================================== */
/* Pasos */

.bs-wizard {
	margin-bottom: 1.5rem;
}



.bs-wizard>.bs-wizard-step {
	padding: 0;
	position: relative;
}

.bs-wizard>.bs-wizard-step .bs-wizard-stepnum {
	color: var(--clr-text);
	font-weight: 600;
	line-height: 1em;
	padding-top: .25rem;
	font-size: .875rem;
	margin-bottom: .25rem;
}

.bs-wizard>.bs-wizard-step .bs-wizard-info {
	color: var(--clr-text);
	font-size: .875rem;
	padding: 0 .25rem;
}

.bs-wizard>.bs-wizard-step>.bs-wizard-dot {
	position: absolute;
	width: 30px;
	height: 30px;
	display: block;
	background-color: var(--clr-primary);
	top: 1.25rem;
	left: 50%;
	margin-top: -15px;
	margin-left: -15px;
	border-radius: 50%;
}

.bs-wizard>.bs-wizard-step>.bs-wizard-dot:after {
	content: ' ';
	width: 14px;
	height: 14px;
	background-color: #fff;
	border-radius: 50px;
	position: absolute;
	z-index: 10;
	top: 8px;
	left: 8px;
}

.bs-wizard>.bs-wizard-step>.progress {
	position: relative;
	border-radius: 0px;
	height: 8px;
	box-shadow: none;
	margin: 1rem 0;
}

.bs-wizard>.bs-wizard-step>.progress>.progress-bar {
	box-shadow: none;
	background-color: var(--clr-primary);
}

.bs-wizard>.bs-wizard-step.complete>.progress>.progress-bar {
	width: 100%;
}

.bs-wizard>.bs-wizard-step.active>.progress>.progress-bar {
	width: 50%;
}

.bs-wizard>.bs-wizard-step:first-child.active>.progress>.progress-bar {
	width: 0%;
}

.bs-wizard>.bs-wizard-step:last-child.active>.progress>.progress-bar {
	width: 100%;
}

.bs-wizard>.bs-wizard-step.disabled>.bs-wizard-dot {
	background-color: #d1d5db;
}

.bs-wizard>.bs-wizard-step.disabled>.bs-wizard-dot:after,
.bs-wizard>.bs-wizard-step.complete>.bs-wizard-dot::after {
	opacity: 0;
}

.bs-wizard>.bs-wizard-step:first-child>.progress {
	left: 50%;
	width: 50%;
}

.bs-wizard>.bs-wizard-step:last-child>.progress {
	width: 50%;
}

.progress {
	--bs-progress-bg: #d1d5db;
}

/* Wizard mobile */
.wizard-mobile {
	display: flex;
	flex-direction: column;
	margin: 0 0 1.5rem 3rem;
	position: relative;
}

.wizard-mobile-info {
	color: var(--clr-text);
}

.wizard-mobile-num {
	font-weight: 600;
}

.wizard-mobile-line {
	width: 5px;
	background-color: #D1D5DB;
	position: absolute;
	left: -2.4rem;
	bottom: 50%;
	z-index: 0;
	height: 100%;
}

.wizard-mobile-step.active .wizard-mobile-line {
	background-color: var(--clr-primary);
}

.wizard-mobile-step:first-child .wizard-mobile-line {
	height: 0;
}

.wizard-mobile-step {
	padding: .5rem 0;
	position: relative;
}

.wizard-mobile-dot {
	content: '';
	position: absolute;
	left: -3rem;
	z-index: 1;
	top: 50%;
	transform: translateY(-50%);
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 100vmax;
	background-color: #D1D5DB;
}

.wizard-mobile-dot::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: .75rem;
	height: .75rem;
	border-radius: 100vmax;
	background-color: #D1D5DB;
	z-index: 2;
}


.wizard-mobile-step.active .wizard-mobile-dot,
.wizard-mobile-step.complete .wizard-mobile-dot {
	background-color: var(--clr-primary);
}

.wizard-mobile-step.active .wizard-mobile-dot::after {
	background-color: #fff;
}

.wizard-mobile-step.complete .wizard-mobile-dot::after {
	opacity: 0;
}

/* Gestión */

.gestion-container {
	background-color: var(--clr-box-bg);
	padding: 1rem 2rem;
	border-radius: 1rem;
}

.gestion-fechas {
	color: var(--clr-text);
}

.gestion-fechas .curso-inicio__item {
	color: var(--clr-text);
}

.gestion-inscritos {
	background-color: #fff;
	display: inline-block;
	border: 2px solid var(--clr-primary);
	border-radius: 0.5rem;
	padding: 1rem 2rem;
	color: var(--clr-primary);
}

.gestion-inscritos p {
	margin-bottom: 0;
}

.gestion-inscritos h3 {
	font-size: 2.5rem;
	line-height: 1em;
	margin-bottom: 0.25rem;
}


/* Media Queries ============================================================ */

@media screen and (min-width: 564px) {
	#buscador-cursos {
		display: block !important;
	}
}

@media screen and (max-width: 1200px) {
	.clase-evaluar {
		margin-top: 0;
	}
}

@media screen and (max-width: 991px) {
	.sidebar {
		display: none;
	}

	.clase-evaluar {
		margin-top: 0;
	}

	.listado-preguntas ul li {
		flex-basis: auto;
	}

	.listado-preguntas ul li a {
		width: 4ch;
	}
}

@media screen and (max-width: 767px) {

	/* Home ========================================================= */
	.swiper-testimonios .swiper-testimonios__prev {
		left: 1rem;
	}

	.swiper-testimonios .swiper-testimonios__next {
		right: 1rem;
	}

	p.slide-testimonio__p {
		font-size: 1rem;
		padding: 0 calc(1.25rem + 27px);
	}

	.slide-testimonio__info h4 {
		font-size: 1.25rem;
	}

	.slide-testimonio__info p {
		font-size: 1.125rem;
	}

	#cursos-home {
		max-height: 1300px;
		max-height: 160vh;
	}
}

@media screen and (max-width: 574px) {

	/* Header ========================================================= */
	header .header-logo img {
		max-height: 5rem;
	}

	/* Home ========================================================= */
	#cursos-home {
		max-height: 3100px;
	}

	.slide-testimonio {
		border-radius: 0;
	}

	.container-testimonios {
		padding-left: 0;
		padding-right: 0;
	}

	header .header-mobile__icon img {
		height: 2rem;
		object-fit: contain;
	}

	.ingresar {
		padding: 0 1.25rem;
		display: flex;
		align-items: center;
		height: 2rem;
		gap: .25rem;
		font-size: 1rem;
	}

	.ingresar img {
		display: none;
	}
}

@media screen and (max-width: 360px) {
	.curso-inicio__fecha {
		font-size: 0.875rem;
	}

	.curso-inicio__fecha .symbols {
		display: none;
	}

	.curso-inicio__item {
		gap: 0.75rem;
	}
}