/**
 * LetsRentCars — public application UI.
 *
 * Loaded ONLY on the plugin's own routes (/vehiculos, /vehiculo/…, /reserva/…).
 * Every rule is scoped under .lrc-app so the Elementor marketing pages are
 * untouched. Tokens mirror the Elementor kit (post 6) so the two halves of the
 * site read as one product.
 */

.lrc-app {
	/*
	 * UNA SOLA PALETA PARA TODO EL SITIO.
	 *
	 * Antes había dos: la app (/vehiculos/, /vehiculo/, /reserva/) usaba azul
	 * marino + amarillo y las páginas de Elementor lago + ámbar. El viajero
	 * pasaba del home a la ficha y cambiaba de producto.
	 *
	 * Los NOMBRES de variable se conservan para no reescribir cada regla; lo
	 * que cambia son los VALORES, que ahora son los del kit de Elementor
	 * (post 6). Si cambia el kit, cambian estos — son el mismo sistema.
	 */
	--lrc-navy: #0B4A55;         /* lago: primario */
	--lrc-navy-soft: #0E6270;
	--lrc-ink: #14211F;          /* basalto: texto */
	--lrc-muted: #5E6B69;
	/* ⚠️ #8A9694 daba 3,06:1 sobre blanco — por debajo del mínimo AA de 4,5:1,
	   y se usa para texto real (notas del desglose, avisos del depósito, el
	   mensaje de contacto bloqueado), no para adornos. #6B7876 conserva el
	   mismo tono verde-gris un paso por debajo de --lrc-muted y da 4,59:1. */
	/* ⚠️ #6B7876 pasaba AA sobre blanco (4,59) pero NO sobre el fondo cálido de
	   una solicitud pendiente (#FEF8EC → 4,34). Medido con el navegador sobre
	   el color heredado real. #66726F pasa en los dos: 5,00 y 4,73. */
	--lrc-faint: #66726F;
	--lrc-line: #D8D2C6;
	--lrc-bg: #FBF8F3;           /* papel */
	--lrc-wash: #E6EFF0;
	--lrc-surface: #ffffff;
	--lrc-accent: #F4A014;       /* ámbar de señalización */
	/* ⚠️ Ámbar de TEXTO. #C97F06 daba 3,22:1 sobre blanco — el ámbar de
	   señalización (#F4A014) es aún peor (2,12:1). El ámbar sirve para
	   RELLENAR, no para escribir sobre fondos claros. #8F5A00 da 5,78:1. */
	--lrc-accent-ink: #8F5A00;
	--lrc-good: #1E7A5A;
	--lrc-danger: #B4471F;

	--lrc-radius: 14px;
	--lrc-radius-sm: 10px;
	--lrc-shadow: 0 1px 3px rgba(20, 33, 31, .08);
	--lrc-shadow-lg: 0 12px 32px rgba(20, 33, 31, .14);

	/* Mismas familias que el kit: sin esto la app cae en la fuente del tema */
	--lrc-font-display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
	--lrc-font-body: "Instrument Sans", "Public Sans", system-ui, sans-serif;
	--lrc-font-mono: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;

	/* Escala de espaciado única: los márgenes sueltos son la otra fuente de
	   inconsistencia visual, junto con los colores. */
	--lrc-space-1: 4px;
	--lrc-space-2: 8px;
	--lrc-space-3: 12px;
	--lrc-space-4: 16px;
	--lrc-space-5: 24px;
	--lrc-space-6: 32px;
	--lrc-space-7: 48px;

	font-family: var(--lrc-font-body);
	color: var(--lrc-ink);
}

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

.lrc-app img {
	max-width: 100%;
	height: auto;
}

.lrc-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.lrc-container--narrow {
	max-width: 760px;
}

/* ---------- typography ---------- */

.lrc-app h1 {
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.15;
	margin: 0 0 8px;
	color: var(--lrc-navy);
	font-weight: 800;
}

.lrc-app h2 {
	font-size: 21px;
	line-height: 1.25;
	margin: 0 0 16px;
	color: var(--lrc-navy);
	font-weight: 700;
}

.lrc-app h3 {
	font-size: 17px;
	margin: 0 0 4px;
	color: var(--lrc-navy);
	font-weight: 700;
}

.lrc-app p {
	margin: 0 0 12px;
}

.lrc-eyebrow {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 12px;
	font-weight: 700;
	color: var(--lrc-accent);
	margin: 0 0 6px;
}

/* ---------- botones ----------
   La definición ÚNICA vive al final de este archivo, bajo
   "SISTEMA DE BOTONES". Acá había una segunda copia con la paleta vieja y un
   box-shadow amarillo que dibujaba un halo alrededor del CTA. Dos definiciones
   del mismo componente es exactamente lo que hay que evitar.               */

/* ---------- notices ---------- */

.lrc-notice {
	padding: 14px 18px;
	border-radius: 10px;
	margin: 0 0 24px;
	font-size: 15px;
	border: 1px solid;
}

.lrc-notice--inline {
	margin: 0 0 16px;
}

.lrc-notice--error {
	background: #fef2f2;
	border-color: #fecaca;
	color: #991b1b;
}

.lrc-notice--success {
	background: #f0fdf4;
	border-color: #bbf7d0;
	color: #166534;
}

/* ---------- breadcrumb ---------- */

.lrc-breadcrumb {
	font-size: 13px;
	color: var(--lrc-muted);
	margin: 0 0 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.lrc-breadcrumb a {
	color: var(--lrc-muted);
	text-decoration: none;
}

.lrc-breadcrumb a:hover {
	color: var(--lrc-navy);
	text-decoration: underline;
}

/* ---------- search ---------- */

.lrc-search__header {
	margin-bottom: 24px;
}

.lrc-search__header p {
	color: var(--lrc-muted);
	font-size: 17px;
	margin: 0;
}

/*
 * Panel de filtros.
 *
 * Antes era una rejilla `auto-fit` con `align-items:end`. Dos problemas: la
 * casilla "Solo 4x4" no tenía etiqueta superior y quedaba a distinta altura que
 * sus vecinos, y la última fila dejaba huecos irregulares según el ancho. Ahora
 * las pistas son explícitas y TODOS los controles miden lo mismo, así que las
 * bases de los campos se alinean solas sin depender de `align-items`.
 */
.lrc-filters {
	background: var(--lrc-surface);
	border: 1px solid var(--lrc-line);
	border-radius: var(--lrc-radius);
	padding: 20px;
	box-shadow: var(--lrc-shadow);
	margin-bottom: 20px;
}

.lrc-filters__box { border: none; }

.lrc-filters__grid {
	display: grid;
	/* minmax(0,·) y no 1fr: una pista 1fr no baja de su min-content y el select
	   más largo ensancharía la fila entera. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px 16px;
	align-items: start;
}

.lrc-filters .lrc-field { margin: 0; }

.lrc-filters .lrc-field > span {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--lrc-muted);
	/* Altura fija para la etiqueta: con dos palabras ("Precio máximo por día")
	   la etiqueta salta de línea y empujaba su campo por debajo de los demás. */
	min-height: 18px;
	line-height: 18px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lrc-filters .lrc-field input[type="date"],
.lrc-filters .lrc-field select {
	width: 100%;
	height: 48px;
	box-sizing: border-box;
}

/* La casilla, con el mismo alto y borde que un selector, para que la fila lea
   como una sola línea de controles y no como un control suelto. */
.lrc-filters .lrc-check {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--lrc-line);
	border-radius: var(--lrc-radius-sm);
	background: var(--lrc-surface);
	cursor: pointer;
	font-size: 15px;
	color: var(--lrc-ink);
}

.lrc-filters .lrc-check:has(input:checked) {
	border-color: var(--lrc-navy);
	background: var(--lrc-wash);
	font-weight: 600;
}

.lrc-filters .lrc-check input { width: auto; min-height: 0; margin: 0; }

.lrc-filters__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
}

.lrc-filters .lrc-btn { height: 48px; min-width: 140px; }

.lrc-filters__clear { color: var(--lrc-muted); font-size: 14px; }

/* El resumen sólo existe cuando el panel puede plegarse, o sea en móvil. */
.lrc-filters__toggle { display: none; }

@media ( max-width: 1024px ) {
	.lrc-filters__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media ( max-width: 860px ) {
	.lrc-filters { padding: 12px 14px; }

	.lrc-filters__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding-top: 14px;
	}

	/* En dos columnas las etiquetas largas no entran en una línea. Se permite
	   que envuelvan, pero con alto reservado para DOS líneas: si algunas
	   ocuparan una y otras dos, los campos volverían a desalinearse — que es
	   justo el defecto que este bloque corrige. */
	.lrc-filters .lrc-field > span {
		white-space: normal;
		overflow: visible;
		min-height: 36px;
	}

	.lrc-filters__toggle {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 48px;
		font-weight: 700;
		color: var(--lrc-navy);
		cursor: pointer;
		list-style: none;
	}

	.lrc-filters__toggle::-webkit-details-marker { display: none; }

	/* Chevron propio: el triángulo del navegador cambia de forma entre
	   navegadores y no se puede alinear igual en todos. */
	.lrc-filters__toggle::after {
		content: "";
		width: 9px;
		height: 9px;
		margin-left: auto;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform .15s ease;
	}

	.lrc-filters__box[open] .lrc-filters__toggle::after {
		transform: rotate(-135deg) translate(-2px, -2px);
	}

	.lrc-filters__count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 22px;
		height: 22px;
		padding: 0 6px;
		border-radius: 999px;
		background: var(--lrc-accent);
		color: var(--lrc-ink);
		font-size: 12px;
		font-weight: 700;
	}

	.lrc-filters__actions { margin-top: 12px; }
	.lrc-filters .lrc-btn { flex: 1 1 auto; }
}

@media ( max-width: 480px ) {
	.lrc-filters__grid { grid-template-columns: minmax(0, 1fr); }
}

.lrc-search__count {
	color: var(--lrc-muted);
	font-size: 14px;
	margin: 0 0 20px;
}

/* ---------- form fields ---------- */

.lrc-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px;
}

.lrc-field > span {
	font-size: 13px;
	font-weight: 600;
	color: var(--lrc-muted);
}

.lrc-field > span em {
	font-style: normal;
	font-weight: 400;
	color: var(--lrc-faint);
}

.lrc-field input,
.lrc-field select,
.lrc-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--lrc-line);
	border-radius: 10px;
	font-size: 15px;
	font-family: inherit;
	color: var(--lrc-ink);
	background: var(--lrc-surface);
	transition: border-color .12s ease, box-shadow .12s ease;
}

.lrc-field input:focus,
.lrc-field select:focus,
.lrc-field textarea:focus {
	outline: none;
	border-color: var(--lrc-navy);
	box-shadow: 0 0 0 3px rgba(0, 29, 61, .1);
}

.lrc-field textarea {
	resize: vertical;
	min-height: 84px;
}

.lrc-field-row {
	display: grid;
	/* minmax(0,1fr) y no 1fr: quinta aparición de la misma trampa. Una pista
	   `1fr` no baja del min-content de su contenido, y un `input[type=date]`
	   trae un ancho intrínseco grande —el texto de la fecha más el icono del
	   calendario— que acá medía 174 px por campo. Dos pistas de 174 más 12 de
	   separación son 360 px dentro de una barra lateral de 330: el campo de
	   entrega se salía de la tarjeta. La regla de móvil (línea ~1435) ya estaba
	   corregida; ésta se había quedado atrás. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

/* Y `minmax(0,…)` sola no alcanza: el ítem de la rejilla conserva
   `min-width: auto`, así que sigue sin poder encogerse por debajo de su
   contenido. Hacen falta las dos cosas, en la cadena entera hasta el input. */
.lrc-field-row > * {
	min-width: 0;
}

.lrc-field-row input,
.lrc-field-row select {
	min-width: 0;
	max-width: 100%;
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.lrc-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- card grid ---------- */

.lrc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 22px;
}

/*
 * Todas las filas de la MISMA altura, sólo cuando hay varias columnas.
 *
 * Con el precio anclado al fondo, filas iguales significan que todos los
 * precios de la lista caen en la misma línea horizontal — que es lo que
 * permite comparar de un vistazo en vez de ir buscando la cifra en cada
 * tarjeta.
 *
 * ⚠️ En una sola columna NO se aplica: ahí nadie compara lado a lado y estirar
 * cada tarjeta a la más alta sólo añadiría hueco en todas.
 */
@media ( min-width: 620px ) {
	.lrc-app .lrc-grid {
		grid-auto-rows: 1fr;
	}
}

.lrc-card {
	background: var(--lrc-surface);
	border: 1px solid var(--lrc-line);
	border-radius: var(--lrc-radius);
	overflow: hidden;
	box-shadow: var(--lrc-shadow);
	transition: transform .16s ease, box-shadow .16s ease;
}

.lrc-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--lrc-shadow-lg);
}

.lrc-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.lrc-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: #eef2f7;
	overflow: hidden;
}

.lrc-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lrc-card__img--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lrc-faint);
	font-size: 14px;
	height: 100%;
}

.lrc-card__tag {
	position: absolute;
	top: 12px;
	left: 12px;
	background: rgba(0, 29, 61, .88);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 5px 10px;
	border-radius: 6px;
}

.lrc-card__body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.lrc-card__title {
	font-size: 17px;
	margin: 0;
	color: var(--lrc-navy);
	font-weight: 700;
	line-height: 1.25;
}

.lrc-card__agency {
	font-size: 13px;
	color: var(--lrc-muted);
	margin: 0;
}

