@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");
@import url("https://cdn.jsdelivr.net/npm/boxicons/css/boxicons.min.css");
:root{
	--header-height: 0;
	--nav-width: 68px;
	--first-color: #eeffe5;
	--first-color-light: #AFA5D9;
	--white-color: #F7F6FB;
	--body-font: 'Nunito', sans-serif;
	--normal-font-size: 1rem;
	--z-fixed: 100
}
*,
::before,
::after{
	box-sizing: border-box
}
body{
	overflow-x: hidden;
	position: relative;
	margin: 0% !important;
	padding-left: 0% !important ;
	font-family: var(--body-font);
	font-size: var(--normal-font-size);
	transition: .5s;
	background-color: #FFF !important;
	font-family: Arial, sans-serif;
	display: flex;
	flex-direction: column;
	min-height: 100vh; /* Ocupa al menos toda la altura de la ventana */
}

.footer-icon {
  border: 2px solid #6BB646;  /* Borde verde */
  padding: 5px;  /* Espacio entre el borde y el ícono */
  border-radius: 50%;  /* Esquinas redondeadas */
  color: #FFFFFF;  /* El ícono será blanco */
  font-size: 32px;  /* Tamaño del ícono */
  background-color: #6BB646;  /* Sin fondo para ver solo el ícono */
  display: inline-flex
}

a{
	text-decoration: none
}

.header{
	width: 100%;
	#top: 0;
	left: 0;
	#display: flex;
	#align-items: center;
	#justify-content: space-between;
	z-index: var(--z-fixed);
	#transition: .5s;
	#background-color: red;
}

.header_toggle{
	color: #000;
	font-size: 1.5rem;
	cursor: pointer
}

.header_img{
	width: 25px;
	height: 25px;
	justify-content: center;
	border-radius: 50%;
}

.header_img img{
	width: 30px
}

.l-navbar{
	top: 0;
	left: -30%;
	width: var(--nav-width);
	height: 80vh;
	background-color: var(--first-color);
	padding: .5rem 1rem 0 0;
	z-index: var(--z-fixed)
}

.nav{
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden
}

.nav_logo, .nav_link{
	display: grid;
	grid-template-columns: max-content max-content;
	align-items: center;
	column-gap: 1rem;
	padding: .2rem 0 .2rem 1.5rem
}

.nav_logo{
	margin-bottom: 2rem
}

.nav_logo-icon{
	font-size: 1.25rem;
	color: var(--white-color)
}

.nav_logo-name{
	color: var(--white-color);
	font-weight: 700
}

.nav_link{
	position: relative;
	color: var(--first-color-light);
	margin-bottom: 1.5rem;
	margin-left: .5rem;
}

.nav_link:hover{
	color: var(--white-color)
}

.nav_icon{
	font-size: 1.25rem
}

.show{
	left: 5
}

.body-pd{
	padding-left: calc(var(--nav-width) + 1rem)
}

.active span{
	padding: 3px 5px;
	border-radius: 5px;
	background-color: #6BB645;
	color: #fff;
}

.active::before{
	content: '';
	position: absolute;
	left: 0;
	width: 2px;
	height: 32px;
	background-color: #6BB645
}

.height-100{
	height:80vh
}
	#divImagen img{
		height: 400px;
	}

@media screen and (min-width: 1400px){

	.header{
		#padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
	}

	.header_img{
		width: 30px;
		height: 30px
	}

	.header_img img{
		width: 25px
	}

	.l-navbar{
		left: 0;
		padding: 1rem 1rem 0 0
	}


	.nav_icon{
		display: show;
	}

	.show{
		width: 100%
	}

	.body-pd{
	}
} 


@media screen and (min-width: 540px) and (max-width: 940px) {
	.planInfo {
	}
	.planInfo h1{
		font-size: 20px;
	}
	.planInfo li{
		font-size: 13px;
	}

	#divImagen img{
		height: 200px;
	}

