/* vietnamese */
@font-face {
	font-family: 'Encode Sans';
	font-style: normal;
	font-weight: 300;
	src: local('Encode Sans Light'), local('EncodeSans-Light'), url(EncodeSans-Light_vietnamese.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
	font-family: 'Encode Sans';
	font-style: normal;
	font-weight: 300;
	src: local('Encode Sans Light'), local('EncodeSans-Light'), url(EncodeSans-Light_latin-ext.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Encode Sans';
	font-style: normal;
	font-weight: 300;
	src: local('Encode Sans Light'), local('EncodeSans-Light'), url(EncodeSans-Light_latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html,
body {
	min-height: 100%;
	weight: 100%;
}

html {
	padding: 0
}

body {
	font: 1.05em/1.6 "Encode Sans", Arial, Helvetica, sans-serif;
	padding: 10px;
	margin: 0;
	text-align: left;
	color: #333;
	background: #fff
}

input,
select,
textarea,
.feedback {
	font-family: "Encode Sans", ​Arial, Helvetica, sans-serif;
	font-size: 1em
}

.pre-code,
.highlighted-code {
	font-family: "Encode Sans", ​Arial, Helvetica, sans-serif;
	font-size: .9em;
	border-radius: 0
}

a {
	color: #007691
}

/* Header is also in single page */
#header h1 {
	margin: 0;
	font-size: 1em;
	color: #004F66
}

#header,
#emptyHeader,
#nodeDecoration {
	height: auto;
	font-size: 1em;
	text-align: left;
	letter-spacing: .5px;
	padding: 26px 35px 34px 20px;
	border: 1px solid #ddd;
	margin-bottom: 0;
	background: url(_intef_title_bg.png) no-repeat 50% bottom
}

.exe-single-page #header {
	font-size: 1.55em
}

#nodeTitle {
	font-size: 1.55em;
	margin: 0;
	color: #004F66
}

#header h1,
#nodeTitle {
	text-shadow: 0 0 8px rgba(255, 255, 255, .6), 0 0 5px rgba(255, 255, 255, .6), 0 0 2px rgba(255, 255, 255, .9)
}

/* .nodeTitle when single page */
.nodeTitle {
	padding: 25px 0;
	border-bottom: 1px dotted #97afb2;
	margin: 25px 0 0 0;
	color: #3a4749;
	letter-spacing: .5px;
	font-size: 1.5em
}

h2 {
	font-size: 1.4em;
	color: #007691;
	letter-spacing: .5px;
	font-weight: normal
}

h3 {
	font-size: 1.35em;
	color: #576F72;
	letter-spacing: .5px;
	font-weight: normal
}

p {
	margin: 1em 0
}

ol,
ul {
	color: #3a4749
}

#main {
	height: auto !important;
	height: 300px;
	min-height: 300px
}

#main h4 {
	font-size: 1.2em
}

#main h5 {
	font-size: 1.1em
}

.iDevice {
	margin: 25px 0
}

/* iDevice icons */
.iDevice_header {
	background: url(icon_exe.png) no-repeat 0 bottom;
	padding-left: 75px;
	position: relative
}

.hidden-idevice .iDevice_header {
	background-color: #f5f7f8;
	padding-left: 65px;
	box-shadow: rgba(0, 0, 0, 0.3) 3px 3px 4px
}

.iDevice_header.iDevice_header_noIcon {
	padding: 0
}

.hidden-idevice .iDevice_header.iDevice_header_noIcon {
	padding-left: 20px
}

.activityIdevice .iDevice_header {
	background-image: url(icon_gears.png)
}

.readingIdevice .iDevice_header {
	background-image: url(icon_knowledge.png)
}

.CasestudyIdevice .iDevice_header {
	background-image: url(icon_teacher_screen.png)
}

.FileAttachIdeviceInc .iDevice_header {
	background-image: url(icon_atom.png)
}

.GalleryIdevice .iDevice_header {
	background-image: url(icon_camera.png)
}

.objectivesIdevice .iDevice_header {
	background-image: url(icon_award.png)
}

.ReflectionIdevice .iDevice_header {
	background-image: url(icon_think.png)
}

.preknowledgeIdevice .iDevice_header {
	background-image: url(icon_bulb.png)
}

