/* =============================================================================
   forms.css — Formularios de Levapan (Contact Form 7)

   Cubre el formulario de Contáctanos (`[contact-form-7 id="998"]`, plantilla
   «Contacto Levapan») y el estado activo del menú de categorías del sidebar,
   que ahora selecciona la tarjeta-radio «Motivo de contacto» del formulario.

   El estado activo del sidebar vive aquí y NO en los controles de Elementor:
   como lo enciende y lo apaga el JS al pulsar, no puede quedar horneado en el
   container. En el editor los 5 ítems se ven iguales; en el front el activo se
   pinta con `.lv-cat.is-active`.

   Los iconos van en `../img/forms/` para que la hoja sea portable entre
   localhost y creatics.pro (nada de URLs de la biblioteca de medios).
   ============================================================================= */

.lv-form {
	/* Valores medidos en el frame PQRS del Figma (`4290:2876`, grupo `4290:2905`),
	   no estimados: borde #AAAAAA, radio 12, placeholder #A4A4A4, caja de
	   adjuntos #EFEFEF con borde punteado #CACACA, y la tarjeta elegida con
	   fondo rgba(207,29,29,.06). */
	--lv-rojo: #CF1D1D;
	--lv-texto: #141414;
	--lv-borde: #AAAAAA;
	--lv-borde-suave: #B1B1B1;
	--lv-gris: #A4A4A4;
	--lv-gris-caja: #EFEFEF;
	--lv-gris-caja-borde: #CACACA;
	--lv-rosa: rgba(207, 29, 29, .06);
	--lv-radio: 12px;

	font-family: "Poppins", sans-serif;
	color: var(--lv-texto);
}


/* -----------------------------------------------------------------------------
   1. Cabecera de la tarjeta
   -------------------------------------------------------------------------- */

/* ESCALA — manda `SISTEMA-UI.md` §2, no los tamaños literales del Figma.
   El frame dibuja el formulario a 38/23/20px; esa es la escala vieja del kit y
   al lado del resto del sitio se ve enorme. Los escalones buenos son:
   título de sección 30 · párrafo 18 · UI y campos de formulario 16 ·
   metadatos 14 (suelo, no bajar). Las MEDIDAS —radios, bordes, altos de caja,
   tamaño de las tarjetas— sí salen del frame; lo que se ignora es la tipografía. */

.lv-form__title {
	margin: 0 0 10px;
	font-size: 30px;
	font-weight: 500;
	line-height: 1.09em;
	color: #000000;
}

.lv-form__title b {
	font-weight: 700;
	color: var(--lv-rojo);
}

.lv-form__intro {
	margin: 0 0 28px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4em;
	color: var(--lv-texto);
}


/* -----------------------------------------------------------------------------
   2. Rejilla de campos
   -------------------------------------------------------------------------- */

.lv-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 49px;
	row-gap: 20px;
	align-items: start;
}

.lv-field--full {
	grid-column: 1 / -1;
}

.lv-field__label {
	display: block;
	margin-bottom: 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3em;
	color: var(--lv-texto);
}

.lv-req {
	color: var(--lv-rojo);
	font-weight: 700;
}

/* CF7 envuelve cada control en un span; que no rompa la rejilla. */
.lv-form .wpcf7-form-control-wrap {
	display: block;
}


/* -----------------------------------------------------------------------------
   3. Campos de texto, teléfono, correo, textarea y select
   -------------------------------------------------------------------------- */

.lv-form input[type="text"],
.lv-form input[type="email"],
.lv-form input[type="tel"],
.lv-form input[type="url"],
.lv-form input[type="number"],
.lv-form textarea,
.lv-form select {
	width: 100%;
	min-height: 48px;
	box-sizing: border-box;
	padding: 11px 16px;
	background-color: #FFFFFF;
	border: 1px solid var(--lv-borde);
	border-radius: var(--lv-radio);
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4em;
	color: var(--lv-texto);
	transition: border-color .18s ease, box-shadow .18s ease;
}

/* CF7 pinta el textarea con `rows="10"`; el frame lo da de 119px.
   La altura se fija aquí para no depender del atributo. */
