<template>
  <div class="create-musica-form" data-service-type="musica">
    <form @submit.prevent="handleSubmit">
      <!-- Información básica -->
      <div class="form-section">
        <h3><i class="bi icon_i bi-info-circle"></i> Información Básica</h3>
        <div class="form-row">
          <div class="form-group">
            <label for="musica_type">
              <i class="bi bi-music-note"></i> Tipo de Música*
            </label>
            <select id="musica_type" v-model="formData.musica_type" required class="select-granate">
              <option disabled value="">Selecciona un tipo</option>
              <option value="dj">DJ</option>
              <option value="musico">Músico</option>
            </select>
          </div>
          <div class="form-group">
            <label for="canciones">
              <i class="bi bi-music-note-list"></i> Tipo de Canciones*
            </label>
            <select id="canciones" v-model="formData.canciones" required class="select-granate">
              <option disabled value="">Selecciona un tipo</option>
              <option value="propias">Propias</option>
              <option value="versiones">Versiones</option>
            </select>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label for="generos">
              <i class="bi bi-tags"></i> Géneros*
            </label>
            <div class="custom-select-musica-generos" @click="toggleGenerosDropdown">
              <div class="selected-option">
                <div class="selected-tags-musica-generos" v-if="formData.generos.length > 0">
                  <span v-for="genero in formData.generos" :key="genero" class="selected-tag-musica-genero">
                    {{ getGeneroLabel(genero) }}
                    <i class="bi bi-x" @click.stop="removeGeneroTag(genero)"></i>
                  </span>
                </div>
                <span v-else>Géneros musicales</span>
                <i class="bi" :class="showGenerosDropdown ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
              </div>
              <div v-if="showGenerosDropdown" class="options-container">
                <div v-for="option in generosOptions" :key="option.value" class="option" :class="{ 'selected': formData.generos.includes(option.value) }" @click.stop="toggleGenero(option.value)">
                  {{ option.label }}
                </div>
              </div>
            </div>
          </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" class="cantidad-input select-granate" @change="onDuracionChange" />
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label for="instrumentos">
              <i class="bi bi-music-note"></i> Instrumentos
            </label>
            <div class="input-group">
              <input id="instrumentos" v-model="nuevoInstrumento" type="text" placeholder="Añade un instrumento y pulsa +" class="tag-input" />
              <button @click="agregarInstrumento" class="btn-add" type="button"><i class="bi bi-plus"></i></button>
            </div>
            <div class="tags-list">
              <span v-for="(inst, idx) in formData.instrumentos" :key="inst + idx" class="tag special">
                {{ inst }}
                <button type="button" @click="eliminarInstrumento(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-music-note-beamed"></i> Servicios musicales</h5>
            <div class="servicios-btns-grid">
              <div v-for="serv in serviciosMusicales" :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> Equipamiento y técnicos</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>

      <!-- Raider -->
      <div class="form-section raider-form">
        <h3 class="raider-title"><i class="bi bi-gear"></i>Raider Técnico</h3>
        <div v-if="musicaObligatoriaCompleta">
          <RaiderForm @input="onRaiderSaved" :account-id="accountId" :value="formData.raider" />
        </div>
        <div v-else class="raider-warning">
          <i class="bi bi-exclamation-triangle"></i>
          Rellena primero los campos obligatorios de música para poder seleccionar un Raider técnico.
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import RaiderForm from '../raider/RaiderFormMusica.vue'