/* Interactive activities */
.ListaIdevice .iDevice_header,
.QuizTestIdevice .iDevice_header,
.MultichoiceIdevice .iDevice_header,
.TrueFalseIdevice .iDevice_header,
.MultiSelectIdevice .iDevice_header,
.ClozeIdevice .iDevice_header,
.ScrambledListIdevice .iDevice_header {
	background-image: url(icon_list.png)
}

/* iDevice title */
.iDeviceTitle {
	font-size: 1.4em;
	display: inline;
	font-weight: normal;
	vertical-align: top;
	top: 0;
	color: #007691;
	line-height: 60px;
	padding-right: 25px;
	letter-spacing: .5px
}

.hidden-idevice .iDeviceTitle {
	color: #526668
}

.iDevice_content {
	overflow: auto
}

/* iDevice content */
.iDevice_inner {
	padding: 10px 20px;
	background: #f5f7f8;
	box-shadow: rgba(0, 0, 0, 0.3) 3px 3px 4px
}

#siteFooter {
	font-size: .95em;
	margin: 25px 0
}

#siteFooter a {
	color: #DB0B00
}

#lbOverlay {
	background-color: #e2e2e2
}

#lbOuterContainer {
	border-color: #ddd
}

.ExternalUrlIdevice iframe {
	border: none
}

/* Lightbox */
.exeImageGallery {
	width: 100%
}

/* base.css */
.block,
.feedback {
	padding: 0
}

li {
	list-style-position: outside
}

#wikipedia-content ul li {
	list-style-image: none;
	margin-bottom: auto
}

/* Form buttons */
.iDevice_inner input[type=submit],
.feedbackbutton {
	background: #007691;
	border: 0;
	padding: 4px 10px;
	color: #fff;
	margin-bottom: 1em
}

.iDevice_inner input[type=submit]:hover,
.feedbackbutton:hover,
.iDevice_inner input[type=submit]:focus,
.feedbackbutton:focus {
	background: #3a4749
}

/* Hide/Show iDevice */
.toggle-idevice {
	text-align: right;
	display: block;
	margin-right: 13px
}

.iDevice_header .toggle-idevice {
	position: absolute;
	right: 13px;
	bottom: 13px;
	margin: 0
}

.toggle-idevice a {
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(_intef_icons.png) no-repeat 0 -20px
}

.toggle-idevice .show-idevice {
	background-position: 0 0
}

.toggle-idevice span,
#printNode a span {
	position: absolute;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	height: 0
}

/* eXe < 2.1 */
.iDevice a,
#siteFooter a,
#packageLicense a,
.toggle-idevice a {
	text-decoration: underline
}

.iDevice a:hover,
#siteFooter a:hover,
#packageLicense a:hover,
.toggle-idevice a:hover {
	text-decoration: none
}

/* Licenses */
#packageLicense {
	text-align: left;
	font-size: .8em;
	padding: 0 20px;
	color: #FFF;
	line-height: 1em;
	margin: 0 0 25px 0;
	background: #526668;
	border: 1px solid #526668;
	box-shadow: rgba(0, 0, 0, 0.4) 3px 3px 4px
}

#packageLicense p {
	margin: 20px 0
}

#packageLicense a {
	color: #FFEA92;
	text-decoration: underline
}

#packageLicense.propietary {
	position: absolute;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	height: 0
}

#packageLicense.cc {
	padding: 0 20px 0 110px;
	background: #526668 url(_intef_licenses.gif) no-repeat 20px 5px
}

#packageLicense.cc-by-sa {
	background-position: 20px -95px
}

#packageLicense.cc-by-nd {
	background-position: 20px -195px
}

#packageLicense.cc-by-nc {
	background-position: 20px -295px
}

#packageLicense.cc-by-nc-sa {
	background-position: 20px -395px
}

#packageLicense.cc-by-nc-nd {
	background-position: 20px -495px
}

#packageLicense.cc-0 {
	background-position: 20px -595px
}

/* eXe Figures */
.exe-figure {
	margin: 2.5em 0
}

.exe-figure,
.exe-figure a {
	color: #6F6F6F
}

.position-center {
	margin: 2.5em auto
}

.position-right {
	margin: 2.5em 0 2.5em auto
}

