/* ═══════════════════════════════════════════════════════════════════════════
 * PANEL DE FILTROS de Mascotas Perdidas — rediseño visual (v3.19.0, 2026-08-18)
 *
 * Referente: «Filtros-1a» (Claude Design, exportado por Miguel). Tokens:
 *   teal #79C8D0 · teal-deep #4AA5AD · teal-soft #BEE3E7 · teal-mist #E8F4F6
 *   teal-ink #1E5D64 · ink #1E2E33 · ink-muted #5A6B70 · ink-faint #8E9A9E
 *   ink-line rgba(30,46,51,.10) · fuente Ubuntu · radios 12/16/20/999
 *
 * SOLO VISUAL: no cambia el HTML de Listeo ni la lógica de los chips
 * (pp-mp-chips.js), del buscador (pp-busqueda-feedback.js) ni del cajón
 * móvil del tema hijo (ppv2-dirfilters-drawer.js), que sigue mandando en la
 * apertura, la cabecera y el pie sticky «Ver N resultados».
 *
 * Alcance: solo cuando el <html> lleva `pp-mp-html` (lo pone pp_mp_body_class;
 * ⚠️ NO se usa body.pp-mp-archivo porque el cajón móvil del tema hijo saca el
 * sidebar del <body> y lo cuelga de <html> —.pp-dirfilters-host— y ahí
 * body ya no es su ancestro: las reglas no aplicaban. Medido.)
 * El Directorio no cambia.
 *
 * Orden de los bloques según el referente:
 *   Buscar por texto → Zona de búsqueda (ubicación + radio) → Filtros activos
 *   → Situación → ¿Qué buscas? → Sexo → Tamaño → Color → Edad | Raza
 * Los bloques de Listeo salen en otro orden (ubicación y radio van después
 * del color); se reordenan con `order` en un contenedor flex. Cada bloque
 * tiene su id (#listeo-search-form_<nombre>), así que no hace falta JS.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 0. Fuente y base del panel ─────────────────────────────────────────── */
html.pp-mp-html .full-page-sidebar,
html.pp-mp-html .full-page-sidebar input,
html.pp-mp-html .full-page-sidebar select,
html.pp-mp-html .full-page-sidebar button {
	font-family: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: #1E2E33;
}
html.pp-mp-html #listeo_core-search-form {
	display: flex;
	/* la direccion se define en la seccion 7 (fila con wrap, para Edad | Raza) */
}

/* ─── 1. Orden de los bloques (referente) ────────────────────────────────── */
/* ⚠️ Especificidad: la generica lleva id+clase (#form > .row) y las de cada
   bloque llevaban SOLO un id → ganaba la generica y todo quedaba en 12 (medido).
   Por eso cada bloque lleva TAMBIEN el id del form: dos ids > id+clase. */
html.pp-mp-html #listeo_core-search-form > .row.with-forms { order: 12; }
html.pp-mp-html #listeo_core-search-form .pp-buscando-banda            { order: 0 !important; }
html.pp-mp-html #listeo_core-search-form #listeo-search-form_keyword_search                     { order: 1; }
html.pp-mp-html #listeo_core-search-form #listeo-search-form_location_search                    { order: 2; }
html.pp-mp-html #listeo_core-search-form #listeo-search-form_search_radius                      { order: 3; }
html.pp-mp-html #listeo_core-search-form .pp-activos                   { order: 4 !important; }
html.pp-mp-html #listeo_core-search-form #listeo-search-form_tax-mascotas-perdidas_category     { order: 5; }
/* v3.20.0: «¿Dónde está?» solo aplica a encontradas: va AL FINAL (Miguel) y pp-mp-panel.js lo oculta salvo con «Encontradas» */
html.pp-mp-html #listeo_core-search-form #listeo-search-form__donde_esta                        { order: 12; }
html.pp-mp-html #listeo_core-search-form #listeo-search-form__donde_esta.pp-donde-oculto        { display: none !important; }
html.pp-mp-html #listeo_core-search-form #listeo-search-form__especie                           { order: 6; }
html.pp-mp-html #listeo_core-search-form #listeo-search-form__sexo                              { order: 7; }
html.pp-mp-html #listeo_core-search-form #listeo-search-form__tamano                            { order: 8; }
html.pp-mp-html #listeo_core-search-form #listeo-search-form__color                             { order: 9; }
html.pp-mp-html #listeo_core-search-form #listeo-search-form__raza                              { order: 11; }

