<template>
  <div class="create-mobiliari-form" data-service-type="decoracio">
    <form @submit.prevent="handleSubmit">
      <!-- Información básica -->
      <div class="form-section">
        <div class="form-row">
          <div class="form-group">
            <label for="tipologia">
              <i class="bi bi-tag"></i> Tipología*
            </label>
            <select id="tipologia" v-model="formData.tipologia" required class="select-granate">
              <option disabled value="">Selecciona una tipología</option>
              <option value="FLORES">Flores</option>
              <option value="GLOBOS">Globos</option>
              <option value="LUCES_GUINALDA">Luces guirnalda</option>
              <option value="LUCES_LED">Luces LED</option>
              <option value="FUNDAS_SILLA">Fundas de silla</option>
              <option value="COJINES_MANTAS">Cojines y mantas</option>
              <option value="TELAS">Telas</option>
              <option value="CARTELES">Carteles</option>
              <option value="PHOTOCALL">Photocall</option>
              <option value="DISFRACES">Disfraces</option>
              <option value="VASOS">Vasos</option>
              <option value="VAJILLA_BANDEJAS">Vajilla y bandejas</option>
              <option value="MANTELES_SERVILLETAS">Manteles y servilletas</option>
              <option value="UTENSILIOS_COCINA">Utensilios de cocina</option>
              <option value="ELECTRODOMESTICOS_COCINA">Electrodomésticos y maquinaria de cocina</option>
              <option value="BUFET">Bufet</option>
              <option value="FOODTRUCK">Foodtruck</option>
              <option value="BARBACOA">Barbacoa</option>
            </select>
          </div>
          <div class="form-group">
            <label>
              <i class="bi bi-box-seam"></i> Tipo de Disponibilidad*
            </label>
            <div class="radio-group">
              <label class="radio-label">
                <input type="radio" v-model="formData.is_rental" :value="true" /> Alquiler
              </label>
              <label class="radio-label">
                <input type="radio" v-model="formData.is_rental" :value="false" /> Venta
              </label>
            </div>
          </div>
        </div>
        <div class="form-row cantidad-row">
          <div class="form-group cantidad-group">
            <label for="cantidad_min">
              <i class="bi bi-boxes"></i> Cantidad Mínima*
            </label>
            <input type="number" id="cantidad_min" v-model="formData.cantidad_min" required min="1" placeholder="Ej: 10" class="cantidad-input" />
          </div>
          <div class="form-group cantidad-group">
            <label for="cantidad_max">
              <i class="bi bi-boxes"></i> Cantidad Máxima*
            </label>
            <input type="number" id="cantidad_max" v-model="formData.cantidad_max" required min="1" placeholder="Ej: 100" class="cantidad-input" />
          </div>
        </div>
      </div>

      <!-- Detalles del Mobiliario -->
      <div class="form-section">
        <h3><i class="bi icon_i bi-list-check"></i> Detalles del Mobiliario</h3>
        <div class="form-row">
          <div class="form-group">
            <label for="subtipologia">
              <i class="bi bi-tags"></i> Subtipología
            </label>
            <input type="text" id="subtipologia" v-model="formData.subtipologia" placeholder="Ej: Centro de mesa floral, guirnalda, etc." />
          </div>
          <div class="form-group">
            <label for="forma">
              <i class="bi bi-pentagon"></i> Forma
            </label>
            <input type="text" id="forma" v-model="formData.forma" placeholder="Ej: Redonda, rectangular, corazón..." />
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label for="modality">
              <i class="bi bi-gear"></i> Modalidad
            </label>
            <input type="text" id="modality" v-model="formData.modality" placeholder="Ej: Interior, exterior, colgante..." />
          </div>
          <div class="form-group">
            <label for="style">
              <i class="bi bi-brush"></i> Estilo
            </label>
            <input type="text" id="style" v-model="formData.style" placeholder="Ej: Boho, clásico, minimalista..." />
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label for="size">
              <i class="bi bi-arrows-angle-expand"></i> Tamaño
            </label>
            <select id="size" v-model="formData.size" class="select-granate">
              <option disabled value="">Selecciona un tamaño</option>
              <option value="Muy pequeño">Muy pequeño</option>
              <option value="Pequeño">Pequeño</option>
              <option value="Mediano">Mediano</option>
              <option value="Grande">Grande</option>
              <option value="Muy grande">Muy grande</option>
              <option value="Extra grande">Extra grande</option>
              <option value="Otro">Otro</option>
            </select>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label for="colores">
              <i class="bi bi-palette"></i> Colores
            </label>
            <div class="input-group">
              <input id="colores" v-model="nuevoColor" type="text" placeholder="Añade un color (ej: dorado, pastel, blanco...) y pulsa +" class="tag-input" />
              <button @click="agregarColor" class="btn-add" type="button"><i class="bi bi-plus"></i></button>
            </div>
            <div class="tags-list">
              <span v-for="(color, idx) in formData.color" :key="color + idx" class="tag special">
                {{ color }}
                <button type="button" @click="eliminarColor(idx)" class="remove-tag"><i class="bi bi-x"></i></button>
              </span>
            </div>
          </div>
          <div class="form-group">
            <label for="materiales">
              <i class="bi bi-tools"></i> Materiales
            </label>
            <div class="input-group">
              <input id="materiales" v-model="nuevoMaterial" type="text" placeholder="Añade un material (ej: cristal, madera, tela...) y pulsa +" class="tag-input" />
              <button @click="agregarMaterial" class="btn-add" type="button"><i class="bi bi-plus"></i></button>
            </div>
            <div class="tags-list">
              <span v-for="(material, idx) in formData.material" :key="material + idx" class="tag special">
                {{ material }}
                <button type="button" @click="eliminarMaterial(idx)" class="remove-tag"><i class="bi bi-x"></i></button>
              </span>
            </div>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label>
              <i class="bi bi-rulers"></i> Dimensiones (cm)
            </label>
            <div class="dimensions-group">
              <div class="dimension-input">
                <label class="dimension-label" for="width">Ancho</label>
                <input type="number" id="width" class="dimension-input" v-model="formData.dimensions.width" min="0" step="0.1" placeholder="Ej: 30" />
              </div>
              <div class="dimension-input">
                <label class="dimension-label" for="height">Alto</label>
                <input type="number" id="height" class="dimension-input" v-model="formData.dimensions.height" min="0" step="0.1" placeholder="Ej: 15" />
              </div>
              <div class="dimension-input">
                <label class="dimension-label" for="depth">Profundidad</label>
                <input type="number" id="depth" class="dimension-input" v-model="formData.dimensions.depth" min="0" step="0.1" placeholder="Ej: 10" />
              </div>
            </div>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label for="complement">
              <i class="bi bi-plus-circle"></i> Complementos
            </label>
            <div class="input-group">
              <input id="complement" v-model="nuevoComplemento" type="text" placeholder="Añade un complemento (ej: pilas incluidas, base decorativa...) y pulsa +" class="tag-input" />
              <button @click="agregarComplemento" class="btn-add" type="button"><i class="bi bi-plus"></i></button>
            </div>
            <div class="tags-list">
              <span v-for="(complement, idx) in formData.complement" :key="complement + idx" class="tag special">
                {{ complement }}
                <button type="button" @click="eliminarComplemento(idx)" class="remove-tag"><i class="bi bi-x"></i></button>
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- Características -->
      <div class="form-section">
        <h3><i class="bi icon_i bi-list-stars"></i> Características</h3>
        <div class="caracteristicas-btns-grid">
          <div v-for="carac in caracteristicasPredefinidas" :key="carac.value" class="carac-btn-outer">
            <button type="button" :class="['carac-icon-btn', { selected: formData.caracteristicas.includes(carac.value) }]" @click="toggleCaracteristica(carac.value)">
              <i :class="carac.icon"></i>
            </button>
            <span :class="['carac-label', { selected: formData.caracteristicas.includes(carac.value) }]">{{ carac.label }}</span>
          </div>
        </div>
      </div>

      <!-- Servicios Incluidos -->
      <div class="form-section">
        <h3><i class="bi icon_i bi-clipboard-check"></i> Servicios Incluidos</h3>
        <div class="servicios-incluidos-grid">
          <div class="servicio-bloque">
            <h5><i class="bi icon_y bi-gift"></i> Servicios sorpresa e interactivos</h5>
            <div class="servicios-btns-grid">
              <div v-for="serv in serviciosSorpresa" :key="serv.value" class="servicio-btn-outer">
                <button type="button" :class="['servicio-icon-btn', { selected: formData.servicios_incluidos.includes(serv.value) }]" @click="toggleServicioIncluido(serv.value)">
                  <i :class="serv.icon"></i>
                </button>
                <span :class="['servicio-label', { selected: formData.servicios_incluidos.includes(serv.value) }]">{{ serv.label }}</span>
              </div>
            </div>
          </div>
          <div class="servicio-bloque">
            <h5><i class="bi icon_y bi-truck"></i> Logística y conveniencia</h5>
            <div class="servicios-btns-grid">
              <div v-for="serv in serviciosLogisticos" :key="serv.value" class="servicio-btn-outer">
                <button type="button" :class="['servicio-icon-btn', { selected: formData.servicios_incluidos.includes(serv.value) }]" @click="toggleServicioIncluido(serv.value)">
                  <i :class="serv.icon"></i>
                </button>
                <span :class="['servicio-label', { selected: formData.servicios_incluidos.includes(serv.value) }]">{{ serv.label }}</span>
              </div>
            </div>
          </div>
          <div class="servicio-bloque">
            <h5><i class="bi icon_y bi-tools"></i> Asistencia y soporte técnico</h5>
            <div class="servicios-btns-grid">
              <div v-for="serv in serviciosTecnicos" :key="serv.value" class="servicio-btn-outer">
                <button type="button" :class="['servicio-icon-btn', { selected: formData.servicios_incluidos.includes(serv.value) }]" @click="toggleServicioIncluido(serv.value)">
                  <i :class="serv.icon"></i>
                </button>
                <span :class="['servicio-label', { selected: formData.servicios_incluidos.includes(serv.value) }]">{{ serv.label }}</span>
              </div>
            </div>
          </div>
          <div class="servicio-bloque">
            <h5><i class="bi icon_y bi-shield-check"></i> Seguridad y cumplimiento</h5>
            <div class="servicios-btns-grid">
              <div v-for="serv in serviciosSeguridad" :key="serv.value" class="servicio-btn-outer">
                <button type="button" :class="['servicio-icon-btn', { selected: formData.servicios_incluidos.includes(serv.value) }]" @click="toggleServicioIncluido(serv.value)">
                  <i :class="serv.icon"></i>
                </button>
                <span :class="['servicio-label', { selected: formData.servicios_incluidos.includes(serv.value) }]">{{ serv.label }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

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

export default {
  name: 'CreateDecoracio',
  emits: ['service-data', 'clear-data'],
  setup (props, { emit }) {
    const formData = ref({
      service_type: 'decoracion',
      tipologia: '',
      is_rental: true,
      cantidad_min: null,
      cantidad_max: null,
      subtipologia: '',
      forma: '',
      modality: '',
      style: '',
      color: [],
      material: [],
      size: '',
      dimensions: {
        width: null,
        height: null,
        depth: null
      },
      caracteristicas: [],
      complement: [],
      servicios_incluidos: []
    })

    const nuevoColor = ref('')
    const nuevoMaterial = ref('')
    const nuevoComplemento = ref('')

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

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

    // 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 agregarColor = () => {
      if (nuevoColor.value.trim()) {
        formData.value.color.push(nuevoColor.value.trim())
        nuevoColor.value = ''
        saveState()
      }
    }

    const eliminarColor = (index) => {
      formData.value.color.splice(index, 1)
      saveState()
    }

    const agregarMaterial = () => {
      if (nuevoMaterial.value.trim()) {
        formData.value.material.push(nuevoMaterial.value.trim())
        nuevoMaterial.value = ''
        saveState()
      }
    }

    const eliminarMaterial = (index) => {
      formData.value.material.splice(index, 1)
      saveState()
    }

    const agregarComplemento = () => {
      if (nuevoComplemento.value.trim()) {
        formData.value.complement.push(nuevoComplemento.value.trim())
        nuevoComplemento.value = ''
        saveState()
      }
    }

    const eliminarComplemento = (index) => {
      formData.value.complement.splice(index, 1)
      saveState()
    }

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

    const toggleServicioIncluido = (servicio) => {
      const index = formData.value.servicios_incluidos.indexOf(servicio)
      if (index === -1) {
        formData.value.servicios_incluidos.push(servicio)
      } else {
        formData.value.servicios_incluidos.splice(index, 1)
      }
      saveState()
    }

    const caracteristicasPredefinidas = [
      { value: 'personalizable', label: 'Personalizable', icon: 'bi bi-pencil' },
      { value: 'reutilizable', label: 'Reutilizable', icon: 'bi bi-recycle' },
      { value: 'ecologico', label: 'Ecológico', icon: 'bi bi-leaf' },
      { value: 'reciclable', label: 'Reciclable', icon: 'bi bi-recycle' },
      { value: 'biodegradable', label: 'Biodegradable', icon: 'bi bi-flower1' },
      { value: 'sostenible', label: 'Sostenible', icon: 'bi bi-tree' },
      { value: 'artesanal', label: 'Artesanal', icon: 'bi bi-brush' },
      { value: 'vintage', label: 'Vintage', icon: 'bi bi-clock-history' },
      { value: 'moderno', label: 'Moderno', icon: 'bi bi-stars' },
      { value: 'minimalista', label: 'Minimalista', icon: 'bi bi-dash' },
      { value: 'rustico', label: 'Rústico', icon: 'bi bi-tree' },
      { value: 'elegante', label: 'Elegante', icon: 'bi bi-gem' },
      { value: 'lujoso', label: 'Lujoso', icon: 'bi bi-crown' },
      { value: 'festivo', label: 'Festivo', icon: 'bi bi-balloon' },
      { value: 'romantico', label: 'Romántico', icon: 'bi bi-heart' },
      { value: 'infantil', label: 'Infantil', icon: 'bi bi-emoji-smile' },
      { value: 'navideno', label: 'Navideño', icon: 'bi bi-tree' },
      { value: 'halloween', label: 'Halloween', icon: 'bi bi-ghost' },
      { value: 'carnaval', label: 'Carnaval', icon: 'bi bi-mask' },
      { value: 'boda', label: 'Boda', icon: 'bi bi-heart' }
    ]

    const serviciosSorpresa = [
      { value: 'montaje_sorpresa', label: 'Montaje sorpresa', icon: 'bi bi-gift' },
      { value: 'personalizacion_especial', label: 'Personalización especial', icon: 'bi bi-stars' },
      { value: 'efectos_especiales', label: 'Efectos especiales', icon: 'bi bi-magic' },
      { value: 'animacion', label: 'Animación', icon: 'bi bi-emoji-smile' },
      { value: 'interactivo', label: 'Interactivo', icon: 'bi bi-controller' }
    ]

    const serviciosLogisticos = [
      { value: 'transporte', label: 'Transporte', icon: 'bi bi-truck' },
      { value: 'montaje', label: 'Montaje', icon: 'bi bi-tools' },
      { value: 'desmontaje', label: 'Desmontaje', icon: 'bi bi-tools' },
      { value: 'recolocacion', label: 'Recolocación', icon: 'bi bi-arrow-repeat' },
      { value: 'recogida', label: 'Recogida', icon: 'bi bi-box-seam' }
    ]

    const serviciosTecnicos = [
      { value: 'supervision', label: 'Supervisión', icon: 'bi bi-eye' },
      { value: 'asistencia', label: 'Asistencia', icon: 'bi bi-person-check' },
      { value: 'reemplazo', label: 'Reemplazo', icon: 'bi bi-arrow-repeat' }
    ]

    const serviciosSeguridad = [
      { value: 'seguro', label: 'Seguro', icon: 'bi bi-shield-check' },
      { value: 'certificacion', label: 'Certificación', icon: 'bi bi-award' },
      { value: 'cumplimiento_normativa', label: 'Cumplimiento normativa', icon: 'bi bi-file-check' }
    ]

    // Función para limpiar los datos
    const clearData = () => {
      formData.value = {
        tipologia: '',
        is_rental: true,
        cantidad_min: null,
        cantidad_max: null,
        subtipologia: '',
        forma: '',
        modality: '',
        style: '',
        size: '',
        color: [],
        material: [],
        dimensions: {
          width: null,
          height: null,
          depth: null
        },
        complement: [],
        caracteristicas: [],
        servicios_incluidos: []
      }
    }

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

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

    return {
      formData,
      nuevoColor,
      nuevoMaterial,
      nuevoComplemento,
      agregarColor,
      eliminarColor,
      agregarMaterial,
      eliminarMaterial,
      agregarComplemento,
      eliminarComplemento,
      toggleCaracteristica,
      toggleServicioIncluido,
      caracteristicasPredefinidas,
      serviciosSorpresa,
      serviciosLogisticos,
      serviciosTecnicos,
      serviciosSeguridad
    }
  }
}
</script>

