/* botn de busqueda */
#zonabusqueda{
	border:0px var(--bs-gray-300) solid;
	padding:10px 5px 0px 5px;
	/*background-color:#FF0900;*/
	display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom:20px;
}

#zonabusqueda .ms-srch-sb>input {font-size: 1rem; width:20vw;}

#zonabusqueda div[data-name="SearchBox"] .ms-srch-sb {
    width: fit-content;
    border-radius: 50px;
    overflow: hidden;
    padding: 8px 12px;
    box-sizing: content-box;
    min-width:400px;
}

#zonabusqueda .ms-srch-sb-border {border: 1px solid var(--bs-gray-300);}
   
 
/* Estilo personalizado para el cuadro de búsqueda */
div[data-name="SearchBox"] .ms-srch-sb {
    width: 400px; /* Ajusta el ancho del cuadro de búsqueda a tu gusto */
    border-radius: 20px; /* Hace que los bordes sean redondos */
    overflow: hidden; /* Oculta cualquier desbordamiento de contenido */
}

/* Estilo personalizado para el botón de búsqueda */
div[data-name="SearchBox"] .ms-srch-sb > button {
    background-color: #f9d71c; /* Cambia el color de fondo del botón de búsqueda a amarillo */
    border: none; /* Quita el borde predeterminado del botón */
    width: 40px; /* Ajusta el ancho del botón a tu gusto */
    height: 40px; /* Ajusta la altura del botón a tu gusto */
    border-radius: 20px; /* Hace que los bordes del botón sean redondos */
    overflow: hidden; /* Oculta cualquier desbordamiento de contenido */
    float: right; /* Hace que el botón se coloque a la derecha del cuadro de búsqueda */
    margin-top: 4px; /* Ajusta la posición vertical del botón */
}

/* Agrega la imagen de la lupa amarilla al botón de búsqueda */
div[data-name="SearchBox"] .ms-srch-sb > button:before {
    content: "";
    background-image: url("ruta/a/la/imagen/lupa-amarilla.png");
    background-size: 20px 20px;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 10px 0 0 10px; /* Ajusta la posición de la imagen de la lupa dentro del botón */
    background-color:fuchsia;
}

.ms-srch-sb > .ms-srch-sb-searchLink {
    margin-left: 172px !important;
    height: 25px;
    width: 20px;
}