.search-container {
     position: relative;
     top: 10px;
     margin-right: 10px;
   }

   .search-wrapper {
     display: flex;
     align-items: center;
     border-radius: 25px;
     background-color: #fff;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     width: 40px; /* Ancho inicial colapsado */
     transition: width 0.3s ease;
   }

   .search-wrapper.expanded {
     width: 300px; /* Ancho expandido */
   }

   .search-input-SI {
    width: 100%;
    padding: 5px 20px;
    padding-left: 45px;
    border: 2px solid darkgray;
    border-radius: 25px;
    font-size: 16px;
    transition: all 0.3s ease;
     flex: 1;
     border: none;
     outline: none;
     padding: 10px;
     font-size: 16px;
     background: transparent;
     width: 0; /* Ocultar inicialmente */
     opacity: 0; /* Ocultar inicialmente */
     transition: opacity 0.3s ease, width 0.3s ease;
   }

   .search-wrapper.expanded .search-input-SI {
     width: 100%; /* Mostrar al expandir */
     opacity: 1; /* Mostrar al expandir */
   }

   .search-button {
     background: none;
     border: none;
     cursor: pointer;
     padding: 10px;
     color: #007bff;
     transition: color 0.3s ease;
   }

   .search-button:hover {
     color: #0056b3;
   }

   .search-results {
   position: absolute;
   z-index: 999999;
     list-style-type: none;
     padding: 0;
     margin: 10px 0 0;
     border: 1px solid #ddd;
     border-radius: 10px;
     background-color: #fff;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     max-height: 200px;
     overflow-y: auto;
     display: none;
   }

   .search-results li {
     padding: 10px 15px;
     cursor: pointer;
     display: flex;
     align-items: center;
     transition: background-color 0.3s ease;
   }

   .search-results li:hover {
     background-color: #f1f1f1;
   }

   .search-results li i {
     margin-right: 10px;
     color: #007bff;
   }

   .search-results li:hover i {
     color: #0056b3;
   }
   
   .loader_search {
   position: absolute;
   z-index: 999999;
     border: 4px solid #f3f3f3;
     border-top: 4px solid #007bff;
     border-radius: 50%;
     width: 30px;
     height: 30px;
     animation: spin 1s linear infinite;
     margin: 10px auto;
     display: none;
   }

   @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
   }
   .SearchSelect {
    background-color: #f0f0f0;
    color: #333;
  }