/* === Fila contenedora: cuando colapsa, reducimos el espacio vertical === */
.filters-row {
  display: flex;
  gap: 11px;                 /* espacio entre columnas */
  width: 100%;
  transition:
    margin-bottom 240ms ease,
    gap 200ms ease;
  margin-bottom: -11px;       /* altura normal cuando está expandido */
}
.filters-row.collapsed {
  margin-bottom: -12px;        /* casi pegado a la barra inferior */
  gap: 8px;                  /* un pelín menos de gap */
}

/* === Toolbar izquierda === */
.toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 5px;
  transition: margin 220ms ease, gap 220ms ease, transform 220ms ease, opacity 200ms ease;
}
.toolbar.vertical { flex-direction: column; gap: 8px; margin-top: 10px; margin-bottom: 10px; }

 /* Al colapsar, quitamos el margen inferior de la toolbar para que todo quede pegado */
.filters-row.collapsed .toolbar.vertical {
  margin-bottom: 0;
}

/* Botones redondos */
.round-icon-btn {
  border-radius: 50%;
  width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background-color: #ffffff; border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 120ms ease, box-shadow 200ms ease, opacity 200ms ease;
}
.round-icon-btn:active { transform: scale(0.95); }
.round-icon-btn.filter { width: 35px; height: 35px; position: relative; z-index: 2; }

/* Puntito indicación */
.dot-indicator {
  position: absolute; right: 0; bottom: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: #39FF14; border: 1px solid #fff;
  box-shadow: 0 0 4px #39FF14;
  transition: opacity 160ms ease, transform 160ms ease;
}
.dot-hidden { opacity: 0; pointer-events: none; transform: scale(0.7); }
.dot-visible { opacity: 1; transform: scale(1); }

/* === Botones secundarios (apilados bajo el filtro) === */
#stack-secundarios {
  position: relative;
  width: 100%;
  overflow: clip;
  transform-origin: top center;
  will-change: transform, opacity, max-height, margin-bottom;
}
.stack.expanded {
  display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 2px; margin-bottom: 10px;
  opacity: 1; transform: translateY(0) scale(1); max-height: 260px; pointer-events: auto; filter: blur(0);
  transition: transform 260ms cubic-bezier(.2,.7,0,1), opacity 220ms ease, max-height 260ms ease, filter 220ms ease, margin-bottom 220ms ease;
}
.stack.collapsed {
  display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 0;
  opacity: 0; transform: translateY(-14px) scale(0.98); max-height: 0; pointer-events: none; filter: blur(1px);
  transition: transform 260ms cubic-bezier(.2,.7,0,1), opacity 220ms ease, max-height 260ms ease, filter 220ms ease, margin-bottom 220ms ease;
}

/* === Shell derecho: fade + slide Y + plegado por max-height (suave al ocultar) === */
#filters-shell {
  --shell-max: 1200px;
  position: relative;
  overflow: hidden;
  will-change: transform, opacity, max-height, margin-bottom;
  transition: transform 260ms cubic-bezier(.2,.7,0,1), opacity 240ms ease, max-height 300ms cubic-bezier(.2,.7,0,1), margin-bottom 240ms ease;
  margin-bottom: 6px;           /* espacio normal bajo el bloque derecho */
}
.filters-shell.expanded {
  opacity: 1;
  transform: translateY(0);
  max-height: var(--shell-max);
}
.filters-shell.collapsed {
  opacity: 0;
  transform: translateY(-12px);
  max-height: 0;
  pointer-events: none;
  margin-bottom: 0;             /* al colapsar, quitamos ese espacio */
}

/* (Opcional) micro-animación del contenido interno */
.content-body {
  transition: transform 240ms cubic-bezier(.2,.7,0,1), opacity 220ms ease;
}
.filters-shell.collapsed .content-body {
  transform: translateY(-6px);
  opacity: 0.98;
}

/* Fade del Collapse (lo mantenemos si te gusta el efecto) */
#main-filter-collapse {
  transition: opacity 220ms ease;
}
#main-filter-collapse[aria-hidden="true"] { opacity: 0; }
#main-filter-collapse[aria-hidden="false"] { opacity: 1; }