/* --- AJUSTES GENERALES DEL PLUGIN --- */
/* Puedes cambiar estas variables para ajustar el diseño a tu tema */
:root {
	--fc-isil-primary-color: #0c1f3e; /* Azul oscuro ISIL */
	--fc-isil-secondary-color: #ecce9c; /* Dorado/Beige ISIL */
	--fc-isil-text-color: #333333;
	--fc-isil-bg-color: #ffffff;
	--fc-isil-font-family: "Arial", sans-serif; /* Cambia la fuente si es necesario */
}

/* --- CONTENEDOR PRINCIPAL --- */
.fc-isil-form-wrapper {
	font-family: var(--fc-isil-font-family);
	background-color: var(--fc-isil-bg-color);
	border-radius: 8px;
	color: var(--fc-isil-text-color);
	box-sizing: border-box;
	/*overflow: hidden;  Para las transiciones */
}

/* --- CABECERA DEL FORMULARIO --- */
.fc-isil-form-header {
	text-align: center;
	margin-bottom: 30px;
}
.fc-isil-step-indicator {
	background-color: var(--fc-isil-primary-color);
	color: #fff;
	padding: 8px 16px;
	border-radius: 20px;
	display: inline-block;
	font-weight: 900;
	margin-bottom: 20px;
	font-size: 32px;
}
.fc-isil-step-indicator span {
	color: var(--fc-isil-secondary-color) !important;
}
.fc-isil-form-header h2 {
	font-size: 28px;
	margin: 0;
	color: var(--fc-isil-primary-color);
	font-style: italic;
}
.fc-isil-form-header h2 strong {
	color: var(--fc-isil-primary-color);
	font-weight: 900;
	font-style: normal;
}
.fc-isil-form-header p {
	font-size: 16px;
}

#fc-isil-step-1 > .fc-isil-form-grid {
	gap: 30px;
}

.fc-isil-step-1-layout {
	max-width: 1140px;
	margin: 0 auto;
}

.fc-isil-form-header-2 {
	text-align: left;
	margin-bottom: 20px;
}
.fc-isil-form-header-2 p {
	font-size: 20px;
	color: var(--fc-isil-primary-color);
}
/* --- CUADRÍCULA DE CAMPOS (GRID) --- */
.fc-isil-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

/* --- ESTILOS PARA CAMPOS Y SELECTORES PERSONALIZADOS --- */
.fc-isil-input-wrapper {
	position: relative;
	width: 100%;
}

.fc-isil-input-wrapper input,
.fc-isil-custom-select .fc-isil-select-display {
	width: 100%;
	padding: 12px 15px;
	border: 2px solid var(--fc-isil-secondary-color) !important;
	background-color: #fff;
	border-radius: 10px !important;
	font-size: 15px;
	font-weight: 900;
	box-sizing: border-box;
	height: 50px;
}

.fc-isil-input-wrapper input:focus,
.fc-isil-custom-select .fc-isil-select-display:focus {
	outline: none;
	border-color: var(--fc-isil-primary-color);
	box-shadow: 0 0 0 2px rgba(0, 35, 102, 0.2);
}