.lrc-card__specs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.lrc-card__specs li {
	font-size: 12px;
	color: var(--lrc-muted);
	background: var(--lrc-bg);
	border-radius: 6px;
	padding: 4px 9px;
}

/*
 * ⚠️ El precio se ANCLA AL FONDO de la tarjeta, no flota entre bloques.
 *
 * Estaba en medio, con el seguro, el depósito, el kilometraje y una insignia
 * OPCIONAL debajo. Como esos bloques miden distinto en cada vehículo, en una
 * misma fila el precio caía a alturas distintas —318 px en una tarjeta y 372
 * en la de al lado, medido— y el ojo perdía la columna al comparar, que es
 * justo para lo que sirve un listado.
 *
 * Con `margin-top: auto` en una columna flex estirada, todos los precios
 * quedan a la misma altura sin importar cuánto texto tengan encima.
 */
.lrc-card__footer {
	margin-top: auto;
	padding-top: 12px;
}

.lrc-card__price {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.lrc-card__price strong {
	font-size: 22px;
	color: var(--lrc-navy);
	font-weight: 800;
}

.lrc-card__price span {
	font-size: 13px;
	color: var(--lrc-muted);
}

.lrc-card__total {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--lrc-muted);
}

/*
 * El CTA de la tarjeta es un botón primario, no un adorno.
 *
 * Antes su estado base era beige y sólo se volvía ámbar en :hover — en un
 * teléfono el hover NO EXISTE, así que el botón quedaba permanentemente
 * apagado y se leía como deshabilitado. El estado de reposo tiene que
 * comunicar la acción por sí solo; el hover apenas la refuerza.
 */
.lrc-card__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin-top: var(--lrc-space-3);
	min-height: 44px;
	padding: 11px 16px;
	border-radius: var(--lrc-radius-sm);
	background: var(--lrc-accent);
	color: #0E1C27;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	transition: background-color .12s ease;
}

.lrc-card:hover .lrc-card__cta,
.lrc-card__link:focus-visible .lrc-card__cta {
	background: #FFB232;
}

/* ---------- empty state ---------- */

.lrc-empty {
	background: var(--lrc-surface);
	border: 1px dashed var(--lrc-line);
	border-radius: var(--lrc-radius);
	padding: 56px 24px;
	text-align: center;
	color: var(--lrc-muted);
}

/* ---------- vehicle detail ---------- */

.lrc-vehicle__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 40px;
	align-items: start;
}

.lrc-gallery {
	margin-bottom: 28px;
}

/* La tira: una foto por pantalla, con parada en cada una.
   `scroll-snap` lo hace el navegador — sin JS y sin librería de carrusel. */
.lrc-gallery__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	border-radius: var(--lrc-radius);
	background: var(--lrc-wash, #eef2f7);
	/* Oculta la barra de desplazamiento: acá el gesto es el control, y la barra
	   sobre la foto se lee como un defecto. El teclado sigue funcionando. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.lrc-gallery__track::-webkit-scrollbar {
	display: none;
}

.lrc-gallery__track:focus-visible {
	outline: 3px solid var(--lrc-accent);
	outline-offset: 2px;
}

.lrc-gallery__slide {
	/* ⚠️ `min-width: 0` es obligatorio: sin él la foto (1024 px intrínsecos)
	   estira el ítem flex y la PÁGINA scrollea en horizontal. Es la misma
	   trampa que ya documentamos con `1fr` en grid. */
	flex: 0 0 100%;
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.lrc-gallery__slide img,
.lrc-gallery__slide picture {
	width: 100%;
	display: block;
}

.lrc-gallery__slide img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* El escenario envuelve SÓLO la tira: las flechas se centran sobre la foto.
   Con `position: relative` en `.lrc-gallery` entero se centraban sobre foto +
   contador + miniaturas, y acababan encima del borde superior de la imagen. */
.lrc-gallery__stage {
	position: relative;
}

.lrc-gallery__nav {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	pointer-events: none;
}

.lrc-gallery__nav button {
	pointer-events: auto;
	width: 44px;
	height: 44px;
	margin: 0 10px;
	border: 0;
	border-radius: 50%;
	background: rgba( 20, 33, 31, .62 );
	color: #fff;
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
}

.lrc-gallery__nav button:disabled {
	opacity: .25;
	cursor: default;
}

.lrc-gallery__nav button:focus-visible {
	outline: 3px solid var(--lrc-accent);
	outline-offset: 2px;
}

/* En el teléfono el gesto es el control y los botones taparían la foto. */
@media ( max-width: 600px ) {
	.lrc-gallery__nav {
		display: none;
	}
}

.lrc-gallery__dots {
	display: none;
	justify-content: center;
	gap: 7px;
	margin-top: 12px;
}

.lrc-gallery__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--lrc-line);
	transition: background .2s, transform .2s;
}

.lrc-gallery__dot.is-active {
	background: var(--lrc-navy);
	transform: scale( 1.3 );
}

.lrc-gallery__count {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--lrc-faint);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.lrc-gallery__placeholder {
	aspect-ratio: 16 / 10;
	background: var(--lrc-wash, #eef2f7);
	border-radius: var(--lrc-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lrc-faint);
	margin-bottom: 28px;
}

.lrc-gallery__thumbs {
	display: flex;
	gap: 10px;
	margin-top: 10px;
	overflow-x: auto;
	padding-bottom: 4px;
}

.lrc-gallery__thumb {
	flex: 0 0 88px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: none;
	cursor: pointer;
	line-height: 0;
	/* Es un <a>, así que hay que apagar el subrayado y el color del tema. */
	text-decoration: none;
	display: block;
}

.lrc-gallery__thumb.is-active {
	border-color: var(--lrc-accent);
}

.lrc-gallery__thumb:focus-visible {
	outline: 3px solid var(--lrc-accent);
	outline-offset: 2px;
}

.lrc-gallery__thumb img,
.lrc-gallery__thumb picture {
	width: 88px;
	height: 62px;
	display: block;
}

.lrc-gallery__thumb img {
	object-fit: cover;
}

/* En el teléfono, en vez de miniaturas (75 px de alto) van dos señales que
   comunican mejor y ocupan 20:
     · el ASOMO de la foto siguiente — un borde de imagen cortado dice «esto
       sigue» sin que haya que explicarlo;
     · los PUNTOS, que es el control que la gente ya reconoce.
   El contador solo no bastaba: se lee como etiqueta, no como control. */
@media ( max-width: 600px ) {
	.lrc-gallery__thumbs {
		display: none;
	}

	.lrc-gallery__dots {
		display: flex;
	}

	.lrc-gallery__slide {
		flex-basis: 88%;
	}

	/* ⚠️ La ÚLTIMA foto no puede alinear su INICIO —no queda recorrido— y se
	   quedaría cortada para siempre. Se ancla por el final y encaja completa.
	   (Con `padding-right` en la tira el asomo salía del doble: el `flex-basis`
	   se calcula sobre la caja de CONTENIDO, que el padding ya había encogido.) */
	.lrc-gallery__track > .lrc-gallery__slide:last-child {
		scroll-snap-align: end;
	}

	.lrc-gallery__count {
		text-align: center;
		margin-top: 6px;
		font-size: 12px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.lrc-gallery__track {
		scroll-behavior: auto;
	}
}

.lrc-vehicle__header {
	margin-bottom: 20px;
}

.lrc-vehicle__title {
	margin: 0;
}

.lrc-vehicle__trim {
	color: var(--lrc-muted);
	margin: 4px 0 0;
}

/* Precio + «Reservar» bajo el título: sólo cuando la tarjeta de reserva no
   está al lado (ver .lrc-vehicle__layout en una columna, ≤1024px). */
.lrc-vehicle__mobile-price {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 14px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--lrc-line);
	border-radius: var(--lrc-radius);
	background: var(--lrc-surface);
}

.lrc-vehicle__mobile-price strong {
	font-size: 1.35rem;
	color: var(--lrc-navy);
}

@media (max-width: 1024px) {
	.lrc-vehicle__mobile-price {
		display: flex;
	}
}

.lrc-specs {
	list-style: none;
	margin: 0 0 28px;
	padding: 20px;
	background: var(--lrc-surface);
	border: 1px solid var(--lrc-line);
	border-radius: var(--lrc-radius);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 18px;
	box-shadow: var(--lrc-shadow);
}

.lrc-specs li {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lrc-specs strong {
	font-size: 16px;
	color: var(--lrc-navy);
	font-weight: 700;
}

.lrc-specs span {
	font-size: 12px;
	color: var(--lrc-muted);
}

.lrc-section {
	background: var(--lrc-surface);
	border: 1px solid var(--lrc-line);
	border-radius: var(--lrc-radius);
	padding: 24px;
	margin-bottom: 20px;
	box-shadow: var(--lrc-shadow);
}

.lrc-section p:last-child {
	margin-bottom: 0;
}

.lrc-policies,
.lrc-delivery,
.lrc-insurance {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lrc-policies li,
.lrc-delivery li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--lrc-line);
	font-size: 15px;
}

.lrc-policies li:last-child,
.lrc-delivery li:last-child {
	border-bottom: none;
}

.lrc-policies__label {
	color: var(--lrc-muted);
}

.lrc-delivery strong {
	color: var(--lrc-navy);
	white-space: nowrap;
}

.lrc-insurance li {
	padding: 7px 0 7px 28px;
	position: relative;
	font-size: 15px;
}

.lrc-insurance li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 7px;
	color: #16a34a;
	font-weight: 800;
}

/* ---------- agency block ---------- */

.lrc-agency__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}

.lrc-agency__logo {
	width: 56px;
	height: 56px;
	border-radius: 12px;
	object-fit: cover;
	flex: 0 0 56px;
}

.lrc-agency__logo--initial {
	background: var(--lrc-navy);
	color: var(--lrc-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 24px;
}

.lrc-agency__meta {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--lrc-muted);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.lrc-agency__desc {
	font-size: 15px;
	color: #41505f;
}

.lrc-agency__privacy,
.lrc-locked {
	font-size: 13px;
	color: var(--lrc-faint);
	background: var(--lrc-bg);
	border-radius: 8px;
	padding: 12px 14px;
	margin: 12px 0 0;
}

.lrc-badge {
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 5px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.lrc-badge--verified {
	background: #dcfce7;
	color: #166534;
}

/* ---------- booking card ---------- */

.lrc-vehicle__aside {
	position: sticky;
	top: 24px;
}

.lrc-booking-card {
	background: var(--lrc-surface);
	border: 1px solid var(--lrc-line);
	border-radius: var(--lrc-radius);
	padding: 24px;
	box-shadow: var(--lrc-shadow-lg);
}

.lrc-booking-card__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--lrc-line);
}

.lrc-booking-card__price strong {
	font-size: 34px;
	font-weight: 800;
	color: var(--lrc-navy);
	line-height: 1;
}

.lrc-booking-card__price span {
	color: var(--lrc-muted);
	font-size: 15px;
}

.lrc-booking-form__reassure {
	font-size: 12.5px;
	color: var(--lrc-muted);
	text-align: center;
	margin: 12px 0 0;
	line-height: 1.45;
}

.lrc-booking-card__breakdown {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--lrc-line);
}

.lrc-booking-card__breakdown-title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--lrc-faint);
	margin: 0 0 10px;
}

/* ---------- live estimate ---------- */

.lrc-estimate {
	background: var(--lrc-bg);
	border-radius: 10px;
	padding: 14px 16px;
	margin: 4px 0 16px;
	font-size: 14px;
}

.lrc-estimate:empty {
	display: none;
}

.lrc-estimate--warn {
	background: #fffbeb;
	color: #92400e;
	font-weight: 600;
}

.lrc-estimate__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
	color: var(--lrc-muted);
}

.lrc-estimate__row--total {
	border-top: 1px solid var(--lrc-line);
	margin-top: 6px;
	padding-top: 8px;
	color: var(--lrc-navy);
	font-weight: 700;
}

.lrc-estimate__row--fee {
	color: var(--lrc-navy);
	font-weight: 600;
}

/* ---------- price breakdown ---------- */

.lrc-quote {
	font-size: 14.5px;
}

.lrc-quote--compact {
	font-size: 13.5px;
}

.lrc-quote__row {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 8px 0;
	border-bottom: 1px solid var(--lrc-line);
}

/*
 * El importe es una COLUMNA, no el final de una frase: alineado a la derecha
 * y con cifras de ancho fijo, para que los decimales caigan unos debajo de
 * otros y la cuenta se pueda recorrer con el dedo.
 */
.lrc-quote__row > span:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/*
 * ⚠️ `nowrap` SÓLO donde el importe es dinero y nada más.
 *
 * Se probó ponerlo en todas las filas y se midió el resultado: en «No
 * incluidos» el importe puede ser «$0.20 / km — máximo $50.00», que sin poder
 * envolver mide 197 px y DESBORDA la fila a 240, 260 y 288 px — justo el
 * ancho de /reserva/ en un teléfono de 390. Las filas `--muted` son las
 * únicas que llevan unidad y tope; el resto son `money_exact()` a secas.
 */
.lrc-quote__row:not(.lrc-quote__row--muted) > span:last-child {
	white-space: nowrap;
}

/* 12px es el piso: por debajo el texto deja de ser legible en un teléfono, y
   acá lo que se explica es CUÁNDO hay que pagar cada cosa. */
.lrc-quote__row small {
	display: block;
	font-size: 12px;
	color: var(--lrc-faint);
	font-weight: 400;
}

