/*
 * Libro de Reclamaciones — hoja pública.
 *
 * El formulario se instala en webs con temas muy distintos, así que todo va
 * acotado a `.lr-libro` y sin colores de marca: dos grises y un acento neutro.
 * Un tema que quiera teñirlo solo tiene que redefinir las variables de abajo:
 *
 *     .lr-libro { --lr-acento: #841ABC; --lr-acento-suave: #f3e8fa; }
 *
 * Lo demás —tamaños, aire y jerarquía— se queda como está, porque es lo que
 * hace que un formulario de veinte campos no se lea como un muro.
 */

.lr-libro {
	--lr-acento: #2a3342;
	--lr-acento-suave: #eef1f6;
	--lr-texto: #1f2733;
	--lr-apagado: #667085;
	--lr-borde: #d8dce3;
	--lr-fondo: #ffffff;
	--lr-error: #b42318;
	--lr-error-suave: #fef3f2;
	--lr-ok: #027a48;
	--lr-ok-suave: #ecfdf3;
	--lr-radio: 12px;

	max-width: 860px;
	margin-inline: auto;
	background: var(--lr-fondo);
	border: 1px solid var(--lr-borde);
	border-radius: 18px;
	overflow: hidden;
	color: var(--lr-texto);
	font-size: 16px;
	line-height: 1.55;
	text-align: left;
	/* La sombra despega la hoja del fondo del tema, sea el que sea. */
	box-shadow: 0 14px 44px rgba(16, 24, 40, 0.07);
}

.lr-libro *,
.lr-libro *::before,
.lr-libro *::after {
	box-sizing: border-box;
}

/* ── Cabecera ────────────────────────────────────────────────────────── */

.lr-cabecera {
	padding: 30px clamp(20px, 4vw, 36px);
	background: linear-gradient(180deg, #fbfcfe 0%, #f4f6f9 100%);
	border-bottom: 1px solid var(--lr-borde);
}

.lr-cabecera__titulo {
	margin: 0 0 14px;
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--lr-texto);
}

.lr-empresa {
	margin-bottom: 22px;
}

.lr-empresa__razon {
	margin: 0;
	font-weight: 700;
	font-size: 0.98rem;
}

.lr-empresa__dato {
	margin: 2px 0 0;
	font-size: 0.88rem;
	color: var(--lr-apagado);
}

/*
 * Los dos datos que pone el sistema. Van destacados y con el borde a trazos a
 * propósito: el consumidor tiene que ver de un vistazo que el número y la fecha
 * no los escribe él, que salen solos al enviar. Es lo que en el libro de papel
 * sería el casillero ya impreso.
 */
.lr-automatico {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
}

.lr-automatico__caja {
	position: relative;
	margin: 0;
	padding: 14px 16px;
	background: var(--lr-fondo);
	border: 1.5px dashed var(--lr-borde);
	border-radius: var(--lr-radio);
}

.lr-automatico__etiqueta {
	display: block;
	padding-right: 86px;   /* deja sitio al sello de la esquina */
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--lr-apagado);
}

.lr-automatico__valor {
	display: block;
	margin-top: 5px;
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	/* Tabular para que el correlativo no baile de ancho segun los digitos. */
	font-variant-numeric: tabular-nums;
	color: var(--lr-texto);
}

/* La letra pequena de debajo: el numero es provisional hasta que se envia, y
   eso hay que decirlo donde se lee el numero, no en otra parte. */
.lr-automatico__nota {
	display: block;
	margin-top: 2px;
	font-size: 0.74rem;
	color: var(--lr-apagado);
}

/* El sello «automático», arriba a la derecha de cada casillero. */
.lr-automatico__caja::after {
	content: "automático";
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--lr-acento-suave);
	color: var(--lr-acento);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ── El formulario ───────────────────────────────────────────────────── */

.lr-formulario {
	padding: 4px clamp(20px, 4vw, 36px) 32px;
}

.lr-seccion {
	padding: 26px 0;
	border-top: 1px solid var(--lr-borde);
}

.lr-seccion:first-of-type {
	border-top: 0;
}

.lr-seccion__titulo {
	margin: 0 0 18px;
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lr-acento);
}

