/*
 * Estilos del formulario de El Yugo Leads.
 *
 * El formulario tiene que parecer parte de la web, no una caja pegada de
 * fuera, así que aquí no se impone ni tipografía ni color de marca: los
 * controles heredan la fuente del tema (font: inherit) y todo lo que se puede
 * cambiar está en variables CSS que el tema puede redefinir. Tampoco hay ni un
 * solo !important: si el tema quiere mandar, manda.
 */

/*
 * Los tres colores de aquí abajo se DERIVAN del color de texto del tema, que es
 * lo que el resto del archivo ya hacía con la tipografía. Antes eran valores
 * fijos pensados para fondo claro, y sobre un tema de paleta oscura pasaba esto
 * (medido sobre Twenty Twenty-Three «Pitch», fondo #202124):
 *
 *   - el borde de los campos quedaba negro sobre negro, 1,09:1: los campos de
 *     texto no tenían caja visible y no se veía dónde había que escribir;
 *   - el texto de los errores quedaba en 2,20:1, o sea justo la frase que hay
 *     que leer para poder terminar el envío.
 *
 * Con la mezcla, el borde pasa de 3,2:1 (Twenty Twenty-One) a 5,6:1 (Pitch) y
 * el error no baja de 5,5:1 en ninguno de los cuatro temas probados; WCAG pide
 * 3:1 para el contorno de un control y 4,5:1 para el texto. Y lo hace siguiendo
 * al TEMA, no a la preferencia del sistema operativo: un tema oscuro con el
 * sistema en claro es exactamente el caso que se rompía.
 *
 * Cada variable va dos veces a propósito: la primera es el respaldo para un
 * navegador que no entienda color-mix, que se queda con lo de siempre.
 */
