<template>
  <div class="page-container" @mousemove="handleMouseMove">
    <!-- Navbar -->
    <nav class="navbar" :class="{ 'navbar-hidden': isNavbarHidden }">
      <div class="navbar-left">
        <img :src="logo" alt="EventAI Logo" class="logo" @click="goBack" />
      </div>
      <div class="navbar-center">
        <h1>Servicios Disponibles</h1>
      </div>
      <div class="navbar-right">
        <button class="nav-button back" @click="goBack">
          <i class="bi bi-arrow-left"></i>
          Volver
        </button>
      </div>
    </nav>

    <!-- Main Content -->
    <div class="main-content">
      <!-- Selección de tipo de servicio -->
      <div class="service-type-selector">
        <button
            v-for="type in serviceTypes"
            :key="type.value"
            :class="['service-type-btn', { active: selectedType === type.value }]"
            @click="selectType(type.value)"
            >
            <template v-if="type.isImg">
                <img :src="type.icon" alt="" class="service-type-img" />
            </template>
            <template v-else>
                <i :class="type.icon"></i>
            </template>
            <span>{{ type.label }}</span>
        </button>
      </div>

      <!-- Mensaje si no hay tipo seleccionado -->
      <div v-if="!selectedType" class="select-type-message">
        <i class="bi bi-arrow-down-circle"></i>
        <p>Selecciona el tipo de servicio que quieres buscar</p>
      </div>

      <!-- Filtros y servicios solo si hay tipo seleccionado -->
      <div v-else>
        <!-- Filtros generales -->
      <div class="filters-section">
          <div class="filters-header">
            <h3>Filtros</h3>
            <button class="clear-filters-btn" @click="clearAllFilters">
              <i class="bi bi-trash"></i>
              Limpiar filtros
            </button>
          </div>
          <div class="filters-grid filters-row-1">
            <div class="filter-group search-group">
              <label class="filter-label">
                <i class="bi bi-search"></i>
                Nombre del servicio
              </label>
              <input
                type="text"
                v-model="searchQuery"
                placeholder="Buscar servicios..."
                @input="filterServices"
                class="search-input"
              >
            </div>
            <div class="filter-group">
              <label class="filter-label">
                <i class="bi bi-funnel"></i>
                Ordenar por
              </label>
              <div class="custom-select" @click="toggleSortDropdown">
                <div class="selected-option">
                  {{ getSortLabel(sortBy) }}
                  <i class="bi" :class="showSortDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                </div>
                <div v-if="showSortDropdown" class="options-container">
                  <div v-for="option in sortOptions"
                       :key="option.value"
                       class="option"
                       :class="{ 'selected': sortBy === option.value }"
                       @click.stop="selectSort(option.value)">
                    {{ option.label }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="filters-grid filters-row-2">
            <div class="filter-group provincia-group">
              <label class="filter-label">
                <i class="bi bi-geo-alt"></i>
                Provincia
              </label>
              <input
                type="text"
                v-model="filters.provincia"
                placeholder="Provincia"
                @input="filterServices"
                class="location-input"
              >
            </div>
            <div class="filter-group ciudad-group">
              <label class="filter-label">
                <i class="bi bi-geo"></i>
                Ciudad
              </label>
              <input
                type="text"
                v-model="filters.ciudad"
                placeholder="Ciudad"
                @input="filterServices"
                class="location-input"
              >
            </div>
            <div class="filter-group dia-group">
              <label class="filter-label">
                <i class="bi bi-calendar-week"></i>
                Día de la semana
              </label>
              <div class="custom-select custom-select-dia" @click="toggleDayDropdown">
                <div class="selected-option">
                  <div class="selected-tags selected-tags-dia" v-if="filters.diaSemana.length > 0">
                    <span v-for="value in filters.diaSemana" :key="value" class="selected-tag">
                      {{ getDayLabelByValue(value) }}
                      <i class="bi bi-x" @click.stop="toggleDay(value)"></i>
                    </span>
                  </div>
                  <span v-else>Día de la semana</span>
                  <i class="bi" :class="showDayDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                </div>
                <div v-if="showDayDropdown" class="options-container">
                  <div v-for="option in dayOptions"
                       :key="option.value"
                       class="option"
                       :class="{ 'selected': filters.diaSemana.some(v => v === option.value) }"
                       @click.stop="toggleDay(option.value)">
                    {{ option.label }}
                  </div>
                </div>
              </div>
            </div>
            <div class="filter-group hora-inicio-group">
              <label class="filter-label">
                <i class="bi bi-clock-history"></i>
                Hora inicio
              </label>
              <input
                type="time"
                v-model="filters.horaInicio"
                @input="filterServices"
                class="location-input"
              >
            </div>
            <div class="filter-group hora-final-group">
              <label class="filter-label">
                <i class="bi bi-clock"></i>
                Hora final
              </label>
              <input
                type="time"
                v-model="filters.horaFinal"
                @input="filterServices"
                class="location-input"
              >
            </div>
            <div class="filter-group price-range">
              <label class="filter-label">
                <i class="bi bi-currency-euro"></i>
                Precio
              </label>
              <div class="price-inputs">
                <input
                  type="number"
                  v-model="filters.precioMin"
                  placeholder="Precio min"
                  @input="filterServices"
                  class="price-input"
                >
                <input
                  type="number"
                  v-model="filters.precioMax"
                  placeholder="Precio max"
                  @input="filterServices"
                  class="price-input"
                >
              </div>
            </div>
          </div>
          <div class="more-filters-container">
            <button class="more-filters-link" @click="toggleSpecificFilters">
              <i class="bi" :class="showSpecificFilters ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
              {{ showSpecificFilters ? 'Menos filtros' : 'Más filtros' }}
            </button>
          </div>
          <!-- Filtros específicos -->
          <div v-if="showSpecificFilters && selectedType" class="specific-filters">
            <!-- Espai -->
            <div v-if="selectedType === 'espai'" class="espai-filters">
              <div class="filter-group espai-type-group">
                <label class="filter-label">
                  <i class="bi bi-building"></i>
                  Tipo de espacio
                </label>
                <div class="custom-select custom-select-espai" @click="toggleEspaiTypeDropdown">
                  <div class="selected-option">
                    <div class="selected-tags selected-tags-espai" v-if="specificFilters.espai.type.length > 0">
                      <span v-for="value in specificFilters.espai.type" :key="value" class="selected-tag">
                        {{ getEspaiTypeLabelByValue(value) }}
                        <i class="bi bi-x" @click.stop="toggleEspaiType(value)"></i>
                      </span>
                    </div>
                    <span v-else>Tipo de espacio</span>
                    <i class="bi" :class="showEspaiTypeDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                  </div>
                  <div v-if="showEspaiTypeDropdown" class="options-container">
                    <div v-for="option in espaiTypeOptions"
                         :key="option.value"
                         class="option"
                         :class="{ 'selected': specificFilters.espai.type.includes(option.value) }"
                         @click.stop="toggleEspaiType(option.value)">
                      {{ option.label }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="filter-group espai-capacity-group">
                <label class="filter-label">
                  <i class="bi bi-people"></i>
                  Capacidad
                </label>
                <input
                  type="number"
                  v-model="specificFilters.espai.capacitat"
                  placeholder="Capacidad"
                  class="filter-input"
                  @input="filterServices"
                >
              </div>
              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-stars"></i>
                  Características
                </label>
                <input
                  type="text"
                  v-model="specificFilters.espai.caracteristicas"
                  placeholder="Características (separadas por comas)"
                  class="filter-input"
                  @input="filterServices"
                >
              </div>
            </div>

            <!-- Catering -->
            <div v-if="selectedType === 'catering'" class="catering-filters">
              <!-- Fila 1 -->
              <div class="catering-row">
                <div class="filter-group catering-delivery-group">
                  <label class="filter-label">
                    <i class="bi bi-truck"></i>
                    Tipo de entrega
                  </label>
                  <div class="custom-select custom-select-catering" @click="toggleCateringEntregaDropdown">
                    <div class="selected-option">
                      {{ getCateringEntregaLabel(specificFilters.catering.tipo_entrega) || 'Tipo de entrega' }}
                      <i class="bi" :class="showCateringEntregaDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                    </div>
                    <div v-if="showCateringEntregaDropdown" class="options-container">
                      <div v-for="option in cateringEntregaOptions"
                           :key="option.value"
                           class="option"
                           :class="{ 'selected': specificFilters.catering.tipo_entrega === option.value }"
                           @click.stop="toggleCateringEntrega(option.value)">
                        {{ option.label }}
                      </div>
                    </div>
                  </div>
                </div>

                <div class="filter-group catering-type-group">
                  <label class="filter-label">
                    <i class="bi bi-basket"></i>
                    Tipo de catering
                  </label>
                  <div class="custom-select custom-select-catering" @click="toggleCateringTypeDropdown" :class="{ 'disabled': specificFilters.catering.tipo_entrega !== 'servicio_domicilio' }">
                    <div class="selected-option">
                      <div class="selected-tags selected-tags-catering" v-if="specificFilters.catering.tipo_catering.length > 0">
                        <span v-for="value in specificFilters.catering.tipo_catering"
                              :key="value"
                              class="selected-tag">
                          {{ getCateringTypeLabelByValue(value) }}
                          <i class="bi bi-x" @click.stop="toggleCateringType(value)"></i>
                        </span>
                      </div>
                      <span v-else>Tipo de catering</span>
                      <i class="bi" :class="showCateringTypeDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                    </div>
                    <div v-if="showCateringTypeDropdown && specificFilters.catering.tipo_entrega === 'servicio_domicilio'" class="options-container">
                      <div v-for="option in cateringTypeOptions"
                           :key="option.value"
                           class="option"
                           :class="{ 'selected': specificFilters.catering.tipo_catering.some(t => t === option.value) }"
                           @click.stop="toggleCateringType(option.value)">
                        {{ option.label }}
                      </div>
                    </div>
                  </div>
                </div>

                <div class="filter-group catering-menu-group">
                  <label class="filter-label">
                    <i class="bi bi-menu-button-wide"></i>
                    Tipo de servicio
                  </label>
                  <div class="custom-select custom-select-catering" @click="toggleCateringTipoServicioDropdown">
                    <div class="selected-option">
                      {{ getCateringTipoServicioLabel(specificFilters.catering.tipo_servicio) || 'Tipo de servicio' }}
                      <i class="bi" :class="showCateringTipoServicioDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                    </div>
                    <div v-if="showCateringTipoServicioDropdown" class="options-container">
                      <div v-for="option in cateringTipoServicioOptions"
                           :key="option.value"
                           class="option"
                           :class="{ 'selected': specificFilters.catering.tipo_servicio === option.value }"
                           @click.stop="toggleCateringTipoServicio(option.value)">
                        {{ option.label }}
                      </div>
                    </div>
                  </div>
                </div>

                <div class="filter-group catering-menu-type-group">
                  <label class="filter-label">
                    <i class="bi bi-list-check"></i>
                    Tipo Menu/Artículo
                  </label>
                  <div class="custom-select custom-select-catering" @click="toggleCateringMenuTypeDropdown" :class="{ 'disabled': !specificFilters.catering.tipo_servicio }">
                    <div class="selected-option">
                      <div class="selected-tags selected-tags-catering" v-if="specificFilters.catering.tipo_servicio === 'menu' && specificFilters.catering.menu_type.length > 0">
                        <span v-for="value in specificFilters.catering.menu_type"
                              :key="value"
                              class="selected-tag">
                          {{ getCateringMenuTypeLabel([value]) }}
                          <i class="bi bi-x" @click.stop="toggleCateringMenuType(value)"></i>
                        </span>
                      </div>
                      <div class="selected-tags selected-tags-catering" v-else-if="specificFilters.catering.tipo_servicio === 'articulo' && specificFilters.catering.articulo_type.length > 0">
                        <span v-for="value in specificFilters.catering.articulo_type"
                              :key="value"
                              class="selected-tag">
                          {{ getCateringArticuloTypeLabel([value]) }}
                          <i class="bi bi-x" @click.stop="toggleCateringArticuloType(value)"></i>
                        </span>
                      </div>
                      <span v-else>{{ !specificFilters.catering.tipo_servicio ? 'Tipo Menu/Articulo' : (specificFilters.catering.tipo_servicio === 'menu' ? 'Tipo de menú' : 'Tipo de artículo') }}</span>
                      <i class="bi" :class="showCateringMenuTypeDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                    </div>
                    <div v-if="showCateringMenuTypeDropdown" class="options-container">
                      <template v-if="specificFilters.catering.tipo_servicio === 'menu'">
                        <div v-for="option in cateringMenuTypeOptions"
                             :key="option.value"
                             class="option"
                             :class="{ 'selected': specificFilters.catering.menu_type.includes(option.value) }"
                             @click.stop="toggleCateringMenuType(option.value)">
                          {{ option.label }}
                        </div>
                      </template>
                      <template v-else-if="specificFilters.catering.tipo_servicio === 'articulo'">
                        <div v-for="option in cateringArticuloTypeOptions"
                             :key="option.value"
                             class="option"
                             :class="{ 'selected': specificFilters.catering.articulo_type.includes(option.value) }"
                             @click.stop="toggleCateringArticuloType(option.value)">
                          {{ option.label }}
                        </div>
                      </template>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Fila 2 -->
              <div class="catering-row">
                <div class="filter-group catering-guests-group">
                  <label class="filter-label">
                    <i class="bi bi-people"></i>
                    Número de comensales
                  </label>
                  <input
                    type="number"
                    v-model="specificFilters.catering.comensales"
                    placeholder="Número de comensales"
                    class="filter-input"
                    @input="filterServices"
                  >
                </div>

                <div class="filter-group catering-duration-min-group">
                  <label class="filter-label">
                    <i class="bi bi-clock-history"></i>
                    Duración mínima
                  </label>
                  <input
                    type="number"
                    v-model="specificFilters.catering.duracion_min"
                    placeholder="Duración min (h)"
                    class="filter-input"
                    @input="filterServices"
                  >
                </div>

                <div class="filter-group catering-duration-max-group">
                  <label class="filter-label">
                    <i class="bi bi-clock"></i>
                    Duración máxima
                  </label>
                  <input
                    type="number"
                    v-model="specificFilters.catering.duracion_max"
                    placeholder="Duración max (h)"
                    class="filter-input"
                    @input="filterServices"
                  >
                </div>

                <div class="filter-group catering-allergens-group">
                  <label class="filter-label">
                    <i class="bi bi-exclamation-triangle"></i>
                    Alérgenos a excluir
                  </label>
                  <div class="custom-select custom-select-catering" @click="toggleCateringAlergenosDropdown">
                    <div class="selected-option">
                      <div class="selected-tags selected-tags-catering" v-if="specificFilters.catering.alergenos.length > 0">
                        <span v-for="value in specificFilters.catering.alergenos"
                              :key="value"
                              class="selected-tag">
                          {{ getCateringAlergenosLabel([value]) }}
                          <i class="bi bi-x" @click.stop="toggleCateringAlergeno(value)"></i>
                        </span>
                      </div>
                      <span v-else>Alérgenos a excluir</span>
                      <i class="bi" :class="showCateringAlergenosDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                    </div>
                    <div v-if="showCateringAlergenosDropdown" class="options-container">
                      <div v-for="option in cateringAlergenosOptions"
                           :key="option.value"
                           class="option"
                           :class="{ 'selected': specificFilters.catering.alergenos.includes(option.value) }"
                           @click.stop="toggleCateringAlergeno(option.value)">
                        {{ option.label }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Fila 3 -->
              <div class="catering-row">
                <div class="filter-group catering-features-group">
                  <label class="filter-label">
                    <i class="bi bi-stars"></i>
                    Características
                  </label>
                  <input
                    type="text"
                    v-model="specificFilters.catering.caracteristicas"
                    placeholder="Características (separadas por comas)"
                    class="filter-input"
                    @input="filterServices"
                  >
                </div>
              </div>
            </div>

            <!-- Mobiliario -->
            <div v-if="selectedType === 'mobiliari'" class="specific-filters-grid mobiliari-grid">
              <!-- Primera fila -->
              <div class="filter-group">
                <label class="filter-label">
                  <img src="@/assets/icon_mobiliari2.png" alt="Tipología" class="filter-label-icon" />
                  Tipología
                </label>
                <div class="custom-select" @click="toggleMobiliariTipologiaDropdown">
                  <div class="selected-option">
                    <div class="selected-tags" v-if="specificFilters.mobiliari.tipologia.length > 0">
                      <span v-for="value in specificFilters.mobiliari.tipologia"
                            :key="value"
                            class="selected-tag">
                        {{ getMobiliariTipologiaLabel([value]) }}
                        <i class="bi bi-x" @click.stop="toggleMobiliariTipologia(value)"></i>
                      </span>
                    </div>
                    <span v-else>Tipología</span>
                    <i class="bi" :class="showMobiliariTipologiaDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                  </div>
                  <div v-if="showMobiliariTipologiaDropdown" class="options-container">
                    <div v-for="option in mobiliariTipologiaOptions"
                         :key="option.value"
                         class="option"
                         :class="{ 'selected': specificFilters.mobiliari.tipologia.includes(option.value) }"
                         @click.stop="toggleMobiliariTipologia(option.value)">
                      {{ option.label }}
                    </div>
                  </div>
                </div>
              </div>

              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-tags"></i>
                  Subtipología
                </label>
                <input
                  type="text"
                  v-model="specificFilters.mobiliari.subtipologia"
                  placeholder="Subtipología"
                  class="filter-input"
                  @input="filterServices"
                >
              </div>

              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-basket"></i>
                  Tipo de servicio
                </label>
                <div class="custom-select" @click="toggleMobiliariTipoServicioDropdown">
                  <div class="selected-option">
                    {{ getMobiliariTipoServicioLabel(specificFilters.mobiliari.is_rental) || 'Tipo de servicio' }}
                    <i class="bi" :class="showMobiliariTipoServicioDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                  </div>
                  <div v-if="showMobiliariTipoServicioDropdown" class="options-container">
                    <div v-for="option in mobiliariTipoServicioOptions"
                         :key="option.value"
                         class="option"
                         :class="{ 'selected': specificFilters.mobiliari.is_rental === option.value }"
                         @click.stop="toggleMobiliariTipoServicio(option.value)">
                      {{ option.label }}
                    </div>
                  </div>
                </div>
              </div>

              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-box"></i>
                  Cantidad
                </label>
                <input
                  type="number"
                  v-model="specificFilters.mobiliari.cantidad"
                  placeholder="Cantidad"
                  class="filter-input"
                  @input="filterServices"
                >
              </div>

              <!-- Segunda fila -->
              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-square"></i>
                  Forma
                </label>
                <input
                  type="text"
                  v-model="specificFilters.mobiliari.forma"
                  placeholder="Forma"
                  class="filter-input"
                  @input="filterServices"
                >
              </div>

              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-gear"></i>
                  Modalidad
                </label>
                <input
                  type="text"
                  v-model="specificFilters.mobiliari.modality"
                  placeholder="Modalidad"
                  class="filter-input"
                  @input="filterServices"
                >
              </div>

              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-palette"></i>
                  Colores
                </label>
                <div class="custom-select" @click="toggleMobiliariColoresDropdown">
                  <div class="selected-option">
                    <div class="selected-tags" v-if="specificFilters.mobiliari.color.length > 0">
                      <span v-for="value in specificFilters.mobiliari.color"
                            :key="value"
                            class="selected-tag">
                        {{ getMobiliariColoresLabel([value]) }}
                        <i class="bi bi-x" @click.stop="toggleMobiliariColor(value)"></i>
                      </span>
                    </div>
                    <span v-else>Colores</span>
                    <i class="bi" :class="showMobiliariColoresDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                  </div>
                  <div v-if="showMobiliariColoresDropdown" class="options-container">
                    <div v-for="option in mobiliariColoresOptions"
                         :key="option.value"
                         class="option"
                         :class="{ 'selected': specificFilters.mobiliari.color.includes(option.value) }"
                         @click.stop="toggleMobiliariColor(option.value)">
                      {{ option.label }}
                    </div>
                  </div>
                </div>
              </div>

              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-tools"></i>
                  Materiales
                </label>
                <div class="custom-select" @click="toggleMobiliariMaterialesDropdown">
                  <div class="selected-option">
                    <div class="selected-tags" v-if="specificFilters.mobiliari.material.length > 0">
                      <span v-for="value in specificFilters.mobiliari.material"
                            :key="value"
                            class="selected-tag">
                        {{ getMobiliariMaterialesLabel([value]) }}
                        <i class="bi bi-x" @click.stop="toggleMobiliariMaterial(value)"></i>
                      </span>
                    </div>
                    <span v-else>Materiales</span>
                    <i class="bi" :class="showMobiliariMaterialesDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                  </div>
                  <div v-if="showMobiliariMaterialesDropdown" class="options-container">
                    <div v-for="option in mobiliariMaterialesOptions"
                         :key="option.value"
                         class="option"
                         :class="{ 'selected': specificFilters.mobiliari.material.includes(option.value) }"
                         @click.stop="toggleMobiliariMaterial(option.value)">
                      {{ option.label }}
                    </div>
                  </div>
                </div>
              </div>

              <!-- Tercera fila -->
              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-palette2"></i>
                  Estilo
                </label>
                <input
                  type="text"
                  v-model="specificFilters.mobiliari.style"
                  placeholder="Estilo"
                  class="filter-input"
                  @input="filterServices"
                >
              </div>

              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-arrows-angle-expand"></i>
                  Tamaño
                </label>
                <div class="custom-select" @click="toggleMobiliariSizeDropdown">
                  <div class="selected-option">
                    <div class="selected-tags" v-if="specificFilters.mobiliari.size.length > 0">
                      <span v-for="value in specificFilters.mobiliari.size"
                            :key="value"
                            class="selected-tag">
                        {{ value }}
                        <i class="bi bi-x" @click.stop="toggleMobiliariSize(value)"></i>
                      </span>
                    </div>
                    <span v-else>Tamaño</span>
                    <i class="bi" :class="showMobiliariSizeDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                  </div>
                  <div v-if="showMobiliariSizeDropdown" class="options-container">
                    <div v-for="option in mobiliariSizeOptions"
                         :key="option.value"
                         class="option"
                         :class="{ 'selected': specificFilters.mobiliari.size.includes(option.value) }"
                         @click.stop="toggleMobiliariSize(option.value)">
                      {{ option.label }}
                    </div>
                  </div>
                </div>
              </div>

              <div class="filter-group caracteristicas-group">
                <label class="filter-label">
                  <i class="bi bi-stars"></i>
                  Características
                </label>
                <input
                  type="text"
                  v-model="specificFilters.mobiliari.caracteristicas"
                  placeholder="Características (separadas por comas)"
                  class="filter-input"
                  @input="filterServices"
                >
              </div>
            </div>

            <!-- Decoración -->
            <div v-if="selectedType === 'decoracio'" class="specific-filters-grid decoracio-grid">
              <!-- Primera fila -->
              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-flower1"></i>
                  Tipología
                </label>
                <div class="custom-select" @click="toggleDecoracioTipologiaDropdown($event)">
                  <div class="selected-option">
                    <div class="selected-tags" v-if="specificFilters.decoracio.tipologia.length > 0">
                      <span v-for="value in specificFilters.decoracio.tipologia"
                            :key="value"
                            class="selected-tag">
                        {{ getDecoracioTipologiaLabel([value]) }}
                        <i class="bi bi-x" @click.stop="toggleDecoracioTipologia(value)"></i>
                      </span>
                    </div>
                    <span v-else>Tipología</span>
                    <i class="bi" :class="showDecoracioTipologiaDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                  </div>
                  <div v-if="showDecoracioTipologiaDropdown" class="options-container">
                    <div v-for="option in decoracioTipologiaOptions"
                         :key="option.value"
                         class="option"
                         :class="{ 'selected': specificFilters.decoracio.tipologia.includes(option.value) }"
                         @click.stop="toggleDecoracioTipologia(option.value)">
                      {{ option.label }}
                    </div>
                  </div>
                </div>
              </div>

              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-tags"></i>
                  Subtipología
                </label>
                <input
                  type="text"
                  v-model="specificFilters.decoracio.subtipologia"
                  placeholder="Subtipología"
                  class="filter-input"
                  @input="filterServices"
                >
              </div>

              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-basket"></i>
                  Tipo de servicio
                </label>
                <div class="custom-select" @click="toggleDecoracioTipoServicioDropdown($event)">
                  <div class="selected-option">
                    {{ getDecoracioTipoServicioLabel(specificFilters.decoracio.is_rental) || 'Tipo de servicio' }}
                    <i class="bi" :class="showDecoracioTipoServicioDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                  </div>
                  <div v-if="showDecoracioTipoServicioDropdown" class="options-container">
                    <div v-for="option in decoracioTipoServicioOptions"
                         :key="option.value"
                         class="option"
                         :class="{ 'selected': specificFilters.decoracio.is_rental === option.value }"
                         @click.stop="toggleDecoracioTipoServicio(option.value)">
                      {{ option.label }}
                    </div>
                  </div>
                </div>
              </div>

              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-box"></i>
                  Cantidad
                </label>
                <div class="quantity-inputs">
                  <input
                    type="number"
                    v-model="specificFilters.decoracio.cantidad"
                    placeholder="Unidades"
                    class="filter-input"
                    @input="filterServices"
                  >
                </div>
              </div>

              <!-- Segunda fila -->
              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-square"></i>
                  Forma
                </label>
                <input
                  type="text"
                  v-model="specificFilters.decoracio.forma"
                  placeholder="Forma"
                  class="filter-input"
                  @input="filterServices"
                >
              </div>

              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-gear"></i>
                  Modalidad
                </label>
                <input
                  type="text"
                  v-model="specificFilters.decoracio.modality"
                  placeholder="Modalidad"
                  class="filter-input"
                  @input="filterServices"
                >
              </div>
              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-palette"></i>
                  Colores
                </label>
                <div class="custom-select" @click="toggleDecoracioColoresDropdown($event)">
                  <div class="selected-option">
                    <div class="selected-tags" v-if="specificFilters.decoracio.color.length > 0">
                      <span v-for="value in specificFilters.decoracio.color"
                            :key="value"
                            class="selected-tag">
                        {{ getDecoracioColoresLabel([value]) }}
                        <i class="bi bi-x" @click.stop="toggleDecoracioColor(value)"></i>
                      </span>
                    </div>
                    <span v-else>Colores</span>
                    <i class="bi" :class="showDecoracioColoresDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                  </div>
                  <div v-if="showDecoracioColoresDropdown" class="options-container">
                    <div v-for="option in decoracioColoresOptions"
                         :key="option.value"
                         class="option"
                         :class="{ 'selected': specificFilters.decoracio.color.includes(option.value) }"
                         @click.stop="toggleDecoracioColor(option.value)">
                      {{ option.label }}
                    </div>
                  </div>
                </div>
              </div>

              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-tools"></i>
                  Materiales
                </label>
                <div class="custom-select" @click="toggleDecoracioMaterialesDropdown($event)">
                  <div class="selected-option">
                    <div class="selected-tags" v-if="specificFilters.decoracio.material.length > 0">
                      <span v-for="value in specificFilters.decoracio.material"
                            :key="value"
                            class="selected-tag">
                        {{ getDecoracioMaterialesLabel([value]) }}
                        <i class="bi bi-x" @click.stop="toggleDecoracioMaterial(value)"></i>
                      </span>
                    </div>
                    <span v-else>Materiales</span>
                    <i class="bi" :class="showDecoracioMaterialesDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                  </div>
                  <div v-if="showDecoracioMaterialesDropdown" class="options-container">
                    <div v-for="option in decoracioMaterialesOptions"
                         :key="option.value"
                         class="option"
                         :class="{ 'selected': specificFilters.decoracio.material.includes(option.value) }"
                         @click.stop="toggleDecoracioMaterial(option.value)">
                      {{ option.label }}
                    </div>
                  </div>
                </div>
              </div>

              <!-- Tercera fila -->
              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-palette2"></i>
                  Estilo
                </label>
                <input
                  type="text"
                  v-model="specificFilters.decoracio.style"
                  placeholder="Estilo"
                  class="filter-input"
                  @input="filterServices"
                >
              </div>

              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-arrows-angle-expand"></i>
                  Tamaño
                </label>
                <div class="custom-select" @click="toggleDecoracioSizeDropdown($event)">
                  <div class="selected-option">
                    <div class="selected-tags" v-if="specificFilters.decoracio.size.length > 0">
                      <span v-for="value in specificFilters.decoracio.size"
                            :key="value"
                            class="selected-tag">
                        {{ value }}
                        <i class="bi bi-x" @click.stop="toggleDecoracioSize(value)"></i>
                      </span>
                    </div>
                    <span v-else>Tamaño</span>
                    <i class="bi" :class="showDecoracioSizeDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                  </div>
                  <div v-if="showDecoracioSizeDropdown" class="options-container">
                    <div v-for="option in decoracioSizeOptions"
                         :key="option.value"
                         class="option"
                         :class="{ 'selected': specificFilters.decoracio.size.includes(option.value) }"
                         @click.stop="toggleDecoracioSize(option.value)">
                      {{ option.label }}
                    </div>
                  </div>
                </div>
              </div>

              <div class="filter-group caracteristicas-group">
                <label class="filter-label">
                  <i class="bi bi-stars"></i>
                  Características
                </label>
                <input
                  type="text"
                  v-model="specificFilters.decoracio.caracteristicas"
                  placeholder="Características (separadas por comas)"
                  class="filter-input"
                  @input="filterServices"
                >
              </div>
            </div>
            <!-- Música -->
            <div v-if="selectedType === 'musica'" class="specific-filters-grid musica-grid">
              <!-- Primera fila -->
              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-music-note-beamed"></i>
                  Tipo de música
                </label>
                <div class="custom-select" @click="toggleMusicaTypeDropdown($event)">
                  <div class="selected-option">
                    {{ getMusicaTypeLabel(specificFilters.musica.musica_type) || 'Tipo de música' }}
                    <i class="bi" :class="showMusicaTypeDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
              </div>
                  <div v-if="showMusicaTypeDropdown" class="options-container">
                    <div v-for="option in musicaTypeOptions"
                         :key="option.value"
                         class="option"
                         :class="{ 'selected': specificFilters.musica.musica_type === option.value }"
                         @click.stop="toggleMusicaType(option.value)">
                      {{ option.label }}
                    </div>
                  </div>
                </div>
              </div>

              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-music-note-list"></i>
                  Tipo de canciones
                </label>
                <div class="custom-select" @click="toggleMusicaCancionesDropdown($event)">
                  <div class="selected-option">
                    {{ getMusicaCancionesLabel(specificFilters.musica.canciones) || 'Tipo de canciones' }}
                    <i class="bi" :class="showMusicaCancionesDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
              </div>
                  <div v-if="showMusicaCancionesDropdown" class="options-container">
                    <div v-for="option in musicaCancionesOptions"
                         :key="option.value"
                         class="option"
                         :class="{ 'selected': specificFilters.musica.canciones === option.value }"
                         @click.stop="toggleMusicaCanciones(option.value)">
                      {{ option.label }}
                    </div>
                  </div>
                </div>
              </div>

              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-music-note"></i>
                  Solicitar canción nueva
                </label>
                <div class="custom-select" @click="toggleMusicaSolicitarCancionDropdown($event)">
                  <div class="selected-option">
                    {{ getMusicaSolicitarCancionLabel(specificFilters.musica.solicitar_cancion_nueva) || 'Solicitar canción nueva' }}
                    <i class="bi" :class="showMusicaSolicitarCancionDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                  </div>
                  <div v-if="showMusicaSolicitarCancionDropdown" class="options-container">
                    <div v-for="option in musicaSolicitarCancionOptions"
                         :key="option.value"
                         class="option"
                         :class="{ 'selected': specificFilters.musica.solicitar_cancion_nueva === option.value }"
                         @click.stop="toggleMusicaSolicitarCancion(option.value)">
                      {{ option.label }}
                    </div>
                  </div>
                </div>
              </div>

              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-speaker"></i>
                  Equipo propio
                </label>
                <div class="custom-select" @click="toggleMusicaEquipoPropioDropdown($event)">
                  <div class="selected-option">
                    {{ getMusicaEquipoPropioLabel(specificFilters.musica.equipo_propio) || 'Equipo propio' }}
                    <i class="bi" :class="showMusicaEquipoPropioDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                  </div>
                  <div v-if="showMusicaEquipoPropioDropdown" class="options-container">
                    <div v-for="option in musicaEquipoPropioOptions"
                         :key="option.value"
                         class="option"
                         :class="{ 'selected': specificFilters.musica.equipo_propio === option.value }"
                         @click.stop="toggleMusicaEquipoPropio(option.value)">
                      {{ option.label }}
                    </div>
                  </div>
                </div>
              </div>

              <div class="filter-group">
                <label class="filter-label">
                  <i class="bi bi-clock"></i>
                  Duración (horas)
                </label>
                <div class="duration-inputs">
                <input
                  type="number"
                    v-model="specificFilters.musica.duracion_min"
                    placeholder="Mín"
                    class="duration-input"
                    @input="filterServices"
                  >
                  <input
                    type="number"
                    v-model="specificFilters.musica.duracion_max"
                    placeholder="Máx"
                    class="duration-input"
                    @input="filterServices"
                  >
                </div>
              </div>

              <!-- Segunda fila -->
              <div class="filter-group medium-width">
                <label class="filter-label">
                  <i class="bi bi-music-note"></i>
                  Géneros
                </label>
                <div class="custom-select" @click="toggleMusicaGenerosDropdown">
                  <div class="selected-option">
                    <div class="selected-tags" v-if="specificFilters.musica.generos.length > 0">
                      <span v-for="value in specificFilters.musica.generos"
                            :key="value"
                            class="selected-tag">
                        {{ getMusicaGenerosLabel([value]) }}
                        <i class="bi bi-x" @click.stop="toggleMusicaGeneros(value)"></i>
                      </span>
                    </div>
                    <span v-else>Géneros musicales</span>
                    <i class="bi" :class="showMusicaGenerosDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                  </div>
                  <div v-if="showMusicaGenerosDropdown" class="options-container">
                    <div v-for="option in musicaGenerosOptions"
                         :key="option.value"
                         class="option"
                         :class="{ 'selected': specificFilters.musica.generos.includes(option.value) }"
                         @click.stop="toggleMusicaGeneros(option.value)">
                      {{ option.label }}
                    </div>
                  </div>
                </div>
              </div>

              <div class="filter-group medium-width">
                <label class="filter-label">
                  <img src="@/assets/icono_instrument.png" alt="Instrument" class="filter-label-icon" />
                  Instrumentos
                </label>
                <input
                  type="text"
                  v-model="specificFilters.musica.instrumentos"
                  placeholder="Instrumentos (separados por comas)"
                  class="filter-input"
                  @input="filterServices"
                >
              </div>

              <!-- Tercera fila -->
              <div class="filter-group full-width">
                <label class="filter-label">
                  <i class="bi bi-stars"></i>
                  Características
                </label>
                <input
                  type="text"
                  v-model="specificFilters.musica.caracteristicas"
                  placeholder="Características (separadas por comas)"
                  class="filter-input"
                  @input="filterServices"
                >
              </div>
            </div>

            <!-- Fotografía -->
            <div v-if="selectedType === 'fotografia'" class="fotografia-filters">
              <div class="filters-row">
                <div class="filter-group fotografia-type-group">
                  <label class="filter-label">
                    <i class="bi bi-camera"></i>
                    Tipo de servicio
                  </label>
                  <div class="custom-select custom-select-fotografia" @click="toggleFotografiaTypeDropdown">
                    <div class="selected-option">
                      {{ getFotografiaTypeLabel(specificFilters.fotografia.fotografiaType) }}
                      <i class="bi" :class="showFotografiaTypeDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
              </div>
                    <div v-if="showFotografiaTypeDropdown" class="options-container">
                      <div v-for="option in fotografiaTypeOptions"
                           :key="option.value"
                           class="option"
                           :class="{ 'selected': specificFilters.fotografia.fotografiaType === option.value }"
                           @click.stop="selectFotografiaType(option.value)">
                        {{ option.label }}
              </div>
                    </div>
                  </div>
                </div>

                <div class="filter-group servicio-especial-group">
                  <label class="filter-label">
                    <i class="bi bi-star"></i>
                    Servicio especial
                  </label>
                  <div class="custom-select custom-select-servicio-especial"
                       @click="specificFilters.fotografia.fotografiaType === 'servicio_especial' && toggleServicioEspecialDropdown()"
                       :class="{ 'disabled': specificFilters.fotografia.fotografiaType !== 'servicio_especial' }">
                    <div class="selected-option">
                      <div class="selected-tags" v-if="specificFilters.fotografia.servicioEspecialTypes.length > 0">
                        <span v-for="value in specificFilters.fotografia.servicioEspecialTypes" :key="value" class="selected-tag">
                          {{ getServicioEspecialLabel(value) }}
                          <i class="bi bi-x" @click.stop="removeServicioEspecial(value)"></i>
                        </span>
                      </div>
                      <span v-else>Servicio especial</span>
                      <i class="bi" :class="showServicioEspecialDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                    </div>
                    <div v-if="showServicioEspecialDropdown" class="options-container">
                      <div class="option clear-option" @click.stop="clearServicioEspecial">
                        Cualquiera
                      </div>
                      <div v-for="option in servicioEspecialOptions.filter(opt => opt.value !== '')"
                           :key="option.value"
                           class="option"
                           :class="{ 'selected': specificFilters.fotografia.servicioEspecialTypes.includes(option.value) }"
                           @click.stop="toggleServicioEspecial(option.value)">
                        {{ option.label }}
                      </div>
                    </div>
                  </div>
                </div>

                <div class="filter-group duracion-group">
                  <label class="filter-label">
                    <i class="bi bi-clock"></i>
                    Duración (horas)
                  </label>
                  <div class="duration-inputs">
                <input
                  type="number"
                      v-model="specificFilters.fotografia.duracionMin"
                      placeholder="Min"
                      class="duration-input"
                      @input="filterServices"
                      min="0"
                      step="0.5"
                    >
                    <input
                      type="number"
                      v-model="specificFilters.fotografia.duracionMax"
                      placeholder="Max"
                      class="duration-input"
                      @input="filterServices"
                      min="0"
                      step="0.5"
                    >
                  </div>
                </div>
              </div>

              <div class="filters-row">
                <div class="filter-group caracteristicas-group full-width">
                  <label class="filter-label">
                    <i class="bi bi-stars"></i>
                    Características
                  </label>
                  <input
                    type="text"
                    v-model="specificFilters.fotografia.caracteristicas"
                    placeholder="Características (separadas por comas)"
                  class="filter-input"
                    @input="filterServices"
                >
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Lista de servicios del tipo seleccionado -->
      <div class="services-grid">
        <template v-if="loading">
          <div class="loading-spinner">
            <i class="bi bi-arrow-repeat"></i>
            <span>Cargando servicios...</span>
          </div>
        </template>
        <template v-else-if="filteredServices.length === 0">
          <div class="no-services">
            <i class="bi bi-search"></i>
            <h3>No se encontraron servicios</h3>
            <p>Intenta con otros filtros o términos de búsqueda</p>
          </div>
        </template>
        <template v-else>
            <component
              v-for="service in filteredServices"
              :is="getServiceComponent(service)"
            :key="service.id"
            :service="service"
            @view-details="viewServiceDetails"
            @contact-provider="contactProvider"
          />
        </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CateringService from '../components/Services/CateringService.vue'
import MobiliariService from '../components/Services/MobiliariService.vue'
import DecoracioService from '../components/Services/DecoracioService.vue'
import MusicaService from '../components/Services/MusicaService.vue'
import FotografiaService from '../components/Services/FotografiaService.vue'
import EspaiService from '../components/Services/EspaiService.vue'
import ServiceServices from '../services/ServiceServices'
import iconCatering from '@/assets/icon_catering2.png'
import iconMobiliari from '@/assets/icon_mobiliari2.png'
import Swal from 'sweetalert2'

export default {
  name: 'Services',
  components: {
    CateringService,
    MobiliariService,
    DecoracioService,
    MusicaService,
    FotografiaService,
    EspaiService
  },
  data () {
    return {
      logo: require('../assets/LogoEventAiTransGran.png'),
      services: [],
      loading: true,
      searchQuery: '',
      selectedType: '',
      sortBy: 'price_asc',
      showSpecificFilters: false,
      showEspaiTypeDropdown: false,
      showSortDropdown: false,
      showDayDropdown: false,
      showCateringEntregaDropdown: false,
      showCateringTypeDropdown: false,
      showCateringMenuTypeDropdown: false,
      showCateringAlergenosDropdown: false,
      showCateringTipoServicioDropdown: false,
      showCateringArticuloTypeDropdown: false,
      // Añadir las variables de control para los dropdowns de mobiliari
      showMobiliariTipologiaDropdown: false,
      showMobiliariTipoServicioDropdown: false,
      showMobiliariColoresDropdown: false,
      showMobiliariMaterialesDropdown: false,
      showMobiliariSizeDropdown: false,
      // Añadir variables para los dropdowns de decoración
      showDecoracioTipologiaDropdown: false,
      showDecoracioTipoServicioDropdown: false,
      showDecoracioColoresDropdown: false,
      showDecoracioMaterialesDropdown: false,
      showDecoracioSizeDropdown: false,
      espaiTypeOptions: [
        { value: '', label: 'Cualquiera' },
        { value: 'masia', label: 'Masía' },
        { value: 'restaurante', label: 'Restaurante' },
        { value: 'hotel', label: 'Hotel' },
        { value: 'local', label: 'Local' },
        { value: 'sala', label: 'Sala' },
        { value: 'comedor', label: 'Comedor' },
        { value: 'discoteca', label: 'Discoteca' },
        { value: 'espacio_de_actividades', label: 'Espacio de actividades' },
        { value: 'terraza', label: 'Terraza' },
        { value: 'atico', label: 'Ático' },
        { value: 'castillo', label: 'Castillo' },
        { value: 'jardin', label: 'Jardín' },
        { value: 'casa_rural', label: 'Casa rural' },
        { value: 'finca', label: 'Finca' },
        { value: 'molino', label: 'Molino' },
        { value: 'villa', label: 'Villa' },
        { value: 'hacienda', label: 'Hacienda' },
        { value: 'espacio_singular', label: 'Espacio singular' },
        { value: 'palacio', label: 'Palacio' },
        { value: 'bosque', label: 'Bosque' },
        { value: 'otros', label: 'Otros' }
      ],
      cateringEntregaOptions: [
        { value: '', label: 'Cualquiera' },
        { value: 'establecimiento', label: 'Establecimiento' },
        { value: 'entrega', label: 'Entrega' },
        { value: 'servicio_domicilio', label: 'Servicio a domicilio' }
      ],
      cateringTypeOptions: [
        { value: '', label: 'Cualquiera' },
        { value: 'mesa_servido', label: 'Mesa servido' },
        { value: 'mesa_compartido', label: 'Mesa compartido' },
        { value: 'mesa_redonda', label: 'Mesa redonda' },
        { value: 'banquete_imperial', label: 'Banquete imperial' },
        { value: 'gueridon', label: 'Guéridon' },
        { value: 'buffet', label: 'Buffet' },
        { value: 'estaciones', label: 'Estaciones' },
        { value: 'coctel', label: 'Cóctel' },
        { value: 'finger_food', label: 'Finger food' },
        { value: 'mixto_coctel_mesa', label: 'Mixto cóctel-mesa' },
        { value: 'mixto_coctel_buffet', label: 'Mixto cóctel-buffet' },
        { value: 'show_cooking', label: 'Show cooking' },
        { value: 'food_truck', label: 'Food truck' }
      ],
      cateringMenuTypeOptions: [
        { value: '', label: 'Cualquiera' },
        { value: 'tapas', label: 'Tapas' },
        { value: 'pizza', label: 'Pizza' },
        { value: 'mediterraneo', label: 'Mediterráneo' },
        { value: 'asiatico', label: 'Asiático' },
        { value: 'mexicano', label: 'Mexicano' },
        { value: 'italiano', label: 'Italiano' },
        { value: 'vegetariano', label: 'Vegetariano' },
        { value: 'vegano', label: 'Vegano' },
        { value: 'sin_gluten', label: 'Sin gluten' },
        { value: 'infantil', label: 'Infantil' },
        { value: 'gourmet', label: 'Gourmet' },
        { value: 'fusion', label: 'Fusión' },
        { value: 'marisco', label: 'Marisco' },
        { value: 'carnes', label: 'Carnes' },
        { value: 'postres', label: 'Postres' },
        { value: 'bodegas', label: 'Bodegas' },
        { value: 'brunch', label: 'Brunch' },
        { value: 'coffee_break', label: 'Coffee break' },
        { value: 'picnic', label: 'Picnic' },
        { value: 'barbacoa', label: 'Barbacoa' },
        { value: 'paella', label: 'Paella' },
        { value: 'sushi', label: 'Sushi' },
        { value: 'variado', label: 'Variado' }
      ],
      cateringAlergenosOptions: [
        { value: '', label: 'Ninguno' },
        { value: 'gluten', label: 'Gluten' },
        { value: 'crustaceos', label: 'Crustáceos' },
        { value: 'pescado', label: 'Pescado' },
        { value: 'huevos', label: 'Huevos' },
        { value: 'cacahuetes', label: 'Cacahuetes' },
        { value: 'soja', label: 'Soja' },
        { value: 'lacteos', label: 'Lácteos' },
        { value: 'frutos_de_cascara', label: 'Frutos de cáscara' },
        { value: 'apio', label: 'Apio' },
        { value: 'mostaza', label: 'Mostaza' },
        { value: 'sesamo', label: 'Sésamo' },
        { value: 'di_azufre', label: 'Dióxido de azufre y sulfitos' },
        { value: 'altramuces', label: 'Altramuces' },
        { value: 'moluscos', label: 'Moluscos' }
      ],
      cateringTipoServicioOptions: [
        { value: '', label: 'Cualquiera' },
        { value: 'menu', label: 'Menú' },
        { value: 'articulo', label: 'Artículo' }
      ],
      cateringArticuloTypeOptions: [
        { value: '', label: 'Cualquiera' },
        { value: 'agua', label: 'Agua' },
        { value: 'refrescos', label: 'Refrescos' },
        { value: 'zumos', label: 'Zumos' },
        { value: 'cerveza', label: 'Cerveza' },
        { value: 'vino', label: 'Vino' },
        { value: 'cava', label: 'Cava' },
        { value: 'champagne', label: 'Champagne' },
        { value: 'cocteles', label: 'Cócteles' },
        { value: 'cafe', label: 'Café' },
        { value: 'te', label: 'Té' },
        { value: 'infusiones', label: 'Infusiones' },
        { value: 'aceitunas', label: 'Aceitunas' },
        { value: 'frutos_secos', label: 'Frutos secos' },
        { value: 'patatas', label: 'Patatas fritas/snacks' },
        { value: 'tapas', label: 'Tapas variadas' },
        { value: 'canapes', label: 'Canapés' },
        { value: 'quesos', label: 'Tabla de quesos' },
        { value: 'embutidos', label: 'Tabla de embutidos' },
        { value: 'tartas', label: 'Tartas' },
        { value: 'pasteles', label: 'Pasteles' },
        { value: 'helados', label: 'Helados' },
        { value: 'fruta', label: 'Fruta fresca' },
        { value: 'chocolates', label: 'Chocolates' },
        { value: 'galletas', label: 'Galletas' },
        { value: 'dulces', label: 'Dulces varios' },
        { value: 'variado', label: 'Artículos variados' },
        { value: 'otro', label: 'Otro tipo de artículo' }
      ],
      filters: {
        provincia: '',
        ciudad: '',
        diaSemana: [],
        precioMin: '',
        precioMax: '',
        horaInicio: '',
        horaFinal: ''
      },
      serviceTypes: [
        { value: 'espai', label: 'Espacios', icon: 'bi bi-house', isImg: false },
        { value: 'catering', label: 'Catering', icon: iconCatering, isImg: true },
        { value: 'mobiliari', label: 'Mobiliario', icon: iconMobiliari, isImg: true },
        { value: 'decoracio', label: 'Decoración', icon: 'bi bi-flower1', isImg: false },
        { value: 'musica', label: 'Música', icon: 'bi bi-music-note-beamed', isImg: false },
        { value: 'fotografia', label: 'Fotografía', icon: 'bi bi-camera', isImg: false }
        // Puedes añadir más tipos aquí si los implementas
      ],
      specificFilters: {
        espai: {
          type: [],
          capacitat: '',
          caracteristicas: ''
        },
        catering: {
          tipo_entrega: '',
          tipo_catering: [],
          comensales: '',
          duracion_min: '',
          duracion_max: '',
          menu_type: [],
          articulo_type: [],
          alergenos: [],
          tipo_servicio: ''
        },
        mobiliari: {
          tipologia: [], // Cambiado de string a array
          subtipologia: '',
          is_rental: '',
          cantidad: '',
          forma: '',
          modality: '',
          color: [],
          material: [],
          style: '',
          size: [],
          caracteristicas: ''
        },
        decoracio: {
          tipologia: [],
          subtipologia: '',
          is_rental: '',
          cantidad: '',
          forma: '',
          modality: '',
          color: [],
          material: [],
          style: '',
          size: [],
          caracteristicas: ''
        },
        musica: {
          musica_type: '',
          canciones: '',
          duracion_min: '',
          duracion_max: '',
          generos: [],
          instrumentos: '',
          caracteristicas: '',
          solicitar_cancion_nueva: '',
          equipo_propio: ''
        },
        fotografia: {
          fotografiaType: '',
          servicioEspecialTypes: [],
          duracionMin: '',
          duracionMax: '',
          caracteristicas: ''
        }
      },
      sortOptions: [
        { value: 'price_asc', label: 'Precio: Menor a Mayor' },
        { value: 'price_desc', label: 'Precio: Mayor a Menor' }
      ],
      dayOptions: [
        { value: '', label: 'Cualquiera' },
        { value: '1', label: 'Lunes' },
        { value: '2', label: 'Martes' },
        { value: '3', label: 'Miércoles' },
        { value: '4', label: 'Jueves' },
        { value: '5', label: 'Viernes' },
        { value: '6', label: 'Sábado' },
        { value: '0', label: 'Domingo' }
      ],
      mobiliariTipologiaOptions: [
        { value: '', label: 'Cualquiera' },
        { value: 'Mesas', label: 'Mesas' },
        { value: 'Sillas y taburetes', label: 'Sillas y taburetes' },
        { value: 'Tronas', label: 'Tronas' },
        { value: 'Barras, barriles, toneles, chill-out', label: 'Barras, barriles, toneles, chill-out' },
        { value: 'Escaleras y vigas', label: 'Escaleras y vigas' },
        { value: 'Pales', label: 'Pales' },
        { value: 'Catenarias', label: 'Catenarias' },
        { value: 'Colgadores y guardarropas', label: 'Colgadores y guardarropas' },
        { value: 'Cubierta', label: 'Cubierta' },
        { value: 'Cristalera', label: 'Cristalera' },
        { value: 'Carpas', label: 'Carpas' },
        { value: 'Toldos y parasoles', label: 'Toldos y parasoles' },
        { value: 'Paredes', label: 'Paredes' },
        { value: 'Suelos', label: 'Suelos' },
        { value: 'Edificaciones temporales', label: 'Edificaciones temporales' },
        { value: 'Stands', label: 'Stands' },
        { value: 'Tocador maquillaje', label: 'Tocador maquillaje' },
        { value: 'Espejos', label: 'Espejos' },
        { value: 'Vitrinas', label: 'Vitrinas' },
        { value: 'Mostradores y barras', label: 'Mostradores y barras' },
        { value: 'Iglú', label: 'Iglú' },
        { value: 'Estufas y calefactores', label: 'Estufas y calefactores' },
        { value: 'Ventiladores y aire acondicionado', label: 'Ventiladores y aire acondicionado' },
        { value: 'Pizarras', label: 'Pizarras' },
        { value: 'Pantallas', label: 'Pantallas' },
        { value: 'Proyectores', label: 'Proyectores' },
        { value: 'Altavoces', label: 'Altavoces' },
        { value: 'Micrófonos', label: 'Micrófonos' },
        { value: 'Focos', label: 'Focos' },
        { value: 'Bola de discoteca', label: 'Bola de discoteca' },
        { value: 'Tabla DJ', label: 'Tabla DJ' },
        { value: 'Electricidad y enchufes', label: 'Electricidad y enchufes' },
        { value: 'Aires y farolillos', label: 'Aires y farolillos' },
        { value: 'Limpieza', label: 'Limpieza' },
        { value: 'Gradas y tribunas', label: 'Gradas y tribunas' },
        { value: 'Juegos', label: 'Juegos' },
        { value: 'Atracciones', label: 'Atracciones' },
        { value: 'Maniquíes', label: 'Maniquíes' },
        { value: 'Máquinas de comida', label: 'Máquinas de comida' },
        { value: 'WC', label: 'WC' },
        { value: 'Contenedores y papeleras', label: 'Contenedores y papeleras' }
      ],
      mobiliariTipoServicioOptions: [
        { value: '', label: 'Cualquiera' },
        { value: 'true', label: 'Alquiler' },
        { value: 'false', label: 'Venta' }
      ],
      mobiliariColoresOptions: [
        { value: '', label: 'Cualquiera' },
        { value: 'Blanco', label: 'Blanco' },
        { value: 'Negro', label: 'Negro' },
        { value: 'Gris', label: 'Gris' },
        { value: 'Marrón', label: 'Marrón' },
        { value: 'Beige', label: 'Beige' },
        { value: 'Crema', label: 'Crema' },
        { value: 'Rojo', label: 'Rojo' },
        { value: 'Azul', label: 'Azul' },
        { value: 'Verde', label: 'Verde' },
        { value: 'Amarillo', label: 'Amarillo' },
        { value: 'Naranja', label: 'Naranja' },
        { value: 'Rosa', label: 'Rosa' },
        { value: 'Morado', label: 'Morado' },
        { value: 'Turquesa', label: 'Turquesa' },
        { value: 'Dorado', label: 'Dorado' },
        { value: 'Plateado', label: 'Plateado' },
        { value: 'Transparente', label: 'Transparente' },
        { value: 'Madera natural', label: 'Madera natural' },
        { value: 'Otro', label: 'Otro' }
      ],
      mobiliariMaterialesOptions: [
        { value: '', label: 'Cualquiera' },
        { value: 'Madera', label: 'Madera' },
        { value: 'Metal', label: 'Metal' },
        { value: 'Plástico', label: 'Plástico' },
        { value: 'Vidrio', label: 'Vidrio' },
        { value: 'Cristal', label: 'Cristal' },
        { value: 'Tela', label: 'Tela' },
        { value: 'Cuero', label: 'Cuero' },
        { value: 'Poliéster', label: 'Poliéster' },
        { value: 'Acero', label: 'Acero' },
        { value: 'Aluminio', label: 'Aluminio' },
        { value: 'Hierro', label: 'Hierro' },
        { value: 'Mármol', label: 'Mármol' },
        { value: 'Granito', label: 'Granito' },
        { value: 'Cerámica', label: 'Cerámica' },
        { value: 'Porcelana', label: 'Porcelana' },
        { value: 'Resina', label: 'Resina' },
        { value: 'Fibra', label: 'Fibra' },
        { value: 'Otro', label: 'Otro' }
      ],
      mobiliariSizeOptions: [
        { value: 'Muy pequeño', label: 'Muy pequeño' },
        { value: 'Pequeño', label: 'Pequeño' },
        { value: 'Mediano', label: 'Mediano' },
        { value: 'Grande', label: 'Grande' },
        { value: 'Muy grande', label: 'Muy grande' },
        { value: 'Extra grande', label: 'Extra grande' },
        { value: 'Otro', label: 'Otro' }
      ],
      decoracioTipologiaOptions: [
        { value: '', label: 'Cualquiera' },
        { value: 'flores', label: 'Flores' },
        { value: 'globos', label: 'Globos' },
        { value: 'luces_guinalda', label: 'Luces guirnalda' },
        { value: 'luces_led', label: 'Luces LED' },
        { value: 'fundas_silla', label: 'Fundas de silla' },
        { value: 'cojines_mantas', label: 'Cojines y mantas' },
        { value: 'telas', label: 'Telas' },
        { value: 'carteles', label: 'Carteles' },
        { value: 'photocall', label: 'Photocall' },
        { value: 'disfraces', label: 'Disfraces' },
        { value: 'vasos', label: 'Vasos' },
        { value: 'vajilla_bandejas', label: 'Vajilla y bandejas' },
        { value: 'manteles_servilletas', label: 'Manteles y servilletas' },
        { value: 'utensilios_cocina', label: 'Utensilios de cocina' },
        { value: 'electrodomesticos_cocina', label: 'Electrodomésticos y maquinaria' },
        { value: 'bufet', label: 'Bufet' },
        { value: 'foodtruck', label: 'Foodtruck' },
        { value: 'barbacoa', label: 'Barbacoa' }
      ],
      decoracioTipoServicioOptions: [
        { value: 'true', label: 'Alquiler' },
        { value: 'false', label: 'Venta' }
      ],
      decoracioColoresOptions: [
        { value: '', label: 'Cualquiera' },
        { value: 'Blanco', label: 'Blanco' },
        { value: 'Negro', label: 'Negro' },
        { value: 'Gris', label: 'Gris' },
        { value: 'Marrón', label: 'Marrón' },
        { value: 'Beige', label: 'Beige' },
        { value: 'Crema', label: 'Crema' },
        { value: 'Rojo', label: 'Rojo' },
        { value: 'Azul', label: 'Azul' },
        { value: 'Verde', label: 'Verde' },
        { value: 'Amarillo', label: 'Amarillo' },
        { value: 'Naranja', label: 'Naranja' },
        { value: 'Rosa', label: 'Rosa' },
        { value: 'Morado', label: 'Morado' },
        { value: 'Turquesa', label: 'Turquesa' },
        { value: 'Dorado', label: 'Dorado' },
        { value: 'Plateado', label: 'Plateado' },
        { value: 'Transparente', label: 'Transparente' },
        { value: 'Madera natural', label: 'Madera natural' },
        { value: 'Otro', label: 'Otro' }
      ],
      decoracioMaterialesOptions: [
        { value: '', label: 'Cualquiera' },
        { value: 'Madera', label: 'Madera' },
        { value: 'Metal', label: 'Metal' },
        { value: 'Plástico', label: 'Plástico' },
        { value: 'Vidrio', label: 'Vidrio' },
        { value: 'Cristal', label: 'Cristal' },
        { value: 'Tela', label: 'Tela' },
        { value: 'Cuero', label: 'Cuero' },
        { value: 'Poliéster', label: 'Poliéster' },
        { value: 'Acero', label: 'Acero' },
        { value: 'Aluminio', label: 'Aluminio' },
        { value: 'Hierro', label: 'Hierro' },
        { value: 'Mármol', label: 'Mármol' },
        { value: 'Granito', label: 'Granito' },
        { value: 'Cerámica', label: 'Cerámica' },
        { value: 'Porcelana', label: 'Porcelana' },
        { value: 'Resina', label: 'Resina' },
        { value: 'Fibra', label: 'Fibra' },
        { value: 'Otro', label: 'Otro' }
      ],
      decoracioSizeOptions: [
        { value: 'Muy pequeño', label: 'Muy pequeño' },
        { value: 'Pequeño', label: 'Pequeño' },
        { value: 'Mediano', label: 'Mediano' },
        { value: 'Grande', label: 'Grande' },
        { value: 'Muy grande', label: 'Muy grande' },
        { value: 'Extra grande', label: 'Extra grande' },
        { value: 'Otro', label: 'Otro' }
      ],
      // Opciones para música
      musicaTypeOptions: [
        { value: '', label: 'Cualquiera' },
        { value: 'dj', label: 'DJ' },
        { value: 'musico', label: 'Músico' }
      ],
      musicaCancionesOptions: [
        { value: '', label: 'Cualquiera' },
        { value: 'propias', label: 'Propias' },
        { value: 'versiones', label: 'Versiones' }
      ],
      musicaGenerosOptions: [
        { value: '', label: 'Cualquiera' },
        { value: 'pop', label: 'Pop' },
        { value: 'rock', label: 'Rock' },
        { value: 'jazz', label: 'Jazz' },
        { value: 'blues', label: 'Blues' },
        { value: 'soul', label: 'Soul' },
        { value: 'funk', label: 'Funk' },
        { value: 'r&b', label: 'R&B' },
        { value: 'hip-hop', label: 'Hip-Hop' },
        { value: 'electronic', label: 'Electronic' },
        { value: 'house', label: 'House' },
        { value: 'techno', label: 'Techno' },
        { value: 'reggaeton', label: 'Reggaeton' },
        { value: 'salsa', label: 'Salsa' },
        { value: 'bachata', label: 'Bachata' },
        { value: 'merengue', label: 'Merengue' },
        { value: 'flamenco', label: 'Flamenco' },
        { value: 'clasica', label: 'Clásica' },
        { value: 'indie', label: 'Indie' },
        { value: 'metal', label: 'Metal' },
        { value: 'punk', label: 'Punk' },
        { value: 'country', label: 'Country' },
        { value: 'folk', label: 'Folk' },
        { value: 'latin', label: 'Latin' },
        { value: 'disco', label: 'Disco' },
        { value: 'reggae', label: 'Reggae' },
        { value: 'gospel', label: 'Gospel' },
        { value: 'bossa-nova', label: 'Bossa Nova' },
        { value: 'samba', label: 'Samba' },
        { value: 'tango', label: 'Tango' },
        { value: 'ballroom', label: 'Ballroom' }
      ],
      musicaSolicitarCancionOptions: [
        { value: '', label: 'Cualquiera' },
        { value: 'true', label: 'Sí' },
        { value: 'false', label: 'No' }
      ],
      musicaEquipoPropioOptions: [
        { value: '', label: 'Cualquiera' },
        { value: 'true', label: 'Sí' },
        { value: 'false', label: 'No' }
      ],
      showMusicaTypeDropdown: false,
      showMusicaCancionesDropdown: false,
      showMusicaGenerosDropdown: false,
      showMusicaSolicitarCancionDropdown: false,
      showMusicaEquipoPropioDropdown: false,
      fotografiaTypeOptions: [
        { value: '', label: 'Cualquiera' },
        { value: 'fotografia', label: 'Fotografía' },
        { value: 'video', label: 'Vídeo' },
        { value: 'servicio_especial', label: 'Servicio Especial' }
      ],
      servicioEspecialOptions: [
        { value: '', label: 'Cualquiera' },
        { value: 'impresion_instantanea', label: 'Impresión Instantánea' },
        { value: 'fotomaton', label: 'Fotomatón' },
        { value: 'cabina', label: 'Cabina' },
        { value: 'espejo_magico', label: 'Espejo Mágico' },
        { value: 'video_360', label: 'Video 360' },
        { value: 'gift_box', label: 'Gift Box' },
        { value: 'virtual', label: 'Virtual' },
        { value: 'camara_oculta', label: 'Cámara Oculta' }
      ],
      showFotografiaTypeDropdown: false,
      showServicioEspecialDropdown: false,
      isNavbarHidden: false,
      lastScrollTop: 0,
      scrollTimeout: null,
      mouseY: 0,
      observer: null
    }
  },
  computed: {
    filteredServices () {
      let filtered = [...this.services]
      // Filtrar por tipo seleccionado
      if (this.selectedType) {
        if (this.selectedType === 'mobiliari') {
          filtered = this.services.filter(service => {
            return service.type === 'mobiliari-decoracio' &&
                   service.mobiliari_decoracio &&
                   service.mobiliari_decoracio.service_type === 'mobiliario'
          })
        } else if (this.selectedType === 'decoracio') {
          filtered = this.services.filter(service => {
            return service.type === 'mobiliari-decoracio' &&
                   service.mobiliari_decoracio &&
                   service.mobiliari_decoracio.service_type === 'decoracion'
          })
        } else {
          filtered = this.services.filter(service => service.type === this.selectedType)
        }
      }
      console.log(filtered)

      // Filtrar por búsqueda
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        filtered = filtered.filter(service =>
          service.name.toLowerCase().includes(query) ||
          (service.description && service.description.toLowerCase().includes(query))
        )
      }

      // Filtrar por provincia
      if (this.filters.provincia) {
        const provincia = this.filters.provincia.toLowerCase()
        filtered = filtered.filter(service =>
          service.address && service.address.provincia.toLowerCase().includes(provincia)
        )
      }

      // Filtrar por ciudad
      if (this.filters.ciudad) {
        const ciudad = this.filters.ciudad.toLowerCase()
        filtered = filtered.filter(service =>
          service.address && service.address.ciudad.toLowerCase().includes(ciudad)
        )
      }

      // Filtrar por día de la semana
      if (this.filters.diaSemana.length > 0) {
        filtered = filtered.filter(service =>
          service.availability_rules && service.availability_rules.some(rule =>
            this.filters.diaSemana.some(dia => rule.dias_semana.includes(parseInt(dia)))
          )
        )
      }

      // Filtrar por precio mínimo
      if (this.filters.precioMin) {
        const minPrice = parseFloat(this.filters.precioMin)
        filtered = filtered.filter(service => {
          const minServicePrice = this.getMinPrice(service)
          return minServicePrice !== null && minServicePrice >= minPrice
        })
      }

      // Filtrar por precio máximo
      if (this.filters.precioMax) {
        const maxPrice = parseFloat(this.filters.precioMax)
        filtered = filtered.filter(service => {
          const minServicePrice = this.getMinPrice(service)
          return minServicePrice !== null && minServicePrice <= maxPrice
        })
      }

      // Filtros específicos para espacios
      if (this.selectedType === 'espai') {
        // Filtrar por tipo de espacio
        if (this.specificFilters.espai.type.length > 0) {
          filtered = filtered.filter(service =>
            service.espai && service.espai.espai_type && this.specificFilters.espai.type.some(t => service.espai.espai_type.includes(t))
          )
        }

        // Filtrar por capacidad
        if (this.specificFilters.espai.capacitat) {
          const capacidad = parseInt(this.specificFilters.espai.capacitat)
          filtered = filtered.filter(service =>
            service.espai &&
            service.espai.capacitat_min <= capacidad &&
            service.espai.capacitat_max >= capacidad
          )
        }

        // Filtrar por características
        if (this.specificFilters.espai.caracteristicas) {
          const caracteristicas = this.specificFilters.espai.caracteristicas
            .split(',')
            .map(c => c.trim().toLowerCase())
            .filter(c => c.length > 0)

          if (caracteristicas.length > 0) {
            filtered = filtered.filter(service =>
              service.espai &&
              service.espai.caracteristicas &&
              caracteristicas.every(c =>
                service.espai.caracteristicas.some(servCar =>
                  servCar.toLowerCase().includes(c)
                )
              )
            )
          }
        }
      }

      // Filtros específicos para catering
      if (this.selectedType === 'catering') {
        // Filtrar por tipo de entrega
        if (this.specificFilters.catering.tipo_entrega) {
          filtered = filtered.filter(service =>
            service.catering &&
            service.catering.tipo_entrega === this.specificFilters.catering.tipo_entrega
          )
        }

        // Filtrar por tipo de catering (solo si es servicio a domicilio)
        if (this.specificFilters.catering.tipo_entrega === 'servicio_domicilio' && this.specificFilters.catering.tipo_catering.length > 0) {
          filtered = filtered.filter(service =>
            service.catering && service.catering.tipo_catering &&
            this.specificFilters.catering.tipo_catering.some(t => service.catering.tipo_catering.includes(t))
          )
        }

        // Filtrar por tipo de menú
        if (this.specificFilters.catering.menu_type.length > 0) {
          filtered = filtered.filter(service =>
            service.catering &&
            service.catering.menu &&
            service.catering.menu.type_menu &&
            this.specificFilters.catering.menu_type.some(t => t === service.catering.menu.type_menu)
          )
        }

        // Filtrar por tipo de servicio (menú/artículo)
        if (this.specificFilters.catering.tipo_servicio === 'menu') {
          filtered = filtered.filter(service =>
            service.catering && service.catering.menu != null
          )
        } else if (this.specificFilters.catering.tipo_servicio === 'articulo') {
          filtered = filtered.filter(service =>
            service.catering && service.catering.articulo != null
          )
        }

        // Filtrar por número de comensales
        if (this.specificFilters.catering.comensales) {
          const comensales = parseInt(this.specificFilters.catering.comensales)
          filtered = filtered.filter(service =>
            service.catering &&
            service.catering.min_comensales <= comensales &&
            service.catering.max_comensales >= comensales
          )
        }

        // Filtrar por duración
        if (this.specificFilters.catering.duracion_min || this.specificFilters.catering.duracion_max) {
          const minDuracion = this.specificFilters.catering.duracion_min ? parseFloat(this.specificFilters.catering.duracion_min) : 0
          const maxDuracion = this.specificFilters.catering.duracion_max ? parseFloat(this.specificFilters.catering.duracion_max) : Infinity
          filtered = filtered.filter(service =>
            service.catering &&
            service.catering.duracion >= minDuracion &&
            service.catering.duracion <= maxDuracion
          )
        }

        // Filtrar por alérgenos (excluir servicios que contengan los alérgenos seleccionados)
        if (this.specificFilters.catering.alergenos.length > 0) {
          filtered = filtered.filter(service =>
            service.catering &&
            service.catering.alergenos &&
            !this.specificFilters.catering.alergenos.some(alergeno =>
              service.catering.alergenos.includes(alergeno)
            )
          )
        }

        // Filtrar por características
        if (this.specificFilters.catering.caracteristicas) {
          const caracteristicas = this.specificFilters.catering.caracteristicas
            .split(',')
            .map(c => c.trim().toLowerCase())
            .filter(c => c.length > 0)

          if (caracteristicas.length > 0) {
            filtered = filtered.filter(service =>
              service.catering &&
              service.catering.caracteristicas &&
              caracteristicas.every(c =>
                service.catering.caracteristicas.some(servCar =>
                  servCar.toLowerCase().includes(c)
                )
              )
            )
          }
        }
      }

      // Filtros específicos para mobiliari
      if (this.selectedType === 'mobiliari') {
        // Filtrar por tipología
        if (this.specificFilters.mobiliari.tipologia.length > 0) {
          filtered = filtered.filter(service =>
            service.mobiliari_decoracio &&
            service.mobiliari_decoracio.tipologia &&
            this.specificFilters.mobiliari.tipologia.some(t =>
              service.mobiliari_decoracio.tipologia.toLowerCase().includes(t.toLowerCase())
            )
          )
        }

        // Filtrar por subtipología
        if (this.specificFilters.mobiliari.subtipologia) {
          const subtipologia = this.specificFilters.mobiliari.subtipologia.toLowerCase()
          filtered = filtered.filter(service =>
            service.mobiliari_decoracio &&
            service.mobiliari_decoracio.subtipologia &&
            service.mobiliari_decoracio.subtipologia.toLowerCase().includes(subtipologia)
          )
        }

        // Filtrar por tipo de servicio (alquiler/venta)
        if (this.specificFilters.mobiliari.is_rental !== '') {
          const isRental = this.specificFilters.mobiliari.is_rental === 'true'
          filtered = filtered.filter(service =>
            service.mobiliari_decoracio &&
            service.mobiliari_decoracio.is_rental === isRental
          )
        }

        // Filtrar por cantidad
        if (this.specificFilters.mobiliari.cantidad) {
          const cantidad = parseInt(this.specificFilters.mobiliari.cantidad)
          filtered = filtered.filter(service =>
            service.mobiliari_decoracio &&
            service.mobiliari_decoracio.cantidad_min <= cantidad &&
            service.mobiliari_decoracio.cantidad_max >= cantidad
          )
        }

        // Filtrar por forma
        if (this.specificFilters.mobiliari.forma) {
          const forma = this.specificFilters.mobiliari.forma.toLowerCase()
          filtered = filtered.filter(service =>
            service.mobiliari_decoracio &&
            service.mobiliari_decoracio.forma &&
            service.mobiliari_decoracio.forma.toLowerCase().includes(forma)
          )
        }

        // Filtrar por modalidad
        if (this.specificFilters.mobiliari.modality) {
          const modality = this.specificFilters.mobiliari.modality.toLowerCase()
          filtered = filtered.filter(service =>
            service.mobiliari_decoracio &&
            service.mobiliari_decoracio.modality &&
            service.mobiliari_decoracio.modality.toLowerCase().includes(modality)
          )
        }

        // Filtrar por colores
        if (this.specificFilters.mobiliari.color.length > 0) {
          filtered = filtered.filter(service =>
            service.mobiliari_decoracio &&
            service.mobiliari_decoracio.color &&
            this.specificFilters.mobiliari.color.some(color =>
              service.mobiliari_decoracio.color.some(c =>
                c.toLowerCase() === color.toLowerCase()
              )
            )
          )
        }

        // Filtrar por materiales
        if (this.specificFilters.mobiliari.material.length > 0) {
          filtered = filtered.filter(service =>
            service.mobiliari_decoracio &&
            service.mobiliari_decoracio.material &&
            this.specificFilters.mobiliari.material.some(material =>
              service.mobiliari_decoracio.material.some(m =>
                m.toLowerCase() === material.toLowerCase()
              )
            )
          )
        }

        // Filtrar por estilo
        if (this.specificFilters.mobiliari.style) {
          const style = this.specificFilters.mobiliari.style.toLowerCase()
          filtered = filtered.filter(service =>
            service.mobiliari_decoracio &&
            service.mobiliari_decoracio.style &&
            service.mobiliari_decoracio.style.toLowerCase().includes(style)
          )
        }

        // Filtrar por tamaño
        if (this.specificFilters.mobiliari.size.length > 0) {
          filtered = filtered.filter(service =>
            service.mobiliari_decoracio &&
            service.mobiliari_decoracio.size &&
            this.specificFilters.mobiliari.size.some(size =>
              service.mobiliari_decoracio.size.toLowerCase().includes(size.toLowerCase())
            )
          )
        }

        // Filtrar por características
        if (this.specificFilters.mobiliari.caracteristicas) {
          const caracteristicas = this.specificFilters.mobiliari.caracteristicas
            .split(',')
            .map(c => c.trim().toLowerCase())
            .filter(c => c.length > 0)

          if (caracteristicas.length > 0) {
            filtered = filtered.filter(service =>
              service.mobiliari_decoracio &&
              service.mobiliari_decoracio.caracteristicas &&
              caracteristicas.every(c =>
                service.mobiliari_decoracio.caracteristicas.some(servCar =>
                  servCar.toLowerCase().includes(c)
                )
              )
            )
          }
        }
      }

      // Filtros específicos para decoración
      if (this.selectedType === 'decoracio') {
        // Filtrar por tipología
        if (this.specificFilters.decoracio.tipologia.length > 0) {
          filtered = filtered.filter(service =>
            service.mobiliari_decoracio &&
            service.mobiliari_decoracio.service_type === 'decoracion' &&
            service.mobiliari_decoracio.tipologia &&
            this.specificFilters.decoracio.tipologia.some(t =>
              service.mobiliari_decoracio.tipologia.toLowerCase().includes(t.toLowerCase())
            )
          )
        }

        // Filtrar por subtipología
        if (this.specificFilters.decoracio.subtipologia) {
          const subtipologia = this.specificFilters.decoracio.subtipologia.toLowerCase()
          filtered = filtered.filter(service =>
            service.mobiliari_decoracio &&
            service.mobiliari_decoracio.service_type === 'decoracion' &&
            service.mobiliari_decoracio.subtipologia &&
            service.mobiliari_decoracio.subtipologia.toLowerCase().includes(subtipologia)
          )
        }

        // Filtrar por tipo de servicio (alquiler/venta)
        if (this.specificFilters.decoracio.is_rental !== '') {
          const isRental = this.specificFilters.decoracio.is_rental === 'true'
          filtered = filtered.filter(service =>
            service.mobiliari_decoracio &&
            service.mobiliari_decoracio.service_type === 'decoracion' &&
            service.mobiliari_decoracio.is_rental === isRental
          )
        }

        // Filtrar por cantidad
        if (this.specificFilters.decoracio.cantidad) {
          const cantidad = parseInt(this.specificFilters.decoracio.cantidad)
          filtered = filtered.filter(service =>
            service.mobiliari_decoracio &&
            service.mobiliari_decoracio.service_type === 'decoracion' &&
            service.mobiliari_decoracio.cantidad_min <= cantidad &&
            service.mobiliari_decoracio.cantidad_max >= cantidad
          )
        }

        // Filtrar por colores
        if (this.specificFilters.decoracio.color.length > 0) {
          filtered = filtered.filter(service =>
            service.mobiliari_decoracio &&
            service.mobiliari_decoracio.service_type === 'decoracion' &&
            service.mobiliari_decoracio.color &&
            service.mobiliari_decoracio.color.some(color =>
              this.specificFilters.decoracio.color.some(selectedColor =>
                color.toLowerCase().includes(selectedColor.toLowerCase())
              )
            )
          )
        }

        // Filtrar por materiales
        if (this.specificFilters.decoracio.material.length > 0) {
          filtered = filtered.filter(service =>
            service.mobiliari_decoracio &&
            service.mobiliari_decoracio.service_type === 'decoracion' &&
            service.mobiliari_decoracio.material &&
            service.mobiliari_decoracio.material.some(material =>
              this.specificFilters.decoracio.material.some(selectedMaterial =>
                material.toLowerCase().includes(selectedMaterial.toLowerCase())
              )
            )
          )
        }

        // Filtrar por estilo
        if (this.specificFilters.decoracio.style) {
          const style = this.specificFilters.decoracio.style.toLowerCase()
          filtered = filtered.filter(service =>
            service.mobiliari_decoracio &&
            service.mobiliari_decoracio.service_type === 'decoracion' &&
            service.mobiliari_decoracio.style &&
            service.mobiliari_decoracio.style.toLowerCase().includes(style)
          )
        }

        // Filtrar por tamaño
        if (this.specificFilters.decoracio.size.length > 0) {
          filtered = filtered.filter(service =>
            service.mobiliari_decoracio &&
            service.mobiliari_decoracio.service_type === 'decoracion' &&
            service.mobiliari_decoracio.size &&
            this.specificFilters.decoracio.size.some(size =>
              service.mobiliari_decoracio.size.toLowerCase().includes(size.toLowerCase())
            )
          )
        }

        // Filtrar por características
        if (this.specificFilters.decoracio.caracteristicas) {
          const caracteristicas = this.specificFilters.decoracio.caracteristicas
            .split(',')
            .map(c => c.trim().toLowerCase())
            .filter(c => c.length > 0)

          if (caracteristicas.length > 0) {
            filtered = filtered.filter(service =>
              service.mobiliari_decoracio &&
              service.mobiliari_decoracio.service_type === 'decoracion' &&
              service.mobiliari_decoracio.caracteristicas &&
              caracteristicas.every(c =>
                service.mobiliari_decoracio.caracteristicas.some(servCar =>
                  servCar.toLowerCase().includes(c)
                )
              )
            )
          }
        }

        // Filtrar por forma
        if (this.specificFilters.decoracio.forma) {
          const forma = this.specificFilters.decoracio.forma.toLowerCase()
          filtered = filtered.filter(service =>
            service.mobiliari_decoracio &&
            service.mobiliari_decoracio.service_type === 'decoracion' &&
            service.mobiliari_decoracio.forma &&
            service.mobiliari_decoracio.forma.toLowerCase().includes(forma)
          )
        }

        // Filtrar por modalidad
        if (this.specificFilters.decoracio.modality) {
          const modality = this.specificFilters.decoracio.modality.toLowerCase()
          filtered = filtered.filter(service =>
            service.mobiliari_decoracio &&
            service.mobiliari_decoracio.service_type === 'decoracion' &&
            service.mobiliari_decoracio.modality &&
            service.mobiliari_decoracio.modality.toLowerCase().includes(modality)
          )
        }
      }

      // Filtros específicos para música
      if (this.selectedType === 'musica') {
        // Filtrar por tipo de música (DJ o Músico)
        if (this.specificFilters.musica.musica_type) {
          filtered = filtered.filter(service =>
            service.musica &&
            service.musica.musica_type &&
            this.normalizeText(service.musica.musica_type) === this.normalizeText(this.specificFilters.musica.musica_type)
          )
        }

        // Filtrar por tipo de canciones (Propias o Versiones)
        if (this.specificFilters.musica.canciones) {
          filtered = filtered.filter(service =>
            service.musica &&
            service.musica.canciones &&
            this.normalizeText(service.musica.canciones) === this.normalizeText(this.specificFilters.musica.canciones)
          )
        }

        // Filtrar por duración
        if (this.specificFilters.musica.duracion_min) {
          const duracionMin = parseFloat(this.specificFilters.musica.duracion_min)
          if (!isNaN(duracionMin)) {
            filtered = filtered.filter(service =>
              service.musica &&
              service.musica.duracion &&
              service.musica.duracion >= duracionMin
            )
          }
        }
        if (this.specificFilters.musica.duracion_max) {
          const duracionMax = parseFloat(this.specificFilters.musica.duracion_max)
          if (!isNaN(duracionMax)) {
            filtered = filtered.filter(service =>
              service.musica &&
              service.musica.duracion &&
              service.musica.duracion <= duracionMax
            )
          }
        }

        // Filtrar por géneros (múltiples)
        if (this.specificFilters.musica.generos.length > 0) {
          filtered = filtered.filter(service =>
            service.musica &&
            service.musica.generos &&
            this.specificFilters.musica.generos.some(genero =>
              service.musica.generos.some(g =>
                this.normalizeText(g) === this.normalizeText(genero)
              )
            )
          )
        }

        // Filtrar por instrumentos
        if (this.specificFilters.musica.instrumentos) {
          const instrumentos = this.specificFilters.musica.instrumentos
            .split(',')
            .map(i => this.normalizeText(i.trim()))
            .filter(i => i.length > 0)

          if (instrumentos.length > 0) {
            filtered = filtered.filter(service =>
              service.musica &&
              service.musica.instrumentos &&
              instrumentos.some(instrumento =>
                service.musica.instrumentos.some(i =>
                  this.normalizeText(i).includes(instrumento)
                )
              )
            )
          }
        }

        // Filtrar por características
        if (this.specificFilters.musica.caracteristicas) {
          const caracteristicas = this.specificFilters.musica.caracteristicas
            .split(',')
            .map(c => this.normalizeText(c.trim()))
            .filter(c => c.length > 0)

          if (caracteristicas.length > 0) {
            filtered = filtered.filter(service =>
              service.musica &&
              service.musica.caracteristicas &&
              caracteristicas.some(caracteristica =>
                service.musica.caracteristicas.some(c =>
                  this.normalizeText(c).includes(caracteristica)
                )
              )
            )
          }
        }

        // Filtrar por solicitar canción nueva
        if (this.specificFilters.musica.solicitar_cancion_nueva !== '') {
          const solicitarCancion = this.specificFilters.musica.solicitar_cancion_nueva === 'true'
          filtered = filtered.filter(service =>
            service.musica &&
            service.musica.raider &&
            service.musica.raider.solicitar_cancion_nueva === solicitarCancion
          )
        }

        // Filtrar por equipo propio
        if (this.specificFilters.musica.equipo_propio !== '') {
          const equipoPropio = this.specificFilters.musica.equipo_propio === 'true'
          filtered = filtered.filter(service =>
            service.musica &&
            service.musica.raider &&
            service.musica.raider.equipo_propio === equipoPropio
          )
        }
      }

      // Filtros específicos para fotografía
      if (this.selectedType === 'fotografia') {
        // Filtro por tipo de fotografía
        if (this.specificFilters.fotografia.fotografiaType) {
          filtered = filtered.filter(service =>
            service.fotografia && service.fotografia.fotografia_type === this.specificFilters.fotografia.fotografiaType
          )
        }

        // Filtro por servicios especiales (múltiples)
        if (this.specificFilters.fotografia.servicioEspecialTypes.length > 0) {
          filtered = filtered.filter(service =>
            service.fotografia &&
            service.fotografia.fotografia_type === 'servicio_especial' &&
            this.specificFilters.fotografia.servicioEspecialTypes.includes(service.fotografia.servicio_especial_type)
          )
        }

        // Filtro por duración
        if (this.specificFilters.fotografia.duracionMin) {
          const duracionMin = parseFloat(this.specificFilters.fotografia.duracionMin)
          if (!isNaN(duracionMin)) {
            filtered = filtered.filter(service =>
              service.fotografia && service.fotografia.duracion >= duracionMin
            )
          }
        }

        if (this.specificFilters.fotografia.duracionMax) {
          const duracionMax = parseFloat(this.specificFilters.fotografia.duracionMax)
          if (!isNaN(duracionMax)) {
            filtered = filtered.filter(service =>
              service.fotografia && service.fotografia.duracion <= duracionMax
            )
          }
        }

        // Filtro por características
        if (this.specificFilters.fotografia.caracteristicas) {
          const caracteristicas = this.specificFilters.fotografia.caracteristicas
            .split(',')
            .map(c => c.trim().toLowerCase())
            .filter(c => c.length > 0)

          if (caracteristicas.length > 0) {
            filtered = filtered.filter(service =>
              service.fotografia &&
              service.fotografia.caracteristicas &&
              caracteristicas.some(c =>
                service.fotografia.caracteristicas.some(caracteristica =>
                  this.normalizeText(caracteristica.toLowerCase()).includes(this.normalizeText(c))
                )
              )
            )
          }
        }
      }

      // Ordenar
      filtered.sort((a, b) => {
        const aPrice = this.getMinPrice(a)
        const bPrice = this.getMinPrice(b)
        if (this.sortBy === 'price_asc') {
          return (aPrice || Infinity) - (bPrice || Infinity)
        } else if (this.sortBy === 'price_desc') {
          return (bPrice || 0) - (aPrice || 0)
        }
        return 0
      })

      return filtered
    }
  },
  async created () {
    await this.loadServices()
  },
  mounted () {
    // Configurar el Intersection Observer
    this.observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          this.isNavbarHidden = false
        } else {
          // Solo ocultar el navbar si no estamos en la parte superior
          const currentScroll = window.pageYOffset || document.documentElement.scrollTop
          if (currentScroll > 200) {
            this.isNavbarHidden = true
          }
        }
      })
    }, {
      threshold: 0.1 // El callback se ejecutará cuando al menos el 10% del elemento sea visible
    })

    // Observar el primer elemento después del navbar
    const firstElement = document.querySelector('.main-content')
    if (firstElement) {
      this.observer.observe(firstElement)
    }
    document.addEventListener('click', this.handleClickOutside)
  },
  beforeDestroy () {
    if (this.observer) {
      this.observer.disconnect()
    }
    document.removeEventListener('click', this.handleClickOutside)
  },
  methods: {
    goBack () {
      this.$router.push('/mainPageVendor')
    },
    async loadServices () {
      try {
        this.loading = true
        const response = await ServiceServices.getAll()
        console.log(response.data.data)
        if (response && response.data) {
          this.services = response.data.data
        } else {
          this.services = []
        }
      } catch (error) {
        console.error('Error al cargar los servicios:', error)
        Swal.fire({
          icon: 'error',
          title: 'Error',
          text: 'No se pudieron cargar los servicios. Por favor, intenta de nuevo.'
        })
        this.services = []
      } finally {
        this.loading = false
      }
    },
    filterServices () {},
    selectType (type) {
      this.selectedType = type
    },
    getServiceComponent (service) {
      if (service.type === 'catering') return 'CateringService'
      if (service.type === 'mobiliari-decoracio') {
        // eslint-disable-next-line camelcase
        if (service.mobiliari_decoracio?.service_type === 'mobiliario') return 'MobiliariService'
        // eslint-disable-next-line camelcase
        if (service.mobiliari_decoracio?.service_type === 'decoracion') return 'DecoracioService'
      }
      if (service.type === 'musica') return 'MusicaService'
      if (service.type === 'fotografia') return 'FotografiaService'
      if (service.type === 'espai') return 'EspaiService'
      return null
    },
    viewServiceDetails (service) {
      console.log('Ver detalles:', service)
    },
    async contactProvider (service) {
      const { value: message } = await Swal.fire({
        title: 'Contactar con el proveedor',
        input: 'textarea',
        inputLabel: 'Mensaje',
        inputPlaceholder: 'Escribe tu mensaje aquí...',
        showCancelButton: true,
        confirmButtonText: 'Enviar',
        cancelButtonText: 'Cancelar',
        inputValidator: (value) => {
          if (!value) {
            return 'Por favor, escribe un mensaje'
          }
        }
      })
      if (message) {
        try {
          await ServiceServices.contactProvider(service.id, message)
          Swal.fire({
            icon: 'success',
            title: 'Mensaje enviado',
            text: 'El proveedor te contactará pronto.'
          })
        } catch (error) {
          console.error('Error al contactar al proveedor:', error)
          Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'No se pudo enviar el mensaje. Por favor, intenta de nuevo.'
          })
        }
      }
    },
    getMinPrice (service) {
      if (!service || !service.availability_rules) return null
      const prices = service.availability_rules
        .map(rule => rule.price)
        .filter(price => typeof price === 'number' && !isNaN(price))
      if (prices.length === 0) return null
      return Math.min(...prices)
    },
    toggleSpecificFilters () {
      this.showSpecificFilters = !this.showSpecificFilters
    },
    closeAllDropdowns () {
      this.showSortDropdown = false
      this.showDayDropdown = false
      this.showCateringEntregaDropdown = false
      this.showCateringTipoEntregaDropdown = false
      this.showCateringTipoCateringDropdown = false
      this.showCateringMenuTypeDropdown = false
      this.showCateringAlergenosDropdown = false
      this.showCateringTipoServicioDropdown = false
      this.showEspaiTypeDropdown = false
      this.showEspaiCaracteristicasDropdown = false
      this.showEspaiCapacitatDropdown = false
      this.showEspaiHorarioDropdown = false
      this.showEspaiUbicacionDropdown = false
      this.showEspaiPrecioDropdown = false
      this.showEspaiDisponibilidadDropdown = false
      this.showEspaiFotosDropdown = false
      this.showEspaiVideosDropdown = false
      this.showCateringTypeDropdown = false
      this.showCateringMenuTypeDropdown = false
      this.showCateringAlergenosDropdown = false
      this.showCateringTipoServicioDropdown = false
      this.showCateringArticuloTypeDropdown = false
      this.showMobiliariTipologiaDropdown = false
      this.showMobiliariTipoServicioDropdown = false
      this.showMobiliariColoresDropdown = false
      this.showMobiliariMaterialesDropdown = false
      this.showMobiliariSizeDropdown = false
      this.showTipologiaDropdown = false
      this.showTipoServicioDropdown = false
      this.showColoresDropdown = false
      this.showMaterialesDropdown = false
      this.showSizeDropdown = false
      this.showDecoracioTipologiaDropdown = false
      this.showDecoracioTipoServicioDropdown = false
      this.showDecoracioColoresDropdown = false
      this.showDecoracioMaterialesDropdown = false
      this.showDecoracioSizeDropdown = false
      this.showMusicaTypeDropdown = false
      this.showMusicaCancionesDropdown = false
      this.showMusicaGenerosDropdown = false
      this.showMusicaSolicitarCancionDropdown = false
      this.showMusicaEquipoPropioDropdown = false
      this.showFotografiaTypeDropdown = false
      this.showServicioEspecialDropdown = false
      this.showFotografiaCaracteristicasDropdown = false
    },

    toggleSortDropdown (event) {
      event.stopPropagation()
      this.closeAllDropdowns()
      this.showSortDropdown = !this.showSortDropdown
    },

    toggleDayDropdown (event) {
      event.stopPropagation()
      this.closeAllDropdowns()
      this.showDayDropdown = !this.showDayDropdown
    },

    toggleEspaiTypeDropdown (event) {
      event.stopPropagation()
      this.closeAllDropdowns()
      this.showEspaiTypeDropdown = !this.showEspaiTypeDropdown
    },

    toggleCateringEntregaDropdown (event) {
      if (event) {
        event.stopPropagation()
      }
      this.closeAllDropdowns()
      this.showCateringEntregaDropdown = !this.showCateringEntregaDropdown
    },

    toggleCateringTypeDropdown (event) {
      if (event) {
        event.stopPropagation()
      }
      if (this.specificFilters.catering.tipo_entrega === 'servicio_domicilio') {
        this.closeAllDropdowns()
        this.showCateringTypeDropdown = !this.showCateringTypeDropdown
      }
    },

    toggleCateringMenuTypeDropdown (event) {
      event.stopPropagation()
      this.closeAllDropdowns()
      this.showCateringMenuTypeDropdown = !this.showCateringMenuTypeDropdown
    },

    toggleCateringAlergenosDropdown (event) {
      event.stopPropagation()
      this.closeAllDropdowns()
      this.showCateringAlergenosDropdown = !this.showCateringAlergenosDropdown
    },

    toggleCateringTipoServicioDropdown (event) {
      event.stopPropagation()
      this.closeAllDropdowns()
      this.showCateringTipoServicioDropdown = !this.showCateringTipoServicioDropdown
    },

    toggleCateringArticuloTypeDropdown (event) {
      event.stopPropagation()
      this.closeAllDropdowns()
      this.showCateringArticuloTypeDropdown = !this.showCateringArticuloTypeDropdown
    },

    toggleMobiliariTipologiaDropdown (event) {
      if (event) {
        event.stopPropagation()
      }
      this.closeAllDropdowns()
      this.showMobiliariTipologiaDropdown = !this.showMobiliariTipologiaDropdown
    },

    toggleMobiliariTipoServicioDropdown (event) {
      if (event) {
        event.stopPropagation()
      }
      this.closeAllDropdowns()
      this.showMobiliariTipoServicioDropdown = !this.showMobiliariTipoServicioDropdown
    },

    toggleMobiliariColoresDropdown (event) {
      if (event) {
        event.stopPropagation()
      }
      this.closeAllDropdowns()
      this.showMobiliariColoresDropdown = !this.showMobiliariColoresDropdown
    },

    toggleMobiliariMaterialesDropdown (event) {
      if (event) {
        event.stopPropagation()
      }
      this.closeAllDropdowns()
      this.showMobiliariMaterialesDropdown = !this.showMobiliariMaterialesDropdown
    },

    toggleMobiliariSizeDropdown (event) {
      if (event) {
        event.stopPropagation()
      }
      this.closeAllDropdowns()
      this.showMobiliariSizeDropdown = !this.showMobiliariSizeDropdown
    },
    toggleEspaiType (value) {
      if (value === '') {
        // Si se selecciona la primera opción, deseleccionar todas las demás
        this.specificFilters.espai.type = []
      } else {
        // Si se selecciona otra opción, deseleccionar la primera si estaba seleccionada
        this.specificFilters.espai.type = this.specificFilters.espai.type.filter(v => v !== '')
        if (this.specificFilters.espai.type.includes(value)) {
          this.specificFilters.espai.type = this.specificFilters.espai.type.filter(v => v !== value)
        } else {
          this.specificFilters.espai.type.push(value)
        }
      }
      this.filterServices()
    },
    getEspaiTypeLabel (type) {
      if (!type || type.length === 0) return 'Tipo de espacio'
      return type.map(t => this.espaiTypeOptions.find(opt => opt.value === t)?.label).join(', ')
    },
    selectSort (value) {
      this.sortBy = value
      this.showSortDropdown = false
      this.filterServices()
    },
    toggleDay (value) {
      if (value === '') {
        // Si se selecciona la primera opción, deseleccionar todas las demás
        this.filters.diaSemana = []
      } else {
        // Si se selecciona otra opción, deseleccionar la primera si estaba seleccionada
        this.filters.diaSemana = this.filters.diaSemana.filter(v => v !== '')
        if (this.filters.diaSemana.includes(value)) {
          this.filters.diaSemana = this.filters.diaSemana.filter(v => v !== value)
        } else {
          this.filters.diaSemana.push(value)
        }
      }
      this.filterServices()
    },
    getSortLabel (value) {
      const option = this.sortOptions.find(opt => opt.value === value)
      return option ? option.label : value
    },
    getDayLabelByValue (value) {
      const opt = this.dayOptions.find(opt => opt.value === value)
      return opt ? opt.label : value
    },
    handleClickOutside (event) {
      // Si el clic no fue dentro de un dropdown, cerrar todos
      if (!event.target.closest('.custom-select')) {
        this.closeAllDropdowns()
      }
    },
    toggleCateringEntrega (value) {
      if (value === '') {
        this.specificFilters.catering.tipo_entrega = ''
        this.specificFilters.catering.tipo_catering = [] // Limpiar tipo de catering cuando se deselecciona
      } else {
        this.specificFilters.catering.tipo_entrega = value
        if (value !== 'servicio_domicilio') {
          this.specificFilters.catering.tipo_catering = [] // Limpiar tipo de catering si no es servicio a domicilio
        }
      }
      this.showCateringEntregaDropdown = false
      this.filterServices()
    },
    toggleCateringType (value) {
      if (value === '') {
        this.specificFilters.catering.tipo_catering = []
      } else {
        this.specificFilters.catering.tipo_catering = this.specificFilters.catering.tipo_catering.filter(v => v !== '')
        if (this.specificFilters.catering.tipo_catering.includes(value)) {
          this.specificFilters.catering.tipo_catering = this.specificFilters.catering.tipo_catering.filter(v => v !== value)
        } else {
          this.specificFilters.catering.tipo_catering.push(value)
        }
      }
      // No cerrar el dropdown para selección múltiple
      this.filterServices()
    },
    toggleCateringMenuType (value) {
      if (value === '') {
        this.specificFilters.catering.menu_type = []
      } else {
        this.specificFilters.catering.menu_type = this.specificFilters.catering.menu_type.filter(v => v !== '')
        if (this.specificFilters.catering.menu_type.includes(value)) {
          this.specificFilters.catering.menu_type = this.specificFilters.catering.menu_type.filter(v => v !== value)
        } else {
          this.specificFilters.catering.menu_type.push(value)
        }
      }
      this.filterServices()
    },
    toggleCateringAlergeno (value) {
      if (value === '') {
        // Si se selecciona la primera opción, deseleccionar todas las demás
        this.specificFilters.catering.alergenos = []
      } else {
        // Si se selecciona otra opción, deseleccionar la primera si estaba seleccionada
        this.specificFilters.catering.alergenos = this.specificFilters.catering.alergenos.filter(v => v !== '')
        if (this.specificFilters.catering.alergenos.includes(value)) {
          this.specificFilters.catering.alergenos = this.specificFilters.catering.alergenos.filter(v => v !== value)
        } else {
          this.specificFilters.catering.alergenos.push(value)
        }
      }
      this.filterServices()
    },
    getCateringEntregaLabel (value) {
      if (!value) return 'Tipo de entrega'
      return this.cateringEntregaOptions.find(opt => opt.value === value)?.label
    },
    getCateringTypeLabelByValue (value) {
      const opt = this.cateringTypeOptions.find(opt => opt.value === value)
      return opt ? opt.label : value
    },
    getCateringMenuTypeLabel (value) {
      if (!value || value.length === 0) return 'Tipo de menú'
      return value.map(v => this.cateringMenuTypeOptions.find(opt => opt.value === v)?.label).join(', ')
    },
    getCateringAlergenosLabel (value) {
      if (!value || value.length === 0) return 'Alérgenos a excluir'
      return value.map(v => this.cateringAlergenosOptions.find(opt => opt.value === v)?.label).join(', ')
    },
    toggleCateringTipoServicio (value) {
      if (value === '') {
        this.specificFilters.catering.tipo_servicio = ''
        this.specificFilters.catering.menu_type = [] // Limpiar tipo de menú
        this.specificFilters.catering.articulo_type = [] // Limpiar tipo de artículo
      } else {
        if (this.specificFilters.catering.tipo_servicio === value) {
          // Si se hace clic en la opción ya seleccionada, se deselecciona
          this.specificFilters.catering.tipo_servicio = ''
          if (value === 'menu') {
            this.specificFilters.catering.menu_type = []
          } else if (value === 'articulo') {
            this.specificFilters.catering.articulo_type = []
          }
        } else {
          // Si se selecciona una nueva opción
          this.specificFilters.catering.tipo_servicio = value
          // Limpiar la otra opción
          if (value === 'menu') {
            this.specificFilters.catering.articulo_type = []
          } else if (value === 'articulo') {
            this.specificFilters.catering.menu_type = []
          }
        }
      }
      this.showCateringTipoServicioDropdown = false
      this.filterServices()
    },
    getCateringTipoServicioLabel (value) {
      if (!value) return 'Tipo de servicio'
      return this.cateringTipoServicioOptions.find(opt => opt.value === value)?.label
    },
    toggleCateringArticuloType (value) {
      if (value === '') {
        this.specificFilters.catering.articulo_type = []
      } else {
        this.specificFilters.catering.articulo_type = this.specificFilters.catering.articulo_type.filter(v => v !== '')
        if (this.specificFilters.catering.articulo_type.includes(value)) {
          this.specificFilters.catering.articulo_type = this.specificFilters.catering.articulo_type.filter(v => v !== value)
        } else {
          this.specificFilters.catering.articulo_type.push(value)
        }
      }
      this.filterServices()
    },
    getCateringArticuloTypeLabel (value) {
      if (!value || value.length === 0) return 'Tipo de artículo'
      return value.map(v => this.cateringArticuloTypeOptions.find(opt => opt.value === v)?.label).join(', ')
    },
    toggleMobiliariTipologia (value) {
      if (value === '') {
        this.specificFilters.mobiliari.tipologia = []
      } else {
        if (this.specificFilters.mobiliari.tipologia.includes(value)) {
          this.specificFilters.mobiliari.tipologia = this.specificFilters.mobiliari.tipologia.filter(v => v !== value)
        } else {
          this.specificFilters.mobiliari.tipologia.push(value)
        }
      }
      this.filterServices()
    },
    toggleMobiliariTipoServicio (value) {
      this.specificFilters.mobiliari.is_rental = value
      this.showMobiliariTipoServicioDropdown = false
      this.filterServices()
    },
    toggleMobiliariColor (value) {
      if (value === '') {
        this.specificFilters.mobiliari.color = []
      } else {
        if (this.specificFilters.mobiliari.color.includes(value)) {
          this.specificFilters.mobiliari.color = this.specificFilters.mobiliari.color.filter(v => v !== value)
        } else {
          this.specificFilters.mobiliari.color.push(value)
        }
      }
      this.filterServices()
    },
    toggleMobiliariMaterial (value) {
      if (value === '') {
        this.specificFilters.mobiliari.material = []
      } else {
        if (this.specificFilters.mobiliari.material.includes(value)) {
          this.specificFilters.mobiliari.material = this.specificFilters.mobiliari.material.filter(v => v !== value)
        } else {
          this.specificFilters.mobiliari.material.push(value)
        }
      }
      this.filterServices()
    },
    getMobiliariTipologiaLabel (value) {
      if (!value || value.length === 0) return 'Tipología'
      return value.map(v => this.mobiliariTipologiaOptions.find(opt => opt.value === v)?.label).join(', ')
    },
    getMobiliariTipoServicioLabel (value) {
      if (!value) return 'Tipo de servicio'
      return this.mobiliariTipoServicioOptions.find(opt => opt.value === value)?.label
    },
    getMobiliariColoresLabel (value) {
      if (!value || value.length === 0) return 'Colores'
      return value.map(v => this.mobiliariColoresOptions.find(opt => opt.value === v)?.label).join(', ')
    },
    getMobiliariMaterialesLabel (value) {
      if (!value || value.length === 0) return 'Materiales'
      return value.map(v => this.mobiliariMaterialesOptions.find(opt => opt.value === v)?.label).join(', ')
    },
    getEspaiTypeLabelByValue (value) {
      const opt = this.espaiTypeOptions.find(opt => opt.value === value)
      return opt ? opt.label : value
    },
    toggleMobiliariSize (value) {
      if (value === '') {
        this.specificFilters.mobiliari.size = []
      } else {
        if (this.specificFilters.mobiliari.size.includes(value)) {
          this.specificFilters.mobiliari.size = this.specificFilters.mobiliari.size.filter(v => v !== value)
        } else {
          this.specificFilters.mobiliari.size.push(value)
        }
      }
      this.filterServices()
    },
    toggleDecoracioTipologiaDropdown (event) {
      event.stopPropagation()
      if (this.showDecoracioTipologiaDropdown) {
        this.showDecoracioTipologiaDropdown = false
      } else {
        this.closeAllDropdowns()
        this.showDecoracioTipologiaDropdown = true
      }
    },
    toggleDecoracioTipoServicioDropdown (event) {
      event.stopPropagation()
      if (this.showDecoracioTipoServicioDropdown) {
        this.showDecoracioTipoServicioDropdown = false
      } else {
        this.closeAllDropdowns()
        this.showDecoracioTipoServicioDropdown = true
      }
    },
    toggleDecoracioColoresDropdown (event) {
      event.stopPropagation()
      if (this.showDecoracioColoresDropdown) {
        this.showDecoracioColoresDropdown = false
      } else {
        this.closeAllDropdowns()
        this.showDecoracioColoresDropdown = true
      }
    },
    toggleDecoracioMaterialesDropdown (event) {
      event.stopPropagation()
      if (this.showDecoracioMaterialesDropdown) {
        this.showDecoracioMaterialesDropdown = false
      } else {
        this.closeAllDropdowns()
        this.showDecoracioMaterialesDropdown = true
      }
    },
    toggleDecoracioSizeDropdown (event) {
      event.stopPropagation()
      if (this.showDecoracioSizeDropdown) {
        this.showDecoracioSizeDropdown = false
      } else {
        this.closeAllDropdowns()
        this.showDecoracioSizeDropdown = true
      }
    },
    toggleDecoracioTipologia (value) {
      if (value === '') {
        this.specificFilters.decoracio.tipologia = []
      } else {
        const index = this.specificFilters.decoracio.tipologia.indexOf(value)
        if (index === -1) {
          this.specificFilters.decoracio.tipologia.push(value)
        } else {
          this.specificFilters.decoracio.tipologia.splice(index, 1)
        }
      }
      this.filterServices()
    },
    toggleDecoracioTipoServicio (value) {
      this.specificFilters.decoracio.is_rental = value
      this.filterServices()
    },
    toggleDecoracioColor (value) {
      if (value === '') {
        this.specificFilters.decoracio.color = []
      } else {
        const index = this.specificFilters.decoracio.color.indexOf(value)
        if (index === -1) {
          this.specificFilters.decoracio.color.push(value)
        } else {
          this.specificFilters.decoracio.color.splice(index, 1)
        }
      }
      this.filterServices()
    },
    toggleDecoracioMaterial (value) {
      if (value === '') {
        this.specificFilters.decoracio.material = []
      } else {
        const index = this.specificFilters.decoracio.material.indexOf(value)
        if (index === -1) {
          this.specificFilters.decoracio.material.push(value)
        } else {
          this.specificFilters.decoracio.material.splice(index, 1)
        }
      }
      this.filterServices()
    },
    toggleDecoracioSize (value) {
      const index = this.specificFilters.decoracio.size.indexOf(value)
      if (index === -1) {
        this.specificFilters.decoracio.size.push(value)
      } else {
        this.specificFilters.decoracio.size.splice(index, 1)
      }
      this.filterServices()
    },
    getDecoracioTipologiaLabel (values) {
      return values.map(value => {
        const option = this.decoracioTipologiaOptions.find(opt =>
          this.normalizeText(opt.value) === this.normalizeText(value)
        )
        return option ? option.label : value
      }).join(', ')
    },
    getDecoracioTipoServicioLabel (value) {
      const option = this.decoracioTipoServicioOptions.find(opt =>
        this.normalizeText(opt.value) === this.normalizeText(value)
      )
      return option ? option.label : ''
    },
    getDecoracioColoresLabel (values) {
      return values.map(value => {
        const option = this.decoracioColoresOptions.find(opt =>
          this.normalizeText(opt.value) === this.normalizeText(value)
        )
        return option ? option.label : value
      }).join(', ')
    },
    getDecoracioMaterialesLabel (values) {
      return values.map(value => {
        const option = this.decoracioMaterialesOptions.find(opt =>
          this.normalizeText(opt.value) === this.normalizeText(value)
        )
        return option ? option.label : value
      }).join(', ')
    },
    toggleMusicaTypeDropdown (event) {
      event.stopPropagation()
      this.showMusicaTypeDropdown = !this.showMusicaTypeDropdown
      if (this.showMusicaTypeDropdown) {
        this.closeAllDropdowns()
        this.showMusicaTypeDropdown = true
      }
    },
    toggleMusicaCancionesDropdown (event) {
      event.stopPropagation()
      this.showMusicaCancionesDropdown = !this.showMusicaCancionesDropdown
      if (this.showMusicaCancionesDropdown) {
        this.closeAllDropdowns()
        this.showMusicaCancionesDropdown = true
      }
    },
    toggleMusicaSolicitarCancionDropdown (event) {
      event.stopPropagation()
      this.showMusicaSolicitarCancionDropdown = !this.showMusicaSolicitarCancionDropdown
      if (this.showMusicaSolicitarCancionDropdown) {
        this.closeAllDropdowns()
        this.showMusicaSolicitarCancionDropdown = true
      }
    },
    toggleMusicaEquipoPropioDropdown (event) {
      event.stopPropagation()
      this.showMusicaEquipoPropioDropdown = !this.showMusicaEquipoPropioDropdown
      if (this.showMusicaEquipoPropioDropdown) {
        this.closeAllDropdowns()
        this.showMusicaEquipoPropioDropdown = true
      }
    },
    toggleMusicaType (value) {
      this.specificFilters.musica.musica_type = value
      this.showMusicaTypeDropdown = false
      this.filterServices()
    },
    toggleMusicaCanciones (value) {
      this.specificFilters.musica.canciones = value
      this.showMusicaCancionesDropdown = false
      this.filterServices()
    },
    toggleMusicaGeneros (value) {
      if (value === '') {
        // Si selecciona "Cualquiera", limpia la selección
        this.specificFilters.musica.generos = []
        this.showMusicaGenerosDropdown = false
      } else {
        const index = this.specificFilters.musica.generos.indexOf(value)
        if (index === -1) {
          this.specificFilters.musica.generos.push(value)
        } else {
          this.specificFilters.musica.generos.splice(index, 1)
        }
      }
      this.filterServices()
    },
    toggleMusicaSolicitarCancion (value) {
      this.specificFilters.musica.solicitar_cancion_nueva = value
      this.showMusicaSolicitarCancionDropdown = false
      this.filterServices()
    },
    toggleMusicaEquipoPropio (value) {
      this.specificFilters.musica.equipo_propio = value
      this.showMusicaEquipoPropioDropdown = false
      this.filterServices()
    },
    getMusicaTypeLabel (value) {
      if (!value) return 'Tipo de música'
      const option = this.musicaTypeOptions.find(opt =>
        this.normalizeText(opt.value) === this.normalizeText(value)
      )
      return option ? option.label : value
    },
    getMusicaCancionesLabel (value) {
      if (!value) return 'Tipo de canciones'
      const option = this.musicaCancionesOptions.find(opt =>
        this.normalizeText(opt.value) === this.normalizeText(value)
      )
      return option ? option.label : value
    },
    getMusicaSolicitarCancionLabel (value) {
      if (value === '') return 'Solicitar canción nueva'
      const option = this.musicaSolicitarCancionOptions.find(opt =>
        this.normalizeText(opt.value) === this.normalizeText(value)
      )
      return option ? option.label : value
    },
    getMusicaEquipoPropioLabel (value) {
      if (value === '') return 'Equipo propio'
      const option = this.musicaEquipoPropioOptions.find(opt =>
        this.normalizeText(opt.value) === this.normalizeText(value)
      )
      return option ? option.label : value
    },
    selectFotografiaType (value) {
      this.specificFilters.fotografia.fotografiaType = value
      if (value !== 'servicio_especial') {
        this.specificFilters.fotografia.servicioEspecialTypes = []
      }
      this.showFotografiaTypeDropdown = false
      this.filterServices()
    },
    getFotografiaTypeLabel (value) {
      if (!value) return 'Tipo de servicio'
      return this.fotografiaTypeOptions.find(opt => opt.value === value)?.label
    },
    selectServicioEspecial (value) {
      this.specificFilters.fotografia.servicioEspecialTypes.push(value)
      this.showServicioEspecialDropdown = false
      this.filterServices()
    },
    getServicioEspecialLabel (value) {
      return this.servicioEspecialOptions.find(opt => opt.value === value)?.label
    },
    removeServicioEspecial (value) {
      const index = this.specificFilters.fotografia.servicioEspecialTypes.indexOf(value)
      if (index !== -1) {
        this.specificFilters.fotografia.servicioEspecialTypes.splice(index, 1)
        this.filterServices()
      }
    },
    // Función para normalizar texto (eliminar acentos y convertir a minúsculas)
    normalizeText (text) {
      return text
        .toLowerCase()
        .normalize('NFD')
        .replace(/[\u0300-\u036f]/g, '')
    },
    toggleFotografiaTypeDropdown () {
      this.showFotografiaTypeDropdown = !this.showFotografiaTypeDropdown
      // Cerrar otros dropdowns
      this.showServicioEspecialDropdown = false
      this.showSortDropdown = false
      this.showDayDropdown = false
      this.showEspaiTypeDropdown = false
    },

    toggleServicioEspecialDropdown () {
      this.showServicioEspecialDropdown = !this.showServicioEspecialDropdown
      // Cerrar otros dropdowns
      this.showFotografiaTypeDropdown = false
      this.showSortDropdown = false
      this.showDayDropdown = false
      this.showEspaiTypeDropdown = false
    },

    toggleServicioEspecial (value) {
      const index = this.specificFilters.fotografia.servicioEspecialTypes.indexOf(value)
      if (index === -1) {
        this.specificFilters.fotografia.servicioEspecialTypes.push(value)
      } else {
        this.specificFilters.fotografia.servicioEspecialTypes.splice(index, 1)
      }
      this.filterServices()
      // Ya no cerramos el dropdown al seleccionar
    },

    clearServicioEspecial () {
      this.specificFilters.fotografia.servicioEspecialTypes = []
      this.showServicioEspecialDropdown = false
      this.filterServices()
    },

    clearMusicaGeneros () {
      this.specificFilters.musica.generos = []
      this.showMusicaGenerosDropdown = false
      this.filterServices()
    },

    removeMusicaGenero (value) {
      const index = this.specificFilters.musica.generos.indexOf(value)
      if (index !== -1) {
        this.specificFilters.musica.generos.splice(index, 1)
        this.filterServices()
      }
    },

    toggleMusicaGenerosDropdown () {
      this.showMusicaGenerosDropdown = !this.showMusicaGenerosDropdown
      if (this.showMusicaGenerosDropdown) {
        this.closeAllDropdowns()
        this.showMusicaGenerosDropdown = true
      }
    },

    getMusicaGenerosLabel (values) {
      if (!values || values.length === 0) return ''
      return values.map(value =>
        this.musicaGenerosOptions.find(opt => opt.value === value)?.label || value
      ).join(', ')
    },
    clearAllFilters () {
      // Limpiar filtros generales
      this.searchQuery = ''
      this.filters = {
        provincia: '',
        ciudad: '',
        diaSemana: [],
        horaInicio: '',
        horaFinal: '',
        precioMin: '',
        precioMax: ''
      }
      // Limpiar filtros específicos según el tipo seleccionado
      this.specificFilters = {
        espai: {
          type: [],
          capacitat: '',
          caracteristicas: ''
        },
        catering: {
          tipo_entrega: '',
          tipo_catering: [],
          comensales: '',
          duracion_min: '',
          duracion_max: '',
          menu_type: [],
          articulo_type: [],
          alergenos: [],
          tipo_servicio: ''
        },
        mobiliari: {
          tipologia: [], // Cambiado de string a array
          subtipologia: '',
          is_rental: '',
          cantidad: '',
          forma: '',
          modality: '',
          color: [],
          material: [],
          style: '',
          size: [],
          caracteristicas: ''
        },
        decoracio: {
          tipologia: [],
          subtipologia: '',
          is_rental: '',
          cantidad: '',
          forma: '',
          modality: '',
          color: [],
          material: [],
          style: '',
          size: [],
          caracteristicas: ''
        },
        musica: {
          musica_type: '',
          canciones: '',
          duracion_min: '',
          duracion_max: '',
          generos: [],
          instrumentos: '',
          caracteristicas: '',
          solicitar_cancion_nueva: '',
          equipo_propio: ''
        },
        fotografia: {
          fotografiaType: '',
          servicioEspecialTypes: [],
          duracionMin: '',
          duracionMax: '',
          caracteristicas: ''
        }
      }
      this.filterServices()
    },
    handleScroll () {
      if (this.scrollTimeout) {
        clearTimeout(this.scrollTimeout)
      }

      this.scrollTimeout = setTimeout(() => {
        const currentScroll = window.pageYOffset || document.documentElement.scrollTop

        // Si estamos en la parte superior de la página o scrollY <= 200, siempre mostrar el navbar
        if (currentScroll <= 200) {
          this.isNavbarHidden = false
          return
        }

        const scrollDifference = this.lastScrollTop - currentScroll

        if (currentScroll > this.lastScrollTop && currentScroll > 200) {
          // Scrolling down & past threshold
          this.isNavbarHidden = true
        } else if (scrollDifference > 10 && currentScroll > 0) {
          // Scrolling up with significant difference
          this.isNavbarHidden = false
        }

        this.lastScrollTop = currentScroll <= 0 ? 0 : currentScroll
      }, 50)
    },
    handleMouseMove (event) {
      this.mouseY = event.clientY
      // Mostrar la barra cuando el ratón está en los primeros 100px de la ventana
      this.isNavbarHidden = this.mouseY > 110
    },
    // Guardar el estado antes de navegar
    beforeRouteLeave (to, from, next) {
      // Guardar el estado en sessionStorage
      const state = {
        scrollPosition: window.scrollY,
        filters: this.filters,
        searchQuery: this.searchQuery
      }
      sessionStorage.setItem('servicesState', JSON.stringify(state))
      next()
    },

    // Restaurar el estado cuando el componente se activa
    activated () {
      const savedState = sessionStorage.getItem('servicesState')
      if (savedState) {
        const state = JSON.parse(savedState)
        this.filters = state.filters
        this.searchQuery = state.searchQuery

        // Restaurar la posición del scroll después de que el DOM se actualice
        this.$nextTick(() => {
          window.scrollTo(0, state.scrollPosition)
        })
      }
    }
  }
}
</script>

