/*!
 * WP Forms COD by Codein & JNC EIRL — front.css
 * Todo bajo .codf-*, variables --codf-*, baja especificidad con :where() y propiedades lógicas (RTL).
 */

/* ---------------------------------------------------------------------
 * Contenedor y variables base (el contenedor recibe overrides inline)
 * ------------------------------------------------------------------- */
.codf-wrap {
	--codf-primary: #2563eb;
	--codf-text: #1f2937;
	--codf-muted: #6b7280;
	--codf-bg: transparent;
	--codf-field-bg: #ffffff;
	--codf-border: #d1d5db;
	--codf-focus: #2563eb;
	--codf-error: #dc2626;
	--codf-success: #16a34a;
	--codf-radius: 8px;
	--codf-font-size: 16px;
	--codf-font-family: inherit;
	--codf-spacing: 16px;
	--codf-field-padding: 10px 12px;
	--codf-label-weight: 600;
	--codf-button-bg: #2563eb;
	--codf-button-text: #ffffff;
	--codf-button-radius: 8px;
	--codf-button-padding: 12px 24px;
	--codf-max-width: 100%;
	--codf-label-col: 30%;

	box-sizing: border-box;
	container-type: inline-size;
	container-name: codf;
	max-inline-size: var(--codf-max-width);
	margin-block: 0 var(--codf-spacing);
	color: var(--codf-text);
	background: var(--codf-bg);
	font-family: var(--codf-font-family);
	font-size: var(--codf-font-size);
	line-height: 1.5;
	text-align: start;
}

.codf-wrap *,
.codf-wrap *::before,
.codf-wrap *::after {
	box-sizing: inherit;
}

/* El atributo hidden siempre gana a estilos del tema. */
.codf-wrap [hidden],
.codf-js [data-codf-hidden],
.codf-js [data-codf-step-hidden],
.codf-wrap .codf-is-invisible {
	display: none !important;
}

.codf-wrap:not(.codf-js) :where(.codf-prev, .codf-next) {
	display: none !important;
}

:where(.codf-wrap) .codf-sr-only,
.codf-layout-hidden :where(.codf-label) {
	position: absolute !important;
	inline-size: 1px !important;
	block-size: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

:where(.codf-wrap) :where(.codf-form) {
	margin: 0;
	padding: 0;
}

:where(.codf-wrap) :where(.codf-title) {
	margin-block: 0 calc(var(--codf-spacing) * 0.5);
	font-size: 1.4em;
	line-height: 1.25;
	color: inherit;
}

:where(.codf-wrap) :where(.codf-form-desc) {
	margin-block-end: var(--codf-spacing);
	color: var(--codf-muted);
}

/* ---------------------------------------------------------------------
 * Rejilla de 12 columnas
 * ------------------------------------------------------------------- */
:where(.codf-wrap) .codf-fields {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--codf-spacing) calc(var(--codf-spacing) * 0.75);
	align-items: start;
}

:where(.codf-fields) > .codf-field { grid-column: span 12; min-inline-size: 0; }
:where(.codf-fields) > .codf-w-three-quarters { grid-column: span 9; }
:where(.codf-fields) > .codf-w-two-thirds { grid-column: span 8; }
:where(.codf-fields) > .codf-w-half { grid-column: span 6; }
:where(.codf-fields) > .codf-w-third { grid-column: span 4; }
:where(.codf-fields) > .codf-w-quarter { grid-column: span 3; }

@container codf (max-width: 560px) {
	:where(.codf-fields) > .codf-field { grid-column: span 12; }
}

@supports not (container-type: inline-size) {
	@media (max-width: 600px) {
		:where(.codf-fields) > .codf-field { grid-column: span 12; }
	}
}

/* ---------------------------------------------------------------------
 * Campo: etiqueta, descripción, error
 * ------------------------------------------------------------------- */
:where(.codf-wrap) .codf-field {
	position: relative;
	margin: 0;
}

:where(.codf-wrap) :where(.codf-fieldset) {
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

:where(.codf-wrap) .codf-label {
	display: block;
	float: none;
	inline-size: 100%;
	margin: 0 0 6px;
	padding: 0;
	color: var(--codf-text);
	font-size: 0.95em;
	font-weight: var(--codf-label-weight);
	line-height: 1.35;
}

:where(.codf-wrap) .codf-req {
	margin-inline-start: 3px;
	color: var(--codf-error);
	font-weight: 700;
}

:where(.codf-wrap) .codf-sublabel {
	display: block;
	margin-block: 4px 0;
	color: var(--codf-muted);
	font-size: 0.82em;
	font-weight: 400;
}

:where(.codf-wrap) .codf-subfield--confirm .codf-sublabel {
	margin-block: var(--codf-spacing) 6px;
	color: var(--codf-text);
	font-size: 0.95em;
	font-weight: var(--codf-label-weight);
}

:where(.codf-wrap) .codf-desc {
	margin-block-start: 6px;
	color: var(--codf-muted);
	font-size: 0.85em;
}

:where(.codf-wrap) .codf-desc a,
:where(.codf-wrap) .codf-choice-label a {
	color: var(--codf-primary);
	text-decoration: underline;
}

:where(.codf-wrap) .codf-error {
	display: flex;
	gap: 6px;
	align-items: flex-start;
	margin-block-start: 6px;
	color: var(--codf-error);
	font-size: 0.85em;
	font-weight: 500;
}

:where(.codf-wrap) .codf-error::before {
	content: "!";
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 1.15em;
	block-size: 1.15em;
	margin-block-start: 0.12em;
	border-radius: 50%;
	background: var(--codf-error);
	color: #fff;
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1;
}

:where(.codf-wrap) .codf-counter {
	margin-block-start: 4px;
	color: var(--codf-muted);
	font-size: 0.78em;
	text-align: end;
	font-variant-numeric: tabular-nums;
}

:where(.codf-wrap) .codf-counter.is-near { color: #b45309; }
:where(.codf-wrap) .codf-counter.is-over { color: var(--codf-error); font-weight: 600; }

/* ---------------------------------------------------------------------
 * Controles (reseteo propio: no heredamos input{} del tema)
 * ------------------------------------------------------------------- */
.codf-wrap :where(.codf-input) {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	min-block-size: 2.75em;
	margin: 0;
	padding: var(--codf-field-padding);
	border: 1px solid var(--codf-border);
	border-radius: var(--codf-radius);
	background-color: var(--codf-field-bg);
	background-image: none;
	box-shadow: none;
	color: var(--codf-text);
	font: inherit;
	font-size: 1em;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.codf-wrap :where(.codf-input)::placeholder {
	color: var(--codf-muted);
	opacity: 0.85;
}

.codf-wrap :where(textarea.codf-input) {
	min-block-size: 6em;
	resize: vertical;
}

.codf-wrap :where(select.codf-input:not([multiple])) {
	padding-inline-end: 2.4em;
	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 1.5 6 6.5l5-5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9em center;
	background-size: 12px 8px;
}

.codf-wrap[dir="rtl"] :where(select.codf-input:not([multiple])),
.codf-rtl :where(select.codf-input:not([multiple])) {
	background-position: left 0.9em center;
}

.codf-wrap :where(select.codf-input[multiple]) {
	min-block-size: 7em;
	padding-block: 6px;
}

.codf-wrap :where(input[type="date"].codf-input, input[type="time"].codf-input) {
	min-block-size: 2.75em;
}

.codf-wrap :where(.codf-input):hover {
	border-color: color-mix(in srgb, var(--codf-border) 55%, var(--codf-text));
}

.codf-wrap :where(.codf-input):focus {
	outline: none;
	border-color: var(--codf-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--codf-focus) 25%, transparent);
}

@supports not (color: color-mix(in srgb, red, blue)) {
	.codf-wrap :where(.codf-input):focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25); }
}

