/* =========================================================
   Libro de reclamaciones — formulario de Contact Form 7.

   Da estilo al formulario tal y como está escrito en el admin de
   CF7: la clase raíz es .fr-libro y no hay que tocar el markup.

   Dos cosas de CF7 condicionan los selectores:

   1. El contenido pasa por wpautop, así que cada campo llega
      envuelto en su propio <p> y con un <br> entre la etiqueta y
      el control. Los bloques que deben ocupar la fila entera se
      alcanzan con :has(), que es la única forma de seleccionar ese
      <p> intermedio sin cambiar el formulario. Por si wpautop
      estuviera desactivado, las mismas reglas se repiten sobre los
      hijos directos.
   2. El aviso de envío (.wpcf7-response-output) se pinta FUERA de
      .fr-libro, al final del <form>: por eso su regla no cuelga de
      la clase raíz.

   Como todo el CSS del tema, los colores salen de las variables
   --km-* de main.css.
   ========================================================= */

.fr-libro {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 24px;
	max-width: var(--km-container-narrow);
	margin: 0 auto;
}

/* El aire entre campos lo pone el gap, no los márgenes de wpautop. */
.fr-libro > p {
	margin: 0;
}

/* ---------- Cabeceras de bloque ---------- */
.fr-libro__section {
	grid-column: 1 / -1;
	margin: 22px 0 0;
	padding-bottom: 10px;
	font-size: 18px;
	letter-spacing: 0.04em;
	color: var(--km-primary);
	border-bottom: 2px solid var(--km-accent);
}

.fr-libro__section:first-child {
	margin-top: 0;
}

/* ---------- Etiquetas y campos ---------- */
.fr-libro label {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--km-primary);
}

/* El salto de línea lo mete wpautop; el aire real lo pone el
   margen del control, que además es más fino de ajustar. */
.fr-libro label br,
.fr-libro > br {
	display: none;
}

.fr-libro .wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
}

.fr-libro input[type="text"],
.fr-libro input[type="tel"],
.fr-libro input[type="email"],
.fr-libro input[type="number"],
.fr-libro input[type="date"],
.fr-libro select,
.fr-libro textarea {
	width: 100%;
	padding: 11px 14px;
	font-family: var(--km-font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--km-text);
	background: var(--km-white);
	border: 1px solid var(--km-border);
	border-radius: var(--km-radius);
	transition: border-color var(--km-trans), box-shadow var(--km-trans);
}

.fr-libro input:focus,
.fr-libro select:focus,
.fr-libro textarea:focus {
	outline: none;
	border-color: var(--km-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--km-accent) 22%, transparent);
}

.fr-libro textarea {
	min-height: 132px;
	resize: vertical;
}

/* Se conserva la flecha nativa del select: es la que mejor se
   comporta en móvil. */
.fr-libro select {
	padding-right: 10px;
	cursor: pointer;
}

/* ---------- Bloques a fila completa ---------- */
.fr-libro > p:has(textarea),
.fr-libro > p:has(.wpcf7-radio),
.fr-libro > p:has(.wpcf7-checkbox),
.fr-libro > p:has(.fr-libro__submit),
.fr-libro > label:has(textarea),
.fr-libro > .wpcf7-form-control-wrap:has(.wpcf7-radio),
.fr-libro > .wpcf7-form-control-wrap:has(.wpcf7-checkbox),
.fr-libro > .fr-libro__submit {
	grid-column: 1 / -1;
}

/* ---------- Radios y checkboxes ---------- */
.fr-libro__radio-label {
	grid-column: 1 / -1;
	margin: 4px 0 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--km-primary);
}

.fr-libro .wpcf7-radio,
.fr-libro .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
}

/* CF7 separa las opciones con un margen de 1em por defecto. */
.fr-libro .wpcf7-list-item {
	margin: 0;
}

.fr-libro .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	color: var(--km-text);
	cursor: pointer;
}