/* ─── 2. Títulos de sección: 11px, mayúsculas, teal-ink ──────────────────── */
html.pp-mp-html .pp-chips__titulo {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: #1E5D64;
	margin: 0 0 10px;
	flex-basis: 100%;
}
html.pp-mp-html .pp-chips { gap: 8px; margin: 0 0 22px; }

/* ─── 3. Chips: píldora 999, borde 1.5, teal al activarse ────────────────── */
html.pp-mp-html .pp-chip {
	padding: 9px 14px;
	border: 1.5px solid rgba(30,46,51,.14);
	background: #fff;
	color: #1E2E33;
	font-size: 14.5px;
	font-weight: 500;
	gap: 7px;
	transition: all .22s cubic-bezier(.2,.8,.2,1);
}
html.pp-mp-html .pp-chip:hover { border-color: #79C8D0; }
html.pp-mp-html .pp-chip.is-activo {
	background: #79C8D0;
	border-color: #79C8D0;
	color: #12363A;
	font-weight: 500;
}
html.pp-mp-html .pp-chip__n {
	font-size: 12px;
	font-weight: 700;
	padding: 1px 7px;
	background: #E8F4F6;
	color: #5A6B70;
}
html.pp-mp-html .pp-chip.is-activo .pp-chip__n { background: rgba(255,255,255,.60); color: #12363A; }
/* Sexo y tamaño un pelo más compactos, como en el referente */
html.pp-mp-html .pp-chips[data-grupo="_sexo"] .pp-chip,
html.pp-mp-html .pp-chips[data-grupo="_tamano"] .pp-chip { padding: 8px 12px; font-size: 14px; gap: 6px; }
html.pp-mp-html .pp-chips[data-grupo="_sexo"] .pp-chip__n { font-size: 11.5px; padding: 1px 6px; }
/* Color: la muestra a la izquierda, 16px */
html.pp-mp-html .pp-chips[data-grupo="_color"] .pp-chip { padding: 7px 13px 7px 9px; font-size: 14px; }
html.pp-mp-html .pp-chip__color { width: 16px; height: 16px; border-color: rgba(30,46,51,.20); }
/* El chip «Otro 0» de especie lo oculta pp-mp-panel.js mientras su conteo sea 0. */

/* ─── 4. Buscar por texto: 46px, radio 12, icono lupa a la izquierda ─────── */
html.pp-mp-html #listeo-search-form_keyword_search { margin: 0 0 12px; }
html.pp-mp-html #listeo-search-form_keyword_search input[type="text"] {
	height: 46px !important;
	padding: 0 14px 0 38px !important;
	border: 1.5px solid rgba(30,46,51,.14) !important;
	border-radius: 12px !important;
	font-size: 14.5px;
	background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%238E9A9E' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") no-repeat 13px 50%;
	box-shadow: none;
}
html.pp-mp-html #listeo-search-form_keyword_search input[type="text"]:focus { border-color: #79C8D0; }
html.pp-mp-html #listeo-search-form_keyword_search input::placeholder { color: #8E9A9E; }
/* Listeo pinta su propio icono de lupa dentro del campo; el nuestro va en el fondo */
html.pp-mp-html #listeo-search-form_keyword_search .input-with-icon i { display: none; }

/* ─── 5. ZONA DE BÚSQUEDA: ubicación + radio en una tarjeta teal-mist ────── */
/* Los dos bloques de Listeo son hermanos; se fusionan visualmente: el de
   ubicación pone la parte de arriba de la tarjeta y el de radio la de abajo. */
html.pp-mp-html #listeo-search-form_location_search {
	background: #E8F4F6;
	border: 1px solid #BEE3E7;
	border-bottom: 0;
	border-radius: 16px 16px 0 0;
	position: relative;
}
/* OJO: el tema hijo fuerza `.full-page-sidebar #listeo_core-search-form > .row.with-forms
   { margin-bottom: 8px !important }` y ganaba por especificidad: entre la mitad de
   arriba de la tarjeta y la de abajo quedaba una FRANJA BLANCA de 8px que la partia
   en dos (Miguel, 2026-08-19). Se le gana con DOS ids en la cadena. Y el padding va
   aqui por la misma razon: la seccion 8 deja los bloques a padding lateral 0. */
