.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; 
     opacity: 0; 
     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; 
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
     background-color: #fff;
     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;
  }
  
 
    /* Botón disparador */
    .open-btn {
      padding: 12px 24px;
      font-size: 16px;
      cursor: pointer;
      background: white;
      border: 1px solid #ccc;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  /* El Modal (Fondo oscuro) */
  .modal-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px); /* Efecto pro */
      display: none; /* Escondido por defecto */
      justify-content: center;
      align-items: flex-start; /* Un poco arriba del centro */
      padding-top: 10vh;
      z-index: 1000;
  }

  /* Caja del buscador */
  .search-box-intelligent {
      width: 90%;
      max-width: 600px;
      background: white;
      border-radius: 12px;
      box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2);
      overflow: hidden;
      animation: fadeIn 0.2s ease-out;
  }

  @keyframes fadeIn {
      from { opacity: 0; transform: scale(0.95); }
      to { opacity: 1; transform: scale(1); }
  }

  .input_search {
      width: 100%;
      padding: 18px;
      border: none;
      outline: none;
      border-bottom: 1px solid #eee;
  }

  .results-list {
      list-style: none; margin: 0; padding: 8px;
      max-height: 400px; overflow-y: auto;
  }

  .results-list li {
      padding: 12px;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: 0.2s;
  }

  .results-list li:hover { background: #f3f4f6; color: #007bff; }
  
  .hidden { display: none; }
  
  kbd {
      background: #eee; border-radius: 4px; padding: 2px 6px;
      font-size: 12px; margin-left: auto; color: #666;
  }