/* ========================================================
   ESTILOS DE ALTO CONTRASTE PARA ENTRADA DE TEXTO (INPUTS)
   ======================================================== */

/* Fuerza que todo texto escrito dentro de los campos sea blanco brillante */
.ct-contact-form .fluentform input[type="text"],
.ct-contact-form .fluentform input[type="email"],
.ct-contact-form .fluentform input[type="tel"],
.ct-contact-form .fluentform input[type="number"],
.ct-contact-form .fluentform textarea,
.ct-contact-form .fluentform select {
	color: #ffffff !important; /* Texto en blanco puro al escribir */
}

/* Ajusta los marcadores de posición (placeholders) a un gris claro satinado sutil */
.ct-contact-form .fluentform ::placeholder {
	color: rgba(255, 255, 255, 0.4) !important;
	opacity: 1;
}
.ct-contact-form .fluentform :-ms-input-placeholder {
	color: rgba(255, 255, 255, 0.4) !important;
}
.ct-contact-form .fluentform ::-ms-input-placeholder {
	color: rgba(255, 255, 255, 0.4) !important;
}


/* ========================================================
   ESTILOS DE DISEÑO GENERAL DEL FORMULARIO Y BOTONES
   ======================================================== */

.ct-contact-form .frm-fluent-form .ff-el-input--label label {
	margin-bottom: 5px;
	color: #ffffff !important; /* Etiquetas en blanco puro */
}

.ct-contact-form .fluentform .ff-el-group.ff_list_buttons .ff-el-input--content {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.ct-contact-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check span {
	border-radius: var(--theme-form-field-border-radius, 6px) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	box-shadow: none;
	transition: all 0.2s ease;
	padding: 10px 20px;
}

/* Estado: NO SELECCIONADO - Reposo */
.ct-contact-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check:not(.ff_item_selected) span {
	color: rgba(255, 255, 255, 0.85) !important;
	background-color: #23153c !important; /* Fondo morado oscuro Pixie Labs */
}

/* Estado: NO SELECCIONADO - Hover */
.ct-contact-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check:not(.ff_item_selected) span:hover {
	color: #ffffff !important;
	background-color: rgba(139, 92, 246, 0.25) !important;
	border-color: rgba(139, 92, 246, 0.5) !important;
}

/* Estado: SELECCIONADO */
.ct-contact-form .fluentform .ff-el-group.ff_list_buttons .ff_item_selected span {
	background-color: var(--theme-button-background-initial-color) !important;
	color: #ffffff !important;
	border-color: var(--theme-button-background-initial-color) !important;
	box-shadow: 0 0 12px rgba(139, 92, 246, 0.35) !important;
}