.nav_link{
	margin-left: .2rem;
}
}
@media screen and (min-width: 940px) and (max-width: 1400px){
	#divImagen img{
		height: 250px;
	}
	.planInfo h1{
		font-size: 25px;
	}
	.planInfo li{
		font-size: 13px;
	}
	body{
		margin: calc(var(--header-height) + 1rem) 0 0 0;
		padding-left: calc(var(--nav-width) + 0rem)
	}

	.header{
		#padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
	}

	.header_img{
		width: 20px;
		height: 20px
	}

	.header_img img{
		width: 45px
	}

	.nav_link{
		padding: .2rem 0 .2rem 0.2rem !important;
		margin-left: .8rem!important;
	}


	.l-navbar{
		left: 0;
		padding: 1rem 1rem 0 0
	}

	.show{
		/*width: calc(var(--nav-width) + 160px)*/
		width: 100%;
	}

	.nav_icon {
		left: 0;
	}

	.body-pd{
	}
} 

.nav_link i{
	color: #6BB645
}




/* Estilo para la cabecera verde */
.header {
	#background-color: #df0209;
	border-top: 8px solid #6bb645;
	color: white;
	#padding: 0px 0 0px 0;
	text-align: center;
}

.headerInactive {
	background-color: #ff993a;
}



.header .btn-register {
	background-color: white;
	color: #6bb645;
	border: 2px solid #6bb645;
	padding: 5px 15px;
	font-size: 15px;
	font-weight: bold;
}



/* Estilo para la segunda cabecera de navegación */
.navbar {
	background-color: #fff;
	color: #000;
	font-weight: bold;
}

.navbar-nav {
	justify-content: center !important;
	width: 100%;
}

.navbar-brand {
	display: block;
	margin: 0 auto;
}

.nav-item {
	padding-left: 20px;
}

.nav-item .btn-register {
	background-color: #6bb645;
	color: #fff;
	border: 2px solid #fff;
	padding: 9px 15px;
	font-size: 15px;
	font-weight: bold;
}

.btn-register:hover{
	background: #72c147!important;
}

.nav-item1 {
	width: 200px;
}

.nav-item1 img, #idImgLogo {
	width: 150px;
}

/* Estilo para el cuerpo de trabajo (60% de alto) */
.mainContainer {
	margin-top: 0.5%;
	margin-bottom: 0%;
	background-color: #fff;
	border: 1px solid #ccc;
	box-shadow: 1px 2px #ccc;
}
.loginContainer {
	border: 1px solid #ccc;
	box-shadow: 1px 2px #ccc;
	width: 50%;
	margin: 3% 25%;
	padding: 3% 5%;
	background: #fff;
}
.main-body {
	display: flex;
	flex-grow: 1; /* Permite que el contenido crezca y ocupe el espacio disponible */
	align-items: center;
	justify-content: center;
	background-color: #f4f4f4;
}

.main-body .contentForm {
	border: 1px solid #ccc;
	box-shadow: 1px 2px #ccc;
	width: 40%;
	height: 80%;
	background-color: #fff;
	padding: 5%;
	margin: 5%;
	text-align: center;
}

/* Estilos para el footer negro con 4 contenedores */
.footer {
	background-color: #000;
	color: white;
	padding: 40px 0;
	text-align: center;
}

