/**
 * Formularios Smart Sites CRM en la página.
 *
 * Es el estilo de respaldo: todas las reglas van con especificidad cero (:where), así cualquier regla del tema
 * manda sobre ellas, y no trae colores de marca: el texto, los bordes y el foco salen del color del texto que pone
 * el tema (currentColor), la tipografía se hereda y el botón lleva wp-element-button, el estilo de botón del
 * theme.json. Un tema ajusta lo demás con estas variables, apuntando a sus presets (regla: colores y tipografías
 * como referencias a los globales del sitio, nunca valores sueltos):
 *
 *   --scrm-acento       foco, opción marcada y casilla       (por defecto, el color del texto)
 *   --scrm-borde        borde de los campos                  (el color del texto al 25 %)
 *   --scrm-fondo-campo  fondo de los campos                  (transparente)
 *   --scrm-radio        radio de los campos y avisos         (6px)
 *   --scrm-error        campo con error y aviso de error     (rojo)
 *   --scrm-exito        aviso de envío correcto              (verde)
 *
 *   .scrm-form { --scrm-acento: var(--wp--preset--color--primary); }
 */

:where(.scrm-form) {
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	font-family: inherit;
	/* Las columnas se apilan según el ancho del formulario, no de la pantalla: sirve igual en una columna angosta. */
	container-type: inline-size;
}

:where(.scrm-form) * {
	box-sizing: border-box;
}

:where(.scrm-fields-grid) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--scrm-row-gap, 18px) var(--scrm-col-gap, 16px);
	width: 100%;
}

/* Títulos, textos, columnas y grupos dentro del formulario van a lo ancho. */
:where(.scrm-fields-grid) > :where(:not(.scrm-field-group)) {
	flex: 0 0 100%;
	width: 100%;
	margin-block: 0;
}

/* Grilla de Columnas */
:where(.scrm-field-group) {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
}

:where(.scrm-col-12) { flex: 0 0 100%; width: 100%; }
:where(.scrm-col-9)  { flex: 0 0 calc(75% - (var(--scrm-col-gap, 16px) * 0.25)); width: calc(75% - (var(--scrm-col-gap, 16px) * 0.25)); }
:where(.scrm-col-8)  { flex: 0 0 calc(66.666% - (var(--scrm-col-gap, 16px) * 0.333)); width: calc(66.666% - (var(--scrm-col-gap, 16px) * 0.333)); }
:where(.scrm-col-6)  { flex: 0 0 calc(50% - (var(--scrm-col-gap, 16px) * 0.5)); width: calc(50% - (var(--scrm-col-gap, 16px) * 0.5)); }
:where(.scrm-col-4)  { flex: 0 0 calc(33.333% - (var(--scrm-col-gap, 16px) * 0.666)); width: calc(33.333% - (var(--scrm-col-gap, 16px) * 0.666)); }
:where(.scrm-col-3)  { flex: 0 0 calc(25% - (var(--scrm-col-gap, 16px) * 0.75)); width: calc(25% - (var(--scrm-col-gap, 16px) * 0.75)); }

/* Bajo 460 px no caben dos campos de 220 px con su separación. */
@container (max-width: 460px) {
	:where(.scrm-col-9, .scrm-col-8, .scrm-col-6, .scrm-col-4, .scrm-col-3) {
		flex: 0 0 100%;
		width: 100%;
	}
}

/* Etiquetas (Labels) */
:where(.scrm-label) {
	font-size: 0.875em;
	font-weight: 600;
	margin-bottom: 6px;
	display: inline-block;
	line-height: 1.4;
	padding: 0;
}

