/**
 * Libro de Reclamaciones — estilos del formulario público.
 *
 * Pensado para caer en CUALQUIER theme. Dos decisiones que lo hacen posible:
 *
 * 1. **Hereda antes de imponer.** Cada valor sale de una variable con respaldo:
 *    si el theme define `--azul` o `--color-primario`, el formulario se pinta
 *    con la marca del sitio sin tocar nada. Si no, usa el respaldo neutro.
 * 2. **Ni un margen exterior.** El contenedor lo pone la página, no el plugin.
 *    Un shortcode que trae su propio ancho pelea con el theme siempre.
 */

.lr {
	--lr-color: var(--azul, var(--color-primario, #2b57d6));
	--lr-tinta: var(--tinta, #1a2230);
	--lr-suave: var(--tinta-suave, #55607a);
	--lr-linea: var(--gris-linea, #e0e3ea);
	--lr-fondo: var(--tinte, #f4f6fb);
	--lr-radio: var(--r-campo, 8px);
	--lr-error: #b32d2e;

	color: var(--lr-tinta);
	font-size: 16px;
	line-height: 1.5;
}

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

/* --- Avisos y cabeceras --------------------------------------------------- */
.lr-intro { margin: 0 0 24px; color: var(--lr-suave); }

.lr-proveedor {
	background: var(--lr-fondo);
	border-radius: var(--lr-radio);
	padding: 20px 24px;
	margin-bottom: 30px;
}
.lr-proveedor h2 { margin: 0 0 8px; font-size: 16px; }
.lr-proveedor p { margin: 0; line-height: 1.6; }

.lr-hecho {
	border-left: 4px solid var(--lr-color);
	background: var(--lr-fondo);
	padding: 24px 28px;
	border-radius: 0 var(--lr-radio) var(--lr-radio) 0;
	margin-bottom: 30px;
}
.lr-hecho h2 { margin: 0 0 10px; }
.lr-hecho p { margin: 0 0 8px; }
.lr-correlativo { font-size: 18px; }
.lr-plazo { color: var(--lr-suave); }

.lr-aviso {
	margin-top: 20px;
	padding: 14px 18px;
	border-radius: var(--lr-radio);
	background: var(--lr-fondo);
	border-left: 4px solid var(--lr-color);
}
.lr-aviso:empty { display: none; }
.lr-aviso--error { background: #fbeae7; border-left-color: var(--lr-error); }
.lr-aviso ul { margin: 0; padding-left: 20px; }

/* --- Grupos --------------------------------------------------------------- */
.lr-grupo {
	border: 1px solid var(--lr-linea);
	border-radius: var(--lr-radio);
	padding: 24px 26px 26px;
	margin: 0 0 24px;
}
.lr-grupo legend {
	font-weight: 700;
	font-size: 18px;
	padding: 0 10px;
}
.lr-grupo-nota { margin: 0 0 20px; color: var(--lr-suave); }

.lr-campos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 22px;
}

/* Lo que se lee largo ocupa la fila entera. */
.lr-campo--textarea,
.lr-campo--reclamo_queja { grid-column: 1 / -1; }

/* --- Campos --------------------------------------------------------------- */
.lr-label {
	display: block;
	font-weight: 600;
	font-size: 15px;
	margin-bottom: 6px;
}
.lr-req { color: var(--lr-error); }

.lr input[type="text"],
.lr input[type="email"],
.lr input[type="tel"],
.lr input[type="date"],
.lr textarea {
	width: 100%;
	font: inherit;
	color: inherit;
	padding: 11px 14px;
	border: 1px solid var(--lr-linea);
	border-radius: var(--lr-radio);
	background: #fff;
}
.lr textarea { min-height: 110px; resize: vertical; }

.lr input:focus,
.lr textarea:focus {
	outline: none;
	border-color: var(--lr-color);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--lr-color) 18%, transparent);
}

.lr-opciones { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.lr-opciones--apiladas { flex-direction: column; gap: 10px; }
.lr-opcion { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; }
.lr-opcion input { margin-top: 3px; flex: none; }

/* --- Declaración ---------------------------------------------------------- */
.lr-grupo--acepta { background: var(--lr-fondo); }
.lr-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.lr-check + .lr-check { margin-top: 14px; }
.lr-check input { margin-top: 3px; flex: none; }

.lr-plazo-aviso {
	margin: 0 0 24px;
	color: var(--lr-suave);
	font-size: 15px;
}

/* --- Envío ---------------------------------------------------------------- */
.lr-enviar { margin: 0; }
.lr-enviar button {
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: var(--lr-color);
	border: 0;
	border-radius: var(--r-boton, 999px);
	padding: 15px 34px;
	cursor: pointer;
}
.lr-enviar button:hover { filter: brightness(.94); }
.lr-enviar button[disabled] { opacity: .6; cursor: default; }

/* El cebo: fuera de pantalla, NO oculto. Un lector de pantalla lo salta y un
   robot que rellena todo lo que encuentra cae igual. */
.lr-cebo {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Móvil ---------------------------------------------------------------- */
@media (max-width: 720px) {
	.lr-campos { grid-template-columns: minmax(0, 1fr); }
	.lr-grupo { padding: 20px; }
	.lr-enviar button { width: 100%; }
}