.codf-wrap :where(.codf-input):disabled,
.codf-wrap :where(.codf-input)[readonly] {
	opacity: 0.6;
	cursor: not-allowed;
}

.codf-wrap .codf-has-error :where(.codf-input),
.codf-wrap .codf-has-error :where(.codf-dropzone, .codf-signature-pad) {
	border-color: var(--codf-error);
}

.codf-wrap .codf-has-error :where(.codf-input):focus {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--codf-error) 22%, transparent);
}

/* Subcampos (nombre, dirección) */
:where(.codf-wrap) .codf-subfields {
	display: grid;
	gap: calc(var(--codf-spacing) * 0.75);
	grid-template-columns: repeat(var(--codf-sub-cols, 2), minmax(0, 1fr));
}

:where(.codf-wrap) .codf-subfields--3 { --codf-sub-cols: 3; }

:where(.codf-wrap) .codf-address {
	display: grid;
	gap: calc(var(--codf-spacing) * 0.75);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

:where(.codf-address) .codf-subfield--line1,
:where(.codf-address) .codf-subfield--line2 {
	grid-column: 1 / -1;
}

:where(.codf-address) .codf-sublabel {
	margin-block: 0 4px;
}

@container codf (max-width: 480px) {
	:where(.codf-wrap) .codf-subfields,
	:where(.codf-wrap) .codf-address {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------
 * Opciones (radio / checkbox / consentimiento)
 * ------------------------------------------------------------------- */
:where(.codf-wrap) .codf-choices {
	display: grid;
	gap: 8px 16px;
	grid-template-columns: minmax(0, 1fr);
}

:where(.codf-wrap) .codf-choices--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:where(.codf-wrap) .codf-choices--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:where(.codf-wrap) .codf-choices--inline { display: flex; flex-wrap: wrap; }

@container codf (max-width: 480px) {
	:where(.codf-wrap) .codf-choices--2col,
	:where(.codf-wrap) .codf-choices--3col {
		grid-template-columns: minmax(0, 1fr);
	}
}

:where(.codf-wrap) .codf-choice {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.codf-wrap :where(.codf-check) {
	flex: 0 0 auto;
	inline-size: 1.15em;
	block-size: 1.15em;
	margin: 0.18em 0 0;
	accent-color: var(--codf-primary);
	cursor: pointer;
}

:where(.codf-wrap) .codf-choice-label {
	margin: 0;
	color: var(--codf-text);
	font-weight: 400;
	line-height: 1.45;
	cursor: pointer;
}

.codf-wrap :where(.codf-check, .codf-range, .codf-rating-input, .codf-ic-input, .codf-file-input):focus-visible + :where(label, .codf-dropzone-inner),
.codf-wrap :where(.codf-check):focus-visible {
	outline: 2px solid var(--codf-focus);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Botones
 * ------------------------------------------------------------------- */
:where(.codf-wrap) .codf-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-block-start: calc(var(--codf-spacing) * 1.25);
}

.codf-wrap :where(.codf-btn) {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	min-block-size: 2.75em;
	margin: 0;
	padding: var(--codf-button-padding);
	border: 1px solid transparent;
	border-radius: var(--codf-button-radius);
	background: var(--codf-button-bg);
	box-shadow: none;
	color: var(--codf-button-text);
	font: inherit;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.05s ease, opacity 0.15s ease;
}

.codf-wrap :where(.codf-btn):hover { filter: brightness(1.08); }
.codf-wrap :where(.codf-btn):active { transform: translateY(1px); }

.codf-wrap :where(.codf-btn):focus-visible {
	outline: 3px solid var(--codf-focus);
	outline-offset: 2px;
}

.codf-wrap :where(.codf-btn):disabled {
	opacity: 0.65;
	cursor: progress;
	filter: none;
	transform: none;
}

.codf-wrap :where(.codf-btn--secondary) {
	border-color: var(--codf-border);
	background: transparent;
	color: var(--codf-text);
}

.codf-wrap :where(.codf-submit) { margin-inline-start: 0; }
.codf-multistep :where(.codf-actions) .codf-next,
.codf-multistep :where(.codf-actions) .codf-submit { margin-inline-start: auto; }

:where(.codf-wrap) .codf-spinner {
	display: none;
	inline-size: 1em;
	block-size: 1em;
	border: 2px solid currentColor;
	border-inline-end-color: transparent;
	border-radius: 50%;
	animation: codf-spin 0.7s linear infinite;
}

:where(.codf-wrap) .is-loading .codf-spinner { display: inline-block; }

@keyframes codf-spin {
	to { transform: rotate(360deg); }
}

.codf-wrap :where(.codf-btn-link) {
	padding: 2px 4px;
	border: 0;
	background: none;
	color: var(--codf-primary);
	font: inherit;
	font-size: 0.85em;
	text-decoration: underline;
	cursor: pointer;
}

.codf-wrap :where(.codf-btn-link):focus-visible {
	outline: 2px solid var(--codf-focus);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Avisos y confirmación
 * ------------------------------------------------------------------- */
:where(.codf-wrap) .codf-messages:focus { outline: none; }
:where(.codf-wrap) .codf-messages.has-message { margin-block-end: var(--codf-spacing); }

:where(.codf-wrap) .codf-notice {
	padding: 12px 14px;
	border: 1px solid var(--codf-border);
	border-inline-start-width: 4px;
	border-radius: var(--codf-radius);
	background: var(--codf-field-bg);
	color: var(--codf-text);
	font-size: 0.95em;
}

:where(.codf-wrap) .codf-notice + .codf-notice { margin-block-start: 8px; }
:where(.codf-wrap) .codf-notice--error { border-color: var(--codf-error); color: var(--codf-text); }
:where(.codf-wrap) .codf-notice--success { border-color: var(--codf-success); }
:where(.codf-wrap) .codf-notice--info { border-color: var(--codf-primary); }
:where(.codf-wrap) .codf-notice--diag { border-style: dashed; border-color: #b45309; background: #fffbeb; color: #78350f; font-size: 0.85em; }

:where(.codf-wrap) .codf-confirmation {
	color: var(--codf-text);
}

:where(.codf-wrap) .codf-confirmation:not(.codf-notice) {
	padding: 14px 16px;
	border: 1px solid var(--codf-success);
	border-radius: var(--codf-radius);
}

:where(.codf-wrap) .codf-preview-note,
:where(.codf-wrap) .codf-captcha-note {
	margin-block: 10px 0;
	color: var(--codf-muted);
	font-size: 0.8em;
}

:where(.codf-wrap) .codf-captcha {
	margin-block-start: var(--codf-spacing);
	min-block-size: 65px;
}

/* ---------------------------------------------------------------------
 * Contenido: HTML, encabezado, separador
 * ------------------------------------------------------------------- */
:where(.codf-wrap) .codf-html > :first-child { margin-block-start: 0; }
:where(.codf-wrap) .codf-html > :last-child { margin-block-end: 0; }

:where(.codf-wrap) .codf-heading-title {
	margin: 0;
	color: var(--codf-text);
	line-height: 1.3;
}

:where(.codf-wrap) .codf-heading-sub { margin-block-start: 4px; color: var(--codf-muted); }
:where(.codf-wrap) .codf-align-center { text-align: center; }
:where(.codf-wrap) .codf-align-end { text-align: end; }

:where(.codf-wrap) .codf-divider {
	block-size: 0;
	margin: calc(var(--codf-spacing) * 0.5) 0;
	border: 0;
	border-block-start: 1px solid var(--codf-border);
	background: none;
}

:where(.codf-wrap) .codf-divider--dashed { border-block-start-style: dashed; }
:where(.codf-wrap) .codf-divider--dotted { border-block-start-style: dotted; }
:where(.codf-wrap) .codf-divider--none { border-block-start-color: transparent; }
:where(.codf-wrap) .codf-divider-title { margin: 0; font-size: 1.1em; color: var(--codf-text); }
:where(.codf-wrap) .codf-divider-text { margin-block-start: 4px; color: var(--codf-muted); font-size: 0.9em; }

/* ---------------------------------------------------------------------
 * Pasos y progreso
 * ------------------------------------------------------------------- */
:where(.codf-wrap) .codf-progress {
	margin-block-end: calc(var(--codf-spacing) * 1.25);
}

:where(.codf-wrap) .codf-progress-text {
	margin-block-end: 8px;
	color: var(--codf-muted);
	font-size: 0.85em;
	font-weight: 600;
}

:where(.codf-wrap) .codf-progress-title { color: var(--codf-text); }

:where(.codf-wrap) .codf-progress-bar {
	position: relative;
	block-size: 8px;
	overflow: hidden;
	border-radius: 999px;
	background: color-mix(in srgb, var(--codf-border) 70%, transparent);
}

:where(.codf-wrap) .codf-progress-fill {
	display: block;
	block-size: 100%;
	border-radius: inherit;
	background: var(--codf-primary);
	transition: inline-size 0.3s ease, width 0.3s ease;
}

:where(.codf-wrap) .codf-progress-dots {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.codf-wrap) .codf-progress-dots li {
	flex: 1 1 0;
	block-size: 6px;
	margin: 0;
	border-radius: 999px;
	background: var(--codf-border);
}

:where(.codf-wrap) .codf-progress-dots li.is-done,
:where(.codf-wrap) .codf-progress-dots li.is-current { background: var(--codf-primary); }
:where(.codf-wrap) .codf-progress-dots li.is-current { box-shadow: 0 0 0 2px color-mix(in srgb, var(--codf-primary) 30%, transparent); }

:where(.codf-wrap) .codf-step-title {
	margin: 0 0 var(--codf-spacing);
	color: var(--codf-text);
	font-size: 1.15em;
}

:where(.codf-wrap) .codf-step-title:focus { outline: none; }

.codf-wrap:not(.codf-js) .codf-step + .codf-step {
	margin-block-start: calc(var(--codf-spacing) * 1.5);
	padding-block-start: calc(var(--codf-spacing) * 1.5);
	border-block-start: 1px solid var(--codf-border);
}

/* ---------------------------------------------------------------------
 * Valoración (estrellas)
 * ------------------------------------------------------------------- */
:where(.codf-wrap) .codf-rating {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2px;
	align-items: center;
}

.codf-wrap .codf-rating-input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
	pointer-events: none;
}

:where(.codf-wrap) .codf-rating-star {
	display: inline-flex;
	padding: 3px;
	border-radius: 6px;
	color: var(--codf-muted);
	cursor: pointer;
	transition: color 0.12s ease, transform 0.12s ease;
}

:where(.codf-wrap) .codf-rating-icon { fill: transparent; stroke: currentColor; }
:where(.codf-wrap) .codf-rating-star.is-on,
:where(.codf-wrap) .codf-rating-star.is-hover,
:where(.codf-wrap) .codf-rating-input:checked + .codf-rating-star { color: #f59e0b; }
:where(.codf-wrap) .codf-rating-star.is-on .codf-rating-icon,
:where(.codf-wrap) .codf-rating-star.is-hover .codf-rating-icon,
:where(.codf-wrap) .codf-rating-input:checked + .codf-rating-star .codf-rating-icon { fill: currentColor; }
:where(.codf-wrap) .codf-rating-star:hover { transform: scale(1.08); }

/* ---------------------------------------------------------------------
 * Control deslizante
 * ------------------------------------------------------------------- */
:where(.codf-wrap) .codf-slider {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 6px 14px;
	align-items: center;
}

.codf-wrap .codf-range {
	--codf-range-pct: 50%;
	inline-size: 100%;
	block-size: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.codf-wrap .codf-range::-webkit-slider-runnable-track {
	block-size: 6px;
	border-radius: 999px;
	background: linear-gradient(to right, var(--codf-primary) var(--codf-range-pct), var(--codf-border) var(--codf-range-pct));
}

.codf-rtl .codf-range::-webkit-slider-runnable-track {
	background: linear-gradient(to left, var(--codf-primary) var(--codf-range-pct), var(--codf-border) var(--codf-range-pct));
}

.codf-wrap .codf-range::-webkit-slider-thumb {
	inline-size: 20px;
	block-size: 20px;
	margin-block-start: -7px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--codf-primary);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	-webkit-appearance: none;
	appearance: none;
}

.codf-wrap .codf-range::-moz-range-track {
	block-size: 6px;
	border-radius: 999px;
	background: var(--codf-border);
}

.codf-wrap .codf-range::-moz-range-progress {
	block-size: 6px;
	border-radius: 999px;
	background: var(--codf-primary);
}

.codf-wrap .codf-range::-moz-range-thumb {
	inline-size: 18px;
	block-size: 18px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--codf-primary);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.codf-wrap .codf-range:focus { outline: none; }
.codf-wrap .codf-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--codf-focus) 35%, transparent); }
.codf-wrap .codf-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--codf-focus) 35%, transparent); }