.float-left {
	margin: .5em 1.5em 1em 0
}

.float-right {
	float: right;
	margin: .5em 0 1em 2em
}

/* Tabs */
.exe-tabs a {
	color: #005D78
}

#printNode {
	margin: 0;
	position: absolute;
	top: 33px;
	right: 33px
}

#printNode.with-toggler {
	margin-bottom: 0
}

#printNode a {
	display: block;
	width: 30px;
	height: 30px;
	background: #fff url(_intef_print.png) no-repeat 50% 50%;
	box-shadow: rgba(0, 0, 0, 0.3) 3px 3px 4px;
	border-radius: 15px
}

@media print {

	#nodeDecoration,
	#header,
	#emptyHeader {
		color: #000;
		text-shadow: none;
		background: none;
		border: none;
		border-bottom: 1px solid #E2E2E2;
		padding: 20px 0
	}

	#packageLicense,
	#packageLicense.cc {
		background: none;
		padding: 0;
		border: none;
		box-shadow: none;
		text-align: center
	}

	#packageLicense,
	#packageLicense a,
	#nodeTitle,
	.nodeTitle {
		color: #000
	}

	.hidden-idevice .iDevice_header {
		box-shadow: none
	}

	.iDevice_inner {
		box-shadow: none;
		padding: 10px 0
	}

	.iDevice_header {
		padding: 5px 0
	}

	.toggle-idevice {
		display: none
	}

	/* Uncomment this to print URL after links:
	  a[href^=http]{font-weight:bold;text-decoration:none!important}
	  a[href^=http]:after{content:" <" attr(href) "> "}
	  */
}

/* Hint & Feedback */
.iDevice_hint_content {
	border: 1px solid #ecf0f1;
	background: #FFF
}

.iDevice_inner .feedback {
	background: #FFF;
	border: 1px solid #ecf0f1;
	padding: 0 1em;
	margin: 1em 0
}

.iDevice_inner .feedback-right {
	background: #E9F9DF
}

.iDevice_inner .feedback-wrong {
	background: #FDFDDB
}

.iDevice_inner .iDevice_answer-feedback {
	background: none;
	border: none;
	padding: 0;
	margin: 0
}

.TrueFalseIdevice .feedback {
	margin-top: 1.5em
}

/* UDL iDevice */
.exe-udlContent-content-simplified {
	line-height: 2.5em;
	letter-spacing: .15em;
	word-spacing: .15em
}

.exe-udlContent-content-simplified p {
	margin: 2em 0
}


/* Estilos generales */
.answers-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Estilo para pantallas grandes (dividir en dos columnas) */
@media screen and (min-width: 1024px) {
	.answers-container {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.iDevice_answer {
		width: calc(50% - 10px);
		/* Mitad del ancho menos el espacio entre las columnas */
		box-sizing: border-box;
		/* Para incluir padding y border en el ancho total */
	}
}


/* Contenedor de la barra de progreso */
#progress-container {
	width: 100%;
	background-color: #ddd;
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 20px;
	position: relative;
	height: 10px;
	/* Ajuste de altura para una mejor visibilidad */
}

/* Barra de progreso */
#progress-bar {
	height: 100%;
	/* Hace que la barra ocupe toda la altura del contenedor */
	background-color: #6699FF;
	width: 0;
	transition: width 0.3s ease;
}

/* Texto de progreso (centrado sobre la barra) */
#progress-text {
	position: absolute;
	width: 100%;
	text-align: center;
	top: 0;
	left: 0;
	height: 100%;
	/* Alinea el texto con la altura de la barra */
	line-height: 10px;
	/* Centra el texto verticalmente */
	color: #fff;
	font-weight: bold;
	font-size: 10px;
	/* Ajusta el tamaño de la fuente */
	display: none;
	/* Cambia a 'block' si quieres mostrar el texto */
}

/* Media Query para pantallas grandes */
@media (min-width: 1024px) {
	#progress-container {
		height: 15px;
		/* Barra de progreso más grande en pantallas grandes */
	}

	#progress-text {
		font-size: 12px;
		/* Aumenta el tamaño de la fuente en pantallas grandes */
	}
}