<style scoped>
/* Copiado tal cual de CreateMobiliari.vue */
.icon_i {
  font-size: 1.2rem;
  color: #800020;
}
.icon_y {
  font-size: 1.2rem;
  margin-right: 0.5rem;
  color: #333;
}
.create-mobiliari-form {
  max-width: 100%;
  margin: 0;
}

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

.form-section {
  background: white;
  border-radius: 8px;
  padding: 0rem;
  margin-bottom: 1.5rem;
}

h3 {
  color: #2C3E50;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

h5 {
  color: #2C3E50;
  font-size: 1.1rem;
  margin-left: 1rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

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

input[type="text"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ccc;  /* <-- Añade esta línea */
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s;
  box-sizing: border-box;
}

textarea {
  min-height: 100px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #800020;
}

.radio-group {
  display: flex;
  gap: 2rem;
  margin-top: 1rem;
}

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

.cantidad-row {
  display: flex;
  gap: 3rem;
  align-items: flex-end;
}
.cantidad-group {
  flex: 1;
}
.cantidad-input {
  width: 100%;
  height: auto;
  font-size: 1rem;
  border-radius: 8px;
  border: 1.5px solid #ccc;
  padding: 0.8rem;
}

.dimensions-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.dimension-input {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: -0.3rem;
}

.dimension-input label {
  font-size: 0.9rem;
  color: #666;
}

.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;
}

.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;
}

.input-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tag-input {
  flex: 1;
  padding: 0.7rem;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
}
.btn-add {
  background: #800020;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-add:hover {
  background: #600018;
}
.tags-list {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tag.special {
  background: #e6d1d7;
  color: #800020;
  border-radius: 16px;
  padding: 0.4rem 1rem 0.4rem 0.8rem;
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 500;
}
.remove-tag {
  background: none;
  border: none;
  color: #800020;
  margin-left: 0.5rem;
  cursor: pointer;
  font-size: 1.1rem;
}
.caracteristicas-btns-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1.1rem 0.5rem;
  justify-items: center;
  margin-bottom: 0.5rem;
}
.carac-btn-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.carac-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;
}
.carac-icon-btn.selected {
  background: #800020;
  color: #fff;
}
.carac-label {
  color: #6c757d;
  font-size: 0.93rem;
  text-align: center;
  font-weight: 500;
  max-width: 90px;
  line-height: 1.1;
}

.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: 220px;
  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-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: 180px;
    padding: 1rem 0.5rem;
  }
  .servicio-btn-outer {
    width: 80px;
    min-width: 80px;
  }
  .servicio-label {
    max-width: 80px;
    font-size: 0.88rem;
  }
}

.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;
}
</style>
