/* Bloque [choko_filtros_tour] para entradas del blog.
   Copia los valores del panel de filtros de reserva-form.css; ver el spec
   2026-09-08-shortcode-filtros-de-tour-design.md para por qué se copian en vez
   de reutilizar el archivo. Restilar el panel obliga a tocar los dos.

   El prefijo .choko-tour-filtros de cada regla NO es redundante: el bloque vive
   dentro del contenido del post, y una regla del tema como `.entry-content ul`
   (clase + etiqueta) pesa más que `.choko-tour-filtros-chips` (una clase). Sin
   el prefijo, las cápsulas salen con viñetas y sangría y el h2 con el tamaño
   del tema. Con él son dos clases y ganan pase lo que pase. */
.choko-tour-filtros {
	--choko-blue: #007aba;
	--choko-blue-dark: #005f96;
	--choko-ink: #333333;
	--choko-muted: #6b7683;
	--choko-line: #d9dee5;

	max-width: 600px;
	margin: 24px 0;
	color: var(--choko-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	box-sizing: border-box;
}
.choko-tour-filtros *,
.choko-tour-filtros *::before,
.choko-tour-filtros *::after { box-sizing: inherit; }

.choko-tour-filtros .choko-tour-filtros-titulo {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--choko-ink);
	text-transform: none;
	letter-spacing: normal;
}

.choko-tour-filtros .choko-tour-filtros-caja {
	padding: 4px 20px 16px;
	background: #fff2e587;
}

/* El separador va ENTRE grupos, no debajo de cada cabecera: con un solo grupo
   cerrado, ese borde dejaba una línea suelta con nada debajo. */
.choko-tour-filtros .choko-tour-filtros-grupo + .choko-tour-filtros-grupo { border-top: 1px solid var(--choko-line); }

/* Sin el triángulo nativo: la flecha la dibuja .choko-tour-filtros-flecha, igual
   que en el panel del formulario. */
.choko-tour-filtros .choko-tour-filtros-cabecera {
	display: block;
	list-style: none;
	cursor: pointer;
}
.choko-tour-filtros .choko-tour-filtros-cabecera::-webkit-details-marker { display: none; }
.choko-tour-filtros .choko-tour-filtros-cabecera::marker { content: ""; }
/* El tema le pone box-shadow al hover de los controles; ya mordió una vez en los
   botones del formulario. */
.choko-tour-filtros .choko-tour-filtros-cabecera:hover,
.choko-tour-filtros .choko-tour-filtros-cabecera:focus { box-shadow: none; outline: none; }
.choko-tour-filtros .choko-tour-filtros-cabecera:focus-visible { outline: 2px solid var(--choko-blue-dark); outline-offset: 2px; }

.choko-tour-filtros .choko-tour-filtros-cabecera h3 {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 15px 0;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: .3px;
	color: var(--choko-muted);
	text-align: left;
}
@media (hover: hover) {
	.choko-tour-filtros .choko-tour-filtros-cabecera:hover h3 { color: var(--choko-blue-dark); }
}
.choko-tour-filtros .choko-tour-filtros-nombre { flex: 1; }
.choko-tour-filtros .choko-tour-filtros-conteo { font-weight: 700; color: var(--choko-blue); }
.choko-tour-filtros .choko-tour-filtros-flecha {
	flex: 0 0 auto;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	padding: 3px;
	transform: rotate(45deg) translate(-1px, -2px);
	transition: transform .15s ease;
}
.choko-tour-filtros .choko-tour-filtros-grupo[open] .choko-tour-filtros-flecha {
	transform: rotate(-135deg) translate(-1px, -1px);
}

/* Lo que anima el JS. Sin padding ni margen propios: con height 0 se seguirían
   viendo y el cierre daría un salto. El espacio lo ponen los hijos. */
.choko-tour-filtros .choko-tour-filtros-cuerpo { overflow: hidden; }

.blog-content .post .post-entry ul.choko-tour-filtros-chips, .choko-tour-filtros .choko-tour-filtros-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 2px 0 12px;
	list-style: none;
}
.choko-tour-filtros .choko-tour-filtros-chips:last-child { padding-bottom: 18px; }

/* Sin hover ni cursor de mano: estas cápsulas no se pueden pulsar y fingir que
   sí es mentirle al visitante. */
.blog-content .post .post-entry ul > li.choko-tour-chip, .choko-tour-filtros .choko-tour-chip {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 5px 13px;
	border: 1px solid var(--choko-line);
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	line-height: 1.5;
	color: var(--choko-muted);
}

/* El emoji no debe empujar la altura de la cápsula ni pegarse al texto. */
/* El icono va al tamaño del texto y no debe estirar la cápsula.
   Los selectores largos son a propósito: casi todos los temas de blog llevan
   reglas para las imágenes del contenido (max-width, height: auto, margin,
   display: block) que descuadrarían un icono en línea, y pesan más que una
   sola clase. Mismo motivo que en .choko-tour-chip. */
.blog-content .post .post-entry img.choko-tour-chip-img,
.choko-tour-filtros .choko-tour-chip-img {
	display: inline-block;
	width: auto;
	height: 1.25em;
	max-width: none;
	min-width: 0;
	margin: 0 6px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	vertical-align: -.2em;
	object-fit: contain;
}

.choko-tour-filtros .choko-tour-filtros-aviso {
	margin: 0;
	padding: 0 0 18px;
	color: var(--choko-muted);
	line-height: 1.5;
}

.choko-tour-filtros .choko-tour-filtros-grupo:last-child .choko-tour-filtros-aviso {
    padding: 0;
}