@charset "utf-8";

/* ============================================================
   NUEVO DISEÑO LOGIN - Parque Jaime Duque
   Tarjeta flotante sobre imagen de fondo full-screen
   Base de referencia: 1440px de ancho
   ============================================================ */

*, *::before, *::after {
	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 1vw;
	overflow: hidden;
}

/* ---- Barra superior ---- */
.barra-superior {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3vw;
	background-color: #1565c0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1.4vw;
	z-index: 100;
	font-size: 0.9vw;
	color: #fff;
}

.barra-superior .barra-izq {
	display: flex;
	align-items: center;
	gap: 0.5vw;
	cursor: pointer;
	text-decoration: none;
	color: #fff;
}

.barra-superior .barra-izq:hover {
	text-decoration: none;
	font-weight: 700;
}

.barra-superior .barra-der {
	font-weight: 500;
	font-size: 0.9vw;
}

/* ---- Fondo: imagen a pantalla completa con overlay azul ---- */
.login-wrapper {
	position: fixed;
	inset: 0;
	padding-top: 3vw;
	background-image: url('../imagenes/fondo.jpg?v=2');
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: 6vw;
}

/* Overlay azul semitransparente sobre toda la imagen */
.login-wrapper::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(13, 71, 161, 0.62);
	z-index: 0;
}

/* ---- Tarjeta blanca flotante ---- */
.login-card {
	position: relative;
	z-index: 10;
	width: 26vw;
	background-color: #fff;
	border-radius: 1.1vw;
	padding: 2.8vw 3vw;
	box-shadow: 0 0.55vw 2.8vw rgba(0,0,0,0.30);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	overflow-y: auto;
	max-height: calc(100vh - 4vw);
}

/* ---- Logo + slogan sobre el fondo (desktop) ---- */
.login-bg-content {
	position: absolute;
	right: 25vw;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	text-align: center;
	max-width: 29vw;
}

.login-bg-content img.logo-derecha {
	width: 29vw;
	max-width: 100%;
	margin-bottom: 1.7vw;
}

.login-bg-content .slogan {
	font-size: 1.9vw;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
	text-shadow: 0.07vw 0.14vw 0.55vw rgba(0,0,0,0.4);
}

/* ---- Logo mobile: oculto en desktop ---- */
.logo-mobile {
	display: none;
}

/* ---- Contenido de la tarjeta ---- */
.card-titulo {
	font-size: 1.55vw;
	font-weight: 700;
	color: #1565c0;
	text-align: center;
	line-height: 1.2;
	margin-bottom: 0.55vw;
}

.card-label-sesion {
	font-size: 0.9vw;
	color: #444;
	margin-bottom: 1.25vw;
	text-align: center;
}

/* Inputs modernos con placeholder */
.input-moderno {
	width: 100%;
	padding: 0.97vw 1.1vw;
	font-size: 1vw;
	font-family: 'Roboto', Arial, sans-serif;
	border: 0.1vw solid #c8d6e8;
	border-radius: 0.55vw;
	outline: none;
	color: #333;
	background-color: #f7fafd;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	margin-bottom: 0.97vw;
}

.input-moderno:focus {
	border-color: #1565c0;
	background-color: #fff;
	box-shadow: 0 0 0 0.2vw rgba(21, 101, 192, 0.12);
}

/* Contenedor input con ícono */
.input-wrapper {
	position: relative;
	margin-bottom: 0.28vw;
}

.input-wrapper .input-moderno {
	padding-right: 3vw;
	margin-bottom: 0;
}

.input-wrapper .input-icon {
	position: absolute;
	right: 0.83vw;
	top: 50%;
	transform: translateY(-50%);
	color: #90a4ae;
	font-size: 1.2vw;
	cursor: pointer;
	user-select: none;
}

.input-wrapper .input-icon:hover {
	color: #1565c0;
}

/* Tooltip personalizado */
.tooltip-texto {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	right: 0;
	top: calc(100% + 0.4vw);
	background-color: rgba(25, 35, 55, 0.93);
	color: #fff;
	padding: 0.7vw 1vw;
	border-radius: 0.6vw;
	font-size: 0.85vw;
	line-height: 1.6;
	white-space: normal;
	width: 18vw;
	z-index: 200;
	pointer-events: none;
	transition: opacity 0.1s ease;
	box-shadow: 0 0.3vw 1.2vw rgba(0,0,0,0.35);
}

.input-icon:hover + .tooltip-texto {
	visibility: visible;
	opacity: 1;
}

/* Link recuperación de clave */
.link-olvido {
	display: block;
	text-align: right;
	font-size: 0.83vw;
	color: #1565c0;
	text-decoration: none;
	margin-top: 0.42vw;
	margin-bottom: 1.5vw;
	font-style: italic;
}

.link-olvido:hover {
	text-decoration: none;
	font-weight: 700;
}

/* Botón ingresar */
.btn-ingresar {
	width: 100%;
	padding: 0.97vw;
	background-color: #1565c0;
	color: #fff;
	font-size: 1.05vw;
	font-weight: 600;
	font-family: 'Roboto', Arial, sans-serif;
	border: none;
	border-radius: 0.55vw;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
	margin-bottom: 1.5vw;
	letter-spacing: 0.02vw;
}

