/* ============================================
   Maq Studio Filtros v1.1.0
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --maqf-font-b:  'DM Sans', sans-serif;
  --maqf-side:    clamp(1.5rem, 5vw, 4rem);
}

.maq-filtros-bar {
  background: #F8F8F8;
  border-bottom: none;
  box-shadow: none;
  padding: .5rem var(--maqf-side) .5rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-family: var(--maqf-font-b);
  width: 100%;
  box-sizing: border-box;
}

.maq-filtros-bar *,
.maq-filtros-bar *::before,
.maq-filtros-bar *::after { box-sizing: border-box; }

/* ── Fila 1: botones + buscador en la misma línea ── */
.maq-filtros-fila {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.maq-filtros-fila-1 {
  justify-content: flex-start;
}

/* Buscador dentro de fila 1, empujado a la derecha */
.maq-filtros-fila-1 .maq-filtros-search {
  margin-left: auto;
  flex-shrink: 0;
}

.maq-filtros-fila-2 {
  padding-top: .3rem;
  border-top: 1px solid rgba(0,0,0,.07);
}

/* ── Botones fila 1: 18px, DM Sans, gris oscuro ── */
.maq-filtro-btn {
  all: unset !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  font-family: 'DM Sans', sans-serif !important;
  letter-spacing: .02em !important;
  color: rgba(0,0,0,.62) !important;
  cursor: pointer !important;
  padding: .3rem 1.3rem .3rem 1.3rem !important;
  border-bottom: 2px solid transparent !important;
  border-right: 1px solid rgba(0,0,0,.18) !important;
  transition: color .2s, border-color .2s !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

.maq-filtros-fila .maq-filtro-btn:first-child { padding-left: 0 !important; }
.maq-filtros-fila .maq-filtro-btn:last-of-type { border-right: none !important; }

.maq-filtro-btn:hover  { color: #000 !important; border-bottom-color: rgba(0,0,0,.3) !important; }
.maq-filtro-btn.active { color: #000 !important; font-weight: 700 !important; border-bottom-color: #000 !important; }

/* ── Botones fila 2: 15px ── */
.maq-filtros-fila-2 .maq-filtro-btn {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: rgba(0,0,0,.58) !important;
  padding: .25rem 1rem !important;
  border-right: 1px solid rgba(0,0,0,.14) !important;
}
.maq-filtros-fila-2 .maq-filtro-btn:first-child { padding-left: 0 !important; }
.maq-filtros-fila-2 .maq-filtro-btn:last-child  { border-right: none !important; }
.maq-filtros-fila-2 .maq-filtro-btn.active { color: #000 !important; font-weight: 600 !important; }

/* ── Buscador ── */
.maq-filtros-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 1.5px solid rgba(0,0,0,.18);
  padding: .4rem 1rem;
  border-radius: 4px;
  background: rgba(255,255,255,.6);
  width: 220px;
  transition: border-color .2s, background .2s;
}
.maq-filtros-search:focus-within { border-color: #000; background: #fff; }
.maq-filtros-search svg {
  width: 16px; height: 16px;
  stroke: rgba(0,0,0,.45); fill: none;
  stroke-width: 2; stroke-linecap: round; flex-shrink: 0;
}
.maq-filtros-search input {
  border: none !important;
  background: transparent !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  color: #000 !important;
  outline: none !important;
  width: 100%;
  box-shadow: none !important;
}
.maq-filtros-search input::placeholder { color: rgba(0,0,0,.38); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .maq-filtros-fila-1 { flex-wrap: wrap; gap: 0; }
  .maq-filtros-fila-1 .maq-filtros-search { margin-left: 0; margin-top: .4rem; width: 100%; }
  .maq-filtro-btn    { font-size: 13px !important; }
  .maq-filtros-fila-2 .maq-filtro-btn { font-size: 10px !important; }
}