@charset "utf-8";

/* ============================================================
   FORMULARIO REGISTRO PERSONA NATURAL - Parque Jaime Duque
   Panel blanco centrado sobre imagen de fondo full-screen
   Base de referencia: 1440px de ancho
   ============================================================ */

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

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

/* ---- Fondo fijo con overlay ---- */
body {
	background-image: url('../imagenes/fondo.jpg');
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}

body::before {
	content: '';
	position: fixed;
	inset: 0;
	background-color: rgba(13, 71, 161, 0.62);
	z-index: 0;
}

/* ---- 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;
}

/* ---- Área del formulario ---- */
.form-wrapper {
	position: relative;
	z-index: 1;
	padding-top: 4vw;
	padding-bottom: 2vw;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

/* ---- Panel blanco central ---- */
.form-panel {
	background-color: #fff;
	width: 58vw;
	border-radius: 1.1vw;
	padding: 2.5vw 3.5vw 2vw;
	box-shadow: 0 0.55vw 2.8vw rgba(0,0,0,0.30);
	margin: 0.5vw 0;
}

/* ---- Título del formulario ---- */
.titulo {
	font-size: 1.55vw;
	font-weight: 700;
	color: #1565c0;
	text-align: center;
	margin-bottom: 0.4vw;
	line-height: 1.2;
}

.form-volver {
	text-align: center;
	margin-bottom: 0.8vw;
}

.form-volver a {
	font-size: 0.88vw;
	color: #1565c0;
	text-decoration: none;
	font-weight: 500;
}

.form-volver a:hover {
	font-weight: 700;
}

/* ---- Mensaje de estado / error ---- */
.usuario {
	font-size: 0.88vw;
	color: #555;
	text-align: center;
	padding: 0.3vw 0;
	min-height: 1.5vw;
}

.mensaje_error {
	font-size: 0.88vw;
	color: #c62828;
	background-color: #ffebee;
	border: 0.07vw solid #ef9a9a;
	border-radius: 0.4vw;
	padding: 0.55vw 1vw;
	text-align: center;
	margin-bottom: 0.8vw;
}

/* ---- Sección de identificación ---- */
.contenedor-principal {
	width: 100%;
}

.contenedor-1,
.contenedor[id="contenedor-2"] {
	display: flex;
	align-items: center;
	gap: 0.7vw;
	margin-bottom: 0.8vw;
}

.txt-identificacion {
	flex: 0 0 18vw;
}

.input-identificacion {
	flex: 1;
}

.texto-seccion {
	font-size: 0.92vw;
	font-weight: 500;
	color: #444;
}

.clear-both {
	display: none;
}

/* ---- Filas del formulario (div-based) ---- */
.tabla {
	width: 100%;
}

.form-row {
	display: flex;
	align-items: center;
	margin-bottom: 0.28vw;
}

.form-row > div {
	padding: 0.42vw 0.55vw;
}

.form-row > .asteriscos,
.form-row > .subtituloSeccion {
	align-self: flex-start;
	padding-top: 0.7vw;
}

.form-field {
	flex: 1;
	min-width: 0;
}

.asteriscos {
	width: 2vw;
	min-width: 2vw;
	flex-shrink: 0;
	color: #c62828;
	font-weight: bold;
	font-size: 1.05vw;
	text-align: center;
}

.subtituloSeccion {
	font-size: 0.9vw;
	font-weight: 500;
	color: #444;
	white-space: normal;
	width: 16vw;
}

.texto {
	font-size: 0.88vw;
	color: #555;
}

.nota-requeridos {
	font-size: 0.8vw;
	color: #c62828;
	font-style: italic;
	text-align: right;
	padding-bottom: 0.5vw;
}

/* ---- Inputs y selects ---- */
.inputs {
	width: 100%;
	padding: 0.63vw 0.83vw;
	font-size: 0.92vw;
	font-family: 'Roboto', Arial, sans-serif;
	border: 0.07vw solid #c8d6e8;
	border-radius: 0.5vw;
	outline: none;
	color: #333;
	background-color: #f7fafd;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

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

/* Selects: flecha triangular personalizada */
select.inputs {
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231565c0' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.7vw center;
	background-size: 0.8vw;
	padding-right: 2.2vw;
}

/* Selects de fecha: flex en una sola fila */
.fecha-row {
	display: flex;
	gap: 0.5vw;
	align-items: center;
}

.fecha-row select {
	flex: 1;
	width: auto;
}

/* ---- Indicador de fortaleza de clave ---- */
#feedback {
	font-family: monospace;
	font-size: 0.8vw;
	margin-top: 0.55vw;
	text-align: left;
	line-height: 1.7;
}

/* ---- Checkbox ---- */
.checkbox {
	width: 1.1vw;
	height: 1.1vw;
	margin-right: 0.55vw;
	cursor: pointer;
	accent-color: #1565c0;
	vertical-align: middle;
}

/* ---- Validación de campos ---- */
.input-valido {
	border-color: #2e7d32 !important;
	background-color: #f1f8f1 !important;
	box-shadow: 0 0 0 0.18vw rgba(46, 125, 50, 0.12) !important;
}

.input-invalido {
	border-color: #c62828 !important;
	background-color: #fff8f8 !important;
	box-shadow: 0 0 0 0.18vw rgba(198, 40, 40, 0.10) !important;
}

/* ---- Teléfono / celular con indicativo ---- */
.telefono-wrapper {
	display: flex;
	gap: 0.5vw;
	align-items: center;
}

.select-indicativo {
	flex: 0 0 auto;
	width: 7.5vw;
	font-size: 0.88vw;
}

.telefono-wrapper .inputs:not(.select-indicativo) {
	flex: 1;
}

/* ---- Autocomplete de ciudad ---- */
.ciudad-wrapper {
	position: relative;
}

.ciudad-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background-color: #fff;
	border: 0.07vw solid #c8d6e8;
	border-top: none;
	border-radius: 0 0 0.5vw 0.5vw;
	box-shadow: 0 0.4vw 1.2vw rgba(0,0,0,0.15);
	z-index: 50;
	max-height: 14vw;
	overflow-y: auto;
}