.btn-ingresar:hover {
	background-color: #0d47a1;
	box-shadow: 0 0.28vw 0.97vw rgba(21, 101, 192, 0.35);
}

/* Línea de registro */
.registro-linea {
	font-size: 0.88vw;
	color: #555;
	text-align: center;
	margin-bottom: 0.42vw;
}

.btn-registrarse {
	display: inline-block;
	padding: 0.35vw 0.97vw;
	background-color: #1565c0;
	color: #fff;
	font-size: 0.85vw;
	font-weight: 600;
	border-radius: 1.4vw;
	text-decoration: none;
	margin-left: 0.42vw;
	margin-top: 0.5vw;
	transition: background-color 0.2s;
}

.btn-registrarse:hover {
	background-color: #0d47a1;
}

/* Powered by */
.poweredby-card {
	text-align: center;
	font-size: 0.8vw;
	color: #aaa;
	margin-top: 1.7vw;
}

.poweredby-card a {
	color: #1565c0;
	font-weight: bold;
	text-decoration: none;
}

.poweredby-card a:hover {
	text-decoration: none;
	font-weight: 700;
}

/* ---- Mensajes de error ---- */
#mensaje-error {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 500;
}

.fondo-error {
	background-color: #000a;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
}

.cont-mensaje-error {
	width: 50%;
	margin-left: 25%;
	padding: 2vw;
	background-color: #f6e8a3;
	border: 0.2vw solid #665608;
	border-radius: 0.83vw;
	position: fixed;
	top: 15%;
	z-index: 600;
}

.error-titulo {
	font-size: 1.4vw;
	color: #505050;
	text-align: center;
	font-weight: bold;
	margin-bottom: 0.7vw;
}

.error-texto {
	font-size: 1vw;
	color: #505050;
	text-align: center;
}

.error-mensaje {
	font-size: 0.95vw;
	color: #505050;
	margin: 1.1vw 0 0 20%;
	white-space: pre-line;
}

.boton {
    width: 40%;
    margin: auto;
    text-align: center;
    background-color: #fa9;
    padding: 1vw;
    border-radius: 1vw;
    font-size: 1.25vw;
    cursor: pointer;
}

.logo-slogan{
	width: 75%;
}

/* ---- Responsive: tablet (<=1024px) ---- */
@media (max-width: 1024px) {
	.login-wrapper {
		justify-content: center;
		padding-left: 0;
	}
	.login-bg-content {
		right: 3vw;
	}

}

/* ---- Responsive: móvil (<=768px) ---- */
@media (max-width: 768px) {
	html, body {
		overflow: auto;
		font-size: 3.5vw;
	}

	.barra-superior {
		height: 10vw;
		padding: 0 4vw;
		font-size: 3vw;
	}

	.barra-superior .barra-der {
		display: none;
	}

	.login-wrapper {
		position: relative;
		min-height: 100vh;
		justify-content: center;
		align-items: center;
		padding: 14vw 5vw 8vw;
		overflow: auto;
		flex-direction: column;
	}

	/* Ocultar logo/slogan del fondo en movil */
	.login-bg-content {
		display: none;
	}

	/* Mostrar logo arriba de la tarjeta en movil */
	.logo-mobile {
		display: inline;
		justify-content: center;
		margin-bottom: 5vw;
		position: relative;
		z-index: 10;
	}

	.logo-mobile img {
		width: 85vw;
	}

	.login-card {
		width: 100%;
		max-width: 90vw;
		padding: 7vw 6vw 8vw;
		max-height: none;
		border-radius: 3vw;
	}

	.card-titulo {
		font-size: 5vw;
	}
		
	.card-label-sesion {
		font-size: 3.5vw;
	}

	.input-moderno {
		padding: 3.5vw 4vw;
		font-size: 3.5vw;
		border-radius: 2vw;
		margin-bottom: 3vw;
	}

	.input-wrapper .input-moderno {
		padding-right: 10vw;
	}

	.input-wrapper .input-icon {
		right: 3vw;
		font-size: 4.5vw;
	}

	.link-olvido {
		font-size: 3vw;
		margin-bottom: 5vw;
	}

	.btn-ingresar {
		padding: 3.5vw;
		font-size: 4vw;
		border-radius: 2vw;
		margin-bottom: 5vw;
	}

	.registro-linea {
		font-size: 3vw;
	}

	.btn-registrarse {
		font-size: 3vw;
		padding: 1.5vw 3.5vw;
		border-radius: 5vw;
	}

	.poweredby-card {
		font-size: 2.8vw;
		margin-top: 5vw;
	}

	.cont-mensaje-error {
		width: 90%;
		margin-left: 5%;
		padding: 5vw;
	}

	.error-titulo {
		font-size: 4.5vw;
	}

	.error-texto {
		font-size: 3.5vw;
	}

	.error-mensaje {
		font-size: 3vw;
		margin-left: 5%;
	}

	.boton {
		width: 70%;
		font-size: 5vw;
	}

}