/* Alineación del buscador en el centro */
.search-container-wrapperindex {
    display: flex;
    justify-content: center;
    width: 100%;
    /* Añadimos un poco de padding para separar el contenido de los bordes */
    padding: 10px;
    /* Un borde suave para mejorar la estética */
    border: 1px solid #e0e0e0;
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para profundidad */
    background-color: #f9f9f9; /* Un color de fondo ligero */
    /* Establecemos una altura mínima para hacerlo más largo, puedes ajustarla */
    min-height: 200px; /* Por ejemplo, 200px de alto */
    align-items: flex-start; /* Alinea los ítems al inicio para que el contenido no se centre verticalmente si hay poco */
}

/* Estilos para la tarjeta que contiene los ítems seleccionados */
#selectedItems-card {
    width: 100%; /* Ocupa el 100% del ancho disponible dentro de search-container-wrapper */
    background-color: #ffffff; /* Fondo blanco para el área de contenido */
    border-radius: 6px; /* Bordes redondeados más pequeños */
    padding: 15px; /* Espaciado interno */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Sombra más ligera */
    /* Para manejar el desbordamiento si hay mucho contenido */
    overflow-y: auto; /* Habilita el scroll vertical si el contenido excede la altura */
    max-height: 160px; /* Altura máxima antes de que aparezca el scroll, ajusta según necesites */
}

/* Estilos para el contenido real dentro del div selectedItems */
#selectedItems {
    font-family: Arial, sans-serif; /* Fuente legible */
    color: #333; /* Color de texto oscuro */
    /* Hacemos el texto más pequeño */
    font-size: 0.9em; /* Por ejemplo, 90% del tamaño de fuente base */
    line-height: 1.5; /* Espaciado entre líneas para mejor lectura */
    /* Si los ítems son elementos de lista, puedes añadir esto */
    list-style: none; /* Elimina los puntos de la lista por defecto si usas ul/li */    
    padding: 0.5em 0.75em; /* Ajusta el padding para que no se vea tan apretado */
    margin: 0; /* Elimina margen por defecto de listas */
}

/* Estilos adicionales si los ítems dentro de #selectedItems son divs o p */
#selectedItems > div,
#selectedItems > p {
    margin-bottom: 5px; /* Espacio entre cada ítem */
    padding: 8px 0; /* Espaciado interno para cada ítem */
    border-bottom: 1px dashed #eee; /* Línea divisoria suave */
}

#selectedItems > div:last-child,
#selectedItems > p:last-child {
    border-bottom: none; /* No queremos línea divisoria en el último ítem */
}

#selectedItems .badge .btn-close:hover {
            opacity: 1;
        }

#selectedItems .badge .btn-close {
            font-size: 0.7em; /* Botón de cerrar más pequeño */
            margin-left: 0.5em;
            padding: 0;
            background-color: transparent;
            border: none;
            opacity: 0.7;
            filter: invert(1) grayscale(100%) brightness(200%); /* Asegura que la 'x' sea visible en fondos de colores */
        }




        /* Alineación del buscador en el centro */
        .search-container-wrapper {
            display: flex;
            justify-content: center;
            width: 100%; /* Asegura que el contenedor de búsqueda ocupe todo el ancho disponible */
        }

        /* Asegurar que el input del buscador y el contenedor de resultados tengan el mismo ancho */
        #formSrchIndex .input-group, #searchForm .input-group {
             width: 60%; /* O el ancho deseado para el buscador */
             max-width: 891.34px; /* Tu ancho original si aplica */
        }
        #search, #searchInput {
             flex-grow: 1; /* Permite que el input ocupe el espacio restante */
        }
      
      
        /* Nuevos estilos para buscador LLM */
        #loadingBox {
          margin-top: 15px;
          font-size: 15px;
          color: #333;
          background-color: white;
          opacity: 0.9;
          padding: 0.5rem;
          border-radius: 5px;
        }

        .spinner {
          display: inline-block;
          width: 18px;
          height: 18px;
          border: 3px solid #ddd;
          border-top: 3px solid #007a3d;
          border-radius: 50%;
          animation: spin 0.8s linear infinite;
          vertical-align: middle;
          margin-right: 8px;
        }

        @keyframes spin {
          to {
            transform: rotate(360deg);
          }
        }

        #errorBox {
          margin-top: 15px;
          color: #b00020;
          background-color: white;
          opacity: 0.9;
          padding: 0.5rem;
          border-radius: 5px;
        }