export default {
  name: 'CreateMusica',
  components: { RaiderForm },
  props: {
    accountId: { type: String, required: true }
  },
  emits: ['service-data', 'clear-data'],
  data () {
    return {
      formData: {
        musica_type: '',
        canciones: '',
        generos: [],
        duracion: 1,
        instrumentos: [],
        caracteristicas: [],
        servicios_incluidos: [],
        raider: null
      },
      nuevoInstrumento: '',
      caracteristicasPredefinidas: [
        { value: 'amplificacion_incluida', label: 'Amplificación', icon: 'bi bi-volume-up' },
        { value: 'repertorio_propio', label: 'Repertorio original', icon: 'bi bi-music-note-list' },
        { value: 'mucho_repertorio', label: 'Repertorio amplio', icon: 'bi bi-collection' },
        { value: 'repertorio_variado', label: 'Repertorio variado', icon: 'bi bi-music-note-list' },
        { value: 'tematica_personalizada', label: 'Temática', icon: 'bi bi-stars' },
        { value: 'musica_ambiental', label: 'Música ambiental', icon: 'bi bi-cloud-music' },
        { value: 'musica_en_vivo', label: 'Música en vivo', icon: 'bi bi-boombox' },
        { value: 'musica_discoteca', label: 'Música de discoteca', icon: 'bi bi-music-note-list' },
        { value: 'musica_para_bailar', label: 'Música para bailar', icon: 'bi bi-music-player' },
        { value: 'interaccion_publico', label: 'Interacción con el público', icon: 'bi bi-emoji-smile' },
        { value: 'emotivo', label: 'Emotivo', icon: 'bi bi-heart' },
        { value: 'elegante', label: 'Elegante', icon: 'bi bi-gem' },
        { value: 'multi_genero', label: 'Multi-género', icon: 'bi bi-music-note-beamed' },
        { value: 'musicos_profesionales', label: 'Músicos profesionales', icon: 'bi bi-person-badge' },
        { value: 'instrumentacion_acustica', label: 'Instrumentación acústica', icon: 'bi bi-mic' },
        { value: 'instrumentacion_electrica', label: 'Instrumentación eléctrica', icon: 'bi bi-plug' },
        { value: 'formato_show', label: 'Formato show', icon: 'bi bi-lightning-fill' },
        { value: 'sonido_multizona', label: 'Sonido multizona', icon: 'bi bi-speaker-fill' },
        { value: 'adaptacion_acustica', label: 'Adaptación acústica', icon: 'bi bi-soundwave' },
        { value: 'repertorio_internacional', label: 'Repertorio multicultural', icon: 'bi bi-globe' },
        { value: 'pruebas_previas', label: 'Pruebas previas', icon: 'bi bi-check2-circle' },
        { value: 'adaptacion_horaria', label: 'Adaptación horaria', icon: 'bi bi-clock-history' },
        { value: 'servicio_express', label: 'Servicio express', icon: 'bi bi-lightning' },
        { value: 'sonido_3d', label: 'Sonido 3D', icon: 'bi bi-box' },
        { value: 'musica_adaptativa', label: 'Música adaptativa', icon: 'bi bi-arrow-repeat' },
        { value: 'formato_inmersivo', label: 'Formato inmersivo', icon: 'bi bi-boxes' },
        { value: 'economico', label: 'Económico', icon: 'bi bi-currency-euro' },
        { value: 'grandes_eventos', label: 'Grandes eventos', icon: 'bi bi-calendar-event' }
      ],
      serviciosMusicales: [
        { value: 'playlist_personalizada', label: 'Playlist personalizada', icon: 'bi bi-music-note-list' },
        { value: 'cancion_peticion', label: 'Canción por petición', icon: 'bi bi-music-note' },
        { value: 'karaoke', label: 'Karaoke', icon: 'bi bi-mic' },
        { value: 'animacion_musical', label: 'Animación musical', icon: 'bi bi-emoji-smile' }
      ],
      serviciosTecnicos: [
        { value: 'equipo_sonido', label: 'Equipo de sonido', icon: 'bi bi-speaker' },
        { value: 'iluminacion_escenario', label: 'Iluminación escenario', icon: 'bi bi-lightbulb' },
        { value: 'efectos_especiales', label: 'Efectos especiales', icon: 'bi bi-stars' },
        { value: 'tecnico_sonido', label: 'Técnico de sonido', icon: 'bi bi-person-badge' },
        { value: 'montaje_equipo', label: 'Montaje de equipo', icon: 'bi bi-tools' },
        { value: 'backline', label: 'Backline', icon: 'bi bi-music-player' }
      ],
      serviciosSeguridad: [
        { value: 'seguro_equipo', label: 'Seguro de equipo', icon: 'bi bi-shield-check' },
        { value: 'certificacion_sonido', label: 'Certificación de sonido', icon: 'bi bi-file-earmark-check' },
        { value: 'cumplimiento_normativa', label: 'Cumplimiento normativa', icon: 'bi bi-shield-lock' }
      ],
      generosOptions: [
        { value: '__clear__', label: 'Deseleccionar todos' },
        { 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' }
      ],
      showGenerosDropdown: false,
      generosDropdownRef: null
    }
  },
  computed: {
    musicaObligatoriaCompleta () {
      return (
        this.formData.musica_type &&
        this.formData.canciones &&
        Array.isArray(this.formData.generos) && this.formData.generos.length > 0 &&
        this.formData.duracion > 0
      )
    }
  },
  methods: {
    getGeneroLabel (val) {
      if (val === '__clear__') return 'Deseleccionar todos'
      const found = this.generosOptions.find(g => g.value === val)
      return found ? found.label : val
    },
    toggleGenerosDropdown (event) {
      if (event) event.stopPropagation()
      this.showGenerosDropdown = !this.showGenerosDropdown
    },
    toggleGenero (value) {
      if (value === '__clear__') {
        this.formData.generos = []
        this.showGenerosDropdown = false
        this.$emit('service-data', { ...this.formData })
        return
      }
      const idx = this.formData.generos.indexOf(value)
      if (idx === -1) {
        this.formData.generos.push(value)
      } else {
        this.formData.generos.splice(idx, 1)
      }
      this.$emit('service-data', { ...this.formData })
    },
    removeGeneroTag (value) {
      const idx = this.formData.generos.indexOf(value)
      if (idx !== -1) {
        this.formData.generos.splice(idx, 1)
        this.$emit('service-data', { ...this.formData })
      }
    },
    agregarInstrumento () {
      if (this.nuevoInstrumento && !this.formData.instrumentos.includes(this.nuevoInstrumento)) {
        this.formData.instrumentos.push(this.nuevoInstrumento)
        this.nuevoInstrumento = ''
        this.$emit('service-data', { ...this.formData })
      }
    },
    eliminarInstrumento (idx) {
      this.formData.instrumentos.splice(idx, 1)
      this.$emit('service-data', { ...this.formData })
    },
    toggleCaracteristica (valor) {
      const idx = this.formData.caracteristicas.indexOf(valor)
      if (idx === -1) {
        this.formData.caracteristicas.push(valor)
      } else {
        this.formData.caracteristicas.splice(idx, 1)
      }
      this.$emit('service-data', { ...this.formData })
    },
    toggleServicioIncluido (valor) {
      const idx = this.formData.servicios_incluidos.indexOf(valor)
      if (idx === -1) {
        this.formData.servicios_incluidos.push(valor)
      } else {
        this.formData.servicios_incluidos.splice(idx, 1)
      }
      this.$emit('service-data', { ...this.formData })
    },
    handleSubmit () {
      // En vez de hacer submit aquí, solo emito los datos al padre para que él gestione el submit global
      console.log('[CreateMusica] Emite datos a padre (service-data):', { ...this.formData })
      this.$emit('service-data', { ...this.formData })
    },
    closeGenerosDropdown (event) {
      // Solo cerrar si el click es fuera del dropdown
      if (!this.generosDropdownRef) return
      if (event && this.generosDropdownRef.contains(event.target)) return
      this.showGenerosDropdown = false
    },
    onRaiderSaved (raider) {
      console.log('[CreateMusica] Raider recibido en onRaiderSaved:', raider)
      this.formData.raider = raider
      this.$emit('service-data', { ...this.formData })
    },
    onDuracionChange () {
      this.$emit('service-data', { ...this.formData })
    },
    // Función para limpiar los datos
    clearData () {
      this.formData = {
        musica_type: '',
        canciones: '',
        generos: [],
        duracion: 1,
        instrumentos: [],
        caracteristicas: [],
        servicios_incluidos: [],
        raider: null
      }
    }
  },
  mounted () {
    this.generosDropdownRef = this.$el.querySelector('.custom-select-musica-generos')
    document.addEventListener('click', this.closeGenerosDropdown)
    // Escuchar el evento clear-data
    const element = document.querySelector('.create-musica-form')
    if (element) {
      element.addEventListener('clear-data', this.clearData)
    }
  },
  beforeUnmount () {
    document.removeEventListener('click', this.closeGenerosDropdown)
    // Limpiar el event listener cuando el componente se desmonte
    const element = document.querySelector('.create-musica-form')
    if (element) {
      element.removeEventListener('clear-data', this.clearData)
    }
  }
}
</script>

<style scoped>
.icon_i {
  font-size: 1.2rem;
  color: #800020;
}
.icon_y {
  font-size: 1.2rem;
  margin-right: 0.5rem;
  color: #333;
  }
.create-musica-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;
  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;
}

