@charset "ISO-8859-1";

:root {
	--color-surface-registraduria-primary: #033A6B;
	--color-surface-button-on-button: #01E9FF;
	--color-surface-background-bg: #F3F7F8;
	--sizes-radius-24: 24px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body, html {
	height: 100%;
	width: 100%;
	overflow: hidden;
}

/* Contenedor principal con gradiente de fondo */
.login-container {
	display: flex;
	height: 100vh;
	width: 100vw;
	background: var(--color-surface-registraduria-primary);
	position: relative;
	overflow: hidden;
}

/* Efecto de blur circular */
.login-container::before {
	content: '';
	width: 586px;
	height: 551px;
	left: 95px;
	top: 151px;
	position: absolute;
	background: var(--color-surface-button-on-button);
	box-shadow: 344px 344px 344px rgba(1, 233, 255, 0.3);
	border-radius: 9999px;
	filter: blur(172px);
	z-index: 0;
}

/* Contenedor wrapper para centrar logos e imagen */
.content-wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	padding: 2rem;
}

/* Contenedor de logos */
.logo-container {
	display: flex;
	align-items: center;
	gap: 3.5rem;
	margin-bottom: 3rem;
}

.logo-registraduria {
	height: 60px;
	width: auto;
}

.logo-separator {
	width: 2px;
	height: 60px;
	background: white;
	opacity: 0.7;
}

.logo-elecciones {
	height: 60px;
	width: auto;
}

/* Contenedor de la imagen */
.image-container {
	margin-bottom: -30px;
	flex: 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

/* Imagen de la mujer votando */
.voting-image {
	max-width: 520px;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* Contenedor del lado derecho (formulario) */
.login-right {
	flex: 0 0 630px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 2.5rem;
	position: relative;
	z-index: 1;
}

/* Contenedor del formulario con card */
.login-form-container {
	width: 100%;
	max-width: 540px;
	height: 600px;
	border-radius: var(--sizes-radius-24);
	background: var(--color-surface-background-bg);
	padding: 3rem 2.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
	overflow-y: auto;
}

/* Título del formulario */
.login-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 2rem;
	line-height: 1.3;
	text-align: left;
}

/* Labels de los campos */
.form-label {
	display: block;
	font-size: 0.9rem;
	font-weight: 500;
	color: #1a1a1a;
	margin-bottom: 0.5rem;
	text-align: left;
}

/* Grupo de formulario */
.form-group {
	margin-bottom: 1.5rem;
}

/* Inputs del formulario */
.form-input {
	width: 100%;
	padding: 0.95rem 1.2rem;
	border: 1.5px solid #d1d5db;
	border-radius: 50px;
	font-size: 0.95rem;
	transition: all 0.3s ease;
	background: white;
	font-family: inherit;
}

.form-input:focus {
	outline: none;
	border-color: #0052A3;
	box-shadow: 0 0 0 3px rgba(0, 82, 163, 0.08);
}

.form-input::placeholder {
	color: #9ca3af;
}

/* Contenedor de contraseña con icono */
.password-container {
	position: relative;
}

.password-toggle {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: #6b7280;
	user-select: none;
	font-size: 1.1rem;
}

.password-toggle:hover {
	color: #374151;
}

/* Botón de ingreso */
.btn-login {
	width: 100%;
	padding: 0.95rem;
	background: #003d7a;
	color: white;
	border: none;
	border-radius: 50px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	margin-top: 1rem;
	font-family: inherit;
}

.btn-login:hover {
	background: #002a54;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 61, 122, 0.4);
}

.btn-login:active {
	transform: translateY(0);
}

/* Footer del login */
.login-footer {
	margin-top: 2.5rem;
	text-align: center;
	font-size: 0.8rem;
	color: #6b7280;
	line-height: 1.6;
}

/* Mensajes de error/información */
.ui-growl {
	z-index: 9999;
}

/* Responsive Design */
@media ( max-width : 1400px) {
	.login-right {
		flex: 0 0 580px;
		padding: 2rem;
	}
	.voting-image {
		max-width: 480px;
	}
	.content-wrapper {
		padding: 2rem 1.5rem;
	}
}

@media ( max-width : 1200px) {
	.login-right {
		flex: 0 0 540px;
		padding: 2rem 1.5rem;
	}
	.login-form-container {
		max-width: 500px;
		padding: 2.5rem 2rem;
	}
	.voting-image {
		max-width: 420px;
	}
	.logo-container {
		gap: 1.2rem;
		margin-bottom: 2.5rem;
	}
	.logo-registraduria, .logo-elecciones {
		height: 50px;
	}
	.logo-separator {
		height: 50px;
	}
}

@media ( max-width : 1024px) {
	.login-container {
		flex-direction: column;
	}
	.content-wrapper {
		flex: 0;
		min-height: 250px;
		padding: 1.5rem 1rem;
	}
	.logo-container {
		margin-bottom: 1.5rem;
	}
	.image-container {
		flex: 0;
	}
	.voting-image {
		max-width: 300px;
	}
	.login-right {
		flex: 1;
		padding: 1.5rem;
	}
	.login-form-container {
		max-width: 100%;
		padding: 2rem 1.5rem;
	}
	.logo-registraduria, .logo-elecciones {
		height: 45px;
	}
	.logo-separator {
		height: 45px;
	}
}

@media ( max-width : 768px) {
	.content-wrapper {
		display: none;
	}
	.login-right {
		padding: 1.5rem;
	}
	.login-form-container {
		padding: 2rem 1.5rem;
	}
	.login-title {
		font-size: 1.1rem;
		margin-bottom: 1.8rem;
	}
}

@media ( max-width : 480px) {
	.login-right {
		padding: 1rem;
	}
	.login-form-container {
		padding: 1.8rem 1.2rem;
		border-radius: 16px;
	}
	.login-title {
		font-size: 1rem;
		margin-bottom: 1.5rem;
	}
	.form-input {
		padding: 0.85rem 1rem;
		font-size: 0.9rem;
	}
	.btn-login {
		padding: 0.85rem;
		font-size: 0.95rem;
	}
	.form-group {
		margin-bottom: 1.3rem;
	}
	.login-footer {
		font-size: 0.75rem;
		margin-top: 2rem;
	}
}

@media ( max-width : 360px) {
	.login-form-container {
		padding: 1.5rem 1rem;
	}
	.login-title {
		font-size: 0.95rem;
	}
}