html.pp-mp-html .full-page-sidebar #listeo_core-search-form > #listeo-search-form_location_search {
	padding: 14px 14px 0 !important;
	margin: 0 !important;
}
html.pp-mp-html #listeo-search-form_location_search::before {
	content: 'Zona de búsqueda';
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: #1E5D64;
	margin-bottom: 10px;
}
/* Aclaracion de QUE ubicacion se pide (Miguel, 2026-08-19). Va pegada al titulo
   de la seccion, no al campo, porque explica el sentido del bloque entero.
   OJO: estuvo un rato como ::before del .input-with-icon.location y eso
   DESCOLOCO EL MARCADOR: el icono del campo va en absoluto respecto a ese
   contenedor, asi que al meterle una linea de texto dentro se salia por arriba.
   Ahora es un elemento propio, hermano del campo, insertado por pp-mp-panel.js:
   el contenedor del input recupera su altura y el icono vuelve a su sitio. */
html.pp-mp-html #listeo-search-form_location_search .input-with-icon.location { margin: 0; }
html.pp-mp-html .pp-zona-nota {
	display: block;
	margin: -4px 0 12px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.35;
	color: #5A6B70;
	letter-spacing: 0;
	text-transform: none;
}
html.pp-mp-html #location_search {
	height: 46px !important;
	padding: 0 40px 0 14px !important;
	border: 1.5px solid rgba(30,46,51,.12) !important;
	border-radius: 12px !important;
	background: #fff !important;
	font-size: 14.5px;
	font-weight: 500;
	box-shadow: none !important;
}
html.pp-mp-html #location_search:focus { border-color: #79C8D0 !important; }
html.pp-mp-html #listeo-search-form_location_search .input-with-icon.location i { color: #4AA5AD; }
/* 18px: a 7 y a 12 la pista seguia leyendose como parte del propio campo
   (Miguel lo pidio dos veces, 2026-08-19). */
/* clear: la pista es hermana de un .col-md-12, y Bootstrap 3 flota esas
   columnas: sin limpiar el flotado se subia al costado del campo en vez de
   ponerse debajo (y=295 contra y=287 del campo, medido). Se notaba poco hasta
   que la aclaracion hizo mas alto el contenedor. */
html.pp-mp-html .pp-pista-ubicacion {
	clear: both;
	display: block;
	width: 100%;
	font-size: 12.5px;
	color: #5A6B70;
	/* El aire va en PADDING y no en margen: tras `clear` el margen superior se
	   colapsa contra el flotado y la separacion medida quedaba en 0px.
	   10 arriba y 20 abajo A PROPOSITO: la pista explica el CAMPO, asi que tiene
	   que leerse pegada a el y no a medio camino del kilometraje (Miguel). */
	margin: 0;
	padding-top: 10px;
	padding-bottom: 20px;
}
html.pp-mp-html .pp-pista-ubicacion.pp-pista-aviso { margin-top: 8px; }

