/**
 * Estilos públicos: campos trampa y reto de verificación.
 *
 * Marcado que espera esta hoja (lo pintan SFW_Frontend y SFW_Challenge):
 *
 *   <input type="text" name="sfw_hp_xxxx" class="sfw-hp" tabindex="-1"
 *          autocomplete="off" aria-hidden="true">
 *
 *   <div class="sfw-challenge sfw-challenge--checkbox" role="group">
 *     <p class="sfw-challenge__title">…</p>
 *     <input type="hidden" name="_sfw_challenge" value="…">
 *     <p class="sfw-challenge__field">
 *       <input type="checkbox" class="sfw-challenge__checkbox" name="sfw_challenge" value="…">
 *       <label class="sfw-challenge__label">…</label>
 *     </p>
 *     <p class="sfw-challenge__hint">…</p>
 *   </div>
 *
 * En el reto aritmético el campo es `.sfw-challenge__input` y la etiqueta va
 * delante. La casilla y su etiqueta son hermanas, no anidadas: por eso quien
 * alinea la fila es `.sfw-challenge__field`.
 *
 * @package SecureFormsWP
 */

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

/*
 * `display: none` es lo primero que comprueban los robots que se molestan en
 * mirar el CSS, y además algunos navegadores excluyen esos campos del envío.
 * La trampa se saca de la vista con posición y recorte: para descubrirla hay
 * que evaluar el CSS de verdad, no leer una propiedad.
 *
 * Las declaraciones van con !important porque los temas suelen imponer un
 * ancho, un margen o una posición a todos los campos del formulario y una
 * trampa visible sería un falso positivo garantizado.
 */
.sfw-hp,
.sfw-offscreen {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	max-width: 1px !important;
	max-height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	clip-path: inset(50%) !important;
	opacity: 0 !important;
	pointer-events: none !important;
	z-index: -1 !important;
}

/* La etiqueta asociada a una trampa se esconde igual que la trampa. */
.sfw-hp-label {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Ni la impresión ni los lectores de pantalla deben toparse con las trampas. */
@media print {

	.sfw-hp,
	.sfw-offscreen,
	.sfw-hp-label {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
 * Reto de verificación
 * ---------------------------------------------------------------------- */

.sfw-challenge {
	--sfw-bg: #f6f7f8;
	--sfw-border: #d5d8dc;
	--sfw-text: #1d2327;
	--sfw-muted: #5c6670;
	--sfw-accent: #2563a8;
	--sfw-ok: #1f7a3d;

	box-sizing: border-box;
	margin: 1em 0;
	padding: 0.9em 1em;
	border: 1px solid var(--sfw-border);
	border-radius: 6px;
	background: var(--sfw-bg);
	color: var(--sfw-text);
	font-size: 0.95em;
	line-height: 1.45;
	transition: border-color 0.2s ease;
}

.sfw-challenge *,
.sfw-challenge *::before,
.sfw-challenge *::after {
	box-sizing: inherit;
}

.sfw-challenge__title,
.sfw-challenge-title {
	margin: 0 0 0.35em;
	font-weight: 600;
	transition: color 0.2s ease;
}

.sfw-challenge__question,
.sfw-challenge-question {
	display: block;
	margin: 0 0 0.5em;
	color: var(--sfw-text);
}

/* Fila del control: alinea la casilla o el campo con su etiqueta. */
.sfw-challenge__field {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.55em;
	margin: 0;
}

.sfw-challenge__label,
.sfw-challenge-label {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	margin: 0;
	cursor: pointer;
}

.sfw-challenge__checkbox,
.sfw-challenge-checkbox {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	margin: 0;
	accent-color: var(--sfw-accent);
	cursor: pointer;
}

.sfw-challenge__text {
	flex: 1 1 auto;
}

/* Campo de respuesta del reto aritmético. */
.sfw-challenge__input,
.sfw-challenge-input {
	width: 6em;
	max-width: 100%;
	padding: 0.35em 0.5em;
	border: 1px solid var(--sfw-border);
	border-radius: 4px;
	background: #fff;
	color: var(--sfw-text);
	font: inherit;
	text-align: center;
}

.sfw-challenge__input:focus {
	outline: 2px solid var(--sfw-accent);
	outline-offset: 1px;
}

/* En regla aparte: un navegador sin :focus-visible descartaría toda la lista. */
.sfw-challenge__checkbox:focus-visible {
	outline: 2px solid var(--sfw-accent);
	outline-offset: 1px;
}

.sfw-challenge__hint,
.sfw-challenge-hint {
	margin: 0.5em 0 0;
	color: var(--sfw-muted);
	font-size: 0.85em;
}

/* Confirmación visible de que la casilla ha hecho su trabajo. */
.sfw-challenge.is-solved {
	border-color: var(--sfw-ok);
}

.sfw-challenge.is-solved .sfw-challenge__title,
.sfw-challenge.is-solved .sfw-challenge-title {
	color: var(--sfw-ok);
}

/* Aviso de privacidad breve bajo el formulario. */
.sfw-privacy-notice {
	margin: 0.6em 0 0;
	color: #5c6670;
	font-size: 0.8em;
	line-height: 1.4;
}

/* Mensaje de bloqueo o de reto pintado por una integración. */
.sfw-message {
	margin: 0.8em 0;
	padding: 0.7em 0.9em;
	border-left: 3px solid #b32d2e;
	background: rgba(179, 45, 46, 0.07);
	color: #1d2327;
	font-size: 0.95em;
}

.sfw-message--challenge {
	border-left-color: #b8860b;
	background: rgba(184, 134, 11, 0.09);
}

/* -------------------------------------------------------------------------
 * Preferencias del visitante
 * ---------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {

	.sfw-challenge {
		--sfw-bg: #1f2327;
		--sfw-border: #3c434a;
		--sfw-text: #e8eaed;
		--sfw-muted: #a7aeb5;
		--sfw-accent: #6ba4e8;
		--sfw-ok: #5cc47f;
	}

	.sfw-challenge__input,
	.sfw-challenge-input {
		background: #14171a;
	}

	.sfw-privacy-notice {
		color: #a7aeb5;
	}

	.sfw-message {
		background: rgba(224, 91, 92, 0.14);
		color: #e8eaed;
	}

	.sfw-message--challenge {
		background: rgba(224, 179, 74, 0.14);
	}
}

/* El tema puede forzar el esquema con un atributo en la raíz. */
:root[data-theme="dark"] .sfw-challenge {
	--sfw-bg: #1f2327;
	--sfw-border: #3c434a;
	--sfw-text: #e8eaed;
	--sfw-muted: #a7aeb5;
	--sfw-accent: #6ba4e8;
	--sfw-ok: #5cc47f;
}

:root[data-theme="light"] .sfw-challenge {
	--sfw-bg: #f6f7f8;
	--sfw-border: #d5d8dc;
	--sfw-text: #1d2327;
	--sfw-muted: #5c6670;
	--sfw-accent: #2563a8;
	--sfw-ok: #1f7a3d;
}

@media (prefers-reduced-motion: reduce) {

	.sfw-challenge,
	.sfw-challenge__title {
		transition: none;
	}
}