/* Media Query para pantallas medianas (como tabletas) */
@media (max-width: 1024px) and (min-width: 768px) {
	#progress-container {
		height: 12px;
		/* Tamaño intermedio para pantallas medianas */
	}

	#progress-text {
		font-size: 11px;
		/* Tamaño de fuente intermedio */
	}
}

/* Media Query para pantallas pequeñas y dispositivos móviles */
@media (max-width: 768px) {
	#progress-container {
		height: 10px;
		/* Mantiene la barra más delgada en pantallas pequeñas */
	}

	#progress-text {
		font-size: 9px;
		/* Fuente más pequeña para pantallas móviles */
	}
}

/* Media Query para pantallas muy pequeñas (como teléfonos en modo vertical) */
@media (max-width: 480px) {
	#progress-container {
		height: 8px;
		/* Reducir la altura de la barra en dispositivos pequeños */
	}

	#progress-text {
		font-size: 8px;
		/* Fuente más pequeña para pantallas muy pequeñas */
	}
}



/* Esconde las preguntas por defecto */
.question {
	display: none;
	margin-bottom: 20px;
	opacity: 0;
	/* Añadido para transición suave */
	transition: opacity 0.3s ease-in-out;
	/* Transición suave */
}

/* Aparece la pregunta cuando tiene la clase 'active' */
.question.active {
	display: block;
	opacity: 1;
	/* Se hace visible */
	background: #fff;
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	/* Añadido sombra para darle más enfoque */
}

/* Mejorar la visibilidad de la pregunta activa */
.question.active:hover {
	background: #f9f9f9;
	/* Cambia el fondo cuando se pasa el ratón */
	border-color: #ccc;
	/* Cambia el borde */
}

/* Para mejorar la experiencia visual */
.question {
	font-family: Arial, sans-serif;
	/* Establecer fuente legible */
	color: #333;
	/* Texto oscuro para mejor legibilidad */
}

/* Espaciado de pregunta */
.question p {
	margin-bottom: 10px;
	/* Espaciado entre párrafos dentro de la pregunta */
}

/* Estilos básicos para los botones */
#button-container {
	display: flex;
	flex-wrap: wrap;
	/* Permite que los botones se ajusten a varias líneas */
	justify-content: center;
	margin-bottom: 20px;
}

#button-container button {
	margin: 1px;
	/* Reduce el margen para que los botones estén más juntos */
	padding: 4px;
	/* Ajusta el relleno para un tamaño de botón más pequeño */
	font-size: 10px;
	/* Tamaño de fuente mínimo ajustado a 10px */
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s ease;
	width: 40px;
	/* Ancho fijo */
	height: 40px;
	/* Alto fijo */
	box-sizing: border-box;
	/* Incluye padding y border en el tamaño total del botón */
	display: flex;
	align-items: center;
	/* Centra el texto verticalmente */
	justify-content: center;
	/* Centra el texto horizontalmente */
}

/* Estilo para botones activos */
#button-container button.active {
	background-color: #6699FF;
	color: white;
}

/* Media query para pantallas grandes */
@media (min-width: 1024px) {

	/* Pantallas grandes */
	#button-container {
		flex-direction: row;
		/* Botones en una sola fila */
	}

	#button-container button {
		width: 28px;
		/* Ancho ajustado para pantallas grandes */
		height: 28px;
		/* Alto ajustado para pantallas grandes */
		font-size: 15px;
		/* Tamaño de fuente ajustado */
	}
}

/* Media query para pantallas medianas */
@media (max-width: 1024px) and (min-width: 768px) {

	/* Pantallas medianas */
	#button-container {
		flex-direction: row;
		/* Botones en una sola fila */
	}

	#button-container button {
		width: 24px;
		/* Ancho ajustado para pantallas medianas */
		height: 24px;
		/* Alto ajustado para pantallas medianas */
		font-size: 12px;
		/* Tamaño de fuente ajustado */
	}
}