.ciudad-item {
	padding: 0.55vw 0.83vw;
	font-size: 0.88vw;
	color: #333;
	cursor: pointer;
	border-bottom: 0.07vw solid #f0f0f0;
}

.ciudad-item:last-child {
	border-bottom: none;
}

.ciudad-item:hover {
	background-color: #e3edf8;
	color: #1565c0;
}

/* ---- Términos y condiciones ---- */
.texto-importante {
	display: flex;
	align-items: flex-start;
	gap: 0.7vw;
	font-size: 0.88vw;
	color: #444;
	line-height: 1.6;
	margin: 1.5vw 0 1vw;
}

.texto-importante .checkbox {
	flex-shrink: 0;
	margin-top: 0.2vw;
}

.texto-importante label {
	flex: 1;
}

.texto-importante a {
	color: #1565c0;
	font-weight: 600;
	text-decoration: none;
}

.texto-importante a:hover {
	text-decoration: underline;
}

/* ---- Botón enviar ---- */
.boton {
	display: block;
	width: 50%;
	margin: 0.5vw auto 1.5vw;
	text-align: center;
	background-color: #1565c0;
	color: #fff;
	padding: 0.9vw;
	border-radius: 0.55vw;
	font-size: 1.05vw;
	font-weight: 600;
	font-family: 'Roboto', Arial, sans-serif;
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
	letter-spacing: 0.02vw;
}

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

/* ---- Powered by ---- */
.poweredby-card {
	text-align: center;
	font-size: 0.8vw;
	color: #aaa;
	margin-top: 1.5vw;
	padding-top: 1vw;
	border-top: 0.07vw solid #eee;
}

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

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

/* ---- Links generales ---- */
.vinculo {
	color: #1565c0;
	text-decoration: none;
}

.vinculo:hover {
	font-weight: 700;
}

a {
	color: #1565c0;
	text-decoration: none;
}

a:hover {
	font-weight: 700;
}

/* ---- Separador de sección ---- */
.titulo-alerta {
	font-size: 1vw;
	font-family: 'Roboto', Arial, sans-serif;
}

/* ---- Modal de mensajes ---- */
#modal-registro {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 500;
}

.fondo-error {
	background-color: rgba(0,0,0,0.65);
	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.14vw 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 10%;
	line-height: 1.8;
}

.boton-modal {
	width: 40%;
	margin: 1vw auto 0;
	text-align: center;
	background-color: #1565c0;
	color: #fff;
	padding: 0.7vw;
	border-radius: 0.55vw;
	font-size: 1vw;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s;
}

.boton-modal:hover {
	background-color: #0d47a1;
}

/* ---- Responsive: tablet (<=1024px) ---- */
@media (max-width: 1024px) {
	.form-panel {
		width: 78vw;
	}

	.subtituloSeccion {
		width: 18vw;
	}
}

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

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

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

	.form-wrapper {
		padding-top: 12vw;
		padding-bottom: 5vw;
	}

	.form-panel {
		width: 92vw;
		border-radius: 3vw;
		padding: 6vw 5vw;
	}

	.titulo {
		font-size: 5vw;
	}

	.contenedor-1,
	.contenedor[id="contenedor-2"] {
		flex-direction: column;
		align-items: flex-start;
		gap: 1vw;
	}

	.subtituloSeccion {
		font-size: 3.5vw;
		width: auto;
		white-space: normal;
	}

	.texto {
		font-size: 3.5vw;
	}

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

	.usuario,
	.mensaje_error {
		font-size: 3.5vw;
	}

	.inputs {
		padding: 3vw 4vw;
		font-size: 3.5vw;
		border-radius: 2vw;
	}

	select.inputs {
		width: 100%;
	}

	.form-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.form-row > div {
		width: 100%;
		padding: 1vw 0;
	}

	.asteriscos {
		display: none;
	}

	.checkbox {
		width: 4vw;
		height: 4vw;
	}

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

	.boton {
		width: 80%;
		padding: 3.5vw;
		font-size: 4vw;
		border-radius: 2vw;
	}

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

	#feedback {
		font-size: 3vw;
	}

	.select-indicativo {
		width: 30% !important;
	}

	.ciudad-item {
		font-size: 4vw;
	}

	.ciudad-dropdown {
		max-height: 50vw;
	}
}