/* ⚠️ Esta fila SÓLO existe dentro de `.lrc-quote__party` (el «Alquiler» de la
   caja de la agencia). Tenía un borde inferior navy de 2 px heredado de
   cuando el desglose era una lista plana: dentro de una caja con borde
   quedaba como un subrayado hacia la nada, con el resto del recuadro vacío
   debajo. El énfasis lo lleva ahora el importe (ver `.lrc-quote__party`). */
.lrc-quote__row--total {
	font-weight: 800;
	color: var(--lrc-navy);
}

.lrc-quote__row--fee {
	font-weight: 700;
	color: var(--lrc-navy);
}

.lrc-quote__row--muted {
	color: var(--lrc-muted);
}

.lrc-quote__optional {
	margin-top: 12px;
}

.lrc-quote__optional-title {
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--lrc-faint);
	font-weight: 700;
	margin: 0 0 4px;
}

.lrc-quote__note {
	font-size: 12px;
	color: var(--lrc-faint);
	margin: 12px 0 0;
	line-height: 1.5;
}

/* ---------- booking status page ---------- */

.lrc-booking__ref {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 18px;
}

.lrc-booking__ref span {
	font-size: 13px;
	color: var(--lrc-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.lrc-booking__ref strong {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 1px;
	color: var(--lrc-navy);
}

.lrc-state {
	border-radius: var(--lrc-radius);
	padding: 28px;
	margin-bottom: 24px;
	border: 1px solid var(--lrc-line);
	background: var(--lrc-surface);
	box-shadow: var(--lrc-shadow);
}

.lrc-state h1 {
	font-size: 26px;
}

.lrc-state p {
	color: var(--lrc-muted);
	margin-bottom: 0;
}

.lrc-state--action {
	border-color: var(--lrc-accent);
	background: #fffdf5;
}

.lrc-state--action .lrc-btn {
	margin-top: 18px;
}

.lrc-state--good {
	border-color: #86efac;
	background: #f0fdf4;
}

.lrc-state--wait {
	border-color: #bfdbfe;
	background: #eff6ff;
}

.lrc-state--closed {
	background: var(--lrc-bg);
}

.lrc-state__deadline {
	margin-top: 10px;
	font-size: 13px;
	font-weight: 600;
	color: #92400e;
}

.lrc-panel {
	background: var(--lrc-surface);
	border: 1px solid var(--lrc-line);
	border-radius: var(--lrc-radius);
	padding: 24px;
	margin-bottom: 20px;
	box-shadow: var(--lrc-shadow);
}

.lrc-panel__note {
	font-size: 12.5px;
	color: var(--lrc-muted);
	margin: 14px 0 0;
}

.lrc-summary__vehicle {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-bottom: 18px;
}

.lrc-summary__img {
	width: 110px;
	height: 74px;
	object-fit: cover;
	border-radius: 10px;
	flex: 0 0 110px;
}

.lrc-summary__vehicle p {
	margin: 0;
	font-size: 13px;
	color: var(--lrc-muted);
}

.lrc-datalist {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 14px;
}

.lrc-datalist dt {
	font-size: 12px;
	color: var(--lrc-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: 2px;
}

.lrc-datalist dd {
	margin: 0;
	font-weight: 700;
	color: var(--lrc-navy);
}

.lrc-contact {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.lrc-contact li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--lrc-line);
	font-size: 15px;
}

.lrc-contact li:last-child {
	border-bottom: none;
}

.lrc-contact span {
	color: var(--lrc-muted);
}

.lrc-contact a {
	color: var(--lrc-navy);
	font-weight: 600;
}

.lrc-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lrc-timeline li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px solid var(--lrc-line);
	font-size: 14px;
}

.lrc-timeline li:last-child {
	border-bottom: none;
}

.lrc-timeline__status {
	font-weight: 600;
	color: var(--lrc-navy);
}

.lrc-timeline time {
	color: var(--lrc-faint);
	font-size: 13px;
}

.lrc-booking__help {
	text-align: center;
	font-size: 14px;
	color: var(--lrc-muted);
}

.lrc-booking__help-link {
	display: inline-block;
	padding: 12px 4px;
	margin: -12px 0;
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
	.lrc-vehicle__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.lrc-vehicle__aside {
		position: static;
	}
}

@media (max-width: 600px) {
	.lrc-app {
		padding: 20px 0 48px;
	}

	.lrc-container {
		padding: 0 16px;
	}

	.lrc-section,
	.lrc-panel,
	.lrc-booking-card,
	.lrc-state {
		padding: 18px;
	}

	.lrc-field-row {
		grid-template-columns: minmax(0, 1fr);
	}

	/* minmax(0,...) y no 1fr: una pista 1fr no baja del min-content de su
	   contenido, y las tarjetas llevan foto. Ver .lrc-vehicle__layout. */
	.lrc-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.lrc-booking-card__price strong {
		font-size: 28px;
	}
}

/* ---------- weekly-rate saving ---------- */

.lrc-quote__row--save,
.lrc-estimate__row--save {
	color: #15803d;
	font-weight: 700;
}

/* The weekly deal is the single strongest reason to extend a rental,
   so it gets its own callout above the date fields rather than being
   buried in the breakdown. */
.lrc-weekly-deal {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 10px;
	padding: 11px 14px;
	margin: 0 0 16px;
	font-size: 13.5px;
	color: #166534;
}

.lrc-weekly-deal strong {
	font-weight: 800;
}

/* ---------- rental payment (agency's money) ---------- */

.lrc-rental-pay__done {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	color: #166534;
	border-radius: 10px;
	padding: 14px 16px;
	font-weight: 600;
	margin: 0;
}

.lrc-rental-pay__choice {
	color: var(--lrc-muted);
}

.lrc-rental-pay__note {
	font-size: 12.5px;
	color: var(--lrc-faint);
	margin: 12px 0 0;
	line-height: 1.5;
}

/* ---------- aviso de extensión ---------- */

.lrc-extension--ok {
	border-left: 4px solid var(--lrc-good);
}

.lrc-extension--warn {
	border-left: 4px solid var(--lrc-accent);
}

.lrc-extension h2 {
	font-size: 18px;
	margin-top: 0;
}

/* ---------- documentos del conductor (mobile first) ---------- */

.lrc-notice {
	padding: 12px 14px;
	border-radius: 10px;
	margin-bottom: 16px;
	font-size: 15px;
}

.lrc-notice--ok {
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
}

.lrc-notice--error {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.lrc-docs__progress {
	font-weight: 700;
	color: var(--lrc-navy);
	margin: 0 0 16px;
}

.lrc-docs__group + .lrc-docs__group {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--lrc-line);
}

.lrc-docs__group h3 {
	font-size: 16px;
	margin: 0 0 10px;
}

/* Una columna en teléfono, dos desde tablet: la mano llega a todo */
.lrc-docs__sides {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.lrc-docs__slot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 12px;
	border: 1px solid var(--lrc-line);
	border-radius: 10px;
	background: var(--lrc-bg);
}

.lrc-docs__slot.is-done {
	background: #f0fdf4;
	border-color: #bbf7d0;
}

.lrc-docs__label {
	font-weight: 600;
	flex: 1 1 auto;
}

.lrc-docs__ok {
	color: var(--lrc-good);
	font-weight: 700;
	font-size: 14px;
}

.lrc-docs__view {
	font-size: 14px;
	text-decoration: underline;
}

/* El input real se oculta; la etiqueta es el botón, con área táctil grande */
.lrc-docs__file {
	display: inline-block;
	padding: 10px 16px;
	min-height: 44px;
	line-height: 24px;
	border-radius: 8px;
	background: var(--lrc-navy);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.lrc-docs__slot.is-done .lrc-docs__file {
	background: transparent;
	color: var(--lrc-navy);
	border: 1px solid var(--lrc-navy);
}

.lrc-docs__file input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

@media (min-width: 560px) {
	.lrc-docs__sides {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.lrc-booking-form__docs-note {
	font-size: 13px;
	line-height: 1.5;
	color: var(--lrc-muted);
	background: var(--lrc-bg);
	border-radius: 8px;
	padding: 10px 12px;
	margin: 0 0 14px;
}

/* ---------- depósito de garantía ---------- */
/* Se muestra SEPARADO del alquiler a propósito: uno es pago, el otro garantía. */

.lrc-deposit {
	margin-top: 18px;
	padding: 16px;
	border-radius: 10px;
	border: 1px solid var(--lrc-line);
	background: var(--lrc-bg);
}

.lrc-deposit--held,
.lrc-deposit--refunded {
	background: #f0fdf4;
	border-color: #bbf7d0;
}

.lrc-deposit__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 6px;
}

.lrc-deposit__head span {
	font-weight: 600;
	color: var(--lrc-navy);
}

.lrc-deposit__head strong {
	font-size: 22px;
	color: var(--lrc-navy);
	white-space: nowrap;
}

.lrc-deposit__state {
	margin: 0 0 6px;
	font-weight: 700;
	font-size: 14px;
	color: var(--lrc-good);
}

.lrc-deposit--due .lrc-deposit__state {
	color: var(--lrc-accent-ink, #C97F06);
}

.lrc-deposit__note,
.lrc-deposit__offline {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--lrc-muted);
}

.lrc-deposit .lrc-btn {
	margin-top: 12px;
	min-height: 48px;
}

/* ---------- desglose: quién cobra qué ---------- */
/*
 * Dos bloques visualmente separados, no una lista continua. Un total único haría
 * leer a LetsRentCars como el arrendador; la separación es la que sostiene la
 * posición de intermediario, y también la que evita que el depósito se confunda
 * con un pago.
 */

/*
 * ⚠️ QUIÉN COBRA: dos cajas, y el ANCHO DEL BLOQUE decide si van lado a lado.
 *
 * Este bloque ya falló dos veces, y las dos veces por el mismo motivo de
 * fondo: se decidió el número sin medirlo.
 *
 * 1. `@media (min-width: 620px)` miraba la PANTALLA. En un escritorio de
 *    1440 px, el desglose que vive en la barra lateral —330 px de ancho útil—
 *    se pintaba igual a dos columnas flacas.
 * 2. `auto-fit` + `minmax(220px, …)` corrigió el dato (ancho disponible, no
 *    viewport) pero eligió mal el umbral: con 220 px las dos columnas
 *    aparecen desde 452 px de bloque, y ahí «Depósito de garantía» ya se
 *    parte en dos renglones y su aclaración en tres.
 *
 * 280 px es MEDIDO, no elegido. Barrido de 200 → 360 px de caja con el texto
 * LARGO (el de /reserva/, que es el peor caso):
 *
 *     caja 200-220 px → 9 líneas · la etiqueta del depósito se parte en 2
 *     caja 240-260 px → 7 líneas · la aclaración del depósito ocupa 3
 *     caja ≥ 280 px   → 6 líneas · toda etiqueta en 1 renglón, aclaración ≤ 2
 *
 * Con 280 px, dos columnas necesitan 572 px de bloque. Superficies reales:
 * barra lateral de la ficha (330 px) → apiladas · móvil 390 (288 px) →
 * apiladas · panel de /reserva/ en escritorio (670 px) → dos columnas de
 * 329 px, que están del lado bueno del umbral.
 *
 * `align-items: start` es la otra mitad del arreglo. Las dos cajas tienen
 * distinta cantidad de filas y, estiradas a la misma altura por el grid, la
 * de la agencia quedaba con ~280 px de vacío debajo de su única línea. Eso
 * era literalmente la mitad del «esas 2 columnas no se ven bien».
 *
 * ⚠️ Y va `min(280px, 100%)`, no `280px` a secas. Una pista
 * `minmax(280px, 1fr)` NO baja de 280 px: en un contenedor más angosto la
 * pista sigue midiendo 280 y se desborda. Medido con el bloque en una caja de
 * 250 px —lo que queda en /reserva/ en un teléfono de 320 px, un iPhone SE—
 * los importes salían cortados por la derecha. Es la misma trampa que `1fr`
 * sin `minmax(0, …)`, ya documentada tres veces acá, por el otro extremo.
 */
.lrc-quote__split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	align-items: start;
	gap: 10px;
	margin-top: 16px;
}

.lrc-quote__party {
	border: 1px solid var(--lrc-line);
	border-radius: 10px;
	padding: 12px 14px;
	background: var(--lrc-surface);
	/* Sin esto, un importe largo ensancha la pista y reaparece el apretujón. */
	min-width: 0;
}

/*
 * ⚠️ EL IMPORTE NO SE SEPARA NUNCA DE SU ETIQUETA.
 *
 * Estaba con `flex-wrap: wrap`: cuando no cabía, «$15.00» bajaba a un renglón
 * propio, pegado a la IZQUIERDA y sin nada que lo nombrara. Medido en el panel
 * de /reserva/ en escritorio (columnas de 329 px): el importe de la tarifa y
 * el del depósito caían los dos fuera de su fila. Se leía como tres cosas
 * sueltas, y desaparecía la columna de importes — lo único que un desglose
 * tiene que dejar recorrer con el dedo.
 *
 * Rejilla de dos pistas: la etiqueta envuelve DENTRO de la suya y el importe
 * se queda clavado arriba a la derecha. Es la misma corrección que en la fila
 * plana, sólo que ahí el flex nunca llegó a envolver.
 */
.lrc-quote__party .lrc-quote__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0 12px;
	align-items: baseline;
	padding: 6px 0;
	/* Van dentro de una caja con borde: una raya más por fila es ruido, y la
	   última quedaba flotando contra el borde inferior sin separar nada. */
	border-bottom: 0;
}

.lrc-quote__party .lrc-quote__row > span:first-child {
	font-weight: 600;
	color: var(--lrc-ink);
}

.lrc-quote__party .lrc-quote__row > span:last-child {
	white-space: nowrap;
	text-align: right;
	font-weight: 700;
	color: var(--lrc-navy);
	font-variant-numeric: tabular-nums;
}

/* El alquiler es el número grande de la caja de la agencia: es lo que el
   viajero paga de verdad al retirar. */
.lrc-quote__party .lrc-quote__row--total > span:last-child {
	font-size: 1.12em;
}

/*
 * ⚠️ TINTE DE MARCA, NO AZUL PRESTADO.
 *
 * Esta caja corría `#eff6ff` / `#bfdbfe` / `#1d4ed8` — azules de Tailwind que
 * no salen de ningún token: una tarjeta cobalto en medio de un sitio
 * lago/ámbar sobre papel cálido. Es exactamente la «paleta paralela» que este
 * repositorio ya pagó una vez en el panel de la agencia.
 *
 * `--lrc-wash` es el lago suave del sistema y cumple lo mismo: distingue la
 * caja de «pagás ahora» de la de «pagás al retirar», que es la distinción más
 * importante del producto.
 */
.lrc-quote__party--platform {
	border-color: var(--lrc-navy-soft);
	background: var(--lrc-wash);
}

.lrc-quote__party--agency {
	border-color: var(--lrc-line);
}

.lrc-quote__party-title {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	/* .06em costaba ~10 px en «PAGÁS PARA ASEGURAR LA RESERVA» y la empujaba a
	   dos renglones en las cajas angostas. Sigue leyéndose como rótulo. */
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--lrc-muted);
}

