/**
 * Panel de filtros del listado.
 *
 * Sigue la columna de filtros de Tractorpool, que el dueño dio como referencia: un panel de
 * fondo tintado, sin franja de color; cada filtro es una etiqueta corta en tinta y UN
 * control blanco a todo el ancho (desplegable o campo); los rangos van en dos campos
 * «Desde / Hasta» lado a lado, y al pie un botón fijo con el total. Nada de listas largas
 * de casillas o enlaces: con ellas la columna medía más de dos pantallas.
 *
 * Colores del sistema visual (diseno.css): acero para lo elegido y el foco, óxido solo en
 * la acción principal.
 */

.search-filter-form .rm-panel {
	overflow: visible;
	border: 0;
	border-radius: var( --rm-radio, 4px ) var( --rm-radio, 4px ) 0 0;
	background: var( --rm-acero-claro ) !important;
	padding: 0 !important;
	color: var( --rm-tinta );
	font-family: var( --rm-fuente );
}

/* -------------------------------------------------------------------------
 * Encabezado: «Filtros» chico y «Limpiar»
 * ---------------------------------------------------------------------- */

/* Motors la arma en `row-reverse` (ícono a la derecha): «Limpiar» quedaba antes del título. */
.rm-panel .sidebar-entry-header {
	display: flex;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: center;
	gap: 10px;
	min-height: 0;
	margin: 0 !important;
	padding: 14px 16px 4px !important;
	border: 0;
	background: transparent !important;
	color: var( --rm-tinta );
}

/* `!important` en el color: Motors pinta de blanco el título de su cabecera (pensado para
   la franja de color) y, sin franja, el título quedaba invisible. */
.rm-panel .sidebar-entry-header .h4 {
	flex: 1;
	margin: 0;
	color: var( --rm-tinta ) !important;
	font-family: var( --rm-fuente );
	font-size: 17px;
	font-stretch: 82%;
	font-weight: 800;
	line-height: 1.2;
}

/* La lupa de Motors sobra: el título ya dice qué es la columna. */
.rm-panel .sidebar-entry-header i {
	display: none;
}

