/* Reset de estilos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
      body {
        font-family: Arial, sans-serif;
        background-color: #f8f9fa;
        margin: 0;
        padding: 0;
      }

      /* Buscador fijo en la parte superior */
      #top {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        padding: 0;
        /* Elimina el padding superior */
        background-color: #f0ecec;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        z-index: 100;
      }

      /* Estilo de la barra de menú */
      .menu-bar {
        position: relative;
        /* Cambiado de fixed a relative */
        display: flex;
        justify-content: left;
        /* Centra los enlaces en la barra de menú */
        background-color: #0a0a36;
        /* Color de fondo de la barra de menú */
        color: white;
        /* Color del texto */
        padding: 10px 0;
        /* Padding superior e inferior */
        top: 0px;
        /* Ajusta la posición en la parte superior */
        left: 0;
        right: 0;
      }

      .menu-bar a {
        color: white;
        text-decoration: none;
        margin: 0 15px;
        font-size: 0.9rem;
      }

      .menu-bar a:hover {
        color: #ea940c;
      }

      .fluid-container {
        width: 100%;
        max-width: 1000px;
        margin: auto;
        /* Centra el contenedor */
        margin-top: 0px;
        /* Elimina el margen superior */
        padding: 10px;
      }

      /* Estilo del selector de motor de búsqueda */
      .search-container {
        display: flex;
        justify-content: center;
        /* Centra el contenido */
        align-items: center;
        padding: 0 20px;
      }

      .search-selector {
        position: relative;
        width: 150px; /* Ancho fijo para el selector */
        margin-right: 10px; /* Espacio entre selector y campo de búsqueda */
        padding: 0px;
        background-color: #ffffff;
      }

      .selected-option {
        padding: 6px;
        font-size: 0.9rem;
        color: #333;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #ced4da;
        border-radius: 0px;
      }

      .custom-options {
        position: absolute;
        top: calc(100% + 4px);
        /* Alineación ajustada */
        left: 0;
        width: 100%;
        background-color: #ffffff;
        border: 1px solid #ced4da;
        border-radius: 4px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        display: none;
        /* Oculto por defecto */
        z-index: 1001;
      }

      .custom-options div {
        padding: 10px;
        cursor: pointer;
        font-size: 1rem;
        color: #333;
        transition: background 0.3s ease;
      }

      .custom-options div:hover {
        background-color: #f4f4f4;
      }

      /* Estilo del campo de texto y botón */
      .input-group {
        display: flex;
      }

      .input-group input {
        flex: 2;
        /* Cambia a 2 para que ocupe más espacio */
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border: 1px solid #ced4da;
        border-right: none;
        padding: 6px; /* Agregado para mejor apariencia */
        min-width: 350px; /* Establecer un ancho mínimo */
      }

      .input-group button {
        background-color: #1ED760;
        /* Cambia el color de fondo */
        color: #ffffff;
        /* Cambia el color del texto */
        font-weight: 700;
        border: none;
        padding: 0 20px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        cursor: pointer;
        /* Cursor de mano */
      }

      .input-group button:hover {
        background-color: #fd0;
        color: #000;
        /* Cambia el color de fondo al pasar el mouse */
      }

#contenedor {
  display: flex; /* Usa flexbox para alinear los elementos en una fila */
  justify-content: center; /* Centra los elementos horizontalmente */
  align-items: center; /* Centra los elementos verticalmente */
  text-align: center; /* Alinea el texto al centro */
  width: 100%; /* Asegúrate de que el contenedor tenga un ancho */
}


footer {
    background-color: #0a0a36;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}
    
/* Estilo para el contenedor de búsqueda 
.search-container {
  display: flex;
  justify-content: center;
  padding: 1rem;
}


.search-container form {
  display: flex;
  max-width: 500px;
  width: 100%;
}


.search-container input[type="text"] {
  flex: 1;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  outline: none;
}


.search-container button {
  padding: 0 1rem;
  background-color: #007bff;
  color: white;
  border: 1px solid #007bff;
  border-left: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: background 0.3s ease;
}

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


@media (max-width: 576px) {
  .search-container form {
    flex-direction: column;
  }

  .search-container input[type="text"],
  .search-container button {
    border-radius: 4px;
    width: 100%;
  }

  .search-container button {
    margin-top: 0.5rem;
    border-left: 1px solid #007bff;
  }
} --- */