/* =============================================================================
   Campos de formulario: un solo lugar para todo el sitio, salvo el checkout
   -----------------------------------------------------------------------------
   Todo campo (texto, select, área de texto, casilla, radio) se ve igual en todo
   el sitio. Ningún otro CSS del theme les da borde, alto, fondo, letra ni
   appearance: lo vigila infra/tests/theme-blocks-contract-test.sh, y
   infra/tests/fields-audit-test.sh lo mide en el navegador página por página.

   Cómo está armado:
   1. Base global: también la hereda el checkout, cuyos campos (los de
      WooCommerce, con etiqueta flotante) toman el aspecto de la tienda en
      checkout.css. Su aspecto está fijado en
      infra/tests/fixtures/checkout-fields.json: no se cambia.
   2. Estándar: por tipo de elemento, sin clases y con especificidad cero, así
      un campo nuevo sale bien sin hacer nada. Fuera del checkout
      (body:not(.woocommerce-checkout)) y fuera de los componentes de WordPress
      y de WooCommerce ([class*="components-"]: carro, Mini-Cart, paneles del
      editor), que tienen su propio diseño.
   3. Adaptadores: el mismo estándar para los campos que WooCommerce estiliza
      con más especificidad (páginas de WooCommerce, Mi cuenta, opciones de un
      producto variable, filtros, "Ordenar", acceso con código de em-otp, formulario de
      contacto de em-contact-form). Un componente nuevo
      se adapta agregando su selector a las listas de su tipo, aquí y en ningún
      otro archivo.
   Variantes a propósito: los campos del checkout (checkout.css), el buscador del header (oscuro, header.css), el
   slider de precio (no es un campo de texto) y el país cuando hay uno solo
   (select.country_to_state--single: WooCommerce lo muestra como texto).
   Solo tokens de theme.json.
   ============================================================================= */

:root {
	--ws-field-font-size: var(--wp--preset--font-size--small);
}

/* ---- 1. Base global (también el checkout) ------------------------------------ */
:where(input[type="text"], input[type="email"], input[type="search"], input[type="tel"],
	input[type="number"], input[type="password"], select, textarea) {
	font: inherit;
}

:where(input, select, textarea):focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
}

:where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--wp--preset--color--primary);
}

/* ---- 2 y 3. Texto, select y área de texto ------------------------------------- */
:where(body:not(.woocommerce-checkout)) :where(input:is(:not([type]), [type="text"], [type="email"], [type="search"], [type="tel"], [type="number"], [type="password"], [type="url"], [type="date"]), select, textarea):not(:where([class*="components-"], [class*="components-"] *, .ws-header__search *, #wpadminbar *)),
body:not(.woocommerce-checkout) :is(.woocommerce, .woocommerce-page) form .form-row :is(input.input-text, select:not(.country_to_state--single), textarea),
body.woocommerce-page:not(.woocommerce-checkout) :is(input.input-text, select:not(.country_to_state--single)):not(:where([class*="components-"], [class*="components-"] *)),
body:not(.woocommerce-checkout) .woocommerce div.product form.cart .variations select,
body:not(.woocommerce-checkout) .woocommerce.wc-block-catalog-sorting select.orderby,
body:not(.woocommerce-checkout) .wc-block-product-filters .wc-block-product-filter-price-slider .text input[type="text"],
body:not(.woocommerce-checkout) .select2-container--default .select2-search--dropdown .select2-search__field,
body:not(.woocommerce-checkout) .em-otp-auth .ema-input,
body:not(.woocommerce-checkout) .em-contact-form .em-contact-form__input {
	box-sizing: border-box;
	height: var(--wp--custom--button--height-small);
	margin-block: 0;
	padding-block: 0;
	padding-inline: var(--wp--preset--spacing--30);
	border-width: 1px;
	border-style: solid;
	border-color: var(--wp--preset--color--border-strong);
	border-radius: var(--wp--preset--border-radius--small);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--ws-field-font-size);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--normal);
	transition: border-color var(--wp--custom--transition--fast);
}

/* El estándar pisa el borde de la base global (misma especificidad, va después): el foco se repite. */
:where(body:not(.woocommerce-checkout)) :where(input, select, textarea):focus {
	border-color: var(--wp--preset--color--primary);
}