:where(.scrm-required-mark) {
	color: var(--scrm-error, #B42318);
	margin-left: 2px;
	font-weight: 700;
}

/* Campos de Entrada */
:where(.scrm-input, .scrm-select, .scrm-textarea) {
	width: 100%;
	padding: 11px 14px;
	font-size: 1em;
	line-height: 1.5;
	color: inherit;
	background-color: var(--scrm-fondo-campo, transparent);
	border: 1.5px solid var(--scrm-borde, color-mix(in srgb, currentColor 25%, transparent));
	border-radius: var(--scrm-radio, 6px);
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	font-family: inherit;
}

:where(.scrm-input, .scrm-select, .scrm-textarea):hover {
	border-color: color-mix(in srgb, currentColor 45%, transparent);
}

:where(.scrm-input, .scrm-select, .scrm-textarea):focus-visible {
	border-color: var(--scrm-acento, currentColor);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--scrm-acento, currentColor) 18%, transparent);
}

:where(.scrm-textarea) {
	resize: vertical;
	min-height: 90px;
}

:where(.scrm-select) {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	padding-right: 36px;
}

/* Estados de Error en Campos */
:where(.scrm-input, .scrm-select, .scrm-textarea).is-invalid {
	border-color: var(--scrm-error, #B42318);
}

:where(.scrm-field-error-msg) {
	color: var(--scrm-error, #B42318);
	font-size: 0.8em;
	margin-top: 4px;
	font-weight: 500;
}

/* Opciones para marcar una: la pregunta es la leyenda del grupo */
:where(.scrm-field-group--radio) {
	margin: 0;
	padding: 0;
	border: 0;
}

:where(.scrm-radio-options) {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

:where(.scrm-radio-label) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

:where(.scrm-radio) {
	margin: 0;
	width: 16px;
	height: 16px;
	cursor: pointer;
	accent-color: var(--scrm-acento, currentColor);
}

:where(.scrm-field-group--radio:has(.is-invalid)) :where(.scrm-radio-label) {
	color: var(--scrm-error, #B42318);
}

/* Checkbox */
:where(.scrm-field-group--checkbox) {
	margin-top: 4px;
}

:where(.scrm-checkbox-label) {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.875em;
	line-height: 1.4;
	cursor: pointer;
}

:where(.scrm-checkbox) {
	margin-top: 2px;
	cursor: pointer;
	width: 16px;
	height: 16px;
	accent-color: var(--scrm-acento, currentColor);
}

/* Botón de envío: manda el estilo de botón del tema (lleva wp-element-button); esto es solo lo que le falta */
:where(.scrm-submit-btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	line-height: 1;
	min-height: 48px;
}

:where(.scrm-submit-btn):active {
	transform: scale(0.98);
}

:where(.scrm-submit-btn):disabled {
	opacity: 0.65;
	cursor: not-allowed;
	transform: none;
}

:where(.scrm-spinner-icon) {
	animation: scrm-spin 0.8s linear infinite;
}

@keyframes scrm-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Aviso de Éxito / Error. Con más de una línea, la primera va como título. */
:where(.scrm-form-feedback) {
	margin-top: 20px;
	padding: 16px 20px;
	border: 1px solid;
	border-radius: var(--scrm-radio, 6px);
	font-size: 0.875em;
	line-height: 1.5;
	font-weight: 500;
	animation: scrm-fade-in 0.3s ease;
}

:where(.scrm-form-feedback--success) {
	color: var(--scrm-exito, #067647);
	background-color: color-mix(in srgb, var(--scrm-exito, #067647) 8%, transparent);
}

:where(.scrm-form-feedback--error) {
	color: var(--scrm-error, #B42318);
	background-color: color-mix(in srgb, var(--scrm-error, #B42318) 8%, transparent);
}

:where(.scrm-form-feedback__titulo) {
	display: block;
	font-weight: 700;
}

@keyframes scrm-fade-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Ocultos hasta que hay algo que mostrar (el atributo hidden lo maneja frontend.js) */
.scrm-form-feedback[hidden],
.scrm-btn-spinner[hidden] {
	display: none !important;
}

:where(.scrm-btn-spinner) {
	display: inline-flex;
}

/* Cloudflare Turnstile, cuando está activo en Ajustes */
:where(.scrm-turnstile) {
	margin-top: var(--scrm-row-gap, 18px);
}