.lrc-quote__party--platform .lrc-quote__party-title {
	color: var(--lrc-navy); /* 8,46:1 sobre --lrc-wash, medido */
}

.lrc-quote__row--subtotal {
	border-top: 1px solid var(--lrc-line);
	margin-top: 8px;
	padding-top: 10px;
	font-weight: 600;
}

/*
 * ⚠️ `--lrc-faint` (#66726F) da 4,28:1 sobre `--lrc-wash` — NO llega al AA de
 * 4,5:1. Es la trampa que este repositorio ya documentó: un token puede pasar
 * sobre un fondo y fallar sobre otro. Dentro de las cajas la aclaración va en
 * `--lrc-muted`: 4,75:1 sobre el lago suave y 5,55:1 sobre blanco, medidos.
 */
.lrc-quote__party .lrc-quote__row small {
	display: block;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--lrc-muted);
	margin-top: 1px;
}

/*
 * El depósito ya NO va en gris entero.
 *
 * `color: var(--lrc-muted)` sobre la fila pintaba también el «$150.00»: el
 * número más grande que el huésped adelanta era el más apagado de la caja, y
 * sobre el tinte se leía gris sobre gris — el segundo reporte del dueño. Que
 * vuelve no lo dice el color, lo dice la aclaración («se devuelve»), que es
 * información y no un matiz que haya que adivinar.
 */
.lrc-quote__row--deposit {
	border-top: 1px dashed var(--lrc-line);
	margin-top: 6px;
	padding-top: 10px;
}

/* La media query de 620px se quitó: forzaba dos columnas por tamaño de
   pantalla, que es justo el dato equivocado. Lo decide `auto-fit`. */

/* ---------- tarjeta de vehículo enriquecida ---------- */

.lrc-card__agency {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--lrc-muted);
	margin: 2px 0 10px;
}

.lrc-card__verified {
	font-size: 12px;
	font-weight: 700;
	color: var(--lrc-good);
}

.lrc-card__spec--4x4 {
	font-weight: 700;
	color: var(--lrc-navy);
}

/* Los tres datos que deciden la reserva, no escondidos en la ficha */
.lrc-card__facts {
	list-style: none;
	margin: 12px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--lrc-line);
	font-size: 13px;
	line-height: 1.45;
	color: var(--lrc-muted);
}

.lrc-card__facts li { margin-bottom: 4px; }

.lrc-card__fact--ok {
	color: var(--lrc-good);
	font-weight: 600;
}

/* El motivo de la recomendación es auditable: sale de los datos, no del marketing */
.lrc-card__reason {
	margin: 10px 0 0;
	padding: 6px 10px;
	border-radius: 6px;
	background: #eff6ff;
	color: #1d4ed8;
	font-size: 12px;
	font-weight: 700;
}

.lrc-field--check {
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

.lrc-field--check input { width: auto; min-height: 24px; }

@media ( max-width: 600px ) {
	.lrc-card__facts { font-size: 12.5px; }
}

/* ---------- progreso de la reserva ---------- */

.lrc-progress__next {
	margin: 0 0 18px;
	color: var(--lrc-muted);
	font-size: 15px;
	line-height: 1.55;
}

.lrc-progress__steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lrc-progress__step {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 0 0 20px 0;
}

.lrc-progress__step:last-child { padding-bottom: 0; }

/* La línea que une los pasos: se dibuja desde la marca hacia abajo */
.lrc-progress__step::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 22px;
	bottom: 0;
	width: 2px;
	background: var(--lrc-line);
}

.lrc-progress__step:last-child::before { display: none; }

.lrc-progress__mark {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	border: 2px solid var(--lrc-line);
	background: var(--lrc-surface);
	position: relative;
	z-index: 1;
}

.lrc-progress__step--done .lrc-progress__mark {
	border-color: var(--lrc-good);
	background: var(--lrc-good);
}

.lrc-progress__step--done .lrc-progress__mark::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 2px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.lrc-progress__step--current .lrc-progress__mark {
	border-color: var(--lrc-navy);
	box-shadow: 0 0 0 4px rgba(0, 29, 61, .12);
}

.lrc-progress__step--current .lrc-progress__mark::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--lrc-navy);
}

.lrc-progress__step--broken .lrc-progress__mark {
	border-color: #dc2626;
	background: #fef2f2;
}

.lrc-progress__step--broken .lrc-progress__mark::after {
	content: "\00d7";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #dc2626;
	font-weight: 700;
	line-height: 1;
}

.lrc-progress__label {
	font-size: 15px;
	line-height: 1.35;
	color: var(--lrc-navy);
}

.lrc-progress__step--pending .lrc-progress__label { color: var(--lrc-faint); }
.lrc-progress__step--current .lrc-progress__label { font-weight: 700; }

.lrc-progress__label small {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 400;
	color: var(--lrc-muted);
}

/* ---------- asesor por destino ---------- */

.lrc-advisor { padding: 32px 0; }

.lrc-advisor__lead {
	color: var(--lrc-muted);
	margin: 0 0 20px;
	line-height: 1.6;
}

.lrc-advisor__group { border: 0; padding: 0; margin: 0 0 18px; }

.lrc-advisor__group legend {
	font-weight: 700;
	color: var(--lrc-navy);
	margin-bottom: 10px;
	padding: 0;
}

.lrc-advisor__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* El input real queda accesible al teclado; la etiqueta es la superficie táctil */
.lrc-advisor__chip input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.lrc-advisor__chip span {
	display: inline-block;
	padding: 10px 16px;
	min-height: 44px;
	line-height: 24px;
	border: 1.5px solid var(--lrc-line);
	border-radius: 999px;
	background: var(--lrc-surface);
	font-size: 14px;
	cursor: pointer;
	transition: background .12s, border-color .12s;
}

.lrc-advisor__chip input:checked + span {
	background: var(--lrc-navy);
	border-color: var(--lrc-navy);
	color: #fff;
	font-weight: 600;
}

.lrc-advisor__chip input:focus-visible + span {
	outline: 3px solid var(--lrc-accent);
	outline-offset: 2px;
}

.lrc-advisor__result {
	margin-top: 24px;
	padding: 18px;
	border: 1px solid var(--lrc-line);
	border-left: 5px solid var(--lrc-accent);
	border-radius: 10px;
	background: var(--lrc-surface);
}

.lrc-advisor__verdict {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 700;
	color: var(--lrc-navy);
}

.lrc-advisor__why {
	margin: 0 0 14px;
	padding-left: 18px;
	color: var(--lrc-muted);
	font-size: 14px;
	line-height: 1.55;
}

.lrc-advisor__why-none {
	margin: 0 0 14px;
	color: var(--lrc-muted);
	font-size: 14px;
	line-height: 1.55;
}

.lrc-advisor__count {
	font-size: 13px;
	color: var(--lrc-muted);
	margin: 0 0 10px;
}

.lrc-advisor__matches { list-style: none; margin: 0; padding: 0; }

.lrc-advisor__match a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--lrc-line);
	border-radius: 8px;
	margin-bottom: 8px;
	text-decoration: none;
	color: inherit;
	min-height: 44px;
}

.lrc-advisor__match.is-best a {
	border-color: var(--lrc-good);
	background: #f0fdf4;
}

.lrc-advisor__match-name { font-weight: 600; color: var(--lrc-navy); }

.lrc-advisor__match-name small {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--lrc-good);
	margin-top: 2px;
}

.lrc-advisor__match-price {
	font-size: 18px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--lrc-navy);
}

.lrc-advisor__match-price small { font-size: 12px; font-weight: 400; color: var(--lrc-muted); }

.lrc-empty__hint {
	font-size: 14px;
	color: var(--lrc-muted);
	line-height: 1.55;
	margin: 8px 0 14px;
}

/* ================================================================
   SISTEMA DE BOTONES — una sola definición para toda la app.
   ================================================================
   Va al final del archivo a propósito: dentro de la misma hoja gana
   la última regla a igual especificidad, así que esto cierra cualquier
   variante que haya quedado arriba.

   La doble clase `.lrc-app .lrc-btn` sube la especificidad lo justo para
   ganarle a las reglas de un solo selector del tema, sin recurrir a
   !important — que es lo que rompe en la próxima actualización.
   ================================================================ */

.lrc-app .lrc-btn,
.lrc-app a.lrc-btn,
.lrc-app button.lrc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lrc-space-2);
	min-height: 48px;
	padding: 13px 24px;
	border: 1.5px solid transparent;
	border-radius: var(--lrc-radius-sm);
	font-family: var(--lrc-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .12s ease, border-color .12s ease, color .12s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Primario: ámbar sólido sobre texto oscuro. Es el CTA del sitio y tiene
   que leerse como acción, no como advertencia. */
.lrc-app .lrc-btn--primary,
.lrc-app a.lrc-btn--primary,
.lrc-app button.lrc-btn--primary {
	background: var(--lrc-accent);
	border-color: var(--lrc-accent);
	color: #0E1C27;
}

.lrc-app .lrc-btn--primary:hover,
.lrc-app .lrc-btn--primary:focus-visible {
	background: #FFB232;
	border-color: #FFB232;
	color: #0E1C27;
}

/* Secundario: contorno lago. Nunca rojo — el rojo es para destruir. */
.lrc-app .lrc-btn--secondary,
.lrc-app .lrc-btn--ghost,
.lrc-app a.lrc-btn--secondary,
.lrc-app a.lrc-btn--ghost,
.lrc-app button.lrc-btn--secondary,
.lrc-app button.lrc-btn--ghost {
	background: transparent;
	border-color: var(--lrc-navy);
	color: var(--lrc-navy);
}

.lrc-app .lrc-btn--secondary:hover,
.lrc-app .lrc-btn--ghost:hover,
.lrc-app .lrc-btn--secondary:focus-visible,
.lrc-app .lrc-btn--ghost:focus-visible {
	background: var(--lrc-wash);
	color: var(--lrc-navy);
}

.lrc-app .lrc-btn--block,
.lrc-app a.lrc-btn--block,
.lrc-app button.lrc-btn--block { width: 100%; }

.lrc-app .lrc-btn--small { min-height: 40px; padding: 9px 16px; font-size: 14px; }

.lrc-app .lrc-btn[disabled],
.lrc-app .lrc-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* Un foco visible en TODO lo interactivo: sin esto la navegación por
   teclado es adivinanza (§29). */
.lrc-app a:focus-visible,
.lrc-app button:focus-visible,
.lrc-app input:focus-visible,
.lrc-app select:focus-visible,
.lrc-app textarea:focus-visible,
.lrc-app summary:focus-visible {
	outline: 3px solid var(--lrc-accent);
	outline-offset: 2px;
	border-radius: 6px;
}

/* Tipografía de la app alineada con el kit */
.lrc-app h1, .lrc-app h2, .lrc-app h3 {
	font-family: var(--lrc-font-display);
	letter-spacing: -.02em;
	line-height: 1.15;
	color: var(--lrc-ink);
}

/* Campos de formulario: una sola forma, un solo alto táctil */
.lrc-app input[type="text"],
.lrc-app input[type="email"],
.lrc-app input[type="tel"],
.lrc-app input[type="date"],
.lrc-app input[type="number"],
.lrc-app select,
.lrc-app textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--lrc-line);
	border-radius: var(--lrc-radius-sm);
	background: var(--lrc-surface);
	font-family: var(--lrc-font-body);
	font-size: 16px;   /* <16px hace que iOS haga zoom al enfocar */
	color: var(--lrc-ink);
}

.lrc-app textarea { min-height: 96px; }

/* ------------------------------------------------------------------
   Panel del cliente — /mis-reservas/

   Cada reserva es una tarjeta enlazada entera: en móvil el objetivo de
   toque es la fila completa, no un enlace de 14 px al final.
   ------------------------------------------------------------------ */

