/* 
 * Estilos para sobrescribir el formulario de Microsoft
 * Mapea los estilos del bloque formulario-contacto al formulario de Microsoft
 */

/* Contenedor padre del formulario - transparente para heredar el color del bloque */
div[data-form-id] {
	background-color: transparent !important;
	width: 100% !important;
	padding: 40px 20px !important;
	box-sizing: border-box !important;
}

/* Contenedor principal - similar a .form-wrapper */
[data-layout="true"] {
	max-width: 900px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	background-color: transparent !important;
	box-sizing: border-box !important;
}

/* Formulario principal - similar a .contact-form */
form.marketingForm {
	display: flex !important;
	flex-direction: column !important;
	gap: 24px !important;
	color: #000 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

/* Contenedor de columnas - aplicar grid para layout de dos columnas */
.columnContainer[data-container="true"] {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 24px !important;
	padding: 0 !important;
}

/* Título del formulario - similar a .form-title */
div[data-editorblocktype="Text"] {
	grid-column: 1 / -1 !important;
	margin: 0 0 40px 0 !important;
	padding: 0 !important;
	text-align: center !important;
}

div[data-editorblocktype="Text"] h2 {
	font-size: 40px !important;
	font-weight: 400 !important;
	color: #1A1A1A !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	width: 100% !important;
}

div[data-editorblocktype="Text"] h2 span {
	font-size: 40px !important;
	font-weight: 400 !important;
	color: #1A1A1A !important;
}

/* Bloques de campos - similar a .form-group */
.textFormFieldBlock,
.dateTimeFormFieldBlock,
.twoOptionFormFieldBlock,
.optionSetFormFieldBlock,
.multiOptionSetFormFieldBlock,
.lookupFormFieldBlock,
.phoneFormFieldBlock {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	padding: 0 !important;
}

/* Textarea debe ocupar el ancho completo (2 columnas) */
.textFormFieldBlock[data-editorblocktype="TextAreaFormField"] {
	grid-column: 1 / -1 !important;
}


/* Bloque de consentimiento también ocupa ancho completo */
.consentBlock {
	grid-column: 1 / -1 !important;
}

/* Labels - similar a .form-label */
.textFormFieldBlock label,
.dateTimeFormFieldBlock label,
.lookupFormFieldBlock label,
.twoOptionFormFieldBlock label.block-label,
.optionSetFormFieldBlock label.block-label,
.multiOptionSetFormFieldBlock label.block-label,
.phoneFormFieldBlock label {
	color: #1a1a1a !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
}

/* Campos de texto e input - similar a .form-input */
.textFormFieldBlock input,
.dateTimeFormFieldBlock input,
.lookupFormFieldBlock input,
.phoneFormFieldBlock input,
.optionSetFormFieldBlock select,
.passesBlock select {
	background-color: #fff !important;
	border: 1px solid #d1d5db !important;
	border-radius: 6px !important;
	color: #1a1a1a !important;
	font-family: inherit !important;
	font-size: 15px !important;
	padding: 12px 16px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	height: auto !important;
	min-height: auto !important;
}

/* Textarea - similar a .form-textarea */
.marketingForm textarea,
.textFormFieldBlock textarea,
.textFormFieldBlock[data-editorblocktype="TextAreaFormField"] textarea {
	background-color: #fff !important;
	border: 1px solid #d1d5db !important;
	border-radius: 6px !important;
	color: #1a1a1a !important;
	font-family: inherit !important;
	font-size: 15px !important;
	padding: 12px 16px !important;
	min-height: 120px !important;
	height: auto !important;
	resize: vertical !important;
	width: 100% !important;
	box-sizing: border-box !important;
	overflow: auto !important;
}

.marketingForm textarea::placeholder,
.textFormFieldBlock textarea::placeholder {
	color: #9ca3af !important;
}

/* Select - similar a .form-select */
.optionSetFormFieldBlock select,
.passesBlock select {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 fill=%27none%27%3E%3Cpath stroke=%27%23666%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m1 1.5 5 5 5-5%27/%3E%3C/svg%3E") !important;
	background-position: right 12px center !important;
	background-repeat: no-repeat !important;
	cursor: pointer !important;
	padding-right: 36px !important;
}

/* Botones - similar a .btn-submit */
.marketingForm .submitButton,
.marketingForm .primaryButton,
.submitButtonWrapper .submitButton,
button.submitButton {
	background-color: #0070c1 !important;
	border: none !important;
	border-radius: 6px !important;
	color: #fff !important;
	cursor: pointer !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	padding: 14px 48px !important;
	text-transform: uppercase !important;
}

.marketingForm .submitButton:disabled,
.marketingForm .primaryButton:disabled,
button.submitButton:disabled {
	cursor: not-allowed !important;
	opacity: 0.6 !important;
}

.submitButtonWrapper,
div[data-editorblocktype="SubmitButton"] {
	display: flex !important;
	justify-content: center !important;
	margin-top: 8px !important;
	padding: 0 !important;
}

/* Bloque de consentimiento - similar a .form-checkbox */
.consentBlock {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	padding: 0 !important;
}

.consentBlock > div {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	width: 100% !important;
}

/* Checkbox - similar a .checkbox-input */
.consentBlock input[type="checkbox"] {
	border: 2px solid #d1d5db !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	height: 18px !important;
	margin-top: 2px !important;
	width: 18px !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}

/* Label del checkbox - similar a .checkbox-label */
.consentBlock label,
.consentBlock label p {
	color: #666 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	margin: 0 !important;
	text-align: left !important;
}

/* Asterisco de campo requerido */
.textFormFieldBlock label::after,
.dateTimeFormFieldBlock label::after,
.lookupFormFieldBlock label::after,
.phoneFormFieldBlock label::after {
	color: #0070c1 !important;
}

/* Eliminar padding de los bloques que Microsoft añade */
.textFormFieldBlock,
.dateTimeFormFieldBlock,
.lookupFormFieldBlock,
.phoneFormFieldBlock {
	padding: 0 !important;
}

/* Asegurar que los inputs no tengan estilos inline que interfieran */
.textFormFieldBlock input[type="text"],
.textFormFieldBlock input[type="email"],
.textFormFieldBlock textarea {
	background-color: #fff !important;
	border: 1px solid #d1d5db !important;
}

/* Responsive - similar a .form-row */
@media (max-width: 768px) {
	[data-layout="true"] {
		max-width: 100% !important;
		padding: 0 20px !important;
	}
	
	form.marketingForm {
		gap: 20px !important;
	}
	
	/* En móvil, una sola columna */
	.columnContainer[data-container="true"] {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}
	
	/* Todos los campos ocupan ancho completo en móvil */
	.textFormFieldBlock,
	.dateTimeFormFieldBlock,
	.lookupFormFieldBlock,
	.phoneFormFieldBlock,
	.consentBlock {
		grid-column: 1 / -1 !important;
	}
}