.lv-form textarea {
	height: 119px;
	min-height: 119px;
	resize: vertical;
}

.lv-form input::placeholder,
.lv-form textarea::placeholder {
	color: var(--lv-gris);
	opacity: 1;
}

.lv-form input[type="text"]:focus,
.lv-form input[type="email"]:focus,
.lv-form input[type="tel"]:focus,
.lv-form textarea:focus,
.lv-form select:focus {
	outline: none;
	border-color: var(--lv-rojo);
	box-shadow: 0 0 0 3px rgba(207, 29, 29, .12);
}

/* Select con la flecha del diseño en vez de la nativa del navegador. */
.lv-form select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 46px;
	background-image: url("../img/forms/chevron-down.svg");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 16px 10px;
	cursor: pointer;
}

/* Mientras no se elige nada, el select se lee como un placeholder. */
.lv-form select:has(option[value=""]:checked) {
	color: var(--lv-gris);
}


/* -----------------------------------------------------------------------------
   4. Campo condicional (Tipo de PQRS)

   Lo oculta y lo enseña `forms.js` según el motivo elegido. Sin JS el campo
   queda visible, que es el fallo seguro: es preferible verlo de más que perderlo.
   -------------------------------------------------------------------------- */

.lv-field--condicional[hidden] {
	display: none;
}


/* -----------------------------------------------------------------------------
   5. Motivo de contacto — las 6 tarjetas-radio
   -------------------------------------------------------------------------- */

.lv-field--motivo .wpcf7-radio {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
}

.lv-field--motivo .wpcf7-list-item {
	display: block;
	margin: 0;
}

