/* Riel de filtros (ficha C30; js/vista/riel.js). Desplegado, ancho fijo con sus dos secciones y «Limpiar filtros» al
   final; plegado, una franja angosta con ▶, «Filtros» en vertical y el contador. La columna ocupa el ancho liberado. */

.riel {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--esp-4);
  width: var(--riel-ancho);
  padding: var(--esp-3);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-base);
}

.riel--plegado {
  align-items: center;
  gap: var(--esp-2);
  width: var(--riel-plegado);
  padding: var(--esp-2) 0;
}

.riel__seccion {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.riel__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.riel__titulo-seccion {
  color: var(--texto-secundario);
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.riel__plegar,
.riel__desplegar {
  padding: 2px 6px;
  border: 0;
  border-radius: var(--radio-chip);
  background: none;
  color: var(--texto-secundario);
  font-size: var(--texto-s);
  cursor: pointer;
}

.riel__plegar:hover,
.riel__desplegar:hover {
  background: var(--superficie-hover);
}

.riel__vertical {
  color: var(--texto-secundario);
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
  writing-mode: vertical-rl;
}

.riel__contador {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--primario);
  color: var(--sobre-primario);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  line-height: 18px;
  text-align: center;
}

.riel__pie .boton {
  justify-content: center;
  width: 100%;
}