/**
 * Estilos del formulario en el frontend.
 *
 * Neutrales a propósito: heredan tipografía y colores del tema y se
 * pueden ajustar con las variables --cfrm-*.
 */

.cfrm-wrapper {
	--cfrm-accent: #2563eb;
	--cfrm-border: #d4d7dd;
	--cfrm-border-focus: var(--cfrm-accent);
	--cfrm-error: #d63638;
	--cfrm-success-bg: #ecf9ef;
	--cfrm-success-border: #9ad0a6;
	--cfrm-text-muted: #6b7280;
	--cfrm-radius: 6px;
	--cfrm-gap: 18px;
	--cfrm-field-bg: #fff;

	max-width: 100%;
	box-sizing: border-box;
}

.cfrm-wrapper *,
.cfrm-wrapper *::before,
.cfrm-wrapper *::after {
	box-sizing: border-box;
}

.cfrm-form-title {
	margin: 0 0 18px;
}

/* ------------------------------------------------------------------
 * Rejilla de filas y columnas
 * ---------------------------------------------------------------- */

.cfrm-rows {
	display: block;
}

.cfrm-row {
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(var(--cfrm-gap) / -2);
	margin-right: calc(var(--cfrm-gap) / -2);
}

.cfrm-col {
	padding-left: calc(var(--cfrm-gap) / 2);
	padding-right: calc(var(--cfrm-gap) / 2);
	min-width: 0;
	flex: 0 0 auto;
}

.cfrm-col-1 { width: 8.3333%; }
.cfrm-col-2 { width: 16.6666%; }
.cfrm-col-3 { width: 25%; }
.cfrm-col-4 { width: 33.3333%; }
.cfrm-col-5 { width: 41.6666%; }
.cfrm-col-6 { width: 50%; }
.cfrm-col-7 { width: 58.3333%; }
.cfrm-col-8 { width: 66.6666%; }
.cfrm-col-9 { width: 75%; }
.cfrm-col-10 { width: 83.3333%; }
.cfrm-col-11 { width: 91.6666%; }
.cfrm-col-12 { width: 100%; }

/* En móvil y tablet vertical todo pasa a una columna. */
@media (max-width: 782px) {
	.cfrm-col {
		width: 100%;
	}
}

/* ------------------------------------------------------------------
 * Campos
 * ---------------------------------------------------------------- */

.cfrm-field {
	margin-bottom: var(--cfrm-gap);
}

.cfrm-label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	line-height: 1.4;
}

.cfrm-star {
	color: var(--cfrm-error);
	margin-left: 2px;
}

.cfrm-input {
	display: block;
	width: 100%;
	padding: 11px 13px;
	font-size: 16px; /* 16px evita el zoom automático en iOS. */
	font-family: inherit;
	line-height: 1.4;
	color: inherit;
	background: var(--cfrm-field-bg);
	border: 1px solid var(--cfrm-border);
	border-radius: var(--cfrm-radius);
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
	max-width: 100%;
}

select.cfrm-input {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 12px 8px;
	padding-right: 36px;
}

select.cfrm-input[multiple] {
	background-image: none;
	padding-right: 13px;
}

.cfrm-textarea {
	min-height: 100px;
	resize: vertical;
}

.cfrm-input:focus {
	outline: none;
	border-color: var(--cfrm-border-focus);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.cfrm-input::placeholder {
	color: #9ca3af;
	opacity: 1;
}

.cfrm-desc {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--cfrm-text-muted);
}

.cfrm-error {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--cfrm-error);
	font-weight: 500;
	display: none;
}

.cfrm-has-error .cfrm-error {
	display: block;
	margin-top: 6px;
}

.cfrm-has-error .cfrm-input,
.cfrm-has-error .cfrm-signature-pad {
	border-color: var(--cfrm-error);
}

.cfrm-has-error .cfrm-input:focus {
	box-shadow: 0 0 0 3px rgba(214, 54, 56, .15);
}

/* ------------------------------------------------------------------
 * Opciones (radio / checkbox)
 * ---------------------------------------------------------------- */

.cfrm-options {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.cfrm-options-inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 9px 20px;
}

.cfrm-option {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	cursor: pointer;
	line-height: 1.45;
	font-weight: 400;
}

.cfrm-option input[type="checkbox"],
.cfrm-option input[type="radio"] {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	margin: 1px 0 0;
	accent-color: var(--cfrm-accent);
	cursor: pointer;
}

.cfrm-acceptance-label {
	align-items: flex-start;
}

.cfrm-acceptance-text p:first-child {
	margin-top: 0;
}

.cfrm-acceptance-text p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
 * Maquetación
 * ---------------------------------------------------------------- */

.cfrm-heading {
	margin: 6px 0 4px;
	line-height: 1.3;
}

.cfrm-field-heading {
	margin-bottom: 12px;
}

.cfrm-heading-desc {
	margin: 0;
	color: var(--cfrm-text-muted);
	font-size: 14px;
}

.cfrm-paragraph {
	font-size: 15px;
	line-height: 1.65;
}

.cfrm-paragraph p:first-child {
	margin-top: 0;
}

.cfrm-paragraph p:last-child {
	margin-bottom: 0;
}

.cfrm-divider {
	border: 0;
	border-top: 1px solid var(--cfrm-border);
	margin: 4px 0 0;
}

/* ------------------------------------------------------------------
 * Firma
 * ---------------------------------------------------------------- */

