﻿/* ======== CONTENEDOR GLOBAL CENTRADO Y RESPONSIVO ======== */
.page-center {
	position: relative;
	height: 100vh; /* ❌ Antes era min-height: 100vh */
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center; /**/ /*
	background-image: url('../images/collectron.png');
	background-image: url('../images/ch.jpeg');*//*
	background-image: url('../images/fondo.jpg');*/
	background-image: url('../images/fondover.jpg');
/*	background-image: url('../images/fut.jpg');
	background-image: url('../images/iah.jpg');
	background-image: url('../images/digi.jpg');
	background-image: url('../images/cont.jpg');*/
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden; /* ❌ Previene scroll innecesario */
	padding: 0; /* ❌ Eliminamos padding que causaba overflow */
	box-sizing: border-box; /* ✅ Incluye padding y border en la altura */
}


	.page-center::before {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(0,0,0,0.4);
		z-index: 1;
	}

	.page-center > * {
		position: relative;
		z-index: 2;
	}


/* Tarjeta interna */
.page-card {
/*	background: rgba(255, 255, 255, 0.95);
	background: rgba(255, 255, 255, 0.95);*/
	background: rgba(214, 255, 249, 0.95);
	padding: clamp(30px, 5vw, 50px);
	border-radius: 16px;
	width: 100%;
	max-width: 450px;
	box-shadow: 0px 10px 30px rgba(0,0,0,0.15);
	box-sizing: border-box;
}

	/* Tipografía */
	.page-card h1 {
		font-family: 'Lato', sans-serif;
		font-size: clamp(24px, 5vw, 36px);
		font-weight: 700;
		color: #3e4b5b;
		margin-bottom: 10px;
	}

	.page-card h6 {
		font-family: 'Lato', sans-serif;
		font-size: clamp(14px, 2.5vw, 18px);
		font-weight: 400;
		color: #3e4b5b;
		margin-bottom: 20px;
	}

	/* Inputs y botón */
	.page-card input {
		width: 100%;
		padding: 12px 14px;
		border-radius: 8px;
		border: 1px solid #ddd;
		margin-bottom: 15px;
		font-size: clamp(14px, 2vw, 16px);
	}

	.page-card .btn-primary {
		width: 100%;
		padding: 12px;
		background: #2F47C2;
		border: none;
		font-weight: 700;
		border-radius: 8px;
		font-size: clamp(14px, 2vw, 16px);
	}

/* Alertas */
.alert {
	margin-top: 15px;
	font-size: 0.9rem;
}

/* Ajuste móvil extra */
@media (max-width: 480px) {
	.page-card {
		padding: 20px;
	}
}



.page-image-top,
.page-image-bottom {
	max-width: 150px; /* Ajusta tamaño */
	width: 20%; /* Escala proporcional a la pantalla */
	height: auto;
	margin: 10px 0;
}

.page-image-top {
	margin-bottom: 20px;
}

.page-image-bottom {
	margin-top: 20px;
}

@media (max-width: 480px) {
	.page-image-top,
	.page-image-bottom {
		width: 40%; /* Más grande proporcional en móvil */
		max-width: 120px;
	}
}



.header {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	gap: 20px; /* Espacio entre logo y texto */
	flex-wrap: wrap; /* Permite que el texto baje en pantallas muy pequeñas */
}

.header-logo-container {
	flex: 1 1 30%; /* Ocupa aproximadamente 1/3 */
	display: flex;
	justify-content: center;
}

.header-logo {
	width: 100%; /* Se ajusta al contenedor */
	max-width: 150px; /* Aumenté para que sea más visible */
	height: auto;
}

.header-title-container {
	flex: 2 1 70%; /* Ocupa 2/3 */
	display: flex;
	align-items: center;
}

.header-title {
	font-size: clamp(18px, 2.5vw, 36px); /* Escalable */
	font-weight: 700;
	color: #3e4b5b;
	margin: 0;
}







.btn-login {
	background-color: #2E3D32; /* color de fondo */
	color: #07D994; /* color del texto */
	border: none; /* elimina borde */
	font-weight: 700;
	border-radius: 8px;
	transition: background-color 0.3s ease; /* efecto hover */
}

	.btn-login:hover {
		background-color: #ff0000; /* color al pasar el mouse */
		color: #2E3D32;
	}




/* Reset */

/**{
	margin: 0;
	padding: 0;
}*/