.yugo-leads {
	--yugo-espacio: 1rem;
	--yugo-borde: rgba(0, 0, 0, 0.25);
	--yugo-borde: color-mix(in srgb, currentColor 55%, transparent);
	--yugo-borde-activo: currentColor;
	--yugo-radio: 0.25rem;
	--yugo-error: #a4261d;
	--yugo-error: color-mix(in srgb, #e5484d 65%, currentColor);
	--yugo-exito: #1d6b3f;
	--yugo-exito: color-mix(in srgb, #1f9254 65%, currentColor);
	--yugo-fondo-aviso: rgba(0, 0, 0, 0.04);
	--yugo-fondo-aviso: color-mix(in srgb, currentColor 7%, transparent);
	--yugo-ancho-maximo: 46rem;

	max-width: var(--yugo-ancho-maximo);
}

.yugo-leads *,
.yugo-leads *::before,
.yugo-leads *::after {
	box-sizing: border-box;
}

.yugo-leads__titulo {
	margin: 0 0 var(--yugo-espacio);
}

.yugo-leads__formulario {
	display: flex;
	flex-direction: column;
	gap: var(--yugo-espacio);
}

/* Dos columnas donde caben; una sola en el móvil, que es por donde llega la
   mayoría de los visitantes de una web de catering. */
.yugo-leads__fila {
	display: grid;
	gap: var(--yugo-espacio);
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.yugo-leads__fila {
		grid-template-columns: 1fr 1fr;
	}
}

.yugo-leads__campo {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
}

.yugo-leads__etiqueta {
	font-weight: 600;
}

.yugo-leads__obligatorio {
	color: var(--yugo-error);
}

/* El relleno vertical sube de 0.5rem a 0.6rem porque con 0.5 los campos se
   quedaban en 43,6 px de alto a 390 px de ancho: cuatro décimas por debajo de
   los 44 px de zona pulsable que se piden en el móvil, que es por donde llega
   la mayoría de los visitantes de una web de catering. */
.yugo-leads__control {
	font: inherit;
	color: inherit;
	background-color: transparent;
	border: 1px solid var(--yugo-borde);
	border-radius: var(--yugo-radio);
	padding: 0.6rem 0.625rem;
	width: 100%;
	max-width: 100%;
}

.yugo-leads__control:focus-visible {
	outline: 2px solid var(--yugo-borde-activo);
	outline-offset: 1px;
}

/* El aviso de error del campo se marca también con el borde: el color solo no
   vale como única señal. */
.yugo-leads__control[aria-invalid="true"] {
	border-color: var(--yugo-error);
	border-width: 2px;
}

.yugo-leads__control--area {
	resize: vertical;
	min-height: 6rem;
}

.yugo-leads__ayuda {
	font-size: 0.875em;
	opacity: 0.8;
}

.yugo-leads__error:not(:empty) {
	color: var(--yugo-error);
	font-size: 0.9375em;
}

.yugo-leads__error:not(:empty)::before {
	content: "⚠ ";
}

.yugo-leads__campo--casilla {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.625rem;
	align-items: center;
}

/* La casilla del consentimiento medía 13x13 px: el tamaño que le da el
   navegador, porque aquí solo se tocaba el margen. Es el único control
   obligatorio que hay que acertar con el dedo y el último antes de enviar, y
   fallarlo no produce ningún aviso: simplemente no pasa nada y se vuelve a
   intentar, que en el móvil es abandono. El dibujo sube a 1,25rem y el padding
   del contenedor lleva la zona pulsable a 44 px sin agrandar el cuadradito. */
.yugo-leads__casilla {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	margin: 0;
	flex: none;
}

/* La etiqueta es zona pulsable (va con «for»), y con este relleno el bloque
   entero pasa de los 44 px: quien apunte al cuadradito y falle por poco sigue
   dando en algo que marca la casilla. */
.yugo-leads__etiqueta--casilla {
	font-weight: 400;
	padding-block: 0.6rem;
}

.yugo-leads__campo--casilla .yugo-leads__error {
	grid-column: 1 / -1;
}

/* El relleno va en el <summary>, no en el <details>: puesto en el contenedor, el
   recuadro que se ve era más grande que la zona que abre el desplegable, así
   que pulsar el margen no hacía nada. Y lo que hay dentro es justo la
   explicación de los seis niveles de servicio, o sea lo que necesita leer quien
   no sabe cuál elegir en el campo obligatorio de abajo. */
.yugo-leads__detalles {
	border: 1px solid var(--yugo-borde);
	border-radius: var(--yugo-radio);
	padding: 0;
}

.yugo-leads__detalles summary {
	cursor: pointer;
	padding: 0.6rem 0.75rem;
}

.yugo-leads__catalogo {
	margin: 0;
	padding: 0 0.75rem 0.6rem;
}

.yugo-leads__catalogo dt {
	font-weight: 600;
	margin-top: 0.5rem;
}

.yugo-leads__catalogo dd {
	margin: 0;
}

.yugo-leads__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
}

.yugo-leads__boton {
	font: inherit;
	cursor: pointer;
	padding: 0.625rem 1.25rem;
	border: 1px solid var(--yugo-borde-activo);
	border-radius: var(--yugo-radio);
	background-color: transparent;
	color: inherit;
}

.yugo-leads__boton[disabled] {
	cursor: progress;
	opacity: 0.6;
}

.yugo-leads__nota {
	font-size: 0.875em;
	opacity: 0.8;
}

/* La nota del asterisco va ahora antes del primer campo, no debajo del botón. */
.yugo-leads__nota--cabecera {
	display: block;
	margin: calc(var(--yugo-espacio) * -0.5) 0 0;
}

.yugo-leads__aviso {
	border-inline-start: 4px solid var(--yugo-borde-activo);
	background-color: var(--yugo-fondo-aviso);
	padding: 0.75rem 1rem;
	margin-bottom: var(--yugo-espacio);
}

.yugo-leads__aviso p {
	margin: 0 0 0.5rem;
}

.yugo-leads__aviso p:last-child {
	margin-bottom: 0;
}

.yugo-leads__aviso--exito {
	border-inline-start-color: var(--yugo-exito);
}

.yugo-leads__aviso--error {
	border-inline-start-color: var(--yugo-error);
}

.yugo-leads__aviso:focus-visible {
	outline: 2px solid var(--yugo-borde-activo);
	outline-offset: 2px;
}

/* La trampa para robots. Fuera de la pantalla en vez de display:none porque
   algunos robots saltan lo que está oculto, y con aria-hidden y tabindex="-1"
   en el HTML no la alcanza ni el teclado ni un lector de pantalla. */
.yugo-leads__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}