.footer .container {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.footer .container h5 {
	padding-bottom: 20px;
}

.footer .container div {
	flex: 1;
	padding: 10px;
	font-size: 13px;
}

.footer ul {
	padding-left: 0;
}

.footer li {
	list-style-type: none;
	padding-left: 0;
	font-size: 13px;
	padding-bottom: 5px;
	color: #fff !important;
}

.footer li a {
	text-decoration: none;
	color: #fff !important;
}

/* Estilo para el recuadro verde final */
.final-box {
	background-color: #6bb645;
	text-align: center;
	padding: 10px;
}

.final-box .btnFooter {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #6bb645;
	color: #fff;
	font-size: 25px;
	border: 2px solid #fff;
	margin-top: -30px;
}


.textFooterFinal{
	text-align: left; 
	padding-left: 15%;
	color: #FFF;
	margin-top: -30px;
}


.pagarHead{
	background: #6bb645;
	color: #fff;
	text-align: center;
	width: 90%;
	padding: 0.5%;
	font-size: 20px;
	margin: 0 5%!important;
}

.pagarSubhead{
	background: #eeffe5;
	color: #000;
	text-align: center;
	width: 90%;
	margin: 0 5%!important;
	padding: 0.5%;
	border: 1px solid #6bb645;
}
.pagarSubhead div{
	border-right: 1px solid #6bb645;
}

.pagarContenido {
	width: 90%;
	margin: 0 5%!important;
	padding: 0.2%;
	border-left: 1px solid #999;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
}


.div1{
	background: #f2f2f2 !important; 
}

.planInfo{
#color: #6f7070;
border: 1px solid #ccc;
#box-shadow: 1px 5px #ccc;
border-radius: 10px;
background: #f0f5f9;
padding: 2%;
}

.planInfo h1{
color: #6bb646;
text-align: center;
font-weight: bold;
}


.planInfo h4{
text-align: center;
}

.planInfo h5{
text-decoration: line-through;
text-align: center;
}

.planInfo h6{
color: #9b9b9b;
font-size: 12px;
text-align: center;
font-weight: normal;
}

.planInfo button{
border: 0px;
font-weight: bold;
font-size: 22px;
width: 96%;
background: #6bb646;
color: #fff;
text-align: center;
padding: 3%;
}

.planActivo{
color: #fff !important;
background: #6bb646 !important;
}

.planActivo h1{
color: #FFF;
}


.planActivo h6{
color: #FFF;
}

.planActivo button{
background: #fff;
color: #6bb646;
}



.iconAirplane{
	display: inline-block;
	width: 1em;
	height: 1em;
	--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17.8 19.2L16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8L4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1l3 2l2 3l1-1v-3l3-2l3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2'/%3E%3C/svg%3E");
	background-color: currentColor;
	-webkit-mask-image: var(--svg);
	mask-image: var(--svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.iconGraduate {
	display: inline-block;
	width: 1em;
	height: 1em;
	--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M14.25 9.25V6L8 2.75L1.75 6L8 9.25l3.25-1.5v3.5c0 1-1.5 2-3.25 2s-3.25-1-3.25-2v-3.5'/%3E%3C/svg%3E");
	background-color: currentColor;
	-webkit-mask-image: var(--svg);
	mask-image: var(--svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.iconOther {
	display: inline-block;
	width: 1em;
	height: 1em;
	--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048'%3E%3Cpath fill='%23000' d='M2048 0v1024h-512v512h-512v512H0V1024h512V512h512V0zM896 1152H128v768h768zm512-512H640v384h384v384h384zm512-512h-768v384h384v384h384zm-128 1536h256v128h-256v256h-128v-256h-256v-128h256v-256h128z'/%3E%3C/svg%3E");
	background-color: currentColor;
	-webkit-mask-image: var(--svg);
	mask-image: var(--svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.iconQuestion {
	display: inline-block;
	width: 1em;
	height: 1em;
	--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11.468 6.403a1.5 1.5 0 1 1 1.064 0a2.25 2.25 0 0 1-1.064 0M9 5q.001.202.026.399L6.15 4.178a2.266 2.266 0 0 0-2.96 1.184a2.24 2.24 0 0 0 1.18 2.954l3.634 1.542v3.701l-1.88 5.458a2.25 2.25 0 1 0 4.256 1.465l.145-.422a6.5 6.5 0 0 1-.496-3.169L8.96 19.993a.75.75 0 0 1-1.418-.488l1.893-5.497a1.3 1.3 0 0 0 .068-.407V9.693c0-.502-.3-.955-.762-1.151L4.956 6.935a.74.74 0 0 1-.39-.977a.766.766 0 0 1 .998-.4l4.971 2.11q.24.102.487.169a3 3 0 0 0 1.956 0q.248-.066.488-.168l4.97-2.11a.766.766 0 0 1 1 .399a.74.74 0 0 1-.391.977l-3.78 1.605a1.25 1.25 0 0 0-.762 1.15v1.623a6.5 6.5 0 0 1 1.5-.294V9.856l3.628-1.54a2.24 2.24 0 0 0 1.18-2.954a2.266 2.266 0 0 0-2.96-1.184l-2.877 1.22Q15 5.204 15 5a3 3 0 1 0-6 0m2 12.5a5.5 5.5 0 1 1 11 0a5.5 5.5 0 0 1-11 0m4.75 3.25a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0M14.5 16a.5.5 0 0 0 1 0a1 1 0 0 1 2 0c0 .37-.082.58-.366.898l-.116.125l-.264.27C16.212 17.86 16 18.27 16 19a.5.5 0 0 0 1 0c0-.37.083-.58.366-.898l.116-.125l.264-.27c.543-.567.754-.977.754-1.707a2 2 0 1 0-4 0'/%3E%3C/svg%3E");
	background-color: currentColor;
	-webkit-mask-image: var(--svg);
	mask-image: var(--svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

/* Responsividad para dispositivos pequeños */
@media (max-width: 768px) {
	.footer .container {
		flex-direction: column;
		align-items: center;
	}

	.footer .container div {
		flex: none;
		width: 100%;
		margin-bottom: 20px;
	}

	.main-body .contentForm {
		width: 80%;
	}
}
@media (max-height: 710px) {
  .nav img{
    height: 90px; 
  }
}


.progress-container {
            width: 100%;
            height: 50px;
            margin-top: 30px;
            position: relative;
        }

        /* Barra de progreso */
        .progress {
            height: 10px;
            background-color: #e0e0e0;
            border-radius: 5px;
            position: absolute;
            width: 98%;
            top: 20px;
        }

        .progress-bar {
            height: 100%;
            background-color: green;
            width: 0%;
            border-radius: 5px;
        }

        /* Círculos de los pasos */
        .steps {
            display: flex;
            justify-content: space-between;
            position: relative;
        }

        .step {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: lightgray; /* Color por defecto */
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }

        .step.completed {
            background-color: green!important; /* Color verde cuando el paso está completado */
        }

        .step-text {
            text-align: center;
            font-size: 14px;
            margin-top: 10px;
            font-weight: bold;
        }

        .progress-text {
            text-align: center;
            font-size: 16px;
            position: absolute;
            width: 100%;
            top: 80%;
            font-weight: bold;
        }

/* Personalizar el color del fondo y texto */

	.ui-datepicker-header,.ui-datepicker-title{
		background: #6BB645 !important;
		color: #fff!important;
	}
	 .ui-datepicker-calendar tr td a{
		background: #EEFFE5!important;
		color: #333!important;
	}

        .ui-datepicker {
            background: #fcfcfc; /* Fondo claro */
            border: 1px solid #ccc; /* Borde gris */
            color: #333; /* Texto oscuro */
            font-family: Arial, sans-serif;
        }

        /* Estilo para los días seleccionados */
        .ui-datepicker .ui-datepicker-current-day {
            background-color: #007bff !important; /* Azul para el día actual */
            color: white !important; /* Texto blanco */
        }


	.list-group li:hover{
	    cursor: pointer;
	    background: #6BB645;
	}

	.list-group-item{
		padding: 2px!important;
		padding-left: 15px!important;
		font-size 10px!important;
	}



.icon-button {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background-color: #282626;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.icon-button:hover {
    background-color: #353232;
}

.icon-button img {
    margin-right: 5px;
    width: 20px;
    height: 20px;
}

.title-text {
    font-size: 18px;
    font-weight: bold;
}