/* Media query para pantallas pequeñas y dispositivos móviles (iPhone) */
@media (max-width: 768px) {

	/* Pantallas pequeñas */
	#button-container {
		display: flex;
		flex-direction: row;
		/* Botones en una sola fila */
		flex-wrap: wrap;
		/* Permite que los botones se envuelvan si no caben */
		justify-content: center;
		/* Centra los botones */
		margin: 1px;
		/* Reduce el margen */
		padding: 2px;
		/* Ajusta el relleno */
		width: 100%;
		/* Ancho completo */
		box-sizing: border-box;
	}

	#button-container button {
		margin: 2px;
		/* Ajusta el margen */
		padding: 6px;
		/* Ajuste de relleno para mayor tamaño */
		font-size: 12px;
		/* Tamaño de fuente ajustado */
		width: 50px;
		/* Ancho fijo */
		height: 40px;
		/* Alto fijo */
		border-radius: 6px;
		/* Radio de borde mejorado */
	}

	/* Optimización para dispositivos iPhone y móviles en general */
	@media (max-width: 480px) {
		#button-container button {
			width: 45px;
			/* Ancho ajustado para pantallas más pequeñas */
			height: 35px;
			/* Alto ajustado */
			font-size: 10px;
			/* Fuente más pequeña */
			padding: 5px;
			/* Ajuste en el padding */
		}
	}

	/* Para iPhone 5, 5S y dispositivos con pantallas pequeñas */
	@media (max-width: 320px) {
		#button-container button {
			width: 40px;
			/* Ajuste para iPhone más pequeños */
			height: 30px;
			font-size: 9px;
			/* Fuente más pequeña */
			padding: 4px;
			/* Ajuste en el padding */
		}
	}
}







/* Estilos para los botones de Anterior y Siguiente */
#prevBtn,
#nextBtn {
	padding: 12px 24px;
	/* Tamaño de relleno mejorado para mayor comodidad */
	font-size: 16px;
	/* Tamaño de fuente ajustado */
	border: none;
	border-radius: 8px;
	/* Bordes más redondeados para un aspecto más moderno */
	cursor: pointer;
	margin: 10px;
	/* Margen alrededor de los botones */
	transition: background-color 0.3s ease, transform 0.3s ease;
	/* Transición suave para el color y el tamaño */
	display: inline-block;
	/* Se asegura de que los botones estén alineados correctamente */
}

#prevBtn {
	background-color: #6699FF;
	color: white;
}

#nextBtn {
	background-color: #13800E;
	color: white;
}

#prevBtn:hover,
#nextBtn:hover {
	background-color: #555;
	transform: scale(1.05);
	/* Efecto de agrandamiento al pasar el ratón */
}

/* Media Query para pantallas grandes */
@media (min-width: 1024px) {

	#prevBtn,
	#nextBtn {
		font-size: 18px;
		/* Aumentar el tamaño de la fuente en pantallas grandes */
		padding: 14px 28px;
		/* Aumentar el relleno para pantallas grandes */
		margin: 15px;
		/* Más espacio alrededor de los botones */
	}
}

/* Media Query para pantallas medianas (por ejemplo, tabletas) */
@media (max-width: 1024px) and (min-width: 768px) {

	#prevBtn,
	#nextBtn {
		font-size: 14px;
		/* Ajuste del tamaño de fuente para pantallas medianas */
		padding: 12px 24px;
		/* Relleno optimizado */
		margin: 12px;
		/* Margen moderado */
	}
}

/* Media Query para pantallas pequeñas y dispositivos móviles */
@media (max-width: 768px) {

	#prevBtn,
	#nextBtn {
		font-size: 12px;
		/* Reducir tamaño de fuente para dispositivos más pequeños */
		padding: 10px 20px;
		/* Ajuste de tamaño de relleno para móviles */
		margin: 8px;
		/* Márgenes más pequeños */
	}
}

/* Media Query para dispositivos móviles muy pequeños */
@media (max-width: 480px) {

	#prevBtn,
	#nextBtn {
		font-size: 10px;
		/* Fuente aún más pequeña para pantallas muy pequeñas */
		padding: 8px 16px;
		/* Relleno reducido para móviles muy pequeños */
		margin: 5px;
		/* Márgenes mínimos */
	}
}

/* Media query to hide the button container on small screens */


.quiz-test-form {
	flex: 3;
	/* 75% of the width */
	background-color: #e0f7fa;
	padding: 20px;
}

.menu-derecho {
	background-color: #b2dfdb;
	padding: 20px;
}


/* Estilos para el botón enviar */

