/* Botones */
.search-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
}
/* Buscador */
.search-container {
  position: relative;
  display: flex;
  align-items: center;
}
/* Form oculto */
.search-form {
  position: absolute;
  right: 40px; /* 🔥 se abre hacia la izquierda */
  width: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease;
}
/* Estado activo */
.search-container.active .search-form {
  width: 250px;
  opacity: 1;
}
/* Ajustes internos */
.search-form .input-group {
  width: 100%;
}
.search-form input {
  width: 100%;
}
/* Evita que el hint bloquee escritura */
.tt-hint {
  pointer-events: none;
}
.tt-hint {
  position: absolute;
  z-index: 1 !important;
  color: transparent !important; /*clave: evita que tape el placeholder */
}
/* Asegura que el input real funcione */
.tt-input {
  position: relative;
  z-index: 2;
  background-color: transparent !important;
}
/* 🔥 MUY IMPORTANTE: permitir interacción cuando abre */
.search-container.active .search-form {
  pointer-events: auto;
}
/* Cuando está cerrado no interactúa */
.search-form {
  pointer-events: none;
}
.search-container.active .twitter-typeahead {
  width: 100% !important;
}
.input-group.search-box-container .twitter-typeahead, .input-group.search-box-container .twitter-typeahead input.form-control {
  border-radius: 100px;
}
.search-box-container .btn-default {
  color: #ffffff;
  background-color: transparent;
  border: none;
}
@media (max-width: 767px) {
  .search-box-container {
    display: table;
    position: initial;
    width: 100%;
  }
  .search-box-container .twitter-typeahead {
    width: 100%;
    opacity: 1;
    visibility: visible;
    padding-left: 10px;
    border: 1px solid #ccc;
    border-radius: 50px;
    border-top-left-radius: 50px !important;
    border-bottom-left-radius: 50px !important;
  }
  .search-box-container .input-group-btn {
    display: table-cell;
    width: 60px;
    height: 40px;
    left: 10px;
  }
  .input-group.search-box-container {
    padding: 15px 0 10px 0;
  }
  .mainnav-toggle-search-row {
    background-color: #f7f7f7;
    margin: 0;
  }
  .mainnav-toggle-search {
    width: 100%;
  }
  .search-box-container .fa-search:before {
    content: "\f002";
    color: #008776;
  }
  .input-group.search-box-container .twitter-typeahead, .input-group.search-box-container .twitter-typeahead input.form-control {
    border-radius: 100px;
    border: none;
    box-shadow: none;
    background: transparent;
  }
  .tt-hint {
    border: 1px solid #ccc !important;
  }
}