/*
 * Dos columnas en pantalla ancha, pero solo para los campos cortos: un
 * domicilio y un número de documento uno al lado del otro se leen mejor que en
 * una columna de 860 px, mientras que un texto largo o una lista de opciones
 * necesitan el ancho entero.
 */
@media (min-width: 720px) {
	.lr-seccion {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 22px;
		align-items: start;
	}

	.lr-seccion__titulo,
	.lr-campo--textarea,
	.lr-campo--opciones:not(.lr-campo--select),
	.lr-campo--si_no,
	.lr-campo--declaracion,
	.lr-campo--completo,
	.lr-aviso,
	.lr-acciones {
		grid-column: 1 / -1;
	}
}

.lr-campo {
	margin-bottom: 18px;
	min-width: 0;
}

.lr-etiqueta {
	display: block;
	margin-bottom: 6px;
	padding: 0;
	font-size: 0.94rem;
	font-weight: 600;
	color: var(--lr-texto);
}

.lr-obligatorio {
	color: var(--lr-error);
	font-weight: 700;
}

.lr-ayuda {
	margin: -2px 0 8px;
	font-size: 0.82rem;
	color: var(--lr-apagado);
}

.lr-control {
	display: block;
	width: 100%;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--lr-texto);
	background: var(--lr-fondo);
	border: 1px solid var(--lr-borde);
	border-radius: var(--lr-radio);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lr-control:hover {
	border-color: #b9bfc9;
}

.lr-control:focus,
.lr-control:focus-visible {
	outline: none;
	border-color: var(--lr-acento);
	box-shadow: 0 0 0 3px var(--lr-acento-suave);
}

textarea.lr-control {
	min-height: 140px;
	resize: vertical;
}

select.lr-control {
	cursor: pointer;
}

/* El fieldset de los grupos de radios no debe traer el marco del navegador. */
.lr-grupo {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

/* ── Opciones ────────────────────────────────────────────────────────── */

/*
 * Las opciones cortas —DNI, Carné, Pasaporte, Otro— se reparten en columnas: en
 * una sola, cuatro tarjetas a ancho completo empujan el resto del formulario
 * media pantalla hacia abajo sin aportar nada.
 */
.lr-opciones {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 10px;
}

/* La que lleva explicación debajo (reclamo y queja) se queda a lo ancho: ahí el
   texto es lo que ayuda a elegir bien, y partido en dos columnas no se lee. */
.lr-opcion:has(.lr-opcion__explicacion) {
	grid-column: 1 / -1;
}

.lr-opcion__label {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 13px 15px;
	border: 1px solid var(--lr-borde);
	border-radius: var(--lr-radio);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.lr-opcion__label:hover {
	border-color: #b9bfc9;
	background: #fafbfd;
}

.lr-opcion__label input {
	margin: 3px 0 0;
	width: 18px;
	height: 18px;
	flex: none;
	accent-color: var(--lr-acento);
}

.lr-opcion__texto {
	font-size: 0.96rem;
}

/* La elegida se marca entera, no solo el punto: en un móvil el punto es
   diminuto y cuesta ver qué se ha seleccionado. */
.lr-opcion__label:has(input:checked) {
	border-color: var(--lr-acento);
	background: var(--lr-acento-suave);
}

.lr-opcion__label input:checked + .lr-opcion__texto {
	font-weight: 700;
}

.lr-opcion__label:focus-within {
	border-color: var(--lr-acento);
	box-shadow: 0 0 0 3px var(--lr-acento-suave);
}

.lr-opcion__explicacion {
	margin: 6px 0 0 44px;
	font-size: 0.84rem;
	color: var(--lr-apagado);
}

/* ── Aviso legal y declaración ───────────────────────────────────────── */

.lr-aviso {
	margin: 0 0 18px;
	padding: 16px 18px;
	background: #f7f8fa;
	border-left: 3px solid var(--lr-acento);
	border-radius: 0 var(--lr-radio) var(--lr-radio) 0;
	font-size: 0.86rem;
	line-height: 1.6;
	color: #475467;
}

.lr-aviso p {
	margin: 0 0 8px;
}

.lr-aviso p:last-child {
	margin-bottom: 0;
}

.lr-declaracion {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 14px 16px;
	border: 1px solid var(--lr-borde);
	border-radius: var(--lr-radio);
	cursor: pointer;
	font-size: 0.94rem;
	font-weight: 600;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.lr-declaracion:hover {
	border-color: #b9bfc9;
	background: #fafbfd;
}

.lr-declaracion:has(input:checked) {
	border-color: var(--lr-acento);
	background: var(--lr-acento-suave);
}

.lr-declaracion input {
	margin: 2px 0 0;
	width: 18px;
	height: 18px;
	flex: none;
	accent-color: var(--lr-acento);
}

/* ── Botón ───────────────────────────────────────────────────────────── */

.lr-acciones {
	margin-top: 24px;
}

.lr-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 30px;
	min-height: 50px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	color: #ffffff;
	background: var(--lr-acento);
	border: 0;
	border-radius: var(--lr-radio);
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(16, 24, 40, 0.16);
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.lr-boton:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(16, 24, 40, 0.22);
}

.lr-boton:focus-visible {
	outline: 3px solid var(--lr-acento);
	outline-offset: 3px;
}

.lr-boton[disabled] {
	opacity: 0.6;
	cursor: progress;
	transform: none;
}

/* En el móvil el botón ocupa todo el ancho: es la acción de la página. */
@media (max-width: 560px) {
	.lr-boton {
		width: 100%;
	}
}

/* ── Errores ─────────────────────────────────────────────────────────── */

.lr-errores {
	margin: 0 0 4px;
	padding: 16px 18px;
	background: var(--lr-error-suave);
	border: 1px solid #fecdca;
	border-radius: var(--lr-radio);
}

.lr-errores__titulo {
	margin: 0 0 8px;
	font-size: 0.96rem;
	font-weight: 700;
	color: var(--lr-error);
}

.lr-errores__lista {
	margin: 0;
	padding-left: 20px;
	font-size: 0.9rem;
	color: #912018;
}

.lr-errores__lista li {
	margin-bottom: 3px;
}

.lr-campo--error .lr-control {
	border-color: var(--lr-error);
	background: var(--lr-error-suave);
}

.lr-campo--error .lr-control:focus {
	box-shadow: 0 0 0 3px #fee4e2;
}

.lr-error {
	margin: 6px 0 0;
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--lr-error);
}

/* ── Confirmación ────────────────────────────────────────────────────── */

.lr-confirmacion {
	padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 40px);
	text-align: center;
}

