body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.header {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* Alinea los items en el centro verticalmente */
    padding: 10px 20px; /* Reducir padding */
    background-color: #f4f4f4;
}

.header .logos {
    display: flex;
    align-items: center;
    margin-right: 10px; /* Reducir margen entre los logos y el título */
}

.header .logos img {
    margin-left: 10px; /* Mantener separación entre los logos */
}

.header .title {
    margin-left: 15px; 
    text-align: left; /* Alinear título a la izquierda */
}

.header .title h1 {
    margin: 0; /* Eliminar márgenes en el título */
    font-size: 2em;
}

.header .title h2 {
    margin: 0; /* Eliminar márgenes en el título */
    font-size: 1.6em;
}

/* Ajustes para asegurar que se vea bien en diferentes pantallas */
@media (max-width: 768px) {
    .header {
        flex-direction: row; /* Mantener los logos y el título en una fila en pantallas pequeñas */
        text-align: center;
    }
}

body {

	font-family: Helvetica, sans-serif;

	font-style: normal;

	font-weight: normal;

	background-color: #FFFFFF;

	word-spacing: normal;

	color: #000000;

	text-align: justify;
}

.mmenu {

	font-family: Helvetica, sans-serif;

	font-size: 12px;

	font-style: normal;

	font-weight: normal;

	background-color: #FFFFFF;

	text-align: center;

	white-space: normal;

	display: list-item;

	clear: none;

	float: none;

	height: auto;

	width: 85px;

	line-height: 30px;

	list-style-type: none;

	position: static;

	visibility: visible;

	cursor: hand;

	color: #999999;

	border: thin solid #FF3300;

	left: 5px;

	list-style-position: outside;

	text-decoration: none;

	word-spacing: normal;

	padding: 0px;

	margin: auto;

	clip:          rect(auto auto auto auto);

	top: auto;

	right: auto;

	bottom: auto;

	vertical-align: middle;

	background-attachment: fixed;
}

.selected {

	font-family: Helvetica, sans-serif;

	font-size: 12px;

	font-weight: bold;

	background-color: #FF3300;

	list-style-type: none;

	color: #FFFFFF;

	display: block;

	position: static;

	cursor: hand;

	line-height: 30pt;

	float: none;

	font-style: normal;

	text-align: center;

	width: 85px;

	text-decoration: none;

	height: auto;

	visibility: visible;

}

a:link, a:visited{
	font-family: Helvetica, sans-serif;
	font-style: normal;
	text-decoration: none;
	cursor: hand;
	color: #C30008;
	font-weight: bold;
}

.front {
	background-color: #FFFFFF;
	border: thin none #000000;
	font-family: Helvetica, sans-serif;
	color: #000000;
	font-size: 16px;
	text-decoration: none;
	clear: none;
	float: none;
	list-style-position: inside;
	list-style-type: none;
	position: static;
	visibility: visible;
	height: auto;
	max-width: 1100px;
}

ul {
        list-style: url(none) none;
        margin: 0;
        padding: 0;
        }

#menu5 {
	width: 200px;
	border-style: none solid none solid;
	border-color: #D0D0D0;
	border-width: 1px;
	margin: 10px;
	float: left;
        }

#menu5 li a {
	height: 32px;
	float: left;
	display: block;
}

#menu5 li a:link, #menu5 li a:visited {
	color: #666666;
	display: block;
	background: #FFFFFF;
	padding: 8px 25px 0 10px;
	text-align: right;
	border: thin solid #FF3300;
	font-family: Georgia;
	float: right;
        }

#menu5 li a:hover, #menu5 li #current {
	color: #FFFFFF;
	background: #000000 url(images/menu5.gif) -32px;
	padding: 8px 25px 0 10px;
	text-align: center;
	font-family: Georgia;
	float: left;
	display: block;
        }

#menu5 li a:active {
	color: #FFFFFF;
	background: #000000 url(images/menu5.gif) -64px;
	padding: 8px 25px 0 10px;
	text-align: center;
	font-family: Georgia;
	float: left;
	display: block;
        }

.tablas {
	background-color: #FFFFFF;
	border: thin none #666699;
	font-family: Helvetica, sans-serif;
	color: #000000;
	font-size: 16px;
	text-decoration: none;
	clear: none;
	float: none;
	list-style-position: outside;
	list-style-type: none;
	text-align: justify;
	position: static;
	display: block;
	margin-left: 50px;
	margin-right: 20px;
	overflow: visible;
	max-width: 1100px;
	visibility: visible;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.flex-row {
	display: flex;
	flex-wrap: wrap;
}

a:hover {
	font-family: Helvetica, sans-serif;
	font-style: normal;
	color: #000000;
	cursor: hand;
	text-decoration: none;
	font-weight: bold;
}

#navlist {
	font-family: Helvetica, sans-serif;
	cursor: hand;
	display: block;
	text-align: center;
	clear: none;
	width: 1200px;
	position: absolute;
	visibility: visible;
	margin-left: 60px;
	left: -18px;
	top: 703px;
}