:where(.codf-wrap) .codf-slider-output {
	min-inline-size: 3.5em;
	padding: 4px 10px;
	border-radius: var(--codf-radius);
	background: color-mix(in srgb, var(--codf-primary) 12%, transparent);
	color: var(--codf-text);
	font-weight: 600;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

:where(.codf-wrap) .codf-slider-scale {
	display: flex;
	grid-column: 1;
	justify-content: space-between;
	color: var(--codf-muted);
	font-size: 0.78em;
}

/* ---------------------------------------------------------------------
 * Firma
 * ------------------------------------------------------------------- */
:where(.codf-wrap) .codf-signature-pad {
	display: block;
	inline-size: 100%;
	block-size: var(--codf-sig-h, 180px);
	border: 1px dashed var(--codf-muted);
	border-radius: var(--codf-radius);
	background: var(--codf-field-bg);
	cursor: crosshair;
	touch-action: none;
	-ms-touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

:where(.codf-wrap) .codf-signature-pad:focus-visible {
	outline: 2px solid var(--codf-focus);
	outline-offset: 2px;
}

:where(.codf-wrap) .codf-signature-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	margin-block-start: 6px;
	color: var(--codf-muted);
	font-size: 0.8em;
}

/* ---------------------------------------------------------------------
 * Archivos (drag & drop)
 * ------------------------------------------------------------------- */
:where(.codf-wrap) .codf-dropzone {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
	justify-content: center;
	min-block-size: 120px;
	padding: 18px;
	border: 2px dashed var(--codf-border);
	border-radius: var(--codf-radius);
	background: var(--codf-field-bg);
	color: var(--codf-muted);
	text-align: center;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

:where(.codf-wrap) .codf-dropzone:hover,
:where(.codf-wrap) .codf-dropzone.is-drag {
	border-color: var(--codf-primary);
	background: color-mix(in srgb, var(--codf-primary) 6%, var(--codf-field-bg));
}

:where(.codf-wrap) .codf-dropzone:focus-within {
	border-color: var(--codf-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--codf-focus) 25%, transparent);
}

.codf-wrap .codf-file-input {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}

.codf-wrap:not(.codf-js) .codf-file-input {
	position: static;
	block-size: auto;
	opacity: 1;
}

.codf-wrap:not(.codf-js) .codf-dropzone-inner { display: none; }

:where(.codf-wrap) .codf-dropzone-inner {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
}

:where(.codf-wrap) .codf-dropzone-icon { color: var(--codf-primary); }
:where(.codf-wrap) .codf-dropzone-text { color: var(--codf-text); font-size: 0.95em; }
:where(.codf-wrap) .codf-dropzone-hint { font-size: 0.8em; }

:where(.codf-wrap) .codf-file-list {
	display: grid;
	gap: 6px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

:where(.codf-wrap) .codf-file-list:empty { display: none; }

:where(.codf-wrap) .codf-file-item {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0;
	padding: 8px 10px;
	border: 1px solid var(--codf-border);
	border-radius: var(--codf-radius);
	background: var(--codf-field-bg);
	font-size: 0.9em;
}

:where(.codf-wrap) .codf-file-name {
	flex: 1 1 auto;
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

:where(.codf-wrap) .codf-file-size { color: var(--codf-muted); font-size: 0.85em; font-variant-numeric: tabular-nums; }

.codf-wrap :where(.codf-file-remove) {
	padding: 4px 10px;
	border: 1px solid var(--codf-border);
	border-radius: 999px;
	background: transparent;
	color: var(--codf-error);
	font: inherit;
	font-size: 0.85em;
	cursor: pointer;
}

.codf-wrap :where(.codf-file-remove):focus-visible {
	outline: 2px solid var(--codf-focus);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Elección con imágenes
 * ------------------------------------------------------------------- */
:where(.codf-wrap) .codf-ic {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(var(--codf-ic-cols, 3), minmax(0, 1fr));
}

@container codf (max-width: 560px) {
	:where(.codf-wrap) .codf-ic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

:where(.codf-wrap) .codf-ic-item { position: relative; }

.codf-wrap .codf-ic-input {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 10px;
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
}

:where(.codf-wrap) .codf-ic-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	block-size: 100%;
	margin: 0;
	padding: 8px;
	border: 2px solid var(--codf-border);
	border-radius: var(--codf-radius);
	background: var(--codf-field-bg);
	color: var(--codf-text);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

:where(.codf-wrap) .codf-ic-card:hover { border-color: color-mix(in srgb, var(--codf-primary) 55%, var(--codf-border)); }

:where(.codf-wrap) .codf-ic-img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: calc(var(--codf-radius) * 0.6);
	background: color-mix(in srgb, var(--codf-border) 45%, transparent);
}

:where(.codf-wrap) .codf-ic-label { font-size: 0.92em; font-weight: 500; text-align: center; }

:where(.codf-wrap) .codf-ic-check {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	inline-size: 22px;
	block-size: 22px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.25);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.codf-wrap .codf-ic-input:checked + .codf-ic-card {
	border-color: var(--codf-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--codf-primary) 22%, transparent);
}

.codf-wrap .codf-ic-input:checked + .codf-ic-card .codf-ic-check {
	background: var(--codf-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 6.2 2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.codf-wrap .codf-ic-input:focus-visible + .codf-ic-card {
	outline: 3px solid var(--codf-focus);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Likert (tabla en escritorio, lista apilada en móvil)
 * ------------------------------------------------------------------- */
:where(.codf-wrap) .codf-likert {
	--codf-likert-label: 36%;
	border: 1px solid var(--codf-border);
	border-radius: var(--codf-radius);
	overflow: hidden;
}

:where(.codf-wrap) .codf-likert-head {
	display: flex;
	align-items: end;
	padding: 10px 12px;
	background: color-mix(in srgb, var(--codf-border) 30%, var(--codf-field-bg));
	color: var(--codf-muted);
	font-size: 0.8em;
	font-weight: 600;
	text-align: center;
}

:where(.codf-wrap) .codf-likert-corner { flex: 0 0 var(--codf-likert-label); }
:where(.codf-wrap) .codf-likert-colhead { flex: 1 1 0; min-inline-size: 0; padding-inline: 4px; }

:where(.codf-wrap) .codf-likert-row {
	display: block;
	margin: 0;
	padding: 10px 12px;
	border: 0;
	border-block-start: 1px solid var(--codf-border);
}

:where(.codf-wrap) .codf-likert-row:nth-of-type(even) { background: color-mix(in srgb, var(--codf-border) 12%, transparent); }

:where(.codf-wrap) .codf-likert-rowlabel {
	float: inline-start;
	inline-size: var(--codf-likert-label);
	margin: 0;
	padding: 0 8px 0 0;
	color: var(--codf-text);
	font-size: 0.92em;
}

:where(.codf-wrap) .codf-likert-options {
	display: flex;
	margin-inline-start: var(--codf-likert-label);
}

:where(.codf-wrap) .codf-likert-cell {
	display: flex;
	flex: 1 1 0;
	justify-content: center;
	align-items: center;
	min-inline-size: 0;
}

/* En escritorio la etiqueta de columna queda solo para lectores de pantalla (el encabezado la muestra). */
:where(.codf-wrap) .codf-likert-label {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@container codf (max-width: 600px) {
	:where(.codf-wrap) .codf-likert-head { display: none; }
	:where(.codf-wrap) .codf-likert-rowlabel { float: inline-start; inline-size: 100%; margin-block-end: 8px; padding: 0; font-weight: 600; }
	:where(.codf-wrap) .codf-likert-options { clear: both; flex-direction: column; gap: 6px; margin-inline-start: 0; }
	:where(.codf-wrap) .codf-likert-cell { justify-content: flex-start; gap: 10px; }
	:where(.codf-wrap) .codf-likert-label { position: static; inline-size: auto; block-size: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; cursor: pointer; }
}

@supports not (container-type: inline-size) {
	@media (max-width: 600px) {
		:where(.codf-wrap) .codf-likert-head { display: none; }
		:where(.codf-wrap) .codf-likert-rowlabel { float: inline-start; inline-size: 100%; margin-block-end: 8px; padding: 0; font-weight: 600; }
		:where(.codf-wrap) .codf-likert-options { clear: both; flex-direction: column; gap: 6px; margin-inline-start: 0; }
		:where(.codf-wrap) .codf-likert-cell { justify-content: flex-start; gap: 10px; }
		:where(.codf-wrap) .codf-likert-label { position: static; inline-size: auto; block-size: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
	}
}

/* ---------------------------------------------------------------------
 * Cálculo
 * ------------------------------------------------------------------- */
:where(.codf-wrap) .codf-calc-output {
	display: block;
	padding: var(--codf-field-padding);
	border: 1px solid var(--codf-border);
	border-radius: var(--codf-radius);
	background: color-mix(in srgb, var(--codf-border) 20%, var(--codf-field-bg));
	color: var(--codf-text);
	font-size: 1.15em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
 * Disposición: etiquetas a la izquierda
 * ------------------------------------------------------------------- */
@container codf (min-width: 561px) {
	.codf-layout-left :where(.codf-field:not(.codf-field--html, .codf-field--divider, .codf-field--heading, .codf-field--hidden)) {
		display: grid;
		grid-template-columns: var(--codf-label-col) minmax(0, 1fr);
		column-gap: var(--codf-spacing);
		align-items: start;
	}

	.codf-layout-left :where(.codf-field) > .codf-label { grid-column: 1; grid-row: 1 / span 4; margin: 0; padding-block-start: 0.6em; }
	.codf-layout-left :where(.codf-field) > :not(.codf-label):not(.codf-fieldset) { grid-column: 2; }
	.codf-layout-left :where(.codf-field) > .codf-fieldset { grid-column: 1 / -1; }
	.codf-layout-left :where(.codf-fieldset) > legend.codf-label { float: inline-start; inline-size: var(--codf-label-col); padding-inline-end: var(--codf-spacing); }
	.codf-layout-left :where(.codf-fieldset) > :not(legend) { margin-inline-start: var(--codf-label-col); }
}

/* ---------------------------------------------------------------------
 * Tamaño de campo, sub-etiquetas y modo de estilos
 * ------------------------------------------------------------------- */
@container codf (min-width: 561px) {
	:where(.codf-fields, .codf-layout-col) > .codf-size-small:not(.codf-field--layout, .codf-field--html, .codf-field--divider, .codf-field--heading, .codf-field--pagebreak, .codf-field--entry_preview) :where(.codf-input, .codf-password-wrap, .codf-datetime, .codf-date-dropdowns) {
		max-inline-size: 25ch;
	}

	:where(.codf-fields, .codf-layout-col) > .codf-size-medium:not(.codf-field--textarea, .codf-field--richtext, .codf-field--layout, .codf-field--html, .codf-field--divider, .codf-field--heading, .codf-field--pagebreak, .codf-field--entry_preview, .codf-field--file, .codf-field--signature, .codf-field--likert, .codf-field--nps, .codf-field--address, .codf-field--name) :where(.codf-input, .codf-password-wrap) {
		max-inline-size: 60%;
	}

	:where(.codf-fields, .codf-layout-col) > .codf-size-medium:is(.codf-field--date, .codf-field--time) :where(.codf-datetime, .codf-date-dropdowns) {
		max-inline-size: 60%;
	}

	:where(.codf-layout-col) > .codf-size-medium :where(.codf-input, .codf-password-wrap) { max-inline-size: 100%; }
}

.codf-wrap .codf-size-large :where(.codf-input) {
	min-block-size: 3.15em;
	font-size: 1.08em;
}

.codf-wrap .codf-size-large :where(textarea.codf-input, .codf-rt-editor) { min-block-size: 10em; }
.codf-wrap .codf-size-small :where(textarea.codf-input, .codf-rt-editor) { min-block-size: 4.5em; }

.codf-sublabels-hidden :where(.codf-sublabel) {
	position: absolute !important;
	inline-size: 1px !important;
	block-size: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.codf-sublabels-hidden :where(.codf-subfield--confirm) { margin-block-start: calc(var(--codf-spacing) * 0.5); }

/* Solo estilo base: sin sombras ni decoraciones de presets. */
.codf-style-base :where(.codf-btn:not(.codf-btn--secondary)) { box-shadow: none; }

/* ---------------------------------------------------------------------
 * Diseño en columnas
 * ------------------------------------------------------------------- */
:where(.codf-wrap) .codf-field--layout { display: block; }

:where(.codf-wrap) .codf-layout-title {
	margin: 0 0 8px;
	color: var(--codf-text);
	font-weight: var(--codf-label-weight);
}

:where(.codf-wrap) .codf-layout-grid {
	display: grid;
	grid-template-columns: var(--codf-layout-tpl, repeat(2, minmax(0, 1fr)));
	gap: var(--codf-spacing) calc(var(--codf-spacing) * 0.75);
	align-items: start;
}

:where(.codf-wrap) .codf-layout-col {
	display: grid;
	gap: var(--codf-spacing);
	align-content: start;
	min-inline-size: 0;
}

:where(.codf-layout-col) > .codf-field { min-inline-size: 0; }

@container codf (max-width: 560px) {
	:where(.codf-wrap) .codf-layout-grid { grid-template-columns: minmax(0, 1fr); }
}

@supports not (container-type: inline-size) {
	@media (max-width: 600px) {
		:where(.codf-wrap) .codf-layout-grid { grid-template-columns: minmax(0, 1fr); }
	}
}

/* ---------------------------------------------------------------------
 * Contador de límite, sugerencia de correo
 * ------------------------------------------------------------------- */
:where(.codf-wrap) .codf-limit { text-align: end; }

:where(.codf-wrap) .codf-email-suggestion { margin-block-start: 6px; }
.codf-wrap :where(.codf-email-suggestion-btn) { padding-inline: 0; font-size: 0.88em; }

/* ---------------------------------------------------------------------
 * Fecha / Hora
 * ------------------------------------------------------------------- */
:where(.codf-wrap) .codf-datetime {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: calc(var(--codf-spacing) * 0.75);
}

:where(.codf-wrap) .codf-date-dropdowns {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1.1fr);
	gap: 8px;
}

:where(.codf-wrap) .codf-date-dropdowns .codf-date-dropdowns { display: contents; }

@container codf (max-width: 420px) {
	:where(.codf-wrap) .codf-datetime { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
 * Contraseña
 * ------------------------------------------------------------------- */
:where(.codf-wrap) .codf-password-wrap { position: relative; }

.codf-wrap .codf-password-wrap :where(.codf-input) { padding-inline-end: 2.75em; }

.codf-wrap :where(.codf-password-toggle) {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	display: grid;
	place-items: center;
	inline-size: 2.6em;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--codf-muted);
	cursor: pointer;
}

.codf-wrap :where(.codf-password-toggle)[aria-pressed="true"] { color: var(--codf-primary); }

.codf-wrap :where(.codf-password-toggle):focus-visible {
	outline: 2px solid var(--codf-focus);
	outline-offset: -4px;
	border-radius: var(--codf-radius);
}

:where(.codf-wrap) .codf-strength {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-block-start: 8px;
	font-size: 0.82em;
}

:where(.codf-wrap) .codf-strength-bar {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
	max-inline-size: 220px;
}

:where(.codf-wrap) .codf-strength-bar span {
	block-size: 6px;
	border-radius: 3px;
	background: color-mix(in srgb, var(--codf-border) 70%, transparent);
}

.codf-wrap .codf-strength[data-score="1"] .codf-strength-bar span:nth-child(-n+1),
.codf-wrap .codf-strength[data-score="0"] .codf-strength-bar span:nth-child(-n+1) { background: var(--codf-error); }
.codf-wrap .codf-strength[data-score="2"] .codf-strength-bar span:nth-child(-n+2) { background: #d97706; }
.codf-wrap .codf-strength[data-score="3"] .codf-strength-bar span:nth-child(-n+3) { background: #65a30d; }
.codf-wrap .codf-strength[data-score="4"] .codf-strength-bar span { background: var(--codf-success); }

:where(.codf-wrap) .codf-strength-text { color: var(--codf-muted); font-weight: 600; }

:where(.codf-wrap) .codf-password-reqs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 6px 0 0;
	padding: 0;
	color: var(--codf-muted);
	font-size: 0.8em;
	list-style: none;
}

:where(.codf-wrap) .codf-password-reqs li { margin: 0; }
:where(.codf-wrap) .codf-password-reqs li::before { content: "○ "; }
:where(.codf-wrap) .codf-password-reqs li.is-met { color: var(--codf-success); }
:where(.codf-wrap) .codf-password-reqs li.is-met::before { content: "✓ "; }

/* ---------------------------------------------------------------------
 * Texto enriquecido
 * ------------------------------------------------------------------- */
:where(.codf-wrap) .codf-rt-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 4px;
	border: 1px solid var(--codf-border);
	border-block-end: 0;
	border-start-start-radius: var(--codf-radius);
	border-start-end-radius: var(--codf-radius);
	background: color-mix(in srgb, var(--codf-border) 25%, var(--codf-field-bg));
}

.codf-wrap :where(.codf-rt-btn) {
	display: inline-grid;
	place-items: center;
	inline-size: 2.1em;
	block-size: 2.1em;
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: calc(var(--codf-radius) * 0.6);
	background: transparent;
	color: var(--codf-text);
	cursor: pointer;
}

.codf-wrap :where(.codf-rt-btn):hover { background: color-mix(in srgb, var(--codf-primary) 10%, transparent); }
.codf-wrap :where(.codf-rt-btn)[aria-pressed="true"],
.codf-wrap :where(.codf-rt-btn).is-active {
	border-color: color-mix(in srgb, var(--codf-primary) 40%, transparent);
	background: color-mix(in srgb, var(--codf-primary) 14%, transparent);
	color: var(--codf-primary);
}

.codf-wrap :where(.codf-rt-btn):focus-visible {
	outline: 2px solid var(--codf-focus);
	outline-offset: 1px;
}

.codf-wrap .is-enhanced :where(.codf-rt-editor) {
	min-block-size: calc(var(--codf-rt-rows, 6) * 1.5em);
	max-block-size: 60vh;
	overflow-y: auto;
	border-start-start-radius: 0;
	border-start-end-radius: 0;
	cursor: text;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.codf-wrap :where(.codf-rt-editor) :where(p, ul, ol) { margin: 0 0 0.6em; }
.codf-wrap :where(.codf-rt-editor) :where(ul, ol) { padding-inline-start: 1.4em; }
.codf-wrap :where(.codf-rt-editor) a { color: var(--codf-primary); text-decoration: underline; }

.codf-wrap .codf-rt-editor.is-empty::before {
	content: attr(data-placeholder);
	color: var(--codf-muted);
	pointer-events: none;
}

:where(.codf-wrap) .codf-rt-link {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	padding: 6px;
	border: 1px solid var(--codf-border);
	border-block-end: 0;
	background: var(--codf-field-bg);
}

.codf-wrap :where(.codf-rt-link) .codf-rt-link-input { flex: 1 1 14em; min-block-size: 2.3em; }
.codf-wrap :where(.codf-rt-link) .codf-btn { min-block-size: 2.3em; padding: 6px 14px; font-size: 0.9em; }
:where(.codf-wrap) .codf-rt-link-error { flex-basis: 100%; color: var(--codf-error); font-size: 0.82em; }

/* ---------------------------------------------------------------------
 * Vista previa de la entrada
 * ------------------------------------------------------------------- */
:where(.codf-wrap) .codf-entry-preview-title {
	margin: 0 0 6px;
	font-size: 1.05em;
	font-weight: 700;
}

:where(.codf-wrap) .codf-entry-preview-notice { margin: 0 0 10px; color: var(--codf-muted); font-size: 0.9em; }

:where(.codf-wrap) .codf-entry-preview {
	padding: calc(var(--codf-spacing) * 0.75);
	border: 1px solid var(--codf-border);
	border-radius: var(--codf-radius);
	background: color-mix(in srgb, var(--codf-border) 12%, var(--codf-field-bg));
}

:where(.codf-wrap) .codf-entry-preview dl { margin: 0; }
:where(.codf-wrap) .codf-entry-preview dt { margin: 0; font-weight: 600; font-size: 0.88em; color: var(--codf-muted); }
:where(.codf-wrap) .codf-entry-preview dd { margin: 0 0 10px; white-space: pre-line; overflow-wrap: anywhere; }
:where(.codf-wrap) .codf-entry-preview dd:last-child { margin-block-end: 0; }
:where(.codf-wrap) .codf-entry-preview table { inline-size: 100%; border-collapse: collapse; font-size: 0.95em; }
:where(.codf-wrap) .codf-entry-preview :where(th, td) { padding: 6px 8px; border-block-end: 1px solid var(--codf-border); text-align: start; vertical-align: top; overflow-wrap: anywhere; }
:where(.codf-wrap) .codf-entry-preview th { inline-size: 35%; font-weight: 600; }
:where(.codf-wrap) .codf-entry-preview-empty { margin: 0; color: var(--codf-muted); font-style: italic; }

/* ---------------------------------------------------------------------
 * Captcha personalizado
 * ------------------------------------------------------------------- */
:where(.codf-wrap) .codf-captcha-question { margin: 0 0 6px; font-weight: 600; }
.codf-wrap .codf-field--captcha_question :where(.codf-input) { max-inline-size: 16em; }
:where(.codf-wrap) .codf-captcha--invisible { display: block; min-block-size: 0; }

/* ---------------------------------------------------------------------
 * Net Promoter Score
 * ------------------------------------------------------------------- */
:where(.codf-wrap) .codf-nps-scale {
	display: grid;
	grid-template-columns: repeat(11, minmax(0, 1fr));
	gap: 4px;
}

:where(.codf-wrap) .codf-nps-item { position: relative; display: block; }

.codf-wrap :where(.codf-nps-input) {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

:where(.codf-wrap) .codf-nps-label {
	display: grid;
	place-items: center;
	min-block-size: 2.6em;
	margin: 0;
	border: 1px solid var(--codf-border);
	border-radius: calc(var(--codf-radius) * 0.75);
	background: var(--codf-field-bg);
	color: var(--codf-text);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.codf-wrap .codf-nps-input:hover + .codf-nps-label { border-color: var(--codf-primary); }
.codf-wrap .codf-nps-input:focus-visible + .codf-nps-label { outline: 2px solid var(--codf-focus); outline-offset: 2px; }
.codf-wrap .codf-nps-input:checked + .codf-nps-label { border-color: var(--codf-primary); background: var(--codf-primary); color: #fff; }

.codf-wrap .codf-nps--colors .codf-nps--detractor .codf-nps-input:checked + .codf-nps-label { border-color: #dc2626; background: #dc2626; }
.codf-wrap .codf-nps--colors .codf-nps--passive .codf-nps-input:checked + .codf-nps-label { border-color: #b45309; background: #b45309; }
.codf-wrap .codf-nps--colors .codf-nps--promoter .codf-nps-input:checked + .codf-nps-label { border-color: #15803d; background: #15803d; }
.codf-wrap .codf-nps--colors .codf-nps--detractor .codf-nps-label { box-shadow: inset 0 -3px 0 #fca5a5; }
.codf-wrap .codf-nps--colors .codf-nps--passive .codf-nps-label { box-shadow: inset 0 -3px 0 #fcd34d; }
.codf-wrap .codf-nps--colors .codf-nps--promoter .codf-nps-label { box-shadow: inset 0 -3px 0 #86efac; }

:where(.codf-wrap) .codf-nps-legend {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-block-start: 4px;
}

@container codf (max-width: 420px) {
	:where(.codf-wrap) .codf-nps-scale { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
 * Archivos: miniaturas
 * ------------------------------------------------------------------- */
:where(.codf-wrap) .codf-file-thumb {
	flex: 0 0 auto;
	inline-size: 40px;
	block-size: 40px;
	border-radius: calc(var(--codf-radius) * 0.6);
	object-fit: cover;
	background: color-mix(in srgb, var(--codf-border) 30%, transparent);
}

/* ---------------------------------------------------------------------
 * Estado de carga
 * ------------------------------------------------------------------- */
.codf-is-busy :where(.codf-form) { cursor: progress; }
.codf-is-busy :where(.codf-steps) { opacity: 0.75; transition: opacity 0.2s ease; }

/* ---------------------------------------------------------------------
 * Presets
 * ------------------------------------------------------------------- */
.codf-preset-minimal :where(.codf-input) {
	border-width: 0 0 1px;
	border-radius: 0;
	background-color: transparent;
}

.codf-preset-minimal :where(.codf-input):focus {
	box-shadow: 0 1px 0 0 var(--codf-focus);
}

.codf-preset-modern :where(.codf-input) {
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.codf-preset-modern :where(.codf-btn:not(.codf-btn--secondary)) {
	box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--codf-button-bg) 70%, transparent);
}

.codf-preset-modern :where(.codf-label) { letter-spacing: 0.01em; }

.codf-preset-soft {
	padding: calc(var(--codf-spacing) * 1.5);
	border-radius: calc(var(--codf-radius) * 1.4);
	box-shadow: 0 10px 30px -12px rgba(15, 118, 110, 0.25);
}

.codf-preset-dark {
	color-scheme: dark;
	padding: calc(var(--codf-spacing) * 1.25);
	border-radius: var(--codf-radius);
}

.codf-preset-dark :where(select.codf-input:not([multiple])) {
	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 1.5 6 6.5l5-5' fill='none' stroke='%239ca3af' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.codf-preset-dark :where(.codf-notice--diag) { background: #422006; color: #fde68a; }

/* ---------------------------------------------------------------------
 * Accesibilidad: movimiento reducido, alto contraste, impresión
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.codf-wrap *,
	.codf-wrap *::before,
	.codf-wrap *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	:where(.codf-wrap) .is-loading .codf-spinner {
		animation: none;
		border-inline-end-color: currentColor;
		opacity: 0.6;
	}
}

@media (prefers-contrast: more) {
	.codf-wrap {
		--codf-border: #4b5563;
		--codf-muted: #374151;
	}

	.codf-preset-dark {
		--codf-border: #9ca3af;
		--codf-muted: #d1d5db;
	}
}

@media (forced-colors: active) {
	.codf-wrap :where(.codf-input, .codf-dropzone, .codf-signature-pad, .codf-ic-card, .codf-likert, .codf-notice, .codf-nps-label, .codf-rt-toolbar, .codf-entry-preview) {
		border-color: CanvasText;
	}

	.codf-wrap .codf-nps-input:checked + .codf-nps-label,
	.codf-wrap .codf-rt-btn[aria-pressed="true"] {
		outline: 2px solid Highlight;
	}

	:where(.codf-wrap) .codf-strength-bar span { border: 1px solid CanvasText; }

	.codf-wrap :where(.codf-btn) {
		border: 1px solid ButtonText;
		forced-color-adjust: auto;
	}

	.codf-wrap :where(.codf-input, .codf-btn, .codf-check):focus-visible,
	.codf-wrap .codf-ic-input:checked + .codf-ic-card,
	.codf-wrap .codf-rating-input:focus-visible + .codf-rating-star {
		outline: 2px solid Highlight;
	}

	:where(.codf-wrap) .codf-rating-star.is-on,
	:where(.codf-wrap) .codf-rating-input:checked + .codf-rating-star { color: Highlight; }
	:where(.codf-wrap) .codf-progress-fill { background: Highlight; }
	:where(.codf-wrap) .codf-error::before { background: CanvasText; color: Canvas; }
}

@media print {
	.codf-wrap :where(.codf-actions, .codf-captcha, .codf-signature-actions, .codf-file-remove, .codf-rt-toolbar, .codf-password-toggle) { display: none !important; }
}