html.pp-mp-html .full-page-sidebar #listeo-search-form_search_radius.row.with-forms,
html.pp-mp-html #listeo-search-form_search_radius {
	/* El tema hijo: .full-page-sidebar #…_search_radius.row.with-forms {background !important}.
	   Para ganarle: misma cadena + html.pp-mp-html delante, y !important. */
	background: #E8F4F6 !important;
	border: 1px solid #BEE3E7 !important;
	border-top: 0 !important;
	border-radius: 0 0 16px 16px !important;
	padding: 12px 14px 16px !important;
	margin: 0 0 14px !important;
}
/* El bloque de radio de Listeo es un panel-dropdown con: <a>título</a> + slider + botón Desactivar */
html.pp-mp-html #listeo-search-form_search_radius .panel-dropdown { border: 0; background: transparent; padding: 0; margin: 0; }
html.pp-mp-html #listeo-search-form_search_radius .panel-dropdown > a { display: none; } /* «Amplitud radio búsqueda» va en la línea del km */
html.pp-mp-html #listeo-search-form_search_radius .panel-dropdown-content { display: block !important; padding: 0; box-shadow: none; border: 0; background: transparent; position: static; opacity: 1; visibility: visible; }
/* Fila «10 km  a la redonda  ······  Desactivar radio» */
html.pp-mp-html #listeo-search-form_search_radius .range-output,
html.pp-mp-html #listeo-search-form_search_radius .range-slider-value,
html.pp-mp-html #listeo-search-form_search_radius .slider-value {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: #1E2E33;
}
html.pp-mp-html #listeo-search-form_search_radius .range-output::after,
html.pp-mp-html #listeo-search-form_search_radius .slider-value::after {
	/* La unidad importa: un "10 a la redonda" no dice nada. El sitio trabaja en
	   kilometros (opcion listeo_radius_unit = km), y el numero que pinta Listeo
	   en .range-output viene pelado, sin unidad. */
	content: ' km a la redonda';
	font-size: 13px;
	font-weight: 400;
	color: #5A6B70;
	letter-spacing: 0;
}
/* La linea del kilometraje: «10 km a la redonda» a la izquierda y «Desactivar
   radio» a la derecha, como en el referente (Miguel, 2026-08-19).
   Estructura real de Listeo, comprobada en el DOM (no hay .panel-buttons aqui):
       .col-md-12.margin-top-30      <- ya viene con position: relative
         .range-slider
           input.distance-radius     (oculto)
           .range-output             <- el numero
           i.data-radius-title       <- «Amplitud radio busqueda»
           .rangeslider              <- el deslizador
         span.panel-disable          <- «Desactivar Radio», hermano del anterior
   Como el enlace NO es hermano del numero, no se pueden alinear con flex: se
   coloca en absoluto sobre la primera linea. */
html.pp-mp-html #listeo-search-form_search_radius .data-radius-title {
	/* El rotulo sobra: «10 km a la redonda» ya dice lo que mide el deslizador. */
	display: none !important;
}
html.pp-mp-html #listeo-search-form_search_radius .col-md-12 { position: relative; }
html.pp-mp-html #listeo-search-form_search_radius .range-output {
	/* Deja sitio al enlace de la derecha para que no se solapen */
	padding-right: 110px;
}
/* El tema hijo lo clava con `.full-page-sidebar #listeo_core-search-form
   .panel-disable { position: static !important; top: 12px !important }`: hacen
   falta !important Y un id mas para ganarle (medido: sin esto se queda abajo). */
html.pp-mp-html .full-page-sidebar #listeo_core-search-form #listeo-search-form_search_radius .panel-disable {
	position: absolute !important;
	top: 2px !important;
	right: 0 !important;
	left: auto !important;
	bottom: auto !important;
	width: auto !important;
	max-width: 104px;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	text-align: right;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
	color: #4AA5AD;
	cursor: pointer;
	text-transform: none;
	letter-spacing: 0;
}
/* El tema pinta de blanco el hover de .panel-disable (es un boton para el):
   sobre el fondo teal-mist el texto desaparecia. Misma cadena de ids que la
   regla de arriba, y !important, para ganarle. */