/* General */
 /*body{
 	font-family: 'Lato', sans-serif;
 	width: 150%;
 }
 .panel-left{
 	background: url(../images/ch.jpeg);
 	background-size: cover;
 	position: relative;
 	z-index: -1;
 	height: 140vh;
 }
 .panel-left::after{
 	background: #303743;
 	content: "";
 	height: 100%;
 	width: 100%;
 	left: 0;
 	top: 0;
 	position: absolute;
 	z-index: 1;
 	opacity: 0.9;
 }
 .panel-left h1{
 	text-align: center;
 	z-index: 2;
 	position: relative;
 }
 .panel-left h1 img{
 	height: 300px;
 	margin-top: 35%;
 }
.panel-right {
	font-family: 'Lato', sans-serif;
	padding: 0px 75px;
	background: #F7F7F7;
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;*/ /* vertical */
	/*align-items: center;*/ /* horizontal */
/*}

 .panel-right h1{
 	color: #3e4b5b;
 	font-weight: 700;
 	margin-top: 2px;
 	text-align: center;
 }
	.panel-right h2 {
		color: #3e4b5b;
		font-weight: 350;
		margin-top: 2px;
		text-align: center;
	}
 .panel-right h6{
 	color: #3e4b5b;
 	font-weight: 700;
 	text-align: center;
 	margin-bottom: 20px;
 }
	.panel-right .form-group label {
		color: #3e4b5b;
		font-size: 16px;
		font-family: 'Lato', sans-serif;
		font-weight: 600;
		margin-top: 5px;
	}
 .panel-right .form-group input{
 	background: #fff;
 	border: 0px;
 	border-radius: 8px;
 	padding: 25px 10px;
 	-webkit-box-shadow: -1px 1px 5px 0px rgba(62,75,91,0.11);
	-moz-box-shadow: -1px 1px 5px 0px rgba(62,75,91,0.11);
	box-shadow: -1px 1px 5px 0px rgba(62,75,91,0.11);
	margin-top: 5px;
 }
 .panel-right .form-group a{
 	color: #2F47C2;
 }
 .panel-right .form-group .btn-primary{
 	background: #2F47C2;
 	width: 100%;
 	font-size: 16px;
 	font-weight: 700;
 	padding: 10px;
 	-webkit-box-shadow: 5px 5px 5px 0px rgba(47,72,194,0.18);
	-moz-box-shadow: 5px 5px 5px 0px rgba(47,72,194,0.18);
	box-shadow: 5px 5px 5px 0px rgba(47,72,194,0.18);
	margin-top: 20px;
 }
 .panel-right h5{
 	color: #3e4b5b;
 	font-weight: 700;
 	position: absolute;
 	
 	left: 40%;
 }
.panel-right .table{
	margin: 0px auto 20px;
	width: 70%;
}
.panel-right .table th{
	padding: 0px 15px;
}
.panel-right .table th input{
	background: #fff;
 	border: 0px;
 	border-radius: 8px;
 	padding: 25px 10px;
 	-webkit-box-shadow: -1px 1px 5px 0px rgba(62,75,91,0.11);
	-moz-box-shadow: -1px 1px 5px 0px rgba(62,75,91,0.11);
	box-shadow: -1px 1px 5px 0px rgba(62,75,91,0.11);
	margin-top: 8px;
	text-align: center;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
	border-top: 0px;
}*/
/* Responsive */

/*@media screen and (max-width: 1200px) {
	.panel-left h1 img{
	 	height: 200px;
	 	margin-top: 55%;
	}
	.panel-right h5{
 	color: #3e4b5b;
 	font-weight: 700;
 	position: absolute;
 	bottom: 30px;
 	left: 35%;
 	}
}

@media screen and (max-width: 992px) {
	.panel-left h1 img{
	 	height: 200px;
	 	margin-top: 60%;
	}
	.panel-right h5{
 	color: #3e4b5b;
 	font-weight: 700;
 	position: absolute;
 	bottom: 30px;
 	left: 30%;
 	}
}

@media screen and (max-width: 768px) {
	.panel-left{
		max-height: 500px;
		margin-top: -20px;
	}
	.panel-left h1 img{
	 	height: 150px;
	 	margin-top: 25%;
	}
	.panel-right{
		padding: 10px 50px;
		height: 100%; 
	}
	.panel-right h1{
		margin-top: 5%;
	}
	.panel-right h5{
		margin:60px 0px 0px;
		position: relative;
		text-align: center;
		left: 0%;
	}
}
@media screen and (max-width: 600px) {
	.panel-left{
		max-height: 400px;
		margin-top: -20px;
	}
	.panel-left h1 img{
	 	height: 100px;
	 	margin-top: 45%;
	}
	.panel-right{
		padding: 10px 30px;
		height: 100%; 
	}
	.panel-right h1{
		margin-top: 5%;
	}
	.panel-right h6{
		margin-bottom: 50px;
	}
	.panel-right h5{
		margin:60px 0px 0px;
		position: relative;
		text-align: center;
		left: 0%;
	}
	.panel-right .table{
		width: 100%;
	}
	.panel-right .table th{
		padding: 0px 10px;
	}
}*/