/* ============================================================
   UNICLIMA — BARRA DE FILTROS (.uc-filterbar) con buscadores PREDICTIVOS
   Dos comboboxes independientes (Marca, Modelo caldera) + Limpiar.
   Sin etiquetas (el placeholder lo indica). Tokens de tokens.css. !important: 0.
   ============================================================ */

.uc-filterbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--ucn-gray-50);
  border: 1px solid var(--ucn-gray-200);
  border-radius: var(--ucn-radius-sm, 10px);
  padding: 8px 12px;
  margin: 0 0 12px;
  box-sizing: border-box;
}

/* Campo = combobox (input + lista) */
.uc-filterbar__field.uc-combo {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

/* Input de búsqueda */
.uc-combo__input {
  font-family: var(--ucn-font-sans);
  font-size: 1rem !important;       /* grande + evita zoom iOS al enfocar */
  font-weight: 600 !important;       /* bold; gana a la regla anti-zoom global */
  color: var(--ucn-gray-800, #1f2937);
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  border: 1px solid var(--ucn-gray-200, #e5e7eb);
  border-radius: 8px;
  padding: 0 38px 0 12px;
  height: 40px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.18s var(--ucn-ease, ease), box-shadow 0.18s var(--ucn-ease, ease);
  outline: none;
}
.uc-combo__input::placeholder { color: var(--ucn-gray-400, #9ca3af); opacity: 1; }
.uc-combo__input:hover { border-color: var(--ucn-gray-400, #9ca3af); }
.uc-combo__input:focus {
  border-color: var(--ucn-brand-500);
  box-shadow: 0 0 0 3px var(--ucn-brand-100);
}

/* Lista predictiva (dropdown) */
.uc-combo__list {
  list-style: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  background: #ffffff;
  border: 1px solid var(--ucn-gray-200, #e5e7eb);
  border-radius: 10px;
  box-shadow: var(--ucn-shadow-md, 0 10px 25px -12px rgba(0,0,0,.15));
  max-height: 360px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 30;
}
.uc-combo__list[hidden] { display: none; }
.uc-combo__opt {
  padding: 10px 12px;
  font-family: var(--ucn-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ucn-gray-800, #1f2937);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uc-combo__opt:hover,
.uc-combo__opt.is-active {
  background: var(--ucn-gray-100, #f3f4f6);
  color: var(--ucn-neutral-900, #111827);
}

/* Botón limpiar */
.uc-filterbar__actions { display: flex; align-items: center; flex: 0 0 auto; }
.uc-filterbar__clear {
  font-family: var(--ucn-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  background-color: var(--ucn-brand-500);
  border: none;
  border-radius: 8px;
  padding: 0 20px;
  height: 40px;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.18s var(--ucn-ease, ease), transform 0.12s var(--ucn-ease, ease);
  outline: none;
  box-sizing: border-box;
}
.uc-filterbar__clear:hover { background-color: var(--ucn-brand-600); }
.uc-filterbar__clear:active { background-color: var(--ucn-brand-700); transform: scale(0.98); }
.uc-filterbar__clear:focus-visible { box-shadow: 0 0 0 3px var(--ucn-brand-100); }

/* RESPONSIVE */
@media (max-width: 768px) {
  .uc-filterbar { flex-wrap: wrap; gap: 10px; }
  .uc-filterbar__field.uc-combo { flex: 1 1 calc(50% - 5px); min-width: 140px; }
  .uc-filterbar__actions { flex: 0 0 100%; }
  .uc-filterbar__clear { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .uc-filterbar { flex-direction: column; gap: 8px; padding: 8px; border-radius: 8px; }
  .uc-filterbar__field.uc-combo { flex: 0 0 100%; width: 100%; }
  .uc-combo__input { height: 44px; font-size: 0.9375rem; font-weight: 500; }
  .uc-filterbar__actions { flex: 0 0 100%; width: 100%; }
  .uc-filterbar__clear { width: 100%; height: 44px; justify-content: center; font-size: 0.875rem; }
}