body .form_row {
	width: 100%;
}

body .form_color {
	display: flex;
	align-items: center;
	gap: 10px;
}

body .form_color_trigger {
	width: 44px;
	height: 44px;
	border: 2px solid var(--form-field-border);
	border-radius: var(--form-field-radius);
	cursor: pointer;
	flex-shrink: 0;
	transition: border-color 0.15s;
}

body .form_color_trigger:hover {
	border-color: var(--color-brand-accent, #2182A6);
}

body .form_color_hex {
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text-primary);
	font-family: monospace;
}

body .form_text_style {
	display: inline-flex;
	align-items: stretch;
	flex-wrap: nowrap;
}

body .form_text_style_select {
	height: 42px;
	padding: 0 28px 0 10px;
	border: 2px solid var(--form-field-border);
	border-radius: 0;
	border-right: none;
	background: var(--form-field-background)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4.5 6.75L9 11.25L13.5 6.75' stroke='%23184B5D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		no-repeat right 8px center;
	background-size: 14px 14px;
	color: var(--form-field-text);
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 400;
	appearance: none;
	cursor: pointer;
	outline: none;
	transition: border-color .2s ease;
	position: relative;
	z-index: 1;
}

body .form_text_style_select:focus {
	border-color: var(--color-brand-accent, #2182A6);
	z-index: 2;
}

/* Primer elemento: radio izquierdo */
body .form_text_style > :first-child {
	border-radius: var(--form-field-radius) 0 0 var(--form-field-radius) !important;
}

/* Último elemento: radio derecho + borde derecho */
body .form_text_style > :last-child {
	border-radius: 0 var(--form-field-radius) var(--form-field-radius) 0 !important;
	border-right: 2px solid var(--form-field-border) !important;
}

/* Cuando solo hay un elemento */
body .form_text_style > :only-child {
	border-radius: var(--form-field-radius) !important;
	border-right: 2px solid var(--form-field-border) !important;
}

body .form_text_style_size_select {
	width: auto;
	min-width: 80px;
}

body .form_text_style_family {
	width: auto;
	min-width: 110px;
	max-width: 180px;
}

body .form_text_style_color {
	height: 42px;
	padding: 0 8px;
	border: 2px solid var(--form-field-border);
	border-right: none;
	border-radius: 0;
	background: var(--form-field-background);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

body .form_text_style_color .form_color_trigger {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid rgba(0,0,0,0.10);
	flex-shrink: 0;
}

body .form_text_style_toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 2px solid var(--form-field-border);
	border-right: none;
	border-radius: 0;
	background: #fff;
	cursor: pointer;
	font-size: 14px;
	color: var(--color-text-secondary, #6f7f8c);
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}

body .form_text_style_toggle:hover {
	border-color: var(--color-brand-accent, #2182A6);
	color: var(--color-brand-accent, #2182A6);
}

body .form_text_style_toggle.is-active {
	border-color: var(--color-brand-accent, #2182A6) !important;
	background: var(--color-brand-accent-soft, #e8f4f8);
	color: var(--color-brand-accent, #2182A6);
}

/* Section toggle */
body .form_section_toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	padding: 12px 0;
	margin-top: 4px;
	cursor: pointer;
	color: var(--color-text-secondary, #6f7f8c);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
body .form_section_toggle:hover { color: var(--color-brand-accent, #2182A6); }
body .form_section_toggle_icon { transition: transform 0.2s ease; font-size: 10px; }
body .form_section_toggle[aria-expanded="true"] .form_section_toggle_icon { transform: rotate(180deg); }

body .form_advanced_field { display: block; }

body .form_section_body {
	display: none;
	grid-column: 1 / -1;
	margin-top: -20px;
	padding: 20px 20px 16px;
	background: var(--color-bg-secondary, #f5f7f9);
	border-radius: var(--form-field-radius);
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 56px;
	row-gap: 24px;
	align-items: start;
}
body .form_section_body.is-open { display: grid; }

/* Spacing field */
/* Spacing: icono + select como flex items independientes */
body .form_spacing {
	display: inline-flex;
	flex-direction: column;
	gap: 6px;
	width: 210px;
}
body .form_spacing_item {
	display: flex;
	align-items: center;
	gap: 8px;
}
body .form_spacing_side {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
}
body .form_spacing_side_icon {
	width: 14px; height: 14px;
	border: 2px solid #bcc3cc;
	border-radius: 2px;
	position: relative;
	flex-shrink: 0;
}
body .form_spacing_side_icon::after,
body .form_spacing_side_icon::before {
	content: '';
	position: absolute;
	background: var(--color-brand-accent, #2182A6);
}
body .form_spacing_side_top    .form_spacing_side_icon::after { top: -2px; left: -2px; right: -2px; height: 3px; border-radius: 2px 2px 0 0; }
body .form_spacing_side_bottom .form_spacing_side_icon::after { bottom: -2px; left: -2px; right: -2px; height: 3px; border-radius: 0 0 2px 2px; }
body .form_spacing_side_horizontal .form_spacing_side_icon::after  { top: -2px; bottom: -2px; left: -2px;  width: 3px; border-radius: 2px 0 0 2px; }
body .form_spacing_side_horizontal .form_spacing_side_icon::before { top: -2px; bottom: -2px; right: -2px; width: 3px; border-radius: 0 2px 2px 0; }
body .form_spacing_side_vertical   .form_spacing_side_icon::after  { top: -2px; left: -2px; right: -2px; height: 3px; border-radius: 2px 2px 0 0; }
body .form_spacing_side_vertical   .form_spacing_side_icon::before { bottom: -2px; left: -2px; right: -2px; height: 3px; border-radius: 0 0 2px 2px; }
body .form_spacing_select {
	flex: 1;
	min-width: 0;
}

body .form_collapsible_header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

body .form_collapsible_header .form_label {
	margin-bottom: 0;
}

body .form_switch.form_collapsible_switch {
	width: 44px;
	height: 22px;
}

body .form_switch.form_collapsible_switch .form_switch_ui::after {
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
}

body .form_switch.form_collapsible_switch .form_control_checkbox:checked + .form_switch_ui::after {
	transform: translateX(22px);
}

body .form_collapsible_content {
	display: none;
	margin-top: 6px;
}

body .form_row_collapsible.is-active .form_collapsible_content {
	display: block;
}

body .form_row_hidden {
	display: none !important;
}

body .form_select_hidden {
	display: none !important;
}

body .form_page_content {
	width: 100%;
	padding: 0;
}


body .page_card {
	padding: 18px 0 0;
}

body .page_card_body {
	padding: 0;
}

body .form_page_grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 56px;
	row-gap: 32px;
	align-items: start;
}

body .form_page_field {
	width: 100%;
	min-width: 0;
}

body .form_page_field_half,
body .form_page_field_1_2 {
	grid-column: span 6;
}

body .form_page_field_full,
body .form_page_field_2_2 {
	grid-column: 1 / -1;
}

body .form_page_field_1_3 {
	grid-column: span 4;
}

body .form_page_field_2_3 {
	grid-column: span 8;
}

body .form_page_field_1_4 {
	grid-column: span 3;
}

body .form_page_field_3_4 {
	grid-column: span 9;
}

body .form_page_actions {
	order: 3;
	width: 100%;
}

body .form_page_actions .form_submit {
}


body .form_label {
	display: flex;
	align-items: center;
	min-height: 28px;
	margin: 0 0 6px;
	color: var(--color-text-strong);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
}

body .form_control {
	box-sizing: border-box;
	width: 100%;
	border: 2px solid var(--form-field-border);
	border-radius: var(--form-field-radius);
	background: var(--form-field-background);
	box-shadow: none;
	color: var(--form-field-text);
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 400;
	padding: 9px 12px;
	outline: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

body .form_control[disabled],
body .form_control[readonly] {
	background: var(--color-bg-secondary, #f5f7f9);
	color: var(--color-text-secondary, #6f7f8c);
	cursor: not-allowed;
	border-color: var(--form-field-border);
}

body .form_date_field.form_control,
.form_datetime_wrap {
	display: flex;
	gap: 8px;
	align-items: center;
}
.form_datetime_wrap .form_datetime_date { flex: 1; }
.form_datetime_wrap .form_datetime_time { width: 110px; flex-shrink: 0; }

.form_date_icon_wrap {
	position: relative;
}

.form_date_icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	color: var(--color-text-muted, #a0adb6);
	pointer-events: none;
	z-index: 1;
}

.form_date_icon_wrap .form_control {
	padding-left: 36px;
}

body input.form_control,
body select.form_control {
	height: 42px;
}

body .form_control_checkbox {
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	accent-color: var(--color-brand-accent);
}

body .form_checkbox {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	color: var(--color-text-primary);
	font-size: 15px;
	line-height: 1.4;
}

body .form_checkbox .form_control_checkbox {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

body .form_checkbox_ui {
	position: relative;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: 2px solid var(--form-field-border);
	border-radius: 7px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04);
	transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

body .form_checkbox_ui::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 6px;
	height: 11px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg) scale(0.8);
	opacity: 0;
	transition: opacity .16s ease, transform .16s ease;
}

body .form_checkbox_text {
	display: inline-block;
}

body .form_checkbox .form_control_checkbox:checked + .form_checkbox_ui {
	border-color: var(--color-brand-accent);
	background: var(--color-brand-accent);
	box-shadow: 0 8px 18px rgba(0, 191, 255, 0.18);
}

body .form_checkbox .form_control_checkbox:checked + .form_checkbox_ui::after {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}

body .form_checkbox .form_control_checkbox:focus-visible + .form_checkbox_ui {
	box-shadow: 0 0 0 4px var(--color-brand-accent-soft);
	border-color: var(--color-brand-accent);
}

body .form_checkbox:hover .form_checkbox_ui {
	border-color: var(--color-brand-accent);
}

body .form_row_error .form_checkbox_ui,
body .form_checkbox .form_control_checkbox.form_control_error + .form_checkbox_ui {
	border-color: var(--color-danger);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.08);
}

body .form_switch {
	position: relative;
	display: inline-block;
	width: 80px;
	height: 35px;
	cursor: pointer;
}

body .form_switch .form_control_checkbox {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

body .form_switch_ui {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: #eeeeee;
	transition: background-color .22s ease;
}

body .form_switch_ui::after {
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: var(--color-surface-base);
	transition: transform .22s ease;
}

body .form_switch .form_control_checkbox:checked+.form_switch_ui {
	background: var(--color-brand-accent);
}

body .form_switch .form_control_checkbox:checked+.form_switch_ui::after {
	transform: translateX(44px);
}

body .form_switch .form_control_checkbox:focus-visible+.form_switch_ui {
	box-shadow: 0 0 0 4px var(--color-brand-accent-soft);
}

body .form_switch .form_control_checkbox.form_control_error+.form_switch_ui {
	background: var(--color-danger-soft);
}

body .form_lang_header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

body .form_lang_header .form_label {
	margin-bottom: 0;
}

body .form_select.form_lang_select {
	width: auto;
}

body .form_select.form_lang_select .form_select_trigger {
	height: 28px;
	padding: 4px 28px 4px 8px;
	font-size: 12px;
	font-weight: 600;
	border-width: 1px;
	border-radius: 6px;
	min-width: 56px;
}

body .form_select.form_lang_select .form_select_trigger::after {
	right: 7px;
	width: 14px;
	height: 14px;
	background-size: 14px 14px;
}

body .form_select.form_lang_select .form_select_dropdown {
	min-width: 80px;
	width: auto;
}

body .form_lang_badge {
	font-size: 12px;
	font-weight: 600;
	padding: 3px 8px;
	border: 1px solid var(--color-border-ui);
	border-radius: 6px;
	color: var(--color-text-primary);
}

body .form_checkbox_group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}

body .form_checkbox_group_item {
	display: block;
	cursor: pointer;
}

body .form_checkbox_group_input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

body .form_checkbox_group_ui {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 58px;
	padding: 14px 16px;
	border: 2px solid var(--form-field-border);
	border-radius: 16px;
	background: var(--form-field-background);
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

body .form_checkbox_group_box {
	position: relative;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	border: 2px solid var(--form-field-border);
	border-radius: 7px;
	background: var(--color-surface-base);
	transition: border-color .2s ease, background-color .2s ease;
}

body .form_checkbox_group_text {
	color: var(--color-text-primary);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	word-break: break-word;
}

body .form_checkbox_group_input:checked + .form_checkbox_group_ui {
	border-color: var(--color-brand-accent);
	background: var(--color-brand-accent-soft);
	box-shadow: 0 0 0 4px rgba(var(--color-brand-accent-rgb), 0.12);
}

body .form_checkbox_group_input:checked + .form_checkbox_group_ui .form_checkbox_group_box {
	border-color: var(--color-brand-accent);
	background: var(--color-brand-accent);
}

body .form_checkbox_group_input:checked + .form_checkbox_group_ui .form_checkbox_group_box::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 7px;
	width: 5px;
	height: 10px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}

body .form_checkbox_group_input:focus-visible + .form_checkbox_group_ui {
	box-shadow: 0 0 0 4px var(--color-brand-accent-soft);
}

body .form_row_error .form_checkbox_group_ui {
	border-color: var(--color-danger-primary);
}

body .form_checkbox_group_empty {
	padding: 14px 16px;
	border: 2px dashed var(--form-field-border);
	border-radius: 16px;
	background: var(--color-surface-soft);
	color: var(--color-text-muted);
	font-size: 14px;
}

body .form_checkbox_group_section {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

body .form_checkbox_group_section + .form_checkbox_group_section {
	margin-top: 16px;
}

body .form_checkbox_group_section_label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
}

body .form_radio_group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px 18px;
}

body .form_radio_group_item {
	display: block;
	cursor: pointer;
}

body .form_radio_group_input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

body .form_radio_group_ui {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 24px;
	color: var(--color-text-primary);
	font-size: 14px;
	line-height: 1.35;
}

body .form_radio_group_dot {
	position: relative;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	border: 2px solid var(--form-field-border);
	border-radius: 50%;
	background: var(--color-surface-base);
	transition: border-color .2s ease, box-shadow .2s ease;
}

body .form_radio_group_dot::after {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--color-brand-accent);
	opacity: 0;
	transform: scale(.6);
	transition: opacity .2s ease, transform .2s ease;
}

body .form_radio_group_text {
	font-weight: 500;
}

body .form_radio_group_input:checked + .form_radio_group_ui .form_radio_group_dot {
	border-color: var(--color-brand-accent);
}

body .form_radio_group_input:checked + .form_radio_group_ui .form_radio_group_dot::after {
	opacity: 1;
	transform: scale(1);
}

body .form_radio_group_input:focus-visible + .form_radio_group_ui .form_radio_group_dot {
	box-shadow: 0 0 0 4px rgba(var(--color-brand-accent-rgb), 0.12);
}

body .form_file {
	position: relative;
}

body .form_file_picker {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 20px;
	border: 1px dashed #d5dce5;
	border-radius: 18px;
	background: #fafbfd;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

body .form_file.is-drag-over .form_file_picker,
body .form_file_picker:hover,
body .form_file_picker:focus-within {
	border-color: var(--color-brand-accent);
	background: var(--color-brand-accent-soft);
	box-shadow: 0 0 0 4px rgba(var(--color-brand-accent-rgb), 0.1);
}

body .form_file_picker_content {
	display: grid;
	gap: 6px;
	min-width: 0;
	flex: 1 1 auto;
}

body .form_file_picker_title {
	font-size: 16px;
	font-weight: 600;
	color: #111;
}

body .form_file_picker_hint {
	font-size: 13px;
	line-height: 1.4;
	color: #6f7f8c;
}

body .form_file_picker_selected {
	display: none;
	min-width: 0;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--color-brand-accent);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body .form_file.has-file .form_file_picker_selected {
	display: block;
}

body .form_file_preview {
	display: none;
	width: min(220px, 42%);
	flex: 0 0 min(220px, 42%);
	max-width: 220px;
	aspect-ratio: 16 / 9;
	border: 1px solid #d5dce5;
	border-radius: 12px;
	background-color: #f3f5f7;
	background-image:
		linear-gradient(45deg, #dfe4ea 25%, transparent 25%),
		linear-gradient(-45deg, #dfe4ea 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #dfe4ea 75%),
		linear-gradient(-45deg, transparent 75%, #dfe4ea 75%);
	background-position: 0 0, 0 8px, 8px -8px, -8px 0;
	background-size: 16px 16px;
	overflow: hidden;
}

body .form_file.has-preview .form_file_preview {
	display: flex;
	align-items: center;
	justify-content: center;
}

body .form_file_preview_image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

body .form_file_preview_video {
	display: none;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

body .form_file_input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

@media (max-width: 991px) {
	body .form_file_picker {
		display: grid;
		justify-items: center;
		gap: 12px;
		text-align: center;
	}

	body .form_file_picker_content {
		justify-items: center;
	}

	body .form_file_preview {
		width: min(100%, 220px);
		flex-basis: auto;
	}
}

body .form_help {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--color-text-muted);
	margin-top: 6px;
}

body select.form_control {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 52px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4.5 6.75L9 11.25L13.5 6.75' stroke='%23184B5D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 18px 18px;
	background-position: right 12px center;
}

body select.form_control::-ms-expand {
	display: none;
}

body select.form_control option {
	color: var(--color-text-primary);
	background: var(--color-surface-base);
}

body select.form_control.form_control_native_select {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

body .form_select {
	position: relative;
	min-width: 0;
	width: 100%;
}

body .form_select_trigger {
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 42px;
	padding: 9px 42px 9px 12px;
	border: 2px solid var(--form-field-border);
	border-radius: var(--form-field-radius);
	background: var(--form-field-background);
	box-shadow: none;
	color: var(--form-field-text);
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
	outline: none;
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

body .form_select_trigger::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 13px;
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4.5 6.75L9 11.25L13.5 6.75' stroke='%23184B5D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	transform: translateY(-50%);
	transition: transform .2s ease;
}

body .form_select_dropdown {
	box-sizing: border-box;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 40;
	display: none;
	width: 100%;
	min-width: 200px;
	max-height: 220px;
	padding: 8px;
	border: 1px solid var(--color-brand-dark-border);
	border-radius: 16px;
	background: var(--color-surface-base);
	box-shadow: 0 18px 38px var(--color-brand-dark-shadow);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--color-border-soft, #e0e0e0) transparent;
}

body .form_select_dropdown::-webkit-scrollbar {
	width: 4px;
}

body .form_select_dropdown::-webkit-scrollbar-track {
	background: transparent;
	margin: 16px 0;
}

body .form_select_dropdown::-webkit-scrollbar-thumb {
	background: var(--color-border-soft, #e0e0e0);
	border-radius: 4px;
}

body .form_select_dropdown::-webkit-scrollbar-thumb:hover {
	background: var(--color-text-muted, #aaa);
}

body .form_select_option {
	display: block;
	width: 100%;
	margin: 0;
	padding: 11px 13px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--color-text-primary);
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease;
}

body .form_select_option+.form_select_option {
	margin-top: 3px;
}

body .form_select_option.form_select_option_hidden {
	display: none;
}

body .form_select_search_wrap {
	position: sticky;
	top: -8px;
	z-index: 1;
	margin: -8px -8px 4px;
	padding: 8px 8px 4px;
	background: var(--color-surface-base);
	border-radius: 16px 16px 0 0;
}

body .form_select_search {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 36px;
	padding: 7px 12px;
	border: 1px solid var(--color-border-soft);
	border-radius: 8px;
	background: var(--color-brand-accent-soft);
	color: var(--color-text-primary);
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	outline: none;
	transition: border-color .15s ease;
}

body .form_select_search:focus {
	border-color: var(--form-field-border-focus);
}

body .form_select_option:hover,
body .form_select_option:focus {
	background: var(--color-brand-accent-soft);
	color: var(--color-brand-dark);
	outline: none;
}

body .form_select_option.is-selected {
	background: var(--color-brand-accent-soft-strong);
	color: var(--color-brand-dark);
	font-weight: 600;
}

body .form_select_option.is-disabled,
body .form_select_option:disabled {
	opacity: .45;
	cursor: not-allowed;
}

body .form_select.form_select_open .form_select_trigger {
	border-color: var(--form-field-border-focus);
}

body .form_select.form_select_open .form_select_trigger::after {
	transform: translateY(-50%) rotate(180deg);
}

body .form_select.form_select_open .form_select_dropdown {
	display: block;
}

body .form_select.form_select_disabled .form_select_trigger,
body .form_select_trigger:disabled {
	cursor: not-allowed;
	opacity: .7;
}

body .form_row_error .form_select_trigger {
	border-color: var(--color-danger);
}

body .form_row_error .form_select.form_select_open .form_select_trigger,
body .form_row_error .form_select_trigger:hover,
body .form_row_error .form_select_trigger:focus {
	border-color: var(--color-danger);
}

body textarea.form_control {
	min-height: 160px;
	resize: vertical;
}

body input.form_control:hover,
body select.form_control:hover,
body textarea.form_control:hover,
body .form_select_trigger:hover {
	border-color: var(--form-field-border-hover);
}

body input.form_control:focus,
body select.form_control:focus,
body textarea.form_control:focus,
body .form_select_trigger:focus {
	border-color: var(--form-field-border-focus);
	box-shadow: none;
}

body .form_control.form_control_error {
	border-color: var(--color-danger);
}

body input.form_control.form_control_error:hover,
body input.form_control.form_control_error:focus,
body select.form_control.form_control_error:hover,
body select.form_control.form_control_error:focus,
body textarea.form_control.form_control_error:hover,
body textarea.form_control.form_control_error:focus {
	border-color: var(--color-danger);
}

body .form_errors {
	font-size: 14px;
}

body .form_error+.form_error {
	margin-top: 4px;
}

body .form_errors_global {
	grid-column: 1 / -1;
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 8px;
	background: var(--color-danger-soft);
	color: var(--color-danger-text);
	text-align: left;
}

body .form_errors_field {
	margin: 7px 0 0;
	color: var(--color-danger-text-strong);
	font-size: 13px;
	line-height: 1.35;
}

body .form_notice {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.45;
}

body .form_notice_success {
	background: var(--color-success-soft);
	border: 1px solid var(--color-success-border);
	color: var(--color-success);
}

body .form_notice_error {
	display: block;
	background: var(--color-danger-soft);
	border: 1px solid var(--color-danger-border);
	color: var(--color-danger-text-strong);
}

body .form_notice_toast {
	display: block;
	position: fixed;
	top: 22px;
	right: 22px;
	z-index: 1200;
	width: min(420px, calc(100vw - 32px));
	padding: 15px 52px 15px 16px;
	box-shadow: 0 18px 38px var(--color-brand-dark-shadow-strong);
	animation: formNoticeToastIn .22s ease-out;
}

body .form_notice_toast.is-closing {
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity .2s ease, transform .2s ease;
}

body .form_notice_close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: currentColor;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	opacity: .72;
	transition: background-color .16s ease, opacity .16s ease;
}

body .form_notice_close:hover,
body .form_notice_close:focus {
	background: var(--color-success-soft-strong);
	opacity: 1;
	outline: none;
}

/* ================================================================
   LOADING STATE — Overlay sobre el target AJAX o spinner en botón
   ================================================================ */

@keyframes formLoadingSpinnerRotate {
	to { transform: rotate(360deg); }
}

body .is-form-loading {
	position: relative;
}

body .form_loading_overlay {
	position: absolute;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.72);
	border-radius: inherit;
}

body .form_loading_spinner {
	width: 48px;
	height: 48px;
	border: 4px solid var(--color-brand-dark-soft);
	border-top-color: var(--color-brand-primary);
	border-radius: 50%;
	animation: formLoadingSpinnerRotate 0.65s linear infinite;
}

/* Fallback: spinner inline en el botón (acciones de listado sin target) */
body .btn.is-loading {
	pointer-events: none;
	opacity: 0.72;
}

body .btn.is-loading::after {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-left: 8px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: formLoadingSpinnerRotate 0.65s linear infinite;
	vertical-align: middle;
}

@keyframes formNoticeToastIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

body .form_row_submit {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-end;
}

body .form_submit {
	display: inline-flex;
}

@media (max-width: 991px) {
	body .form_page_grid {
		column-gap: 24px;
	}
}

@media (max-width: 767px) {
	body .form_notice_toast {
		top: 14px;
		right: 14px;
		width: calc(100vw - 28px);
	}

	body .form_section_title {
		font-size: 18px;
	}

	body textarea.form_control {
		min-height: 144px;
	}

	body .form_page_grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 22px;
	}

	body .form_page_field_half,
	body .form_page_field_1_2,
	body .form_page_field_full,
	body .form_page_field_2_2,
	body .form_page_field_1_3,
	body .form_page_field_2_3,
	body .form_page_field_1_4,
	body .form_page_field_3_4 {
		grid-column: 1 / -1;
	}

	body .form_page_actions {
		justify-content: flex-end;
	}

	body .form_page_toolbar {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ================================================================
   STYLED TEXT EDITOR
   ================================================================ */

.styled_editor {
	border: 2px solid var(--form-field-border);
	border-radius: var(--form-field-radius);
	background: var(--form-field-background);
	transition: border-color .2s ease;
}

.styled_editor:focus-within {
	border-color: var(--color-brand-accent, #2182A6);
}

.styled_editor_toolbar {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 6px 10px;
	border-bottom: 1px solid rgba(0,0,0,0.07);
	flex-wrap: wrap;
}

.styled_editor_sep {
	width: 1px;
	height: 18px;
	background: rgba(0,0,0,0.1);
	margin: 0 4px;
}

/* Selects de tamaño y fuente */
.styled_editor_ctrl {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.styled_editor_ctrl select {
	appearance: none;
	background: none;
	border: none;
	outline: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text-primary, #1a2633);
	cursor: pointer;
	padding-right: 16px;
}

.styled_editor_ctrl_size select { width: 52px; }
.styled_editor_ctrl_family select { max-width: 150px; }

.styled_editor_arrow {
	font-size: 9px;
	color: var(--color-text-secondary, #888);
	pointer-events: none;
	margin-left: -14px;
}

/* Botones inline */
.styled_editor_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 28px;
	border: none;
	border-radius: 5px;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	color: var(--color-text-secondary, #6f7f8c);
	transition: background 0.12s, color 0.12s;
}

.styled_editor_btn:hover,
.styled_editor_btn.is-active {
	background: var(--color-brand-accent-soft, #e8f4f8);
	color: var(--color-brand-accent, #2182A6);
}

/* Preview color de texto */
.styled_editor_color_preview {
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	position: relative;
	padding-bottom: 3px;
}
.styled_editor_color_preview::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: currentColor;
	border-radius: 1px;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
.styled_editor_color_input {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
	pointer-events: none;
}

/* Área editable */
.styled_editor_content {
	min-height: 80px;
	padding: 10px 14px;
	outline: none;
	font-size: 14px;
	line-height: 1.6;
}

.styled_editor_content:empty::before {
	content: attr(data-placeholder);
	color: #bcc3cc;
	pointer-events: none;
}

.styled_editor_content p,
.styled_editor_content div {
	margin: 0 0 4px;
}

/* Emoji panel */
.styled_editor_emoji_panel {
	position: absolute;
	z-index: 300;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 10px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.12);
	padding: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	width: 240px;
}

.styled_editor_emoji_btn {
	width: 32px;
	height: 32px;
	border: none;
	background: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.1s;
}

.styled_editor_emoji_btn:hover {
	background: var(--color-brand-accent-soft, #e8f4f8);
}

/* ================================================================
   EMOJI PICKER
   ================================================================ */
.emoji_picker_overlay {
	position: fixed; inset: 0; z-index: 9998;
	background: rgba(0,0,0,0.3);
	display: flex; align-items: center; justify-content: center;
}
.emoji_picker {
	background: #fff; border-radius: 14px;
	box-shadow: 0 8px 40px rgba(0,0,0,0.18);
	width: 480px; max-height: 520px;
	display: flex; flex-direction: column;
	overflow: hidden;
}
.ep_header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,0.07);
}
.ep_title { font-weight: 700; font-size: 15px; }
.ep_close { background: none; border: none; cursor: pointer; font-size: 18px; color: #888; line-height: 1; }
.ep_search_wrap { padding: 10px 14px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.ep_search { width: 100%; border: 1.5px solid #dde2e8; border-radius: 8px; padding: 7px 12px; font-family: inherit; font-size: 13px; outline: none; }
.ep_search:focus { border-color: var(--color-brand-accent, #2182A6); }
.ep_body { display: flex; flex: 1; overflow: hidden; }
.ep_cats {
	width: 140px; flex-shrink: 0;
	overflow-y: auto; border-right: 1px solid rgba(0,0,0,0.06);
	padding: 8px 0;
}
.ep_cat_btn {
	display: block; width: 100%; text-align: left;
	background: none; border: none; cursor: pointer;
	padding: 8px 14px; font-family: inherit; font-size: 13px;
	color: var(--color-text-secondary, #6f7f8c);
	transition: background 0.12s, color 0.12s;
}
.ep_cat_btn:hover { background: #f5f7f9; }
.ep_cat_btn.is-active { color: var(--color-brand-accent, #2182A6); font-weight: 600; background: var(--color-brand-accent-soft, #e8f4f8); }
.ep_grid {
	flex: 1; overflow-y: auto; padding: 8px;
	display: flex; flex-wrap: wrap; align-content: flex-start; gap: 1px;
}
.ep_emoji {
	width: 36px; height: 36px; border: none; background: none;
	border-radius: 6px; cursor: pointer; font-size: 20px;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.1s;
}
.ep_emoji:hover { background: var(--color-brand-accent-soft, #e8f4f8); }
.ep_footer { padding: 10px 16px; border-top: 1px solid rgba(0,0,0,0.07); display: flex; justify-content: flex-end; }
.ep_close_btn {
	background: var(--color-brand-accent, #2182A6); color: #fff;
	border: none; border-radius: 100px; padding: 8px 20px;
	font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}

/* ================================================================
   COLOR SWATCHES PANEL
   ================================================================ */
.styled_editor_color_wrap { position: relative; }
.styled_editor_bg_wrap { position: relative; }
.styled_color_panel,
.styled_text_panel,
.styled_bg_panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 500;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.15);
	padding: 10px;
	width: 175px;
}
.styled_color_swatches {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 4px;
}
.styled_color_swatch {
	width: 28px; height: 28px;
	border-radius: 6px;
	border: 2px solid transparent;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: transform 0.1s, border-color 0.1s;
}
.styled_color_swatch:hover {
	transform: scale(1.12);
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0,0,0,0.25);
}
.styled_color_swatch.is-selected { border-color: rgba(0,0,0,0.35); }
.styled_color_swatch.is-selected::after {
	content: '✓';
	font-size: 12px;
	color: #fff;
	text-shadow: 0 0 3px rgba(0,0,0,0.5);
}
.styled_color_panel_footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(0,0,0,0.07);
}
.styled_color_custom_btn {
	background: none; border: none; cursor: pointer;
	color: var(--color-text-secondary, #6f7f8c);
	font-size: 15px; padding: 4px 6px; border-radius: 6px;
	transition: background 0.12s; flex-shrink: 0;
}
.styled_color_custom_btn:hover { background: #f0f0f0; }
.styled_hex_wrap {
	display: flex;
	align-items: center;
	gap: 2px;
	background: #f5f7f9;
	border: 1.5px solid #dde2e8;
	border-radius: 6px;
	padding: 2px 6px;
	flex: 1;
	margin-right: 6px;
}
.styled_hex_hash {
	font-size: 12px;
	color: #888;
	font-family: monospace;
}
.styled_hex_input {
	border: none;
	background: none;
	outline: none;
	font-family: monospace;
	font-size: 12px;
	width: 58px;
	color: var(--color-text-primary, #1a2633);
}
.styled_hex_ok {
	flex-shrink: 0;
	background: var(--color-brand-accent, #2182A6);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 4px 10px;
	font-size: 12px;
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* ================================================================
   LANG SELECT EN COLLAPSIBLE HEADER
   ================================================================ */
.form_collapsible_header { gap: 10px; }
.form_lang_select_collapsible {
	margin-left: auto;
	width: auto !important;
	min-width: 0;
	padding: 3px 22px 3px 8px !important;
	font-size: 12px !important;
	height: 26px;
	line-height: 1;
	border-radius: 6px !important;
}

/* ================================================================
   STYLED EDITOR — MODO BOTÓN (withBg)
   ================================================================ */
.styled_editor[data-with-bg="1"] .styled_editor_content {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 70px;
	padding: 16px 20px;
}
.styled_editor[data-with-bg="1"] .styled_editor_content > p,
.styled_editor[data-with-bg="1"] .styled_editor_content > div {
	background-color: #000;
	border-radius: 500px;
	padding: 12px 25px;
	margin: 0;
	display: inline-block;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
}
.styled_editor_bg_wrap { position: relative; }
.styled_editor_bg_wrap .styled_bg_panel {
	left: auto;
	right: 0;
}

/* ── Countdown config field ──────────────────────────────────────────────── */
body .form_countdown_config {
	background: var(--color-bg-secondary, #f5f7f9);
	border: 1px solid var(--color-border-soft, #e8e8e8);
	border-radius: 8px;
	padding: 14px 16px;
}

body .form_countdown_config_grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 24px;
}

body .form_countdown_config_item {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

body .form_countdown_config_item .form_label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0;
}

body .form_countdown_config_item .form_color {
	display: flex;
	align-items: center;
	gap: 8px;
}

@media (max-width: 767px) {
	body .form_countdown_config_grid {
		grid-template-columns: 1fr;
	}
}