.lr-confirmacion__titulo {
	margin: 0 0 10px;
	font-size: clamp(1.3rem, 3vw, 1.75rem);
	font-weight: 700;
	color: var(--lr-ok);
}

.lr-confirmacion__texto {
	margin: 0 auto 26px;
	max-width: 52ch;
	color: #475467;
}

/* El número es lo único que el consumidor tiene que guardar, así que se pinta
   como lo que es: un resguardo. */
.lr-confirmacion__etiqueta {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lr-apagado);
}

.lr-confirmacion__numero {
	display: inline-block;
	margin: 8px 0 0;
	padding: 14px 28px;
	font-size: clamp(1.4rem, 4vw, 2rem);
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--lr-ok);
	background: var(--lr-ok-suave);
	border: 1.5px dashed #6ce9a6;
	border-radius: var(--lr-radio);
}

.lr-confirmacion__fecha {
	margin: 12px 0 0;
	font-size: 0.92rem;
	color: var(--lr-apagado);
}

.lr-confirmacion__nota {
	margin: 24px auto 0;
	max-width: 52ch;
	font-size: 0.88rem;
	color: var(--lr-apagado);
}

/* ── El campo trampa ─────────────────────────────────────────────────── */

/*
 * Invisible para las personas pero presente para un robot, que es de lo que se
 * trata. Nada de `display:none` ni `type="hidden"`: los rellenadores
 * automáticos los reconocen y se los saltan.
 */
.lr-trampa {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ── Movimiento reducido ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.lr-libro * {
		transition: none !important;
	}

	.lr-boton:hover {
		transform: none;
	}
}

/* ── Impresión ───────────────────────────────────────────────────────── */

@media print {
	.lr-libro {
		box-shadow: none;
		border-color: #999;
	}

	.lr-acciones {
		display: none;
	}
}