.fc-isil-field-icon {
	position: absolute;
	right: 0px;
	top: 0%;
	margin-top: 25px;
	transform: translateY(-50%);
	font-size: 20px;
	color: #000000;
	font-weight: bold;
	pointer-events: none;
	padding: 10px 20px;
	background: var(--fc-isil-secondary-color);
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
.fc-isil-custom-select .fc-isil-field-icon {
	pointer-events: auto;
	cursor: pointer;
}

.fc-isil-custom-select {
	position: relative;
}

.fc-isil-custom-select select {
	display: none; /* Ocultamos el select real */
}

.fc-isil-select-display {
	display: flex;
	align-items: center;
	cursor: pointer;
	color: #757575; /* Color del placeholder */
	font-weight: 900;
	font-size: 16px;
}
.fc-isil-select-display.selected {
	color: var(--fc-isil-text-color); /* Color cuando hay algo seleccionado */
}

.fc-isil-select-options {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background: #fff;
	border: 1px solid var(--fc-isil-secondary-color);
	border-radius: 0 0 8px 8px;
	z-index: 10;
	max-height: 200px;
	overflow-y: auto;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.fc-isil-select-options div {
	padding: 12px 15px;
	cursor: pointer;
}

.fc-isil-select-options div:hover {
	background-color: #f0f0f0;
}

/* --- PIE DE FORMULARIO Y BOTONES --- */
.fc-isil-form-footer {
	text-align: center;
	margin-top: 30px;
}
.fc-isil-form-footer p {
	margin-top: 15px;
}
.fc-isil-note {
	font-size: 14px;
	margin-bottom: 20px;
	color: var(--fc-isil-primary-color);
}
.fc-isil-button {
	text-transform: uppercase !important;
	background-color: var(--fc-isil-secondary-color) !important;
	color: #000000 !important;
	border: none !important;
	padding: 15px 35px !important;
	border-radius: 8px !important;
	font-size: 16px !important;
	font-weight: 900 !important;
	cursor: pointer !important;
	transition: ease-in-out 0.3s !important;
}
.fc-isil-button:hover {
	background-color: #c59b60 !important; /* Un poco más oscuro */
	color: #ffffff !important;
}

/* --- ESTILOS PASO 2 --- */
#fc-isil-step-2 {
	display: none; /* Inicialmente oculto */
	padding: 50px;
	background: url("../img/chicos-paso-2.png") right center no-repeat,
		url("../img/diagonales-azules-paso-2.png") right center no-repeat;
	background-size: contain; /* Añadido para asegurar que la imagen cubra el área */
}
@media (max-width: 768px) {
	#fc-isil-step-2 {
		background: url("../img/chicos-paso-2.png") center bottom no-repeat,
			url("../img/diagonales-azules-paso-2.png") center bottom no-repeat;
		background-size: contain;
		padding: 20px;
		height: 150vh;
	}
}
.fc-isil-step2-layout {
	display: flex;
	gap: 30px;
	max-width: 1140px;
	margin: 0 auto;
	justify-content: center;
}
.fc-isil-step2-layout .fc-isil-form-grid {
	flex: 1;
	grid-template-columns: 1fr; /* Una columna para los campos */
	max-width: 400px;
}
.fc-isil-image-container {
	flex: 1;
}
.fc-isil-image-container img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	transform: scale(1.2);
}

/* --- TÉRMINOS, RECAPTCHA Y BOTÓN ENVIAR --- */
.fc-isil-form-footer-step2 {
	margin-top: 0px;
}
.fc-isil-checkbox-wrapper {
	display: flex;
	align-items: center;
}
#fc-isil-recaptcha-container {
	margin-bottom: 20px;
	transform: scale(0.9);
	transform-origin: 0 0;
}

/* --- MENSAJES DE ERROR/ÉXITO --- */
.fc-isil-form-messages {
	margin-top: 20px;
	padding: 15px;
	border-radius: 5px;
	display: none;
	max-width: 500px;
	margin: 0 auto;
	text-align: center;
}
.fc-isil-form-messages.error {
	background-color: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}
.fc-isil-form-messages.success {
	background-color: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}
.fc-isil-input-wrapper input.error {
	border-color: #dc3545 !important;
}

/* --- SECCIÓN DE GRACIAS --- */
#fc-isil-gracias-section {
	display: none; /* Oculto por defecto */
	animation: fadeIn 0.5s ease-in-out;
	display: flex;
	gap: 30px;
	background: url("../img/graduados-paso-3.png") 90% center no-repeat,
		url("../img/diagonales-azules-paso-3.png") right -1px no-repeat;
	background-size: contain;
}

@media (max-width: 768px) {
	#fc-isil-gracias-section {
		background: url("../img/graduados-paso-3.png") center bottom no-repeat,
			url("../img/diagonales-azules-paso-3.png") center bottom no-repeat;
		background-size: contain;
		padding: 20px;
		height: 150vh;
	}
}
.fc-isil-gracias-section-layout {
	display: flex;
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 50px;
}
@media (max-width: 768px) {
	.fc-isil-gracias-section-layout {
		flex-direction: column;
		padding: 0px;
	}
}
.fc-isil-gracias-content {
	max-width: 440px;
	color: var(--fc-isil-primary-color);
}
.fc-isil-gracias-header {
	background-color: var(--fc-isil-primary-color);
	color: #ffffff;
	padding: 8px 16px;
	border-radius: 8px;
	display: inline-block;
	font-weight: 900;
	margin-bottom: 20px;
	font-size: 34px;
}
.fc-isil-gracias-header span {
	color: var(--fc-isil-secondary-color);
}
#fc-isil-gracias-section h2 {
	font-size: 42px;
	color: var(--fc-isil-secondary-color);
	font-weight: 900;
	margin-top: 0;
}
@media (max-width: 768px) {
	#fc-isil-gracias-section h2 {
		font-size: 26px;
	}
}
#fc-isil-gracias-section p {
	font-size: 20px;
	line-height: 1.4;
}
@media (max-width: 768px) {
	#fc-isil-gracias-section p {
		font-size: 16px;
	}
}
.fc-isil-gracias-box {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 30px 0;
}
.fc-isil-gracias-box .dashicons {
	font-size: 30px;
	color: var(--fc-isil-primary-color);
	margin-right: 15px;
}
.fc-isil-contact-button {
	display: inline-flex;
	align-items: center;
	background-color: var(--fc-isil-secondary-color);
	padding: 10px 25px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--fc-isil-primary-color);
	font-weight: bold;
	margin-top: 10px;
	font-size: 18px;
	color: #000000;
}
.fc-isil-contact-button:hover {
	color: #000;
}
.fc-isil-contact-button .dashicons {
	margin-left: 10px;
}
.fc-isil-contact-button img {
	width: 50px;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
	.fc-isil-form-grid {
		grid-template-columns: 1fr;
	}
	.fc-isil-step2-layout {
		flex-direction: column;
	}
	.fc-isil-image-container {
		max-width: 100%;
		margin-top: 20px;
	}
}

