/* ==========================================================================
   ADM Filtros — estilos de la barra de filtros (categoría, subcategoría,
   búsqueda, chips activos) y del bloque fusionado [adm_sidebar] (buscador
   de vehículo + filtros con un fondo compartido). Los estilos de las
   cards de producto y del grid en sí viven aparte, en
   assets/css/adm-product-grid.css.

   [adm_filtros] y [adm_sidebar] son shortcodes independientes, pensados
   para insertarse en columnas distintas de Elementor (sidebar angosto +
   grid ancho) — no comparten contenedor DOM padre, cada uno se engancha a
   sus propios elementos por id (ver assets/js/adm-filtros.js).

   Sidebar SIEMPRE fijo (nunca overlay): a diferencia de kim-filtros.css,
   que convertía el panel de filtros en un drawer flotante por debajo de
   cierto ancho de contenedor, aquí el sidebar se comporta como una columna
   normal del layout en cualquier ancho — decisión explícita viendo el
   diseño de referencia (KIM: sidebar fijo en su propia columna lateral,
   confirmado en pantallas donde ese contenedor es angosto, sin volverse
   overlay). Ver el bloque final del archivo.
   ========================================================================== */

.adm-filtros-app {
  /* Azul de marca ADM Import (#0071BC), confirmado en el CSS inline real
     del sitio (divider-color del template de producto de Elementor).
     Heredado de kim-filtros.css con el rojo de marca de KIM (#BC1622) —
     cambiado aquí al azul real de ADM. -dark es el mismo tono oscurecido
     ~22%, misma proporción que tenía el rojo original. */
  --adm-color-primary: #0071BC;
  --adm-color-primary-dark: #005893;
  --adm-color-text: #4a4a4a;
  --adm-color-text-soft: #7A7A7A;
  --adm-color-bg-alt: #f7f7f7;
  --adm-color-border: #e6e6e6;
  --adm-radius-sm: 6px;
  --adm-radius-md: 12px;
  --adm-transition: 0.25s ease;

  display: block;
  width: 100%;
  container-type: inline-size;
  container-name: adm-filtros;
  color: var(--adm-color-text);
  font-size: 16px;
  box-sizing: border-box;
}

.adm-filtros-app *,
.adm-filtros-app *::before,
.adm-filtros-app *::after {
  box-sizing: inherit;
}

/* [adm_sidebar]: buscador de vehículo + barra de filtros fusionados en un
   solo bloque visual (un único fondo/borde compartido), en vez de dos
   tarjetas grises separadas con espacio entre ellas — a pedido explícito.
   .adm-vehicle-search y .adm-filters conservan su propio fondo/padding
   cuando van SOLOS (shortcodes [adm_buscador_vehiculo]/[adm_filtros] cada
   uno por separado, en otra página); aquí dentro se anulan para que el
   único fondo visible sea el de .adm-sidebar-app. */
.adm-sidebar-app {
  background: var(--adm-color-bg-alt);
  border-radius: var(--adm-radius-md);
  padding: 24px;
}

.adm-sidebar-app .adm-vehicle-search,
.adm-sidebar-app .adm-filters {
  background: none;
  border-radius: 0;
  padding: 0;
}

.adm-sidebar-app__divider {
  height: 1px;
  background: var(--adm-color-border);
  margin: 24px 0;
}

/* Sidebar de filtros */
.adm-filters {
  background: var(--adm-color-bg-alt);
  border-radius: var(--adm-radius-md);
  padding: 24px;
  min-width: 0;
}

.adm-filters__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.adm-filters__header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1a1a1a;
}

/* Selector reforzado (.adm-filtros-app button.clase) para ganar sobre
   estilos genéricos de <button> del tema/WooCommerce que puedan aplicar
   border/background con más especificidad que una sola clase. */
.adm-filtros-app button.adm-filters__clear {
  display: inline-flex;
  background: none;
  border: none;
  color: var(--adm-color-primary);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
}

.adm-filter-group {
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--adm-color-border);
}

.adm-filter-group:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.adm-filter-group h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--adm-color-text-soft);
  margin: 0 0 12px;
  font-weight: 700;
}

.adm-filter-empty {
  font-size: 0.82rem;
  color: var(--adm-color-text-soft);
}

.adm-filter-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--adm-color-text);
}

.adm-filter-option input {
  accent-color: var(--adm-color-primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

.adm-filter-option .adm-count {
  margin-left: auto;
  color: #aaa;
  font-size: 0.78rem;
  flex-shrink: 0;
}

.adm-filter-option:hover {
  color: var(--adm-color-primary);
}

.adm-filter-search {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--adm-radius-sm);
  border: 1.5px solid var(--adm-color-border);
  font-size: 0.88rem;
  margin-bottom: 16px;
}

.adm-filter-search:focus {
  outline: none;
  border-color: var(--adm-color-primary);
}

/* Chips de filtros activos */
.adm-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
}

.adm-active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--adm-color-primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
}

.adm-active-filter-chip button {
  background: none;
  border: none;
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  opacity: 0.85;
  cursor: pointer;
}

.adm-active-filter-chip button:hover {
  opacity: 1;
}

.adm-filtros-app button.adm-clear-all-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid var(--adm-color-primary);
  color: var(--adm-color-primary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--adm-transition);
}

.adm-filtros-app button.adm-clear-all-chip:hover {
  background: var(--adm-color-primary);
  color: #fff;
}

/* Botón genérico (Limpiar, "Limpiar todo" de los chips) */
.adm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  background: var(--adm-color-primary);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border: 2px solid var(--adm-color-primary);
  letter-spacing: 0.3px;
  transition: all var(--adm-transition);
  cursor: pointer;
  padding: 10px 20px;
  font-size: 0.9rem;
}

.adm-btn:hover {
  background: var(--adm-color-primary-dark);
  border-color: var(--adm-color-primary-dark);
  color: #fff;
}

.adm-btn--outline {
  background: transparent;
  color: var(--adm-color-primary);
}

.adm-btn--outline:hover {
  background: var(--adm-color-primary);
  color: #fff;
}

/* Sin modo overlay: el sidebar de filtros (.adm-filters) siempre se
   muestra como bloque fijo (columna normal en el layout), sin importar el
   ancho del contenedor — decisión explícita del usuario, viendo el diseño
   de referencia (KIM: sidebar fijo en su propia columna, nunca un panel
   flotante encima del contenido). El toggle/backdrop/botón de cerrar que
   existían para el modo overlay ya no se imprimen en el HTML (ver
   templates/filtros-barra.php) ni se manejan en JS (ver
   assets/js/adm-filtros.js) — no queda ningún selector correspondiente
   aquí porque no hay nada que ocultar. */