/* Contenedor principal de la lupa y el buscador */
        .search-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        /* Lupa (siempre visible) */
        .search-icon {
            cursor: pointer;
            font-size: 24px;
            background: none;
            border: none;
            color: #333;
            position: relative;
            z-index: 2;
        }

        /* Campo de búsqueda (inicialmente oculto y sin ancho) */
        #searchInput {
            display: none;
            width: 0;
            transition: width 0.3s ease-in-out;
            border: 1px solid #ccc;
            border-radius: 20px;
            padding: 5px 15px;
            color: black;
        }

        /* Cuando el campo de búsqueda está activo, se muestra y coge ancho */
        #searchInput.active {
            display: block;
            width: 250px;
        }

        /* Estilos del desplegable de resultados */
        #searchResults {
            display: none;
            position: absolute;
            right: 0;
            top: 40px;
            background: white;
            color: black;
            border: 1px solid #ccc;
            width: 310px;
            max-height: 300px;
            overflow-y: auto;
            border-radius: 5px;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        }

        .search-item {
            padding: 8px;
            cursor: pointer;
            border-bottom: 1px solid #eee;
        }

        .search-item:hover {
            background: #f0f0f0;
            color: blue;
        }
        
        /* Estilos para el elemento select y sus opciones (si los usas en otra parte de la página) */
        select, select option {
            color: black;
            background: white;
        }