.lrc-account__lead {
	color: var(--lrc-muted);
	margin: 0 0 2rem;
}

.lrc-account__section {
	margin: 2.5rem 0 1rem;
	font-size: 1.05rem;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--lrc-muted);
}

.lrc-account__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.lrc-account__link {
	display: block;
	padding: 1.15rem 1.25rem;
	background: var(--lrc-surface);
	border: 1px solid var(--lrc-line);
	border-radius: var(--lrc-radius);
	box-shadow: var(--lrc-shadow);
	color: inherit;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.lrc-account__link:hover,
.lrc-account__link:focus-visible {
	border-color: var(--lrc-navy);
	box-shadow: var(--lrc-shadow-lg);
}

.lrc-account__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
}

.lrc-account__vehicle {
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--lrc-ink);
}

.lrc-account__ref {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .8rem;
	color: var(--lrc-faint);
}

.lrc-account__status {
	margin: .35rem 0 .9rem;
	color: var(--lrc-navy);
	font-weight: 600;
}

.lrc-account__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: .75rem 1.25rem;
	margin: 0;
}

.lrc-account__meta dt {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--lrc-faint);
	margin: 0 0 .15rem;
}

.lrc-account__meta dd {
	margin: 0;
	font-weight: 600;
	color: var(--lrc-ink);
}

.lrc-account__meta dd small {
	display: block;
	font-weight: 400;
	font-size: .78rem;
	color: var(--lrc-muted);
}

.lrc-account__paid {
	color: var(--lrc-good);
	font-weight: 600;
}

.lrc-account__docs {
	margin: .9rem 0 0;
	font-size: .85rem;
	color: var(--lrc-muted);
}

.lrc-account__cta {
	display: inline-block;
	margin-top: 1rem;
	font-weight: 700;
	color: var(--lrc-accent-ink);
}

.lrc-account__link:hover .lrc-account__cta {
	text-decoration: underline;
}

/* ------------------------------------------------------------------
   Opiniones verificadas
   ------------------------------------------------------------------ */

.lrc-stars { letter-spacing: 1px; white-space: nowrap; }
.lrc-stars .is-on  { color: var(--lrc-accent); }
.lrc-stars .is-off { color: var(--lrc-line); }

.lrc-reviews { margin: 3rem 0 0; }

.lrc-reviews__summary {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	align-items: center;
	padding: 1.25rem;
	background: var(--lrc-wash);
	border-radius: var(--lrc-radius);
	margin-bottom: 1.5rem;
}

.lrc-reviews__score strong {
	display: block;
	font-size: 2.4rem;
	line-height: 1;
	color: var(--lrc-navy);
}

.lrc-reviews__score span {
	display: block;
	margin-top: .3rem;
	font-size: .85rem;
	color: var(--lrc-muted);
}

.lrc-reviews__dims {
	display: grid;
	gap: .5rem 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	margin: 0;
	flex: 1 1 320px;
}

.lrc-reviews__dims div { display: flex; justify-content: space-between; gap: 1rem; }
.lrc-reviews__dims dt { color: var(--lrc-muted); font-size: .88rem; margin: 0; }
.lrc-reviews__dims dd { margin: 0; font-weight: 700; color: var(--lrc-ink); }

.lrc-reviews__few {
	color: var(--lrc-muted);
	font-size: .92rem;
	margin: 0 0 1.25rem;
}

.lrc-reviews__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.lrc-reviews__item {
	padding: 1.1rem 1.25rem;
	background: var(--lrc-surface);
	border: 1px solid var(--lrc-line);
	border-radius: var(--lrc-radius);
}

.lrc-reviews__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .9rem;
	margin-bottom: .5rem;
}

.lrc-reviews__author { font-weight: 700; color: var(--lrc-ink); }
.lrc-reviews__head time { color: var(--lrc-faint); font-size: .85rem; }

/* La insignia de verificado no es decorativa: es la razón por la que esta
   opinión vale más que una de un formulario abierto. */
.lrc-reviews__verified {
	font-size: .78rem;
	font-weight: 700;
	color: var(--lrc-good);
	background: rgba(30, 122, 90, .1);
	padding: .15rem .5rem;
	border-radius: 999px;
}

.lrc-reviews__body { margin: 0; color: var(--lrc-ink); overflow-wrap: anywhere; }

.lrc-reviews__reply,
.lrc-review__reply {
	margin-top: .85rem;
	padding-left: .9rem;
	border-left: 3px solid var(--lrc-line);
}

.lrc-reviews__reply strong,
.lrc-review__reply strong { font-size: .8rem; color: var(--lrc-muted); }
.lrc-reviews__reply p,
.lrc-review__reply p { margin: .25rem 0 0; color: var(--lrc-ink); }

/* ---- formulario ---- */

.lrc-review__lead,
.lrc-review__note,
.lrc-review__pending { color: var(--lrc-muted); font-size: .92rem; }

.lrc-review__scale,
.lrc-review__dim { border: none; margin: 0 0 1rem; padding: 0; }

.lrc-review__scale legend,
.lrc-review__dim legend { font-weight: 700; color: var(--lrc-ink); margin-bottom: .4rem; padding: 0; }

/* Las estrellas se pintan en orden inverso para que ~ alcance a las
   anteriores: con radios no hay selector "hermano previo". */
.lrc-review__stars { display: inline-flex; flex-direction: row-reverse; gap: .1rem; }
.lrc-review__stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.lrc-review__stars label {
	font-size: 2rem;
	line-height: 1;
	color: var(--lrc-line);
	cursor: pointer;
	padding: 0 .1rem;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
}
.lrc-review__stars label:hover,
.lrc-review__stars label:hover ~ label,
.lrc-review__stars input:checked ~ label { color: var(--lrc-accent); }
.lrc-review__stars input:focus-visible + label { outline: 2px solid var(--lrc-navy); outline-offset: 2px; }

.lrc-review__radios { display: flex; gap: .35rem; flex-wrap: wrap; }
.lrc-review__radios label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	border: 1px solid var(--lrc-line);
	border-radius: var(--lrc-radius-sm);
	cursor: pointer;
}
.lrc-review__radios input { position: absolute; opacity: 0; }
.lrc-review__radios label:has(input:checked) {
	background: var(--lrc-navy);
	border-color: var(--lrc-navy);
	color: #fff;
}
.lrc-review__radios label:has(input:focus-visible) { outline: 2px solid var(--lrc-navy); outline-offset: 2px; }

.lrc-review__mine { padding: 1rem 0 0; }
.lrc-review__body { margin: .5rem 0 0; }

/* El <picture> que envuelve las imágenes WebP no debe existir para el layout:
   si no, pasaría a ser el hijo directo del contenedor y rompería reglas como
   `.tarjeta > img` o un `img` que es ítem de un flex. */
picture { display: contents; }

/* ------------------------------------------------------------------
   Correcciones medidas con navegador — 2026-09-03
   ------------------------------------------------------------------ */

/*
 * ⚠️ El ámbar de señalización NO sirve como color de texto sobre blanco.
 * `#F4A014` da 2,12:1 — la insignia "4x4" de la ficha era casi ilegible. El
 * ámbar existe para RELLENAR (botones, insignias con fondo), no para escribir
 * encima de fondos claros. Donde haga falta ámbar en texto va `--lrc-accent-ink`.
 */
.lrc-app .lrc-eyebrow {
	color: var( --lrc-accent-ink );
}

/* El desglose dice qué cargos NO están incluidos: es justo lo que evita una
   sorpresa en el mostrador, y salía a 11,5 px. */
.lrc-app .lrc-quote__note,
.lrc-app .lrc-quote__optional-title,
.lrc-app .lrc-quote__optional {
	font-size: 13px;
	line-height: 1.45;
}

/* Migas de pan: 20 px de alto de toque, medidos. */
.lrc-app .lrc-breadcrumb a,
.lrc-app .lrc-crumbs a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* La foto del conductor pide contexto antes que el botón: nadie manda una
   selfie a un desconocido sin saber para qué es. */
.lrc-app .lrc-docs__group--selfie {
	border: 1px solid var( --lrc-line );
	border-radius: var( --lrc-radius );
	padding: 16px;
	background: var( --lrc-bg );
}

.lrc-app .lrc-docs__why {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
	color: var( --lrc-muted );
}

/* Nota de tope dentro del estimado en vivo: es un beneficio del viajero, así que
   se lee como aclaración y no como un cargo más. */
.lrc-app .lrc-estimate__note {
	font-size: 12px;
	color: var(--lrc-accent-ink);
	margin: -2px 0 6px;
	padding-left: 2px;
}

/* Extras opcionales del formulario de reserva. */
.lrc-app .lrc-extras {
	border: 1px solid var(--lrc-line);
	border-radius: var(--lrc-radius);
	padding: 14px;
	margin: 0 0 16px;
}

.lrc-app .lrc-extras legend {
	font-size: 14px;
	font-weight: 700;
	padding: 0 6px;
}

.lrc-app .lrc-extras__item {
	display: grid;
	/* minmax(0,1fr): una etiqueta larga no debe estirar la caja. */
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 10px;
	align-items: start;
	min-height: 44px;
	padding: 8px 0;
	cursor: pointer;
}

.lrc-app .lrc-extras__item + .lrc-extras__item {
	border-top: 1px solid var(--lrc-line);
}

.lrc-app .lrc-extras__item input {
	width: 20px;
	height: 20px;
	margin-top: 2px;
}

.lrc-app .lrc-extras__label {
	font-size: 15px;
	line-height: 1.35;
}

.lrc-app .lrc-extras__label small {
	display: block;
	font-size: 12px;
	color: var(--lrc-faint);
	margin-top: 2px;
}

.lrc-app .lrc-extras__price {
	font-weight: 700;
	white-space: nowrap;
	font-size: 14px;
}

/* ============================================================
   BUSCADOR SIMPLE — lo esencial grande, el resto en chips
   ============================================================
   Antes eran siete campos del mismo peso, todos a la vista: ~1.000 px de alto
   en teléfono antes del primer resultado. Sólo las fechas deciden qué existe;
   el resto afina una lista que todavía no se vio.
   ------------------------------------------------------------ */

.lrc-app .lrc-filters__grid {
	display: grid;
	/* minmax(0,…) en las dos pistas: un valor largo no debe estirarlas. */
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

/* --- campo de búsqueda: icono + etiqueta + valor en UNA caja --- */
.lrc-app .lrc-sf {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--lrc-line);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	/* La caja entera es el objetivo de toque, no sólo el input. */
	min-height: 64px;
}

.lrc-app .lrc-sf:focus-within {
	border-color: var(--lrc-navy);
	box-shadow: 0 0 0 3px rgba( 11, 74, 85, .12 );
}

.lrc-app .lrc-sf__icon {
	width: 22px;
	height: 22px;
	color: var(--lrc-muted);
	flex: 0 0 auto;
}

.lrc-app .lrc-sf__body {
	display: block;
	min-width: 0;
}

.lrc-app .lrc-sf__label {
	display: block;
	font-size: 12px;
	color: var(--lrc-faint);
	line-height: 1.2;
	margin-bottom: 2px;
}

/* El input pierde su caja: la caja es el `.lrc-sf`. Dos bordes anidados es
   justo lo que hacía que el panel viejo se leyera como un formulario de
   trámite. */
.lrc-app .lrc-sf input {
	width: 100%;
	border: 0;
	padding: 0;
	background: none;
	/* 16px o iOS hace zoom al enfocar. */
	font-size: 16px;
	font-weight: 600;
	color: var(--lrc-ink);
	min-height: 0;
}

.lrc-app .lrc-sf input:focus {
	outline: none;
	box-shadow: none;
}

.lrc-app .lrc-sf__go {
	width: 100%;
}

/* --- chips de refinamiento --- */
.lrc-app .lrc-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}

/*
 * ⚠️ Abierto, el <details> ocupa la FILA COMPLETA.
 *
 * Como ítem flex sin esto, el panel queda del ancho de su propio chip —
 * unos 110 px— y los campos salen apretados en una columna. `flex: 1 0 100%`
 * lo saca a su propia línea y le da todo el ancho disponible.
 *
 * Se resuelve en flujo y no con `position: absolute` a propósito: un panel
 * flotante necesita z-index, cierre al hacer clic fuera y contención en
 * pantallas chicas — tres cosas que fallan por separado. Así no puede taparse
 * ni salirse.
 */
.lrc-app .lrc-chip--panel[open] {
	flex: 1 0 100%;
}

.lrc-app .lrc-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--lrc-line);
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	color: var(--lrc-ink);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.lrc-app .lrc-chip svg {
	width: 17px;
	height: 17px;
}

.lrc-app .lrc-chip__count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--lrc-navy);
	color: #fff;
	font-size: 12px;
}

/*
 * El chip-panel es un <details>: el summary ES el chip, y el panel va DEBAJO.
 *
 * ⚠️ `display: block` es obligatorio y no cosmético. `.lrc-chip` lleva
 * `display: inline-flex` para alinear icono y texto; al heredarlo, el
 * <details> convertía a `summary` y panel en ítems flex de la MISMA FILA con
 * `nowrap`: el panel salía de ~110 px y el chip «Filtros» desaparecía
 * aplastado. Medido con probe.mjs — desde el servidor no hay forma de verlo.
 */
.lrc-app .lrc-chip--panel {
	display: block;
	border: 0;
	padding: 0;
	min-height: 0;
	background: none;
	border-radius: 0;
}