.fr-libro input[type="radio"],
.fr-libro input[type="checkbox"] {
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--km-accent-dark);
}

/* ---------- Aceptación ---------- */
.fr-libro__accept {
	grid-column: 1 / -1;
	margin: 4px 0 0;
}

.fr-libro__accept .wpcf7-form-control-wrap {
	margin-top: 0;
}

.fr-libro__accept label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--km-text-soft);
	cursor: pointer;
}

.fr-libro__accept input[type="checkbox"] {
	margin-top: 3px;
}

.fr-libro__accept a {
	color: var(--km-accent-dark);
	text-decoration: underline;
}

/* ---------- Botón ---------- */
.fr-libro__submit {
	/* Turquesa con texto blanco encima: siempre la variante -dark
	   (ver CLAUDE.md → identidad visual). */
	min-width: 200px;
	margin-top: 6px;
	padding: 13px 32px;
	font-family: var(--km-font);
	font-size: 17px;
	font-weight: 700;
	color: var(--km-white);
	background: var(--km-accent-dark);
	border: 0;
	border-radius: var(--km-radius);
	cursor: pointer;
	transition: background var(--km-trans);
}

.fr-libro__submit:hover {
	background: var(--km-primary);
}

.fr-libro .wpcf7-spinner {
	margin: 0 0 0 12px;
	vertical-align: middle;
}

/* ---------- Validación ---------- */
.fr-libro .wpcf7-not-valid {
	border-color: var(--km-highlight-dark);
}

.fr-libro .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	font-weight: 400;
	color: var(--km-highlight-dark);
}

/* ---------- Aviso de envío ----------
   Vive fuera de .fr-libro: CF7 lo añade al final del <form> y marca
   el estado en la clase del propio formulario (invalid, sent, failed…).

   Dos cuidados con estos selectores:

   1. Llevan .wpcf7-form a propósito. La hoja del plugin usa
      «.wpcf7 form .wpcf7-response-output», que es más específica que
      un simple «.wpcf7 .wpcf7-response-output»: sin la clase de más
      ganaba el plugin y el aviso salía descolocado y con su amarillo.
   2. Ninguna regla toca 'display'. CF7 mantiene el aviso oculto con
      display:none mientras el formulario está en reposo; pisarlo
      dejaría una caja vacía en la página desde que carga. */

.wpcf7 form.wpcf7-form .wpcf7-response-output {
	max-width: var(--km-container-narrow);
	margin: 26px auto 0;
	padding: 14px 18px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--km-text);
	background: var(--km-bg);
	border: 1px solid var(--km-border);
	/* Filete lateral: es lo que le da el aire de aviso. */
	border-left: 4px solid var(--km-border);
	border-radius: var(--km-radius);
}

/* Errores de validación, envío fallido y spam: coral de marca. */
.wpcf7 form.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7 form.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7 form.wpcf7-form.payment-required .wpcf7-response-output,
.wpcf7 form.wpcf7-form.failed .wpcf7-response-output,
.wpcf7 form.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7 form.wpcf7-form.spam .wpcf7-response-output {
	color: var(--km-highlight-dark);
	background: color-mix(in srgb, var(--km-highlight) 10%, var(--km-white));
	border-color: color-mix(in srgb, var(--km-highlight) 35%, var(--km-white));
	border-left-color: var(--km-highlight-dark);
}

/* Mensaje enviado: turquesa. */
.wpcf7 form.wpcf7-form.sent .wpcf7-response-output {
	color: var(--km-accent-dark);
	background: color-mix(in srgb, var(--km-accent) 10%, var(--km-white));
	border-color: color-mix(in srgb, var(--km-accent) 35%, var(--km-white));
	border-left-color: var(--km-accent-dark);
}

@media (max-width: 700px) {
	.fr-libro {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.fr-libro__submit {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fr-libro input,
	.fr-libro select,
	.fr-libro textarea,
	.fr-libro__submit {
		transition: none;
	}
}