.lv-field--motivo .wpcf7-list-item > label {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 100%;
	min-height: 91px;
	padding: 12px 6px;
	box-sizing: border-box;
	border: 1px solid var(--lv-borde);
	border-radius: var(--lv-radio);
	background-color: #FFFFFF;
	text-align: center;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

/* El input sigue ahí —clicable y enfocable—, solo que invisible. */
.lv-field--motivo .wpcf7-list-item input[type="radio"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
}

/* 14px es el suelo de la escala (metadatos); el frame las pone a 13 y no se baja. */
.lv-field--motivo .wpcf7-list-item-label {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.25em;
	color: var(--lv-texto);
}

/* Icono de cada tarjeta. «Otro tema» (la 6ª) va sin icono, como el diseño. */
.lv-field--motivo .wpcf7-list-item:nth-child(-n+5) > label::before {
	content: "";
	display: block;
	width: 28px;
	height: 28px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.lv-field--motivo .wpcf7-list-item:nth-child(1) > label::before { background-image: url("../img/forms/cotizacion.svg"); }
.lv-field--motivo .wpcf7-list-item:nth-child(2) > label::before { background-image: url("../img/forms/productos.svg"); }
.lv-field--motivo .wpcf7-list-item:nth-child(3) > label::before { background-image: url("../img/forms/pedidos.svg"); }
.lv-field--motivo .wpcf7-list-item:nth-child(4) > label::before { background-image: url("../img/forms/asesoria.svg"); }
/* .lv-field--motivo .wpcf7-list-item:nth-child(5) > label::before { background-image: url("../img/forms/pqrs.svg"); } */

.lv-field--motivo .wpcf7-list-item > label:hover {
	border-color: var(--lv-rojo);
}

.lv-field--motivo .wpcf7-list-item > label:has(input:focus-visible) {
	outline: 2px solid var(--lv-rojo);
	outline-offset: 2px;
}

/* Tarjeta elegida: borde rojo, fondo rosa y la insignia con el check.
   El frame le pone 2px de borde frente a 1px de las demás; se hace con un
   `inset` en vez de engordar el `border`, que descuadraría la rejilla. */
.lv-field--motivo .wpcf7-list-item > label:has(input:checked) {
	border-color: var(--lv-rojo);
	box-shadow: inset 0 0 0 1px var(--lv-rojo);
	background-color: var(--lv-rosa);
}

.lv-field--motivo .wpcf7-list-item > label:has(input:checked)::after {
	content: "";
	position: absolute;
	top: -9px;
	right: -9px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--lv-rojo);
	background-image: url("../img/forms/check.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}


/* --- Variante de la 852: 5 tarjetas con sus propios iconos ---------------- */

.lv-field--motivo-pqrs .wpcf7-radio {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Los 5 iconos del frame miden entre 42 y 47 de ancho; se normalizan a 44×46. */
.lv-field--motivo-pqrs .wpcf7-list-item:nth-child(-n+5) > label::before {
	width: 44px;
	height: 46px;
}

.lv-field--motivo-pqrs .wpcf7-list-item:nth-child(1) > label::before { background-image: url("../img/forms/pqrs-peticiones.svg"); }
.lv-field--motivo-pqrs .wpcf7-list-item:nth-child(2) > label::before { background-image: url("../img/forms/pqrs-quejas.svg"); }
.lv-field--motivo-pqrs .wpcf7-list-item:nth-child(3) > label::before { background-image: url("../img/forms/pqrs-reclamos.svg"); }
.lv-field--motivo-pqrs .wpcf7-list-item:nth-child(4) > label::before { background-image: url("../img/forms/pqrs-sugerencias.svg"); }
.lv-field--motivo-pqrs .wpcf7-list-item:nth-child(5) > label::before { background-image: url("../img/forms/pqrs-felicitaciones.svg"); }


/* --- Variante de la 382: 4 tarjetas grandes con título y descripción ------

   Aquí la etiqueta «Motivo de contacto» va a la izquierda y las 4 tarjetas a su
   derecha, cada una con icono, título rojo y un descriptor. CF7 no admite HTML
   dentro de la etiqueta de un `[radio]`, así que el valor del radio es solo el
   título —que es el nombre accesible del control— y el descriptor se pinta con
   `content:` en un `::after`. Al cambiar un texto hay que tocarlo aquí.
   Medidas del frame `4290:6882`: tarjetas de 183×194, radio 13, hueco 15.
   -------------------------------------------------------------------------- */

.lv-field--motivo-servicios {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	align-items: center;
	column-gap: 20px;
}

.lv-field--motivo-servicios .lv-field__label {
	margin-bottom: 0;
}

.lv-field--motivo-servicios .wpcf7-form-control-wrap {
	min-width: 0;
}

/* `auto-fit` en vez de un número fijo de columnas: las 4 caben en escritorio y
   van pasando a 3, 2 y 1 solas según el ancho, sin media queries. Va con la
   clase repetida para ganarle a las reglas de 3 y 2 columnas del §11, que son
   para los otros dos formularios. */
.lv-field--motivo.lv-field--motivo-servicios .wpcf7-radio {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
}

.lv-field--motivo-servicios .wpcf7-list-item > label {
	justify-content: flex-start;
	gap: 10px;
	min-height: 0;
	padding: 16px 10px 18px;
	border-radius: 13px;
}

.lv-field--motivo-servicios .wpcf7-list-item:nth-child(-n+5) > label::before {
	width: 44px;
	height: 42px;
}

.lv-field--motivo-servicios .wpcf7-list-item:nth-child(1) > label::before { background-image: url("../img/forms/srv-productos-tecnicos.svg"); }
.lv-field--motivo-servicios .wpcf7-list-item:nth-child(2) > label::before { background-image: url("../img/forms/srv-investigacion.svg"); }
.lv-field--motivo-servicios .wpcf7-list-item:nth-child(3) > label::before { background-image: url("../img/forms/srv-capa-z.svg"); }
.lv-field--motivo-servicios .wpcf7-list-item:nth-child(4) > label::before { background-image: url("../img/forms/srv-capacitacion.svg"); }

.lv-field--motivo-servicios .wpcf7-list-item-label {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2em;
	color: var(--lv-rojo);
}

.lv-field--motivo-servicios .wpcf7-list-item > label::after {
	margin-top: 4px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.25em;
	color: var(--lv-texto);
	white-space: normal;
}

.lv-field--motivo-servicios .wpcf7-list-item:nth-child(1) > label::after { content: "Asesoría sobre el uso y aplicación de nuestros productos"; }
.lv-field--motivo-servicios .wpcf7-list-item:nth-child(2) > label::after { content: "Desarrollo conjunto y soluciones innovadoras"; }
.lv-field--motivo-servicios .wpcf7-list-item:nth-child(3) > label::after { content: "Soluciones para panadería y pastelería"; }
.lv-field--motivo-servicios .wpcf7-list-item:nth-child(4) > label::after { content: "Formación técnica y talleres especializados"; }

/* La insignia del check vuelve a ser la insignia, no el descriptor. */
.lv-field--motivo-servicios .wpcf7-list-item > label:has(input:checked)::after {
	position: static;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
}

.lv-field--motivo-servicios .wpcf7-list-item > label:has(input:checked) {
	background-color: var(--lv-rosa);
}

.lv-field--motivo-servicios .wpcf7-list-item > label:has(input:checked)::before {
	position: relative;
}

/* El check se cuelga de un tercer elemento porque el ::after ya está ocupado. */
.lv-field--motivo-servicios .wpcf7-list-item > label:has(input:checked) .wpcf7-list-item-label::before {
	content: "";
	position: absolute;
	top: -9px;
	right: -9px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--lv-rojo);
	background-image: url("../img/forms/check.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}

/* En este formulario Asunto va al lado de Comentarios y el frame los dibuja
   igual de altos. El campo sigue siendo de una línea —es un asunto—; lo que se
   hace es empujar el texto arriba con el relleno para que la fila cuadre. */
.lv-form--servicios .lv-form__grid {
	column-gap: 60px;
}

.lv-form--servicios input#lv-srv-asunto {
	height: 119px;
	padding-top: 14px;
	padding-bottom: 80px;
}

/* Por debajo del escritorio la etiqueta se sube encima de las tarjetas: a dos
   columnas la de la izquierda se queda sin sitio y parte «Motivo de contacto»
   en tres líneas. */
@media (max-width: 1199px) {
	.lv-field--motivo-servicios {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 8px;
	}

	.lv-field--motivo-servicios .lv-field__label {
		margin-bottom: 0;
	}
}

@media (max-width: 767px) {
	.lv-form--servicios .lv-form__grid {
		column-gap: 0;
	}

	/* En móvil las dos cajas van apiladas, así que Asunto recupera su alto. */
	.lv-form--servicios input#lv-srv-asunto {
		height: auto;
		padding-top: 11px;
		padding-bottom: 11px;
	}
}


/* -----------------------------------------------------------------------------
   6. Adjuntar archivos
   -------------------------------------------------------------------------- */

.lv-dropzone {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	min-height: 95px;
	padding: 14px 20px 14px 111px;
	box-sizing: border-box;
	background-color: var(--lv-gris-caja);
	background-image: url("../img/forms/upload.svg");
	background-repeat: no-repeat;
	background-position: 36px center;
	background-size: 42px 32px;
	border: 1px dashed var(--lv-gris-caja-borde);
	border-radius: var(--lv-radio);
	transition: border-color .18s ease, background-color .18s ease;
}

/* El input cubre la caja entera: clic y teclado nativos, sin depender del JS. */
.lv-dropzone input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.lv-dropzone__texto {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3em;
	color: #000000;
}

.lv-dropzone__nota {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3em;
	color: var(--lv-gris);
}

.lv-dropzone.is-dragover {
	border-color: var(--lv-rojo);
	background-color: var(--lv-rosa);
}

.lv-dropzone.tiene-archivo .lv-dropzone__texto {
	font-weight: 700;
	color: var(--lv-rojo);
}


/* -----------------------------------------------------------------------------
   7. Casillas legales
   -------------------------------------------------------------------------- */

.lv-form__legal {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}

.lv-form__legal .wpcf7-form-control-wrap {
	display: block;
}

.lv-form__legal .wpcf7-list-item {
	display: block;
	margin: 0;
}

.lv-form__legal .wpcf7-list-item > label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4em;
	color: #000000;
	cursor: pointer;
}

.lv-form__legal input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--lv-rojo);
	cursor: pointer;
}

