/*****************************************************
                *     estos son los selectores de mercado y activo   *
                *      que aparecen en la pestana de asset y summary *      
                *****************************************************/
/* Hay 3 contenedores, y 2 <select>:
  ------contenedores------> 
  id= TAfusion_selectors [barra principal; envuelve a los dos contenedores a la vez]
  id= marketCont [contenedor del selector market]
  id= assetCont [contenedor del selector asset]
  ------selectores------> 
  id= #selectMarket [selector de mercado]
  id= #selectAsset [selector de activo]

  Se trabaja con la biblioteca select2 y sus clases. Si no se pone ninguno de estos id delante, la aplicará a todos.
*/

/*******este es el contenedor principal*/
#TAfusion_selectors {
    color: white;
    background: #151f28;
    border: 1px solid black;
    margin-top: auto;
	height: 45px;
	display: flex;
    -moz-box-sizing: border-box; /*	lo mismo que box-sizing pero para navegadores antiguos */
    box-sizing: border-box;
	z-index: 2;
}

#marketCont,
#assetCont {
    display: flex;
    width: 50%;
    align-items: center !important;
    justify-content: center;
}

/*******estas son las clases de select2, vamos a poner siempre primero el id #marketCont y #assetCont 
Con eso conseguimos que se apliquen las reglas solo a las pestañas de asset y summary, ya que el resto tiene mas contenedores y necesita otras dimensiones*/

.select2-container { /* el contenedor del selector */
    width: 50% !important;
}

.select2-container--open { /* el contenedor del selector cuando se abre, como si estuviera focus*/
    background-color: #2c4154 !important;
    box-shadow: 0 0 2px #888888  !important;
    border-radius: 10px !important;
}
.select2-container--disabled { /* container deshabilitado */
    height: 0%;
    width: 0%;
}
/*----------este es el selector antes de clicarlo-------*/
.select2-selection--single { /* el selector */
    width: 100% !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 0 2px #888888  !important;
    background-color: transparent !important;
    transition: all 0.5s ease; /*ponemos aqui la transcicion para que ocurra tanto cuando pasas el hover como cuando lo quitas*/
}
.select2-selection--single:hover { /*  hover en el selector */
    background-color: #2c4154 !important;
    box-shadow: 0 0 2px #888888  !important;
    border-radius: 10px !important;
}

.select2-selection__rendered { /* el texto del selector */
    color: #fff !important;
	pointer-events: none !important;
}

.select2-selection__arrow { /* el contenedor de la flechita */
    
}

.select2-selection__arrow b { /* la flechita del selector (b)*/
    color: #398dff !important;
}
/*-------------------el apartado de busqueda------*/
.select2-search--dropdown .select2-search__field { 
    display: flex;
    width: 20% ;
    border-radius: 30px;
    box-sizing: border-box;
    margin-left: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    transition: width 0.3s ease;
    background-color: #dfdfdf;
}
.select2-search__field {
    padding-left: 22px !important; /*hacemos esto para que empiece a escribir mas a la izq, y asi no se sobreponga a la lupita*/
}
.select2-search--dropdown:hover .select2-search__field,
.select2-search--dropdown:focus .select2-search__field,
.select2-search__field:hover,
.select2-search__field:focus {
    width: 96%;
    border-radius: 10px;
}
/*-------el icono de busqueda------*/
.select2-search--dropdown {
    position: relative !important;
}
.search-icon {
    position: absolute; 
    top: 50%; 
    left: 15px; 
    transform: translateY(-50%); 
    color: #86BE6E; 
}
/*-------------------el CONTENEDOR del menu desplegable(options)------*/
.select2-dropdown { 
    display: block;
    background-color: #151f28;
    border: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: 0 1px 2px #888888; 
    box-sizing: border-box;
    position: absolute;
    left: 1rem !important; 
    width: calc(50% - 2rem) !important; 
    top: calc(100% + 8px) !important;
}

/*----------las opciones individuales dentro del selector-------*/
.select2-results__option {
    margin-top: 0px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    margin-bottom: 10px !important;
    border-radius: 10px !important; 
}

.select2-results__option:hover {
    border-radius: 10px !important;
    background-color: #2c4154 !important; 
}

.select2-results__option[aria-selected=true] {
    background-color: #2c4154 !important;
    color: #fff !important; 
}
                        /******************************************
                        *              MEDIA QUERIES              *
                        *******************************************/
@media (max-width: 650px) {
    #TAfusion_selectors {
        flex-direction: column; /* Disposicion a vertical */
        height: auto; /* Ajusta la altura*/
    }
    #marketCont, #assetCont {
        width: 100%; /* Cada contenedor ocupa el ancho completo */
    }
    #marketCont {
        border-bottom: solid 1px #313738; /* Una linea que los separa visualmente */
    }
    .select2-container {
        width: 100% !important; 
    }
    .select2-dropdown {
        width: calc(100% - 2rem) !important; 
        left: 1rem !important;
        top: calc(100% + 1px) !important;
    }
    .select2-selection--single {
        box-shadow: none !important;
    }
}

/* Day mode overrides: light background for select2 elements */
body:not(.dark-mode) .select2-selection--single {
    background-color: #f0f3f6 !important;
    border: 1px solid rgba(26,43,60,0.25) !important;
}
body:not(.dark-mode) .select2-selection__rendered {
    color: #1a2b3c !important;
}
body:not(.dark-mode) .select2-selection__arrow b {
    border-top-color: #1a2b3c !important;
}
body:not(.dark-mode) .select2-container--open {
    background-color: #f0f3f6 !important;
}
body:not(.dark-mode) .select2-dropdown {
    background-color: #f0f3f6 !important;
    border: 1px solid rgba(26,43,60,0.2) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}
body:not(.dark-mode) .select2-results__option {
    color: #1a2b3c !important;
}
body:not(.dark-mode) .select2-results__option:hover,
body:not(.dark-mode) .select2-results__option--highlighted[aria-selected] {
    background-color: #dde6f0 !important;
    color: #1a2b3c !important;
}
body:not(.dark-mode) .select2-results__option[aria-selected=true] {
    background-color: #c8d8ea !important;
    color: #1a2b3c !important;
}
body:not(.dark-mode) .select2-search--dropdown .select2-search__field {
    background-color: #e8ecf0 !important;
    color: #1a2b3c !important;
    border: 1px solid rgba(26,43,60,0.2) !important;
}