/* --- ANIMACIONES --- */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

/* --- ESTILOS DE VALIDACIÓN MEJORADOS --- */

/* 1. Resaltado para los selectores del Paso 1 */
.fc-isil-select-display.error {
	border-color: #fa221b !important; /* Borde rojo para el error */
}

/* 2. Estilos para los tooltips de error del Paso 2 */

/* Contenedor relativo para posicionar el tooltip.
   Le damos más margen inferior para que el tooltip no se solape con el siguiente campo. */
.fc-isil-field-wrapper {
	position: relative;
	margin-bottom: 10px !important;
}

/* Estilo base del tooltip (oculto por defecto) */
.fc-isil-error-tooltip {
	display: none; /* Oculto hasta que JS lo muestre */
	position: absolute;
	bottom: -30px; /* Posición justo debajo del campo */
	left: 0px;
	background-color: #d9534f; /* Fondo rojo */
	color: white; /* Letra blanca */
	font-size: 12px; /* Tamaño de fuente 12px */
	padding: 5px 10px;
	border-radius: 4px;
	z-index: 10;
	white-space: nowrap; /* Evita que el texto se parta en dos líneas */
}

/* La flecha que apunta hacia el campo de arriba */
.fc-isil-error-tooltip::before {
	content: "";
	position: absolute;
	top: -5px; /* Se posiciona en el borde superior del tooltip */
	left: 15px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #d9534f; /* Esto crea el triángulo */
}

/* --- ESTILOS PERSONALIZADOS PARA CHECKBOX --- */

/* 1. Contenedor y etiqueta base */
.fc-isil-checkbox-wrapper {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	position: relative; /* Para el tooltip de error */
}

.fc-isil-checkbox-wrapper label {
	font-size: 14px;
	color: var(--fc-isil-primary-color);
	position: relative;
	padding-left: 30px; /* Espacio para el checkbox falso */
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	min-height: 22px;
}

/* 2. Ocultar el checkbox original */
.fc-isil-checkbox-wrapper input[type="checkbox"] {
	opacity: 0;
	position: absolute;
	width: 0;
	height: 0;
}

/* 3. Crear el checkbox falso */
.fc-isil-checkbox-wrapper label::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	border: 2px solid var(--fc-isil-primary-color); /* Borde con color primario */
	border-radius: 4px;
	background-color: #fff;
	transition: all 0.2s ease;
}

/* 4. Estilo de error: Borde rojo solo en el checkbox */
.fc-isil-checkbox-wrapper input[type="checkbox"].error + label::before {
	border-color: #d9534f; /* Borde rojo cuando falta seleccionar */
}

/* 5. Estilo cuando está seleccionado (checked) */
.fc-isil-checkbox-wrapper input[type="checkbox"]:checked + label::before {
	background-color: var(--fc-isil-primary-color); /* Fondo azul al seleccionar */
	border-color: var(--fc-isil-primary-color);
}

/* 6. Crear y mostrar el "check" (palomita) */
.fc-isil-checkbox-wrapper label::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 50%;
	width: 6px;
	height: 12px;
	border: solid white;
	border-width: 0 3px 3px 0;
	transform: translateY(-60%) rotate(45deg) scale(0); /* Oculto por defecto */
	transition: transform 0.2s ease;
}

.fc-isil-checkbox-wrapper input[type="checkbox"]:checked + label::after {
	transform: translateY(-60%) rotate(45deg) scale(1); /* Mostrar el check */
}

.fc-isil-checkbox-wrapper .fc-link-terminos {
	color: var(--fc-isil-primary-color) !important;
	margin-left: 5px;
	font-size: 14px;
}
.fc-isil-checkbox-wrapper .fc-link-terminos:hover {
	text-decoration: underline;
}
.legal-gracias-informacion {
	font-size: 14px !important;
}