/* 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;
}
/* 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;
	}
}
/*@media (min-width: 1025px) {
        .bandera {
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        }
        .tablas-container {
                flex-direction: column;
                align-items: center;
        }
        table {
                width: 100%; /* Ancho completo en pantallas pequeñas 
        }
        th, td {
                padding: 10px;
                font-size: .6em;
        }
}*/
.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;
}
.ubicacion{
	text-align: center;
    width: 70%;
    background-color: rgba(255, 255, 255, .6);
    border: solid black 1px;
    border-radius: 5px;
}