/* ==========================================================================
   REINPE - FILTROS DEL CATÁLOGO EN MÓVIL
   --------------------------------------------------------------------------
   En pantallas estrechas los filtros se recogen en un panel que se abre con un
   botón flotante. El botón y el panel los pinta PHP en el pie; el JavaScript
   solo mueve los filtros dentro y los devuelve a su sitio al ensanchar.

   Se mueve el mismo nodo, no una copia: así JetSmartFilters conserva sus
   escuchas de eventos, el Indexer y los estilos que Elementor genera para cada
   widget. Por eso aquí NO se toca el relleno de los filtros: el que tienen es
   el que se configuró en la plantilla.

   Los !important y los selectores con id no son por gusto: Astra pinta de su
   color global cualquier <button> de la página, y sin esto el panel se llenaba
   de cajas azules.
   ========================================================================== */

:root {
	--reinpe-filtros-texto: #0B1B33;
	--reinpe-filtros-suave: #6A7484;
	--reinpe-filtros-linea: rgba(11, 27, 51, 0.10);
	--reinpe-filtros-fondo: #FFFFFF;
}

.reinpe-filtros-boton,
.reinpe-filtros-modal {
	display: none;
}

@media (max-width: 767px) {

	/* ----------------------------------------------------------------------
	   Botón flotante
	   ------------------------------------------------------------------- */
	button#reinpe-filtros-boton {
		position: fixed;
		left: 50%;
		bottom: calc(16px + env(safe-area-inset-bottom));
		z-index: 9998;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: auto;
		height: auto;
		padding: 10px 18px !important;
		border: 1px solid var(--reinpe-filtros-linea) !important;
		border-radius: 40px !important;
		background: var(--reinpe-filtros-fondo) !important;
		background-image: none !important;
		color: var(--reinpe-filtros-texto) !important;
		font-family: inherit;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.2;
		text-transform: none;
		cursor: pointer;
		transform: translateX(-50%);
		box-shadow: 0 4px 16px rgba(11, 27, 51, 0.12) !important;
		-webkit-appearance: none;
		appearance: none;
	}

	button#reinpe-filtros-boton svg {
		width: 17px !important;
		height: 17px !important;
		flex: 0 0 auto;
		display: block !important;
		fill: none !important;
		stroke: currentColor !important;
	}

	button#reinpe-filtros-boton .reinpe-filtros-cuenta {
		display: none;
		min-width: 18px;
		padding: 0 6px;
		border-radius: 20px;
		background: var(--reinpe-filtros-texto);
		color: #fff;
		font-size: 11px;
		font-weight: 600;
		line-height: 18px;
	}

	button#reinpe-filtros-boton.tiene-activos .reinpe-filtros-cuenta {
		display: inline-block;
	}

	/* ----------------------------------------------------------------------
	   Panel
	   ------------------------------------------------------------------- */
	#reinpe-filtros-modal {
		position: fixed;
		inset: 0;
		z-index: 9999;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		background: rgba(11, 27, 51, 0.35);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.22s ease, visibility 0.22s ease;
	}

	#reinpe-filtros-modal.abierto {
		opacity: 1;
		visibility: visible;
	}

	#reinpe-filtros-modal .reinpe-filtros-panel {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-height: 86vh;
		background: var(--reinpe-filtros-fondo);
		border-radius: 16px 16px 0 0;
		transform: translateY(100%);
		transition: transform 0.26s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	#reinpe-filtros-modal.abierto .reinpe-filtros-panel {
		transform: translateY(0);
	}

	#reinpe-filtros-modal .reinpe-filtros-cabecera {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px 18px 10px;
	}

	#reinpe-filtros-modal .reinpe-filtros-titulo {
		margin: 0;
		font-family: inherit;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.2;
		color: var(--reinpe-filtros-texto);
	}

	/* La aspa es un carácter de texto, no un SVG: el tema tiene reglas
	   globales sobre los iconos de los botones y se quedaba invisible. */
	#reinpe-filtros-modal .reinpe-filtros-cerrar {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 34px !important;
		height: 34px !important;
		min-width: 0;
		padding: 0 !important;
		border: none !important;
		border-radius: 50% !important;
		background: rgba(11, 27, 51, 0.05) !important;
		background-image: none !important;
		box-shadow: none !important;
		color: var(--reinpe-filtros-texto) !important;
		font-family: inherit;
		font-size: 24px;
		font-weight: 400;
		line-height: 1;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	#reinpe-filtros-modal .reinpe-filtros-cerrar span {
		display: block;
		margin-top: -2px;
	}

	#reinpe-filtros-modal .reinpe-filtros-cuerpo {
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0 18px 6px;
	}

	#reinpe-filtros-modal .reinpe-filtros-pie {
		padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--reinpe-filtros-linea);
	}

	#reinpe-filtros-modal .reinpe-filtros-aplicar {
		display: block;
		width: 100%;
		padding: 12px 18px !important;
		border: none !important;
		border-radius: 8px !important;
		background: var(--reinpe-filtros-texto) !important;
		background-image: none !important;
		color: #fff !important;
		font-family: inherit;
		font-size: 14px;
		font-weight: 500;
		text-transform: none;
		cursor: pointer;
		box-shadow: none !important;
		-webkit-appearance: none;
		appearance: none;
	}

	/* ----------------------------------------------------------------------
	   Los filtros dentro del panel
	   ------------------------------------------------------------------- */

	/* La plantilla los coloca como barra horizontal: aquí van en columna. Se
	   quitan los márgenes, que era lo que dejaba tanto aire entre uno y otro,
	   pero NO el relleno: ese es el que se configuró en cada filtro. */
	#reinpe-filtros-modal .reinpe-barra-filtros {
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
	}

	#reinpe-filtros-modal .reinpe-barra-filtros.elementor-hidden-mobile,
	#reinpe-filtros-modal .reinpe-barra-filtros.elementor-hidden-tablet,
	#reinpe-filtros-modal .reinpe-barra-filtros.elementor-hidden-phone,
	#reinpe-filtros-modal > .reinpe-filtros-panel .reinpe-filtro-catalogo.elementor-hidden-mobile,
	#reinpe-filtros-modal > .reinpe-filtros-panel .reinpe-filtro-catalogo.elementor-hidden-phone {
		display: block !important;
	}

	#reinpe-filtros-modal .reinpe-filtro-catalogo {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
	}

	/* Una línea fina separa un filtro del siguiente. */
	#reinpe-filtros-modal .reinpe-filtro-catalogo + .reinpe-filtro-catalogo {
		border-top: 1px solid var(--reinpe-filtros-linea);
	}

	/* El desplegable de JetSmartFilters, abierto en su sitio y sin cortarse. */
	#reinpe-filtros-modal .jet-filter-items-dropdown__body {
		position: static !important;
	}

	#reinpe-filtros-modal .jet-filter-items-scroll {
		max-height: none !important;
	}

	body.reinpe-filtros-sin-scroll {
		overflow: hidden;
	}
}