#submitB {
	background-color: #4CAF50;
	/* Verde */
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 8px;
	transition-duration: 0.4s;
}

#submitB:hover {
	background-color: white;
	color: black;
	border: 2px solid #4CAF50;
}

#submitB:disabled {
	background-color: grey;
	cursor: not-allowed;
	border: 2px solid grey;
}


/* Estilos para el temporizador */
#timer {
	font-size: 24px;
	font-weight: bold;
	color: #0016CC;
	text-align: center;
	margin: 20px 0;
}

#timer.warning {
	color: #ff9900;
	/* Naranja */
}

#timer.danger {
	color: #ff0000;
	/* Rojo */
	animation: blink 1s step-start infinite;
}

@keyframes blink {
	50% {
		opacity: 0;
	}
}


/* Estilos para el mensaje de alerta */
.alert {
	font-size: 18px;
	color: #ff9900;
	/* Naranja */
	text-align: center;
	margin-top: 10px;
	font-weight: bold;
}

/* Estilo para el contenedor del botón */
.redirect-container {
    background-color: #f9f9f9; /* Fondo suave y limpio */
    padding: 20px;
    border-radius: 10px; /* Bordes redondeados para suavizar el diseño */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para resaltar */
    text-align: center; /* Centrar el contenido */
    margin-top: 30px;
}

/* Estilo para el texto */
.redirect-container p {
    font-family: "Encode Sans", Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    color: #333; /* Color oscuro para el texto */
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Estilo para el botón */
#redirectButton {
    font-size: 1.1em;
    padding: 12px 30px;
    background-color: #135cb7; /* Azul institucional */
    color: white; /* Texto blanco para contrastar */
    border: none;
    border-radius: 8px; /* Bordes redondeados */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s; /* Transición suave */
    text-transform: uppercase; /* Texto en mayúsculas */
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* Efecto hover para el botón */
#redirectButton:hover {
    background-color: #ffb301; /* Amarillo dorado en hover */
    transform: scale(1.05); /* Efecto de agrandamiento */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
}

/* Efecto focus para el botón */
#redirectButton:focus {
    outline: none; /* Elimina el contorno por defecto */
    background-color: #dd4b00; /* Rojo cuando está en foco */
}

/* Estilo para la barra de navegación */
.navbar {
    background-color: #135cb7; /* Azul institucional */
    position: fixed; /* Fija la barra en la parte superior */
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px 0; /* Espaciado superior e inferior */
    margin: 0;
    z-index: 1000; /* Asegura que la barra esté encima de otros elementos */
    display: flex;
    justify-content: center; /* Centra los botones */
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil para dar profundidad */
    border-bottom: 2px solid #d6510d; /* Borde inferior con color rojo */
}

/* Estilo para los elementos de la lista */
.navbar li {
    list-style: none;
    display: inline-block;
    margin: 0 20px; /* Más espaciado entre los elementos */
}

.navbar a {
    color: white; /* Texto blanco */
    text-decoration: none;
    font-size: 0.8em; /* Tamaño de texto ajustado */
    font-family: "Encode Sans", Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 12px 25px; /* Mayor espacio interno para los botones */
    border-radius: 30px; /* Bordes redondeados para un estilo moderno */
    background-color: #4a8926; /* Verde oliva institucional */
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; /* Transición suave */
}

/* Efecto hover para los enlaces */
.navbar a:hover {
    background-color: #ffb301; /* Amarillo dorado en hover */
    color: #333; /* Texto oscuro cuando se pasa el ratón */
    transform: scale(1.1); /* Efecto de agrandamiento */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
}

/* Hacer que la barra de navegación sea responsiva */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column; /* Cambia a una columna en pantallas pequeñas */
        align-items: flex-start; /* Alinea los elementos al principio */
        padding: 20px;
    }

    .navbar li {
        margin: 10px 0; /* Espaciado vertical en pantallas pequeñas */
    }

    .navbar a {
        font-size: 1.1em; /* Ajusta el tamaño del texto */
        padding: 10px 20px; /* Relleno ajustado para pantallas más pequeñas */
        width: 100%; /* Los botones ocupan todo el ancho en móviles */
        text-align: center; /* Centra el texto de los botones */
    }
}