/* CSS Document */
body {
	font-family: 'Source Code Pro', monospace;
	background-color: #f2f2f2;
	display: flex;
	justify-content: center; /* Centra horizontalmente */
	align-items: center; /* Centra verticalmente */
	height: 100vh; /* Establece el alto al 100% del viewport height */
	margin: 0;
}
#menu {
	display: inline-block;
	width: 100%;
	font-family: 'Montserrat', sans-serif;
	position: relative;
	align-content: center;
}
main {
	position: absolute;
	width: 100%;
	top: 30vh;
}
.login-container {
	background-color: #fff;
	max-width: 400px;
	padding: 40px;
	border-radius: 5px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	align-content: center;
}
.form-group {
	margin-bottom: 15px;
}
label {
	display: block;
	font-weight: bold;
}
input[type="text"], input[type="password"] {
	align-self: center;
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
}
button {
	background-color: #007BFF;
	color: #fff;
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
}
#error-message {
	color: red;
	text-align: center;
	margin-top: 10px;
}
h2 {
	vertical-align: top;
	text-align: center;
	font-size: 2em;
	margin: 35px;
}
.return {
	text-decoration: none;
	color: white;
	margin: 10px;
	border-collapse: collapse;
	border: 1px solid black;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}
/* Estilo para la bandera */
header {
	width: 100%;
	height: 25vh; /* 6% de la altura de la ventana */
	position: absolute; /* Mantiene el header fijo en la parte superior */
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Estilo para la bandera */
.bandera {
	width: 100%; /* Ancho completo del header */
	height: 100%; /* Altura completa del header */
	display: flex;
	justify-content: space-between;
}
/* Franja verde a la izquierda */
.franja-verde {
	width: 33.33%;
	height: 100%;
	background-color: #006847; /* Verde */
	position: absolute;
	left: 0;
	top: 0;
}
/* Franja blanca en el medio */
.franja-blanca {
	width: 33.33%;
	height: 100%;
	background-color: white;
	position: absolute;
	left: 33.33%;
	top: 0;
}
/* Franja roja a la derecha */
.franja-roja {
	width: 33.33%;
	height: 100%;
	background-color: #CE1126; /* Rojo */
	position: absolute;
	right: 0;
	top: 0;
}
/* Escudo en el centro */
.escudo {
	width: 60px; /* Ajusta el tamaño del escudo según tus necesidades */
	height: 60px; /* Ajusta el tamaño del escudo según tus necesidades */
	background-image: url("../imagenes/logo_pri.png");
	background-size: cover; /* La imagen se ajusta al círculo */
	background-position: center; /* Centra la imagen en el círculo */
	/*background-color: #fff; /* Blanco */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}
/* Estilo para las tablas */
.tablas-container {
	position: absolute;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	align-content: center;
	justify-content: space-between;
	width: 100%;
}
table {
	width: 90%;
	margin: 2.5vh;
	border-collapse: collapse;
	border: 1px solid #ddd;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
	background-color: #fff;
}
.structure {
	width: 100%;
	text-align: center;
}
.Estructura {
	font-size: 4vh;
	font-weight: 900;
}
.Listado {
	font-size: 3vh;
	font-weight: 700;
}
th, td {
	padding: 10px;
	text-align: center;
	border: 1px solid #ddd;
	font-size: 1em;
}
.num {
	width: 5%;
}
.pri {
	background: linear-gradient(to right, green 33.33%, white 33.33%, white 66.66%, red 66.66%); /* Color de fondo para las cabeceras */
	color: black;
	position: relative;
	overflow: hidden;
	animation: ondear 2s ease-in-out infinite;
}
.pan {
	background: linear-gradient(to right, #003478 33.33%, white 33.33%, white 66.66%, #003478 66.66%);
	color: black;
	text-align: center;
	position: relative;
	overflow: hidden;
	animation: ondear 2s ease-in-out infinite;
}
@keyframes ondear {
	0%, 100% {
		transform: perspective(400px) rotateX(0deg);
	}
	25% {
		transform: perspective(400px) rotateX(10deg);
	}
	50% {
		transform: perspective(400px) rotateX(0deg);
	}
	75% {
		transform: perspective(400px) rotateX(-10deg);
	}
}
tr:nth-child(even) {
	background-color: #f2f2f2; /* Color de fondo para filas pares */
}
/* Estilo para las cabeceras de las tablas */
thead {
	background-color: #006847; /* Color de fondo para las cabeceras */
	color: white;
}
/* Estilo de pestañas */
.tab {
	width: 100%;
	overflow: hidden;
	border: 1px solid #ccc;
	background-color: #f1f1f1;
}
.tab button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
}
.tab button:hover {
	background-color: #ddd;
}
.tab button.active {
	background-color: #ccc;
}
.tabcontent {
	display: none;
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;
}
.tabcontent.active {
	display: block;
}
.ruta {
	width: 10%;
	align-content: center;
}
.morena {
	background: linear-gradient(to right, #9D2449 33.33%, white 33.33%, white 66.66%, #9D2449 66.66%);
	color: black;
	text-align: center;
	position: relative;
	overflow: hidden;
	animation: ondear 2s ease-in-out infinite;
}
.titles {
	width: 100%; /* Ocupa todo el ancho de la página */
	text-align: center; /* Centra el contenido horizontalmente */
	background-color: #e0e0e0;
	padding: 20px 0; /* Espacio superior e inferior */
	box-sizing: border-box; /* Incluye el padding en el ancho */
}
.titles h2 {
	margin-top: 0;
	margin-bottom: 10px;
}
.ubicacion {
	width: 60%; /* Ocupa el 60% del ancho del .titles */
	margin: 0 auto; /* Centra el div ubicacion horizontalmente */
	text-align: center; /* Centra el texto dentro de ubicacion */
	background-color: #ffffff;
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.ubicacion a {
	display: block; /* Hace que el enlace ocupe su propia línea para centrarse mejor */
	margin-top: 10px;
}
/* Consultas de medios para tamaños de pantalla diferentes */
@media (max-width: 320px) {
	.bandera {
		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	}
	table {
		width: 100%; /* Ancho completo en pantallas pequeñas */
	}
	th, td {
		padding: 10px;
		font-size: .6em;
	}
}
@media (min-width: 321px) and (max-width: 480px) {
	.bandera {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
	table {
		width: 100%; /* Ancho completo en pantallas pequeñas */
	}
	th, td {
		padding: 10px;
		font-size: .6em;
	}
}
@media (min-width: 481px) and (max-width: 768px) {
	.bandera {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}
	table {
		width: 100%; /* Ancho completo en pantallas pequeñas */
	}
	th, td {
		padding: 10px;
		font-size: .6em;
	}
}
@media (min-width: 769px) and (max-width: 1024px) {
	.bandera {
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	}
	table {
		width: 100%; /* Ancho completo en pantallas pequeñas */
	}
	th, td {
		padding: 10px;
		font-size: .6em;
	}
}