.lrc-app .lrc-chip--panel > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--lrc-line);
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.lrc-app .lrc-chip--panel > summary::-webkit-details-marker {
	display: none;
}

.lrc-app .lrc-chip--panel[open] > summary {
	border-color: var(--lrc-navy);
	background: var(--lrc-wash);
}

.lrc-app .lrc-chip__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin-top: 10px;
	padding: 14px;
	border: 1px solid var(--lrc-line);
	border-radius: 12px;
	background: #fff;
}

/* El chip de orden envuelve un <select> nativo: nada de menú propio. */
.lrc-app .lrc-chip--select {
	padding: 0;
	overflow: hidden;
}

.lrc-app .lrc-chip--select select {
	border: 0;
	background: none;
	min-height: 44px;
	padding: 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--lrc-ink);
}

.lrc-app .lrc-chip--clear {
	color: var(--lrc-muted);
	font-weight: 500;
}

/* En cuanto hay sitio, las fechas van lado a lado y el botón al final:
   la barra de una sola línea que es lo que hace que se vea simple. */
@media ( min-width: 720px ) {
	.lrc-app .lrc-filters__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
		align-items: center;
		gap: 12px;
	}

	.lrc-app .lrc-sf__go {
		width: auto;
		min-width: 150px;
	}

	.lrc-app .lrc-chips {
		grid-column: 1 / -1;
	}

	.lrc-app .lrc-chip__panel {
		grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
		align-items: end;
	}
}

/* Código promocional — plegado en el formulario de solicitud.
   ⚠️ `.lrc-chip` enseñó que un <details> que hereda `display:flex` convierte
   summary y contenido en ítems de la misma fila. Acá se fija `block`. */
.lrc-app .lrc-promo{display:block;margin:.25rem 0 .5rem}
.lrc-app .lrc-promo>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.4rem;
  min-height:44px;font-size:.92rem;color:var(--lrc-navy);text-decoration:underline;text-underline-offset:3px}
.lrc-app .lrc-promo>summary::-webkit-details-marker{display:none}
.lrc-app .lrc-promo>summary::before{content:"+";font-weight:700;font-size:1.05em;line-height:1}
.lrc-app .lrc-promo[open]>summary::before{content:"–"}
.lrc-app .lrc-promo>summary:focus-visible{outline:2px solid var(--lrc-navy);outline-offset:2px;border-radius:4px}
.lrc-app .lrc-promo .lrc-field input{text-transform:uppercase}
.lrc-app .lrc-quote__row--promo{color:#1E7A5A}
.lrc-app .lrc-quote__row--promo small{display:block;color:var(--lrc-faint)}
.lrc-app .lrc-promo__nota{margin:.4rem 0 0;font-size:.85rem;line-height:1.45;color:var(--lrc-faint)}

/* Cantidad de un extra (chofer por horas). Va fuera del <label> de la casilla
   —dentro, cada clic en el número la alternaría— así que necesita su propia
   sangría para leerse como dependiente de ella. */
.lrc-app .lrc-extras__qty{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:-2px 0 10px;padding-left:30px}
.lrc-app .lrc-extras__qty[hidden]{display:none}
.lrc-app .lrc-extras__qty label{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:.92rem}
.lrc-app .lrc-extras__qty input[type="number"]{min-width:0;width:84px;min-height:44px;font-size:16px;
  padding:.5rem .6rem;border:1px solid var(--lrc-line);border-radius:8px;text-align:center}
.lrc-app .lrc-extras__qty small{color:var(--lrc-faint);font-size:.85rem}

/* Devolver en otro lugar (2026-09-26). La casilla es un objetivo de toque
   completo —la etiqueta entera— y va pegada al select de entrega, que es la
   pregunta de la que depende. */
.lrc-app .lrc-same-return {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin: -4px 0 12px;
	font-size: 15px;
	cursor: pointer;
}

.lrc-app .lrc-same-return[hidden],
.lrc-app #lrc-dropoff-field[hidden] {
	display: none;
}

.lrc-app .lrc-same-return input {
	width: 20px;
	height: 20px;
	margin: 0;
	flex: 0 0 auto;
}

/* «Todo incluido» en entrega y recogida (2026-09-26). La etiqueta rellena con
   el verde de «disponible» (5,27:1 con blanco): el ámbar no sirve de texto
   sobre claro, y el verde ya se lee como «a tu favor» en el resto del sitio. */
.lrc-app .lrc-delivery__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
}

.lrc-app .lrc-incl-tag {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: #1E7A5A;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.5;
	white-space: nowrap;
}


/* ---------- Ayuda «i» (toggletip) — 2026-09-26 ----------
   Lo que explica pero no hace falta para completar el formulario va acá, en
   un toque, en vez de ocupar líneas fijas. Objetivo de toque de 32 px con el
   icono de 16: suficiente al lado de un rótulo, sin empujar la línea. */
.lrc-app .lrc-tip {
	position: relative;
	display: inline-flex;
	vertical-align: middle;
}

.lrc-app .lrc-tip__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -14px -12px -14px 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--lrc-muted);
	cursor: pointer;
	min-height: 0;
}

/* El tema pinta un fondo en button:hover/:focus (el celeste que se veía al
   tocar). Se anula en todos los estados, y también el resaltado de WebKit. */
.lrc-app .lrc-tip__btn,
.lrc-app .lrc-tip__btn:hover,
.lrc-app .lrc-tip__btn:focus,
.lrc-app .lrc-tip__btn:active {
	background: none;
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;
}

.lrc-app .lrc-tip__btn:hover,
.lrc-app .lrc-tip.is-open .lrc-tip__btn {
	color: var(--lrc-navy);
}

.lrc-app .lrc-tip__btn:focus-visible {
	outline: 2px solid var(--lrc-navy);
	outline-offset: -2px;
}

.lrc-app .lrc-tip__body {
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	left: 50%;
	transform: translateX(calc(-50% + var(--lrc-tip-dx, 0px)));
	width: max-content;
	max-width: min(300px, calc(100vw - 24px));
	padding: 10px 12px;
	border-radius: 10px;
	background: #16302F;
	color: #fff;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	white-space: normal;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.lrc-app .lrc-tip__body ul {
	margin: 6px 0;
	padding-left: 18px;
}

.lrc-app .lrc-tip__body strong {
	color: #fff;
}

/* En escritorio, también al pasar el puntero. En táctil no: un «hover»
   emulado dejaría el globo pegado después del toque. */
@media (hover: hover) and (pointer: fine) {
	.lrc-app .lrc-tip:hover .lrc-tip__body[hidden] {
		display: block;
	}
}

.lrc-app .lrc-field__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.lrc-app .lrc-booking-form__req {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--lrc-muted);
}

.lrc-app .lrc-extras__qty small {
	font-weight: 400;
	color: var(--lrc-muted);
}

/* Opiniones de Google (widget de GHL) — 2026-09-26. Separado visualmente de
   las opiniones verificadas: otra fuente, otro bloque. */
.lrc-app .lrc-greviews {
	margin: 40px 0 0;
	padding-top: 28px;
	border-top: 1px solid var(--lrc-line);
}

.lrc-app .lrc-greviews__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
}

.lrc-app .lrc-greviews__frame {
	display: block;
	width: 100%;
	min-width: 100%;
	border: 0;
}

/* Tocar la «i» dentro de la fila de un extra pintaba la fila entera de
   celeste: es el resaltado de toque de WebKit sobre el <label> ancestro. La
   casilla ya muestra su estado; el destello sobraba. */
.lrc-app .lrc-extras__item,
.lrc-app .lrc-same-return,
.lrc-app .lrc-tip {
	-webkit-tap-highlight-color: transparent;
}

/* ---------- Estimado: «hoy» y «en el mostrador» (2026-10-01) ----------
   Pedido del dueño: la lista plana ponía al mismo peso el cargo, la reserva,
   el saldo y el depósito, y no se veía cuánto sale de la tarjeta AHORA. Dos
   bloques con su título: el de hoy resaltado (ámbar suave, borde ámbar), el
   del mostrador neutro. El ámbar es relleno: el texto sigue en tinta. */
.lrc-app .lrc-est-pay {
	border-radius: 12px;
	padding: 12px 14px;
	margin-top: 12px;
	display: grid;
	gap: 6px;
}
.lrc-app .lrc-est-pay--now {
	background: #FEF4E2;
	border: 1.5px solid #F4A014;
}
.lrc-app .lrc-est-pay--counter {
	background: #fff;
	border: 1px solid var(--lrc-line);
}
.lrc-app .lrc-est-pay__title {
	margin: 0 0 2px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lrc-accent-ink, #8F5A00);
}
.lrc-app .lrc-est-pay--counter .lrc-est-pay__title { color: var(--lrc-muted); }
.lrc-app .lrc-est-pay__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-size: 14.5px;
	color: var(--lrc-ink);
	min-width: 0;
}
.lrc-app .lrc-est-pay__row > span:first-child { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.lrc-app .lrc-est-pay__row > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lrc-app .lrc-est-pay__row--sum {
	border-top: 1px solid rgba(143, 90, 0, .25);
	margin-top: 4px;
	padding-top: 8px;
	font-family: "Bricolage Grotesque", sans-serif;
	font-weight: 800;
	font-size: 18px;
}
.lrc-app .lrc-est-pay__note {
	margin: 2px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--lrc-muted);
}

/* ---------- «No incluidos»: el nombre en negrita (2026-10-01) ----------
   Pedido del dueño: SÓLO negrita, mismo tamaño y mismo gris que el resto del
   bloque (una primera versión en tinta y más grande quedó demasiado llamativa
   para cargos que quizás nunca se cobren). El precio no se parte en dos
   líneas: «$15.00 / hora» caía cortado. */
.lrc-app .lrc-quote__optional .lrc-quote__name {
	display: block;
	font-weight: 600;
}
.lrc-app .lrc-quote__optional .lrc-quote__row--muted > span:last-child {
	white-space: nowrap;
}

/* ---------- impresión ----------
   La página de la reserva es el comprobante que el viajero lleva al mostrador:
   sólo los datos. Fuera el menú, el pie, los formularios y el botón flotante. */
@media print {
	.lrc-header,
	.lrc-nav,
	.lrc-footer,
	.lrc-wa-float,
	.lrc-cancel__form,
	.lrc-booking__help,
	.lrc-docs,
	.lrc-cancel,
	.lrc-thread,
	.lrc-messages,
	.lrc-review-form,
	.lrc-app form,
	.lrc-app .lrc-btn,
	.lrc-app button {
		display: none !important;
	}

	.lrc-app,
	.lrc-app .lrc-panel {
		box-shadow: none !important;
		background: #fff !important;
		color: #000 !important;
	}

	.lrc-app .lrc-panel {
		border: 1px solid #999;
		break-inside: avoid;
	}

	.lrc-app a {
		color: #000;
		text-decoration: none;
	}
}

/* ======================================================================
   UX 2026-10-06 — capa de diseño del sitio público.
   Va al FINAL a propósito: a igual especificidad gana la última regla. Todo
   lee los tokens del tema (`--t-*`, remapeados a `--lrc-*` por `body .lrc-app`
   en theme.css): cambiar la marca = cambiar tokens.css. Vocabulario
   compartido con el panel: lrc-btn, lrc-panel, lrc-field, lrc-i, lrc-state.
   ====================================================================== */

/* ---- marco de la app: sin caja blanca, el fondo es el del sitio ---- */
body .lrc-app { background: transparent; border: 0; box-shadow: none; padding: 28px 0 80px; font-size: 17px; line-height: 1.6; }
.lrc-app h1, .lrc-app h2, .lrc-app h3 { font-family: var(--lrc-font-display); letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; }
.lrc-app h1 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); font-weight: 800; }
.lrc-app .lrc-eyebrow { color: var(--lrc-accent-ink); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 6px; }

/* ---- superficies ---- */
.lrc-app .lrc-panel, .lrc-app .lrc-section, .lrc-app .lrc-booking-card, .lrc-app .lrc-filters, .lrc-app .lrc-state, .lrc-app .lrc-empty {
	border-radius: 16px; border: 1px solid var(--lrc-line); background: var(--lrc-surface);
	box-shadow: 0 1px 2px rgba(27, 31, 36, .06), 0 1px 3px rgba(27, 31, 36, .05);
}
.lrc-app .lrc-panel, .lrc-app .lrc-section { padding: 22px 24px; margin-bottom: 16px; }
.lrc-app .lrc-panel > h2, .lrc-app .lrc-section > h2, .lrc-app .lrc-section h2.lrc-delivery__title {
	display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1.125rem; font-weight: 800;
}
.lrc-app .lrc-panel__note { color: var(--lrc-muted); font-size: 15px; margin: 12px 0 0; }