html.pp-mp-html .full-page-sidebar #listeo_core-search-form #listeo-search-form_search_radius .panel-disable:hover,
html.pp-mp-html .full-page-sidebar #listeo_core-search-form #listeo-search-form_search_radius .panel-disable:focus {
	color: #1E5D64 !important;
	background: none !important;
	text-decoration: underline;
}
/* El deslizador */
html.pp-mp-html #listeo-search-form_search_radius .slider.slider-horizontal { width: 100% !important; margin-top: 12px; }
html.pp-mp-html #listeo-search-form_search_radius .slider-track { height: 6px; border-radius: 999px; background: #BEE3E7; box-shadow: none; }
html.pp-mp-html #listeo-search-form_search_radius .slider-selection { background: #79C8D0; box-shadow: none; }
html.pp-mp-html #listeo-search-form_search_radius .slider-handle {
	width: 22px; height: 22px; margin-top: -8px;
	background: #fff; border: 2.5px solid #4AA5AD;
	box-shadow: 0 2px 6px rgba(30,46,51,.18);
	background-image: none;
}

/* ─── 6. Filtros activos (banda teal-mist con píldoras quitables) ────────── */
html.pp-mp-html .pp-activos {
	display: none;
	flex-wrap: wrap;
	gap: 7px;
	align-items: center;
	background: #E8F4F6;
	border-bottom: 1px solid rgba(30,46,51,.08);
	margin: 0 -20px 16px;
	padding: 12px 20px;
}
html.pp-mp-html .pp-activos.is-visible { display: flex; }
html.pp-mp-html .pp-activos__titulo {
	flex-basis: 100%;
	font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #1E5D64;
}
html.pp-mp-html .pp-activos__pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 8px 5px 11px;
	border-radius: 999px;
	border: 1px solid rgba(30,46,51,.10);
	background: #fff; color: #1E2E33;
	font-size: 13px; font-weight: 500;
	cursor: pointer;
	font-family: inherit;
}
html.pp-mp-html .pp-activos__pill::after {
	content: '×'; font-size: 15px; line-height: 1; color: #5A6B70; margin-left: 2px;
}
html.pp-mp-html .pp-activos__pill:hover { border-color: #79C8D0; }

/* --- 7. Raza: un select a todo el ancho, 44px, radio 12 ------------------ */
/* Compartia renglon con Edad hasta la v3.19.2. Al retirarse el filtro de edad,
   Raza se extiende sola de borde a borde (Miguel, 2026-08-19).
   El form sigue en flex-wrap row: lo dejo asi por si algun dia vuelven a
   convivir dos campos en una linea, y porque los demas bloques ya piden 100%. */
html.pp-mp-html #listeo_core-search-form { flex-direction: row; flex-wrap: wrap; }
html.pp-mp-html #listeo_core-search-form > * { flex: 0 0 100%; max-width: 100%; }
html.pp-mp-html #listeo_core-search-form #listeo-search-form__raza {
	flex: 0 0 100%;
	max-width: 100%;
	margin: 0 0 20px;
}
html.pp-mp-html #listeo-search-form__raza::before {
	content: 'Raza';
	display: block;
	font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: #1E5D64;
	margin-bottom: 10px;
}
html.pp-mp-html #listeo-search-form__raza .panel-dropdown > a { display: none; }
html.pp-mp-html #listeo-search-form__raza .bootstrap-select > .dropdown-toggle {
	height: 44px !important;
	padding: 0 34px 0 13px !important;
	border: 1.5px solid rgba(30,46,51,.14) !important;
	border-radius: 12px !important;
	background: #fff !important;
	font-size: 14.5px !important;
	font-weight: 500 !important;
	color: #1E2E33 !important;
	box-shadow: none !important;
	line-height: 42px !important;
}
html.pp-mp-html #listeo-search-form__raza .bootstrap-select { width: 100% !important; }

/* ─── 8. Todos los bloques: sin el marco de Listeo ───────────────────────── */
html.pp-mp-html #listeo_core-search-form .row.with-forms { margin-left: 0; margin-right: 0; }
html.pp-mp-html #listeo_core-search-form .row.with-forms > [class*="col-"] { padding-left: 0; padding-right: 0; }
/* Anchos homologados (Miguel, 2026-08-19): Listeo da a cada bloque del formulario
   `padding: 0 10px`, asi que el campo «Que estas buscando» y los chips quedaban 20px
   MAS ESTRECHOS que la tarjeta de zona de busqueda, que pinta su propio fondo de
   borde a borde. Al quitar ese padding todos los elementos arrancan y terminan en la
   misma vertical. Ubicacion y radio conservan el suyo: ahi es relleno INTERIOR de la
   tarjeta y sus reglas llevan mas ids, asi que no las pisa. */