.lv-form__legal a {
	color: inherit;
	text-decoration: underline;
}

.lv-form__legal a:hover {
	color: var(--lv-rojo);
}


/* -----------------------------------------------------------------------------
   8. Botón de envío
   -------------------------------------------------------------------------- */

.lv-form__enviar {
	position: relative;
	margin-top: 6px;
}

.lv-form .lv-btn,
.lv-form input[type="submit"] {
	width: 100%;
	padding: 14px 36px;
	background-color: var(--lv-rojo);
	border: none;
	border-radius: var(--lv-radio);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2em;
	color: #FFFFFF;
	cursor: pointer;
	transition: background-color .18s ease;
}

.lv-form .lv-btn:hover,
.lv-form input[type="submit"]:hover {
	background-color: #B01717;
}

.lv-form .lv-btn:disabled {
	opacity: .6;
	cursor: not-allowed;
}

/* Rueda de espera de CF7 al enviar. */
.lv-form .wpcf7-spinner {
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
}


/* -----------------------------------------------------------------------------
   9. Mensajes de validación y respuesta de CF7
   -------------------------------------------------------------------------- */

.lv-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3em;
	color: var(--lv-rojo);
}

.lv-form .wpcf7-not-valid {
	border-color: var(--lv-rojo);
}

.wpcf7 form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 14px 18px;
	border-width: 1px;
	border-radius: var(--lv-radio, 10px);
	font-size: 16px;
	line-height: 1.4em;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #2E7D32;
	color: #2E7D32;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	border-color: #CF1D1D;
	color: #CF1D1D;
}