.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: 50px;
}

.select-granate:focus {
  border-color: #800020;
  box-shadow: 0 0 0 0.2rem rgba(128, 0, 32, 0.1);
}

.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: flex-start;
  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: center;
  width: 90px;
  min-width: 90px;
  justify-self: center;
  height: 100px;
  box-sizing: border-box;
}

.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;
  margin-left: auto;
  margin-right: auto;
}

.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;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

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

.custom-select-musica-generos {
  width: 100%;
  min-width: 0 !important;
  max-width: 100%;
  position: relative;
  margin-bottom: 0.5rem;
  cursor: pointer;
  box-sizing: border-box;
}
.selected-option {
  width: 100%;
  min-width: 0 !important;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1.5px solid #ccc;
  border-radius: 8px;
  padding: 0.3rem;
  font-size: 1rem;
  transition: border-color 0.2s;
  height: 75px;
  box-sizing: border-box;
  overflow-x: auto;
}
.selected-option:focus-within, .selected-option:active {
  border-color: #800020;
  box-shadow: 0 0 0 0.2rem rgba(128, 0, 32, 0.1);
}
.selected-tags-musica-generos {
  max-width: 100%;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  height: 55px;
  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-tag-musica-genero {
  display: inline-flex;
  align-items: center;
  background: #e6d1d7;
  color: #800020;
  padding: 0.5em 1em 0.5em 0.8rem;
  border-radius: 16px;
  font-size: 1rem;
  font-weight: 500;
  gap: 0.3rem;
  white-space: nowrap;
  height: 24px;
  margin-right: 0.4rem;
  margin-bottom: 0.2rem;
}
.selected-tag-musica-genero i {
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0rem;
  border-radius: 8%;
  margin-left: 0.2rem;
  transition: background-color 0.2s;
}
.selected-tag-musica-genero i:hover {
  font-size: 1rem;
}
.options-container {
  position: absolute;
  top: 110%;
  left: 0;
  width: 100%;
  background: #fff;
  border: 1.5px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  z-index: 10;
  max-height: 220px;
  overflow-y: auto;
  margin-top: 0.2rem;
}
.option {
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 1rem;
  color: #2C3E50;
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
.option.selected {
  background: #800020;
  color: #fff;
}

.option:hover {
  background: #f5c2c7;
  color: #333;
}

.raider-warning {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff3cd;
  color: #856404;
  border: 1.5px solid #ffeeba;
  border-radius: 8px;
  padding: 2rem 1rem;
  margin: 1rem 0;
  font-size: 1.1rem;
  text-align: center;
  gap: 1rem;
}
.raider-warning i {
  font-size: 2rem;
}

h3.raider-title {
  padding-bottom: -1.5rem;
  margin-bottom: 1.5rem;
}
</style>
