/**
 * Urra Core — Contact Form 7: feedback de validación y respuesta.
 */

:root {
	--cf7-ok: #10b981;
	--cf7-ok-bg: #ecfdf5;
	--cf7-err: #ef4444;
	--cf7-err-bg: #fef2f2;
	--cf7-txt: #0b1020;
	--cf7-radius: 14px;
	--cf7-shadow: 0 8px 30px rgba(2, 6, 23, 0.12);
}

.wpcf7 .screen-reader-response {
	display: none;
}

.wpcf7 form .wpcf7-response-output {
	margin: 0 0 16px 0;
	border: none;
	border-radius: var(--cf7-radius);
	padding: 14px 16px 14px 48px;
	background: var(--cf7-err-bg);
	color: var(--cf7-err);
	font: 500 14px/1.25 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	box-shadow: var(--cf7-shadow);
	position: relative;
	opacity: 0;
	transform: translateY(-6px);
	animation: cf7-pop 0.35s ease forwards;
}

.wpcf7 form[data-status="sent"] .wpcf7-response-output {
	background: var(--cf7-ok-bg);
	color: var(--cf7-ok);
}

.wpcf7 form .wpcf7-response-output::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 50%;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="13"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>');
}

.wpcf7 form[data-status="sent"] .wpcf7-response-output::before {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%2310b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/><circle cx="12" cy="12" r="10"/></svg>');
}

@keyframes cf7-pop {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.wpcf7 .wpcf7-form-control-wrap {
	position: relative;
	display: block;
}

.wpcf7 .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--cf7-err) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf7-err) 15%, transparent);
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
	padding-bottom: initial !important;
}

.wpcf7 .wpcf7-form-control:focus {
	outline: none !important;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--cf7-ok) 22%, transparent);
}

.wpcf7 .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
	position: static;
	display: block;
	margin-top: 6px;
	font: 500 12px/1.4 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: var(--cf7-err);
	background: color-mix(in srgb, var(--cf7-err-bg) 85%, #fff);
	padding: 8px 10px;
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(239, 68, 68, 0.06);
	pointer-events: none;
	opacity: 0;
	animation: cf7-tip 0.3s ease forwards;
}

@keyframes cf7-tip {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.wpcf7 .wpcf7-form-control.wpcf7-not-valid::placeholder {
	color: color-mix(in srgb, var(--cf7-err) 55%, #666);
}

.wpcf7 form.submitting .wpcf7-submit,
.wpcf7 form.submitting [type="submit"] {
	opacity: 0.6;
	pointer-events: none;
}

.wpcf7 form.submitting .wpcf7-spinner {
	display: none !important;
}