.rm-panel__limpiar {
	padding: 4px 2px;
	color: var( --rm-acero );
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.rm-panel__limpiar:hover,
.rm-panel__limpiar:focus {
	color: var( --rm-tinta );
}

/* -------------------------------------------------------------------------
 * Filtros: etiqueta + un control
 * ---------------------------------------------------------------------- */

.rm-panel__cuerpo {
	padding: 4px 16px 12px;
}

/*
 * `flow-root` contiene los `float` que Motors le pone a sus celdas (`col-md-*`).
 *
 * Sin esto el flotante se escapaba de su sección y el título de la siguiente tenía que
 * fluir alrededor: títulos de una sola palabra medían 43 o 51 px en vez de 16.
 */
.rm-f {
	display: flow-root;
	padding: 7px 0;
}

/* `height` y `line-height` explícitos: dentro del filtro, el tema le fija a los div una
   altura calculada para sus propias cajas, y títulos de una sola palabra medían 43 px
   mientras otros idénticos medían 16. Sin mayúsculas con tracking. */
.rm-f__titulo {
	height: auto !important;
	min-height: 0 !important;
	margin: 0 0 5px;
	padding: 0;
	color: var( --rm-tinta );
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35 !important;
	letter-spacing: 0;
	text-transform: none;
}

/* Motors deja márgenes y rellenos de su propia grilla dentro de cada bloque. */
.rm-f .row,
.rm-f [class*="col-"],
.rm-f .stm-accordion-single-unit,
.rm-f .stm-accordion-content,
.rm-f .stm-accordion-content-wrapper,
.rm-f .stm-price-range-unit {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

/* El acordeón del precio trae 30 × 25 px de relleno propio con más especificidad. */
.rm-f .stm-accordion-content-wrapper {
	padding: 0 !important;
}

/* Motors le deja 16 px de margen inferior a cada campo; acá la separación la da el filtro. */
.rm-f .form-group {
	margin: 0 !important;
}

/* «Buscar por palabras clave» repetía la etiqueta justo debajo de ella. */
.rm-f .form-group > h5 {
	display: none;
}

/* El contenido de los acordeones (el precio) queda siempre visible. */
.rm-f .collapse {
	display: block !important;
	height: auto !important;
	visibility: visible !important;
}

/* -------------------------------------------------------------------------
 * Controles
 *
 * 44 px de alto en todos los campos y en todos los anchos: el dueño pidió que todos los
 * filtros se vean iguales, y con 40 en escritorio y 44 en el teléfono había dos tamaños.
 * El desplegable de Motors (select2, simple y múltiple) se dibuja igual que un campo de
 * texto, con una flecha propia en vez del triángulo gris de la librería.
 * ---------------------------------------------------------------------- */

/* Fondo `!important`: el tema pinta los campos de gris claro y sobre el panel tintado no
   se distinguían del fondo. */
.rm-panel select,
.rm-panel input[ type="text" ],
.rm-panel input[ type="search" ],
.rm-panel input[ type="number" ],
.rm-panel input[ type="numeric" ] {
	background-color: #fff !important;
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var( --rm-linea );
	border-radius: 4px;
	background-color: #fff;
	box-shadow: none;
	color: var( --rm-tinta );
	font-family: var( --rm-fuente );
	font-size: 14px;
	line-height: 42px;
}

/* Los ajustes del widget en Elementor (post 2301) pintan los campos de gris con
   `!important` y un selector de seis clases; la clase repetida alcanza a superarlo sin
   tener que tocar la plantilla. */
.classic-filter-row .search-filter-form .rm-panel.rm-panel.rm-panel .rm-f input[ type="text" ],
.classic-filter-row .search-filter-form .rm-panel.rm-panel.rm-panel .rm-f input[ type="numeric" ] {
	height: 44px !important;
	border: 1px solid var( --rm-linea ) !important;
	border-radius: 4px !important;
	background-color: #fff !important;
	color: var( --rm-tinta ) !important;
}

.rm-panel input::placeholder {
	color: var( --rm-gris );
	opacity: 1;
}

.rm-panel input:focus,
.rm-panel select:focus {
	border-color: var( --rm-acero );
	outline: 2px solid var( --rm-acero );
	outline-offset: 0;
}

.rm-panel .select2-container {
	width: 100% !important;
}

.rm-panel .select2-container .select2-selection--single,
.rm-panel .select2-container .select2-selection--multiple {
	box-sizing: border-box;
	min-height: 44px;
	height: auto;
	border: 1px solid var( --rm-linea ) !important;
	border-radius: 4px !important;
	background-color: #fff !important;
	box-shadow: none !important;
}

.rm-panel .select2-container--open .select2-selection,
.rm-panel .select2-container--focus .select2-selection {
	border-color: var( --rm-acero ) !important;
	outline: 2px solid var( --rm-acero );
}

.rm-panel .select2-selection--single .select2-selection__rendered {
	padding: 0 34px 0 12px !important;
	color: var( --rm-tinta ) !important;
	font-family: var( --rm-fuente );
	font-size: 14px;
	line-height: 42px !important;
}

/* El texto elegido trae su propio fondo gris desde los ajustes del widget (post 2301): sobre
   el campo blanco se veía como una franja. */
.classic-filter-row .rm-panel.rm-panel .select2-selection__rendered {
	background: transparent !important;
}

/* En el teléfono Motors pinta la caja del precio con el azul viejo (#35475a) y 30 × 45 px de
   relleno: quedaba como un bloque oscuro en medio de la hoja. */
.classic-filter-row .search-filter-form .rm-panel.rm-panel .rm-f .stm-filter-listing-directory-price,
.classic-filter-row .search-filter-form .rm-panel.rm-panel .rm-f .stm-accordion-single-unit,
.classic-filter-row .search-filter-form .rm-panel.rm-panel .rm-f .stm-slider-filter-type-unit {
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

/* Marca admite varias: las elegidas quedan como fichas dentro del mismo campo. */
.rm-panel .select2-selection--multiple .select2-selection__rendered {
	display: flex !important;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 !important;
	padding: 7px 34px 7px 8px !important;
}

.rm-panel .select2-selection--multiple .select2-selection__choice {
	margin: 0 !important;
	padding: 2px 8px !important;
	border: 0 !important;
	border-radius: 4px !important;
	background: var( --rm-acero-claro ) !important;
	color: var( --rm-acero ) !important;
	font-size: 13px;
	font-weight: 600;
}

/* `min-height: 0`: la regla de 44 px para el dedo (más abajo) también alcanza a este
   input[type=search] y el campo múltiple crecía a 60 px en el teléfono. */
.rm-panel .select2-selection--multiple .select2-search--inline .select2-search__field {
	min-height: 0 !important;
	height: 28px !important;
	margin: 0 !important;
	padding: 0 4px !important;
	border: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	-webkit-appearance: none;
	appearance: none;
	color: var( --rm-tinta ) !important;
	font-family: var( --rm-fuente );
	font-size: 14px;
	line-height: 28px;
}

/* Con la búsqueda vacía el campo de select2 múltiple deja un «×» de borrar del navegador. */
.rm-panel .select2-search__field::-webkit-search-cancel-button {
	display: none;
}

.rm-panel .select2-selection--multiple .select2-selection__choice__remove {
	margin-right: 4px;
	color: var( --rm-acero ) !important;
	font-weight: 700;
}

.rm-panel .select2-selection--multiple .select2-search__field::placeholder {
	color: var( --rm-tinta );
}

.rm-panel .select2-selection__arrow {
	top: 0 !important;
	right: 0 !important;
	width: 34px !important;
	height: 42px !important;
}

/* Chevrón dibujado con dos bordes: el triángulo de select2 y el ícono de Motors quedan
   ocultos para que no se vean los dos. */
.rm-panel .select2-selection__arrow b,
.rm-panel .select2-selection__arrow i {
	display: none !important;
}

.rm-panel .select2-selection__arrow::after,
.rm-panel .select2-selection--multiple::after {
	content: "";
	position: absolute;
	top: 16px;
	left: 12px;
	width: 7px;
	height: 7px;
	border-right: 2px solid var( --rm-gris );
	border-bottom: 2px solid var( --rm-gris );
	transform: rotate( 45deg );
	pointer-events: none;
}

.rm-panel .select2-selection--multiple {
	position: relative;
}

.rm-panel .select2-selection--multiple::after {
	left: auto;
	right: 14px;
}

/* La lista abierta de select2 se cuelga del <body>, fuera del panel: se acota a las
   páginas que tienen el panel para no cambiar desplegables de otras pantallas. */
body:has( .rm-panel ) .select2-dropdown {
	border-color: var( --rm-linea );
	border-radius: 4px;
	font-family: var( --rm-fuente );
}

body:has( .rm-panel ) .select2-results__option {
	padding: 10px 12px;
	color: var( --rm-tinta ) !important;
	font-family: var( --rm-fuente );
	font-size: 14px;
	line-height: 1.3;
	white-space: pre;
}

/* Los ajustes del widget (post 2301) pintan la opción resaltada de gris claro con
   `!important` y cuatro clases, y con el texto blanco de aquí no se leía: el selector
   repite la cadena de select2 para ganarle. */
body:has( .rm-panel ) .select2-container--default .select2-dropdown.filter-select .select2-results__option--highlighted[ aria-selected ],
body:has( .rm-panel ) .select2-container--default .select2-dropdown.filter-select .select2-results__option--highlighted {
	background: var( --rm-acero ) !important;
	color: #fff !important;
}

/* En el múltiple (marca) no hay sangría que conservar, y Motors escribe cada opción con
   los saltos de línea de su plantilla: con `pre` salía una línea en blanco sobre cada marca. */
body:has( .rm-panel ) .select2-dropdown.stm-multiple-select .select2-results__option {
	white-space: normal;
}

/* Buscador interno de los desplegables simples: el mismo campo que los del panel. */
body:has( .rm-panel ) .select2-dropdown.filter-select .select2-search--dropdown {
	padding: 8px;
}

body:has( .rm-panel ) .select2-dropdown.filter-select .select2-search--dropdown .select2-search__field {
	box-sizing: border-box;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var( --rm-linea ) !important;
	border-radius: 4px;
	background: #fff !important;
	color: var( --rm-tinta );
	font-family: var( --rm-fuente );
	font-size: 14px;
}

body:has( .rm-panel ) .select2-results__option[ aria-selected="true" ]:not( .select2-results__option--highlighted ) {
	background: var( --rm-acero-claro ) !important;
	color: var( --rm-acero ) !important;
}

/* Desde / Hasta, uno al lado del otro con un guion en medio. */
.rm-f--rango .row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.rm-f--rango .row::before,
.rm-f--rango .row::after {
	display: none;
}

.rm-f--rango [class*="col-"] {
	padding: 0 !important;
	flex: 1;
	min-width: 0;
	max-width: none;
}

.rm-f--rango [class*="col-"] + [class*="col-"] {
	position: relative;
}

.rm-f--rango [class*="col-"] + [class*="col-"]::before {
	content: "–";
	position: absolute;
	left: -11px;
	top: 9px;
	color: var( --rm-gris );
}

.rm-f--rango input,
.rm-f--rango .select2-selection__rendered {
	font-variant-numeric: tabular-nums;
}

/* Casilla «Solo avisos con foto». */
.rm-casilla {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 36px;
	margin: 4px 0 0;
	color: var( --rm-tinta );
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

.rm-casilla input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var( --rm-acero );
	cursor: pointer;
}

/*
 * Filtros que no aplican a la categoría elegida.
 *
 * `display: none` y no un borrado: el campo sigue en el formulario, así que si alguien
 * llega con ?traccion=4x4 en la URL, ese valor se conserva al filtrar de nuevo.
 */
.rm-oculto-por-perfil {
	display: none !important;
}

/* «Restablecer» de Motors dentro del panel: ya está «Limpiar» en el encabezado. */
.rm-panel .sidebar-action-units {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * Pie: «Ver N resultados», fijo al fondo mientras se recorre la columna
 * ---------------------------------------------------------------------- */

/* `position: sticky` no funciona dentro de un contenedor con `overflow: hidden`, y el tema
   se lo pone a `.hfeed.site`. `clip` recorta igual pero no crea caja de desplazamiento. */
body:has( .rm-panel ) .hfeed.site {
	overflow: clip;
}

.search-filter-form .sticky-filter-actions {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 12px 16px 14px;
	border-top: 1px solid var( --rm-linea );
	border-radius: 0 0 var( --rm-radio, 4px ) var( --rm-radio, 4px );
	background: var( --rm-acero-claro );
}

.search-filter-form .filter-show-cars {
	flex: 1;
	width: auto;
	margin: 0;
}

/* `body` delante por la misma razón que `.rm-btn`: el kit de Elementor pinta todos los
   <button> con más especificidad que una clase sola. */
body .search-filter-form .show-car-btn {
	width: 100%;
	height: 44px;
	padding: 0 12px;
	border: 0;
	border-radius: 4px;
	background: var( --rm-oxido ) !important;
	box-shadow: none;
	color: #fff !important;
	font-family: var( --rm-fuente );
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	text-transform: none !important;
	cursor: pointer;
}

body .search-filter-form .show-car-btn:hover {
	background: var( --rm-oxido-hover ) !important;
}

/* Escritorio: el pie pasa a ser un botón flotante fijo al fondo de la pantalla, en la
   columna del panel y con su mismo ancho (filtros.js → iniciarFlotante copia la posición
   del formulario en las variables). Se ve siempre mientras el listado está en pantalla,
   sin importar cuánto se haya bajado; al pulsarlo lleva al comienzo de los resultados. */
@media ( min-width: 1025px ) {
	.search-filter-form.rm-flotante .sticky-filter-actions {
		position: fixed;
		bottom: var( --rm-flota-abajo, 16px );
		left: var( --rm-flota-izq, 16px );
		z-index: 90;
		width: var( --rm-flota-ancho, 300px );
		padding: 0;
		border: 0;
		border-radius: 4px;
		background: none;
		transition: opacity 0.15s ease, visibility 0.15s;
	}

	.search-filter-form.rm-flotante .sticky-filter-actions.is-oculto {
		visibility: hidden;
		opacity: 0;
	}

	/* Una sombra corta separa el botón de lo que pasa por debajo al bajar: sin ella se
	   confundía con un campo más del panel. */
	body .search-filter-form.rm-flotante .show-car-btn {
		height: 48px;
		box-shadow: 0 4px 14px rgba( 34, 48, 60, 0.28 );
	}

	/* Espacio al final del panel para que el último filtro no quede bajo el botón. */
	.search-filter-form.rm-flotante {
		padding-bottom: 72px;
	}
}

@media ( min-width: 1025px ) and ( prefers-reduced-motion: reduce ) {
	.search-filter-form.rm-flotante .sticky-filter-actions {
		transition: none;
	}
}

/* En escritorio el «Limpiar» del encabezado alcanza; en el teléfono la hoja lo repite al pie. */
.search-filter-form .reset-btn-mobile {
	display: none;
}

.search-filter-form .reset-btn-mobile .button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var( --rm-acero );
	border-radius: 4px;
	background: #fff;
	box-shadow: none;
	color: var( --rm-acero );
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
}

.search-filter-form .reset-btn-mobile .button:hover {
	background: var( --rm-hormigon );
}

.search-filter-form .reset-btn-mobile .button i {
	font-size: 12px;
}

/* Foco visible con teclado en todo lo que se puede elegir dentro del panel. */
.rm-panel a:focus-visible,
.rm-panel button:focus-visible,
.rm-casilla input:focus-visible,
.search-filter-form .show-car-btn:focus-visible {
	outline: 2px solid var( --rm-acero );
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Filtros activos y contador, arriba de los resultados
 *
 * Vive fuera del panel y fuera de `#listings-result`, en la columna de resultados: es lo
 * primero que se mira después de filtrar, y el panel mide más de mil píxeles.
 * ---------------------------------------------------------------------- */

.rm-activos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 0 0 12px;
}

.rm-activos.rm-cargando {
	opacity: 0.45;
	pointer-events: none;
}

.rm-activos__conteo {
	color: var( --rm-tinta );
	font-size: 20px;
	font-stretch: 82%;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.rm-activos__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* `!important` en fondo y color: el tema pinta TODOS los <button> con su naranja y texto
   blanco, y sin esto la etiqueta queda gris sobre naranja, ilegible. */
.rm-activos__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 4px 8px 4px 10px;
	border: 1px solid var( --rm-acero-claro );
	border-radius: 4px;
	background: var( --rm-acero-claro ) !important;
	box-shadow: none !important;
	color: var( --rm-acero ) !important;
	font-size: 13px;
	line-height: 1.4;
	text-transform: none !important;
	cursor: pointer;
}

.rm-activos__chip:hover,
.rm-activos__chip:focus {
	border-color: var( --rm-acero );
	background: #fff !important;
}

/* El nombre del campo en gris y el valor en tinta: en una fila de etiquetas lo que se
   busca con la vista es el valor, no de qué filtro salió. */
.rm-activos__campo {
	color: var( --rm-gris );
	font-size: 12px;
}

.rm-activos__campo::after {
	content: ":";
}

.rm-activos__valor {
	font-weight: 700;
}

.rm-activos__x {
	color: var( --rm-acero );
	font-size: 16px;
	line-height: 1;
}

.rm-activos__limpiar {
	color: var( --rm-oxido );
	font-size: 13px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.rm-activos__limpiar:hover,
.rm-activos__limpiar:focus {
	color: var( --rm-oxido-hover );
}

@media ( prefers-reduced-motion: reduce ) {
	.rm-panel *,
	.rm-activos * {
		transition: none !important;
	}
}

/* -------------------------------------------------------------------------
 * Teléfono y tableta (hasta 1024 px, el corte de Motors)
 *
 * Motors esconde el panel fuera de la pantalla y lo abre como hoja completa con el botón
 * «Filtrar máquinas». Los resultados quedan arriba y no los tapa nada hasta que el
 * visitante decide filtrar.
 * ---------------------------------------------------------------------- */

/*
 * Botón que abre el panel: secundario con borde acero, ancho completo, sin mayúsculas.
 *
 * `!important` en fondo, borde, sombra y color: el widget de filtros de la página del listado
 * (2301, elemento 00dc825) guarda un fondo acero con un selector de cinco clases. Ganaba ese
 * fondo y aquí el texto también es acero: en el teléfono se veía un rectángulo azul vacío
 * (comentario del dueño, 2026-10-06).
 */
.static-mobile-filter .mobile-search-btn,
.sticky-mobile-filter .mobile-search-btn {
	display: flex;
	align-items: center;
	/* `!important`: Motors lo deja en `space-between` con más especificidad y la lupa
	   quedaba en un extremo del botón y el texto en el otro. */
	justify-content: center !important;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var( --rm-acero ) !important;
	border-radius: 4px;
	background: #fff !important;
	box-shadow: none !important; /* el mismo widget le agrega una sombra óxido de 2 px abajo */
	color: var( --rm-acero ) !important;
	font-family: var( --rm-fuente );
	cursor: pointer;
}

/*
 * Ícono de filtro (tres deslizadores) en vez de la lupa de Font Awesome: la lupa se lee como
 * «buscar», y el botón abre filtros. Va como máscara para tomar el color del texto.
 */
.static-mobile-filter .mobile-search-btn > i,
.sticky-mobile-filter .mobile-search-btn > i {
	display: none;
}

.static-mobile-filter .mobile-search-btn::before,
.sticky-mobile-filter .mobile-search-btn::before {
	content: "";
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h10M17 6h4M3 12h4M11 12h10M3 18h12M19 18h2'/%3E%3Ccircle cx='15' cy='6' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h10M17 6h4M3 12h4M11 12h10M3 18h12M19 18h2'/%3E%3Ccircle cx='15' cy='6' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.static-mobile-filter .mobile-search-btn-text,
.sticky-mobile-filter .mobile-search-btn-text {
	color: var( --rm-acero );
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.sticky-mobile-filter {
	background: #fff;
	border-bottom: 1px solid var( --rm-linea );
}

@media ( max-width: 1024px ) {
	/* Motors abre la hoja con `left: -25px`: quedaban 25 px del panel fuera de la pantalla,
	   con los nombres y los conteos cortados por la izquierda. */
	.classic-filter-row.motors-elementor-widget .search-filter-form.active {
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: 100vw;
	}

	.search-filter-form .sidebar-entry-header-mobile {
		position: sticky;
		top: 0;
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 56px;
		padding: 0 16px;
		border-bottom: 1px solid var( --rm-linea );
		background: #fff;
	}

	.search-filter-form .sidebar-entry-header-mobile .h4 {
		margin: 0;
		color: var( --rm-tinta ) !important;
		font-family: var( --rm-fuente );
		font-size: 19px;
		font-stretch: 82%;
		font-weight: 800;
	}

	/* La cruz de cierre en un blanco de 44 px: la de Motors medía 11 px. */
	.search-filter-form .sidebar-entry-header-mobile .close-btn {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		width: 44px !important;
		height: 44px !important;
		margin-right: -10px;
		cursor: pointer;
	}

	.search-filter-form .sidebar-entry-header-mobile .close-btn-item {
		position: absolute;
		top: 21px;
		left: 12px;
		width: 20px;
		height: 2px;
		background: var( --rm-tinta );
	}

	.search-filter-form .sidebar-entry-header-mobile .close-btn-item:first-child {
		transform: rotate( 45deg );
	}

	.search-filter-form .sidebar-entry-header-mobile .close-btn-item:last-child {
		transform: rotate( -45deg );
	}

	/* En la hoja el panel no necesita esquinas: ya ocupa toda la pantalla. */
	.search-filter-form .rm-panel,
	.search-filter-form .sticky-filter-actions {
		border-radius: 0;
	}

	/* En la hoja el encabezado de escritorio sobra: el de Motors ya dice «Filtros». */
	.search-filter-form .rm-panel .sidebar-entry-header {
		padding-top: 10px !important;
	}

	/* Con el dedo, 44 px de alto: el mínimo cómodo. */
	.rm-panel select,
	.rm-panel input[ type="text" ],
	.rm-panel input[ type="search" ],
	.rm-panel input[ type="number" ],
	.rm-panel input[ type="numeric" ],
	.rm-panel .select2-container .select2-selection--single,
	.rm-panel .select2-container .select2-selection--multiple {
		min-height: 44px;
	}

	.rm-panel .select2-selection--single .select2-selection__rendered {
		line-height: 42px !important;
	}

	.rm-panel .select2-selection__arrow::after {
		top: 16px;
	}

	/* Motors le da a la barra del pie 30 × 45 px de relleno propio en el teléfono: el botón
	   quedaba corrido a la derecha y más angosto que los campos de arriba. */
	.classic-filter-row .search-filter-form .sticky-filter-actions {
		padding: 12px 16px 14px !important;
	}

	.search-filter-form .reset-btn-mobile {
		display: block;
		margin: 0 !important;
	}

	body .search-filter-form .show-car-btn {
		padding: 0 12px !important;
	}
}

/*
 * Sobre 1024 px el panel de filtros ya está a la izquierda: el botón del teléfono sobra. El
 * dueño lo vio en su pantalla de 1536 px como «un rectángulo azul que no sé qué función
 * cumple» (2026-10-06). `!important` porque Motors cambia su visibilidad con estilos en línea
 * desde su JS al filtrar y al hacer scroll.
 */
@media ( min-width: 1025px ) {
	.static-mobile-filter,
	.sticky-mobile-filter {
		display: none !important;
	}
}