/* Estilo para el contenedor del formulario (rojo) */
#contenedor-formulario {
  background-color: #FF3801; /* Fondo rojo */
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  display: flex;
  justify-content: center;  /* Centra los elementos horizontalmente */
  align-items: center;      /* Centra los elementos verticalmente */
  gap: 15px;                /* Espacio entre los elementos */
  max-width: 100%;          /* Asegura que el formulario no se haga demasiado grande */
  overflow: hidden;         /* Oculta cualquier contenido extra */
  width: 100%;              /* Asegura que el contenedor ocupe todo el ancho disponible */
  box-sizing: border-box;   /* Asegura que el padding no afecte el tamaño total */
}

/* Estilo para el formulario */
#formulario-busqueda {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: 100%;
  flex-wrap: wrap;
  box-sizing: border-box;
}

/* Estilo para el campo de búsqueda con la lupa dentro */
#clave-busqueda-wrapper {
  display: flex;
  align-items: center;
  background-color: white;
  border: 2px solid #D3014D;
  padding: 5px;
  border-radius: 5px;
  width: 300px; /* Ajusta el tamaño del cuadro de búsqueda */
  flex-shrink: 0;  /* Evita que se encoja */
}

/* Estilo para el campo de texto */
#clave-busqueda {
  border: none;
  padding: 10px;
  flex-grow: 1;  /* El input crece para ocupar el espacio disponible */
  width: 0; /* Ancho 0 para que ocupe todo el espacio disponible */
  outline: none;
}

/* Estilo para la lupa dentro del input */
#clave-busqueda-wrapper img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  cursor: pointer;
}

/* Estilo para los selectores */
#parent-select, #child-select, #envios {
  border: 2px solid #D3014D;
  padding: 10px;
  border-radius: 5px;
  width: 150px; /* Ajusta el tamaño de los selectores */
  flex-shrink: 0;  /* Evita que se encojan */
}

/* Estilo para el botón de búsqueda */
#boton-buscar {
  background-color: #A7006D;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  flex-shrink: 0;  /* Evita que el botón se encoja */
}

/* Consultas para pantallas pequeñas (celulares) */
@media (max-width: 768px) {
  /* Cambio de flex-direction a columna en dispositivos pequeños */
  #formulario-busqueda {
    flex-direction: column; /* Cambia la dirección de los elementos a columna */
    align-items: center; /* Alinea los elementos al centro */
    gap: 10px; /* Reduce el espacio entre elementos */
  }

  /* El campo de búsqueda ocupará el 100% del ancho */
  #clave-busqueda-wrapper {
    width: 100%; /* El cuadro de búsqueda ocupará todo el ancho disponible */
    margin-bottom: 10px; /* Añadimos un margen para separar el campo de búsqueda */
  }

  /* Reducir el tamaño de la lupa en dispositivos pequeños */
  #clave-busqueda-wrapper img {
    width: 18px;  /* Lupa más pequeña en móviles */
    height: 18px; /* Lupa más pequeña en móviles */
  }

  /* Los selectores ocuparán el 100% del ancho */
  #parent-select, #child-select, #envios {
    width: 100%; /* Los selectores ocupan todo el ancho disponible */
    margin-bottom: 10px; /* Añadimos margen entre ellos */
  }

  /* El botón de búsqueda ocupará todo el ancho disponible en móvil */
  #boton-buscar {
    width: 100%; /* El botón ocupa todo el ancho disponible */
    padding: 12px; /* Hace el botón más grande para que sea fácil de presionar */
  }
}