html.pp-mp-html #listeo_core-search-form > .row.with-forms { padding-left: 0 !important; padding-right: 0 !important; }

/* ─── 9. Cabecera y pie del cajón móvil (los pinta el tema hijo) ─────────── */
@media (max-width: 991px) {
	/* Cabecera del cajon: titulo a la izquierda y boton redondo a la derecha */
	html.pp-mp-html .pp-dirfilters-head {
		align-items: center !important;
		padding: 20px 20px 14px !important;
		border-bottom: 1px solid rgba(30,46,51,.08) !important;
	}
	html.pp-mp-html .pp-dirfilters-head > span {
		display: block;
		font-size: 0; /* oculta el «Filtros» del tema hijo sin tocar su JS */
		color: #1E2E33;
	}
	html.pp-mp-html .pp-dirfilters-head > span::before {
		content: 'Filtrar en Mascotas Perdidas';
		display: block;
		font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2;
	}
	html.pp-mp-html .pp-dirfilters-close {
		width: 34px !important; height: 34px !important;
		background: #E8F4F6 !important; color: #1E5D64 !important;
		font-size: 18px !important;
	}
	html.pp-mp-html .pp-dirfilters-close:hover { background: #BEE3E7 !important; }

	/* Pie fijo abajo, sobre los resultados: «Ver N peluditos» + Limpiar */
	html.pp-mp-html .pp-dirfilters-foot {
		padding: 14px 20px calc(18px + env(safe-area-inset-bottom)) !important;
		border-top: 1px solid rgba(30,46,51,.08) !important;
		background: #fff !important;
	}
	html.pp-mp-html .pp-dirfilters-count { display: none !important; } /* el conteo va dentro del botón */
	html.pp-mp-html .pp-dirfilters-apply {
		height: 50px;
		border-radius: 14px !important;
		background: #79C8D0 !important;
		color: #12363A !important;
		font-size: 16px !important;
		font-weight: 700 !important;
		box-shadow: 0 10px 24px rgba(121,200,208,.40);
		transition: all .22s cubic-bezier(.2,.8,.2,1);
	}
	html.pp-mp-html .pp-dirfilters-apply:hover { background: #4AA5AD !important; color: #fff !important; }
	html.pp-mp-html .pp-limpiar {
		display: block; width: 100%; height: 38px; margin-top: 8px;
		border: 0; background: none;
		font-size: 14px; font-weight: 500; color: #5A6B70; cursor: pointer; font-family: inherit;
	}
	html.pp-mp-html .pp-limpiar:hover { color: #1E2E33; }
	/* La banda de activos, tambien de borde a borde. En el cajon el sangrado es
	   de 20px (aqui el inner no tiene padding lateral, solo el sidebar), y hay
	   que liberar la base flex por lo mismo que en escritorio: un margen
	   negativo no ensancha un item con `flex: 0 0 100%`. */
	html.pp-mp-html #listeo_core-search-form > .pp-activos {
		flex: 0 0 auto;
		max-width: none;
		width: calc(100% + 40px);
		margin-left: -20px;
		margin-right: -20px;
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* --- 10. Escritorio: el panel, sin recuadro y con cabecera --------------- */
@media (min-width: 992px) {
	/* Miguel, 2026-08-19: el formulario vivia dentro de una tarjeta con borde,
	   radio y sombra DENTRO del panel, que ya es una superficie blanca. Un marco
	   dentro de otro marco. Se retira y el panel entero pasa a ser la superficie. */
	html.pp-mp-html .full-page-sidebar .listing-widget.listeo_core {
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 0;
	}
	/* Fondo blanco de borde a borde. Listeo pinta el panel de #FAFAFA con
	   `.full-page-container.full-page-jobs .full-page-sidebar` (tres clases), asi
	   que hay que igualar esa cadena para ganarle: con `html.pp-mp-html
	   .full-page-sidebar` a secas la regla se cargaba y NO se aplicaba (medido). */
	html.pp-mp-html .full-page-container.full-page-jobs .full-page-sidebar,
	html.pp-mp-html .full-page-container.full-page-jobs .full-page-sidebar .full-page-sidebar-inner { background: #fff; }

	/* Cabecera del panel: el titulo a la izquierda y la X a la derecha.
	   El titulo es el h3 del widget, renombrado en PHP (pp_mp_titulo_panel); la X
	   es .pp-dirfilters-close-desktop, que el tema hijo ya coloca en absoluto a
	   25px del borde. Su centro cae a 42px y el del titulo a 41,5: quedan a la
	   misma altura sin tocar la posicion de la X. El reservado de 44px a la
	   derecha evita que un titulo largo se meta debajo del boton. */
	html.pp-mp-html .full-page-sidebar .listing-widget.listeo_core > .widget-title {
		display: block;
		margin: 0 0 20px !important;
		padding: 0 44px 14px 0;
		border-bottom: 1px solid rgba(30,46,51,.08);
		/* 17px y no 19: medido con canvas, el texto "Filtrar en Mascotas Perdidas"
		   ocupa 230px de los 238 disponibles (282 del panel menos los 44 que reserva
		   la X). A 18px son 244 y se parte en dos lineas. Si en un panel mas estrecho
		   se partiera igual, la X sigue alineada con la PRIMERA linea. */
		font-size: 17px;
		font-weight: 700;
		letter-spacing: -.01em;
		line-height: 1.2;
		color: #1E2E33;
	}
	/* La banda de filtros activos cruza el panel de borde a borde, como en el
	   referente. Tres cosas hicieron falta, las tres medidas y no supuestas:
	     1. El sangrado NO es simetrico: 30px a la izquierda y 23 a la derecha.
	        Sale de que el formulario (282px) es 7px mas ancho que el area de
	        contenido del .full-page-sidebar-inner (335 - 60 de padding = 275).
	        Es asimetria del tema, no del ancho de ventana.
	     2. Se para en el borde del inner (335) y no en el del sidebar (350):
	        esos 15px son la barra de desplazamiento del panel.
	     3. Un margen negativo NO ensancha un flex item con `flex: 0 0 100%` y
	        `max-width: 100%`, que es lo que la seccion 7 pone a todos los hijos
	        del formulario; y para pisar esa regla hace falta el ID en la cadena,
	        porque `#listeo_core-search-form > *` gana a `.pp-activos` a secas.
	        Con las dos cosas juntas la banda pasa de 282px a 335. */
	html.pp-mp-html #listeo_core-search-form > .pp-activos {
		flex: 0 0 auto;
		max-width: none;
		width: calc(100% + 53px);
		margin-left: -30px;
		margin-right: -23px;
		padding-left: 30px;
		padding-right: 23px;
	}
	html.pp-mp-html .pp-limpiar {
		display: block; width: 100%; height: 38px; margin-top: 4px;
		border: 0; background: none;
		font-size: 14px; font-weight: 500; color: #5A6B70; cursor: pointer; font-family: inherit;
	}
}
/* En MOVIL el titulo lo pone la cabecera del cajon (seccion 9): el h3 del widget
   sobra y ademas heredaba el texto «Filtrar en Directorio» del tema hijo. */
@media (max-width: 991px) {
	html.pp-mp-html .full-page-sidebar .listing-widget.listeo_core > .widget-title { display: none; }
}

/* === SCROLL HORIZONTAL EN MOVIL (segundo intento, v3.19.5) =================
 * Miguel lo sigue viendo en su iPhone despues del primer arreglo, y en Chrome
 * no se reproduce: `document.documentElement.scrollWidth` mide exactamente el
 * ancho de la pantalla. O sea que no es un elemento cualquiera desbordando,
 * porque entonces tambien se veria aqui: es algo que Safari iOS trata distinto.
 *
 * Dos causas identificadas midiendo, no probando a ciegas:
 *
 * 1. EL MAPA. `.split-map` mide 375px por fuera pero 589 por dentro: 214px de
 *    desbordamiento retenidos UNICAMENTE por un `overflow: hidden`. Ese es el
 *    caso clasico que Safari iOS no respeta en contenedores con transform
 *    interno, y Leaflet mueve sus capas justamente con transform. `contain:
 *    paint` lo recorta de verdad, por pintado y no por scroll.
 *
 * 2. MI PROPIO `max-width: 100vw` DEL PRIMER INTENTO. En iOS `100vw` puede ser
 *    MAS ancho que el area visible, asi que ese tope no topaba nada: autorizaba
 *    justo el desbordamiento que pretendia cerrar. Pasa a `100%`.
 *
 * Se anade ademas `overflow-x: clip`, que a diferencia de `hidden` no crea un
 * contenedor desplazable —ni por gesto ni por programa— y no arrastra el fallo
 * de iOS. Va DESPUES de `hidden` para que los navegadores que no lo entiendan
 * se queden con el comportamiento anterior en vez de con nada.
 *
 * Solo el archivo de Mascotas Perdidas, solo movil. */
@media (max-width: 991px) {
	html.pp-mp-html, html.pp-mp-html body { overflow-x: hidden !important; max-width: 100% !important; }
	/* `clip` TAMBIEN con !important: sin el, el `hidden !important` de la linea
	   de arriba le ganaba y esta declaracion no llegaba a aplicarse (medido).
	   Los navegadores que no entienden `clip` descartan solo esta linea y se
	   quedan con `hidden`, que es justo el respaldo que se busca. */
	html.pp-mp-html, html.pp-mp-html body { overflow-x: clip !important; }
	html.pp-mp-html .full-page-container,
	html.pp-mp-html .fs-inner-container,
	html.pp-mp-html .fs-content,
	html.pp-mp-html .container,
	html.pp-mp-html #listeo-listings-container,
	html.pp-mp-html .listings-container { overflow-x: hidden !important; max-width: 100% !important; }
	/* El .full-page-sidebar-inner de Listeo mide calc(100vw - 10px): dentro del cajon debe ser el 100% del cajon */
	html.pp-mp-html .full-page-sidebar .full-page-sidebar-inner { width: 100% !important; max-width: 100% !important; }
	/* La barra de categorias con su transform no debe empujar */
	html.pp-mp-html .slider-container { overflow: hidden !important; }

	/* El mapa: los 214px que le sobran por dentro se recortan de verdad */
	html.pp-mp-html .split-map,
	html.pp-mp-html .mobile-map-collapsible,
	html.pp-mp-html .leaflet-container {
		max-width: 100% !important;
		overflow: hidden !important;
		contain: paint;
	}

	/* El panel de filtros es `position: fixed`, y en iOS lo fijo NO lo recorta
	   el `overflow` de ningun ancestro: mientras esta cerrado se le quita todo
	   ancho para que no pueda arrastrar la pagina. */
	html.pp-mp-html:not(.pp-dirfilters-open) .pp-dirfilters-host { width: 0 !important; overflow: clip; }
}

/* «Ordenar por» no se usa en Mascotas Perdidas: aquí ordena la fecha y punto.
 * El CSS solo evita el parpadeo hasta que corre el JS; quien lo quita de verdad
 * es pp-mp-panel.js, porque escondido el <select> seguiría enviando
 * `listing_order=featured` en cada búsqueda. */
html.pp-mp-html .sort-by { display: none !important; }

/* Paginacion inerte mientras hay una busqueda en vuelo: pulsar «2» a medias
 * pedia una pagina que con los filtros nuevos ya no existia, y el servidor
 * respondia sin resultados. Ver paginasFantasma() en pp-mp-panel.js. */
html.pp-mp-html .pagination.pp-cargando { pointer-events: none; opacity: .45; transition: opacity .15s ease; }