/* ---- botones: píldora, mismos pesos que el tema ---- */
.lrc-app .lrc-btn, .lrc-app a.lrc-btn, .lrc-app button.lrc-btn { border-radius: 999px; min-height: 48px; padding: 12px 24px; font-family: var(--lrc-font-body); gap: 8px; }
.lrc-app .lrc-btn .lrc-i { width: 1.1em; height: 1.1em; }
.lrc-app .lrc-btn--accent, .lrc-app a.lrc-btn--accent { background: var(--lrc-accent); color: #1B1F24; border-color: transparent; }
.lrc-app .lrc-btn--accent:hover, .lrc-app a.lrc-btn--accent:hover, .lrc-app .lrc-btn--accent:focus-visible { background: var(--lrc-accent-ink); color: #fff; }
.lrc-app .lrc-btn--lg { min-height: 54px; padding-inline: 30px; font-size: 17px; }

/* ---- campos: una sola forma ---- */
.lrc-app input[type="text"], .lrc-app input[type="email"], .lrc-app input[type="tel"], .lrc-app input[type="date"], .lrc-app input[type="number"], .lrc-app select, .lrc-app textarea {
	border-radius: 10px; border: 1px solid var(--lrc-line); background: var(--lrc-surface); color: var(--lrc-ink);
}
.lrc-app input:focus-visible, .lrc-app select:focus-visible, .lrc-app textarea:focus-visible { outline: 3px solid var(--t-focus, var(--lrc-accent)); outline-offset: 1px; border-color: var(--lrc-navy); }

/* ================= catálogo ================= */
.lrc-app.lrc-search .lrc-search__header { margin: 4px 0 22px; max-width: 64ch; }
.lrc-app.lrc-search .lrc-search__header h1 { margin: 0 0 8px; }
.lrc-app.lrc-search .lrc-search__header p { color: var(--lrc-muted); font-size: 17px; line-height: 1.5; }
.lrc-app .lrc-filters { padding: 14px; margin-bottom: 18px; }
.lrc-app .lrc-filters__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.lrc-app .lrc-sf { min-height: 58px; padding: 8px 12px; border-radius: 12px; gap: 10px; }
.lrc-app .lrc-sf__icon { width: 20px; height: 20px; color: var(--lrc-navy); }
.lrc-app .lrc-sf__label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--lrc-faint); }
.lrc-app .lrc-sf input { font-weight: 700; }
.lrc-app .lrc-sf__go { grid-column: 1 / -1; width: 100%; }
.lrc-app .lrc-chips { grid-column: 1 / -1; margin-top: 2px; }
.lrc-app .lrc-chip > summary, .lrc-app .lrc-chip--select select, .lrc-app .lrc-chip--clear { border-radius: 999px; min-height: 44px; }
.lrc-app .lrc-contact a, .lrc-app .lrc-booking__help-link { display: inline-flex; align-items: center; min-height: 44px; }
.lrc-app .lrc-search__count { display: flex; align-items: center; gap: 8px; margin: 18px 0 12px; color: var(--lrc-muted); font-size: 15px; font-weight: 600; }
.lrc-app .lrc-empty { padding: 40px 24px; text-align: center; max-width: 60ch; margin-inline: auto; }
.lrc-app .lrc-empty p { margin: 0 0 8px; font-weight: 700; }
.lrc-app .lrc-empty .lrc-empty__hint { font-weight: 400; color: var(--lrc-muted); margin-bottom: 18px; }
@media ( min-width: 720px ) {
	.lrc-app .lrc-filters { padding: 16px; }
	.lrc-app .lrc-filters__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: stretch; }
	.lrc-app .lrc-sf__go { grid-column: auto; width: auto; min-width: 160px; min-height: 58px; }
}

/* ================= ficha del vehículo ================= */
.lrc-app .lrc-breadcrumb { font-size: 14px; }
.lrc-app .lrc-vehicle__layout { gap: 36px; }
.lrc-app .lrc-vehicle__aside { top: 88px; }
.lrc-app .lrc-gallery__stage { border-radius: 16px; overflow: hidden; background: var(--lrc-wash); }
.lrc-app .lrc-gallery__thumb { border-radius: 10px; overflow: hidden; }
.lrc-app .lrc-gallery__thumb.is-active { outline: 3px solid var(--lrc-accent); outline-offset: 0; }
.lrc-app .lrc-vehicle__header { margin: 4px 0 18px; }
.lrc-app .lrc-vehicle__title { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); }
.lrc-app .lrc-vehicle__trim { color: var(--lrc-muted); margin: 4px 0 0; }

.lrc-app .lrc-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 10px; list-style: none; margin: 0 0 18px; padding: 0; }
.lrc-app .lrc-specs li { display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; background: var(--lrc-surface); border: 1px solid var(--lrc-line); border-radius: 12px; padding: 12px 14px; }
.lrc-app .lrc-specs .lrc-i { grid-row: 1 / span 2; width: 24px; height: 24px; color: var(--lrc-navy); }
.lrc-app .lrc-specs strong { font-size: 1.0625rem; line-height: 1.2; color: var(--lrc-ink); overflow-wrap: anywhere; }
.lrc-app .lrc-specs span { font-size: 12px; color: var(--lrc-faint); text-transform: uppercase; letter-spacing: .04em; line-height: 1.3; }

/* tarjeta de reserva: el precio manda, «hoy» en acento, «mostrador» neutro */
.lrc-app .lrc-booking-card { padding: 22px; box-shadow: 0 6px 18px rgba(27, 31, 36, .09); border-radius: 16px; }
.lrc-app .lrc-booking-card__price { margin-bottom: 12px; }
.lrc-app .lrc-booking-card__price strong { font-family: var(--lrc-font-display); font-size: 2.25rem; letter-spacing: -.03em; color: var(--lrc-navy); font-variant-numeric: tabular-nums; }
.lrc-app .lrc-estimate { background: var(--lrc-bg); border: 1px solid var(--lrc-line); border-radius: 12px; }
.lrc-app .lrc-est-pay--now { background: var(--lrc-accent-tint, #FDEFE4); border: 1px solid var(--lrc-accent); border-radius: 12px; }
.lrc-app .lrc-est-pay--counter { background: var(--lrc-surface); border: 1px dashed var(--lrc-line); border-radius: 12px; }
.lrc-app .lrc-booking-card button.lrc-btn--block { min-height: 54px; font-size: 17px; }

/* barra fija de teléfono: precio + reservar, se esconde con el formulario a la vista */
.lrc-stickybar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
	background: var(--lrc-surface); border-top: 1px solid var(--lrc-line); box-shadow: 0 -8px 24px rgba(27, 31, 36, .12);
	transform: translateY(0); transition: transform .2s ease, opacity .2s ease;
}
.lrc-stickybar.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }
.lrc-stickybar__price { margin: 0; display: flex; align-items: baseline; gap: 5px; line-height: 1.1; color: var(--lrc-muted); font-size: 13px; font-weight: 600; }
.lrc-stickybar__price strong { font-family: var(--lrc-font-display); font-size: 1.5rem; font-weight: 800; color: var(--lrc-navy); letter-spacing: -.02em; }
.lrc-stickybar .lrc-btn { min-height: 46px; padding-inline: 22px; }
@media ( min-width: 1025px ) { .lrc-stickybar { display: none; } }
@media ( max-width: 1024px ) { body .lrc-app.lrc-vehicle { padding-bottom: 96px; } }
@media ( prefers-reduced-motion: reduce ) { .lrc-stickybar { transition: none; } }

/* ================= página de la reserva (el recibo) ================= */
.lrc-app.lrc-booking .lrc-container--narrow { max-width: 780px; }
.lrc-app .lrc-booking__ref { align-items: center; gap: 10px; margin: 0 0 14px; }
.lrc-app .lrc-booking__ref span { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--lrc-faint); }
.lrc-app .lrc-booking__ref strong { font-family: var(--lrc-font-mono); font-size: 1.125rem; font-weight: 700; color: var(--lrc-ink); background: var(--lrc-wash); border-radius: 8px; padding: 4px 10px; letter-spacing: .04em; }

.lrc-app .lrc-state { padding: 26px 24px 26px 28px; margin-bottom: 16px; box-shadow: inset 6px 0 0 var(--lrc-line), 0 1px 3px rgba(27, 31, 36, .06); }
.lrc-app .lrc-state--action { box-shadow: inset 6px 0 0 var(--lrc-accent), 0 1px 3px rgba(27, 31, 36, .06); background: var(--lrc-accent-tint, #FDEFE4); }
.lrc-app .lrc-state--good { box-shadow: inset 6px 0 0 var(--lrc-good), 0 1px 3px rgba(27, 31, 36, .06); background: var(--lrc-good-tint, #E9F5EE); }
.lrc-app .lrc-state--closed { background: var(--lrc-surface); }
.lrc-app .lrc-state__pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 4px 12px 4px 8px; border-radius: 999px; background: var(--lrc-surface); border: 1px solid var(--lrc-line); font-size: 13px; font-weight: 700; color: var(--lrc-ink); }
.lrc-app .lrc-state__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lrc-line); }
.lrc-app .lrc-state--action .lrc-state__dot { background: var(--lrc-accent); }
.lrc-app .lrc-state--good .lrc-state__dot { background: var(--lrc-good); }
.lrc-app .lrc-state h1 { margin: 0 0 8px; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); }
.lrc-app .lrc-state__text { margin: 0 0 16px; color: var(--lrc-muted); font-size: 17px; max-width: 58ch; }
.lrc-app .lrc-state .lrc-btn--lg { width: 100%; }
.lrc-app .lrc-state__note { margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--lrc-surface); border: 1px solid var(--lrc-line); font-size: 15px; font-weight: 600; color: var(--lrc-ink); }
.lrc-app .lrc-state__deadline { margin: 10px 0 0; font-size: 14px; color: var(--lrc-muted); font-weight: 600; }
@media ( min-width: 600px ) { .lrc-app .lrc-state .lrc-btn--lg { width: auto; } }

.lrc-app .lrc-progress { padding-top: 18px; padding-bottom: 12px; }
.lrc-app .lrc-progress h2 { font-size: 1.0625rem; }
.lrc-app .lrc-progress__next { color: var(--lrc-muted); font-size: 15px; margin: 0 0 12px; }