.cfrm-signature-pad {
	position: relative;
	width: 100%;
	background: #fff;
	background-image:
		linear-gradient(45deg, #fafbfc 25%, transparent 25%),
		linear-gradient(-45deg, #fafbfc 25%, transparent 25%);
	background-size: 14px 14px;
	border: 1px solid var(--cfrm-border);
	border-radius: var(--cfrm-radius);
	overflow: hidden;
	touch-action: none; /* Imprescindible para que el dedo dibuje y no haga scroll. */
}

.cfrm-signature-canvas {
	display: block;
	width: 100%;
	height: 100%;
	cursor: crosshair;
	touch-action: none;
	position: relative;
	z-index: 2;
	background: transparent;
}

.cfrm-signature-canvas:focus {
	outline: 2px solid var(--cfrm-border-focus);
	outline-offset: -2px;
}

.cfrm-signature-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #9ca3af;
	font-size: 14px;
	pointer-events: none;
	text-align: center;
	padding: 0 16px;
	z-index: 1;
}

.cfrm-signature-baseline {
	position: absolute;
	left: 8%;
	right: 8%;
	bottom: 24%;
	border-bottom: 1px dashed #cbd5e1;
	pointer-events: none;
	z-index: 1;
}

.cfrm-signature.has-signature .cfrm-signature-baseline {
	opacity: .35;
}

.cfrm-signature-tools {
	display: flex;
	gap: 8px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.cfrm-signature-tools button {
	appearance: none;
	-webkit-appearance: none;
	background: #f3f4f6;
	border: 1px solid var(--cfrm-border);
	border-radius: var(--cfrm-radius);
	padding: 8px 14px;
	font-size: 13px;
	font-family: inherit;
	color: #374151;
	cursor: pointer;
	line-height: 1.3;
	transition: background .15s ease;
}

.cfrm-signature-tools button:hover:not(:disabled) {
	background: #e5e7eb;
}

.cfrm-signature-tools button:disabled {
	opacity: .5;
	cursor: default;
}

/* ------------------------------------------------------------------
 * Archivos
 * ---------------------------------------------------------------- */

.cfrm-file {
	padding: 10px 13px;
	font-size: 14px;
	background: #fbfbfc;
	cursor: pointer;
}

/* ------------------------------------------------------------------
 * Botón y mensajes
 * ---------------------------------------------------------------- */

.cfrm-actions {
	margin-top: 8px;
}

.cfrm-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	appearance: none;
	-webkit-appearance: none;
	background: var(--cfrm-accent);
	color: #fff;
	border: 0;
	border-radius: var(--cfrm-radius);
	padding: 14px 30px;
	font-size: 16px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.3;
	cursor: pointer;
	transition: filter .15s ease, opacity .15s ease;
	min-height: 48px; /* Objetivo táctil cómodo. */
}

.cfrm-submit:hover:not(:disabled) {
	filter: brightness(.92);
}

.cfrm-submit:focus-visible {
	outline: 3px solid rgba(37, 99, 235, .4);
	outline-offset: 2px;
}

.cfrm-submit:disabled {
	opacity: .7;
	cursor: progress;
}

.cfrm-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: cfrm-spin .7s linear infinite;
}

.cfrm-is-sending .cfrm-spinner {
	display: inline-block;
}

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

@media (prefers-reduced-motion: reduce) {
	.cfrm-spinner {
		animation-duration: 2s;
	}

	.cfrm-input,
	.cfrm-submit {
		transition: none;
	}
}

.cfrm-messages {
	display: none;
	margin: 0 0 18px;
	padding: 13px 16px;
	border-radius: var(--cfrm-radius);
	font-size: 15px;
	line-height: 1.5;
}

.cfrm-messages-error {
	display: block;
	background: #fdeced;
	border: 1px solid #f3b7b9;
	color: #8a1f28;
}

.cfrm-messages-success {
	display: block;
	background: var(--cfrm-success-bg);
	border: 1px solid var(--cfrm-success-border);
	color: #1c6427;
}

.cfrm-success {
	padding: 20px 22px;
	background: var(--cfrm-success-bg);
	border: 1px solid var(--cfrm-success-border);
	border-radius: var(--cfrm-radius);
	color: #17532a;
	font-size: 16px;
	line-height: 1.6;
}

.cfrm-success p:first-child {
	margin-top: 0;
}

.cfrm-success p:last-child {
	margin-bottom: 0;
}

.cfrm-success:focus {
	outline: none;
}

.cfrm-consent-text {
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--cfrm-text-muted);
}

.cfrm-notice {
	padding: 13px 16px;
	border-radius: var(--cfrm-radius);
	font-size: 15px;
	margin: 0 0 16px;
}

.cfrm-notice-error {
	background: #fdeced;
	border: 1px solid #f3b7b9;
	color: #8a1f28;
}

.cfrm-notice-info {
	background: #eef4fd;
	border: 1px solid #b8d0f2;
	color: #1e429f;
}

.cfrm-empty {
	color: var(--cfrm-text-muted);
	font-style: italic;
}

/* Campo trampa antispam: invisible pero accesible para el navegador. */
.cfrm-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ------------------------------------------------------------------
 * Impresión: útil si el cliente quiere guardar el contrato en PDF.
 * ---------------------------------------------------------------- */

@media print {
	.cfrm-signature-tools,
	.cfrm-actions,
	.cfrm-messages {
		display: none !important;
	}

	.cfrm-signature-pad {
		background-image: none;
	}
}