/* -----------------------------------------------------------------------------
   10. Menú de categorías del sidebar

   Los 5 ítems son containers de Elementor con la clase `lv-cat` y el atributo
   `data-lv-motivo`, que dice qué tarjeta-radio del formulario encienden.
   -------------------------------------------------------------------------- */

.lv-cat {
	cursor: pointer;
	border-radius: 20px;
	transition: background-color .18s ease, border-color .18s ease;
}

.lv-cat:focus-visible {
	outline: 2px solid #CF1D1D;
	outline-offset: 2px;
}

.lv-cat:hover:not(.is-active) {
	background-color: rgba(207, 29, 29, .05);
}

.lv-cat.is-active {
	background-color: #CF1D1D;
	border-bottom-color: transparent;
}

/* El texto del ítem activo se pone en blanco. El color base (#141414) sigue
   escrito en cada widget de Elementor, y para el título lo escribe como
   `.elementor-841 .elementor-element.elementor-element-w00039 .elementor-heading-title`
   —cuatro clases—, así que hay que subir de peso para ganarle sin `!important`. */
.lv-cat.is-active.elementor-element .elementor-widget-heading .elementor-heading-title,
.lv-cat.is-active.elementor-element .elementor-widget-text-editor,
.lv-cat.is-active.elementor-element .elementor-widget-text-editor p {
	color: #FFFFFF;
}

/* El chevron es un SVG en línea con el `fill` horneado en el `path`, así que
   `primary_color` de Elementor no lo pisa: hay que ir al path. */
.lv-cat.is-active .elementor-widget-icon svg,
.lv-cat.is-active .elementor-widget-icon svg path {
	fill: #FFFFFF;
}


/* -----------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */

/* La escala ya está en los escalones bajos del sistema (18 / 16 / 14), así que
   en móvil solo se reacomoda la rejilla y se baja el botón, que es el único
   override tipográfico que pide `SISTEMA-UI.md` §7 junto al h1. */

@media (max-width: 1024px) {
	.lv-field--motivo .wpcf7-radio {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.lv-form__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 18px;
	}

	.lv-field--motivo .wpcf7-radio {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lv-dropzone {
		padding-left: 60px;
		background-position: 16px center;
	}

	.lv-form .lv-btn,
	.lv-form input[type="submit"] {
		font-size: 14px;
	}
}