#navlist ul li {
	float: left;
	cursor: hand;
	text-align: center;
	list-style-position: inside;
}

#navlist ul li a:active {
	background-color: #FFFFFF;
	border: thick solid #000000;
}

#navlist ul li a:hover {
	background-color: #FFFFFF;
	border: medium solid;
}

#navlist ul li a {
	list-style-type: none;
	color: #000000;
	list-style-position: inside;
	font-family: Georgia,;
	font-size: 16px;
	background-color: #FFFFFF;
	cursor: hand;
	text-align: center;
	height: 35px;
	width: 105px;
	margin-top: 30px;
	margin-left: 3px;
	padding: 3px;
	font-weight: bold;
	border: thin solid;
	display: block;
}

#navlist li #current {
	background-color: #FFFFFF;
	border: medium solid;
}

.puntos {
	list-style-type: disc;
	margin-left: 20px;
}

.text {
	font-family: Georgia;
	font-size: 12px;
	color: #000000;
	width: 900px;
	text-align: justify;
	display: block;
	margin-left: 50px;
	margin-right: 10px;
	background-color: #FFFFFF;
}
.rojo {
	color: #B90000;
}

.centro {
	color: #B90000;
}

/* Barra de navegación principal */
ul.MenuBarHorizontal {
    margin-left: 40px;
    margin-right: 20px;
    padding: 0;
    list-style-type: none;
    font-size: 14px;  /* Tamaño de fuente más grande y legible */
    cursor: default;
    width: 100%;
    display: flex;
    justify-content: left;
    background-color: #FFFFFF;  /* Fondo oscuro para la barra de navegación */
}

/* Estilo para los elementos de la barra de navegación */
ul.MenuBarHorizontal li {
    padding: 10px 10px;
	font-family: Arial, sans-serif;
    text-align: center;
	vertical-align: middle;
    cursor: pointer;
    position: relative;
}

/* Estilo de los enlaces (items de menú) */
ul.MenuBarHorizontal a {
    display: block;
    padding: 10px 20px;
    color: #FFF;
	font-family: Arial, sans-serif;
    text-decoration: none;
    background-color: #B90000;  /* Color de fondo rojo */
    border-radius: 4px;  /* Bordes redondeados */
    transition: background-color 0.3s, transform 0.3s ease;  /* Transición suave */
}

/* Efecto hover */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
    background-color: #0056b3;  /* Color azul al pasar el ratón */
    transform: translateY(-2px);
}

/* Submenú (si existe) */
ul.MenuBarHorizontal ul {
    position: absolute;
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 14px;
    background-color: #333;
    border-radius: 4px;
    display: none;  /* Ocultar submenú por defecto */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Mostrar submenú cuando se activa */
ul.MenuBarHorizontal li:hover > ul {
    display: block;
    left: 0;
    top: 100%;  /* Aparece justo debajo del item principal */
}

/* Estilo de los elementos dentro del submenú */
ul.MenuBarHorizontal ul li {
    width: 100%;
}

/* Estilo de los enlaces en el submenú */
ul.MenuBarHorizontal ul a {
    background-color: #444;  /* Color de fondo más oscuro para submenú */
    padding: 10px;
    border-radius: 4px;
}

/* Efecto hover para el submenú */
ul.MenuBarHorizontal ul a:hover {
    background-color: #0056b3;  /* Color azul al pasar el ratón */
}

/* Indicador de submenu con flecha */
ul.MenuBarHorizontal a.MenuBarItemSubmenu {
    background-image: url('icon-down.svg');
    background-repeat: no-repeat;
    background-position: right 10px center;
}

/* Mejora de la responsividad */
@media (max-width: 768px) {
    ul.MenuBarHorizontal {
        flex-direction: column;  /* Cambiar la barra de navegación a columna en pantallas pequeñas */
    }

    ul.MenuBarHorizontal li {
        width: 80%;  /* Hacer los elementos de la barra de navegación de ancho completo */
    }

    ul.MenuBarHorizontal a {
        text-align: center;
        padding: 12px;  /* Aumentar el padding para facilitar la interacción en dispositivos táctiles */
    }

    /* Mostrar submenú en móviles al hacer clic */
    ul.MenuBarHorizontal li:hover > ul {
        display: block;
    }
}

a#current{
    display: block;
    padding: 10px 20px;
    color: #FFF;
	font-family: Arial, sans-serif;
    text-decoration: none;
    background-color: #444;  /* Color de fondo rojo */
    border-radius: 4px;  /* Bordes redondeados */
    transition: background-color 0.3s, transform 0.3s ease;  /* Transición suave */
}