<style scoped>.page-container {
  padding-top: 140px;
  min-height: 100vh;
  background: #f8f9fa;
  background-image: url('../assets/fondoPage2.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Navbar styles */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 2rem;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: auto;
  margin-bottom: 2rem;
  backdrop-filter: blur(5px);
  transition: transform 0.3s ease-in-out;
}

.navbar-hidden {
  transform: translateY(-100%);
}

.navbar-left .logo {
  height: 80px;
  width: auto;
  cursor: pointer;
}

.navbar-center h1 {
  color: #800020;
  font-size: 2rem;
  margin: 0;
  flex-grow: 1;
  text-align: center;
}

.nav-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.back {
  background-color: #2C3E50;
  color: white;
}

.back:hover {
  background-color: #1a252f;
  transform: translateY(-2px);
}

/* Main content styles */
.main-content {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  backdrop-filter: blur(5px);
}

h1 {
  color: #800020;
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}

/* Filters section */
.filters-section {
  background-color: white;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  width: 100%;
  box-sizing: border-box;
}

.filters-grid {
  display: grid;
  gap: 1rem;
  align-items: center;
}

.filters-grid:first-child {
  grid-template-columns: 2fr 1fr;
  margin-bottom: 1rem;
}

.filters-grid.second-row {
  grid-template-columns: repeat(4, 1fr);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
}

.filter-group input,
.filter-group select {
  padding: 0.6rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  width: 100%;
  height: 38px;
  box-sizing: border-box;
}

.filter-group input:focus,
.filter-group select:focus {
  outline: none;
  border-color: #800020;
  box-shadow: 0 0 0 3px rgba(128, 0, 32, 0.1);
}

.price-inputs {
  display: flex;
  gap: 0.5rem;
}

.price-input {
  flex: 1;
}

.more-filters-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

.more-filters-link {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  font-size: 0.9rem;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0.3rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.more-filters-link:hover {
  color: #800020;
}

.more-filters-link i {
  font-size: 0.8rem;
}

.specific-filters {
  margin-right: 1rem;
  padding: rem;
  width: 100%;
  box-sizing: border-box;
}

.specific-filters-grid,
.specific-filters-grid.mobiliari-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.specific-filters-grid .filter-group,
.specific-filters-grid.mobiliari-grid .filter-group {
  min-width: 0 !important;
  max-width: 100% !important;
  /* overflow: hidden !important; */
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
}

.custom-select,
.selected-option,
.selected-tags,
.filter-input {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

.selected-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  padding-left: 0.2rem;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  max-width: 100%;
  width: 100%;
  text-overflow: ellipsis;
  height: 38px;
  min-height: 38px;
  line-height: 38px;
  align-items: center;
  box-sizing: border-box;
  scrollbar-width: thin; /* Firefox */
}

/* Opcional: Estilo para la barra en Chrome/Safari */
.selected-tags::-webkit-scrollbar {
  height: 6px;
}
.selected-tags::-webkit-scrollbar-thumb {
  background: #800020;
  border-radius: 4px;
}
.selected-tags::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.catering-row {
  display: flex;
  gap: 1rem;
  width: 100%;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.catering-delivery-group,
.catering-type-group,
.catering-menu-group,
.catering-menu-type-group,
.catering-article-type-group {
  flex: 0 0 calc(25% - 0.75rem);
  min-width: 0;
}

.custom-select.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.custom-select.disabled .selected-option {
  background-color: #f5f5f5;
  border-color: #ddd;
  color: #999;
}

.custom-select.disabled:hover {
  border-color: #ddd;
}

.catering-guests-group {
  flex: 0 0 calc(20% - 0.375rem);
  min-width: 0;
}

.catering-duration-group {
  flex: 0 0 40%;
}

.catering-allergens-group {
  flex: 0 0 40%;
}

.catering-features-group {
  flex: 1;
}

.duration-inputs {
  display: flex;
  gap: 0.5rem;
}

.duration-input {
  flex: 1;
}

.filter-select,
.filter-input {
  width: 100%;
  padding: 0.6rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  height: 38px;
  box-sizing: border-box;
}

.filter-select:focus,
.filter-input:focus {
  outline: none;
  border-color: #800020;
  box-shadow: 0 0 0 3px rgba(128, 0, 32, 0.1);
}

/* Services grid */
.services-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1rem 0;
}

/* Loading spinner */
.loading-spinner {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem;
  color: #800020;
}

.loading-spinner i {
  font-size: 2rem;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* No services message */
.no-services {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.no-services i {
  font-size: 3rem;
  color: #800020;
  margin-bottom: 1rem;
}

.no-services h3 {
  color: #2C3E50;
  margin-bottom: 0.5rem;
}

.no-services p {
  color: #666;
}

/* Responsive design */
@media (max-width: 1200px) {
  .filters-grid:first-child {
    grid-template-columns: 1fr;
  }
  .filters-grid.second-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .navbar {
    padding: 1rem;
  }
  .navbar-left .logo {
    height: 40px;
  }
  .filters-grid.second-row {
    grid-template-columns: 1fr;
  }
  .more-filters-container {
    justify-content: flex-start;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }
}

.service-type-selector {
  padding: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}
.service-type-img {
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.5rem;
  object-fit: contain;
}
.service-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  padding: 1.2rem 2.2rem;
  font-size: 1.1rem;
  color: #222;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 120px;
  min-height: 100px;
}
.service-type-btn i {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
}
.service-type-btn.active, .service-type-btn:hover {
  border-color: #800020;
  color: #800020;
  box-shadow: 0 4px 16px rgba(128,0,32,0.10);
  background: #f9f3f6;
}
.select-type-message {
  text-align: center;
  color: #800020;
  margin: 3rem 0 2rem 0;
  font-size: 1.3rem;
}
.select-type-message i {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
}
.select-type-message p {
  padding-bottom: 4rem;
}

/* Estilos para el select personalizado */
.custom-select {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: visible !important;
  cursor: pointer;
}

.selected-option {
  min-height: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.9rem;
  background-color: white;
  color: #2C3E50;
  transition: all 0.3s ease;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
}

.selected-option:hover {
  border-color: #800020;
}

.options-container {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: white;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  margin-top: 4px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.option {
  padding: 0.6rem;
  transition: all 0.2s ease;
  color: #2C3E50;
}

.option:hover {
  background-color:rgb(180, 115, 130);
  color: white;
}

.option.selected {
  background-color: #800020;
  color: white;
}

/* Estilo para la barra de desplazamiento */
.options-container::-webkit-scrollbar {
  width: 8px;
}

.options-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.options-container::-webkit-scrollbar-thumb {
  background: #800020;
  border-radius: 4px;
}

.options-container::-webkit-scrollbar-thumb:hover {
  background:rgb(180, 50, 80);
}

/* Estilos para los filtros */
.filter-select {
  width: 100%;
  padding: 0.6rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  height: 38px;
  box-sizing: border-box;
  font-family: inherit;
  color: #2C3E50;
  background-color: white;
}

.filter-select:focus {
  outline: none;
  border-color: #800020;
  box-shadow: 0 0 0 3px rgba(128, 0, 32, 0.1);
}

.filter-select option {
  font-family: inherit;
  color: #2C3E50;
  padding: 0.5rem;
  background-color: white;
}

.filter-select option:checked {
  background-color: #800020 !important;
  color: white !important;
}

.filter-select option:hover,
.filter-select option:focus,
.filter-select option:active {
  background-color: #800020 !important;
  color: white !important;
  cursor: pointer;
}

/* Forzar el color en el dropdown nativo */
.filter-select option::-ms-expand {
  background-color: #800020;
}

/* Estilos específicos para Firefox */
@-moz-document url-prefix() {
  .filter-select option:hover,
  .filter-select option:focus,
  .filter-select option:active {
    background-color: #800020 !important;
    color: white !important;
  }
}

/* Estilos específicos para Chrome/Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .filter-select option:hover,
  .filter-select option:focus,
  .filter-select option:active {
    background-color: #800020 !important;
    color: white !important;
  }
}

.filter-input {
  width: 100%;
  padding: 0.6rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  height: 38px;
  box-sizing: border-box;
  font-family: inherit;
  color: #2C3E50;
}

.filter-input:focus {
  outline: none;
  border-color: #800020;
  box-shadow: 0 0 0 3px rgba(128, 0, 32, 0.1);
}

.duration-group {
  grid-column: span 2;
}

.duration-inputs {
  display: flex;
  gap: 1rem;
}

.duration-input {
  flex: 1;
  width: 100%;
  padding: 0.6rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  height: 38px;
  box-sizing: border-box;
}

.duration-input:focus {
  outline: none;
  border-color: #800020;
  box-shadow: 0 0 0 3px rgba(128, 0, 32, 0.1);
}

/* Estilos específicos para los filtros de espacio */
.espai-filters {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
}

.espai-type-group {
  flex: 0 0 25%;
}

.espai-capacity-group {
  flex: 0 0 25%;
}

.espai-features-group {
  flex: 0 0 25%;
}

/* Estilos específicos para los filtros de catering */
.catering-row {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.catering-delivery-group {
  flex: 0 0 calc(25% - 0.4rem);
  min-width: 0;
}

.catering-type-group {
  flex: 0 0 calc(25% - 0.4rem);
  min-width: 0;
}

.catering-menu-group {
  flex: 0 0 calc(25% - 0.4rem);
  min-width: 0;
}

.catering-menu-type-group,
.catering-article-type-group {
  flex: 0 0 calc(25% - 0.4rem);
  min-width: 0;
}

.catering-guests-group {
  flex: 0 0 calc(20% - 0.3rem);
  min-width: 0;
}

.catering-duration-min-group {
  flex: 0 0 calc(20% - 0.3rem);
  min-width: 0;
}

.catering-duration-max-group {
  flex: 0 0 calc(20% - 0.3rem);
  min-width: 0;
}

.catering-allergens-group {
  flex: 0 0 calc(40% - 0.75rem);
  min-width: 0;
}

.catering-features-group {
  flex: 1;
  min-width: 0;
}

.selected-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  padding-left: 0.2rem;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  max-width: 100%;
  width: 100%;
  text-overflow: ellipsis;
  height: 38px;
  min-height: 38px;
  line-height: 38px;
  align-items: center;
  box-sizing: border-box;
  scrollbar-width: thin; /* Firefox */
}

/* Opcional: Estilo para la barra en Chrome/Safari */
.selected-tags::-webkit-scrollbar {
  height: 6px;
}
.selected-tags::-webkit-scrollbar-thumb {
  background: #800020;
  border-radius: 4px;
}
.selected-tags::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.custom-select,
.selected-option {
  width: 100%;
  min-width: 0;
}

.selected-tag {
  display: inline-flex;
  align-items: center;
  background-color: #800020;
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  gap: 0.3rem;
  white-space: nowrap;
  height: 16px;
}

.selected-tag i {
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0.1rem;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.selected-tag i:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.selected-option {
  min-height: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.9rem;
  background-color: white;
  color: #2C3E50;
  transition: all 0.3s ease;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
}

.selected-option:hover {
  border-color: #800020;
}

.specific-filters-grid.mobiliari-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.specific-filters-grid.mobiliari-grid .filter-group {
  width: 100%;
}

.specific-filters-grid.mobiliari-grid .caracteristicas-group {
  grid-column: span 2;
}

.custom-select,
.filter-input {
  width: 100%;
  height: 38px;
  box-sizing: border-box;
}

.selected-option {
  min-height: 38px;
  height: 38px;
  display: flex;
  align-items: center;
}

.filter-input,
.filter-select,
.custom-select,
.selected-option,
.selected-tags {
  height: 42px;
  min-height: 42px;
  line-height: 42px;
}

/* Opciones del dropdown */
.option {
  min-height: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 0.95em;
  padding: 0.3rem 0.6rem;
  margin-bottom: 1px;
  background-color:rgb(239, 239, 239);
}

/* Etiquetas */
.selected-tag {
  padding: 0.1rem 0.4rem;
  font-size: 0.9em;
  line-height: 1.2;
  border-radius: 4px;
}

.filter-label {
  font-size: 0.9em;
  color: #333;
  margin-bottom: 0px;
  margin-left: 2px;
  font-weight: 500;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.filter-label-icon {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.2em;
  object-fit: contain;
  display: inline-block;
}

.selected-tags-dia {
  max-width: 260px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  height: 38px;
  min-height: 38px;
  line-height: 38px;
  align-items: center;
  box-sizing: border-box;
  scrollbar-width: thin;
}
.selected-tags-dia::-webkit-scrollbar {
  height: 6px;
}
.selected-tags-dia::-webkit-scrollbar-thumb {
  background: #800020;
  border-radius: 4px;
}
.selected-tags-dia::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.custom-select-dia {
  width: 260px !important;
  min-width: 0 !important;
  max-width: 100%;
}
.custom-select-dia .selected-option {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
}
.selected-tags-dia {
  max-width: 100%;
  width: 100%;
}

.filters-row-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.filters-row-2 {
  display: grid;
  grid-template-columns: 17.5% 17.5% 20.5% 9% 9% 19.5%;
  gap: 1rem;
  align-items: center;
}
.provincia-group, .ciudad-group, .dia-group {
  min-width: 0;
  max-width: 100%;
}
.hora-inicio-group, .hora-final-group, .price-range {
  min-width: 0;
  max-width: 100%;
}

.custom-select-espai {
  width: 350px !important;
  min-width: 0 !important;
  max-width: 100%;
}
.custom-select-espai .selected-option {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
}
.selected-tags-espai {
  max-width: 100%;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  height: 38px;
  min-height: 38px;
  line-height: 38px;
  align-items: center;
  box-sizing: border-box;
  scrollbar-width: thin;
}
.selected-tags-espai::-webkit-scrollbar {
  height: 6px;
}
.selected-tags-espai::-webkit-scrollbar-thumb {
  background: #800020;
  border-radius: 4px;
}
.selected-tags-espai::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

/* Añadir estos estilos al final del bloque <style> */
.custom-select-catering {
  width: 260px !important;
  min-width: 0 !important;
  max-width: 100%;
}

.custom-select-catering .selected-option {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
}

.selected-tags-catering {
  max-width: 100%;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  height: 38px;
  min-height: 38px;
  line-height: 38px;
  align-items: center;
  box-sizing: border-box;
  scrollbar-width: thin;
}

.selected-tags-catering::-webkit-scrollbar {
  height: 6px;
}

.selected-tags-catering::-webkit-scrollbar-thumb {
  background: #800020;
  border-radius: 4px;
}

.selected-tags-catering::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.catering-row {
  display: flex;
  gap: 1rem;
  width: 100%;
  margin-bottom: 1rem;
}

.catering-delivery-group,
.catering-type-group,
.catering-menu-group,
.catering-menu-type-group {
  flex: 1;
  min-width: 0;
}

.catering-guests-group,
.catering-duration-min-group,
.catering-duration-max-group {
  flex: 1;
  min-width: 0;
}

.catering-allergens-group {
  flex: 2;
  min-width: 0;
}

.catering-features-group {
  flex: 1;
  min-width: 0;
}

/* Filtros específicos de catering en varias filas */
.catering-filters {
  width: 100%;
  margin: 0;
  padding: 0 0.5rem 0.5rem 0.5rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.catering-row {
  display: flex;
  gap: 1rem;
  width: 100%;
  margin-bottom: 0;
}

.catering-row:last-child {
  margin-bottom: 0 !important;
}

.catering-delivery-group,
.catering-type-group,
.catering-menu-group,
.catering-menu-type-group,
.catering-guests-group,
.catering-duration-min-group,
.catering-duration-max-group,
.catering-allergens-group,
.catering-features-group {
  margin: 0;
  padding: 0;
}

.custom-select-catering,
.catering-row input.filter-input {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

.catering-row .filter-group {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

.catering-row .filter-label {
  margin-bottom: 2px;
}

.musica-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 20px;
}

.musica-grid > .filter-group:not(.medium-width):not(.full-width) {
  grid-column: span 2;
}

.musica-grid .full-width {
  grid-column: 1 / -1;
}

.musica-grid .medium-width {
  grid-column: span 5;
}

/* Ajustar el ancho del contenedor de opciones para géneros */
.musica-grid .medium-width .options-container {
  max-height: 200px;
  overflow-y: auto;
}

.fotografia-filters {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.fotografia-filters .filters-row {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.fotografia-filters .filters-row > div {
  flex: 1;
}

.fotografia-filters .full-width {
  width: 100%;
}

.custom-select.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #f5f5f5;
}

.custom-select.disabled .selected-option {
  pointer-events: none;
}

.servicio-especial-group {
  flex: 1;
  min-width: 0;
}

.duracion-group {
  flex: 1;
  min-width: 0;
}

.caracteristicas-group {
  flex: 1;
  min-width: 0;
}

.duration-inputs {
  display: flex;
  gap: 0.5rem;
}

.duration-input {
  flex: 1;
}

.filter-input {
  width: 100%;
  padding: 0.6rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  height: 38px;
  box-sizing: border-box;
}

.filter-input:focus {
  outline: none;
  border-color: #800020;
  box-shadow: 0 0 0 3px rgba(128, 0, 32, 0.1);
}

.clear-option {
  color: #333;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}

.clear-option:hover {
  background-color:rgb(180, 115, 130);
  color: #fff;
}

.filter-group musica-generos-group {
  flex: 1;
  min-width: 0;
}

.custom-select-musica-generos {
  width: 260px !important;
  min-width: 0 !important;
  max-width: 100%;
}

.custom-select-musica-generos .selected-option {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
}

.selected-tags-musica-generos {
  max-width: 100%;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  height: 38px;
  min-height: 38px;
  line-height: 38px;
  align-items: center;
  box-sizing: border-box;
  scrollbar-width: thin;
}

.selected-tags-musica-generos::-webkit-scrollbar {
  height: 6px;
}

.selected-tags-musica-generos::-webkit-scrollbar-thumb {
  background: #800020;
  border-radius: 4px;
}

.selected-tags-musica-generos::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.selected-tag-musica-genero {
  display: inline-flex;
  align-items: center;
  background-color: #800020;
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  gap: 0.3rem;
  white-space: nowrap;
  height: 16px;
}

.selected-tag-musica-genero i {
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0.1rem;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.selected-tag-musica-genero i:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.selected-option-musica-genero {
  min-height: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.9rem;
  background-color: white;
  color: #2C3E50;
  transition: all 0.3s ease;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
}

.selected-option-musica-genero:hover {
  border-color: #800020;
}

.clear-option-musica-genero {
  color: #333;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}

.clear-option-musica-genero:hover {
  background-color:rgb(180, 115, 130);
  color: #fff;
}

.clear-filters-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 1rem;
  background-color:rgb(255, 255, 255);
  color: #333;
  border: 0px solid #f5c2c7;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  margin-bottom: 1rem;
}

.clear-filters-btn:hover {
  background-color:rgb(255, 255, 255);
  color:rgb(155, 7, 22);
}

.clear-filters-btn i {
  font-size: 1rem;
}

.filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.2rem;
  margin-bottom: -0.5rem;
}

.filters-header h3 {
  color: #333;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.clear-filters-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 1rem;
  background-color: rgb(255, 255, 255);
  color: #333;
  border: 0px solid #f5c2c7;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.clear-filters-btn:hover {
  background-color: rgb(255, 255, 255);
  color: rgb(155, 7, 22);
}
</style>