/* recibo: etiquetas a la izquierda, importes tabulares a la derecha */
.lrc-app .lrc-payments .lrc-datalist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.lrc-app .lrc-payments .lrc-datalist > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--lrc-line); }
.lrc-app .lrc-payments .lrc-datalist > div:last-child { border-bottom: 0; }
.lrc-app .lrc-payments .lrc-datalist dt { font-weight: 600; color: var(--lrc-ink); font-size: 15px; }
.lrc-app .lrc-payments .lrc-datalist dd { margin: 0; text-align: right; font-family: var(--lrc-font-display); font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums; color: var(--lrc-ink); }
.lrc-app .lrc-payments .lrc-datalist dd small { display: block; font-family: var(--lrc-font-body); font-weight: 500; font-size: 13px; color: var(--lrc-muted); margin-top: 2px; }
.lrc-app .lrc-summary__img { border-radius: 12px; }
.lrc-app .lrc-summary__vehicle h3 { font-size: 1.0625rem; margin: 0 0 2px; }
.lrc-app .lrc-summary__vehicle p { color: var(--lrc-muted); font-size: 14px; margin: 0; }
.lrc-app .lrc-datalist dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--lrc-faint); font-weight: 700; }
.lrc-app .lrc-datalist dd { font-weight: 700; }
.lrc-app .lrc-timeline li { padding: 8px 0; border-bottom: 1px dashed var(--lrc-line); display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.lrc-app .lrc-timeline li:last-child { border-bottom: 0; }
.lrc-app .lrc-timeline time { color: var(--lrc-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lrc-app .lrc-cancel .lrc-btn--ghost { border-color: var(--lrc-danger); color: var(--lrc-danger); }
.lrc-app .lrc-cancel .lrc-btn--ghost:hover, .lrc-app .lrc-cancel .lrc-btn--ghost:focus-visible { background: var(--lrc-danger); color: #fff; }
.lrc-app .lrc-booking__help { text-align: center; color: var(--lrc-muted); font-size: 15px; margin-top: 8px; }

/* desglose congelado: «hoy» en acento (igual que en la ficha), «mostrador» neutro */
.lrc-app .lrc-quote__party--platform { background: var(--lrc-accent-tint, #FDEFE4); border: 1px solid var(--lrc-accent); border-radius: 12px; }
.lrc-app .lrc-quote__party--agency { background: var(--lrc-surface); border: 1px dashed var(--lrc-line); border-radius: 12px; }

/* ================= impresión del recibo ================= */
@media print {
	.lrc-stickybar, .lrc-app .lrc-cancel, .lrc-app .lrc-thread, .lrc-app .lrc-docs, .lrc-app .lrc-review { display: none !important; }
	.lrc-app .lrc-panel, .lrc-app .lrc-state { box-shadow: none; break-inside: avoid; }
}


/* ======================================================================
 * Página de pago del anticipo (WooCommerce order-pay) — 2026-10-08
 * Resumen de la reserva encima del formulario de pago + controles de
 * WooCommerce con la marca. `body.lrc-paypage` la pone Frontend\PayPage.
 * ====================================================================== */
.lrc-pay { margin: 0 0 1.5rem; }
.lrc-pay__panel { padding: 1.25rem 1.25rem 1rem; }
.lrc-pay__eyebrow { margin: 0 0 .25rem; font: 600 .8rem/1.3 var(--lrc-font-body, inherit); letter-spacing: .06em; text-transform: uppercase; color: var(--lrc-accent-ink, #AD5200); }
.lrc-pay__title { margin: 0 0 .75rem; font-size: 1.5rem; line-height: 1.2; }
.lrc-pay__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .5rem 1rem; margin: 0 0 1rem; padding: 0; }
.lrc-pay__facts > div { min-width: 0; }
.lrc-pay__facts dt { margin: 0; font-size: .8rem; color: var(--lrc-muted, #4b5563); }
.lrc-pay__facts dd { margin: 0; font-weight: 600; }
.lrc-pay__money { border: 1px solid var(--lrc-line, #e5e7eb); border-radius: var(--lrc-radius, 12px); padding: .25rem .9rem; margin: 0 0 .9rem; }
.lrc-pay__row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px dashed var(--lrc-line, #e5e7eb); font-variant-numeric: tabular-nums; }
.lrc-pay__row:first-child { border-top: 0; }
.lrc-pay__row--today { font-size: 1.1rem; }
.lrc-pay__row--today strong { color: var(--lrc-accent-ink, #AD5200); }
.lrc-pay__note { margin: 0 0 .5rem; color: var(--lrc-muted, #4b5563); font-size: .95rem; }
.lrc-pay__back { margin: 0; }
.lrc-pay__back a { display: inline-block; padding: .6rem 0; min-height: 44px; font-weight: 600; color: var(--lrc-navy, #0242A6); text-decoration: underline; text-underline-offset: .2em; }

/* Controles de WooCommerce en esa página: la marca, no el morado por defecto.
   Fuera de `.lrc-app` no existen los --lrc-*: se usan los tokens del tema. */
body.lrc-paypage .entry-title,
body.lrc-paypage .lrc-page__title,
body.lrc-paypage h1 { margin-top: var(--t-space-6, 24px); }
body.lrc-paypage #payment,
body.lrc-paypage .woocommerce-info { background: var(--t-surface-alt, #F8F8F8); border-radius: var(--t-radius, 12px); }
body.lrc-paypage .woocommerce-info { border-top-color: var(--t-primary, #0242A6); color: var(--t-ink, #10203A); }
body.lrc-paypage .woocommerce-info::before { color: var(--t-primary, #0242A6); }
body.lrc-paypage .woocommerce #payment .place-order { background: transparent; }
body.lrc-paypage .woocommerce button.button,
body.lrc-paypage .woocommerce #payment #place_order { background: var(--t-accent, #FF8112); color: var(--t-on-accent, #0E1C27); border: 0; border-radius: 999px; padding: .85rem 1.5rem; font-weight: 700; min-height: 44px; }
body.lrc-paypage .woocommerce button.button:hover,
body.lrc-paypage .woocommerce #payment #place_order:hover { background: var(--t-accent-deep, #D96A05); color: #fff; }
body.lrc-paypage table.shop_table { border-radius: var(--t-radius, 12px); border-collapse: separate; }
body.lrc-paypage table.shop_table th,
body.lrc-paypage table.shop_table td { font-variant-numeric: tabular-nums; }

/* Panel plegable (desglose de una reserva cerrada) */
.lrc-app .lrc-panel--details { display: block; }
.lrc-app .lrc-panel--details > summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; list-style: none; }
.lrc-app .lrc-panel--details > summary::-webkit-details-marker { display: none; }
.lrc-app .lrc-panel--details > summary::before { content: '+'; display: inline-block; width: 1.5rem; font-weight: 700; color: var(--lrc-accent-ink, #AD5200); }
.lrc-app .lrc-panel--details[open] > summary::before { content: '\2212'; }
.lrc-app .lrc-panel--details[open] > summary { margin-bottom: .75rem; }

/* Flota 2026-10-22: color del vehículo en la tarjeta y créditos de fotos con licencia. */
.lrc-app .lrc-vcard__trim { margin: -2px 0 6px; font-size: 14px; color: var(--lrc-muted); }
.lrc-app .lrc-gallery__credits { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--lrc-muted); }
.lrc-app .lrc-gallery__credits a { color: inherit; text-decoration: underline; text-underline-offset: 2px; padding: 13px 0; margin: -13px 0; display: inline-block; }


/* ======================================================================
   REDISEÑO 2026-10-23 — sobrio, fotográfico, mobile first (Paulu Rental).
   Capa final: a igual especificidad gana la última regla. Lee los tokens del
   tema vía `body .lrc-app` (theme.css). Nuevo acá: chips rápidos del
   catálogo (.lrc-quick), estado «disponible para tus fechas» en la tarjeta,
   calendario de disponibilidad (.lrc-cal), selector de días de un extra por
   horas (.lrc-extras__days), y ajustes de jerarquía en la ficha.
   ====================================================================== */
body .lrc-app { padding: 20px 0 80px; }
.lrc-app h1, .lrc-app h2 { letter-spacing: var(--t-track-display, -.025em); }
.lrc-app .lrc-breadcrumb { font-size: 13px; color: var(--lrc-faint); }
.lrc-app .lrc-breadcrumb a { color: var(--lrc-muted); text-decoration: none; }
.lrc-app .lrc-breadcrumb a:hover { color: var(--lrc-navy); text-decoration: underline; }

/* ---- catálogo ---- */
.lrc-app.lrc-search .lrc-search__header { margin: 8px 0 20px; }
.lrc-app.lrc-search .lrc-search__header h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.lrc-app .lrc-filters { border-radius: 20px; padding: 12px; }
.lrc-app .lrc-quick { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--t-gutter, 16px)) 4px; padding: 2px var(--t-gutter, 16px) 6px; scroll-snap-type: x proximity; }
.lrc-app .lrc-quick::-webkit-scrollbar { display: none; }
.lrc-app .lrc-quick__chip { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--lrc-line); background: var(--lrc-surface); color: var(--lrc-ink); font-weight: 700; font-size: 14px; text-decoration: none; transition: border-color .18s ease, background-color .18s ease, color .18s ease; }
.lrc-app .lrc-quick__chip:hover { border-color: var(--lrc-navy); color: var(--lrc-navy); }
.lrc-app .lrc-quick__chip.is-on { background: var(--lrc-navy); border-color: var(--lrc-navy); color: #fff; }
@media ( min-width: 720px ) { .lrc-app .lrc-quick { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; } }
.lrc-app .lrc-search__count { margin: 12px 0 14px; }
.lrc-app .lrc-vcard { border-radius: 24px; }
.lrc-app .lrc-vcard__avail { margin: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--lrc-good); font-weight: 700; font-size: 14px; }
.lrc-app .lrc-vcard__avail .lrc-i { width: 18px; height: 18px; }
.lrc-app .lrc-vcard__reason { font-size: 13px; letter-spacing: .02em; }

/* ---- ficha: jerarquía ---- */
.lrc-app .lrc-vehicle__layout { gap: 32px; }
.lrc-app .lrc-gallery__stage { border-radius: 24px; background: #F3F5F9; }
.lrc-app .lrc-gallery__slide img { background: #F3F5F9; }
.lrc-app .lrc-vehicle__header { margin: 12px 0 20px; }
.lrc-app .lrc-vehicle__title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); letter-spacing: -.03em; }
.lrc-app .lrc-vehicle__trim { font-size: 15px; }
.lrc-app .lrc-specs li { border-radius: 14px; padding: 12px 14px; }
.lrc-app .lrc-panel, .lrc-app .lrc-section { border-radius: 20px; padding: 22px 22px; }
.lrc-app .lrc-panel > h2, .lrc-app .lrc-section > h2, .lrc-app .lrc-section h2.lrc-delivery__title { font-size: 1.0625rem; letter-spacing: .02em; text-transform: uppercase; color: var(--lrc-faint); font-family: var(--lrc-font-body); font-weight: 700; }
.lrc-app .lrc-policies li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--lrc-line); font-size: 15px; }
.lrc-app .lrc-policies li:last-child { border-bottom: 0; }
.lrc-app .lrc-policies__label { color: var(--lrc-muted); }

/* ---- disponibilidad (calendario) ---- */
.lrc-app .lrc-availability__hint { margin: -6px 0 14px; color: var(--lrc-muted); font-size: 15px; }
.lrc-cal { display: grid; gap: 12px; }
.lrc-cal__head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; }
.lrc-cal__nav { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--lrc-line); background: var(--lrc-surface); color: var(--lrc-navy); font-size: 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lrc-cal__nav:hover:not(:disabled) { border-color: var(--lrc-navy); background: var(--lrc-wash); }
.lrc-cal__nav:disabled { opacity: .35; cursor: default; }
.lrc-cal__status { margin: 0; text-align: center; font-size: 14px; font-weight: 700; color: var(--lrc-ink); }
.lrc-cal__status.is-warn { color: var(--lrc-danger); }
.lrc-cal__months { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media ( min-width: 900px ) { .lrc-cal__months { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; } }
.lrc-cal__title { margin: 0 0 8px; text-align: center; font-weight: 800; font-size: 15px; text-transform: capitalize; letter-spacing: .01em; }
.lrc-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.lrc-cal__dow { text-align: center; font-size: 12px; font-weight: 700; color: var(--lrc-faint); text-transform: uppercase; letter-spacing: .06em; padding: 4px 0; }
.lrc-cal__pad { aspect-ratio: 1; }
.lrc-cal__day { position: relative; aspect-ratio: 1; min-height: 44px; width: 100%; border: 1px solid transparent; border-radius: 10px; background: var(--lrc-surface); color: var(--lrc-ink); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.lrc-cal__day:hover:not(:disabled) { border-color: var(--lrc-navy); }
.lrc-cal__day:disabled { cursor: default; color: var(--lrc-faint); }
.lrc-cal__day.is-past { background: transparent; opacity: .45; }
.lrc-cal__day.is-taken { background: repeating-linear-gradient(135deg, #EEF1F6 0 4px, #E3E8F0 4px 8px); color: var(--lrc-faint); text-decoration: line-through; }
.lrc-cal__day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--lrc-accent); transform: translateX(-50%); }
.lrc-cal__day.is-between { background: var(--lrc-wash); color: var(--lrc-navy); border-radius: 0; }
.lrc-cal__day.is-start, .lrc-cal__day.is-end { background: var(--lrc-navy); color: #fff; border-color: var(--lrc-navy); z-index: 1; }
.lrc-cal__day.is-start { border-radius: 10px 0 0 10px; }
.lrc-cal__day.is-end { border-radius: 0 10px 10px 0; }
.lrc-cal__day.is-start.is-end { border-radius: 10px; }
.lrc-cal__day:focus-visible { outline: 3px solid var(--t-focus, var(--lrc-accent)); outline-offset: 1px; z-index: 2; }
.lrc-cal__legend { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; list-style: none; margin: 4px 0 0; padding: 0; font-size: 13px; color: var(--lrc-muted); }
.lrc-cal__legend li { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; }
.lrc-cal__sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--lrc-line); background: var(--lrc-surface); }
.lrc-cal__sw--taken { background: repeating-linear-gradient(135deg, #EEF1F6 0 3px, #E3E8F0 3px 6px); }
.lrc-cal__sw--sel { background: var(--lrc-navy); border-color: var(--lrc-navy); }
.lrc-cal__clear { min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--lrc-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---- tarjeta de reserva ---- */
.lrc-app .lrc-booking-card { border-radius: 24px; padding: 24px; box-shadow: 0 10px 30px rgba(2, 66, 166, .10); }
.lrc-app .lrc-booking-card__price strong { font-size: 2.5rem; color: var(--lrc-ink); }
.lrc-app .lrc-booking-form__req { font-size: 14px; color: var(--lrc-muted); }
.lrc-app .lrc-weekly-deal { border-radius: 12px; }
.lrc-app .lrc-extras { border-radius: 16px; }
.lrc-app .lrc-extras legend { font-weight: 800; }

/* ---- extra por horas: qué días (chips de día) ---- */
.lrc-app .lrc-extras__days { margin: 6px 0 12px 30px; padding: 12px 14px; border: 1px solid var(--lrc-line); border-radius: 12px; background: var(--lrc-bg); min-width: 0; }
.lrc-app .lrc-extras__days[hidden] { display: none; }
.lrc-app .lrc-extras__days legend { padding: 0 6px; font-size: 14px; font-weight: 700; color: var(--lrc-ink); }
.lrc-app .lrc-extras__modes { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; }
.lrc-app .lrc-extras__mode { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 999px; border: 1px solid var(--lrc-line); background: var(--lrc-surface); font-size: 14px; font-weight: 600; cursor: pointer; }
.lrc-app .lrc-extras__mode input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--lrc-navy); }
.lrc-app .lrc-extras__mode:has(input:checked) { border-color: var(--lrc-navy); background: var(--lrc-wash); color: var(--lrc-navy); }
.lrc-app .lrc-extras__daylist { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.lrc-app .lrc-extras__daylist[hidden] { display: none; }
.lrc-app .lrc-extras__day { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--lrc-line); background: var(--lrc-surface); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.lrc-app .lrc-extras__day input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--lrc-navy); flex: 0 0 auto; }
.lrc-app .lrc-extras__day:has(input:checked) { border-color: var(--lrc-navy); background: var(--lrc-navy); color: #fff; }
.lrc-app .lrc-extras__day:has(input:checked) input { accent-color: #fff; }
.lrc-app .lrc-extras__day:focus-within { outline: 3px solid var(--t-focus, var(--lrc-accent)); outline-offset: 1px; }

/* ---- barra fija ---- */
.lrc-stickybar { box-shadow: 0 -10px 30px rgba(2, 66, 166, .12); }
.lrc-stickybar__price strong { color: var(--lrc-ink); }

/* ---- cuenta / reserva: títulos con la misma voz ---- */
.lrc-app.lrc-account h1, .lrc-app.lrc-booking h1 { letter-spacing: -.03em; }

.lrc-app details.lrc-gallery__credits { margin: 8px 0 0; font-size: 13px; color: var(--lrc-faint); }
.lrc-app details.lrc-gallery__credits > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.lrc-app details.lrc-gallery__credits > summary::-webkit-details-marker { display: none; }
.lrc-app details.lrc-gallery__credits p { margin: 0 0 4px; line-height: 1.6; }