:where(body:not(.woocommerce-checkout)) :where(input, select, textarea)::placeholder {
	color: var(--wp--preset--color--subtle);
	opacity: 1;
}

/* Select (.select de docs/ux): flecha propia, dibujada con dos degradados para que tome el color
   del theme, y el borde primario al pasar el mouse. */
:where(body:not(.woocommerce-checkout)) :where(select):not(:where([class*="components-"], [class*="components-"] *, #wpadminbar *)),
body:not(.woocommerce-checkout) :is(.woocommerce, .woocommerce-page) form .form-row select:not(.country_to_state--single),
body.woocommerce-page:not(.woocommerce-checkout) select:not(.country_to_state--single):not(:where([class*="components-"], [class*="components-"] *)),
body:not(.woocommerce-checkout) .woocommerce div.product form.cart .variations select,
body:not(.woocommerce-checkout) .woocommerce.wc-block-catalog-sorting select.orderby {
	padding-inline-end: calc(var(--wp--preset--spacing--40) * 2);
	background-image:
		linear-gradient(45deg, transparent 50%, var(--wp--preset--color--muted) 50%),
		linear-gradient(135deg, var(--wp--preset--color--muted) 50%, transparent 50%);
	background-position:
		calc(100% - var(--wp--preset--spacing--40) - var(--wp--preset--spacing--10)) 55%,
		calc(100% - var(--wp--preset--spacing--40)) 55%;
	background-size: var(--wp--preset--spacing--10) var(--wp--preset--spacing--10);
	background-repeat: no-repeat;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

:where(body:not(.woocommerce-checkout)) :where(select):not(:where([class*="components-"], [class*="components-"] *, #wpadminbar *)):hover,
body:not(.woocommerce-checkout) :is(.woocommerce, .woocommerce-page) form .form-row select:not(.country_to_state--single):hover,
body.woocommerce-page:not(.woocommerce-checkout) select:not(.country_to_state--single):not(:where([class*="components-"], [class*="components-"] *)):hover,
body:not(.woocommerce-checkout) .woocommerce div.product form.cart .variations select:hover,
body:not(.woocommerce-checkout) .woocommerce.wc-block-catalog-sorting select.orderby:hover {
	border-color: var(--wp--preset--color--primary);
}

/* El foco gana al borde del adaptador, como en la base global. */
body:not(.woocommerce-checkout) :is(.woocommerce, .woocommerce-page) form .form-row :is(input.input-text, select:not(.country_to_state--single), textarea):focus,
body.woocommerce-page:not(.woocommerce-checkout) :is(input.input-text, select:not(.country_to_state--single)):not(:where([class*="components-"], [class*="components-"] *)):focus,
body:not(.woocommerce-checkout) .woocommerce div.product form.cart .variations select:focus,
body:not(.woocommerce-checkout) .woocommerce.wc-block-catalog-sorting select.orderby:focus,
body:not(.woocommerce-checkout) .wc-block-product-filters .wc-block-product-filter-price-slider .text input[type="text"]:focus {
	border-color: var(--wp--preset--color--primary);
}

/* Acceso con código (plugin em-otp) y formulario de contacto (plugin em-contact-form): su CSS pone
   una sombra de foco con colores de otro theme. */
body:not(.woocommerce-checkout) .em-otp-auth .ema-input:focus,
body:not(.woocommerce-checkout) .em-contact-form .em-contact-form__input:focus {
	border-color: var(--wp--preset--color--primary);
	box-shadow: none;
}

/* Formulario de contacto: el plugin le da a los campos de una línea un alto mínimo propio. */
body:not(.woocommerce-checkout) .em-contact-form input.em-contact-form__input {
	min-height: 0;
}

/* Formulario de contacto: un campo con error (view.ts le pone aria-invalid) lleva el borde de error. */
body:not(.woocommerce-checkout) .em-contact-form .em-contact-form__input[aria-invalid="true"] {
	border-color: var(--wp--preset--color--danger);
	box-shadow: none;
}

:where(body:not(.woocommerce-checkout)) :where(textarea):not(:where([class*="components-"], [class*="components-"] *)),
body:not(.woocommerce-checkout) :is(.woocommerce, .woocommerce-page) form .form-row textarea,
body:not(.woocommerce-checkout) .em-contact-form textarea.em-contact-form__input {
	height: auto;
	min-height: calc(var(--wp--custom--button--height-small) * 3);
	padding-block: var(--wp--preset--spacing--20);
	resize: vertical;
}

/* La contraseña de Mi cuenta deja lugar al botón para mostrarla. */
body:not(.woocommerce-checkout) :is(.woocommerce, .woocommerce-page) form .password-input input.input-text {
	padding-inline-end: var(--wp--custom--button--height-small);
}

:where(body:not(.woocommerce-checkout)) :where(input, select, textarea):disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---- 3. Select reemplazado por selectWoo (Región y Comuna de Mi cuenta) -------------- */
/* El <select> queda oculto y lo que se ve es la caja de select2: la misma del select del theme,
   con su flecha. Los errores de WooCommerce (borde rojo) siguen ganando. */
html body:not(.woocommerce-checkout) .select2-container--default .select2-selection.select2-selection--single {
	height: var(--wp--custom--button--height-small);
	margin: 0;
	border-width: 1px;
	border-style: solid;
	border-color: var(--wp--preset--color--border-strong);
	border-radius: var(--wp--preset--border-radius--small);
	background-color: var(--wp--preset--color--surface);
	background-image:
		linear-gradient(45deg, transparent 50%, var(--wp--preset--color--muted) 50%),
		linear-gradient(135deg, var(--wp--preset--color--muted) 50%, transparent 50%);
	background-position:
		calc(100% - var(--wp--preset--spacing--40) - var(--wp--preset--spacing--10)) 55%,
		calc(100% - var(--wp--preset--spacing--40)) 55%;
	background-size: var(--wp--preset--spacing--10) var(--wp--preset--spacing--10);
	background-repeat: no-repeat;
	color: var(--wp--preset--color--foreground);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--ws-field-font-size);
	transition: border-color var(--wp--custom--transition--fast);
}

html body:not(.woocommerce-checkout) .select2-container--default:is(:hover, .select2-container--focus, .select2-container--open) .select2-selection.select2-selection--single {
	border-color: var(--wp--preset--color--primary);
}

html body:not(.woocommerce-checkout) .select2-container--default .select2-selection.select2-selection--single .select2-selection__rendered {
	padding-block: 0;
	padding-inline: var(--wp--preset--spacing--30) calc(var(--wp--preset--spacing--40) * 2);
	color: var(--wp--preset--color--foreground);
	line-height: calc(var(--wp--custom--button--height-small) - 2px);
}

html body:not(.woocommerce-checkout) .select2-container--default .select2-selection.select2-selection--single .select2-selection__arrow {
	display: none;
}

body:not(.woocommerce-checkout) .select2-container--default .select2-dropdown {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--ws-field-font-size);
}

body:not(.woocommerce-checkout) .select2-container--default .select2-results__option--highlighted:is([aria-selected], [data-selected]) {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

/* ---- 2 y 3. Casillas y radios -------------------------------------------------- */
/* Cuadro de 18 px con borde; marcada, rellena con el primario y el check claro (como los filtros
   de docs/ux). El check es el ::before, recortado con clip-path para que tome el color del theme. */
:where(body:not(.woocommerce-checkout)) :where(input[type="checkbox"], input[type="radio"]):not(:where([class*="components-"], [class*="components-"] *, #wpadminbar *)),
body:not(.woocommerce-checkout) .wc-block-product-filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input,
body:not(.woocommerce-checkout) .woocommerce form .form-row input[type="checkbox"].input-checkbox {
	display: inline-grid;
	flex: none;
	place-content: center;
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	margin-block: 0;
	border-width: 1px;
	border-style: solid;
	border-color: var(--wp--preset--color--border-strong);
	border-radius: var(--wp--preset--border-radius--x-small);
	background: var(--wp--preset--color--surface);
	vertical-align: middle;
	cursor: pointer;
	transition: border-color var(--wp--custom--transition--fast), background-color var(--wp--custom--transition--fast);
	-webkit-appearance: none;
	appearance: none;
}

:where(body:not(.woocommerce-checkout)) :where(input[type="radio"]):not(:where([class*="components-"], [class*="components-"] *, #wpadminbar *)) {
	border-radius: var(--wp--preset--border-radius--full);
}

:where(body:not(.woocommerce-checkout)) :where(input[type="checkbox"], input[type="radio"]):not(:where([class*="components-"], [class*="components-"] *, #wpadminbar *))::before,
body:not(.woocommerce-checkout) .wc-block-product-filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input::before,
body:not(.woocommerce-checkout) .woocommerce form .form-row input[type="checkbox"].input-checkbox::before {
	content: "";
	width: 10px;
	height: 10px;
	background: var(--wp--preset--color--on-primary);
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
	transform: scale(0);
	transition: transform var(--wp--custom--transition--fast);
}

:where(body:not(.woocommerce-checkout)) :where(input[type="radio"]):not(:where([class*="components-"], [class*="components-"] *, #wpadminbar *))::before {
	width: 8px;
	height: 8px;
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--wp--preset--color--primary);
	clip-path: none;
}

:where(body:not(.woocommerce-checkout)) :where(input[type="checkbox"], input[type="radio"]):not(:where([class*="components-"], [class*="components-"] *, #wpadminbar *)):hover:not(:disabled),
body:not(.woocommerce-checkout) .wc-block-product-filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input:hover:not(:disabled),
body:not(.woocommerce-checkout) .wc-block-product-filters .wc-block-product-filter-checkbox-list__label:hover input[type="checkbox"]:not(:disabled),
body:not(.woocommerce-checkout) .woocommerce form .form-row input[type="checkbox"].input-checkbox:hover:not(:disabled) {
	border-color: var(--wp--preset--color--primary);
}

:where(body:not(.woocommerce-checkout)) :where(input[type="checkbox"]):not(:where([class*="components-"], [class*="components-"] *, #wpadminbar *)):checked,
body:not(.woocommerce-checkout) .wc-block-product-filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked,
body:not(.woocommerce-checkout) .woocommerce form .form-row input[type="checkbox"].input-checkbox:checked {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
}

:where(body:not(.woocommerce-checkout)) :where(input[type="radio"]):not(:where([class*="components-"], [class*="components-"] *, #wpadminbar *)):checked {
	border-color: var(--wp--preset--color--primary);
}

:where(body:not(.woocommerce-checkout)) :where(input[type="checkbox"], input[type="radio"]):not(:where([class*="components-"], [class*="components-"] *, #wpadminbar *)):checked::before,
body:not(.woocommerce-checkout) .wc-block-product-filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked::before,
body:not(.woocommerce-checkout) .woocommerce form .form-row input[type="checkbox"].input-checkbox:checked::before {
	content: "";
	transform: scale(1);
}

:where(body:not(.woocommerce-checkout)) :where(input[type="checkbox"], input[type="radio"]):not(:where([class*="components-"], [class*="components-"] *, #wpadminbar *)):focus-visible,
body:not(.woocommerce-checkout) .wc-block-product-filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input:focus-visible,
body:not(.woocommerce-checkout) .woocommerce form .form-row input[type="checkbox"].input-checkbox:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--focus--offset);
}

/* ---- 2. Campo con error --------------------------------------------------------- */
/* El JS de un formulario marca el campo con aria-invalid (newsletter de em-contact-form, y cualquier
   formulario nuevo): borde de error, también en las casillas. Va al final para ganarle al borde de
   cada tipo con la misma especificidad (cero). */
:where(body:not(.woocommerce-checkout)) :where(input, select, textarea):where([aria-invalid="true"]):not(:where([class*="components-"], [class*="components-"] *, #wpadminbar *)) {
	border-color: var(--wp--preset--color--danger);
}

/* ---- Pantallas táctiles -------------------------------------------------------- */
@media (max-width: 1023px) {
	/* Safari de iOS hace zoom al enfocar un campo de menos de 16 px (1rem). */
	:root {
		--ws-field-font-size: 1rem;
	}

	:where(input, select, textarea) {
		font-size: 1rem;
	}
}