<template>
  <div class="create-espai-form" data-service-type="espai">
          <!-- Tipo de Espacio -->
      <div class="form-group">
        <label for="espai_type">
          <i class="bi bi-building"></i> Tipo de Espacio*
        </label>
        <select
          id="espai_type"
          v-model="formData.espai_type"
          class="form-control select-granate"
          required
        >
          <option value="" disabled>Selecciona un tipo</option>
          <option value="masia">Masía</option>
          <option value="restaurante">Restaurante</option>
          <option value="hotel">Hotel</option>
          <option value="local">Local</option>
          <option value="sala">Sala</option>
          <option value="comedor">Comedor</option>
          <option value="discoteca">Discoteca</option>
          <option value="espacio_de_actividades">Espacio de Actividades</option>
          <option value="terraza">Terraza</option>
          <option value="atico">Ático</option>
          <option value="castillo">Castillo</option>
          <option value="jardin">Jardín</option>
          <option value="casa_rural">Casa Rural</option>
          <option value="finca">Finca</option>
          <option value="molino">Molino</option>
          <option value="villa">Villa</option>
          <option value="hacienda">Hacienda</option>
          <option value="espacio_singular">Espacio Singular</option>
          <option value="palacio">Palacio</option>
          <option value="bosque">Bosque</option>
          <option value="otros">Otros</option>
        </select>
      </div>

      <!-- Capacidad -->
      <div class="form-row">
        <div class="form-group">
          <label for="capacitat_min">
            <i class="bi bi-people"></i> Capacidad Mínima*
          </label>
          <input
            id="capacitat_min"
            v-model.number="formData.capacitat_min"
            type="number"
            class="form-control"
            min="1"
            required
          />
        </div>
        <div class="form-group">
          <label for="capacitat_max">
            <i class="bi bi-people-fill"></i> Capacidad Máxima*
          </label>
          <input
            id="capacitat_max"
            v-model.number="formData.capacitat_max"
            type="number"
            class="form-control"
            min="1"
            required
          />
        </div>
      </div>

      <!-- Características -->
      <div class="form-section">
        <h3><i class="bi bi-list-check"></i> Características</h3>
        <div class="details-grid">
          <div class="detail-item" @click="toggleCharacteristic('interior')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('interior') }">
              <i class="bi bi-house"></i>
            </div>
            <span>Interior</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('exterior')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('exterior') }">
              <i class="bi bi-sun"></i>
            </div>
            <span>Exterior</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('interior_exterior')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('interior_exterior') }">
              <i class="bi bi-house-door"></i>
            </div>
            <span>Interior/Exterior</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('terraza')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('terraza') }">
              <i class="bi bi-umbrella"></i>
            </div>
            <span>Terraza</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('jardin')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('jardin') }">
              <i class="bi bi-tree"></i>
            </div>
            <span>Jardín</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('parking_disponible')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('parking_disponible') }">
              <i class="bi bi-p-circle"></i>
            </div>
            <span>Parking disponible</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('parking_gratuito')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('parking_gratuito') }">
              <i class="bi bi-p-square-fill"></i>
            </div>
            <span>Parking gratuito</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('carga_descarga')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('carga_descarga') }">
              <i class="bi bi-truck"></i>
            </div>
            <span>Carga y descarga</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('acceso_silla_ruedas')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('acceso_silla_ruedas') }">
              <i class="bi bi-wheelchair"></i>
            </div>
            <span>Acceso silla de ruedas</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('acceso_coche')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('acceso_coche') }">
              <i class="bi bi-car-front"></i>
            </div>
            <span>Acceso en coche</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('acceso_bus')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('acceso_bus') }">
              <i class="bi bi-bus-front"></i>
            </div>
            <span>Acceso autocares/bus</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('acceso_moto')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('acceso_moto') }">
              <i class="bi bi-bicycle"></i>
            </div>
            <span>Acceso moto</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('calefaccion')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('calefaccion') }">
              <i class="bi bi-thermometer-high"></i>
            </div>
            <span>Calefacción</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('aire_acondicionado')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('aire_acondicionado') }">
              <i class="bi bi-wind"></i>
            </div>
            <span>Aire acondicionado</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('permitido_comida')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('permitido_comida') }">
              <i class="bi bi-egg-fried"></i>
            </div>
            <span>Permitido traer comida</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('permitido_bebidas')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('permitido_bebidas') }">
              <i class="bi bi-cup-straw"></i>
            </div>
            <span>Permitido traer bebidas</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('permitido_fumar')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('permitido_fumar') }">
              <i class="bi bi-slash-circle"></i>
            </div>
            <span>Permitido fumar</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('wifi')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('wifi') }">
              <i class="bi bi-wifi"></i>
            </div>
            <span>WiFi</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('piscina')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('piscina') }">
              <i class="bi bi-water"></i>
            </div>
            <span>Piscina</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('jacuzzi')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('jacuzzi') }">
              <i class="bi bi-droplet"></i>
            </div>
            <span>Jacuzzi</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('ascensor')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('ascensor') }">
              <i class="bi bi-elevator"></i>
            </div>
            <span>Ascensor</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('chimenea')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('chimenea') }">
              <i class="bi bi-fire"></i>
            </div>
            <span>Chimenea</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('hinchables')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('hinchables') }">
              <i class="bi bi-balloon"></i>
            </div>
            <span>Hinchables</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('anfitrion_presente')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('anfitrion_presente') }">
              <i class="bi bi-person-check"></i>
            </div>
            <span>Anfitrión presente</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('menores_25')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('menores_25') }">
              <i class="bi bi-person-badge"></i>
            </div>
            <span>Alquiler menores 25</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('montana')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('montana') }">
              <i class="bi bi-mountain"></i>
            </div>
            <span>Montaña</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('aislado')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('aislado') }">
              <i class="bi bi-tree"></i>
            </div>
            <span>Aislado</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('acceso_playa')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('acceso_playa') }">
              <i class="bi bi-umbrella-fill"></i>
            </div>
            <span>Acceso a la playa</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('con_vistas')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('con_vistas') }">
              <i class="bi bi-binoculars"></i>
            </div>
            <span>Con vistas</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('puesta_sol')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('puesta_sol') }">
              <i class="bi bi-sunset"></i>
            </div>
            <span>Puesta de sol</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('funcional')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('funcional') }">
              <i class="bi bi-gear-wide"></i>
            </div>
            <span>Funcional</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('moderno')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('moderno') }">
              <i class="bi bi-building"></i>
            </div>
            <span>Moderno</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('futurista')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('futurista') }">
              <i class="bi bi-robot"></i>
            </div>
            <span>Futurista</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('historico')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('historico') }">
              <i class="bi bi-bank"></i>
            </div>
            <span>Histórico</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('vintage')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('vintage') }">
              <i class="bi bi-clock-history"></i>
            </div>
            <span>Vintage</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('rustico')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('rustico') }">
              <i class="bi bi-house-heart"></i>
            </div>
            <span>Rústico</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('antiguo')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('antiguo') }">
              <i class="bi bi-hourglass-split"></i>
            </div>
            <span>Antiguo</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('asiatico')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('asiatico') }">
              <i class="bi bi-flower1"></i>
            </div>
            <span>Asiático</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('indio')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('indio') }">
              <i class="bi bi-flower2"></i>
            </div>
            <span>Indio</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('minimalista')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('minimalista') }">
              <i class="bi bi-square"></i>
            </div>
            <span>Minimalista</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('instagrameable')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('instagrameable') }">
              <i class="bi bi-instagram"></i>
            </div>
            <span>Instagrameable</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('ecologico')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('ecologico') }">
              <i class="bi bi-tree"></i>
            </div>
            <span>Ecológico</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('tematico')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('tematico') }">
              <i class="bi bi-stars"></i>
            </div>
            <span>Temático</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('urbano')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('urbano') }">
              <i class="bi bi-buildings"></i>
            </div>
            <span>Urbano</span>
          </div>
          <div class="detail-item" @click="toggleCharacteristic('ibicenco')">
            <div class="detail-icon" :class="{ active: hasCharacteristic('ibicenco') }">
              <i class="bi bi-brightness-high"></i>
            </div>
            <span>Ibicenco</span>
          </div>
        </div>
      </div>

      <!-- Servicios Incluidos -->
      <div class="form-section">
        <h3><i class="bi bi-gear"></i> Servicios Incluidos</h3>
        <div class="servicios-incluidos-grid">
          <div v-for="(services, category) in formData.service_include" :key="category" class="servicio-bloque">
            <h5><i :class="getCategoryIcon(category)"></i> {{ category }}</h5>
            <div class="servicios-btns-grid">
              <div v-for="(isSelected, service) in services" :key="service" class="servicio-btn-outer">
                <button type="button" class="servicio-icon-btn" :class="{ selected: isSelected }" @click="toggleService(category, service)">
                  <i :class="getServiceIcon(service)"></i>
                </button>
                <span class="servicio-label">{{ formatServiceName(service) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'

export default {
  name: 'CreateEspai',
  emits: ['service-data', 'clear-data'],
  setup (props, { emit }) {
    const formData = ref({
      espai_type: '',
      capacitat_min: null,
      capacitat_max: null,
      caracteristicas: [],
      service_include: {
        'Equipamiento Audiovisual': {
          equipo_sonido: false,
          proyector: false,
          altavoces: false,
          microfonos: false,
          tv: false,
          focos: false
        },
        'Baño': {
          duchas: false,
          banera: false,
          agua_caliente: false
        },
        'Servicios Adicionales': {
          guardaropas: false
        },
        'Cocina y Equipamiento': {
          microondas: false,
          horno: false,
          nevera: false,
          cafetera: false,
          congeladores: false,
          barra: false,
          barbacoa: false,
          vajilla: false,
          cuberteria: false,
          vitroceramica: false
        },
        'Entretenimiento': {
          pizarra: false,
          futbolin: false,
          billar: false
        }
      }
    })

    // Función para guardar el estado
    const saveState = () => {
      sessionStorage.setItem('createEspaiState', JSON.stringify(formData.value))
    }

    // Función para restaurar el estado
    const restoreState = () => {
      const savedState = sessionStorage.getItem('createEspaiState')
      if (savedState) {
        formData.value = JSON.parse(savedState)
      }
    }

    // Guardar estado antes de desmontar el componente
    onBeforeUnmount(() => {
      saveState()
    })

    // Restaurar estado al montar el componente
    onMounted(() => {
      restoreState()
    })

    // Observar cambios en formData y emitir eventos
    watch(formData, (newValue) => {
      emit('service-data', newValue)
      saveState()
    }, { deep: true })

    const toggleCharacteristic = (characteristic) => {
      const index = formData.value.caracteristicas.indexOf(characteristic)
      if (index === -1) {
        formData.value.caracteristicas.push(characteristic)
      } else {
        formData.value.caracteristicas.splice(index, 1)
      }
    }

    const hasCharacteristic = (characteristic) => {
      return formData.value.caracteristicas.includes(characteristic)
    }

    const toggleService = (category, service) => {
      if (typeof formData.value.service_include[category][service] === 'boolean') {
        formData.value.service_include[category][service] = !formData.value.service_include[category][service]
      }
    }

    const hasService = (category, service) => {
      return formData.value.service_include[category][service]
    }

    const getCategoryIcon = (category) => {
      const icons = {
        'Equipamiento Audiovisual': 'bi-music-note-beamed',
        'Baño': 'bi-droplet',
        'Servicios Adicionales': 'bi-gear',
        'Cocina y Equipamiento': 'bi-cup-hot',
        'Entretenimiento': 'bi-controller'
      }
      return icons[category] || 'bi-box-seam'
    }

    const getServiceIcon = (service) => {
      const icons = {
        equipo_sonido: 'bi-speaker',
        proyector: 'bi-projector',
        altavoces: 'bi-speaker-fill',
        microfonos: 'bi-mic',
        tv: 'bi-tv',
        focos: 'bi-lightbulb',
        duchas: 'bi-water',
        banera: 'bi-water',
        agua_caliente: 'bi-thermometer-high',
        guardaropas: 'bi-handbag',
        microondas: 'bi-minecart-loaded',
        horno: 'bi-fire',
        nevera: 'bi-snow',
        cafetera: 'bi-cup-hot',
        congeladores: 'bi-snow2',
        barra: 'bi-cup',
        barbacoa: 'bi-fire',
        vajilla: 'bi-cup-straw',
        cuberteria: 'bi-knife',
        vitroceramica: 'bi-circle',
        pizarra: 'bi-easel',
        futbolin: 'bi-controller',
        billar: 'bi-circle-fill'
      }
      return icons[service] || 'bi-box-seam'
    }

    const formatServiceName = (service) => {
      return service.split('_').map(word =>
        word.charAt(0).toUpperCase() + word.slice(1)
      ).join(' ')
    }

    // Función para limpiar los datos
    const clearData = () => {
      formData.value = {
        espai_type: '',
        capacitat_min: null,
        capacitat_max: null,
        caracteristicas: []
      }
    }

    // Escuchar el evento clear-data
    onMounted(() => {
      const element = document.querySelector('.create-espai-form')
      if (element) {
        element.addEventListener('clear-data', clearData)
      }
    })

    // Limpiar el event listener cuando el componente se desmonte
    onBeforeUnmount(() => {
      const element = document.querySelector('.create-espai-form')
      if (element) {
        element.removeEventListener('clear-data', clearData)
      }
    })

    return {
      formData,
      toggleCharacteristic,
      hasCharacteristic,
      toggleService,
      hasService,
      getCategoryIcon,
      getServiceIcon,
      formatServiceName
    }
  }
}
</script>

<style scoped>
.create-espai-form {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 2.5rem auto;
}

h2 {
  color: #800020;
  text-align: center;
  margin-bottom: 2rem;
}

.form-section {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.form-section h3 {
  color: #2C3E50;
  margin-bottom: 1.25rem;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-section h3 i {
  color: #800020;
}

.details-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.detail-category {
  background: rgb(247, 247, 247);
  border-radius: 8px;
  padding: 1rem;
}

.detail-category h4 {
  color: #333;
  margin-bottom: 1rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.detail-category h4 i {
  color: #800020;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1rem;
}

.detail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.detail-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgb(240, 240, 240);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.detail-icon i {
  font-size: 1.25rem;
  color: #6c757d;
}

.detail-icon.active {
  background-color: #800020;
}

.detail-icon.active i {
  color: white;
}

.detail-item span {
  text-align: center;
  font-size: 0.875rem;
  color: #495057;
  font-weight: 500;
}

.form-group {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.form-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  color: #2C3E50;
  font-weight: 500;
}

.form-control {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s;
  box-sizing: border-box;
}

.form-control:focus {
  outline: none;
  border-color: #800020;
  box-shadow: 0 0 0 0.2rem rgba(128, 0, 32, 0.1);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 1.5rem;
}

.checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.image-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.preview-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.preview-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.remove-image {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #dc3545;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
}

.submit-btn,
.cancel-btn {
  padding: 0.8rem 1.5rem;
  border-radius: 6px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.3s;
}

.submit-btn {
  background-color: #800020;
  color: white;
  border: none;
}

.submit-btn:hover {
  background-color: #600018;
}

.cancel-btn {
  background-color: #e9ecef;
  color: #2C3E50;
  border: 1px solid #dee2e6;
}

.cancel-btn:hover {
  background-color: #dee2e6;
}

input[type="file"] {
  border: 2px dashed #e9ecef;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
}

input[type="file"]:hover {
  border-color: #800020;
}

.characteristics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1rem;
  width: 100%;
}

.characteristic-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

.characteristic-icon:hover {
  background-color:rgb(255, 171, 171);
}

.characteristic-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.characteristic-icon.active {
  background-color: #800020;
  color: white;
}

.characteristic-item span {
  text-align: center;
  font-size: 0.875rem;
  color: #495057;
}

.services-category {
  color: #2C3E50;
  font-size: 1.1rem;
  margin: 2rem 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.services-category:first-of-type {
  margin-top: 1rem;
}

.select-granate {
  border: 1.5px solid #ccc;
  color: #2C3E50;
  background: #fff;
  border-radius: 8px;
  padding: 0.8rem;
  font-size: 1rem;
  transition: border-color 0.2s;
  height: 44px;
}
.select-granate:focus {
  border-color: #800020;
  box-shadow: 0 0 0 0.2rem rgba(128, 0, 32, 0.1);
}
.select-granate option:checked {
  background: #800020;
  color: #fff;
}
.select-granate option:hover {
  background: #e5b3c6;
  color: #800020;
}

.servicios-incluidos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2.5rem;
  margin-top: 1rem;
}
@media (min-width: 700px) {
  .servicios-incluidos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.servicio-bloque {
  background: rgb(247, 247, 247);
  border-radius: 8px;
  padding: 1.5rem 1rem 1.5rem 1rem;
  min-width: 260px;
  flex: 1;
  justify-content: center;
  margin-bottom: 0.5rem;
  box-sizing: border-box;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.servicio-bloque h5 {
  color: #333;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  justify-content: center;
  width: 100%;
  text-align: center;
}
.servicios-btns-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.1rem;
  overflow-x: auto;
  justify-content: center;
  width: 100%;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: #ccc #f7f7f7;
}
.servicios-btns-grid::-webkit-scrollbar {
  height: 8px;
  background: #f7f7f7;
}
.servicios-btns-grid::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}
.servicio-btn-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 90px;
  min-width: 90px;
  justify-self: center;
}
.servicio-icon-btn {
  background: #e9ecef;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
  transition: all 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  cursor: pointer;
}
.servicio-icon-btn.selected {
  background: #800020;
  color: #fff;
}
.servicio-label {
  color: #6c757d;
  font-size: 0.93rem;
  text-align: center;
  font-weight: 500;
  max-width: 90px;
  line-height: 1.1;
  margin-top: 0.2rem;
}
@media (max-width: 700px) {
  .servicio-bloque {
    min-height: 140px;
    padding: 1rem 0.5rem;
  }
  .servicio-btn-outer {
    width: 80px;
    min-width: 80px;
  }
  .servicio-label {
    max-width: 80px;
    font-size: 0.88rem;
  }
}
</style>
