<template>
  <div class="create-catering-form" data-service-type="catering">
    <form @submit.prevent="handleSubmit">
      <!-- Detalles Específicos -->
      <div class="form-section detalles-especificos">
        <div class="form-row">
          <div class="form-group">
            <label for="tipo_entrega">
              <i class="bi bi-truck"></i> Tipo de Entrega*
            </label>
            <select id="tipo_entrega" v-model="formData.tipo_entrega" required class="select-granate">
              <option value="establecimiento">Establecimiento</option>
              <option value="entrega">Entrega</option>
              <option value="servicio_domicilio">Servicio a Domicilio</option>
            </select>
          </div>
        </div>
        <div class="form-row" v-if="formData.tipo_entrega === 'servicio_domicilio'">
          <div class="form-group">
            <label for="tipo_catering">
              <i class="bi bi-box"></i> Tipo de Catering*
            </label>
            <select id="tipo_catering" v-model="formData.tipo_catering" required class="select-granate">
              <option value="mesa_servido">Servicio en Mesa con Camareros</option>
              <option value="mesa_compartido">Servicio en Mesa Compartido</option>
              <option value="mesa_redonda">Mesas Redondas</option>
              <option value="banquete_imperial">Banquete Imperial</option>
              <option value="gueridon">Gueridon</option>
              <option value="buffet">Buffet</option>
              <option value="estaciones">Estaciones</option>
              <option value="coctel">Cóctel</option>
              <option value="finger_food">Finger Food</option>
              <option value="mixto_coctel_mesa">Mixto Cóctel + Mesa</option>
              <option value="mixto_coctel_buffet">Mixto Cóctel + Buffet</option>
              <option value="show_cooking">Show Cooking</option>
              <option value="food_truck">Food Truck</option>
            </select>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label for="min_comensales">
              <i class="bi bi-people"></i> Mínimo de Comensales*
            </label>
            <input
              type="number"
              id="min_comensales"
              v-model="formData.min_comensales"
              required
              min="1"
            />
          </div>
          <div class="form-group">
            <label for="max_comensales">
              <i class="bi bi-people-fill"></i> Máximo de Comensales*
            </label>
            <input
              type="number"
              id="max_comensales"
              v-model="formData.max_comensales"
              required
              min="1"
            />
          </div>
          <div class="form-group">
            <label for="duracion">
              <i class="bi bi-clock"></i> Duración (horas)*
            </label>
            <input
              type="number"
              id="duracion"
              v-model="formData.duracion"
              required
              min="0.5"
              step="0.5"
            />
          </div>
        </div>
      </div>

      <!-- Tipo de Servicio (Menú/Artículo) -->
      <div class="form-section">
        <h3><i class="bi icon_i bi-list-check"></i> Tipo de Servicio</h3>
        <div class="radio-group">
          <label class="radio-label">
            <input
              type="radio"
              v-model="formData.is_menu"
              :value="true"
            />
            Menú
          </label>
          <label class="radio-label">
            <input
              type="radio"
              v-model="formData.is_menu"
              :value="false"
            />
            Artículo
          </label>
        </div>

        <!-- Campos específicos para Menú -->
        <template v-if="formData.is_menu">
          <div class="form-group">
            <label for="tipo_menu">
              <i class="bi bi-tag"></i> Tipo de Menú*
            </label>
            <select id="tipo_menu" v-model="formData.tipo_menu" required class="select-granate">
              <option value="tapas">Tapas</option>
              <option value="pizza">Pizza</option>
              <option value="mediterraneo">Mediterráneo</option>
              <option value="asiatico">Asiático</option>
              <option value="mexicano">Mexicano</option>
              <option value="italiano">Italiano</option>
              <option value="vegetariano">Vegetariano</option>
              <option value="vegano">Vegano</option>
              <option value="sin_gluten">Sin Gluten</option>
              <option value="infantil">Infantil</option>
              <option value="gourmet">Gourmet</option>
              <option value="fusion">Fusión</option>
              <option value="marisco">Marisco</option>
              <option value="carnes">Carnes</option>
              <option value="postres">Postres</option>
              <option value="bodegas">Bodegas</option>
              <option value="brunch">Brunch</option>
              <option value="coffee_break">Coffee Break</option>
              <option value="picnic">Picnic</option>
              <option value="barbacoa">Barbacoa</option>
              <option value="paella">Paella</option>
              <option value="sushi">Sushi</option>
              <option value="variado">Variado</option>
              <option value="otro">Otro</option>
            </select>
          </div>

          <div class="form-group">
            <label for="nombre_menu">
              <i class="bi bi-pencil"></i> Nombre del Menú*
            </label>
            <input
              type="text"
              id="nombre_menu"
              v-model="formData.nombre_menu"
              required
              placeholder="Ej: Menú de la Semana"
            />
          </div>

          <div class="form-group">
            <label for="descripcion_menu">
              <i class="bi bi-card-text"></i> Descripción del Menú
            </label>
            <textarea
              id="descripcion_menu"
              v-model="formData.descripcion_menu"
              placeholder="Describa los detalles del menú..."
            ></textarea>
          </div>

          <div class="form-group">
            <label for="platos">
              <i class="bi bi-list-ul"></i> Platos*
            </label>
            <div class="input-group">
              <input
                id="platos"
                v-model="nuevoPlato"
                type="text"
                placeholder="Añade un plato y pulsa +"
                class="plato-input"
              />
              <button @click="agregarPlato" class="btn-add" type="button">
                <i class="bi bi-plus"></i>
              </button>
            </div>
            <div class="platos-list">
              <span v-for="(plato, idx) in formData.platos" :key="plato + idx" class="tag special plato-tag">
                {{ plato }}
                <button type="button" @click="eliminarPlato(idx)" class="remove-tag"><i class="bi bi-x"></i></button>
              </span>
            </div>
          </div>
        </template>

        <!-- Campos específicos para Artículo -->
        <template v-else>
          <div class="form-group">
            <label for="tipo_articulo">
              <i class="bi bi-tag"></i> Tipo de Artículo*
            </label>
            <select id="tipo_articulo" v-model="formData.tipo_articulo" required>
              <option value="agua">Agua</option>
              <option value="refrescos">Refrescos</option>
              <option value="zumos">Zumos</option>
              <option value="cerveza">Cerveza</option>
              <option value="vino">Vino</option>
              <option value="cava">Cava</option>
              <option value="champagne">Champagne</option>
              <option value="cocteles">Cócteles</option>
              <option value="cafe">Café</option>
              <option value="te">Té</option>
              <option value="infusiones">Infusiones</option>
              <option value="aceitunas">Aceitunas</option>
              <option value="frutos_secos">Frutos Secos</option>
              <option value="patatas">Patatas/Snacks</option>
              <option value="tapas">Tapas</option>
              <option value="canapes">Canapés</option>
              <option value="quesos">Quesos</option>
              <option value="embutidos">Embutidos</option>
              <option value="tartas">Tartas</option>
              <option value="pasteles">Pasteles</option>
              <option value="helados">Helados</option>
              <option value="fruta">Fruta</option>
              <option value="chocolates">Chocolates</option>
              <option value="galletas">Galletas</option>
              <option value="dulces">Dulces</option>
              <option value="variado">Variado</option>
              <option value="otro">Otro</option>
            </select>
          </div>

          <div class="form-group">
            <label for="nombre_articulo">
              <i class="bi bi-pencil"></i> Nombre del Artículo*
            </label>
            <input
              type="text"
              id="nombre_articulo"
              v-model="formData.nombre_articulo"
              required
              placeholder="Ej: Tabla de quesos selectos"
            />
          </div>

          <div class="form-group">
            <label for="descripcion_articulo">
              <i class="bi bi-card-text"></i> Descripción del Artículo
            </label>
            <textarea
              id="descripcion_articulo"
              v-model="formData.descripcion_articulo"
              placeholder="Describa los detalles del artículo..."
            ></textarea>
          </div>
        </template>
      </div>

      <!-- Características -->
      <div class="form-section">
        <h3><i class="bi icon_i bi-list-stars"></i> Características</h3>
        <div class="details-grid">
          <div v-for="car in caracteristicasList" :key="car" class="detail-item" @click="toggleCaracteristica(car)">
            <div class="detail-icon" :class="{ active: hasCaracteristica(car) }">
              <i :class="getCaracteristicaIcon(car)"></i>
            </div>
            <span>{{ car }}</span>
          </div>
        </div>
      </div>

      <!-- Alérgenos -->
      <div class="form-section">
        <h3><i class="bi icon_i bi-exclamation-triangle"></i> Alérgenos</h3>
        <div class="checkbox-group">
          <label v-for="alergeno in alergenos" :key="alergeno.value" class="checkbox-label">
            <input
              type="checkbox"
              v-model="formData.alergenos"
              :value="alergeno.value"
            />
            {{ alergeno.label }}
          </label>
        </div>
      </div>

      <!-- Opciones Especiales -->
      <div class="form-section">
        <h3><i class="bi icon_i bi-star"></i> Opciones Especiales</h3>
        <div class="checkbox-group">
          <!-- Checkbox solo para las predefinidas -->
          <label v-for="opcion in opcionesEspeciales" :key="opcion" class="checkbox-label">
            <input
              type="checkbox"
              v-model="formData.opciones_especiales"
              :value="opcion"
            />
            {{ opcion }}
          </label>
          <!-- Etiquetas solo para las opciones personalizadas -->
          <label
            v-for="opcion in formData.opciones_especiales.filter(o => !opcionesEspeciales.includes(o))"
            :key="opcion"
            class="checkbox-label tag special"
          >
            {{ opcion }}
            <button type="button" @click="removeOpcionEspecial(opcion)" class="remove-tag"><i class="bi bi-x"></i></button>
          </label>
        </div>
        <div class="form-group">
          <div class="input-group">
            <input
              type="text"
              v-model="nuevaOpcion"
              placeholder="Añadir otra opción especial"
            />
            <button @click="agregarOpcionEspecial" class="btn-add" type="button">
              <i class="bi bi-plus"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- Servicios Incluidos -->
      <div class="form-section">
        <h3><i class="bi icon_i bi-gear"></i> Servicios Incluidos</h3>
        <div class="servicios-incluidos-grid">
          <div class="servicios-incluidos-row">
            <div class="servicios-incluidos-col">
              <h4><i :class="getCategoryIcon('Personal')"></i> Personal</h4>
              <div class="servicios-btns-grid">
                <div v-for="(value, service) in formData.servicios_incluidos['Personal']" :key="service" class="servicio-btn-outer" @click="toggleServicio('Personal', service)">
                  <div class="servicio-icon-btn" :class="{ selected: hasServicio('Personal', service) }">
                    <i :class="getServicioIcon(service)"></i>
                  </div>
                  <span class="servicio-label">{{ formatServicioName(service) }}</span>
                </div>
              </div>
            </div>
            <div class="servicios-incluidos-col">
              <h4><i :class="getCategoryIcon('Menaje')"></i> Menaje</h4>
              <div class="servicios-btns-grid">
                <div v-for="(value, service) in formData.servicios_incluidos['Menaje']" :key="service" class="servicio-btn-outer" @click="toggleServicio('Menaje', service)">
                  <div class="servicio-icon-btn" :class="{ selected: hasServicio('Menaje', service) }">
                    <i :class="getServicioIcon(service)"></i>
                  </div>
                  <span class="servicio-label">{{ formatServicioName(service) }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="servicios-incluidos-row">
            <div class="servicios-incluidos-col-full">
              <h4><i :class="getCategoryIcon('Otros')"></i> Otros</h4>
              <div class="servicios-btns-grid">
                <div v-for="(value, service) in formData.servicios_incluidos['Otros']" :key="service" class="servicio-btn-outer" @click="toggleServicio('Otros', service)">
                  <div class="servicio-icon-btn" :class="{ selected: hasServicio('Otros', service) }">
                    <i :class="getServicioIcon(service)"></i>
                  </div>
                  <span class="servicio-label">{{ formatServicioName(service) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

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

export default {
  name: 'CreateCatering',
  emits: ['service-data', 'clear-data'],
  setup (props, { emit }) {
    const formData = ref({
      tipo_entrega: '',
      tipo_catering: '',
      min_comensales: null,
      max_comensales: null,
      duracion: null,
      is_menu: true,
      tipo_menu: '',
      nombre_menu: '',
      descripcion_menu: '',
      platos: [],
      tipo_articulo: '',
      nombre_articulo: '',
      descripcion_articulo: '',
      alergenos: [],
      opciones_especiales: [],
      caracteristicas: [],
      servicios_incluidos: {
        'Personal': {
          chef: false,
          camareros: false,
          bartenders: false
        },
        'Menaje': {
          vajilla: false,
          cuberteria: false
        },
        'Otros': {
          limpieza: false,
          transporte: false,
          montaje: false,
          logistica: false
        }
      }
    })

    const nuevoPlato = ref('')

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

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

    // 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 agregarPlato = () => {
      if (nuevoPlato.value.trim()) {
        formData.value.platos.push(nuevoPlato.value.trim())
        nuevoPlato.value = ''
        saveState()
      }
    }

    const eliminarPlato = (index) => {
      formData.value.platos.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 hasCaracteristica = (caracteristica) => {
      return formData.value.caracteristicas.includes(caracteristica)
    }

    const nuevaOpcion = ref('')

    const agregarOpcionEspecial = () => {
      if (nuevaOpcion.value.trim() && !formData.value.opciones_especiales.includes(nuevaOpcion.value.trim())) {
        formData.value.opciones_especiales.push(nuevaOpcion.value.trim())
        nuevaOpcion.value = ''
        saveState()
      }
    }

    const removeOpcionEspecial = (opcion) => {
      const idx = formData.value.opciones_especiales.indexOf(opcion)
      if (idx !== -1) formData.value.opciones_especiales.splice(idx, 1)
      saveState()
    }

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

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

    const getCategoryIcon = (category) => {
      const icons = {
        'Personal': 'bi-person-badge',
        'Menaje': 'bi-cup-straw',
        'Otros': 'bi-gear'
      }
      return icons[category] || 'bi-box-seam'
    }

    const getCaracteristicaIcon = (caracteristica) => {
      const icons = {
        'Personalizable': 'bi-gear',
        'Sala privada': 'bi-door-closed',
        'Frío': 'bi-snow',
        'Caliente': 'bi-fire',
        'Desayuno': 'bi-cup-hot',
        'Brunch': 'bi-cup-straw',
        'Almuerzo': 'bi-basket',
        'Merienda': 'bi-cup',
        'Comida': 'bi-egg-fried',
        'Cena': 'bi-moon',
        'Cóctel': 'bi-cup-straw',
        'Picoteo': 'bi-basket2',
        'Degustación': 'bi-stars',
        'Tardeo': 'bi-sun',
        'Noche': 'bi-moon-stars',
        'Bebida incluida': 'bi-cup',
        'Personal exclusivo': 'bi-person-badge',
        'Flexibilidad horaria': 'bi-clock',
        'Km 0': 'bi-geo-alt',
        'A pie': 'bi-walk',
        'Sentados': 'bi-chair',
        'A pie y sentado': 'bi-people'
      }
      return icons[caracteristica] || 'bi-star'
    }

    const getServicioIcon = (service) => {
      const icons = {
        chef: 'bi-egg-fried', camareros: 'bi-people', bartenders: 'bi-cup-straw', vajilla: 'bi-cup', cuberteria: 'bi-knife', limpieza: 'bi-broom', transporte: 'bi-truck', montaje: 'bi-hammer', logistica: 'bi-gear'
      }
      return icons[service] || 'bi-box-seam'
    }

    const formatServicioName = (service) => {
      return service.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
    }

    const alergenos = [
      { 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' },
      { value: 'altramuces', label: 'Altramuces' },
      { value: 'moluscos', label: 'Moluscos' }
    ]

    const opcionesEspeciales = [
      'Vegetariano',
      'Vegano',
      'Sin gluten (celíaco)',
      'Sin lactosa',
      'Halal',
      'Kosher',
      'Diabético',
      'Infantil',
      'Baja en sal'
    ]

    const caracteristicasList = [
      'Personalizable', 'Sala privada', 'Frío', 'Caliente', 'Desayuno', 'Brunch', 'Almuerzo', 'Merienda', 'Comida', 'Cena', 'Cóctel', 'Picoteo', 'Degustación', 'Tardeo', 'Noche',
      'Bebida incluida', 'Personal exclusivo', 'Flexibilidad horaria', 'Km 0', 'A pie', 'Sentados', 'A pie y sentado'
    ]

    // Función para limpiar los datos
    const clearData = () => {
      formData.value = {
        tipo_entrega: '',
        tipo_catering: '',
        min_comensales: null,
        max_comensales: null,
        duracion: null,
        is_menu: true,
        tipo_menu: '',
        nombre_menu: '',
        descripcion_menu: '',
        platos: [],
        tipo_articulo: '',
        nombre_articulo: '',
        descripcion_articulo: '',
        alergenos: [],
        opciones_especiales: [],
        caracteristicas: [],
        servicios_incluidos: {
          'Personal': {
            chef: false,
            camareros: false,
            bartenders: false
          },
          'Menaje': {
            vajilla: false,
            cuberteria: false
          },
          'Otros': {
            limpieza: false,
            transporte: false,
            montaje: false,
            logistica: false
          }
        }
      }
    }

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

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

    return {
      formData,
      nuevoPlato,
      agregarPlato,
      eliminarPlato,
      toggleCaracteristica,
      hasCaracteristica,
      nuevaOpcion,
      agregarOpcionEspecial,
      removeOpcionEspecial,
      toggleServicio,
      hasServicio,
      getCategoryIcon,
      getCaracteristicaIcon,
      getServicioIcon,
      formatServicioName,
      alergenos,
      opcionesEspeciales,
      caracteristicasList
    }
  }
}
</script>

<style scoped>
.create-catering-form {
  width: 100%;
}

.form-section {
  background: white;
  border-radius: 12px;
  padding: 0rem;
  margin-bottom: 1.2rem;
  margin-top: 0.5rem;
}

h3 {
  color: #2C3E50;
  margin-bottom: 1rem;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
}

.icon_i {
  font-size: 1.2rem;
  color: #800020;
}

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

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

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

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-bottom: 1rem;
}

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

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

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

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

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

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

.tag.special {
  background:rgb(232, 244, 245);
  color:rgb(46, 70, 125);
  border-radius: 6px;
  padding: 0.25rem 0.7rem;
  margin-right: 0.5rem;
  font-size: 0.9em;
  display: flex; /* Cambiado de inline-flex a flex */
  align-items: center;
  justify-content: space-between; /* Alinea texto a la izquierda y botón a la derecha */
  width: 100%; /* Para que ocupe todo el espacio de su celda */
  box-sizing: border-box; /* Asegura que el padding no rompa el layout */
}

.remove-tag {
  background: none;
  border: none;
  color: #dc3545;
  margin-left: 0.3rem;
  cursor: pointer;
  font-size: 1.1em;
  justify-content: right;
}

.input-group {
  display: flex;
  gap: 0.2rem;
  margin-bottom: 0.5rem;
}

.btn-add {
  padding: 0.8rem;
  background: #800020;
  color: white;
  font-size: 1.2rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.servicios-incluidos-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.servicios-incluidos-row {
  display: flex;
  gap: 2rem;
}
.servicios-incluidos-col,
.servicios-incluidos-col-full {
  background-color:rgb(247, 247, 247);
  border-radius: 12px;
  flex: 1;
  margin-bottom: 1.5rem;
  padding-bottom: 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;
}

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

@media (max-width: 768px) {
  .checkbox-group {
    grid-template-columns: 1fr;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .details-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Espaciado reducido solo en la sección de detalles específicos */
.form-section.detalles-especificos {
  margin-bottom: 0.5rem;
}
.form-section.detalles-especificos .form-row {
  margin-bottom: 1rem;
}
.form-section.detalles-especificos .form-group {
  margin-bottom: 0.5rem;
}

.plato-input {
  width: 100%;
  box-sizing: border-box;
}

.platos-list {
  margin-top: 0rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.plato-tag {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding-right: 0.5rem;
}

.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;
}
.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-btn-outer {
    width: 80px;
    min-width: 80px;
  }
  .servicio-label {
    max-width: 80px;
    font-size: 0.88rem;
  }
}
</style>
